样式修改

src/components/ProTable/index.vue

@@ -13,7 +13,8 @@
   <!-- 表格 -->
   <div class="card flex-1">
     <!-- 表格主体 -->
-    <div :style="{ height: tableHeight }">
+    <div>
+      <slot name="table_top"></slot>
       <vxe-grid ref="xGrid" v-bind="gridOptions" :data="processTableData">
         <template #toolbar_buttons>
           <slot name="left_buttons"></slot>

src/plugins/vxe-table.js

@@ -63,6 +63,8 @@ function lazyVxeTable(app) {
 export function setupVxeTabele(app) {
   VxeUI.setConfig({
     table: {
+      minHeight: 400,
+      maxHeight: 900,
       border: true,
       stripe: true,
       round: true,

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

 <template>
-  <div class="card content-box">
-    <div class="table-inner">
+  <div class="table-box">
+    <div>
       <ProTable :config="config" :data="data" ref="caseLRef">
+        <template #table_top>
+          <div class="flex">
+            <div>未分配案件数：<span class="blue">1000</span>件</div>
+            <div>未分配CPE数：<span class="blue">1000</span>件</div>
+            <div>未分配总金额数：<span class="blue">1000</span>元</div>
+          </div>
+        </template>
         <!-- 表格 header 按钮 -->
         <template #left_buttons>
+          <<<<<<< Updated upstream
           <div>
             <div class="table-tips">
               <div>未分配案件数：<span class="blue">1000</span>件</div>
@@ -14,15 +22,16 @@
               <el-button type="primary" @click="allocation" :disabled="selectdList.length === 0"
                 >分配
               </el-button>
-              <el-button type="primary" :disabled="selectdList.length === 0"
-                >撤回
-              </el-button>
-              <el-button type="primary" :disabled="selectdList.length === 0"
-                >撤案
-              </el-button>
+              <el-button type="primary" :disabled="selectdList.length === 0">撤回 </el-button>
+              <el-button type="primary" :disabled="selectdList.length === 0">撤案 </el-button>
             </div>
           </div>
 
+          =======
+          <el-button type="primary" @click="allocation">分配 </el-button>
+          <el-button type="primary">撤回 </el-button>
+          <el-button type="primary">撤案 </el-button>
+          >>>>>>> Stashed changes
         </template>
       </ProTable>
     </div>
@@ -36,13 +45,13 @@
   import { reactive, ref } from 'vue';
   const allocationModalRef = ref();
   const caseLRef = ref();
-  const selectdList = ref([])
+  const selectdList = ref([]);
   const onCheckboxChange = (row) => {
-    selectdList.value = row.records
-  }
+    selectdList.value = row.records;
+  };
   const config = reactive({
     columns: [
-      { type: 'checkbox', title: '', width:'40px'},
+      { type: 'checkbox', title: '', width: '40px' },
       { field: 'name', title: '案件ID/案件号', search: { el: 'input' } },
       {
         field: 'code',
@@ -77,7 +86,7 @@
       {
         field: 'role',
         title: '分配中心日期',
-        search: { el: 'date-picker', props: { type: "date", valueFormat: "YYYY-MM-DD" } },
+        search: { el: 'date-picker', props: { type: 'date', valueFormat: 'YYYY-MM-DD' } },
       },
       {
         field: 'role',
@@ -87,7 +96,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,47 +120,39 @@
       },
       {
         field: 'role',
-        title: '剩余本金'
+        title: '剩余本金',
       },
       {
         field: 'role',
-        title: '剩余利息'
+        title: '剩余利息',
       },
       {
         field: 'role',
-        title: '违约金'
-      }
+        title: '违约金',
+      },
     ],
-    onCheckboxChange: onCheckboxChange
+    onCheckboxChange: onCheckboxChange,
   });
 
   const allocation = (row) => {
-    console.log('111', selectdList.value)
+    if (
+      !caseLRef.value.element.getCheckboxRecords() ||
+      caseLRef.value.element.getCheckboxRecords().length === 0
+    )
+      return;
+    console.log('111', caseLRef.value.element.getCheckboxRecords());
     allocationModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
-  }
+  };
   const data = [
     { name: 'admin', code: 'admin', role: 'superadmin' },
     { name: 'account1', code: 'account1', role: 'user' },
     { name: 'account2', code: 'account2', role: 'user' },
     { name: 'account3', code: 'account3', role: 'user' },
+    { name: 'account3', code: 'account3', role: 'user' },
+    { name: 'account3', code: 'account3', role: 'user' },
+    { name: 'account3', code: 'account3', role: 'user' },
+    { name: 'account3', code: 'account3', role: 'user' },
+    { name: 'account3', code: 'account3', role: 'user' },
+    { name: 'account3', code: 'account3', role: 'user' },
   ];
 </script>
-<style lang="scss" scoped>
-.table-inner {
-  width: 100%;
-  :deep(.table-tips)  {
-    display: flex;
-    margin-bottom: 20px;
-    div {
-      margin-right: 30px;
-    }
-    .blue {
-      color: rgba(106, 115, 243, 0.88);
-    }
-  }
-  :deep(.card)  {
-    border: none;
-    box-shadow: none;
-  }
-}
-</style>

src/views/property/import/index.vue

 <template>
-  <div class="card content-box">
-    <div class="top-inner">
-      <div class="topbox">
+  <div class="table-box">
+    <div class="card flex mb-2">
+      <div>
         <div class="title1-1">1、上传文件</div>
         <div class="bgwhit" style="padding-left: 77px">
           <el-upload
@@ -11,45 +11,35 @@
             accept=".xls, .xlsx"
             :on-progress="uploadVideoProcess"
           >
-          <el-button type="primary" plain :icon="Upload"
-          >上传文件</el-button>
+            <el-button type="primary" plain :icon="Upload">上传文件</el-button>
           </el-upload>
           <!-- 进度条 -->
           <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
-          <div class="remark">
-            仅支持1个文件上传，格式为xls和xlsx
-          </div>
+          <div class="remark"> 仅支持1个文件上传，格式为xls和xlsx </div>
           <div class="textclick">下载模板</div>
         </div>
       </div>
-      <div class="topbox">
+      <div>
         <div class="title1-1">2、检查数据</div>
         <div class="bgwhit">
-          <div style="display: flex;align-items: center;">
-            <el-button type="danger" style="width: 61px;"
-            >检查</el-button>
-            <span class="remark" style="margin-left: 10px;">
-              通过
-            </span>
+          <div style="display: flex; align-items: center">
+            <el-button type="danger" style="width: 61px">检查</el-button>
+            <span class="remark" style="margin-left: 10px"> 通过 </span>
           </div>
           <!-- 进度条 -->
           <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
           <div class="textclick">下载检查结果</div>
         </div>
       </div>
-      <div class="topbox">
-        <div class="title1-1" style="text-align:center;">3、上传数据</div>
+      <div>
+        <div class="title1-1" style="text-align: center">3、上传数据</div>
         <div class="bgwhit" style="padding-right: 15px">
           <el-form ref="formRef" inline :model="form" :rules="rules" label-width="85px">
             <el-form-item label="导入编号：" prop="name">
-              <el-input v-model="form.name" placeholder="请输入" style="width: 100%"/>
+              <el-input v-model="form.name" placeholder="请输入" style="width: 100%" />
             </el-form-item>
             <el-form-item label="资管公司：" prop="name">
-              <el-select
-                v-model="form.name"
-                placeholder="请选择"
-                style="width: 100%"
-              >
+              <el-select v-model="form.name" placeholder="请选择" style="width: 100%">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -59,18 +49,15 @@
               </el-select>
             </el-form-item>
           </el-form>
-          <el-button type="primary" style="margin-left: auto;width: 61px;"
-          >上传</el-button>
+          <el-button type="primary">上传</el-button>
         </div>
       </div>
     </div>
-    <div class="bottom-inner">
+    <div>
       <ProTable :config="config" :data="data">
         <!-- 表格 header 按钮 -->
         <template #left_buttons>
-        <el-button type="primary"
-          >新增菜单
-        </el-button>
+          <el-button type="primary">新增菜单 </el-button>
         </template>
       </ProTable>
     </div>
@@ -82,50 +69,58 @@
   import caseDetailModal from './components/caseDetailModal.vue';
   import { reactive, ref } from 'vue';
   import { ElButton } from 'element-plus';
-  import { Upload } from '@element-plus/icons-vue';
+  import { Upload, Delete } from '@element-plus/icons-vue';
 
   const progressFlag = ref(false);
   const proTable = ref(undefined);
-  const options = ref([])
-  const loadProgress = ref(0)
+  const options = ref([]);
+  const loadProgress = ref(0);
   const caseDetailModalRef = ref();
   const isFold = ref(true);
   const config = reactive({
     columns: [
-      { field: 'name', title: '导入编号', search: { el: 'input', span: 1, props: { clearable: true } } },
-      { field: 'name', title: '委案合同', search: { el: 'input', span: 1, props: { clearable: true } } },
+      {
+        field: 'name',
+        title: '导入编号',
+        search: { el: 'input', span: 1.5, props: { clearable: true } },
+      },
+      {
+        field: 'name',
+        title: '委案合同',
+        search: { el: 'input', span: 1.5, props: { clearable: true } },
+      },
       {
         field: 'code',
         title: '资产类型',
         enum: options,
-        search: { el: 'select', props:{filterable:true }, span: 1 },
-        fieldNames:{ label:"genderLabel", value: "genderValue" }
+        search: { el: 'select', props: { filterable: true }, span: 1.5 },
+        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.5 },
+        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.5 },
+        fieldNames: { label: 'genderLabel', value: 'genderValue' },
       },
       {
         field: 'role',
-        title: '案件总数'
+        title: '案件总数',
       },
       {
         field: 'role',
-        title: '案件总金额'
+        title: '案件总金额',
       },
       {
         field: 'role',
-        title: '客户总数'
+        title: '客户总数',
       },
       {
         field: 'action',
@@ -162,7 +157,11 @@
       {
         field: 'role',
         title: '创建日期',
-        search: { el: 'date-picker', props: { type: "daterange", valueFormat: "YYYY-MM-DD" },span: 1 },
+        search: {
+          el: 'date-picker',
+          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
+          span: 1.5,
+        },
       },
     ],
   });
@@ -175,14 +174,16 @@
     progressFlag.value = true; // 显示进度条
     loadProgress.value = parseInt(event.percent); // 动态获取文件上传进度
     if (loadProgress.value >= 100) {
-        loadProgress.value = 100
-        setTimeout( () => {progressFlag.value = false}, 1000) // 一秒后关闭进度条
-    }
+      loadProgress.value = 100;
+      setTimeout(() => {
+        progressFlag.value = false;
+      }, 1000); // 一秒后关闭进度条
     }
+  };
   const linkZK = (row) => {
     caseDetailModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
-  }
-  const downfile = (row) => {}
+  };
+  const downfile = (row) => {};
   const data = [
     { name: 'admin', code: 'admin', role: 'superadmin' },
     { name: 'account1', code: 'account1', role: 'user' },
@@ -190,48 +191,3 @@
     { name: 'account3', code: 'account3', role: 'user' },
   ];
 </script>
-<style lang="scss" scoped>
-.card {
-  background: #f0f2f5;
-}
-.top-inner {
-  display: flex;
-  width: 100%;
-  .topbox {
-    width: calc(100% / 3);
-  }
-  .bgwhit {
-    height: 174px;
-    width: 100%;
-    background: #fff;
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-  }
-}
-.el-form-item {
-  width: 100%;
-}
-.title1-1{
-  margin-bottom: 15px;
-}
-.textclick {
-  cursor: pointer;
-  color: #266BDD;
-  text-decoration: underline;
-}
-.remark {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 14px;
-}
-.bottom-inner {
-  width: 100%;
-  margin-top: 35px;
-  :deep(.table-search) {
-    background: #f0f2f5;
-    border: none;
-    box-shadow: none;
-  }
-}
-
-</style>
\ No newline at end of file