Merge branch 'master' of http://8.136.199.33:3000/Karsa/crm_front_v3

src/App.vue

@@ -5,9 +5,9 @@ const { routeKey } = useRouteKey()
 </script>
 
 <template>
-<div id="app">
-  <router-view :key="routeKey"/>
-</div>
+<!-- <div id="app"> -->
+  <router-view/>
+<!-- </div> -->
 </template>
 
 <style scoped>

src/router/modules/approvalRoutes.js

@@ -0,0 +1,80 @@
+import Home from '@/layouts/index.vue'
+
+export default [
+    {
+		path: "/",
+		component: Home,
+		name: '审批列表',
+		hidden: false,
+		icon_path: require('@/assets/img/home/custom_ico.png'),
+		children: [
+            // {
+			// 	path: "contractapprovallist",
+			// 	component: () => import("@/views/contract_manage/approvalList.vue"),
+			// 	name: "合同审批",
+			// 	hidden: false,
+			// 	meta: {
+			// 		keepAlive: false
+			// 	}
+			// },
+			// {
+			// 	path: 'contractdetailapr',
+			// 	component: () => import('@/views/contract_manage/contractDetail.vue'),
+			// 	name: "合同详情",
+			// 	hidden: false,
+			// 	meta: {
+			// 		pathFrom: 'contractapprovallist',
+			// 		pathName: '合同审批',
+			// 		keepAlive: false
+			// 	}
+			// },
+			// {
+			// 	path: 'contractdetaildcapr',
+			// 	component: () => import('@/views/contract_manage/contractDetailDC.vue'),
+			// 	name: "代付合同详情",
+			// 	hidden: false,
+			// 	meta: {
+			// 		pathFrom: 'contractapprovallist',
+			// 		pathName: '合同审批',
+			// 		keepAlive: false
+			// 	}
+			// },
+			{
+				path: 'approvalList',
+				component: () => import('@/views/custom_manage/approvalList.vue'),
+				name: '客户审批',
+				hidden: false,
+				meta: {
+					keepAlive: false
+				}
+			},
+			// {
+			// 	path: "sealApprovalList",
+			// 	component: () => import('@/views/seal_manage/approvalList.vue'),
+			// 	name: '用印审批',
+			// 	hidden: false,
+			// 	meta: {
+			// 		keepAlive: false
+			// 	}
+			// },
+			// {
+			// 	path: "addSeal",
+			// 	component: () => import('@/views/seal_manage/updateSeal.vue'),
+			// 	name: '新增用印',
+			// 	hidden: true,
+			// 	meta: {
+			// 		keepAlive: false
+			// 	}
+			// },
+			// {
+			// 	path: "editSeal",
+			// 	component: () => import('@/views/seal_manage/updateSeal.vue'),
+			// 	name: '编辑用印',
+			// 	hidden: true,
+			// 	meta: {
+			// 		keepAlive: false
+			// 	}
+			// }
+		]
+	},
+]

src/styles/global.scss

@@ -343,4 +343,13 @@ textarea {
 // .highcharts-credits{ display:none; }
 // .highcharts-axis-title{ display:none; }
 .highcharts-legend-item tspan{ font-size:14px; font-weight:400; color:#960000; }
-// highcharts-legend-item highcharts-spline-series highcharts-color-undefined highcharts-series-2
+// highcharts-legend-item highcharts-spline-series highcharts-color-undefined highcharts-series-2
+
+.el-dialog__header{
+  background-color: $color-primary;
+  color: #fff;
+  margin-right: 0;
+  .el-dialog__headerbtn{
+    .el-dialog__close{color: #fff;}
+  }
+}

src/utils/date.js

@@ -14,4 +14,13 @@ export function TimeDifference(){
    			end_D = e_y + '-' + e_m + '-' + e_d;
    	dateArr.push(end_D);
 	return dateArr;
+}
+
+// 显示时间为 2021.07.22 
+export function formatTime(time){
+	if(time==='0001-01-01 00:00:00'||time==='0000-00-00 00:00:00'){
+		return '--'
+	}else{
+		return time.replace(/-/g,'.')
+	}
 }

src/views/custom_manage/approvalList.vue

@@ -0,0 +1,670 @@
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != '/approvalUpdate' && from.path != '/approvalTurn' && from.path != '/updateCustom' && from.path != '/customDetail' && from.path != '/turnCustom') {
+      sessionStorage.removeItem('approvalListBack')
+    }
+    next()
+  }
+})
+
+</script>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { customInterence } from "@/api/api.js";
+import { formatTime } from '@/utils/date'
+import { onBeforeRouteLeave, useRouter } from "vue-router";
+import ContractInfo from './components/ContractInfo.vue'
+import CapprovalDia from './components/CapprovalDia.vue'
+
+const router = useRouter()
+
+onBeforeRouteLeave((to, form, next) => {
+  let backData = {
+    page_no: page_no.value,
+    status: status.value,
+    keyword: search_txt.value
+  }
+  sessionStorage.setItem('approvalListBack', JSON.stringify(backData))
+  next()
+})
+
+const Role = computed(() => {
+  return localStorage.getItem("Role") || "";
+});
+
+const RoleType = computed(() => {
+  return localStorage.getItem("RoleType") || "";
+});
+
+/* 获取表格数据 */
+const tableData = ref([]);
+const pageSize = ref(10)
+let page_no = ref(sessionStorage.getItem('approvalListBack') ? JSON.parse(sessionStorage.getItem('approvalListBack')).page_no : 1)
+const total = ref(0)
+const isShowloadding = ref(false);
+function getTableData() {
+  isShowloadding.value = true;
+  let status = "";
+  if (Role.value == "ficc_admin" || Role.value == "rai_admin") {
+    status = status.value == "全部" ? "" : status.value;
+  }
+  customInterence
+    .approvalList({
+      PageSize: pageSize.value,
+      CurrentIndex: page_no.value,
+      Status: status,
+      KeyWord: search_txt.value,
+    })
+    .then((res) => {
+      isShowloadding.value = false;
+      if (res.Ret === 200) {
+        res.Data.List &&
+          res.Data.List.forEach((item) => {
+            item.StartDate = item.StartDate.replace(/-/g, ".");
+            item.EndDate = item.EndDate.replace(/-/g, ".");
+            item.FreezeStartDate = item.FreezeStartDate ? item.FreezeStartDate.replace(/-/g, ".") : "";
+            item.FreezeEndDate = item.FreezeEndDate ? item.FreezeEndDate.replace(/-/g, ".") : "";
+          });
+        tableData.value = res.Data.List || [];
+        total.value = res.Data.Paging.Totals;
+      }
+    });
+}
+
+onMounted(() => {
+  if (sessionStorage.getItem('approvalListBack')) {
+    let backData = JSON.parse(sessionStorage.getItem('approvalListBack'));
+    search_txt.value = backData.keyword
+    page_no.value = backData.page_no
+    status.value = backData.status
+  }
+  getTableData()
+});
+
+// 状态改变
+const status = ref("待审批");
+const statusArr = ref(["全部", "待审批", "已审批"]);
+function changeStatus() {
+  page_no.value = 1
+  getTableData()
+}
+
+//搜索
+const search_txt = ref("");
+function handlSearch() {
+  status.value = '全部'
+  page_no.value = 1
+  getTableData()
+}
+
+function handleCurrentChange(page) {
+  page_no.value = page
+  getTableData()
+}
+
+/* 详情页 */
+function goDetail(item) {
+  router.push({
+    path: '/customDetail',
+    query: {
+      id: item.CompanyId
+    }
+  })
+}
+
+// 申请转正、续约申请、补充协议 合同信息弹窗
+const contractDialog = ref({
+  show: false,
+  cusdata: null,//客户信息（列表用户数据）
+  type: '',//类型 申请转正、续约申请、补充协议
+})
+function contractInfoDialogClose() {
+  contractDialog.value = {
+    show: false,
+    cusdata: null,//客户信息（列表用户数据）
+    type: '',//类型 申请转正、续约申请、补充协议
+  }
+}
+
+// 申请转正、续约申请、补充协议 选择合同类型弹窗 
+const contractModel = ref({
+  show: false,
+  data: null,//客户信息（列表用户数据）
+  type: '',//类型 申请转正、续约申请、补充协议
+})
+// 申请转正、续约申请、补充协议点击合同类型
+function handleContractModel(e) {
+  contractModel.value.show = false
+  if (e === '非标准') {
+    if (contractModel.value.type === '申请转正') {
+      sessionStorage.setItem('companyInfo', JSON.stringify(contractModel.value.data))
+      router.push({
+        path: '/turnCustom',
+        query: {
+          isReapply: true
+        }
+      })
+    } else if (contractModel.value.type === '续约申请') {
+      sessionStorage.setItem('companyInfo', JSON.stringify(contractModel.value.data))
+      router.push({
+        path: '/updateCustom',
+        query: {
+          isReapply: true
+        }
+      })
+    } else if (contractModel.value.type === '补充协议') {
+      sessionStorage.setItem('companyInfo', JSON.stringify(contractModel.value.data))
+      router.push({
+        path: '/addAgreement',
+        query: {
+          isReapply: true
+        }
+      })
+    }
+    return
+  }
+  // 标准合同
+  contractDialog.value.show = true
+  contractDialog.value.type = contractModel.value.type
+  contractDialog.value.cusdata = contractModel.value.data
+}
+
+/* 撤回 */
+const isRetract = ref(false)
+let revokeItem = null
+function retractHandle(item) {
+  revokeItem = item;
+  customInterence.Revoke({
+    CompanyId: item.CompanyId
+  }).then(res => {
+    isRetract.value = true;
+    getTableData();
+  })
+}
+
+/* 重新申请 */
+const isApply = ref(false)//申请弹窗
+const applyForm = ref({})//申请信息
+const applyTit = ref('')//申请标题
+function editHandle(item) {
+  console.log(item);
+  isRetract.value = false;
+  /* 转正申请 */
+  // ApplyContractType:申请合同类型  0 非标  1 标准
+  if (item.ApplyMethod == 1) {
+    contractModel.value = {
+      show: false,
+      data: item,
+      type: '申请转正'
+    }
+    if (item.ApplyContractType == 0) {
+      handleContractModel('非标准')
+    } else {
+      handleContractModel('标准')
+    }
+
+  } else if (item.ApplyMethod == 2 || item.ApplyMethod == 3 || item.ApplyMethod == 4) {
+    applyForm.value = item;
+    applyTit.value = item.ApplyMethod == 2 ? '申请解冻' : item.ApplyMethod == 3 ? '申请延期' : '申请领取';
+    isApply.value = true;
+    /* 续约申请 */
+  } else if (item.ApplyMethod == 5) {
+    contractModel.value = {
+      show: false,
+      data: item,
+      type: '续约申请'
+    }
+    if (item.ApplyContractType == 0) {
+      handleContractModel('非标准')
+    } else {
+      handleContractModel('标准')
+    }
+  } else if (item.ApplyMethod == 6) {
+    contractModel.value = {
+      show: false,
+      data: item,
+      type: '补充协议'
+    }
+    if (item.ApplyContractType == 0) {
+      handleContractModel('非标准')
+    } else {
+      handleContractModel('标准')
+    }
+  }
+}
+
+const isReject = ref(false)//驳回弹窗
+const rejectTxt = ref('')//驳回理由
+/* 驳回理由弹窗 */
+function openHandle(item) {
+  rejectTxt.value = item.ApproveRemark;
+  isReject.value = true;
+}
+
+const approvalInfo = ref({})//审批信息
+const isApproval = ref(false)//审批弹窗
+const approval_title = ref('')//审批标题
+const isLookApproval = ref(false)//是否查看审批信息
+function approvalOver() {
+  isApproval.value = false
+  getTableData()
+}
+/* 审批*/
+function openApproval(item) {
+  /* 转正审批 */
+  if (item.ApplyMethod == 1) {
+    sessionStorage.setItem('companyInfo', JSON.stringify(item));
+    router.push({
+      path: '/approvalTurn',
+      query: {
+        id: item.CompanyId,
+        contractId: item.CompanyContractId
+      }
+    })
+  } else if (item.ApplyMethod == 2 || item.ApplyMethod == 3 || item.ApplyMethod == 4) {//item.ApprovalCount
+    approvalInfo.value = item;
+    approval_title.value = item.ApplyMethod == 2 ? '解冻审批' : item.ApplyMethod == 3 ? '延期审批' : '领取审批';
+    let str = item.ApprovalCount > 0 ? `(第${item.ApprovalCount}次申请)` : ''
+    approval_title.value = approval_title.value + str
+    isLookApproval.value = false;
+    isApproval.value = true;
+  } else if (item.ApplyMethod == 5 || item.ApplyMethod == 6) { // 续约审批
+    sessionStorage.setItem('companyInfo', JSON.stringify(item));
+    router.push({
+      path: '/approvalUpdate',
+      query: {
+        id: item.CompanyId,
+        contractId: item.CompanyContractId,
+        ApplyMethod: item.ApplyMethod
+      }
+    })
+  }
+}
+/* 查看审批信息 */
+function openApprovalDtl(item) {
+  /* 转正审批 */
+  if (item.ApplyMethod == 1) {
+    sessionStorage.setItem('companyInfo', JSON.stringify(item));
+    router.push({
+      path: '/approvalTurn',
+      query: {
+        id: item.CompanyId,
+        contractId: item.CompanyContractId,
+        isLook: true
+      }
+    })
+  } else if (item.ApplyMethod == 2 || item.ApplyMethod == 3 || item.ApplyMethod == 4) {
+    approvalInfo.value = item;
+    // this.approval_title = item.ApplyMethod == 2?'解冻审批':item.ApplyMethod == 3?'延期审批'+(item.ApprovalCount!=0?'(第'+item.ApprovalCount+'次申请)':''):'领取审批';
+    approval_title.value = item.ApplyMethod == 2 ? '解冻审批' : item.ApplyMethod == 3 ? '延期审批' : '领取审批';
+    let str = item.ApprovalCount > 0 ? `(第${item.ApprovalCount}次申请)` : ''
+    approval_title.value = approval_title.value + str
+    isLookApproval.value = true;
+    isApproval.value = true;
+  } else if (item.ApplyMethod == 5) { // 续约审批
+    sessionStorage.setItem('companyInfo', JSON.stringify(item));
+    router.push({
+      path: '/approvalUpdate',
+      query: {
+        id: item.CompanyId,
+        contractId: item.CompanyContractId,
+        isLook: true
+      }
+    })
+  }
+}
+
+/* 取消 */
+function cancelHandle(type) {
+  if (type === 1) {
+    isRetract.value = false
+  } else if (type === 2) {
+    isReject.value = false
+  } else if (type === 3) {
+    isApproval.value = false
+  }
+}
+
+
+
+</script>
+
+<template>
+  <div class="approvalList_container">
+    <div class="approvalList_top">
+      <el-select
+        v-model="status"
+        placeholder="请选择状态"
+        style="width: 200px; margin-right: 16px"
+        @change="changeStatus"
+        v-if="Role == 'ficc_admin' || Role == 'rai_admin'"
+      >
+        <el-option
+          v-for="item in statusArr"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+        </el-option>
+      </el-select>
+      <el-input
+        placeholder="公司名称/信用代码"
+        v-model="search_txt"
+        @input="handlSearch"
+        clearable
+        style="max-width: 500px"
+        :prefix-icon="Search"
+      >
+      </el-input>
+    </div>
+    <div class="approvalList_cont">
+      <el-table
+        ref="userTable"
+        :data="tableData"
+        v-loading="isShowloadding"
+        element-loading-text="数据加载中..."
+        border
+      >
+        <el-table-column prop="CompanyName" label="客户名称" align="center">
+          <template #default="scope">
+            <span
+              style="color: #409eff; cursor: pointer"
+              @click="goDetail(scope.row)"
+              class="customName"
+              >{{ scope.row.CompanyName }}</span
+            ></template
+          >
+        </el-table-column>
+        <el-table-column prop="CompanyType" label="客户类型" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.CompanyType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="IndustryName" label="所属行业" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.IndustryName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="SellerName" label="所属销售" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.SellerName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="ApprovalTime"
+          label="提交审批时间"
+          align="center"
+        >
+          <template #default="scope">
+            <span>{{ formatTime(scope.row.ApprovalTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="CreateTime" label="审批时间" align="center">
+          <template #default="scope">
+            <span
+              v-if="
+                scope.row.ApproveStatus !== '待审批' &&
+                scope.row.ApproveStatus !== '已撤回'
+              "
+              >{{ formatTime(scope.row.ApproveTime) }}
+            </span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="Status" label="客户状态" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.Status }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ApproveContent" label="待审内容" align="center">
+          <template #default="scope">
+            <span
+              :style="
+                Role == 'ficc_seller' || Role == 'rai_seller'
+                  ? ''
+                  : status == '已审批'
+                  ? 'color:#666;'
+                  : 'color:#F00;'
+              "
+              >{{ scope.row.ApproveContent }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="ApproveStatus" label="当前状态" align="center">
+          <template #default="scope">
+            <span
+              :style="
+                scope.row.ApproveStatus == '已审批'
+                  ? ''
+                  : scope.row.ApproveStatus == '已撤回'
+                  ? 'color:#409EFF'
+                  : 'color:#F00'
+              "
+              >{{
+                scope.row.ApproveStatus == "驳回"
+                  ? "已驳回"
+                  : scope.row.ApproveStatus
+              }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="ApproveStatus" label="申请人" align="center">
+          <template #default="scope">
+            <span
+              :style="scope.row.ApproveStatus == '待审批' ? 'color:#F00' : ''"
+              >{{ scope.row.ApplyRealName }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          min-width="110"
+          v-if="Role != 'admin'"
+        >
+          <template #default="scope">
+            <div style="color: #4099ef; font-size: 24px">
+              <span
+                class="editsty"
+                style="marginright: 10px"
+                @click="retractHandle(scope.row)"
+                v-if="
+                  scope.row.OpButton.Cancel &&
+                  scope.row.ApproveStatus == '待审批'
+                "
+                >撤回</span
+              >
+              <template
+                v-if="
+                  scope.row.ApproveStatus == '驳回' &&
+                  (Role == 'ficc_seller' || Role == 'rai_seller')
+                "
+              >
+                <span
+                  class="editsty"
+                  style="marginright: 10px"
+                  @click="openHandle(scope.row)"
+                  >驳回理由</span
+                >
+                <span
+                  class="editsty"
+                  style="marginright: 10px"
+                  @click="editHandle(scope.row)"
+                  >重新申请</span
+                >
+              </template>
+              <span
+                class="editsty"
+                style="marginright: 10px"
+                @click="openApproval(scope.row)"
+                v-if="
+                  scope.row.OpButton.Approval &&
+                  scope.row.ApproveStatus == '待审批'
+                "
+                >审批</span
+              >
+              <span
+                class="editsty"
+                @click="openApprovalDtl(scope.row)"
+                v-if="
+                  (Role == 'ficc_admin' || Role == 'rai_admin') &&
+                  scope.row.ApproveStatus == '已审批'
+                "
+                >审批信息</span
+              >
+              <template
+                v-if="
+                  scope.row.ApproveStatus == '已撤回' &&
+                  (Role == 'ficc_seller' || Role == 'rai_seller')
+                "
+              >
+                <span
+                  class="editsty"
+                  style="marginright: 10px"
+                  @click="editHandle(scope.row)"
+                  >重新申请</span
+                >
+                <span
+                  class="deletesty"
+                  style="marginright: 10px"
+                  @click="delHandle(scope.row)"
+                  >删除</span
+                >
+              </template>
+            </div>
+          </template>
+        </el-table-column>
+        <template v-slot:empty>
+          <div style="lineheight: 44px; margin: 60px 0; color: #999">
+            <img
+              src="~@/assets/img/cus_m/nodata.png"
+              alt=""
+              style="display: block; width: 160px; height: 128px; margin: auto"
+            />
+            <span>暂无数据</span>
+          </div>
+        </template>
+      </el-table>
+      <el-col :span="24" class="toolbar">
+        <el-pagination
+          layout="total,prev,pager,next,jumper"
+          background
+          :current-page="page_no"
+          @current-change="handleCurrentChange"
+          :page-size="pageSize"
+          :total="total"
+          style="float: right"
+        >
+        </el-pagination>
+      </el-col>
+    </div>
+  </div>
+
+  <!-- 撤回弹窗 -->
+  <el-dialog
+    v-model="isRetract"
+    :close-on-click-modal="false"
+    :show-close="false"
+    custom-class="appro_dialog"
+    center
+    width="22%"
+  >
+    <div
+      style="
+        display: flex;
+        justify-content: center;
+        alignitems: center;
+        margin: 20px 0 50px;
+        color: #606266;
+        fontsize: 16px;
+      "
+    >
+      <i
+        class="el-icon-success"
+        style="fontsize: 20px; color: #409eff; marginright: 10px"
+      ></i>
+      <span>撤回成功</span>
+    </div>
+    <div style="display: flex; justify-content: center; margin: 0 0 25px">
+      <el-button
+        type="primary"
+        style="width: 112px; marginright: 24px"
+        @click="editHandle(revokeItem)"
+        >重新申请</el-button
+      >
+      <el-button
+        style="width: 112px"
+        @click="cancelHandle(1)"
+        type="primary"
+        plain
+        >关闭</el-button
+      >
+    </div>
+  </el-dialog>
+
+  <!-- 驳回弹窗 -->
+  <el-dialog
+    title="驳回理由"
+    v-model="isReject"
+    :close-on-click-modal="false"
+    custom-class="appro_dialog"
+    @close="cancelHandle(2)"
+    center
+    top="20vh"
+    width="22%"
+  >
+    <div style="display: flex; margin: 13px 0 50px; color: #606266">
+      <span>{{ rejectTxt }}</span>
+    </div>
+    <div style="display: flex; justify-content: flex-end; margin: 0 0 26px">
+      <el-button type="primary" style="width: 80px" @click="cancelHandle(2)"
+        >知道了</el-button
+      >
+    </div>
+  </el-dialog>
+
+  <!-- 审批弹窗 -->
+  <CapprovalDia
+    :isLook="isLookApproval"
+    :approvalInfo="approvalInfo"
+    :isApproval="isApproval"
+    :title="approval_title"
+    @cancelHandle="cancelHandle(3)"
+    @approvalOver="approvalOver"
+  ></CapprovalDia>
+
+  <!-- 申请转正、续约申请、补充协议标准合同模式下 合同信息弹窗 -->
+  <ContractInfo
+    :initData="contractDialog"
+    @contractInfoDialogClose="contractInfoDialogClose"
+  ></ContractInfo>
+</template>
+
+<style lang="scss" scoped>
+.approvalList_container {
+  .approvalList_top {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid #ececec;
+    padding: 20px 30px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  }
+  .approvalList_cont {
+    min-height: calc(100vh - 260px);
+    padding: 20px 30px 80px;
+    background: #fff;
+    margin-top: 20px;
+    position: relative;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  }
+}
+</style>

src/views/custom_manage/components/CapprovalDia.vue

@@ -0,0 +1,316 @@
+<script setup>
+import { ref } from 'vue'
+import { customInterence } from '@/api/api.js'
+import {formatTime} from '@/utils/date'
+import ICON from '@/utils/icon'
+
+const props = defineProps({
+  /* 标题 */
+  title: {
+    type: String
+  },
+  isApproval: {
+    type: Boolean
+  },
+  approvalInfo: {
+    type: Object
+  },
+  isLook: {
+    type: Boolean,
+    default: false
+  }
+})
+
+
+</script>
+
+<template>
+  <el-dialog
+    :model-value="props.isApproval"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+    @close="cancelHandle"
+    center
+    top="5vh"
+    v-dialogDrag
+    width="1000px"
+    class="Capprovaldia_container"
+  >
+    <template #header>
+      <div style="display: flex; alignitems: center">
+        <img
+          :src="
+            props.title == '领取审批'
+              ? ICON.pick
+              : title == '解冻审批'
+              ? ICON.lock
+              : ICON.delay
+          "
+          style="color: #fff; width: 16px; height: 16px; marginright: 5px"
+        />
+        <span style="fontsize: 16px">{{ props.title }}</span>
+      </div>
+    </template>
+
+    <div class="dialog_cont">
+      <div class="left_cont">
+        <div class="detail_info">
+          <!-- 领取审批 -->
+          <template v-if="title.indexOf('领取审批') != -1">
+            <div class="info_item">
+              <span>客户名称：{{ props.approvalInfo.CompanyName }}</span>
+              <span class="label-style"
+                >客户状态：{{ props.approvalInfo.Status }}</span
+              >
+            </div>
+            <div class="info_item">
+              <span
+                >原&nbsp;&nbsp;销&nbsp;售：{{ props.approvalInfo.SellerName }}</span
+              >
+              <!-- <span class="label-style">申请时间：{{props.approvalInfo.ApprovalTime}}</span> -->
+              <span></span>
+            </div>
+            <CapprovalPession
+              :perssionList="perssionList"
+              :approvalTime="props.approvalInfo.ApprovalTime"
+            />
+            <div class="info_item">
+              <span>申请理由：{{ props.approvalInfo.ApplyReasons }}</span>
+              <span></span>
+            </div>
+          </template>
+          <!-- 解冻审批 -->
+          <template v-else-if="title.indexOf('解冻审批') != -1">
+            <div class="info_item">
+              <span>客户名称：{{ props.approvalInfo.CompanyName }}</span>
+              <span class="label-style"
+                >客户状态：{{ props.approvalInfo.Status }}</span
+              >
+            </div>
+            <div class="info_item">
+              <span
+                >冻结期限：{{ formatTime(props.approvalInfo.FreezeStartDate)}}-{{
+                  formatTime(props.approvalInfo.FreezeEndDate)
+                }}</span
+              >
+              <span class="label-style"
+                >到期天数：{{ props.approvalInfo.FreezeExpireDays }}</span
+              >
+            </div>
+            <!-- <div class="info_item">
+							<span>申请时间：{{props.approvalInfo.ApprovalTime}}</span>
+							<span></span>
+						</div> -->
+            <CapprovalPession
+              :perssionList="perssionList"
+              :approvalTime="props.approvalInfo.ApprovalTime"
+            />
+            <div class="info_item">
+              <span>解冻理由：{{ props.approvalInfo.ApplyReasons }}</span>
+              <span></span>
+            </div>
+          </template>
+          <!-- 延期审批 -->
+          <template v-else-if="title.indexOf('延期审批') != -1">
+            <div class="info_item">
+              <span>客户名称：{{ props.approvalInfo.CompanyName }}</span>
+              <span class="label-style"
+                >社会信用码：{{ props.approvalInfo.CreditCode }}</span
+              >
+            </div>
+            <div class="info_item">
+              <span
+                >地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：{{
+                  props.approvalInfo.Address
+                }}</span
+              >
+              <span class="label-style"
+                >客&nbsp;户&nbsp;状&nbsp;态：{{ props.approvalInfo.Status }}</span
+              >
+            </div>
+            <div class="info_item">
+              <span>客户类型：{{ props.approvalInfo.CompanyType }}</span>
+              <span class="label-style"
+                >客&nbsp;户&nbsp;来&nbsp;源：{{ props.approvalInfo.Source }}</span
+              >
+            </div>
+            <div class="info_item">
+              <span
+                >行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：{{
+                  props.approvalInfo.IndustryName
+                }}</span
+              >
+              <span class="label-style"
+                >所&nbsp;属&nbsp;销&nbsp;售：{{ props.approvalInfo.SellerName }}</span
+              >
+            </div>
+            <!-- <div class="info_item">
+							<span>申请时间：{{props.approvalInfo.ApprovalTime}}</span>
+							<span></span>
+						</div> -->
+            <CapprovalPession
+              :perssionList="perssionList"
+              :approvalTime="props.approvalInfo.ApprovalTime"
+            />
+            <div class="info_item">
+              <span>申请理由：{{ props.approvalInfo.ApplyReasons }}</span>
+              <span></span>
+            </div>
+          </template>
+        </div>
+        <div class="bot_form">
+          <div style="marginbottom: 20px">
+            <label
+              style="
+                marginright: 40px;
+                fontsize: 16px;
+                position: relative;
+                padding-left: 18px;
+              "
+            >
+              <i
+                style="
+                  color: #f00;
+                  fontsize: 20px;
+                  position: absolute;
+                  left: 0;
+                  top: 20%;
+                "
+                >*</i
+              >
+              审批状态
+            </label>
+            <el-radio-group v-model="status" size="medium" :disabled="props.isLook">
+              <el-radio label="通过"></el-radio>
+              <el-radio label="驳回" style="marginleft: 0"></el-radio>
+            </el-radio-group>
+          </div>
+          <div v-if="status == '驳回'">
+            <label
+              style="
+                display: block;
+                marginbottom: 10px;
+                fontsize: 16px;
+                position: relative;
+                padding-left: 18px;
+              "
+            >
+              <i
+                style="
+                  color: #f00;
+                  fontsize: 20px;
+                  position: absolute;
+                  left: 0;
+                  top: 20%;
+                "
+                >*</i
+              >
+              驳回理由
+            </label>
+            <el-input
+              type="textarea"
+              v-model="reason"
+              rows="4"
+              style="width: 100%"
+              placeholder="输入理由"
+              :disabled="props.isLook"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+      <!-- 时间线 -->
+      <div class="line_cont">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.CreateTime"
+            color="#409EFF"
+            placement="top"
+          >
+            {{ activity.SysRealName + activity.Remark }}
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </div>
+    <div style="display: flex; justify-content: center; margin: 60px 0 50px">
+      <!-- 只查看 -->
+      <el-button
+        type="primary"
+        style="width: 80px"
+        @click="cancelHandle"
+        v-if="props.isLook"
+        >关闭</el-button
+      >
+      <template v-else>
+        <el-button
+          type="primary"
+          style="width: 80px; marginright: 24px"
+          @click="saveHandle"
+          >确定</el-button
+        >
+        <el-button
+          type="primary"
+          plain
+          style="width: 80px"
+          @click="cancelHandle"
+          >取消</el-button
+        >
+      </template>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang='scss'>
+.Capprovaldia_container {
+	* {box-sizing: border-box;}
+	.dialog_cont {
+		display: flex;
+		justify-content: space-between;
+		.left_cont {
+			width: 70%;
+			.detail_info {
+				border: 1px solid #AAB4CC;
+				border-radius: 4px;
+				padding: 30px 20px;
+				.info_item {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					font-size: 16px;
+					color: #666;
+					margin-bottom: 15px;
+					.label-style {
+						width:260px;
+					}
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+			}
+			.bot_form {
+				margin-top: 30px;
+			}
+		}
+		.line_cont {
+			box-sizing: border-box;
+			min-width: 25%;
+			height: 362px;
+			overflow-y: auto;
+			padding: 28px 14px;
+			border: 1px solid #AAB4CC;
+			border-radius: 4px;
+			.el-timeline-item__tail {
+				border-color: #409EFF;
+			}
+			.el-timeline-item__timestamp.is-top {
+				color: #999;
+				margin-bottom: 4px;
+			}
+			.el-timeline-item__content {
+				color: #999;
+			}
+		}
+	}
+}
+</style>

src/views/custom_manage/components/ContractInfo.vue

@@ -0,0 +1,414 @@
+<script setup>
+import { watch, ref } from 'vue'
+import { customInterence } from '@/api/api.js'
+import { CalculationDate } from '@/utils/CalculationDate'
+import { ElMessage } from 'element-plus';
+
+function formatType(e) {
+  if (e === "申请转正") {
+    return "试用转正式";
+  } else {
+    return e;
+  }
+}
+function formatDate(e) {
+  if (e === '0001-01-01T00:00:00Z') {
+    return ''
+  } else {
+    return e.split('T')[0].replace(/-/g, '.')
+  }
+}
+function formateYear(start, end) {
+  if (start) {
+    return `${CalculationDate(start, end)}`
+  } else {
+    return "";
+  }
+}
+
+const props = defineProps({
+  initData: {
+    show: false
+  }
+})
+const emits = defineEmits(['contractInfoDialogClose'])
+
+watch(
+  () => props.initData.show,
+  () => {
+    if (props.initData?.show) {
+      init()
+    }
+  }
+)
+
+function handleClose(e) {
+  search.value = ''
+  info.value = {}
+  emits('contractInfoDialogClose', e)
+}
+
+const search = ref('')
+const showCustomeInfo = ref(false)
+const info = ref(null)
+const cusInfo = ref(null)
+async function init() {
+  console.log('init');
+  let res = await customInterence.contractSearch({ CreditCode: props.initData.cusdata.CreditCode })
+  if (res.Ret === 200) {
+    if (res.Data) {
+      const res2 = await customInterence.sysContractDetail({ ContractId: res.Data[0].ContractId })
+      if (res2.Ret === 200) {
+        info.value = res2.Data
+        info.value.PermissionList = res2.Data.PermissionList.filter(item => {
+          return item.CheckList.length > 0
+        })
+      }
+    }
+  }
+
+  // 获取客户详情
+  let cus = await customInterence.customDetail({ CompanyId: props.initData.cusdata.CompanyId })
+  if (cus.Ret === 200) {
+    if (cus.Data.CreateAuth === 1) {
+      cusInfo.value = { Item: cus.Data.Item, info: cus.Data.FiccItem }
+    } else {
+      cusInfo.value = { Item: cus.Data.Item, info: cus.Data.RaiItem }
+    }
+  }
+}
+
+async function handleSearchResult(queryString, cb) {
+  cb([])
+  let res = await customInterence.contractSearch({ Keyword: queryString })
+  if (res.Ret === 200 && res.Data) {
+    cb(res.Data)
+  }
+}
+
+async function handleSelect(e) {
+  search.value = e.CompanyName
+  const res = await customInterence.sysContractDetail({ ContractId: e.ContractId })
+  if (res.Ret === 200) {
+    info.value = res.Data
+    info.value.PermissionList = res.Data.PermissionList.filter(item => {
+      return item.CheckList.length > 0
+    })
+  }
+}
+
+function handlePreviewContract() {
+  const url = info.value.ContractDetail.CheckBackFileUrl
+  if (!url) {
+    ElMessage.warning('文件错误')
+    return
+  }
+  const reg = /\.(pdf)$/;
+  // pdf
+  if (reg.test(url)) {
+    window.open(url, '_blank');
+  } else {
+    window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url, '_blank');
+  }
+}
+
+async function handleSubmit() {
+  const res = await customInterence.sysCustomeApply({
+    CompanyApprovalId: props.initData.cusdata.CompanyApprovalId || 0,
+    CompanyId: props.initData.cusdata.CompanyId,
+    ContractId: info.value.ContractDetail.ContractId
+  })
+  if (res.Ret === 200) {
+    ElMessage.success('申请成功')
+    handleClose('updateList')
+  }
+}
+
+
+</script>
+
+<template>
+  <el-dialog
+    :model-value="props.initData.show"
+    :modal-append-to-body="false"
+    class="dialog-body-no"
+    top="5vh"
+    @close="handleClose"
+    draggable
+    width="55%"
+  >
+    <template #header>
+      <div>
+        <img
+          width="15"
+          src="../../../assets/img/cus_m/man.png"
+          alt=""
+          style="margin-right: 15px"
+        /><span>{{ props.initData.type }}</span>
+      </div>
+    </template>
+    <div class="contractinfo-wrap">
+      <div class="top">
+        <div>
+          <span style="margin-right: 20px; color: #333"
+            >申请内容：{{ formatType(props.initData.type) }}</span
+          >
+        </div>
+        <span
+          style="
+            border: 1px solid #409eff;
+            color: #409eff;
+            padding: 2px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+          "
+          @click="showCustomeInfo = true"
+          >客户信息</span
+        >
+      </div>
+      <div class="search-wrap">
+        <el-autocomplete
+          clearable
+          v-model="search"
+          :fetch-suggestions="handleSearchResult"
+          placeholder="请输入公司全称搜合同"
+          @select="handleSelect"
+          style="width: 100%"
+          prefix-icon="el-icon-search"
+        >
+          <template #default>
+            <span
+              style="margin-right: 40px; width: 450px; display: inline-block"
+              >{{ scope.item.CompanyName }}</span
+            >
+            <span style="margin-right: 40px">{{
+              scope.item.ContractType
+            }}</span>
+            <span style="margin-right: 40px"
+              >{{ formatDate(scope.item.StartDateStr) }}~{{
+                formatDate(scope.item.EndDateStr)
+              }}</span
+            >
+            <span>{{ scope.item.Price }}元</span>
+          </template>
+        </el-autocomplete>
+      </div>
+
+      <div class="content">
+        <div v-if="info && info.ContractDetail">
+          <div class="table-wrap">
+            <div class="flex">
+              <div class="table-item" style="flex: 1; display: flex">
+                甲方名称：{{ info.ContractDetail.CompanyName }}
+                <span
+                  style="
+                    margin-left: 10px;
+                    border: 1px solid #409eff;
+                    color: #409eff;
+                    padding: 2px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    flex-shrink: 0;
+                    height: 20px;
+                  "
+                  @click="handlePreviewContract"
+                  >预览合同</span
+                >
+              </div>
+              <div class="table-item" style="flex: 1">
+                合同期限：{{ formatDate(info.ContractDetail.StartDate) }}~{{
+                  formatDate(info.ContractDetail.EndDate)
+                }}（有效期：{{
+                  formateYear(
+                    info.ContractDetail.StartDate,
+                    info.ContractDetail.EndDate
+                  )
+                }}）
+              </div>
+            </div>
+            <div class="flex">
+              <div class="table-item" style="flex: 1">
+                合同金额：{{ info.ContractDetail.Price }}元
+              </div>
+              <div class="table-item" style="flex: 1">
+                付款方式：{{ info.ContractDetail.PayRemark }}
+              </div>
+            </div>
+            <div class="flex">
+              <div class="table-item" style="flex: 1">
+                付款渠道：{{ info.ContractDetail.PayChannel }}
+              </div>
+              <div class="table-item" style="flex: 1">
+                合同类型：{{ info.ContractDetail.ContractType }}
+              </div>
+            </div>
+            <div class="table-item">
+              <div class="flex">
+                <h2 style="font-size: 14px; color: #333; margin-right: 20px">
+                  购买品种：
+                </h2>
+                <ul style="flex: 1">
+                  <li
+                    v-for="item in info.PermissionList"
+                    :key="item.ClassifyName"
+                  >
+                    <span>{{ item.ClassifyName }}：</span>
+                    <template v-for="tag in item.Items">
+                      <el-tag
+                        size="small"
+                        :key="tag.ChartPermissionId"
+                        style="margin: 0 8px 5px"
+                        v-if="item.CheckList.includes(tag.ChartPermissionId)"
+                        >{{ tag.PermissionName }}</el-tag
+                      >
+                    </template>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div style="text-align: center; padding: 59px 0 20px 0">
+            <el-button
+              style="width: 152px; margin-right: 30px"
+              type="primary"
+              @click="handleSubmit"
+              >提交</el-button
+            >
+            <el-button
+              style="width: 152px"
+              type="primary"
+              plain
+              @click="handleClose"
+              >取消</el-button
+            >
+          </div>
+        </div>
+        <div v-else style="text-align: center; padding: 50px 0 200px 0">
+          <img width="135" src="../../../assets/img/cus_m/nodata.png" alt="" />
+          <p style="font-size: 14px; color: #aab4cc">暂无结果</p>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+  <el-dialog
+    v-model="showCustomeInfo"
+    :modal-append-to-body="false"
+    class="cus-dialog"
+    width="660px"
+    top="20vh"
+    v-dialogDrag
+  >
+  <template #header>
+    <div style="color: #333; font-size: 16px; font-weight: bold">
+      客户基本信息
+    </div>
+  </template>
+    
+    <div v-if="cusInfo" class="contractinfo-wrap">
+      <div class="table-wrap">
+        <div class="flex">
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            客户名称：{{ cusInfo.Item.CompanyName }}
+          </div>
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            地址：{{ cusInfo.Item.Province }}{{ cusInfo.Item.City
+            }}{{ cusInfo.Item.Address }}
+          </div>
+        </div>
+        <div class="flex">
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            社会信用码：{{ cusInfo.Item.CreditCode }}
+          </div>
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            客户状态：{{ cusInfo.info.Status }}
+          </div>
+        </div>
+        <div class="flex">
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            客户来源：{{ cusInfo.info.Source }}
+          </div>
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            行业：{{ cusInfo.info.IndustryName }}
+          </div>
+        </div>
+        <div class="flex">
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            所属销售：{{ cusInfo.info.SellerName }}
+          </div>
+          <div class="table-item" style="flex: 1; padding: 14px 20px">
+            备注：{{ cusInfo.info.Reasons }}
+          </div>
+        </div>
+      </div>
+      <div style="text-align: center; margin-top: 40px; margin-bottom: 33px">
+        <el-button
+          type="primary"
+          style="width: 200px"
+          @click="showCustomeInfo = false"
+          >知道了</el-button
+        >
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+
+<style lang="scss">
+.cus-dialog {
+  .el-dialog__header {
+    background-color: #fff;
+    border-bottom: 1px solid #dcdfe6;
+    .el-dialog__close.el-icon.el-icon-close {
+      color: #666;
+    }
+  }
+}
+.dialog-body-no {
+  .el-dialog__body {
+    padding: 20px 0 !important;
+  }
+  .el-input {
+    width: 100%;
+  }
+  .el-dialog {
+    min-width: 750px;
+  }
+}
+.contractinfo-wrap {
+  .top {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 30px 30px 30px;
+    border-bottom: 1px solid #dcdfe6;
+    align-items: center;
+  }
+  .search-wrap {
+    padding: 30px;
+  }
+  .content {
+    padding: 0px 30px;
+  }
+  .table-wrap {
+    border-top: 1px solid #dcdfe6;
+    border-left: 1px solid #dcdfe6;
+    .flex {
+      display: flex;
+    }
+    .table-item {
+      border-bottom: 1px solid #dcdfe6;
+      border-right: 1px solid #dcdfe6;
+      padding: 14px 40px;
+      li {
+        padding-bottom: 17px;
+        margin-bottom: 17px;
+        border-bottom: 1px dashed #dcdfe6;
+      }
+      li:last-child {
+        border-bottom: none;
+        margin-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+</style>