Merge branch 'yjw'

src/router/modules/approvalRoutes.js

@@ -17,17 +17,17 @@ export default [
 					keepAlive: false
 				}
 			},
-			// {
-			// 	path: 'contractdetailapr',
-			// 	component: () => import('@/views/contract_manage/contractDetail.vue'),
-			// 	name: "合同详情",
-			// 	hidden: false,
-			// 	meta: {
-			// 		pathFrom: 'contractapprovallist',
-			// 		pathName: '合同审批',
-			// 		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'),
@@ -48,33 +48,33 @@ export default [
 					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
-			// 	}
-			// }
+			{
+				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/views/contract_manage/contractDetail.vue

@@ -0,0 +1,9 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        
+    </div>
+</template>

src/views/contract_manage/preViewContract.vue

@@ -1,10 +1,33 @@
 <script setup>
-
 import { ref } from 'vue'
+import { contractInterface } from "@/api/api.js";
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+
+const content = ref('')
+
+function getContent() {
+  const id = route.query.contractid || ''
+  if (!id) {
+    content.value = sessionStorage.getItem('contractdtl')
+    return
+  }
+  contractInterface.previewContractById({ ContractId: id }).then(res => {
+    if (res.Ret === 200) {
+      content.value = res.Data.Html
+    }
+  })
+}
+
+getContent()
+
 </script>
+
+
 <template>
-  <div></div>
+  <div v-html="content"></div>
 </template>
-<style scoped lang="scss">
 
+<style scoped lang="scss">
 </style>

src/views/seal_manage/approvalList.vue

@@ -0,0 +1,1186 @@
+<script setup>
+import { formatTime } from '@/utils/date'
+import { reactive, watch, ref } from 'vue'
+import { contractInterface, sealInterence } from "@/api/api.js";
+import $ from "jquery"
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const pageState = reactive({
+  RoleType: localStorage.getItem('Role') || '',
+  userId: localStorage.getItem('AdminId'),
+  contractTypeList: ['新签合同', '续约合同', '补充协议', '代付合同'],
+  contractTypeVal: '',
+  sealStatusList: ['待审批', '待提交', '已撤回', '处理中', '已审批', '已驳回', '已签回', '已作废'],
+  sealStatusVal: '',
+  time: ['', ''],
+  searchVal: '',
+  tableList: [],
+  page: 1,
+  pageSize: 10,
+  total: 0,
+
+  sellerList: [], //申请销售列表
+  seller: "", //选择的申请销售
+  defaultSalesProps: {
+    multiple: true,
+    label: 'RealName',
+    children: 'ChildrenList',
+    value: 'AdminId'
+  },//销售级联配置
+
+  detail: null,
+  showDetail: false,
+  optList: [],
+  stepArr: [],//审批流程数据
+  approvalEditData: {
+    Use: '',//用印用途
+    Type: '',//加盖印章 类型
+    FileNum: '',//文件份数
+    Remark: '',//备注
+  },
+
+  form: {
+    status: "通过",
+    reason: "",
+  },
+  formRule: {
+    status: [{ required: true, message: "请选择状态", trigger: "change" }],
+    reason: [{ required: true, message: "请填写驳回理由", trigger: "blur" }],
+  },
+
+  showUploadAttachment: false,//显示上传（更新附件）
+  fileData: {
+    type: 0,//1 上传附件 2 更新附件
+    title: "",
+    name: "",
+    file: null,
+    sealId: 0,
+  },//上传/更新附件文件数据
+  showAttachment: false,// 是否显示预览附件弹窗
+  attachmentUrls: [],// 附件列表
+})
+
+// 弹窗关闭清除弹窗的值
+watch(
+  () => pageState.showDetail,
+  (nval) => {
+    if (!nval) {
+      pageState.detail = null
+      pageState.optList = []
+      pageState.stepArr = []
+      pageState.approvalEditData = {
+        Use: '',//用印用途
+        Type: '',//加盖印章 类型
+        FileNum: '',//文件份数
+        Remark: '',//备注
+      }
+      pageState.form = {
+        status: "通过",
+        reason: "",
+      }
+
+    }
+  }
+)
+
+//上传附件弹窗关闭清除值
+watch(
+  () => pageState.showUploadAttachment,
+  (nval) => {
+    if (!nval) {
+      pageState.fileData = {
+        type: 0,//1 上传附件 2 更新附件
+        title: "",
+        name: "",
+        file: null,
+        sealId: 0,
+      }
+    }
+  }
+)
+
+function initPage() {
+  getSellerList();
+  getSealApprovalList()
+  if (['ficc_seller', 'rai_seller'].includes(pageState.RoleType)) {
+    pageState.sealStatusList = ['待审批', '已撤回', '处理中', '已审批', '已驳回', '已签回', '已作废']
+  } else {
+    pageState.sealStatusList = ['待审批', '处理中', '已审批', '已驳回', '已签回', '已作废']
+  }
+}
+initPage()
+
+function getSellerList() {//获取所属销售列表
+  contractInterface.getSellerList().then((res) => {
+    if (res.Ret === 200) {
+      pageState.sellerList = res.Data.List;
+    }
+  });
+}
+
+async function getSealApprovalList() {
+  let salesArr = []
+  if (pageState.seller.length) {
+    salesArr = pageState.seller.map(item => {
+      return item[item.length - 1]
+    })
+  }
+  const res = await sealInterence.getSealApprovalList({
+    PageSize: pageState.pageSize,
+    CurrentIndex: pageState.page,
+    ContractType: pageState.contractTypeVal,
+    Status: pageState.sealStatusVal,
+    SellerId: salesArr.join(','),
+    StartTime: pageState.time && pageState.time[0] || '',
+    EndTime: pageState.time && pageState.time[1] || '',
+    Keyword: pageState.searchVal
+  })
+  if (res.Ret === 200) {
+    pageState.tableList = res.Data.List
+    pageState.total = res.Data.Paging.Totals
+  }
+}
+
+function handleSelectChange() {
+  pageState.searchVal = ''
+  getSealApprovalList()
+}
+
+function handleSearch() {
+  pageState.contractTypeVal = ''
+  pageState.sealStatusVal = ''
+  pageState.time = ['', '']
+  pageState.seller = ''
+  getSealApprovalList()
+}
+
+function handlePageChange(e) {
+  pageState.page = e
+  getSealApprovalList()
+}
+
+async function handleDetail(e) {
+  getSealOprationList(e.SealId)
+  const res = await sealInterence.getSealDetail({ SealId: e.SealId })
+  if (res.Ret == 200) {
+    pageState.showDetail = true
+    pageState.detail = res.Data
+    pageState.approvalEditData.Use = res.Data.SealDetail.Use
+    pageState.approvalEditData.Type = res.Data.SealDetail.SealType.split(',')
+    pageState.approvalEditData.FileNum = res.Data.SealDetail.FileNum
+    pageState.approvalEditData.Remark = res.Data.SealDetail.Remark
+    handleStepArr()
+  }
+}
+
+// 处理审批流程节点
+function handleStepArr() {
+  let arr = []
+  let count = 0
+  arr = pageState.detail.FlowNodeList && pageState.detail.FlowNodeList.map(item => {
+    item[0].NodeType === 'check' && count++
+    let stepCon = {
+      name: item[0].NodeType === 'check' ? '审批人' : '抄送人',//审批节点标题
+      intro: '',//描述
+      user: item.slice(0, 2),//审批节点人列表
+      allUser: item,
+      approve: [],//审批人信息{name:'',time:""}
+      auditType: 1,
+      stepName: ''
+    }
+    if (item[0].NodeType === 'check') {
+      if (item[0].AuditType === 1) {
+        stepCon.intro = item.length > 1 ? item.length + '人或签' : ''
+        stepCon.auditType = 1
+      } else if (item[0].AuditType === 2) {
+        stepCon.intro = item.length > 1 ? item.length + '人会签' : ''
+        stepCon.auditType = 2
+      }
+      item.forEach(item2 => {
+        if (item2.Status !== '待审批' && item2.Status !== '已撤回') {
+          let time = ''
+          if (item2.Status === '已驳回') {
+            time = `驳回时间：${item2.ApproveTime}`
+          } else {
+            time = `审批时间：${item2.ApproveTime}`
+          }
+          let obj = { name: item2.ApproveUserName, time: time }
+          stepCon.approve.push(obj)
+        }
+      })
+    }
+
+    if (item[0].NodeType === 'cc') {
+      stepCon.intro = '抄送' + item.length + '人'
+    }
+
+    return stepCon
+  })
+
+
+  // 处理审批节点标题描述  若有多级审批 则 为 一级审批 二级审批 若只有一级 则 不变
+  // if(count>1){
+  let tag = 0
+  arr.forEach(item => {
+    if (item.name === '审批人') {
+      tag++
+      switch (tag) {
+        case 1:
+          item.stepName = '一级审批'
+          break;
+        case 2:
+          item.stepName = '二级审批'
+          break;
+        case 3:
+          item.stepName = '三级审批'
+          break;
+      }
+    }
+  })
+  // }
+
+  pageState.stepArr = arr
+}
+
+// 获取操作记录
+async function getSealOprationList(id) {
+  const res = await sealInterence.getSealOperationList({ SealId: id })
+  if (res.Ret === 200) {
+    pageState.optList = res.Data.List
+  }
+}
+
+// 预览合同
+function handlePreContractFile(urls) {
+  if (urls.length == 0) return
+  if (urls.length == 1) {
+    viewAttachment(urls[0])
+  } else {
+    pageState.attachmentUrls = urls
+    pageState.showAttachment = true
+  }
+
+}
+
+// 根据文件返回文件图标
+function fileTypeIcon(url) {
+  if (!url) return "";
+  const fileType = fileType(url);
+  return fileType === "word"
+    ? require("@/assets/img/constract/word-icon.png")
+    : require("@/assets/img/constract/pdf.png");
+}
+
+// 根据fileUrl判断文件类型
+function fileType(fileUrl) {
+  if (/^.+(\.pdf)$/i.test(fileUrl)) {
+    return "pdf";
+  } else if (/^.+(\.doc|\.docx)$/i.test(fileUrl)) {
+    return "word";
+  } else {
+    return "other";
+  }
+}
+
+
+// 预览合同附件
+function viewAttachment(url) {
+  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');
+  }
+}
+
+// 审批弹窗审批状态切换
+function approvalFromStatusChange() {
+  if (pageState.form.status === '驳回') {
+    let top = $('.detail-wrap')[0].offsetTop
+    $('.detail-wrap').animate({
+      "scrollTop": top + 1000
+    })
+  }
+}
+
+const form = ref(null)
+function handleConfirmApproval() {
+  form.value.validate((valid) => {
+    if (valid) {
+      if (pageState.form.status == '通过') {
+        //判断是否有内容修改
+        const flag1 = pageState.approvalEditData.Use === pageState.detail.SealDetail.Use
+        const flag2 = Number(pageState.approvalEditData.FileNum) === Number(pageState.detail.SealDetail.FileNum)
+        const flag3 = pageState.approvalEditData.Type.join(',') === pageState.detail.SealDetail.SealType
+        const flag4 = pageState.approvalEditData.Remark === pageState.detail.SealDetail.Remark
+        if (flag1 && flag2 && flag3 && flag4) {
+          handleApprovalPass()
+        } else {
+          handleApprovePassModify()
+        }
+      } else {
+        handleApprvoalReject()
+      }
+    }
+  })
+
+
+}
+
+// 通过审批
+async function handleApprovalPass() {
+  const res = await sealInterence.sealApprovalPass({
+    SealId: pageState.detail.SealDetail.SealId
+  })
+  if (res.Ret == 200) {
+    ElMessage.success('审批成功')
+    pageState.showDetail = false
+    setTimeout(() => {
+      getSealApprovalList()
+    }, 300);
+
+  }
+}
+
+// 审批人修改后通过审批
+async function handleApprovePassModify() {
+  const res = await sealInterence.sealApprovalPassModify({
+    CompanyName: pageState.detail.SealDetail.CompanyName,
+    ContractId: pageState.detail.SealDetail.ContractId,
+    CreditCode: pageState.detail.SealDetail.CreditCode,
+    FileUrls: pageState.detail.SealDetail.FileUrls,
+    SealId: pageState.detail.SealDetail.SealId,
+    ServiceType: pageState.detail.SealDetail.ServiceType,
+    UseCompanyName: pageState.detail.SealDetail.UseCompanyName,
+
+    FileNum: Number(pageState.approvalEditData.FileNum),
+    Remark: pageState.approvalEditData.Remark,
+    SealType: pageState.approvalEditData.Type.join(','),
+    Use: pageState.approvalEditData.Use,
+  })
+  if (res.Ret == 200) {
+    ElMessage.success('审批成功')
+    pageState.showDetail = false
+    setTimeout(() => {
+      getSealApprovalList()
+    }, 300);
+  }
+}
+
+// 申请驳回
+async function handleApprvoalReject() {
+  const res = await sealInterence.sealApprovalReject({
+    SealId: pageState.detail.SealDetail.SealId,
+    Remark: pageState.form.reason
+  })
+  if (res.Ret == 200) {
+    ElMessage.success('操作成功')
+    pageState.showDetail = false
+    setTimeout(() => {
+      getSealApprovalList()
+    }, 300);
+  }
+}
+
+// 操作
+// 删除-delete 撤回-back 作废-invalid
+function handleOpt(e, data) {
+  if (e == 'delete') {
+    ElMessageBox.confirm("确定删除该用印申请吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(() => {
+      sealInterence.sealDelete({ SealId: data.SealId }).then((res) => {
+        if (res.Ret === 200) {
+          ElMessage.success("删除成功");
+          getSealApprovalList()
+        }
+      });
+    });
+  }
+
+  if (e == 'back') {
+    ElMessageBox.confirm("确定撤回该用印申请吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(() => {
+      sealInterence.sealApprovalBack({ SealId: data.SealId }).then((res) => {
+        if (res.Ret === 200) {
+          ElMessage.success("撤回成功");
+          getSealApprovalList()
+        }
+      });
+    });
+  }
+
+  if (e == 'invalid') {
+    ElMessageBox.confirm("确定作废该用印申请吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(() => {
+      sealInterence.sealInvalid({ SealId: data.SealId }).then((res) => {
+        if (res.Ret === 200) {
+          ElMessage.success("撤回成功");
+          getSealApprovalList()
+        }
+      });
+    });
+  }
+}
+
+// 显示驳回理由
+function handleShowRejectReason(e) {
+  ElMessageBox.confirm(e.ApprovalRemark, '驳回理由', {
+    confirmButtonText: '知道了',
+    showCancelButton: false,
+    type: 'info '
+  })
+}
+
+//选择文件
+function checkFileBeforeUpload(file) {
+  let hostfile = file;
+  let size = Math.floor(hostfile.size / 1024 / 1024);
+  if (size > 200) {
+    ElMessage.warning("上传文件大小不能大于200M！");
+    hostfile = {};
+    return false;
+  }
+  if (hostfile.name.toLowerCase().includes(".pdf") || hostfile.name.toLowerCase().includes(".doc") || hostfile.name.toLowerCase().includes(".docx")) {
+    pageState.fileData.file = hostfile
+    pageState.fileData.name = hostfile.name.toLowerCase()
+  } else {
+    ElMessage.warning("请上传PDF/word文件！");
+  }
+  return false
+}
+
+// 显示上传签回弹窗
+function handleShowUploadAttachment(e){
+  pageState.fileData.sealId = e.SealId
+  if (e.CheckBackFileUrl) {
+    pageState.fileData.type = 2
+    pageState.fileData.title = `更新签回附件(${e.CompanyName})`
+    pageState.fileData.name = e.CheckBackFileUrl.substring(e.CheckBackFileUrl.lastIndexOf('/') + 1)
+  } else {
+    pageState.fileData.type = 1
+    pageState.fileData.title = `上传签回附件(${e.CompanyName})`
+  }
+  pageState.showUploadAttachment = true
+}
+
+// 提交上传/更新签回附件
+async function handleConfirmAttachment() {
+  if (!pageState.fileData.file) {
+    ElMessage.warning('请选择文件')
+    return
+  }
+  let form = new FormData();
+  form.append("file", pageState.fileData.file)
+  form.append('SealId', pageState.fileData.sealId)
+  const res = await sealInterence.sealCheckFileUpload(form)
+  if (res.Ret == 200) {
+    ElMessage.success('操作成功')
+    getSealApprovalList()
+    pageState.showUploadAttachment = false
+  }
+}
+
+function handlePreFile(e) {
+  let url = e.CheckBackFileUrl
+  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');
+  }
+}
+
+</script>
+
+<template>
+  <div class="seal-approval-wrap">
+    <div class="content">
+      <div class="select-wrap" style="margin-bottom: 30px">
+        <el-select
+          v-model="pageState.contractTypeVal"
+          placeholder="合同类型"
+          @change="handleSelectChange"
+          clearable
+          style="margin-right: 20px"
+        >
+          <el-option
+            v-for="item in pageState.contractTypeList"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          v-model="pageState.sealStatusVal"
+          placeholder="用印状态"
+          @change="handleSelectChange"
+          clearable
+          style="margin-right: 20px"
+        >
+          <el-option
+            v-for="item in pageState.sealStatusList"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+        <el-cascader
+          v-if="pageState.RoleType != 'ficc_seller' && pageState.RoleType != 'rai_seller'"
+          v-model="pageState.seller"
+          placeholder="申请销售"
+          style="min-width: 250px;margin-right: 20px"
+          :options="pageState.sellerList"
+          :props="pageState.defaultSalesProps"
+          :show-all-levels="false"
+          collapse-tags
+          clearable
+          filterable
+          @change="handleSelectChange"
+        >
+        </el-cascader>
+        <el-date-picker
+          v-model="pageState.time"
+          type="daterange"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="handleSelectChange"
+          style="margin-right: 20px"
+        >
+        </el-date-picker>
+        <el-input
+          placeholder="客户名称/社会信用码"
+          prefix-icon="el-icon-search"
+          v-model="pageState.searchVal"
+          style="width: 300px"
+          clearable
+          @input="handleSearch"
+        >
+        </el-input>
+        <el-button
+          type="primary"
+          style="float: right"
+          @click="$router.push('/addSeal')"
+          v-if="['ficc_seller', 'rai_seller', 'compliance'].includes(pageState.RoleType)"
+          >添加用印</el-button
+        >
+      </div>
+      <div class="list-wrap">
+        <el-table :data="pageState.tableList" border>
+          <el-table-column align="center" prop="CompanyName" label="客户名称">
+            <template #default="scope">
+              <span>{{ scope.row.CompanyName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="CreditCode"
+            label="社会信用码"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="Use"
+            label="用印用途"
+            width="120px"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="ContractCode"
+            label="合同编号"
+            width="180px"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="ContractType"
+            label="合同类型"
+            width="100px"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="SealType"
+            label="加盖印章"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="ApplyUserName"
+            label="所属销售"
+            width="100px"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="CreateTimeStr"
+            label="提交时间"
+            width="150px"
+          >
+            <template #default="scope">
+              <span>{{ formatTime(scope.row.CreateTimeStr) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="Status"
+            label="用印状态"
+            width="100px"
+          ></el-table-column>
+          <el-table-column align="center" label="操作">
+            <template #default="scope">
+              <span
+                class="btn"
+                @click="handleDetail(scope.row)"
+                v-if="
+                  scope.row.Status != '已撤回' && !scope.row.OpButton.Approval
+                "
+                >审批详情</span
+              >
+              <span
+                class="btn"
+                v-if="scope.row.OpButton.Cancel"
+                @click="handleOpt('back', scope.row)"
+                >撤回</span
+              >
+              <span
+                class="btn"
+                v-if="scope.row.OpButton.Edit"
+                @click="$router.push('/editSeal?id=' + scope.row.SealId)"
+                >编辑重提</span
+              >
+              <span
+                class="btn"
+                style="color: #ff4040"
+                v-if="
+                  scope.row.Status == '已撤回' &&
+                  scope.row.ApplyUserId == pageState.userId
+                "
+                @click="handleOpt('delete', scope.row)"
+                >删除</span
+              >
+              <span
+                class="btn"
+                v-if="scope.row.OpButton.Invalid"
+                @click="handleOpt('invalid', scope.row)"
+                >用印作废</span
+              >
+              <span
+                class="btn"
+                v-if="scope.row.CheckBackFileUrl"
+                @click="handlePreFile(scope.row)"
+                >查看附件</span
+              >
+              <span
+                class="btn"
+                v-if="
+                  scope.row.OpButton.Approval && scope.row.Status == '待审批'
+                "
+                @click="handleDetail(scope.row)"
+                >审批</span
+              >
+              <span
+                class="btn"
+                v-if="scope.row.OpButton.UploadFile"
+                @click="handleShowUploadAttachment(scope.row)"
+                >{{
+                  scope.row.CheckBackFileUrl ? "更新附件" : "签回附件"
+                }}</span
+              >
+            </template>
+          </el-table-column>
+
+          <template #empty>
+            <div style="padding: 100px 0">暂无数据</div>
+          </template>
+        </el-table>
+
+        <el-pagination
+          layout="total,prev,pager,next,jumper"
+          background
+          :current-page="pageState.page"
+          @current-change="handlePageChange"
+          :page-size="pageState.pageSize"
+          :total="pageState.total"
+          class="pagination-wrap"
+        >
+        </el-pagination>
+      </div>
+      <!-- 审批弹窗 -->
+      <el-dialog
+        width="58%"
+        top="5vh"
+        draggable
+        :model-value="pageState.showDetail"
+        :modal-append-to-body="false"
+        :append-to-body="true"
+        @close="pageState.showDetail = false"
+      >
+        <template #header>
+          <div v-if="pageState.detail">
+            <span>{{ pageState.detail.OpButton.Approval ? "审批" : "审批详情" }}</span>
+          </div>
+        </template>
+
+        <div class="detail-wrap" v-if="pageState.detail">
+          <div class="main" v-if="pageState.detail.OpButton">
+            <table class="table-wrap">
+              <tbody>
+                <tr>
+                  <td class="table-item width-50">
+                    <p v-if="pageState.detail.OpButton.CheckEdit">
+                      <span>用印用途：</span>
+                      <el-select
+                        v-model="pageState.approvalEditData.Use"
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          label="销售合同"
+                          value="销售合同"
+                        ></el-option>
+                        <el-option
+                          label="代付合同"
+                          value="代付合同"
+                        ></el-option>
+                        <el-option
+                          label="总对总协议"
+                          value="总对总协议"
+                        ></el-option>
+                        <el-option
+                          label="渠道合同"
+                          value="渠道合同"
+                        ></el-option>
+                        <el-option
+                          label="付款通知函"
+                          value="付款通知函"
+                        ></el-option>
+                        <el-option label="招投标" value="招投标"></el-option>
+                        <el-option
+                          label="战略合作协议"
+                          value="战略合作协议"
+                        ></el-option>
+                      </el-select>
+                    </p>
+                    <p v-else>用印用途：{{ pageState.detail.SealDetail.Use }}</p>
+                  </td>
+                  <td class="table-item width-50">
+                    所属销售：{{ pageState.detail.SealDetail.UserName }}
+                  </td>
+                </tr>
+                <tr>
+                  <td class="table-item width-50">
+                    客户名称：{{ pageState.detail.SealDetail.CompanyName }}
+                  </td>
+                  <td class="table-item width-50">
+                    社会信用码：{{ pageState.detail.SealDetail.CreditCode }}
+                  </td>
+                </tr>
+                <tr>
+                  <td class="table-item width-50">
+                    合同类型：{{ pageState.detail.SealDetail.ServiceType }}
+                  </td>
+                  <td class="table-item width-50">
+                    <p v-if="pageState.detail.OpButton.CheckEdit">
+                      <span>文件份数：</span>
+                      <!-- <el-input type="number" v-model="approvalEditData.FileNum"></el-input> -->
+                      <el-input-number
+                        :min="1"
+                        v-model="pageState.approvalEditData.FileNum"
+                      ></el-input-number>
+                    </p>
+                    <p v-else>文件份数：{{ pageState.detail.SealDetail.FileNum }}</p>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="table-item">
+                    <p v-if="pageState.detail.OpButton.CheckEdit">
+                      <span>加盖印章：</span>
+                      <el-select
+                        v-model="pageState.approvalEditData.Type"
+                        collapse-tags
+                        multiple
+                        placeholder="请选择"
+                      >
+                        <el-option label="合同章" value="合同章"></el-option>
+                        <el-option label="公章" value="公章"></el-option>
+                        <el-option label="法人章" value="法人章"></el-option>
+                      </el-select>
+                    </p>
+                    <p v-else>加盖印章：{{ pageState.detail.SealDetail.SealType }}</p>
+                  </td>
+                  <td class="table-item">
+                    实际使用方：{{
+                      pageState.detail.SealDetail.UseCompanyName ||
+                      pageState.detail.SealDetail.CompanyName
+                    }}
+                  </td>
+                </tr>
+                <tr>
+                  <td class="table-item" colspan="2" style="text-align: left">
+                    <p v-if="pageState.detail.OpButton.CheckEdit" style="display: flex">
+                      <span>审批备注：</span>
+                      <el-input
+                        type="textarea"
+                        placeholder="请填写备注"
+                        v-model="pageState.approvalEditData.Remark"
+                        style="flex: 1"
+                      ></el-input>
+                    </p>
+                    <p v-else>审批备注：{{ pageState.detail.SealDetail.Remark }}</p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <!-- 审批流程 -->
+            <div class="process-box" style="margin-top: 30px">
+              <h2>审批流程：</h2>
+              <div class="approval-step-wrap">
+                <div
+                  v-for="(step, index) in pageState.stepArr"
+                  :key="index"
+                  class="step-item"
+                >
+                  <span class="title" v-if="step.stepName"
+                    >{{ step.stepName }}:</span
+                  >
+                  <div v-if="step.stepName" class="user-box">
+                    <span>审批人：</span>
+                    <span
+                      v-for="user in step.allUser"
+                      :key="user.ApproveUserName"
+                      >{{ user.ApproveUserName }}</span
+                    >
+                    <p></p>
+                  </div>
+                  <div v-else class="user-box">
+                    <span>抄送人：</span>
+                    <span
+                      v-for="user in step.allUser"
+                      :key="user.ApproveUserName"
+                      >{{ user.ApproveUserName }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="dashed-line" v-if="pageState.detail.OpButton.Approval"></div>
+            <el-form
+              ref="form"
+              :model="pageState.form"
+              :rules="pageState.formRule"
+              label-width="100px"
+              label-position="left"
+              v-if="pageState.detail.OpButton.Approval"
+            >
+              <el-form-item prop="status" label="审批状态">
+                <el-radio-group
+                  v-model="pageState.form.status"
+                  @change="approvalFromStatusChange"
+                >
+                  <el-radio label="通过"></el-radio>
+                  <el-radio label="驳回"></el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item
+                prop="reason"
+                label="驳回理由"
+                v-if="pageState.form.status === '驳回'"
+              >
+                <el-input
+                  v-model="pageState.form.reason"
+                  placeholder="请输入理由"
+                  type="textarea"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="right">
+            <el-button
+              type="primary"
+              style="width: 100%"
+              @click="handlePreContractFile(pageState.detail.SealDetail.FileUrls)"
+              >预览合同</el-button
+            >
+            <div class="contract-origin">
+              合同来源：{{
+                pageState.detail.SealDetail.ContractId == 0 ? "上传附件" : "系统合同"
+              }}
+            </div>
+            <div class="timeline-wrap">
+              <el-timeline>
+                <el-timeline-item
+                  color="#409EFF"
+                  v-for="item in pageState.optList"
+                  :key="item.Id"
+                  placement="top"
+                  :timestamp="item.CreateTimeStr"
+                >
+                  {{ item.OpUserName }}{{ item.Remark }}
+                  <span
+                    style="
+                      color: #409eff;
+                      cursor: pointer;
+                      display: inline-block;
+                    "
+                    v-if="item.Operation == 'reject'"
+                    @click="handleShowRejectReason(item)"
+                    >驳回理由</span
+                  >
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </div>
+        </div>
+        <div
+          style="text-align: center; margin-bottom: 40px; margin-top: 40px"
+          v-if="pageState.detail"
+        >
+          <block v-if="pageState.detail.OpButton.Approval">
+            <el-button
+              type="primary"
+              style="margin-right: 24px"
+              plain
+              @click="pageState.showDetail = false"
+              >取消</el-button
+            >
+            <el-button type="primary" @click="handleConfirmApproval"
+              >确定</el-button
+            >
+          </block>
+          <block v-else
+            ><el-button type="primary" @click="pageState.showDetail = false"
+              >知道了</el-button
+            ></block
+          >
+        </div>
+        <!-- 预览合同附件弹窗 当附件大于1个时显示 -->
+        <el-dialog
+          title="请选择附件"
+          :model-value="pageState.showAttachment"
+          @close="pageState.showAttachment = false"
+          :close-on-click-modal="false"
+          :append-to-body="true"
+        >
+          <div class="attachment-contain" style="min-height: 240px">
+            <el-image
+              v-for="item in pageState.attachmentUrls"
+              :key="item"
+              :src="fileTypeIcon(item)"
+              @click="viewAttachment(item)"
+              class="attachment-image"
+            ></el-image>
+          </div>
+        </el-dialog>
+      </el-dialog>
+      <!-- 上传\更新 附件 -->
+      <el-dialog
+        top="30vh"
+        draggable
+        width="570px"
+        :model-value="pageState.showUploadAttachment"
+        :modal-append-to-body="false"
+        @close="pageState.showUploadAttachment = false"
+      >
+        <template #header>
+          <div>
+            <img
+              width="15"
+              src="../../assets/img/icons/edit1.png"
+              alt=""
+              v-if="pageState.fileData.type == 2"
+            />
+            <img width="15" src="../../assets/img/icons/up.png" alt="" v-else />
+            <span
+              style="
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                max-width: 450px;
+              "
+              >{{ pageState.fileData.title }}</span
+            >
+          </div>
+        </template>
+
+        <div class="upload-attachment-wrap">
+          <div style="display: flex; align-items: center">
+            <div class="box">
+              <span :style="{ color: pageState.fileData.name ? '' : '#999' }">{{
+                !pageState.fileData.name ? "请选择文件" : pageState.fileData.name
+              }}</span>
+            </div>
+            <el-upload :before-upload="checkFileBeforeUpload">
+              <el-button type="primary">选择文件</el-button>
+            </el-upload>
+          </div>
+          <div style="text-align: center; margin: 60px 0 30px 0">
+            <el-button type="primary" @click="handleConfirmAttachment"
+              >确定</el-button
+            >
+            <el-button
+              type="primary"
+              plain
+              @click="pageState.showUploadAttachment = false"
+              >取消</el-button
+            >
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+
+<style>
+.el-message-box__header .el-message-box__title {
+  color: #333 !important;
+}
+.detail-wrap .el-input {
+  width: 100% !important;
+}
+.detail-wrap .el-input-number .el-input__inner {
+  pointer-events: none;
+}
+</style>
+<style lang="scss" scoped>
+.upload-attachment-wrap {
+  .box {
+    width: 380px;
+    display: inline-block;
+    box-sizing: border-box;
+    height: 40px;
+    line-height: 40px;
+    padding: 0 17px;
+    font-size: 14px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.seal-approval-wrap {
+  .content {
+    background: #ffffff;
+    border: 1px solid #ececec;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    padding: 30px;
+    min-height: 80vh;
+  }
+  .btn {
+    display: inline-block;
+    color: #409eff;
+    cursor: pointer;
+    margin: 0 5px;
+  }
+}
+
+.pagination-wrap {
+  margin-top: 30px;
+  display: flex;
+  justify-content: flex-end;
+}
+.detail-wrap {
+  max-height: 70vh;
+  overflow-y: scroll;
+  display: flex;
+  justify-content: space-between;
+  .main {
+    width: 75%;
+    .table-wrap {
+      width: 100%;
+      // text-align: center;
+      border-top: 1px solid #dcdfe6;
+      border-left: 1px solid #dcdfe6;
+      .table-item {
+        padding: 14px 10px;
+        border-right: 1px solid #dcdfe6;
+        border-bottom: 1px solid #dcdfe6;
+        position: relative;
+      }
+      .width-50 {
+        width: 50%;
+      }
+    }
+    .service-wrap {
+      margin-top: 42px;
+      font-size: 14px;
+      display: flex;
+      color: #333;
+    }
+    .dashed-line {
+      margin: 40px 0;
+      border-top: 1px dashed #aab4cc;
+    }
+  }
+  .right {
+    width: 22%;
+    .contract-origin {
+      margin: 15px 0;
+    }
+    .timeline-wrap {
+      max-height: 500px;
+      overflow-y: auto;
+      // margin-top: 20px;
+      background-color: #fff;
+      border: 1px solid #aab4cc;
+      padding: 20px;
+      border-radius: 4px;
+      text-align: left;
+      height: calc(100% - 120px);
+    }
+  }
+}
+
+.approval-step-wrap {
+  .step-item {
+    margin: 15px 0;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+      float: left;
+      margin-top: 4px;
+    }
+    .user-box {
+      padding-left: 100px;
+      span {
+        display: inline-block;
+        background-color: #409eff;
+        color: #fff;
+        padding: 3px 5px;
+        border-radius: 3px;
+        margin-right: 10px;
+      }
+      span:first-child {
+        background-color: #fff;
+        color: #333;
+        padding: 0;
+      }
+    }
+  }
+}
+.attachment-contain {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 0;
+  .attachment-image {
+    height: 100px;
+    width: 100px;
+    cursor: pointer;
+    margin: 0 10px 20px 10px;
+  }
+}
+</style>

src/views/seal_manage/updateSeal.vue

@@ -0,0 +1,487 @@
+<script setup>
+import { contractInterface, sealInterence } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+import { computed, nextTick, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute()
+const router = useRouter()
+
+function ValidateUseCompanyName(rule, val, cb) {
+  return pageState.sealForm.Use === "代付合同" && val === ""
+    ? cb(new Error("请填写实际使用方"))
+    : cb();
+}
+
+// 根据fileUrl判断文件类型
+function fileType(fileUrl) {
+  if (/^.+(\.pdf)$/i.test(fileUrl)) {
+    return "pdf";
+  } else if (/^.+(\.doc|\.docx)$/i.test(fileUrl)) {
+    return "word";
+  } else {
+    return "other";
+  }
+}
+
+
+// 用印id,有则表示编辑,无表示新增
+const sealId = computed(() => {
+  return route.query.id || null
+})
+
+// 判断上传控件是否显示
+const isUploadShow = computed(() => {
+  return pageState.sealForm.source === "系统合同"
+})
+
+const companySelector=ref(null)//搜索框实例
+
+const sealForm = ref(null)//表单实例
+const pageState = reactive({
+  sealForm: {
+    //表单数据
+    Use: "", //用印用途
+    CompanyName: "", //客户名称
+    ServiceType: "", //合同类型
+    UseCompanyName: "", //实际使用方
+    SealType: [], //加盖何种印章
+    source: "系统合同", //合同来源
+    CreditCode: "", //社会信用码
+    FileNum: 1, //文件份数
+    Remark: "", //审批备注
+    fileList: [], //合同附件
+    ContractId: 0, //合同id(默认为0)
+  },
+  sealRules: {
+    //表单校验规则
+    Use: [{ required: true, message: "请选择用印用途", trigger: "blur" }],
+    CompanyName: [
+      { required: true, message: "请选择客户名称", trigger: "blur" },
+    ],
+    ServiceType: [
+      { required: true, message: "请选择合同类型", trigger: "change" },
+    ],
+    UseCompanyName: [
+      { validator: ValidateUseCompanyName, trigger: "change" },
+    ],
+    SealType: [
+      { required: true, message: "请选择加盖何种印章", trigger: "blur" },
+    ],
+    CreditCode: [
+      { required: true, message: "请填写社会信用码", trigger: "change" },
+    ],
+    fileList: [
+      { required: true, message: "请上传合同附件", trigger: "change" },
+    ],
+  },
+  purposeOptions: [
+    //用印用途选项
+    { label: "销售合同", value: 1 },
+    { label: "代付合同", value: 2 },
+    { label: "渠道合同", value: 3 },
+    { label: "付款通知函", value: 4 },
+    { label: "招投标", value: 5 },
+    { label: "战略合作协议", value: 6 },
+    { label: "总对总协议", value: 7 },
+  ],
+  ServiceTypeOptions: [
+    //合同类型选项
+    { label: "新签合同", value: 1 },
+    { label: "续约合同", value: 2 },
+    { label: "补充协议", value: 3 },
+    { label: "代付合同", value: 4 },
+  ],
+  SealTypeOptions: [
+    //加盖何种印章选项
+    { label: "合同章", value: 1 },
+    { label: "公章", value: 2 },
+    { label: "法人章", value: 3 },
+  ],
+  isWatch: true, // 控制watch是否触发
+})
+
+function init() {
+  // 如果是编辑页面先获取用印详情信息
+  if (sealId.value) {
+    getsealApprovalDetail();
+  }
+}
+init()
+
+
+// 获取用印详情
+async function getsealApprovalDetail() {
+  try {
+    const res = await sealInterence.sealApprovalDetail({
+      SealId: sealId.value,
+    });
+    if (res.Ret === 200) {
+      // 关闭监听
+      pageState.isWatch = false;
+      const SealDetail = res.Data.SealDetail;
+      pageState.sealForm.Use = SealDetail.Use;
+      pageState.sealForm.CreditCode = SealDetail.CreditCode;
+      pageState.sealForm.ContractId = SealDetail.ContractId;
+      pageState.sealForm.CompanyName = SealDetail.CompanyName;
+      pageState.sealForm.FileNum = SealDetail.FileNum;
+      // 返回数据改为多个文件url的数组 FileUrls
+      // pageState.sealForm.fileList.push({ FileUrl: SealDetail.FileUrl });
+      SealDetail.FileUrls.map(i => {
+        pageState.sealForm.fileList.push({ FileUrl: i })
+      })
+      pageState.sealForm.Remark = SealDetail.Remark;
+      pageState.sealForm.SealType = SealDetail.SealType.split(",");
+      pageState.sealForm.ServiceType = SealDetail.ServiceType;
+      pageState.sealForm.UseCompanyName = SealDetail.UseCompanyName;
+      pageState.sealForm.source =
+        SealDetail.ContractId > 0 ? "系统合同" : "上传附件";
+      // 打开监听
+      nextTick(() => {
+        pageState.isWatch = true;
+      })
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+// 合同预览
+function preview(file) {
+  const fileTypeVal = fileType(file.FileUrl);
+  let href = "";
+  if (fileTypeVal === "word") {
+    href =
+      "https://view.officeapps.live.com/op/view.aspx?src=" + file.FileUrl;
+  } else {
+    href = file.FileUrl;
+  }
+  window.open(href, "_blank");
+}
+// 合同移除
+function handleRemove(file) {
+  pageState.sealForm.fileList = pageState.sealForm.fileList.filter(
+    (item) => item.uid !== file.uid
+  );
+}
+// 修改文件时触发  [选择了文件，上传成功，上传失败]
+function changeFile(file, fileList) {
+  pageState.sealForm.fileList = fileList.filter((item) => item.status==='success'&&item.FileUrl);
+}
+// 上传之前的钩子
+function beforeUpload(file) {
+  // 检查文件类型
+  if (fileType(file.name) === "other") {
+    ElMessage.error("上传文件只能是 PDF、DOC、DOCX 格式!");
+    return false;
+  }
+  //  检查大小
+  //   const maxSize = 10 * 1024 * 1024
+  //   if (maxSize < file.size) {
+  //     this.$message.error('图片大小最大不能超过5M')
+  //     return false
+  //   }
+  return true; // 最后一定要return  true
+}
+// 上传事件
+async function upload(params) {
+  if (!params.file) return;
+  const fd = new FormData();
+  fd.append("file", params.file);
+  try {
+    const res = await sealInterence.resourceUpload(fd);
+    if (res.Ret === 200) {
+      // this.sealForm.fileList = [];
+      pageState.sealForm.fileList.push({ FileUrl: res.Data.ResourceUrl });
+      console.log('1',pageState.sealForm.fileList);
+      // 单独清除合同附件的校验
+      sealForm.value.clearValidate("fileList");
+      ElMessage.success("上传成功");
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+// 关键字联想
+async function querySearch(queryString, cb) {
+  // 合同来源为上传附件时不进行联想
+  if (pageState.sealForm.source === "上传附件" || queryString === "")
+    return cb([]);
+  let results = [];
+  try {
+    const res = await sealInterence.getContractListBySeal({
+      Keyword: queryString,
+    });
+    if (res.Ret === 200) {
+      results = res.Data;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+  if (!results.length) pageState.sealForm.ContractId = 0;
+  // 调用 callback 返回建议列表的数据
+  cb(results);
+}
+// 选择事件
+function selectHandel(item) {
+  pageState.sealForm.CompanyName = item.CompanyName;
+  pageState.sealForm.UseCompanyName =
+    item.ContractBusinessType === "代付合同"
+      ? item.UserCompanyName
+      : item.CompanyName;
+  pageState.sealForm.ContractId = item.ContractId;
+  pageState.sealForm.ServiceType = item.ContractType;
+  pageState.sealForm.CreditCode = item.CreditCode;
+  pageState.sealForm.fileList = [];
+  pageState.sealForm.fileList.push({ FileUrl: item.FileUrl });
+  // 单独清除合同附件的校验
+  sealForm.value.clearValidate("fileList");
+}
+// 表单提交
+async function onSubmit() {
+  try {
+    await sealForm.value.validate();
+    const formData = {
+      CompanyName: pageState.sealForm.CompanyName,
+      ContractId: pageState.sealForm.ContractId,
+      CreditCode: pageState.sealForm.CreditCode,
+      FileNum: pageState.sealForm.FileNum,
+      FileUrls: pageState.sealForm.fileList.map(item => item.FileUrl),
+      Remark: pageState.sealForm.Remark,
+      SealType: pageState.sealForm.SealType.join(","),
+      ServiceType: pageState.sealForm.ServiceType,
+      Use: pageState.sealForm.Use,
+      UseCompanyName: pageState.sealForm.UseCompanyName,
+    };
+    let res = {};
+    if (sealId.value) {
+      // 编辑用印
+      formData.SealId = sealId.value * 1;
+      res = await sealInterence.sealEditSealApproval(formData);
+    } else {
+      // 新增用印
+      res = await sealInterence.sealApplySealApproval(formData);
+    }
+    // 成功
+    if (res.Ret === 200) {
+      ElMessage.success(res.Msg);
+      router.go(-1);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+// 根据文件返回文件图标
+function fileTypeIcon(file) {
+  if (!file.FileUrl) return "";
+  const fileTypeVal = fileType(file.FileUrl);
+  return fileTypeVal === "word"
+    ? require("@/assets/img/constract/word-icon.png")
+    : require("@/assets/img/constract/pdf.png");
+}
+
+
+</script>
+
+<template>
+  <el-card class="update-seal-card">
+    <el-form
+      ref="sealForm"
+      :model="pageState.sealForm"
+      :rules="pageState.sealRules"
+      label-width="140px"
+    >
+      <div class="one-part">
+        <div class="box">
+          <el-form-item label="用印用途：" prop="Use">
+            <el-select v-model.trim="pageState.sealForm.Use" clearable>
+              <el-option
+                v-for="item in pageState.purposeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户名称：" prop="CompanyName">
+            <el-autocomplete
+              ref="companySelector"
+              popper-class="custom-autocomplete"
+              placeholder="请输入用户名称"
+              :fetch-suggestions="querySearch"
+              :trigger-on-focus="false"
+              @select="selectHandel"
+              @focus="companySelector.suggestions = []"
+              v-model.trim="pageState.sealForm.CompanyName"
+            >
+              <template #default="{ item }">
+                <h5 class="name">{{ item.CompanyName }}</h5>
+                <p class="item">合同编号:{{ item.ContractCode }}</p>
+                <p class="item">合同类型:{{ item.ContractType }}</p>
+                <p class="item">合同金额:{{ item.Price }}</p>
+              </template>
+            </el-autocomplete>
+          </el-form-item>
+          <el-form-item label="合同类型：" prop="ServiceType">
+            <el-select
+              v-model="pageState.sealForm.ServiceType"
+              :disabled="pageState.sealForm.source === '系统合同'"
+              clearable
+            >
+              <el-option
+                v-for="item in pageState.ServiceTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            :class="{ required: pageState.sealForm.Use === '代付合同' }"
+            label="实际使用方："
+            prop="UseCompanyName"
+            ><el-input
+              class="form-input"
+              placeholder="请填写实际使用方名称"
+              v-model.trim="pageState.sealForm.UseCompanyName"
+              :disabled="pageState.sealForm.source === '系统合同'"
+            ></el-input
+          ></el-form-item>
+          <el-form-item label="加盖何种印章：" prop="SealType">
+            <el-select v-model="pageState.sealForm.SealType" multiple clearable>
+              <el-option
+                v-for="item in pageState.SealTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="box">
+          <el-form-item label="合同来源：" prop="source">
+            <el-radio-group v-model="pageState.sealForm.source">
+              <el-radio label="系统合同" border>系统合同</el-radio>
+              <el-radio label="上传附件" border>上传附件</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="社会信用码：" prop="CreditCode"
+            ><el-input
+              class="form-input"
+              placeholder="请填写统一社会信用码"
+              v-model.trim="pageState.sealForm.CreditCode"
+              :disabled="pageState.sealForm.source === '系统合同'"
+            ></el-input
+          ></el-form-item>
+          <el-form-item label="文件份数：" prop="FileNum"
+            ><el-input-number
+              :min="1"
+              v-model="pageState.sealForm.FileNum"
+            ></el-input-number
+          ></el-form-item>
+        </div>
+      </div>
+      <div class="two-part">
+        <el-form-item label="审批备注：" prop="Remark"
+          ><el-input
+            placeholder="请填写备注"
+            v-model="pageState.sealForm.Remark"
+          ></el-input
+        ></el-form-item>
+        <el-form-item label="合同附件：" prop="fileList">
+          <!-- 需求更改 可上传多个附件 crm_8.7 -->
+          <el-upload
+            list-type="picture-card"
+            :file-list="pageState.sealForm.fileList"
+            action="#"
+            multiple
+            :class="{ disabled: isUploadShow }"
+            :on-change="changeFile"
+            :before-upload="beforeUpload"
+            :http-request="upload"
+            :disabled="pageState.sealForm.source === '系统合同'"
+            accept=".pdf,.doc,.docx"
+          >
+            <i class="el-icon-plus" />
+            <template #file="{ file }">
+              <div>
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="fileTypeIcon(file)"
+                  alt=""
+                />
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="preview(file)"
+                  >
+                    <i class="el-icon-zoom-in"></i>
+                  </span>
+                  <span
+                    v-if="pageState.sealForm.source !== '系统合同'"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </div>
+      <div class="btn-group">
+        <el-button @click="$router.go(-1)">取消</el-button>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+      </div>
+    </el-form>
+  </el-card>
+</template>
+
+<style lang='scss'>
+.update-seal-card {
+  .one-part {
+    display: flex;
+    .box {
+      flex: 1;
+    }
+    .el-select,
+    .el-autocomplete,
+    .form-input {
+      width: 300px;
+    }
+    .el-input-number {
+      width: 120px;
+      .el-input .el-input__inner {
+        pointer-events: none;
+      }
+    }
+    .required .el-form-item__label {
+      &::before {
+        content: "*";
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+    }
+  }
+  .two-part {
+    .disabled .el-upload--picture-card {
+      visibility: hidden;
+    }
+    .el-upload-list {
+      // position: absolute;
+      .el-upload-list__item {
+        border: 0;
+      }
+    }
+  }
+  .btn-group {
+    display: flex;
+    justify-content: center;
+  }
+}
+.custom-autocomplete {
+  .item {
+    line-height: 20px;
+  }
+}
+</style>