detail.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
  1. <template>
  2. <view class="detail-page white-wrap">
  3. <view>
  4. <!-- 基础信息模块 -->
  5. <view class="section white-wrap base-info-wrap" v-if="info">
  6. <view class="title">
  7. {{ info.CompanyApprovalDetail.CompanyName }}
  8. <van-tag v-if="info.CompanyApprovalDetail.ApplyMethod === 3" color="#ECF5FF" text-color="#4A83F1"
  9. style="margin-bottom:0;margin-left: 10rpx;">第{{ info.CompanyApprovalDetail.ApprovalCount }}次申请</van-tag>
  10. </view>
  11. <view class="base-info-list">
  12. <view v-for="item in baseInfo" :key="item.key">
  13. <text class="lable">{{ item.key }}:</text>
  14. <text :style="{ color: item.color }">
  15. {{ item.val }}
  16. </text>
  17. <van-tag v-if="item.tag" color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px">
  18. {{ item.tag }}
  19. </van-tag>
  20. </view>
  21. <view v-if="info && info.CompanyApprovalDetail.ApproveStatus === '驳回'">
  22. <text class="lable" style="color:#FE6B7C">驳回理由:</text>
  23. <text style="color:#FE6B7C">{{ info.CompanyApprovalDetail.ApproveRemark }}</text>
  24. </view>
  25. </view>
  26. <image :src="info.CompanyApprovalDetail.statusImg" mode="aspectFill" class="status-img"></image>
  27. <!-- view class="status-img pass-img" v-if="info.CompanyApprovalDetail.ApproveStatus==='已审批'"></view>
  28. <view class="status-img fail-img" v-if="info.CompanyApprovalDetail.ApproveStatus==='驳回'"></view> -->
  29. </view>
  30. <!-- 品种模块 -->
  31. <view class="section white-wrap variety-wrap" v-if="varietyInfo">
  32. <view class="title">{{ varietyInfo.title }}</view>
  33. <view class="variety-list">
  34. <view class="variety-item flex" v-for="item in varietyInfo.list" :key="item.ClassifyName">
  35. <view class="lable">{{ item.ClassifyName }}:</view>
  36. <view class="content">
  37. <van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
  38. :key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 合同模块 -->
  44. <view class="section white-wrap contract-wrap" v-if="constractFiles.length !== 0">
  45. <view class="title">查看合同附件</view>
  46. <view class="contract-list">
  47. <view class="contract-item" v-for="item in constractFiles" :key="item.url"
  48. @click="preViewContract(item)">
  49. <image class="contract-img" mode="aspectFill" :src="item.img"></image>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 客户信息模块 -->
  54. <view class="section white-wrap customer-wrap" v-if="showCustomerInfo && info">
  55. <view class="title">客户信息</view>
  56. <view class="customer-main-info">
  57. <view class="customer-info-item">
  58. <text>客户名称:</text>
  59. <text>{{ info.CompanyApprovalDetail.CompanyName }}</text>
  60. </view>
  61. <view class="customer-info-item">
  62. <text>社会信用码:</text>
  63. <text>{{ info.CompanyApprovalDetail.CreditCode }}</text>
  64. </view>
  65. <view class="customer-info-item">
  66. <text>地址:</text>
  67. <text>{{ info.CompanyApprovalDetail.Address }}</text>
  68. </view>
  69. </view>
  70. <view class="customer-info-list flex">
  71. <view class="customer-info-item flex" style="width:50%">
  72. <text style="flexShrink:0">客户类型:</text>
  73. <text>{{ info.CompanyApprovalDetail.CompanyType }}</text>
  74. </view>
  75. <view class="customer-info-item flex" style="width:50%">
  76. <text style="flexShrink:0">客户状态:</text>
  77. <text>{{ info.CompanyApprovalDetail.Status }}</text>
  78. </view>
  79. <view class="customer-info-item flex" style="width:50%">
  80. <text style="flexShrink:0">客户来源:</text>
  81. <text>{{ info.CompanyApprovalDetail.Source }}</text>
  82. </view>
  83. <view class="customer-info-item flex" style="width:50%">
  84. <text style="flexShrink:0">行业:</text>
  85. <text>{{ info.CompanyApprovalDetail.IndustryName }}</text>
  86. </view>
  87. <view class="customer-info-item flex" style="width:50%">
  88. <text style="flexShrink:0">申请销售:</text>
  89. <text>{{ info.CompanyApprovalDetail.SellerName }}</text>
  90. </view>
  91. </view>
  92. </view>
  93. <!-- 流程模块 -->
  94. <view class="section process-wrap">
  95. <view class="title" style="font-size: 16px;font-weight: bold;">审批流程</view>
  96. <steps :data="info.FlowNodeList"></steps>
  97. </view>
  98. </view>
  99. <!-- 审批按钮 -->
  100. <view class="fix-bottom-wrap btns-wrap flex" v-if="info &&info.CompanyApprovalDetail.OpButton&& info.CompanyApprovalDetail.ApproveStatus === '待审批'">
  101. <button class="pass-btn" @click="handlePass">通过</button>
  102. <button class="refuse-btn" @click="handleRefuse">驳回</button>
  103. </view>
  104. <van-dialog id="van-dialog" />
  105. </view>
  106. </template>
  107. <script>
  108. import {apiCustomeDetail,apiCustomeContractDetail,apiCustomeApprove} from '@/api/approve/custome.js'
  109. import {preViewFile} from '../utils/util.js'
  110. import steps from '../components/steps.vue'
  111. export default {
  112. components:{
  113. steps
  114. },
  115. computed: {
  116. //是否显示客户信息模块
  117. showCustomerInfo() {
  118. if (this.info && (this.info.CompanyApprovalDetail.ApplyMethod === 2 || this.info.CompanyApprovalDetail
  119. .ApplyMethod === 4)) {
  120. return false;
  121. } else {
  122. return true;
  123. }
  124. },
  125. },
  126. data() {
  127. return {
  128. id: null,
  129. info: null,
  130. baseInfo: null, //顶部基础信息
  131. varietyInfo: null, //品种信息
  132. constractFiles: [], //合同文件
  133. };
  134. },
  135. onLoad(options) {
  136. this.id = options.id
  137. },
  138. onShow() {
  139. this.getDetail()
  140. },
  141. onPullDownRefresh() {
  142. this.getDetail()
  143. setTimeout(() => {
  144. uni.stopPullDownRefresh()
  145. }, 1000)
  146. },
  147. methods: {
  148. // 同意
  149. async handlePass() {
  150. const res = await apiCustomeApprove({
  151. CompanyApprovalId: Number(this.info.CompanyApprovalDetail.CompanyApprovalId),
  152. CompanyContractId: Number(this.info.CompanyApprovalDetail.CompanyContractId),
  153. CompanyId: Number(this.info.CompanyApprovalDetail.CompanyId),
  154. Remark: "",
  155. Status: 1,
  156. })
  157. if (res.code === 200) {
  158. this.$dialog.alert({
  159. title: "处理成功",
  160. confirmButtonColor: "#5890FB",
  161. }).then(() => {
  162. // on close
  163. this.getDetail()
  164. });
  165. }
  166. },
  167. //拒绝
  168. handleRefuse(){
  169. const data=this.info.CompanyApprovalDetail
  170. uni.navigateTo({
  171. url:`./reason?CompanyApprovalId=${data.CompanyApprovalId}&CompanyContractId=${data.CompanyContractId}&CompanyId=${data.CompanyId}`
  172. })
  173. },
  174. // 获取审批单详情
  175. async getDetail() {
  176. const res = await apiCustomeDetail({
  177. ApprovalId: this.id
  178. })
  179. if (res.code === 200) {
  180. this.info = res.data
  181. // 初始化状态
  182. let statusImg=''
  183. switch(res.data.CompanyApprovalDetail.ApproveStatus){
  184. case '已审批':
  185. statusImg=require('../static/pass-icon.png')
  186. break;
  187. case '驳回':
  188. statusImg=require('../static/fail-icon.png')
  189. break;
  190. }
  191. this.info.CompanyApprovalDetail.statusImg=statusImg
  192. let contractInfo = null
  193. // 如果有合同id 则获取合同数据
  194. if (res.data.CompanyApprovalDetail.CompanyContractId != 0) {
  195. const contractRes = await apiCustomeContractDetail({
  196. CompanyId: res.data.CompanyApprovalDetail.CompanyId,
  197. CompanyContractId: res.data.CompanyApprovalDetail.CompanyContractId
  198. })
  199. if (contractRes.code === 200) {
  200. contractInfo = contractRes.data
  201. }
  202. }
  203. this.initTopInfo(res.data, contractInfo)
  204. this.initVarietyInfo(res.data, contractInfo)
  205. this.initContractFiles(res.data, contractInfo)
  206. }
  207. },
  208. // 预览合同文件
  209. preViewContract(e) {
  210. if (e.type === "pdf") {
  211. preViewFile(e.url)
  212. } else {
  213. uni.previewImage({
  214. urls: [e.url]
  215. })
  216. }
  217. },
  218. // 初始化合同文件数据
  219. initContractFiles(info, contractInfo) {
  220. let arr = [];
  221. if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 1 || info
  222. .CompanyApprovalDetail.ApplyMethod === 5)) {
  223. const reg = /\.(pdf)$/;
  224. arr = contractInfo.ImgUrl.split("#").map((item) => {
  225. if (reg.test(item)) {
  226. return {
  227. type: "pdf",
  228. url: item,
  229. img: require("@/pages-approve/static/pdf.png"),
  230. };
  231. } else {
  232. return {
  233. type: "img",
  234. url: item,
  235. img: item,
  236. };
  237. }
  238. });
  239. }
  240. this.constractFiles = arr
  241. },
  242. // 初始化顶部数据
  243. initTopInfo(info, contractInfo) {
  244. let arr = [];
  245. //试用转正式
  246. if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 1) {
  247. uni.setNavigationBarTitle({
  248. title:'试用转正式'
  249. })
  250. arr = [{
  251. key: "合同编号",
  252. val: contractInfo.ContractCode,
  253. tag: contractInfo.ContractType,
  254. },
  255. {
  256. key: "合同期限",
  257. val: `${contractInfo.StartDate}~${contractInfo.EndDate}`.replace(/-/g, '.'),
  258. },
  259. {
  260. key: "合同金额",
  261. val: contractInfo.Money+'元',
  262. color: "#FE6B7C",
  263. },
  264. {
  265. key: "付款方式",
  266. val: contractInfo.PayMethod,
  267. },
  268. {
  269. key: "付款渠道",
  270. val: contractInfo.PayChannel,
  271. },
  272. {
  273. key: "申请时间",
  274. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  275. },
  276. {
  277. key: "申请理由",
  278. val: info.CompanyApprovalDetail.ApplyReasons || "无",
  279. },
  280. ];
  281. }
  282. //冻结转试用
  283. if (info && info.CompanyApprovalDetail.ApplyMethod === 2) {
  284. uni.setNavigationBarTitle({
  285. title:'冻结转试用'
  286. })
  287. arr = [{
  288. key: "客户状态",
  289. val: info.CompanyApprovalDetail.Status,
  290. },
  291. {
  292. key: "冻结期限",
  293. val: `${info.CompanyApprovalDetail.FreezeStartDate}~${info.CompanyApprovalDetail.FreezeEndDate}`
  294. .replace(/-/g, '.'),
  295. },
  296. {
  297. key: "到期天数",
  298. val: info.CompanyApprovalDetail.FreezeExpireDays,
  299. },
  300. {
  301. key: "申请销售",
  302. val: info.CompanyApprovalDetail.ApplyRealName,
  303. },
  304. {
  305. key: "申请时间",
  306. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  307. },
  308. {
  309. key: "解冻理由",
  310. val: info.CompanyApprovalDetail.ApplyReasons,
  311. },
  312. ];
  313. }
  314. //试用延期
  315. if (info && info.CompanyApprovalDetail.ApplyMethod === 3) {
  316. uni.setNavigationBarTitle({
  317. title:'试用延期'
  318. })
  319. arr = [{
  320. key: "地址",
  321. val: info.CompanyApprovalDetail.Address,
  322. },
  323. {
  324. key: "申请时间",
  325. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  326. },
  327. {
  328. key: "申请理由",
  329. val: info.CompanyApprovalDetail.ApplyReasons,
  330. },
  331. ];
  332. }
  333. //原销售申请领取
  334. if (info && info.CompanyApprovalDetail.ApplyMethod === 4) {
  335. uni.setNavigationBarTitle({
  336. title:'原销售申请领取'
  337. })
  338. arr = [{
  339. key: "客户状态",
  340. val: info.CompanyApprovalDetail.Status,
  341. },
  342. {
  343. key: "原销售",
  344. val: info.CompanyApprovalDetail.SellerName,
  345. },
  346. {
  347. key: "申请销售",
  348. val: info.CompanyApprovalDetail.ApplyRealName,
  349. },
  350. {
  351. key: "申请时间",
  352. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  353. },
  354. {
  355. key: "申请理由",
  356. val: info.CompanyApprovalDetail.ApplyReasons,
  357. },
  358. ];
  359. }
  360. //服务更新
  361. if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 5) {
  362. uni.setNavigationBarTitle({
  363. title:'服务更新'
  364. })
  365. arr = [{
  366. key: "合同编号",
  367. val: contractInfo.ContractCode,
  368. tag: contractInfo.ContractType,
  369. },
  370. {
  371. key: "合同期限",
  372. val: `${contractInfo.StartDate}~${contractInfo.EndDate}`.replace(/-/g, '.'),
  373. },
  374. {
  375. key: "合同金额",
  376. val: contractInfo.Money+'元',
  377. color: "#FE6B7C",
  378. },
  379. {
  380. key: "付款方式",
  381. val: contractInfo.PayMethod,
  382. },
  383. {
  384. key: "付款渠道",
  385. val: contractInfo.PayChannel,
  386. },
  387. {
  388. key: "申请时间",
  389. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  390. },
  391. {
  392. key: "申请理由",
  393. val: info.CompanyApprovalDetail.ApplyReasons || "无",
  394. },
  395. ];
  396. }
  397. this.baseInfo = arr
  398. },
  399. // 初始化品种信息
  400. initVarietyInfo(info, contractInfo) {
  401. let usertype = this.$store.state.userInfo.ProductName; //用户身份类型admin,ficc,权益
  402. let arr = [];
  403. let obj = {
  404. title: "",
  405. list: [],
  406. };
  407. //试用转正式
  408. if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 1) {
  409. obj.title = "购买品种";
  410. arr = contractInfo.PermissionList;
  411. if (!arr) return obj;
  412. arr.forEach((item) => {
  413. let temarr = item.Items.filter((e) => {
  414. let flag = item.CheckList.includes(e.ChartPermissionId);
  415. if (flag) return e;
  416. });
  417. if (temarr.length !== 0) {
  418. obj.list.push({
  419. ClassifyName: item.ClassifyName,
  420. Items: temarr,
  421. });
  422. }
  423. });
  424. }
  425. //冻结转试用
  426. if (info && info.CompanyApprovalDetail.ApplyMethod === 2) {
  427. obj.title = "申请品种";
  428. if (usertype === "ficc") {
  429. arr = info.FiccPermissionList;
  430. } else if (usertype === "权益") {
  431. arr = info.PermissionList;
  432. } else if (usertype === "admin") {
  433. if (info.FiccPermissionList) {
  434. arr = [...info.FiccPermissionList];
  435. }
  436. if (info.PermissionList) {
  437. arr = [...info.PermissionList];
  438. }
  439. }
  440. if (!arr) return obj;
  441. arr.forEach((item) => {
  442. let temarr = item.Items.filter((e) => {
  443. let flag = item.CheckList.includes(e.ChartPermissionId);
  444. if (flag) return e;
  445. });
  446. if (temarr.length !== 0) {
  447. obj.list.push({
  448. ClassifyName: item.ClassifyName,
  449. Items: temarr,
  450. });
  451. }
  452. });
  453. }
  454. //试用延期
  455. if (info && info.CompanyApprovalDetail.ApplyMethod === 3) {
  456. obj.title = "申请品种";
  457. if (usertype === "ficc") {
  458. arr = info.FiccPermissionList;
  459. } else if (usertype === "权益") {
  460. arr = info.PermissionList;
  461. } else if (usertype === "admin") {
  462. if (info.FiccPermissionList) {
  463. arr = [...info.FiccPermissionList];
  464. }
  465. if (info.PermissionList) {
  466. arr = [...info.PermissionList];
  467. }
  468. }
  469. if (!arr) return obj;
  470. arr.forEach((item) => {
  471. let temarr = item.Items.filter((e) => {
  472. let flag = item.CheckList.includes(e.ChartPermissionId);
  473. if (flag) return e;
  474. });
  475. if (temarr.length !== 0) {
  476. obj.list.push({
  477. ClassifyName: item.ClassifyName,
  478. Items: temarr,
  479. });
  480. }
  481. });
  482. }
  483. //原销售申请领取
  484. if (info && info.CompanyApprovalDetail.ApplyMethod === 4) {
  485. obj.title = "申请品种";
  486. if (usertype === "ficc") {
  487. arr = info.FiccPermissionList;
  488. } else if (usertype === "权益") {
  489. arr = info.PermissionList;
  490. } else if (usertype === "admin") {
  491. if (info.FiccPermissionList) {
  492. arr = [...info.FiccPermissionList];
  493. }
  494. if (info.PermissionList) {
  495. arr = [...info.PermissionList];
  496. }
  497. }
  498. if (!arr) return obj;
  499. arr.forEach((item) => {
  500. let temarr = item.Items.filter((e) => {
  501. let flag = item.CheckList.includes(e.ChartPermissionId);
  502. if (flag) return e;
  503. });
  504. if (temarr.length !== 0) {
  505. obj.list.push({
  506. ClassifyName: item.ClassifyName,
  507. Items: temarr,
  508. });
  509. }
  510. });
  511. }
  512. //服务更新
  513. if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 5) {
  514. obj.title = "购买品种";
  515. arr = contractInfo.PermissionList;
  516. if (!arr) return obj;
  517. arr.forEach((item) => {
  518. let temarr = item.Items.filter((e) => {
  519. let flag = item.CheckList.includes(e.ChartPermissionId);
  520. if (flag) return e;
  521. });
  522. if (temarr.length !== 0) {
  523. obj.list.push({
  524. ClassifyName: item.ClassifyName,
  525. Items: temarr,
  526. });
  527. }
  528. });
  529. }
  530. this.varietyInfo = obj
  531. }
  532. },
  533. }
  534. </script>
  535. <style lang="scss">
  536. .detail-page {
  537. width: 100%;
  538. min-height: 100vh;
  539. padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  540. padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  541. }
  542. .section {
  543. padding: 30rpx 34rpx;
  544. border-bottom: 14rpx solid #f5f5f5;
  545. &:last-child {
  546. margin-bottom: 0;
  547. border: none;
  548. }
  549. .title {
  550. font-size: 16px;
  551. font-weight: bold;
  552. margin: 0 0 40rpx 0;
  553. }
  554. .lable {
  555. color: #666;
  556. flex-shrink: 0;
  557. font-size: 14px;
  558. }
  559. }
  560. .base-info-wrap {
  561. position: relative;
  562. .title {
  563. margin: 0 0 40rpx 0;
  564. &::before {
  565. content: "";
  566. display: inline-block;
  567. width: 15px;
  568. height: 17px;
  569. background-image: url("@/static/man.png");
  570. background-size: cover;
  571. background-repeat: no-repeat;
  572. margin-right: 10rpx;
  573. position: relative;
  574. top: 4rpx;
  575. }
  576. }
  577. .base-info-list {
  578. font-size: 14px;
  579. color: #000;
  580. view {
  581. margin-bottom: 10px;
  582. display: flex;
  583. }
  584. }
  585. .status-img{
  586. position: absolute;
  587. width: 220rpx;
  588. height: 220rpx;
  589. right: 0;
  590. top: 100rpx;
  591. }
  592. }
  593. .variety-wrap {
  594. .variety-item {
  595. padding-top: 24rpx;
  596. padding-bottom: 24rpx;
  597. border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
  598. }
  599. .variety-item:first-child {
  600. padding-top: 0;
  601. }
  602. .variety-item:last-child {
  603. border-bottom: none;
  604. }
  605. .tag {
  606. margin-right: 10rpx;
  607. margin-bottom: 10rpx;
  608. }
  609. }
  610. .contract-list {
  611. display: flex;
  612. flex-wrap: wrap;
  613. .contract-img {
  614. width: 102rpx;
  615. height: 120rpx;
  616. }
  617. }
  618. .customer-main-info {
  619. padding-bottom: 40rpx;
  620. border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
  621. }
  622. .customer-info-item {
  623. font-size: 14px;
  624. color: #999;
  625. margin-bottom: 20rpx;
  626. }
  627. .customer-info-list {
  628. flex-wrap: wrap;
  629. padding-top: 20rpx;
  630. }
  631. .btns-wrap {
  632. justify-content: center;
  633. button {
  634. width: 220rpx;
  635. height: 70rpx;
  636. border-radius: 28px;
  637. border: none;
  638. margin: 0 10px;
  639. font-size: 14px;
  640. color: #fff;
  641. line-height: 70rpx;
  642. }
  643. .pass-btn {
  644. background-color: #5890fb;
  645. }
  646. .refuse-btn {
  647. background-color: #f55768;
  648. }
  649. }
  650. </style>