合同审批列表

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.6.7",
     "crypto-js": "^4.2.0",
     "element-plus": "2.4.4",
+    "jquery": "^3.7.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0",

src/views/contract_manage/approvalList.vue

@@ -16,9 +16,15 @@ import { Search } from "@element-plus/icons-vue";
 import { formatTime } from '@/utils/date'
 import { formatPriceHasPoint } from '@/utils/common'
 import { CalculationDate } from '@/utils/CalculationDate'
-import { computed, reactive,watch } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { computed, reactive, watch,ref } from "vue";
+import { onBeforeRouteLeave, useRouter } from "vue-router";
 import http from "@/api/http.js";
+import { ElMessage } from 'element-plus';
+import { contractInterface, customInterence } from "@/api/api.js";
+import $ from "jquery"
+import PreviewService from './components/PreviewService.vue'
+
+const router = useRouter()
 
 
 function formateYear(s, e) {
@@ -210,18 +216,350 @@ function initPage() {
 }
 initPage()
 
+//获取所属销售列表
+function getSellerList() {
+  contractInterface.getSellerList().then((res) => {
+    if (res.Ret === 200) {
+      pageState.sellerList = res.Data.List;
+    }
+  });
+}
+
+//获取审批列表
+function getApprovalList() {
+  let salesArr = []
+  if (pageState.seller.length) {
+    salesArr = pageState.seller.map(item => {
+      return item[item.length - 1]
+    })
+  }
+  let params = {
+    ContractType: pageState.constractTypeVal,
+    Status: pageState.constractStatusVal === '全部' ? '' : pageState.constractStatusVal,
+    ProductId: Number(pageState.constractBelongVal),
+    SellerId: salesArr.join(','),
+    ModifyStartTime: !pageState.timeRange ? '' : pageState.timeRange[0] ? `${pageState.timeRange[0]} 00:00:00` : "",
+    ModifyEndTime: !pageState.timeRange ? '' : pageState.timeRange[1] ? `${pageState.timeRange[1]} 23:59:59` : "",
+    Keyword: pageState.searchVal,
+    CurrentIndex: pageState.page,
+    PageSize: pageState.pageSize,
+    ContractBusinessType: pageState.ContractBusinessType,
+  };
+  contractInterface.getApprovalList(params).then((res) => {
+    if (res.Ret === 200) {
+      pageState.tableList = res.Data.List;
+      pageState.total = res.Data.Paging.Totals;
+    }
+  });
+}
+
+// 查看回签、解约附件
+function handleViewFile(url) {
+  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');
+  }
+}
+
+function handleConfirmAttachment() {
+  if (!pageState.fileData.file) {
+    ElMessage.warning('请上传文件');
+    return
+  }
+  if (pageState.fileData.type === 1 || pageState.fileData.type === 2) {
+    handleCheckFile()
+  } else if (pageState.fileData.type === 3) {
+    handleRescindFile()
+  }
+}
+
+//处理回签附件
+async function handleCheckFile() {
+  let form = new FormData();
+  form.append("file", pageState.fileData.file)
+  form.append('ContractId', pageState.fileData.contractId)
+  const res = await contractInterface.uploadCheckFile(form)
+  if (res.Ret === 200) {
+    if (pageState.fileData.type === 1) {
+      ElMessage.success('上传成功');
+    } else {
+      ElMessage.success('更新成功');
+    }
+
+    getApprovalList()
+    pageState.showUploadAttachment = false
+  }
+}
+
+//处理解除协议
+async function handleRescindFile() {
+  let form = new FormData();
+  form.append("file", pageState.fileData.file)
+  form.append('ContractId', pageState.fileData.contractId)
+  const res = await contractInterface.uploadRescindFile(form)
+  if (res.Ret === 200) {
+    ElMessage.success('解除成功');
+    getApprovalList()
+    pageState.showUploadAttachment = false
+  }
+}
+
+// 显示上传附件弹窗 e 数据  type:1上传 2 更新 3解除
+function handleShowUploadAttachment(e, type) {
+  if (type === 1) {
+    pageState.fileData.title = `上传签回合同(${e.CompanyName})`
+  } else if (type === 2) {
+    pageState.fileData.title = `更新签回合同(${e.CompanyName})`
+    pageState.fileData.name = e.CheckBackFileUrl.substring(e.CheckBackFileUrl.lastIndexOf('/') + 1)
+    pageState.fileData.url = e.CheckBackFileUrl
+  } else if (type === 3) {
+    pageState.fileData.title = `上传解除协议(${e.CompanyName})`
+  }
+  pageState.fileData.contractId = e.ContractId
+  pageState.fileData.type = type
+  pageState.showUploadAttachment = true
+}
+
+function checkFileBeforeUpload(file) {
+  let hostfile = file;
+  let size = Math.floor(hostfile.size / 1024 / 1024);
+  if (size > 200) {
+    ElMessage.error("上传文件大小不能大于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.error("请上传PDF/word文件！");
+  }
+  return false
+}
+
+// 上传（更新）附件
+function handleUploadAttachment() {
+  $("#fileCard").click();
+}
+
+// 选择文件上传
+function fileSelected() {
+  //选择文件上传
+  if (document.getElementById("fileCard").files[0]) {
+    let hostfile = document.getElementById("fileCard").files[0];
+    let size = Math.floor(hostfile.size / 1024 / 1024);
+    if (size > 200) {
+      ElMessage.error("上传文件大小不能大于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.error("请上传PDF/word文件！");
+    }
+  }
+}
+
+//下载合同
+function handleDownloadContract(e) {
+  if (!e.FileUrl) {
+    ElMessage.warning('合同文件正在后台生成中,请稍后刷新页面下载!')
+    return
+  }
+  let link = document.createElement("a");
+
+  link.href = e.FileUrl + "?response-content-type=application/octet-stream"; //下载链接
+
+  link.setAttribute("download", e.ContractCode);
+  link.style.display = "none"; //a标签隐藏
+  document.body.appendChild(link);
+  link.click();
+}
+
+//预览合同
+function handlePreviewContract() {
+  let { href } = router.resolve({ path: "/contractdtl", query: { contractid: pageState.approvalData.ContractId } });
+  window.open(href, '_blank');
+}
+
+//跳转合同详情
+function handleGoDetail(id, type) {
+  if (type === '代付合同') {
+    router.push({ path: "/contractdetaildcapr", query: { contractId: id } });
+  } else {
+    router.push({ path: "/contractdetailapr", query: { contractId: id } });
+  }
+}
+
+//关闭预览套餐弹窗
+function handleClosePreviewService() {
+  pageState.showService = false
+}
+
+//预览套餐(审批弹框中)
+function handlePreviewService(e) {
+  pageState.serviceCon = [e]
+  pageState.showService = true
+}
+
+function handleShowService(e) {
+  pageState.serviceCon = e.ContractInfo.Service
+  pageState.showService = true
+}
 
-function getSellerList(){
+//搜索
+function handleSearch() {
+  pageState.constractTypeVal = "";
+  pageState.constractStatusVal = "全部";
+  pageState.seller = ''
+  pageState.constractBelongVal = ''
+  pageState.timeRange = ['', '']
+  pageState.ContractBusinessType = ''
+  pageState.page = 1;
+  getApprovalList();
+}
 
+//类型或者状态变更
+function handleSelectChange() {
+  pageState.searchVal = "";
+  pageState.page = 1;
+  getApprovalList();
+}
+
+//获取合同操作记录
+function getContractOperationList(id) {
+  contractInterface.getContractOperationList({ ContractId: id }).then((res) => {
+    if (res.Ret === 200) {
+      pageState.operationList = res.Data.List && res.Data.List.map(item => {
+        return { ...item, CreateTimeStr: item.CreateTimeStr.replace(/-/g, '.') }
+      }) || [];
+    }
+  });
+}
+
+//点击审批
+function handleShowApproval(e) {
+  pageState.approvalData = e;
+  contractInterface.getContractDetail({ ContractId: e.ContractId }).then(({ Data: { PermissionLookList, Service, RelationContractDetailList } }) => {
+    // 获取小套餐的品种
+    pageState.PermissionLookList = PermissionLookList
+    // 获取权益服务内容
+    pageState.approvalData.ContractInfo.Service = Service
+    if (e.ContractInfo.ContractBusinessType === '代付合同') {
+      let arr = []
+      RelationContractDetailList.forEach(item => {
+        item.Service.forEach(item2 => {
+          arr.push(item2)
+        })
+      })
+      pageState.approvalData.ContractInfo.Service = arr
+    }
+    pageState.show = true
+  })
+
+  // 处理变更数据
+  let temarr = e.ContractInfo.ModifyContent.split('<br/>').filter(item => item)
+  // console.log(temarr);
+  pageState.change.first = temarr[0]
+  pageState.change.list = temarr.slice(1)
+
+  // console.log(temarr);
+  getContractOperationList(e.ContractId);
+}
+
+//刷新列表
+function handleRefreshList() {
+  pageState.searchVal = ''
+  pageState.constractTypeVal = ''
+  pageState.constractStatusVal = '待审批'
+  pageState.seller = ''
+  pageState.page = 1
+  getApprovalList()
+}
+
+//页码改变
+function handlePageChange(e) {
+  pageState.page = e;
+  getApprovalList();
+}
+
+//提交审批
+const FormEl = ref(null)
+function handleConfirmApproval() {
+  FormEl.value.validate((valid) => {
+    if (valid) {
+      // 通过
+      if (pageState.form.status === "通过") {
+        contractInterface.contractApplyApproval({ ContractApprovalRecordId: pageState.approvalData.ContractApprovalRecordId }).then((res) => {
+          if (res.Ret === 200) {
+            pageState.show = false;
+            pageState.form.reason = "";
+            handleRefreshList()
+            ElMessage.success('审批成功')
+          }
+        });
+      } else {
+        contractInterface.contractApplyReject({ ContractApprovalRecordId: pageState.approvalData.ContractApprovalRecordId, Remark: pageState.form.reason }).then((res) => {
+          if (res.Ret === 200) {
+            pageState.show = false;
+            pageState.form.reason = "";
+            handleRefreshList()
+            ElMessage.success('驳回成功')
+          }
+        });
+      }
+    }
+  });
 }
 
-function getApprovalList(){
-    
+//取消审批
+function handleCancelApproval() {
+  FormEl.value.resetFields();
+  pageState.show = false;
 }
 
+//下载合同模板
+function handleDownloadContractTemplate() {
+  contractInterface.getContractTemplate().then((res) => {
+    if (res.Ret === 200) {
+      pageState.contractTemList = res.Data;
+      pageState.showDownload = true;
+    }
+  });
+}
 
+//查看详细操作说明
+function explainDialog() {
+  pageState.explainShowDownload = true;
+}
 
+function formatChangeInfo(str) {
+  let arr = str.split('</n>').filter(item => item)
+  let arr2 = arr.map(item => {
+    return `<p>${item}</p>`
+  })
+  return arr2.join('')
+}
 
+// 审批弹窗审批状态切换
+function approvalFromStatusChange() {
+  if (pageState.form.status === '驳回') {
+    let top = $('.approval-wrap')[0].offsetTop
+    $('.approval-wrap').animate({
+      "scrollTop": top + 1000
+    })
+  }
+}
 
 
 
@@ -251,13 +589,13 @@ function getApprovalList(){
       </el-input>
     </div>
     <div class="list-wrap">
-      <div style="margin-top: 10px; margin-bottom: 10px">
+      <div style="margin-top: 10px; margin-bottom: 30px">
         <el-select
           v-model="pageState.constractTypeVal"
           @change="handleSelectChange"
           placeholder="合同类型"
           clearable
-          style="margin-bottom: 20px; margin-right: 20px; width: 150px"
+          style="width: 150px;margin-right:20px"
         >
           <el-option
             v-for="item in pageState.constractTypeOptions"
@@ -271,7 +609,7 @@ function getApprovalList(){
           v-model="pageState.constractStatusVal"
           @change="handleSelectChange"
           placeholder="合同状态"
-          style="margin-bottom: 20px; margin-right: 20px; width: 150px"
+          style="width: 150px;margin-right:20px"
         >
           <el-option
             v-for="item in pageState.constractStatusOptions"
@@ -287,7 +625,7 @@ function getApprovalList(){
         <el-cascader
           v-model="pageState.seller"
           placeholder="申请销售"
-          style="min-width: 250px; margin-bottom: 20px; margin-right: 20px"
+          style="min-width: 250px;margin-right:20px"
           :options="pageState.sellerList"
           :props="pageState.defaultSalesProps"
           :show-all-levels="false"
@@ -297,13 +635,13 @@ function getApprovalList(){
           @change="handleSelectChange"
         >
         </el-cascader>
-        <div style="display: inline-block">
+        <div style="display: inline-block;margin-right:20px">
           <span>是否代付</span>
           <el-select
             v-model="pageState.ContractBusinessType"
             @change="handleSelectChange"
             placeholder="是否代付"
-            style="margin-bottom: 20px; margin-right: 20px; width: 150px"
+            style="width: 150px"
           >
             <el-option label="全部" value=""></el-option>
             <el-option label="否" value="业务合同"></el-option>
@@ -514,10 +852,10 @@ function getApprovalList(){
       <el-pagination
         layout="total,prev,pager,next,jumper"
         background
-        :current-page="page"
+        :current-page="pageState.page"
         @current-change="handlePageChange"
-        :page-size="pageSize"
-        :total="total"
+        :page-size="pageState.pageSize"
+        :total="pageState.total"
         class="pagination-wrap"
       >
       </el-pagination>
@@ -528,13 +866,16 @@ function getApprovalList(){
       width="58%"
       top="5vh"
       v-dialogDrag
-      :model-value="show"
+      :model-value="pageState.show"
       :modal-append-to-body="false"
       @close="handleClose"
     >
       <template #header>
         <div v-if="pageState.approvalData">
-          <span>合同编号： {{ pageState.approvalData.ContractInfo.ContractCode }}</span>
+          <span
+            >合同编号：
+            {{ pageState.approvalData.ContractInfo.ContractCode }}</span
+          >
         </div>
       </template>
 
@@ -543,7 +884,10 @@ function getApprovalList(){
           <!-- 代付合同 -->
           <table
             class="table-wrap"
-            v-if="pageState.approvalData.ContractInfo.ContractBusinessType === '代付合同'"
+            v-if="
+              pageState.approvalData.ContractInfo.ContractBusinessType ===
+              '代付合同'
+            "
           >
             <tbody>
               <tr>
@@ -551,7 +895,9 @@ function getApprovalList(){
                   代付方：{{ pageState.approvalData.ContractInfo.CompanyName }}
                 </td>
                 <td class="table-item width-50">
-                  社会信用码：{{ pageState.approvalData.ContractInfo.CreditCode }}
+                  社会信用码：{{
+                    pageState.approvalData.ContractInfo.CreditCode
+                  }}
                 </td>
               </tr>
               <tr>
@@ -567,27 +913,31 @@ function getApprovalList(){
               <tr>
                 <td class="table-item width-50">
                   代付金额：{{
-                    formatPriceHasPoint(pageState.approvalData.ContractInfo.Price)
+                    formatPriceHasPoint(
+                      pageState.approvalData.ContractInfo.Price
+                    )
                   }}元
                 </td>
                 <td class="table-item width-50">
                   合同归属：{{
-                    pageState.approvalData.ContractInfo.ProductId === 1 ? "FICC" : "权益"
+                    pageState.approvalData.ContractInfo.ProductId === 1
+                      ? "FICC"
+                      : "权益"
                   }}
                 </td>
               </tr>
               <tr>
                 <td class="table-item width-50">
                   实际使用方：{{
-                    pageState.approvalData.ContractInfo.RelationContractDetailList[0]
-                      .CompanyName
+                    pageState.approvalData.ContractInfo
+                      .RelationContractDetailList[0].CompanyName
                   }}
                 </td>
                 <td class="table-item width-50">
                   合同金额：{{
                     formatPriceHasPoint(
-                      pageState.approvalData.ContractInfo.RelationContractDetailList[0]
-                        .Price
+                      pageState.approvalData.ContractInfo
+                        .RelationContractDetailList[0].Price
                     )
                   }}元
                 </td>
@@ -595,8 +945,12 @@ function getApprovalList(){
               <tr>
                 <td class="table-item" colspan="2">
                   合同期限：{{
-                    formatTime(pageState.approvalData.ContractInfo.StartDateStr)
-                  }}~{{ formatTime(pageState.approvalData.ContractInfo.EndDateStr) }}（{{
+                    formatTime(
+                      pageState.approvalData.ContractInfo.StartDateStr
+                    )
+                  }}~{{
+                    formatTime(pageState.approvalData.ContractInfo.EndDateStr)
+                  }}（{{
                     formateYear(
                       pageState.approvalData.ContractInfo.StartDate,
                       pageState.approvalData.ContractInfo.EndDate
@@ -612,10 +966,14 @@ function getApprovalList(){
               <tbody>
                 <tr>
                   <td class="table-item width-50">
-                    客户名称：{{ pageState.approvalData.ContractInfo.CompanyName }}
+                    客户名称：{{
+                      pageState.approvalData.ContractInfo.CompanyName
+                    }}
                   </td>
                   <td class="table-item width-50">
-                    社会信用码：{{ pageState.approvalData.ContractInfo.CreditCode }}
+                    社会信用码：{{
+                      pageState.approvalData.ContractInfo.CreditCode
+                    }}
                   </td>
                 </tr>
                 <tr>
@@ -625,25 +983,35 @@ function getApprovalList(){
                     }}{{ pageState.approvalData.ContractInfo.Address }}
                   </td>
                   <td class="table-item width-50">
-                    申请销售：{{ pageState.approvalData.ContractInfo.SellerName }}
+                    申请销售：{{
+                      pageState.approvalData.ContractInfo.SellerName
+                    }}
                   </td>
                 </tr>
                 <tr>
                   <td class="table-item width-50">
-                    合同类型：{{ pageState.approvalData.ContractInfo.ContractType }}
+                    合同类型：{{
+                      pageState.approvalData.ContractInfo.ContractType
+                    }}
                   </td>
                   <td class="table-item width-50">
                     合同金额：{{
-                      formatPriceHasPoint(pageState.approvalData.ContractInfo.Price)
+                      formatPriceHasPoint(
+                        pageState.approvalData.ContractInfo.Price
+                      )
                     }}元
                   </td>
                 </tr>
                 <tr>
                   <td class="table-item width-50">
                     合同期限：{{
-                      formatTime(pageState.approvalData.ContractInfo.StartDateStr)
+                      formatTime(
+                        pageState.approvalData.ContractInfo.StartDateStr
+                      )
                     }}~{{
-                      formatTime(pageState.approvalData.ContractInfo.EndDateStr)
+                      formatTime(
+                        pageState.approvalData.ContractInfo.EndDateStr
+                      )
                     }}（{{
                       formateYear(
                         pageState.approvalData.ContractInfo.StartDate,
@@ -669,7 +1037,9 @@ function getApprovalList(){
                 </tr>
                 <tr>
                   <td class="table-item" colspan="2" style="text-align: left">
-                    付款方式说明：{{ pageState.approvalData.ContractInfo.PayRemark }}
+                    付款方式说明：{{
+                      pageState.approvalData.ContractInfo.PayRemark
+                    }}
                   </td>
                 </tr>
               </tbody>
@@ -704,7 +1074,9 @@ function getApprovalList(){
               </tr>
               <tr>
                 <td class="table-item" colspan="2" style="text-align: left">
-                  销售备注：{{ pageState.approvalData.ContractInfo.SellerRemark || "无" }}
+                  销售备注：{{
+                    pageState.approvalData.ContractInfo.SellerRemark || "无"
+                  }}
                 </td>
               </tr>
             </tbody>
@@ -730,7 +1102,10 @@ function getApprovalList(){
               <!-- div.package_varieties -->
               <div
                 class="service_varieties"
-                v-show="pageState.PermissionLookList && pageState.PermissionLookList.length != 0"
+                v-show="
+                  pageState.PermissionLookList &&
+                  pageState.PermissionLookList.length != 0
+                "
               >
                 <span>小套餐包含品种：</span>
                 <el-form
@@ -764,7 +1139,7 @@ function getApprovalList(){
           </div>
           <div class="dashed-line"></div>
           <el-form
-            ref="form"
+            ref="FormEl"
             :model="pageState.form"
             :rules="pageState.formRule"
             label-width="100px"
@@ -879,7 +1254,8 @@ function getApprovalList(){
             style="display: none"
           />
           <div class="box">
-            <span v-if="!pageState.fileData.name" style="color: #999">请选择文件</span
+            <span v-if="!pageState.fileData.name" style="color: #999"
+              >请选择文件</span
             >{{ pageState.fileData.name }}
           </div>
           <!-- <el-button type="primary" @click="handleUploadAttachment">选择文件</el-button> -->
@@ -1072,14 +1448,14 @@ function getApprovalList(){
           font-size: 14px;
           font-family: PingFang SC-Regular, PingFang SC;
           font-weight: 400;
-          -webkit-background-clip: text;
+          background-clip: text;
         }
         #service_varieties_form {
           span {
             font-family: PingFang SC-Regular, PingFang SC;
             font-weight: 400;
             color: #3385ff;
-            -webkit-background-clip: text;
+            background-clip: text;
             background: #eef5ff;
             border-radius: 2px 2px 2px 2px;
             padding: 2px 5px;

src/views/contract_manage/components/PreviewService.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  showPreview: false,
+  serviceCon: [],
+})
+
+const emits = defineEmits(['closePreviewService'])
+
+watch(
+  () => props.serviceCon,
+  (nval, oval) => {
+    if (nval.length === 0) return;
+    pageState.list = nval.map((item) => {
+      let obj = {};
+      if (item.HasDetail === "是") {
+        let temarr = item.DetailList.map((rowItem) => {
+          let rowArr = [];
+          for (let key in rowItem) {
+            if (key.substr(0, 3) === "Col" && rowItem[key] !== "") {
+              rowArr.push(JSON.parse(rowItem[key]));
+            }
+          }
+          return rowArr;
+        });
+        obj.tableHeadData = temarr[0];
+        obj.tableData = temarr.slice(1);
+      }
+      return { ...item, ...obj };
+    });
+  },
+  {
+    immediate: true
+  }
+)
+
+const pageState = reactive({
+  currentIndex: 1,
+  list: [],
+})
+
+function handleSwipeChange(e) {
+  pageState.currentIndex = e + 1;
+}
+
+function handleServiceClose() {
+  emits("closePreviewService");
+}
+
+
+
+</script>
+
+<template>
+  <div class="preview-service-wrap">
+    <!-- 大套餐或其他等直接查看图片类型的 -->
+    <el-dialog
+      draggable
+      :model-value="props.showPreview"
+      top="10vh"
+      class="self-dialog-c"
+      :modal-append-to-body="false"
+      @close="handleServiceClose"
+      :show-close="false"
+    >
+      <div style="height: 600px; margin-top: -20px">
+        <el-carousel
+          @change="handleSwipeChange"
+          indicator-position="none"
+          :autoplay="false"
+        >
+          <el-carousel-item v-for="opt in pageState.list" :key="opt.ServiceTemplateId">
+            <h2 style="text-align: center; margin-bottom: 20px">
+              {{ opt.Title }}
+            </h2>
+            <div style="height: 550px; overflow-y: auto; padding-bottom: 10px">
+              <img
+                class="img"
+                style="width: 100%; display: block"
+                :src="opt.Value"
+                alt=""
+              />
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+
+        <div style="text-align: center; font-size: 16px; padding: 10px 0">
+          {{ pageState.currentIndex }}/{{ pageState.list.length }}
+        </div>
+      </div>
+      <div style="text-align: center; margin: 50px 0">
+        <el-button type="primary" @click="handleServiceClose">知道了</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style>
+.self-dialog-c .el-dialog__header {
+  background-color: #fff;
+  padding: 0;
+}
+.self-dialog-c{
+  width: auto;
+  max-width: 60%;
+}
+.el-carousel {
+  height: 100%;
+}
+</style>
+<style lang="scss" scoped>
+.img{
+  image-rendering: -moz-crisp-edges; 
+  image-rendering: -o-crisp-edges; 
+  image-rendering: -webkit-optimize-contrast; 
+  image-rendering: crisp-edges; 
+  -ms-interpolation-mode: nearest-neighbor;
+}
+.table-wrap {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+  text-align: center;
+  border-top: 1px solid #ebeef5;
+  border-left: 1px solid #ebeef5;
+  .row-dark {
+    background-color: #deedff;
+  }
+  .table-item {
+    padding: 12px 10px;
+    border-right: 1px solid #ebeef5;
+    border-bottom: 1px solid #ebeef5;
+    min-width: 150px;
+    position: relative;
+  }
+}
+</style>