资产导入和资产分配

src/bootstrap.js

@@ -6,6 +6,7 @@ import router, { setupRouter } from '@/router/index';
 import { setupElementPlus } from '@/plugins/element-plus';
 import { setupDirectives } from '@/plugins/directives';
 import { setupVxeTabele } from './plugins/vxe-table';
+import ProTable from '@/components/ProTable/index.vue';
 
 export async function bootstrapInstall() {
   const app = createApp(App);
@@ -24,7 +25,7 @@ export async function bootstrapInstall() {
 
   // 挂载路由
   setupRouter(app);
-
+  app.component('ProTable', ProTable)
   // 路由准备就绪后挂载 APP 实例
   await router.isReady();
 

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

 <template>
   <div class="card content-box">
-    <span class="text"> 案件分配 🍓🍇🍈🍉</span>
+    <div class="table-inner">
+      <ProTable :config="config" :data="data" ref="caseLRef">
+        <!-- 表格 header 按钮 -->
+        <template #left_buttons>
+          <div>
+            <div class="table-tips">
+              <div>未分配案件数：<span class="blue">1000</span>件</div>
+              <div>未分配CPE数：<span class="blue">1000</span>件</div>
+              <div>未分配总金额数：<span class="blue">1000</span>元</div>
+            </div>
+            <div style="display: flex">
+              <el-button type="primary" @click="allocation"
+                >分配
+              </el-button>
+              <el-button type="primary"
+                >撤回
+              </el-button>
+              <el-button type="primary"
+                >撤案
+              </el-button>
+            </div>
+          </div>
+          
+        </template>
+      </ProTable>
+    </div>
+    <allocationModal ref="allocationModalRef" />
   </div>
 </template>
 
-<script setup name="systemLog"></script>
+<script setup name="case-allocation">
+  import allocationModal from './components/allocationModal.vue';
+
+  import { reactive, ref } from 'vue';
+  const allocationModalRef = ref();
+  const caseLRef = ref();
+  const showModal = ref(false);
+  const config = reactive({
+    columns: [
+      { type: 'checkbox', title: '', width:'40px'},
+      { field: 'name', title: '案件ID/案件号', search: { el: 'input' } },
+      {
+        field: 'code',
+        title: '所属区域',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'code',
+        title: '借款机构',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '分配状态',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '调解中心',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '资管公司',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: 'CPE',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '分配中心日期',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '债权总额',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '分配CPE日期',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '借款人姓名',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '已还总额',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '身份证',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '手机',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '剩余本金'
+      },
+      {
+        field: 'role',
+        title: '剩余利息'
+      },
+      {
+        field: 'role',
+        title: '违约金'
+      }
+    ],
+  });
+  const allocation = (row) => {
+    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' },
+  ];
+</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/components/caseDetailModal.vue

+<template>
+  <vxe-modal
+    v-model="showModal"
+    title="案件明细"
+    @hide="onHide"
+    width="400px"
+    show-footer
+    esc-closable
+  >
+    <ProTable :config="config" :data="data">
+    </ProTable>
+    <template #footer>
+    </template>
+  </vxe-modal>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { reactive, ref } from 'vue';
+
+  const showModal = ref(false);
+  const currentAccount = ref(undefined);
+  const config = reactive({
+    columns: [
+      { field: 'name', title: '名称', search: { el: 'input' } },
+      {
+        field: 'code',
+        title: '账号',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'code',
+        title: '账号',
+        search: { el: 'input', props: { clearable: true } },
+      },
+      {
+        field: 'role',
+        title: '角色',
+        search: { el: 'input', props: { clearable: true } },
+      }
+    ],
+  });
+
+  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' },
+  ];
+  const onHide = () => {
+    currentAccount.value = null;
+  };
+  const openModal = (account) => {
+    showModal.value = true;
+    currentAccount.value = account;
+    Object.assign(form, account);
+  };
+
+  defineExpose({
+    openModal,
+  });
+</script>
+<style lang="scss" scoped></style>

src/views/property/import/index.vue

 <template>
   <div class="card content-box">
-    <span class="text"> 资产导入 🍓🍇🍈🍉</span>
+    <div class="top-inner">
+      <div class="topbox">
+        <div class="title1-1">1、上传文件</div>
+        <div class="bgwhit" style="padding-left: 77px">
+          <el-upload 
+            class="avatar-uploader"
+            :action="'https://jsonplaceholder.typicode.com/posts/'"
+            :show-file-list="false"
+            accept=".xls, .xlsx"
+            :on-progress="uploadVideoProcess"
+          >
+          <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="textclick">下载模板</div>
+        </div>
+      </div>
+      <div class="topbox">
+        <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>
+          <!-- 进度条 -->
+          <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 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-form-item>
+            <el-form-item label="资管公司：" prop="name">
+              <el-select
+                v-model="form.name"
+                placeholder="请选择"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-button type="primary" style="margin-left: auto;width: 61px;"
+          >上传</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-inner">
+      <ProTable :config="config" :data="data">
+      <!-- 表格 header 按钮 -->
+      <template #left_buttons>
+        <el-button type="primary"
+          >新增菜单
+        </el-button>
+      </template>
+    </ProTable>
+    </div>
+    <caseDetailModal ref="caseDetailModalRef" />
   </div>
 </template>
 
-<script setup name="systemLog"></script>
+<script setup lang="jsx" name="import">
+  import caseDetailModal from './components/caseDetailModal.vue';
+  import { reactive, ref } from 'vue';
+  import { ElButton } from 'element-plus';
+  import { Upload } from '@element-plus/icons-vue';
+
+  const progressFlag = ref(false);
+  const proTable = ref(undefined);
+  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.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.5 },
+        fieldNames:{ label:"genderLabel", value: "genderValue" }
+      },
+      {
+        field: 'role',
+        title: '借款平台',
+        enum: options,
+        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.5 },
+        fieldNames:{ label:"genderLabel", value: "genderValue" }
+      },
+      {
+        field: 'role',
+        title: '案件总数'
+      },
+      {
+        field: 'role',
+        title: '案件总金额'
+      },
+      {
+        field: 'role',
+        title: '客户总数'
+      },
+      {
+        field: 'action',
+        title: '撞库次数',
+        width: 200,
+        slots: {
+          default: ({ row }) => {
+            return (
+              <>
+                <ElButton link type="primary" icon={Delete} onClick={() => linkZK(row)}>
+                  10
+                </ElButton>
+              </>
+            );
+          },
+        },
+      },
+      {
+        field: 'action',
+        title: '文件地址',
+        width: 200,
+        slots: {
+          default: ({ row }) => {
+            return (
+              <>
+                <ElButton link type="primary" icon={Delete} onClick={() => downfile(row)}>
+                  10
+                </ElButton>
+              </>
+            );
+          },
+        },
+      },
+      {
+        field: 'role',
+        title: '创建日期',
+        search: { el: 'date-picker', props: { type: "daterange", valueFormat: "YYYY-MM-DD" },span: 1.5 },
+      },
+    ],
+  });
+  const form = reactive({
+    name: '',
+    code: '',
+    role: '',
+  });
+  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) // 一秒后关闭进度条
+    }
+  }
+  const linkZK = (row) => {
+    caseDetailModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
+  }
+  const downfile = (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' },
+  ];
+</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

src/views/system/accountManage/index.vue

@@ -66,3 +66,6 @@
     { name: 'account3', code: 'account3', role: 'user' },
   ];
 </script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file