Commit 2832b938 authored by 沈翠玲's avatar 沈翠玲

资产导入和资产分配

parent dd6ee3b3
...@@ -6,6 +6,7 @@ import router, { setupRouter } from '@/router/index'; ...@@ -6,6 +6,7 @@ import router, { setupRouter } from '@/router/index';
import { setupElementPlus } from '@/plugins/element-plus'; import { setupElementPlus } from '@/plugins/element-plus';
import { setupDirectives } from '@/plugins/directives'; import { setupDirectives } from '@/plugins/directives';
import { setupVxeTabele } from './plugins/vxe-table'; import { setupVxeTabele } from './plugins/vxe-table';
import ProTable from '@/components/ProTable/index.vue';
export async function bootstrapInstall() { export async function bootstrapInstall() {
const app = createApp(App); const app = createApp(App);
...@@ -24,7 +25,7 @@ export async function bootstrapInstall() { ...@@ -24,7 +25,7 @@ export async function bootstrapInstall() {
// 挂载路由 // 挂载路由
setupRouter(app); setupRouter(app);
app.component('ProTable', ProTable)
// 路由准备就绪后挂载 APP 实例 // 路由准备就绪后挂载 APP 实例
await router.isReady(); await router.isReady();
......
<template>
<vxe-modal
v-model="showModal"
title="案件分派"
@hide="onHide"
max-height="582"
width="1003"
show-footer
esc-closable
>
<div class="allocation-wrap">
<div class="top">
<div class="number-box">
<div class="number-left">
<div class="icon-wrapper">
<el-icon><UserFilled size="850" /></el-icon>
</div>
</div>
<div class="number-right">
<p>待分派案人人数</p>
<p>{{currentAccount.people}}</p>
</div>
</div>
<div class="number-box">
<div class="number-left">
<div class="icon-wrapper">
<el-icon><List /></el-icon>
</div>
</div>
<div class="number-right">
<p>待分派案件数量</p>
<p>{{currentAccount.case}}</p>
</div>
</div>
<div class="number-box">
<div class="number-left">
<div class="icon-wrapper">
<el-icon><UserFilled size="850" /></el-icon>
</div>
</div>
<div class="number-right">
<p>待分派金额</p>
<p>{{currentAccount.money}}</p>
</div>
</div>
</div>
<div class="Content">
<template v-if="!step">
<div style="margin-top:10px;margin-bottom: 10px;">
<el-radio-group v-model="radio">
<el-radio :value="0">分配到调解中心</el-radio>
<el-radio :value="1">分配到CPE</el-radio>
</el-radio-group>
</div>
<div class="mainContent">
<div class="tree-wrapper">
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</div>
<el-transfer v-model="value1" :data="data1" :titles="['CPE', '已选CPE']" ref="mytransfer" @left-check-change="leftChange" />
</div>
</template>
<template v-else>
<p>分派方案</p>
<div class="idea-box">
<div class="left-idea">
<div class="idea-btn">
<el-button type="primary" :plain="currentAllBtn === 1 ? false:true" @click="chooseIdea(1)">以案人数均分</el-button>
<el-button type="primary" :plain="currentAllBtn === 2 ? false:true" @click="chooseIdea(2)">以案件数均分</el-button>
<el-button type="primary" :plain="currentAllBtn === 3 ? false:true" @click="chooseIdea(3)">以委案金额均分</el-button>
</div>
<div class="reset-btn">
<el-button type="primary" link :icon="RefreshRight" @click="resetAllocation">重新分配</el-button>
</div>
</div>
<div class="right-idea">
<ProTable :config="config" :data="tabledata" ref="caseLRef" :showPagination="false" :showToolBar="false">
</ProTable>
</div>
</div>
</template>
</div>
</div>
<template #footer>
<el-button @click="backform" v-if="step" style="float:left;">上一步</el-button>
<el-button type="default" @click="showModal = false">取消</el-button>
<el-button type="primary" @click="submitForm" v-if="step || radio === 0">确认提交</el-button>
<el-button type="primary" @click="submitForm" v-else>下一步</el-button>
</template>
</vxe-modal>
</template>
<script setup lang="jsx" name="allocationModal">
import { UserFilled } from '@element-plus/icons-vue';
import { RefreshRight } from '@element-plus/icons-vue';
import { ElInputNumber } from 'element-plus';
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 currentAllBtn = ref(1);
const editRowIndex = ref(-1);
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
currentAllBtn.value = 1
editRowIndex.value = -1
};
const backform = () => {
step.value = 0
}
const submitForm = () => {
if(step.value || radio.value === 0) {
} else {
step.value = 1
}
};
const handleNodeClick = (data) => {
console.log(data)
}
const chooseIdea = (type) => {
editRowIndex.value = -1
currentAllBtn.value = type
}
const resetAllocation = () => {
editRowIndex.value = -1
}
const changeNum = (type, row, index) => {
editRowIndex.value = index
console.log('changeNum', type, row, index)
}
const leftChange = (value, direction) => {
console.log(value, direction)//这个就是它包含的所有的属性以及事件,如果需要别的操作直接执行,也可以查询到
}
data.value = [
{
label: 'Level one 1',
children: [
{
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1',
},
],
},
],
},
{
label: 'Level one 2',
children: [
{
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1',
},
],
},
{
label: 'Level two 2-2',
children: [
{
label: 'Level three 2-2-1',
},
],
},
],
},
{
label: 'Level one 3',
children: [
{
label: 'Level two 3-1',
children: [
{
label: 'Level three 3-1-1',
},
],
},
{
label: 'Level two 3-2',
children: [
{
label: 'Level three 3-2-1',
},
],
},
],
},
]
const config = computed(() => {
// 去除分页控件,toolbar控件
return {
toolbarConfig: {enabled: false},
columns: [
{ type: 'index', width: 50,title: '序号' },
{
field: 'code',
title: 'CPE'
},
{
field: 'code',
title: '分派案人数',
slots: {
default: ({row, rowIndex}) => {
if (currentAllBtn.value === 1) {
return (
<>
<ElInputNumber v-model={row.num} onChange={() => changeNum(1, row, rowIndex)} disabled={editRowIndex.value > -1 && editRowIndex.value!== rowIndex} />
</>
);
} else {
return (
<>{row.num}</>
)
}
},
}
},
{
field: 'code',
title: '分派案件数',
slots: {
default: ({row, rowIndex}) => {
if (currentAllBtn.value === 2) {
return (
<>
<ElInputNumber v-model={row.num} onChange={() => changeNum(2, row, rowIndex)} disabled={editRowIndex.value > -1 && editRowIndex.value!== rowIndex} />
</>
);
} else {
return (
<>{row.num}</>
)
}
},
}
},
{
field: 'code',
title: '分派委案金额',
slots: {
default: ({row, rowIndex}) => {
if (currentAllBtn.value === 3) {
return (
<>
<ElInputNumber v-model={row.num} onChange={() => changeNum(3, row, rowIndex)} disabled={editRowIndex.value > -1 && editRowIndex.value!== rowIndex} />
</>
);
} else {
return (
<>{row.num}</>
)
}
},
}
}
],
};
});
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 generateData = () => {
const data = []
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${i}`
})
}
return data
}
const data1 = ref(generateData())
const value1 = ref([])
const defaultProps = {
children: 'children',
label: 'label',
}
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.allocation-wrap {
height: 100%;
.top {
display: flex;
.number-box {
font-size: 15px;
width: 235px;
padding: 5px 0 5px 15px;
border: 1px solid #f1f1f1;
height: 50px;
display: flex;
margin-left: 10px;
}
.icon-wrapper {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #bbc3ca;
border: 2px solid #bbc3ca;
border-radius: 100%;
margin-right: 10px;
font-size: 37px;
}
}
.number-right {
p:nth-child(1){
color: #cacaca;
font-size: 13px;
}
}
}
.Content {
height: calc(100% - 50px);
.idea-box{
height: calc(100% - 24px);
display: flex;
}
.left-idea{
width: 250px;
border: 1px solid #ebeef5;
display: flex;
flex-direction: column;
}
.right-idea {
width: calc(100% - 250px);
:deep(.card) {
padding: 0;
}
}
.idea-btn {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #ebeef5;
padding-bottom: 10px;
.el-button {
width: 150px;
margin-left: 0 !important;
margin-top: 15px;
}
}
.reset-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
.mainContent {
display: flex;
.tree-wrapper {
border: 1px solid #ebeef5;
width: 290px;
height: 318px;
}
:deep(.el-transfer-panel .el-transfer-panel__header) {
border-top-left-radius: 0;
background: #fff;
border-top-right-radius: 0;
}
:deep(.el-transfer__buttons) {
padding: 0 5px;
}
:deep(.el-transfer-panel) {
width: 250px;
}
}
</style>
<template> <template>
<div class="card content-box"> <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> </div>
</template> </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>
<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>
<template> <template>
<div class="card content-box"> <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> </div>
</template> </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
...@@ -66,3 +66,6 @@ ...@@ -66,3 +66,6 @@
{ name: 'account3', code: 'account3', role: 'user' }, { name: 'account3', code: 'account3', role: 'user' },
]; ];
</script> </script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment