优化页面样式

src/components/Pagination/index.vue

@@ -4,7 +4,7 @@
     :background="true"
     :current-page="pageable.current"
     :page-size="pageable.size"
-    :page-sizes="[100, 500, 800, 1000]"
+    :page-sizes="[20, 50, 100, 200, 500, 1000]"
     :total="pageable.total"
     :size="globalStore?.assemblySize ?? 'default'"
     layout="total, sizes, prev, pager, next, jumper"

src/components/ProTable/index.vue

@@ -15,12 +15,14 @@
     <!-- 表格主体 -->
     <div>
       <slot name="table_top"></slot>
-      <!-- <div class="flex rounded w-full h-11 items-center pl-2 btn-grp">
+      <!-- <div >
         
       </div> -->
+      <slot name="left_buttons" v-if="selectdList"></slot>
       <vxe-grid ref="xGrid" v-bind="gridOptions" :data="processTableData" :loading="loading">
         <template #toolbar_buttons>
-          <slot name="left_buttons"></slot>
+          <slot name="left_buttons" v-if="!selectdList"></slot>
+          <div v-else>选中项：{{selectdList.length}} <span class=" text-blue-400 cursor-pointer ml-4" @click="cancel">取消</span></div>
         </template>
         <template #toolbar_tools>
           <slot name="right_tools"></slot>
@@ -58,6 +60,10 @@
       type: Object,
       required: true,
     },
+    selectdList: {
+      type: Array,
+      default: undefined,
+    },
     showToolBar: {
       type: Boolean,
       default: true,
@@ -121,7 +127,14 @@
   const tableHeight = computed(() => `calc(100% - ${props.showPagination ? 52 : 0}px)`);
   // 表格配置项
   const gridOptions = computed(() => Object.assign({}, gridConfig.value, props.config));
-
+  const cancel = () => {
+    if (xGrid.value) {
+      xGrid.value.setAllCheckboxRow(false);
+    }
+    if (props.config.onCheckboxAll) {
+      props.config.onCheckboxAll({checked: false, records: []})
+    }
+  }
   // 处理表格数据
   const processTableData = computed(() => {
     if (!props.data) return tableData.value;
@@ -219,7 +232,4 @@
   });
 </script>
 <style lang="scss" scoped>
-.btn-grp {
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);
-}
 </style>

src/hooks/useProTable.js

@@ -17,7 +17,7 @@ export function useProTable(
       // 当前页数
       current: 1,
       // 每页显示条数
-      size: 100,
+      size: 20,
       // 总条数
       total: 0,
     },
@@ -82,7 +82,6 @@ export function useProTable(
       dataCallBack && (result = dataCallBack(result));
 
       state.tableData = isPageable ? result.content : result;
-      console.log(state.tableData, '---');
       // 解构后台返回的分页数据 (如果有分页更新分页信息)
       if (isPageable) {
         state.pageable.total = +result.page.totalElements;

src/styles/element.scss

@@ -329,3 +329,55 @@ td {
 .vxe-table--header-wrapper {
   background: #fff !important;
 }
+.btn-grp {
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);
+  height: 50px;
+  .el-dropdown-link {
+    color: #409eff !important;
+    margin-right: 10px;
+  }
+  .el-icon--right {
+    color: #409eff;
+  }
+}
+.style-lable {
+  line-height: 1.15;
+  margin: 10px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .item_warp {
+    line-height: 1.15;
+    width: 19%;
+    height: 60px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px 0 rgba(0,0,0,.25);
+    padding: 5px 10px;
+  }
+  .img_warp {
+    line-height: 1.15;
+    display: inline-block;
+    width: 20%;
+    height: 50px;
+    margin-right: 10px;
+  }
+  .title_warp {
+    line-height: 1.15;
+    display: inline-block;
+    height: 50px;
+    width: 70%;
+    vertical-align: top;
+  }
+  .items {
+    width: 100%;
+    height: 50%;
+    font-size: 14px;
+    color: #aaa;
+    line-height: 25px;
+  }
+  .items1 {
+    font-size: 18px;
+    color: #333;
+  }
+}
\ No newline at end of file

src/views/business-approval/by-stages-apply/index.vue

 <template>
   <div class="table-box">
-    <ProTable :config="config" ref="ProTableRef" :api="getByStagesPage">
+    <ProTable :config="config" ref="ProTableRef" :api="getByStagesPage" :selectdList="selectdList">
       <template #left_buttons>
         <!-- <el-button type="primary">下载申请 </el-button> -->
         <el-button

src/views/business-approval/reduction-apply/index.vue

 <template>
   <div class="table-box">
-    <ProTable :config="config" ref="ProTableRef" :api="getReducePage">
+    <ProTable :config="config" ref="ProTableRef" :api="getReducePage" :selectdList="selectdList">
       <template #left_buttons>
         <!-- <el-button type="primary">下载申请 </el-button> -->
         <el-button

src/views/business-approval/repair-approve/index.vue

 <template>
   <div class="table-box">
-    <ProTable :config="config" ref="caseLRef" :api="getRepairRecord">
+    <ProTable :config="config" ref="caseLRef" :api="getRepairRecord" :selectdList="selectdList">
       <template #left_buttons>
         <!-- <el-button type="primary">下载申请 </el-button> -->
         <el-button

src/views/business-approval/repayment-approve/index.vue

 <template>
   <div class="table-box">
-    <ProTable :config="config" ref="ProTableRef" :api="getRepayRecordPage">
+    <ProTable :config="config" ref="ProTableRef" :api="getRepayRecordPage" :selectdList="selectdList">
       <template #left_buttons>
         <!-- <el-button type="primary">下载申请 </el-button> -->
         <el-button

src/views/infoGather/customerGather/index.vue

 <template>
   <div class="table-box">
-    <ProTable ref="proTable" :config="config" :api="getPlatformPage" :paramCallback="paramCallback">
+    <ProTable ref="proTable" :config="config" :api="getPlatformPage" :paramCallback="paramCallback" :selectdList="selectdList">
       <template #left_buttons>
         <!-- <el-button type="primary" :disabled="!selectdList || selectdList.length < 1" @click="pushCreditcard">新建信用卡</el-button> -->
         <el-button type="primary" @click="pushCredit">新建信用卡</el-button>

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

@@ -22,6 +22,7 @@
         :config="config"
         ref="caseLRef"
         :api="getTrackRecord"
+        :selectdList="selectdList"
         :paramCallback="paramCallback"
       >
         <!-- 表格 header 按钮 -->

src/views/property/case-allocation/components/allocationModal.vue

@@ -15,7 +15,7 @@
           <div class="number-box">
             <div class="number-left">
               <div class="icon-wrapper">
-                <el-icon><UserFilled size="850" /></el-icon>
+                <img src="@/assets/images/userlist.png" />
               </div>
             </div>
             <div class="number-right">
@@ -26,7 +26,7 @@
           <div class="number-box">
             <div class="number-left">
               <div class="icon-wrapper">
-                <el-icon><List /></el-icon>
+                <img src="@/assets/images/caselist.png" />
               </div>
             </div>
             <div class="number-right">
@@ -37,12 +37,12 @@
           <div class="number-box">
             <div class="number-left">
               <div class="icon-wrapper">
-                <el-icon><UserFilled size="850" /></el-icon>
+                <img src="@/assets/images/money.png" />
               </div>
             </div>
             <div class="number-right">
               <p>待分派金额</p>
-              <p>{{ statisis.unAmount }}</p>
+              <p>￥{{ statisis.unAmount }}</p>
             </div>
           </div>
         </div>
@@ -614,8 +614,6 @@
         text-align: center;
         line-height: 40px;
         color: #bbc3ca;
-        border: 2px solid #bbc3ca;
-        border-radius: 100%;
         margin-right: 10px;
         font-size: 37px;
       }

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

 <template>
   <div class="table-box">
     <div>
-      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback">
+      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback" :selectdList="selectdList">
         <template #table_top>
-          <el-row class="mx-2 mb-2" :gutter="50">
-            <el-col :span="5">
-              <el-statistic title="未分派案件数" :value="statisis.caseNum" style="background: var(--el-color-primary-light-9)" class=" rounded-md">
-                <template #suffix>件</template>
-              </el-statistic>
-            </el-col>
-            <el-col :span="5">
-              <el-statistic title="未分派CPE数" :value="statisis.cpeNum" style="background: var(--el-color-primary-light-9)" class=" rounded-md">
-                <template #suffix>件</template>
-              </el-statistic>
-            </el-col>
-            <el-col :span="5">
-              <el-statistic title="未分派总金额数" :value="statisis.amount" style="background: var(--el-color-primary-light-9)" class=" rounded-md">
-                <template #suffix>元</template>
-              </el-statistic>
-            </el-col>
-          </el-row>
+          <div class="style-lable">
+            <div class="item_warp">
+              <div class="img_warp">
+                <img src="@/assets/images/caselist.png" />
+              </div>
+              <div class="title_warp">
+                <div class="items">未分派案件数</div>
+                <div class="item items1">{{statisis.caseNum}}</div>
+              </div>
+            </div>
+            <div class="item_warp">
+              <div class="img_warp">
+                <img src="@/assets/images/userlist.png" />
+              </div>
+              <div class="title_warp">
+                <div class="items">未分派CPE数</div>
+                <div class="item items1">{{statisis.cpeNum}}</div>
+              </div>
+            </div>
+            <div class="item_warp">
+              <div class="img_warp">
+                <img src="@/assets/images/money.png" />
+              </div>
+              <div class="title_warp">
+                <div class="items">未分派总金额数</div>
+                <div class="item items1">￥{{statisis.amount}}</div>
+              </div>
+            </div>
+          </div>
         </template>
         <!-- 表格 header 按钮 -->
         <template #left_buttons>
-          <el-button type="primary" @click="allocation">分派 </el-button>
+          <div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
+            <el-dropdown  @command="(command) => dataValue = command">
+              <span class="el-dropdown-link">
+                {{dataValue}}
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="item in dataOptions" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-button type="primary" @click="allocation">分派</el-button>
+          </div>
           <!-- <el-button
             type="primary"
             :disabled="!selectdList || selectdList.length < 1"
@@ -45,6 +72,7 @@
   import { getLoantotal, getLoanpage, backDistribute } from '@/api/allcation';
   import { reactive, ref } from 'vue';
   import { ElMessageBox, ElMessage } from 'element-plus';
+  import { ArrowDown } from '@element-plus/icons-vue';
   import citydata from '../../../assets/citydata';
   import { onMounted } from 'vue';
   import { VxeTextEllipsis, VxeTooltip } from 'vxe-pc-ui';
@@ -68,6 +96,17 @@
       }
     });
   };
+  const dataValue = ref('对查询结果操作');
+  const dataOptions = [
+    {
+      label: '对查询结果操作',
+      value: '对查询结果操作',
+    },
+    {
+      label: '对选中项操作',
+      value: '对选中项操作',
+    }
+  ];
   const backCase = async () => {
     await ElMessageBox.confirm('是否确认撤回选中案件?', '提示', {
       confirmButtonText: '确认',
@@ -479,10 +518,25 @@
   });
 
   const allocation = (row) => {
+    if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
+      return ElMessage.warning({
+        message: '请先选择操作对象!',
+        plain: true,
+      });
+    }
+    if (dataValue.value === '对选中项操作') {
       allocationModalRef.value.openModal(
         JSON.parse(JSON.stringify(curParam.value)),
         JSON.parse(JSON.stringify(selectdList.value))
       );
+    } else {
+      allocationModalRef.value.openModal(
+        JSON.parse(JSON.stringify(curParam.value)),
+        []
+      );
+    }
+
+    
   };
   const query = () => caseLRef.value?.search();
 

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

 <template>
   <div class="table-box">
     <div>
-      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback">
+      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback" :selectdList="selectdList">
         <!-- 表格 header 按钮 -->
         <template #left_buttons>
+          <div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
+            <el-dropdown  @command="(command) => dataValue = command">
+              <span class="el-dropdown-link">
+                {{dataValue}}
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="item in dataOptions" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
             <el-button type="primary" @click="backCase">回收 </el-button>
+          </div>
         </template>
       </ProTable>
     </div>
@@ -41,12 +56,24 @@
   import { getPlatformPage } from '@/api/platform';
   import { getManageOrgPage } from '@/api/manageOrg';
   import { getTenantPage } from '@/api/tenant';
+  import { ArrowDown } from '@element-plus/icons-vue';
   import { useDict } from '@/hooks/useDict';
   const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, DistributeStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus","DistributeStatus", "CaseStatus");
   const caseLRef = ref();
   const selectdList = ref([]);
   const curParam = ref({});
   const showModal = ref(false);
+  const dataValue = ref('对查询结果操作');
+  const dataOptions = [
+    {
+      label: '对查询结果操作',
+      value: '对查询结果操作',
+    },
+    {
+      label: '对选中项操作',
+      value: '对选中项操作',
+    }
+  ];
   const onCheckboxChange = (row) => {
     selectdList.value = row.records;
   };
@@ -59,30 +86,18 @@
     });
   };
   const backCase = async () => {
-    // 勾选的情况
-    // if (selectdList.value && selectdList.value.length) {
-    //   const arr = selectdList.value.filter(v => v.caseStatus === 'stay')
-    //   if (arr.length > 0) {
-    //     showModal.value = true
-    //   } else {
-    //     submitForm('withdraw')
-    //   }
-    // } else {
-    //   const param = {...curParam.value, caseStatus: 'stay'}
-    //   getLoanpage(param).then(res=>{
-    //     if(res.success && res.result && res.result.content && res.result.content.length) {
-    //       showModal.value = true
-    //     } else {
-    //       submitForm('withdraw')
-    //     }
-    //   })
-    // }
+    if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
+      return ElMessage.warning({
+        message: '请先选择操作对象!',
+        plain: true,
+      });
+    }
     showModal.value = true;
   };
   const submitForm = async (type) => {
     const ids = selectdList.value.map((v) => v.id).join(',');
     let param = {};
-    if (ids.length > 0) {
+    if (dataValue.value === '对选中项操作') {
       param['loanIds'] = ids;
     } else {
       param = { ...curParam.value };

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

@@ -22,15 +22,31 @@
           :config="config"
           ref="caseLRef"
           :api="getTrackRecord"
+          :selectdList="selectdList"
           :paramCallback="paramCallback"
         >
           <!-- 表格 header 按钮 -->
           <template #left_buttons>
+            <div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
+                <el-dropdown  @command="(command) => dataValue = command">
+                <span class="el-dropdown-link">
+                    {{dataValue}}
+                    <el-icon class="el-icon--right">
+                    <arrow-down />
+                    </el-icon>
+                </span>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item v-for="item in dataOptions" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+                </el-dropdown>
                 <el-button
                 type="primary"
                 @click="repair"
                 >发起修复</el-button
                 >
+            </div>
           </template>
         </ProTable>
       </div>
@@ -56,7 +72,17 @@
   
     import { reactive, ref } from 'vue';
     const downloadfile = inject('download');
-  
+    const dataValue = ref('对查询结果操作');
+    const dataOptions = [
+        {
+        label: '对查询结果操作',
+        value: '对查询结果操作',
+        },
+        {
+        label: '对选中项操作',
+        value: '对选中项操作',
+        }
+    ];
     const allocationModalRef = ref();
     const caseLRef = ref();
     const selectdList = ref([]);
@@ -435,8 +461,14 @@
       downloadfile('/sys/static/' + item, {}, name);
     };
     const repair = async (row) => {
-      const list = caseLRef.value.element.getCheckboxRecords();
-      if (!list.length) {
+      const list = selectdList.value;
+      if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
+        return ElMessage.warning({
+            message: '请先选择操作对象!',
+            plain: true,
+        });
+        }
+      if (dataValue.value !== '对选中项操作') {
         const param = {...pageParams.value}
         delete param['current'];
         delete param['size'];
@@ -448,7 +480,7 @@
         await sendRepairRecord(param);
       } else {
         const ids = list.map((v) => v.id).join(',');
-        await ElMessageBox.confirm('是否确认发起修复勾选项?', '提示', {
+        await ElMessageBox.confirm('是否批量发起修复?', '提示', {
             confirmButtonText: '确认',
             cancelButtonText: '取消',
             type: 'warning',

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

 <template>
   <div class="table-box">
     <div>
-      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback">
+      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback" :selectdList="selectdList">
         <!-- 表格 header 按钮 -->
         <template #left_buttons>
-          <el-button type="primary" @click="backCase">撤案 </el-button>
+          <div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
+            <el-dropdown  @command="(command) => dataValue = command">
+              <span class="el-dropdown-link">
+                {{dataValue}}
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="item in dataOptions" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-button type="primary" @click="backCase">撤案</el-button>
+          </div>
         </template>
       </ProTable>
     </div>
@@ -42,11 +57,23 @@
   import { getManageOrgPage } from '@/api/manageOrg';
   import { getTenantPage } from '@/api/tenant';
   import { useDict } from '@/hooks/useDict';
+  import { ArrowDown } from '@element-plus/icons-vue';
   const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, DistributeStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus","DistributeStatus", "CaseStatus");
   const caseLRef = ref();
   const selectdList = ref([]);
   const curParam = ref({});
   const showModal = ref(false);
+  const dataValue = ref('对查询结果操作');
+  const dataOptions = [
+    {
+      label: '对查询结果操作',
+      value: '对查询结果操作',
+    },
+    {
+      label: '对选中项操作',
+      value: '对选中项操作',
+    }
+  ];
   const onCheckboxChange = (row) => {
     selectdList.value = row.records;
   };
@@ -61,7 +88,7 @@
   const submitForm = async (type) => {
     const ids = selectdList.value.map((v) => v.id).join(',');
     let param = {};
-    if (ids.length > 0) {
+    if (dataValue.value === '对选中项操作') {
       param['loanIds'] = ids;
     } else {
       param = { ...curParam.value };
@@ -110,24 +137,12 @@
     return obj;
   };
   const backCase = async () => {
-    // 勾选的情况
-    // if (selectdList.value && selectdList.value.length) {
-    //   const arr = selectdList.value.filter(v => v.caseStatus === 'stay')
-    //   if (arr.length > 0) {
-    //     showModal.value = true
-    //   } else {
-    //     submitForm('withdraw')
-    //   }
-    // } else {
-    //   const param = {...curParam.value, caseStatus: 'stay'}
-    //   getLoanpage(param).then(res=>{
-    //     if(res.success && res.result && res.result.content && res.result.content.length) {
-    //       showModal.value = true
-    //     } else {
-    //       submitForm('withdraw')
-    //     }
-    //   })
-    // }
+    if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
+      return ElMessage.warning({
+        message: '请先选择操作对象!',
+        plain: true,
+      });
+    }
     showModal.value = true;
   };
   const onCheckboxAll = (flag) => {

src/views/workplace/audit/index.vue

@@ -23,6 +23,7 @@
         ref="caseLRef"
         :api="getTrackRecord"
         :paramCallback="paramCallback"
+        :selectdList="selectdList"
       >
         <!-- 表格 header 按钮 -->
         <template #left_buttons>

src/views/workplace/case/index.vue

 <template>
   <div class="table-box">
     <div class="table-inner">
-      <ProTable :config="config" ref="caseLRef" :api="getCreditPage" :paramCallback="paramCallback">
+      <ProTable :config="config" ref="caseLRef" :api="getCreditPage" :paramCallback="paramCallback" :selectdList="selectdList">
         <template #left_buttons>
+          <div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
+            <el-dropdown  @command="(command) => dataValue = command">
+              <span class="el-dropdown-link">
+                {{dataValue}}
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="item in dataOptions" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
             <el-button
               type="primary"
-            :disabled="!selectdList || selectdList.length < 1"
               @click="stayCase"
               >留案
             </el-button>
+          </div>
         </template>
       </ProTable>
     </div>
@@ -32,6 +46,17 @@
   const router = useRouter();
   const selectdList = ref([]);
   const curParam = ref({});
+  const dataValue = ref('对查询结果操作');
+  const dataOptions = [
+    {
+      label: '对查询结果操作',
+      value: '对查询结果操作',
+    },
+    {
+      label: '对选中项操作',
+      value: '对选中项操作',
+    }
+  ];
   const onCheckboxChange = (row) => {
     selectdList.value = row.records;
   };
@@ -62,6 +87,12 @@
     return obj;
   };
   const stayCase = async () => {
+    if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
+      return ElMessage.warning({
+        message: '请先选择操作对象!',
+        plain: true,
+      });
+    }
     await ElMessageBox.confirm('是否确认留案?', '提示', {
       confirmButtonText: '确认',
       cancelButtonText: '取消',
@@ -70,7 +101,7 @@
 
     const ids = selectdList.value.map((v) => v.id).join(',');
     let param = {};
-    if (ids.length > 0) {
+    if (dataValue.value === '对选中项操作') {
       param['loanIds'] = ids;
     } else {
       param = { ...curParam.value };