资产详情

src/assets/fonts/font.scss

 @font-face {
   font-family: YouSheBiaoTiHei;
-  src: url("./YouSheBiaoTiHei.ttf");
+  src: url('./YouSheBiaoTiHei.ttf');
 }
 
 @font-face {
   font-family: MetroDF;
-  src: url("./MetroDF.ttf");
+  src: url('./MetroDF.ttf');
 }
 
 @font-face {
   font-family: DIN;
-  src: url("./DIN.otf");
+  src: url('./DIN.otf');
 }

src/assets/iconfont/iconfont.scss

 @font-face {
   font-family: iconfont; /* Project id 2667653 */
-  src: url("iconfont.ttf?t=1719667796161") format("truetype");
+  src: url('iconfont.ttf?t=1719667796161') format('truetype');
 }
 .iconfont {
   font-family: iconfont !important;
@@ -12,40 +12,40 @@
 }
 .icon-yiwen::before {
   font-size: 15px;
-  content: "\e693";
+  content: '\e693';
 }
 .icon-xiala::before {
-  content: "\e62b";
+  content: '\e62b';
 }
 .icon-tuichu::before {
-  content: "\e645";
+  content: '\e645';
 }
 .icon-xiaoxi::before {
   font-size: 21.2px;
-  content: "\e61f";
+  content: '\e61f';
 }
 .icon-zhuti::before {
   font-size: 22.4px;
-  content: "\e638";
+  content: '\e638';
 }
 .icon-sousuo::before {
-  content: "\e611";
+  content: '\e611';
 }
 .icon-contentright::before {
-  content: "\e8c9";
+  content: '\e8c9';
 }
 .icon-contentleft::before {
-  content: "\e8ca";
+  content: '\e8ca';
 }
 .icon-fangda::before {
-  content: "\e826";
+  content: '\e826';
 }
 .icon-suoxiao::before {
-  content: "\e641";
+  content: '\e641';
 }
 .icon-zhongyingwen::before {
-  content: "\e8cb";
+  content: '\e8cb';
 }
 .icon-huiche::before {
-  content: "\e637";
+  content: '\e637';
 }

src/bootstrap.js

@@ -25,7 +25,7 @@ export async function bootstrapInstall() {
 
   // 挂载路由
   setupRouter(app);
-  app.component('ProTable', ProTable)
+  app.component('ProTable', ProTable);
   // 路由准备就绪后挂载 APP 实例
   await router.isReady();
 

src/layouts/components/Tabs/index.scss

@@ -56,7 +56,7 @@
                   bottom: 0;
                   width: 100%;
                   height: 0;
-                  content: "";
+                  content: '';
                   border-bottom: 2px solid var(--el-color-primary) !important;
                 }
               }

src/views/property/case-detail/components/reduceDrawer.vue

+<template>
+  <el-drawer
+    v-model="showModal"
+    title="减免申请"
+    :size="800"
+    direction="rtl"
+    :before-close="onHide"
+  >
+    <div class="h-full overflow-auto flex-col flex mydrawer">
+      <el-form
+        ref="formRef"
+        inline
+        :model="form"
+        :rules="rules"
+        label-width="110px"
+        label-position="left"
+      >
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item class="w-full" label="减免类型：" prop="name" label-width="82px">
+              <el-select v-model="form.relation" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="减免申请时间：" prop="code">
+              <el-date-picker v-model="form.datetime" type="datetime" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="减免到期时间：" prop="code">
+              <el-date-picker v-model="form.datetime" type="datetime" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="减免金额(总计)：" prop="name" label-width="120px">
+              4444
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="减免案件数：" prop="role"> 1 </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="应还金额：" prop="relation">
+              <div>
+                <p>3000</p>
+                <p class="text-red-600 leading-3">*应还金额</p>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div>
+        <ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
+          <template #table_top>
+            <p class="font-bold">关联案件：</p>
+          </template>
+        </ProTable>
+      </div>
+    </div>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="showModal = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="jsx" name="reduceDrawer">
+  import dayjs from 'dayjs';
+  import { computed } from 'vue';
+  import { reactive, ref } from 'vue';
+  const showModal = ref(false);
+  const tabledata = ref([]);
+  const form = reactive({
+    name: '',
+    relation: '',
+    datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  });
+  const currentAccount = ref({ people: 0, case: 0, money: 0 });
+  const onHide = (done) => {
+    currentAccount.value = { people: 0, case: 0, money: 0 };
+    done();
+  };
+  const options = [
+    {
+      value: 'Option1',
+      label: 'Option1',
+    },
+    {
+      value: 'Option2',
+      label: 'Option2',
+    },
+    {
+      value: 'Option3',
+      label: 'Option3',
+    },
+    {
+      value: 'Option4',
+      label: 'Option4',
+    },
+    {
+      value: 'Option5',
+      label: 'Option5',
+    },
+  ];
+  const config = reactive({
+    minHeight: 200,
+    columns: [
+      {
+        field: 'code',
+        title: '案件ID',
+      },
+      {
+        field: 'code',
+        title: '产品',
+      },
+      {
+        field: 'code',
+        title: '借款机构',
+      },
+      {
+        field: 'code',
+        title: '委案金额',
+      },
+      {
+        field: 'code',
+        title: '累计减免金额',
+      },
+      {
+        field: 'code',
+        title: '累计还款金额',
+      },
+      {
+        field: 'code',
+        title: '剩余待还金额',
+      },
+    ],
+    toolbarConfig: { enabled: false },
+  });
+  tabledata.value = [
+    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
+    { name: 'account1', code: 'account1', role: 'user', num: 1 },
+    { name: 'account2', code: 'account2', role: 'user', num: 1 },
+    { name: 'account3', code: 'account3', role: 'user', num: 1 },
+  ];
+  const openModal = (account) => {
+    showModal.value = true;
+    currentAccount.value = { people: 333, case: 44, money: 1111 };
+  };
+  const submitForm = () => {};
+  defineExpose({
+    openModal,
+  });
+</script>
+<style lang="scss" scoped>
+  .mydrawer {
+    :deep(.card) {
+      padding: 0;
+      border: none;
+    }
+  }
+</style>

src/views/property/case-detail/components/repairModal.vue

+<template>
+  <vxe-modal
+    v-model="showModal"
+    title="修复申请"
+    @hide="onHide"
+    height="582"
+    width="1003"
+    show-footer
+    esc-closable
+  >
+    <div class="w-full px-3 h-full overflow-auto flex-col flex">
+      <div class="box-title">案人基本信息</div>
+      <el-form ref="formRef" inline :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item class="w-full" label="姓名：" prop="name" label-width="72px">
+              {{ currentAccount.people }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item class="w-full" label="身份证号：" prop="code" label-width="85px">
+              {{ currentAccount.people }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item class="w-full" label="联系人姓名：" prop="name">
+              <el-input v-model="form.name" placeholder="请输入账号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="号码类型：" prop="role"> 修复 </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item class="w-full" label="与案人关系：" prop="relation">
+              <el-select v-model="form.relation" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="w-full" label="修复前联系号码：" prop="role" label-width="140px">
+              {{ currentAccount.people }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div class="flex-1">
+        <ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="true">
+          <template #left_buttons>
+            <el-button type="primary">下载申请 </el-button>
+            <el-button type="primary">审批 </el-button>
+            <el-button type="primary">下载 </el-button>
+            <el-button type="primary">批量修复上传 </el-button>
+          </template>
+        </ProTable>
+      </div>
+    </div>
+    <template #footer>
+      <el-button type="default" @click="showModal = false">取消</el-button>
+      <el-button type="primary" @click="submitForm">确定</el-button>
+    </template>
+  </vxe-modal>
+</template>
+
+<script setup lang="jsx" name="allocationModal">
+  import { computed } from 'vue';
+  import { reactive, ref } from 'vue';
+  const data = ref([]);
+  const mytransfer = ref();
+  const tabledata = ref([]);
+
+  const showModal = ref(false);
+  const currentAccount = ref({ people: 0, case: 0, money: 0 });
+  const form = reactive({
+    name: '',
+    relation: '',
+  });
+  const radio = ref(0);
+  const step = ref(0);
+
+  const onHide = () => {
+    currentAccount.value = { people: 0, case: 0, money: 0 };
+  };
+  const openModal = (account) => {
+    showModal.value = true;
+    currentAccount.value = { people: 333, case: 44, money: 1111 };
+    step.value = 0;
+    radio.value = 0;
+  };
+
+  const submitForm = () => {
+    if (step.value || radio.value === 0) {
+    } else {
+      step.value = 1;
+    }
+  };
+  const options = [
+    {
+      value: 'Option1',
+      label: 'Option1',
+    },
+    {
+      value: 'Option2',
+      label: 'Option2',
+    },
+    {
+      value: 'Option3',
+      label: 'Option3',
+    },
+    {
+      value: 'Option4',
+      label: 'Option4',
+    },
+    {
+      value: 'Option5',
+      label: 'Option5',
+    },
+  ];
+
+  const config = computed(() => {
+    return {
+      columns: [
+        { type: 'checkbox', width: 50 },
+        { type: 'seq', width: 50 },
+        {
+          field: 'code',
+          title: '联系人姓名',
+        },
+        {
+          field: 'code',
+          title: '与债权人关系',
+        },
+        {
+          field: 'code',
+          title: '号码类型',
+        },
+      ],
+    };
+  });
+
+  tabledata.value = [
+    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
+    { name: 'account1', code: 'account1', role: 'user', num: 1 },
+    { name: 'account2', code: 'account2', role: 'user', num: 1 },
+    { name: 'account3', code: 'account3', role: 'user', num: 1 },
+  ];
+  defineExpose({
+    openModal,
+  });
+</script>
+<style lang="scss" scoped>
+  .box-title {
+    font-weight: 600;
+    font-size: 18px;
+    color: #000000;
+    line-height: 45px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    margin-bottom: 10px;
+  }
+</style>

src/views/property/case-detail/components/splitDrawer.vue

+<template>
+  <el-drawer
+    v-model="showModal"
+    title="分期申请"
+    :size="850"
+    direction="rtl"
+    :before-close="onHide"
+  >
+    <div class="h-full flex-col flex mydrawer pb-2">
+      <div>
+        <ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
+          <template #table_top>
+            <p class="font-bold">关联案件：</p>
+          </template>
+        </ProTable>
+      </div>
+      <div class="flex">
+        <div class="mt-3 pr-8 w-2/5">
+          <el-form
+            ref="formRef"
+            inline
+            :model="form"
+            :rules="rules"
+            label-width="110px"
+            label-position="left"
+          >
+            <el-row>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="剩余待还总额：" prop="name">
+                  {{ form.sum }}
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="还款总额：" prop="code">
+                  <el-input v-model="form.num" placeholder="请输入" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="分期申请时间：" prop="code">
+                  <el-date-picker
+                    v-model="form.datetime"
+                    class="w-full"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    type="datetime"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="还款期数：" prop="name">
+                  <el-select v-model="form.splitnum" placeholder="请选择">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="首期还款日：" prop="code">
+                  <el-date-picker
+                    class="w-full"
+                    v-model="form.datetime"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    type="datetime"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="非首期还款日：" prop="code">
+                  <el-date-picker
+                    v-model="form.datetime"
+                    class="w-full"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    type="datetime"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="w-full" label="分期生效时间：" prop="code">
+                  <el-date-picker
+                    v-model="form.datetime"
+                    class="w-full"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    type="datetime"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="w-3/5">
+          <ProTable :config="splitconfig" :data="splitdata" :showPagination="false">
+            <template #right_tools>
+              <el-button type="primary" @click="editFirst = !editFirst" class="mr-1">{{
+                editFirst ? '确定' : '修改'
+              }}</el-button>
+            </template>
+          </ProTable>
+          <div class="flex">
+            <div class="ml-auto text-gray-400">总计： xxxxx</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="showModal = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="jsx" name="reduceDrawer">
+  import dayjs from 'dayjs';
+  import { computed } from 'vue';
+  import { reactive, ref } from 'vue';
+  import { ElInputNumber } from 'element-plus';
+
+  const showModal = ref(false);
+  const editFirst = ref(false);
+  const tabledata = ref([]);
+  const splitdata = ref([]);
+
+  const form = reactive({
+    sum: 0,
+    num: 0,
+    splitnum: 2,
+    datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  });
+  const currentAccount = ref({ people: 0, case: 0, money: 0 });
+  const onHide = (done) => {
+    currentAccount.value = { people: 0, case: 0, money: 0 };
+    done();
+  };
+  const options = [
+    {
+      value: 'Option1',
+      label: 'Option1',
+    },
+    {
+      value: 'Option2',
+      label: 'Option2',
+    },
+    {
+      value: 'Option3',
+      label: 'Option3',
+    },
+    {
+      value: 'Option4',
+      label: 'Option4',
+    },
+    {
+      value: 'Option5',
+      label: 'Option5',
+    },
+  ];
+  const selectdList = ref([]);
+  const onCheckboxChange = (row) => {
+    selectdList.value = row.records;
+  };
+  const config = reactive({
+    minHeight: 200,
+    columns: [
+      { type: 'checkbox', width: 50 },
+      {
+        field: 'code',
+        title: '案件ID',
+      },
+      {
+        field: 'code',
+        title: '产品',
+      },
+      {
+        field: 'code',
+        title: '借款机构',
+      },
+      {
+        field: 'code',
+        title: '委案金额',
+      },
+      {
+        field: 'code',
+        title: '累计减免金额',
+      },
+      {
+        field: 'code',
+        title: '累计还款金额',
+      },
+      {
+        field: 'code',
+        title: '剩余待还金额',
+      },
+    ],
+    onCheckboxChange: onCheckboxChange,
+    toolbarConfig: { enabled: false },
+  });
+  const splitconfig = computed(() => {
+    return {
+      minHeight: 200,
+      columns: [
+        { type: 'seq', width: 50, title: '期次' },
+        {
+          field: 'code',
+          title: '到期日',
+        },
+        {
+          field: 'code',
+          title: '状态',
+          width: 70,
+        },
+        {
+          field: 'num',
+          title: '金额',
+          slots: {
+            default: ({ row, rowIndex }) => {
+              if (editFirst.value && rowIndex === 0) {
+                return (
+                  <>
+                    <ElInputNumber v-model={row.num} />
+                  </>
+                );
+              } else {
+                return <>{row.num}</>;
+              }
+            },
+          },
+        },
+      ],
+      onCheckboxChange: onCheckboxChange,
+    };
+  });
+  tabledata.value = [
+    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
+    { name: 'account1', code: 'account1', role: 'user', num: 1 },
+    { name: 'account2', code: 'account2', role: 'user', num: 1 },
+    { name: 'account3', code: 'account3', role: 'user', num: 1 },
+  ];
+  splitdata.value = [
+    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
+    { name: 'account1', code: 'account1', role: 'user', num: 1 },
+    { name: 'account2', code: 'account2', role: 'user', num: 1 },
+    { name: 'account3', code: 'account3', role: 'user', num: 1 },
+  ];
+  const openModal = (account) => {
+    showModal.value = true;
+    currentAccount.value = { people: 333, case: 44, money: 1111 };
+  };
+  const submitForm = () => {};
+  defineExpose({
+    openModal,
+  });
+</script>
+<style lang="scss" scoped>
+  .mydrawer {
+    :deep(.card) {
+      padding: 0;
+      border: none;
+    }
+    :deep(.el-date-editor) {
+      width: 100%;
+    }
+  }
+</style>

src/views/property/case-manage/index.vue

@@ -2,7 +2,7 @@
   <div class="card content-box">
     <div class="table-inner">
       <ProTable :config="config" :data="data" ref="caseLRef">
-        <template #left_buttons>
+        <template #table_top>
           <div class="topgrp">
             <div class="topbox">
               <div class="topinner">
@@ -20,20 +20,20 @@
 
 <script setup name="case-manage">
   import caseModal from './components/caseModal.vue';
-  import { useRouter } from 'vue-router'
+  import { useRouter } from 'vue-router';
   import { reactive, ref } from 'vue';
   const caseModalRef = ref();
   const caseLRef = ref();
-  
- const router = useRouter()
-  const options = ref([])
-  const onCellClick = ({row, rowIndex}) => {
-    let obj = JSON.stringify(row)
+
+  const router = useRouter();
+  const options = ref([]);
+  const onCellClick = ({ row, rowIndex }) => {
+    let obj = JSON.stringify(row);
     router.push({
       path: '/property/case-detail',
-      query: { item: obj },		//这里不能直接写成 query: JSON.stringify(item)
-    })
-  }
+      query: { item: obj }, //这里不能直接写成 query: JSON.stringify(item)
+    });
+  };
   const config = reactive({
     columns: [
       { field: 'name', title: '案件ID', search: { el: 'input' } },
@@ -90,7 +90,7 @@
       {
         field: 'role',
         title: '分配CPE日期',
-        search: { el: 'date-picker', props: { type: "date", valueFormat: "YYYY-MM-DD" } },
+        search: { el: 'date-picker', props: { type: 'date', valueFormat: 'YYYY-MM-DD' } },
       },
       {
         field: 'role',
@@ -111,32 +111,36 @@
         field: 'role',
         title: '跟进结果',
         enum: options,
-        search: { el: 'select', props:{filterable:true },span: 1 },
-        fieldNames:{ label:"genderLabel", value: "genderValue" }
+        search: { el: 'select', props: { filterable: true }, span: 1 },
+        fieldNames: { label: 'genderLabel', value: 'genderValue' },
       },
       {
         field: 'role',
         title: '跟进状态',
         enum: options,
-        search: { el: 'select', props:{filterable:true },span: 1 },
-        fieldNames:{ label:"genderLabel", value: "genderValue" }
+        search: { el: 'select', props: { filterable: true }, span: 1 },
+        fieldNames: { label: 'genderLabel', value: 'genderValue' },
       },
       {
         field: 'role',
         title: '案件状态',
         enum: options,
-        search: { el: 'select', props:{filterable:true },span: 1 },
-        fieldNames:{ label:"genderLabel", value: "genderValue" }
-      }
+        search: { el: 'select', props: { filterable: true }, span: 1 },
+        fieldNames: { label: 'genderLabel', value: 'genderValue' },
+      },
     ],
-    onCellClick: onCellClick
+    onCellClick: onCellClick,
   });
- 
+
   const allocation = (row) => {
-    if (!caseLRef.value.element.getCheckboxRecords() || caseLRef.value.element.getCheckboxRecords().length === 0) return
-    console.log('111', caseLRef.value.element.getCheckboxRecords() )
+    if (
+      !caseLRef.value.element.getCheckboxRecords() ||
+      caseLRef.value.element.getCheckboxRecords().length === 0
+    )
+      return;
+    console.log('111', caseLRef.value.element.getCheckboxRecords());
     caseModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
-  }
+  };
   const data = [
     { name: 'admin', code: 'admin', role: 'superadmin' },
     { name: 'account1', code: 'account1', role: 'user' },
@@ -145,31 +149,26 @@
   ];
 </script>
 <style lang="scss" scoped>
-.table-inner {
-  width: 100%;
-  :deep(.topgrp)  {
-    display: flex;
-    margin-bottom: 8px;
-    .topbox {
-      margin-right: 10px;
-      background: rgba(0,0,0,0.02);
-      border-radius: 16px;
-      width: 146px;
-      height: 97px;
+  .table-inner {
+    width: 100%;
+    :deep(.topgrp) {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 24px;
-      p:nth-child(1) {
-        font-size: 14px;
-        color: rgba(0,0,0,0.45);
+      margin-bottom: 8px;
+      .topbox {
+        margin-right: 10px;
+        background: rgba(0, 0, 0, 0.02);
+        border-radius: 16px;
+        width: 146px;
+        height: 97px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        p:nth-child(1) {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.45);
+        }
       }
     }
-    
-  }
-  :deep(.card)  {
-    border: none;
-    box-shadow: none;
   }
-}
 </style>

src/views/property/import/components/caseDetailModal.vue

@@ -7,10 +7,8 @@
     show-footer
     esc-closable
   >
-    <ProTable :config="config" :data="data">
-    </ProTable>
-    <template #footer>
-    </template>
+    <ProTable :config="config" :data="data"> </ProTable>
+    <template #footer> </template>
   </vxe-modal>
 </template>
 
@@ -37,7 +35,7 @@
         field: 'role',
         title: '角色',
         search: { el: 'input', props: { clearable: true } },
-      }
+      },
     ],
   });
 

src/views/property/import/index.vue

@@ -6,15 +6,19 @@
         <div>
           <el-upload
             class="avatar-uploader"
-            :action="'https://jsonplaceholder.typicode.com/posts/'"
-            :show-file-list="false"
+            ref="uploadRef"
+            :action="upload.url"
+            :disabled="upload.isUploading"
             accept=".xls, .xlsx"
+            :limit="1"
+            :on-success="handleFileSuccess"
+            :auto-upload="false"
             :on-progress="uploadVideoProcess"
           >
             <el-button type="primary" plain :icon="Upload">上传文件</el-button>
           </el-upload>
           <!-- 进度条 -->
-          <el-progress v-if="progressFlag" :percentage="loadProgress" />
+          <!-- <el-progress v-if="progressFlag" :percentage="loadProgress" /> -->
           <div class="mt-2 text-sm text-gray-400"> 仅支持1个文件上传，格式为xls和xlsx </div>
           <div class="mt-1 text-blue-500 underline">下载模板</div>
         </div>
@@ -76,6 +80,7 @@
   const options = ref([]);
   const loadProgress = ref(0);
   const caseDetailModalRef = ref();
+  const uploadRef = ref();
   const isFold = ref(true);
   const config = reactive({
     columns: [
@@ -170,15 +175,21 @@
     code: '',
     role: '',
   });
+  const upload = reactive({
+    // 是否禁用上传
+    isUploading: false,
+    // 设置上传的请求头部
+    // headers: { Authorization: "Bearer " + getToken() },
+    headers: {},
+    // 上传的地址
+    url: '/mes/dv/machinery/importData',
+  });
   const uploadVideoProcess = (event, file, fileList) => {
-    progressFlag.value = true; // 显示进度条
-    loadProgress.value = parseInt(event.percent); // 动态获取文件上传进度
-    if (loadProgress.value >= 100) {
-      loadProgress.value = 100;
-      setTimeout(() => {
-        progressFlag.value = false;
-      }, 1000); // 一秒后关闭进度条
-    }
+    upload.isUploading = true;
+  };
+  const handleFileSuccess = (response, file, fileList) => {
+    upload.isUploading = false;
+    uploadRef.value.clearFiles();
   };
   const linkZK = (row) => {
     caseDetailModalRef.value.openModal(JSON.parse(JSON.stringify(row)));