Commit d429b3fe authored by 沈翠玲's avatar 沈翠玲

优化页面样式

parent 388055c0
......@@ -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"
......
......@@ -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>
......@@ -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;
......
......@@ -328,4 +328,56 @@ 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
<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
......
<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
......
<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
......
<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
......
<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>
......
......@@ -22,6 +22,7 @@
:config="config"
ref="caseLRef"
:api="getTrackRecord"
:selectdList="selectdList"
:paramCallback="paramCallback"
>
<!-- 表格 header 按钮 -->
......
......@@ -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;
}
......
<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) => {
allocationModalRef.value.openModal(
JSON.parse(JSON.stringify(curParam.value)),
JSON.parse(JSON.stringify(selectdList.value))
);
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();
......
<template>
<vxe-modal
resize
v-model="showModal"
title="案件分派"
@hide="onHide"
height="582"
width="1003"
show-footer
esc-closable
>
<div class="allocation-wrap">
<div class="Content">
<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>{{ statisis.unCustomerNum }}</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>{{ statisis.unCaseNum }}</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>{{ statisis.unAmount }}</p>
</div>
</div>
</div>
<div style="margin-top: 10px; margin-bottom: 10px">
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :value="0">分派到调解中心</el-radio>
<el-radio :value="1">分派到CPE</el-radio>
</el-radio-group>
</div>
<template v-if="radio === 0 || (radio === 1 && !step)">
<div class="mainContent">
<div class="flex items-center my-3">
<span class="mr-2" v-if="radio === 0"> 调解中心 </span>
<el-select
v-if="radio === 0"
v-model="currentTenant"
placeholder="请选择调解中心"
style="width: 210px"
@change="handleNodeClick"
>
<el-option
:label="item.name"
:value="item.id"
v-for="(item, index) in data"
:key="index"
/>
</el-select>
<div v-else class="flex">
<div class="tree-cpe">
<p class="bb">选择CPE</p>
<div class="flex">
<div class="tree-wrapper" style="border-right: none">
<el-tree
:data="data"
highlight-current
:props="defaultProps"
@node-click="handleNodeClick"
/>
</div>
<div class="tree-wrapper">
<div class="flex items-center h-10 border-b">
<div class="px-3 border-r mr-auto h-full flex items-center justify-center">
<el-checkbox v-model="checked1" label="" @change="changeAll" />
</div>
<div class="flex-1 text-center">CPE</div></div
>
<el-tree
:data="alltabledata"
highlight-current
ref="allTreeRef"
node-key="id"
show-checkbox
:props="{
children: 'children',
label: 'username',
}"
@check-change="checkChange"
/>
</div>
</div>
</div>
<div class="ml-3">
<p class="bb">已选CPE</p>
<div class="flex items-center h-10 border border-b-0">
<div class="w-10 border-r mr-auto h-full flex items-center justify-center">
序号
</div>
<div class="flex-1 text-center">CPE</div>
</div>
<div class="tree-wrapper" style="height: calc(100% - 3.8rem)">
<div v-for="(item, index) in tabledata" :key="index" class="flex">
<div class="w-10 mr-auto h-full flex items-center justify-center">
{{ index + 1 }}
</div>
<div class="flex-1 text-left pl-3">{{ item.cpe.username }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <el-transfer
v-model="value1"
:data="data1"
:titles="['CPE', '已选CPE']"
ref="mytransfer"
@left-check-change="leftChange"
/> -->
</div>
</template>
<template v-if="radio === 1 && currentTenant && step">
<p class="my-2">分派方案</p>
<div class="idea-box">
<div class="left-idea">
<div class="idea-btn">
<el-button
type="primary"
:plain="currentAllBtn === item.value ? false : true"
v-for="(item, index) in options"
:key="index"
@click="chooseIdea(item.value)"
>{{ item.label }}</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"
/>
</div>
</div>
</template>
</div>
</div>
<template #footer>
<el-button @click="backform" v-if="step" style="float: left">上一步</el-button>
<el-button
type="primary"
@click="saveFrom"
:disabled="!currentTenant"
v-if="radio === 1 && step"
>保存</el-button
>
<el-button type="default" @click="showModal = false">取消</el-button>
<el-button
type="primary"
@click="submitForm"
v-if="radio === 0 || step"
:disabled="!currentTenant || (radio === 1 && !SaveBol)"
>确认提交</el-button
>
<el-button
type="primary"
@click="submitForm"
v-if="!step && radio === 1"
:disabled="!currentTenant"
>下一步</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, ElMessage } from 'element-plus';
import {
getLoanDistribute,
distributeLoan,
confirm,
distributeCpe,
changeDistributeCpe,
} from '@/api/allcation';
import { getTenantPage } from '@/api/tenant';
import { computed } from 'vue';
import { reactive, ref, nextTick } from 'vue';
const emits = defineEmits(['success']);
const data = ref([]);
const mytransfer = ref();
const tabledata = ref([]);
const alltabledata = ref([]);
const lonsArr = ref([]);
const SaveBol = ref(false);
const showModal = ref(false);
const currentTenant = ref();
const allTreeRef = ref();
const statisis = ref({});
const currentAllBtn = ref();
const checked1 = ref(false);
const editRowIndex = ref(-1);
const pageParams = ref({});
const radio = ref(null);
const step = ref(0);
const searchParam = ref();
const onHide = () => {};
const getStatisis = (params, id) => {
const p = JSON.parse(JSON.stringify(params));
if (id) {
p['tenantId'] = id;
}
delete p['current'];
delete p['size'];
getLoanDistribute(p).then((res) => {
if (res.success) {
statisis.value = res.result;
}
});
};
const getTree = () => {
getTenantPage({
current: 1,
size: 999999999,
status: 'enable',
}).then((res) => {
if (res.success) {
data.value = res.result.content;
}
});
};
const chooseIdea = (type) => {
editRowIndex.value = -1;
currentAllBtn.value = type;
const param = {
type: currentAllBtn.value,
tenantId: currentTenant.value,
};
if (tabledata.value && tabledata.value.length) {
param['cpeIds'] = tabledata.value.map((v) => v.cpe.id);
}
if (lonsArr.value && lonsArr.value.length) {
param['loanIds'] = lonsArr.value.map((v) => v.id);
} else {
param['borrowerName'] = pageParams.value.borrowerName;
param['borrowerIdCard'] = pageParams.value.idCard;
param['borrowerPhone'] = pageParams.value.borrowerPhone;
param['commissionAmount'] = pageParams.value.commissionAmount;
param['remainingAmount'] = pageParams.value.remainingAmount;
}
distributeCpe(param).then((res) => {
if (res.success) {
tabledata.value = res.result;
}
});
};
const changeRadio = () => {
radio.value === 0 && getStatisis(pageParams.value);
step.value = 0;
currentTenant.value = null;
};
const openModal = (param, select) => {
console.log('select', select);
lonsArr.value = select;
showModal.value = true;
pageParams.value = param;
currentAllBtn.value = null;
getTree();
step.value = 0;
radio.value = 0;
SaveBol.value = false;
currentTenant.value = null;
editRowIndex.value = -1;
tabledata.value = [];
alltabledata.value = [];
checked1.value = false;
};
const changeAll = () => {
if (checked1.value) {
allTreeRef.value.setCheckedNodes(alltabledata.value);
} else {
allTreeRef.value.setCheckedKeys([]);
}
};
const backform = () => {
step.value = 0;
};
const saveFrom = () => {
if (currentAllBtn.value === 'CASE') {
const sum = tabledata.value.reduce((pre, cur) => pre + cur.caseNum, 0);
if (Number(sum) !== Number(statisis.value.unCaseNum))
return ElMessage.warning({
message: '总数与待分派案件数不一致',
plain: true,
});
} else if (currentAllBtn.value === 'BORROWER') {
const sum = tabledata.value.reduce((pre, cur) => pre + cur.borrowerNum, 0);
if (Number(sum) !== Number(statisis.value.unCustomerNum))
return ElMessage.warning({
message: '总数与待分派案人数不一致',
plain: true,
});
}
changeDistributeCpe({
records: tabledata.value,
distributeType: currentAllBtn.value,
}).then((res) => {
if (res.success) {
ElMessage.success({
message: '保存成功',
plain: true,
});
SaveBol.value = true;
}
});
};
const submitForm = () => {
if (radio.value === 1) {
if (step.value) {
if (!SaveBol.value)
ElMessage.warning({
message: '要先保存',
plain: true,
});
confirm({
records: tabledata.value,
distributeType: currentAllBtn.value,
}).then((res) => {
if (res.success) {
ElMessage.success({
message: '分派成功',
plain: true,
});
showModal.value = false;
emits('success');
}
});
} else {
step.value = 1;
}
} else if (radio.value === 0) {
// chooseIdea('BORROWER');
distributeLoan(currentTenant.value, {
borrowerName: pageParams.value.borrowerName,
borrowerIdCard: pageParams.value.idCard,
borrowerPhone: pageParams.value.borrowerPhone,
commissionAmount: pageParams.value.commissionAmount,
remainingAmount: pageParams.value.remainingAmount,
tenantId: null,
}).then((res) => {
if (res.success) {
ElMessage.success({
message: '分派成功',
plain: true,
});
showModal.value = false;
emits('success');
}
});
}
};
const handleNodeClick = (data1) => {
if (typeof data1 === 'object') {
currentTenant.value = data1.id;
let param = {};
if (lonsArr.value && lonsArr.value.length) {
param['loanIds'] = lonsArr.value.map((v) => v.id);
} else {
param = { ...pageParams.value };
}
getStatisis(param, currentTenant.value);
tabledata.value = data1.users.map((v) => ({
cpe: v,
borrowerNum: null,
caseNum: null,
amount: null,
}));
alltabledata.value = data1.users;
checked1.value = true;
console.log('allTreeRef', data1.users);
console.log('allTreeRef.value', allTreeRef.value);
nextTick(() => {
setTimeout(() => {
allTreeRef.value.setCheckedNodes(data1.users);
});
});
}
};
const resetAllocation = () => {
chooseIdea(currentAllBtn.value);
};
const checkChange = (dara, ddd, aaa) => {
nextTick(() => {
const arr = allTreeRef.value.getCheckedNodes();
tabledata.value = arr.map((v) => ({
cpe: v,
borrowerNum: null,
caseNum: null,
amount: null,
}));
});
};
const changeNum = (type, row, index) => {
// editRowIndex.value = index;
console.log('changeNum', type, row, index);
};
const leftChange = (value, direction) => {
console.log(value, direction); //这个就是它包含的所有的属性以及事件,如果需要别的操作直接执行,也可以查询到
};
const options = [
{
label: '以案人数均分',
value: 'BORROWER',
},
{
label: '以案件数均分',
value: 'CASE',
},
{
label: '以委案金额均分',
value: 'AMOUNT',
},
];
const config = computed(() => {
// 去除分页控件,toolbar控件
return {
toolbarConfig: { enabled: false },
columns: [
{ type: 'seq', width: 50, title: '序号' },
{
field: 'cpe.username',
title: 'CPE',
},
{
field: 'borrowerNum',
title: '分派案人数',
slots: {
default: ({ row, rowIndex }) => {
if (currentAllBtn.value === 'BORROWER') {
return (
<>
<ElInputNumber
v-model={row.borrowerNum}
onChange={() => changeNum(1, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return <>{row.borrowerNum}</>;
}
},
},
},
{
field: 'caseNum',
title: '分派案件数',
slots: {
default: ({ row, rowIndex }) => {
if (currentAllBtn.value === 'CASE') {
return (
<>
<ElInputNumber
v-model={row.caseNum}
onChange={() => changeNum(2, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return <>{row.caseNum}</>;
}
},
},
},
{
field: 'amount',
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}</>;
// // }
// },
// },
},
],
};
});
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: 'name',
};
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-right: 10px;
margin-top: 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;
.bb {
padding-left: 14px;
border: 1px solid #ebeef5;
border-bottom: none;
}
.tree-wrapper {
border: 1px solid #ebeef5;
width: 290px;
height: 318px;
}
.bc {
display: flex;
}
}
</style>
<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>
......@@ -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 };
......
......@@ -22,15 +22,31 @@
:config="config"
ref="caseLRef"
:api="getTrackRecord"
:selectdList="selectdList"
:paramCallback="paramCallback"
>
<!-- 表格 header 按钮 -->
<template #left_buttons>
<el-button
type="primary"
@click="repair"
>发起修复</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="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',
......
<template>
<vxe-modal
resize
v-model="showModal"
title="案件分派"
@hide="onHide"
height="582"
width="1003"
show-footer
esc-closable
>
<div class="allocation-wrap">
<div class="Content">
<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>{{ statisis.unCustomerNum }}</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>{{ statisis.unCaseNum }}</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>{{ statisis.unAmount }}</p>
</div>
</div>
</div>
<div style="margin-top: 10px; margin-bottom: 10px">
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :value="0">分派到调解中心</el-radio>
<el-radio :value="1">分派到CPE</el-radio>
</el-radio-group>
</div>
<template v-if="radio === 0 || (radio === 1 && !step)">
<div class="mainContent">
<div class="flex items-center my-3">
<span class="mr-2" v-if="radio === 0"> 调解中心 </span>
<el-select
v-if="radio === 0"
v-model="currentTenant"
placeholder="请选择调解中心"
style="width: 210px"
@change="handleNodeClick"
>
<el-option
:label="item.name"
:value="item.id"
v-for="(item, index) in data"
:key="index"
/>
</el-select>
<div v-else class="flex">
<div class="tree-cpe">
<p class="bb">选择CPE</p>
<div class="flex">
<div class="tree-wrapper" style="border-right: none">
<el-tree
:data="data"
highlight-current
:props="defaultProps"
@node-click="handleNodeClick"
/>
</div>
<div class="tree-wrapper">
<div class="flex items-center h-10 border-b">
<div class="px-3 border-r mr-auto h-full flex items-center justify-center">
<el-checkbox v-model="checked1" label="" @change="changeAll" />
</div>
<div class="flex-1 text-center">CPE</div></div
>
<el-tree
:data="alltabledata"
highlight-current
ref="allTreeRef"
node-key="id"
show-checkbox
:props="{
children: 'children',
label: 'username',
}"
@check-change="checkChange"
/>
</div>
</div>
</div>
<div class="ml-3">
<p class="bb">已选CPE</p>
<div class="flex items-center h-10 border border-b-0">
<div class="w-10 border-r mr-auto h-full flex items-center justify-center">
序号
</div>
<div class="flex-1 text-center">CPE</div>
</div>
<div class="tree-wrapper" style="height: calc(100% - 3.8rem)">
<div v-for="(item, index) in tabledata" :key="index" class="flex">
<div class="w-10 mr-auto h-full flex items-center justify-center">
{{ index + 1 }}
</div>
<div class="flex-1 text-left pl-3">{{ item.cpe.username }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <el-transfer
v-model="value1"
:data="data1"
:titles="['CPE', '已选CPE']"
ref="mytransfer"
@left-check-change="leftChange"
/> -->
</div>
</template>
<template v-if="radio === 1 && currentTenant && step">
<p class="my-2">分派方案</p>
<div class="idea-box">
<div class="left-idea">
<div class="idea-btn">
<el-button
type="primary"
:plain="currentAllBtn === item.value ? false : true"
v-for="(item, index) in options"
:key="index"
@click="chooseIdea(item.value)"
>{{ item.label }}</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"
/>
</div>
</div>
</template>
</div>
</div>
<template #footer>
<el-button @click="backform" v-if="step" style="float: left">上一步</el-button>
<el-button
type="primary"
@click="saveFrom"
:disabled="!currentTenant"
v-if="radio === 1 && step"
>保存</el-button
>
<el-button type="default" @click="showModal = false">取消</el-button>
<el-button
type="primary"
@click="submitForm"
v-if="radio === 0 || step"
:disabled="!currentTenant || (radio === 1 && !SaveBol)"
>确认提交</el-button
>
<el-button
type="primary"
@click="submitForm"
v-if="!step && radio === 1"
:disabled="!currentTenant"
>下一步</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, ElMessage } from 'element-plus';
import {
getLoanDistribute,
distributeLoan,
confirm,
distributeCpe,
changeDistributeCpe,
} from '@/api/allcation';
import { getTenantPage } from '@/api/tenant';
import { computed } from 'vue';
import { reactive, ref, nextTick } from 'vue';
const emits = defineEmits(['success']);
const data = ref([]);
const mytransfer = ref();
const tabledata = ref([]);
const alltabledata = ref([]);
const lonsArr = ref([]);
const SaveBol = ref(false);
const showModal = ref(false);
const currentTenant = ref();
const allTreeRef = ref();
const statisis = ref({});
const currentAllBtn = ref();
const checked1 = ref(false);
const editRowIndex = ref(-1);
const pageParams = ref({});
const radio = ref(null);
const step = ref(0);
const searchParam = ref();
const onHide = () => {};
const getStatisis = (params, id) => {
const p = JSON.parse(JSON.stringify(params));
if (id) {
p['tenantId'] = id;
}
delete p['current'];
delete p['size'];
getLoanDistribute(p).then((res) => {
if (res.success) {
statisis.value = res.result;
}
});
};
const getTree = () => {
getTenantPage({
current: 1,
size: 999999999,
status: 'enable',
}).then((res) => {
if (res.success) {
data.value = res.result.content;
}
});
};
const chooseIdea = (type) => {
editRowIndex.value = -1;
currentAllBtn.value = type;
const param = {
type: currentAllBtn.value,
tenantId: currentTenant.value,
};
if (tabledata.value && tabledata.value.length) {
param['cpeIds'] = tabledata.value.map((v) => v.cpe.id);
}
if (lonsArr.value && lonsArr.value.length) {
param['loanIds'] = lonsArr.value.map((v) => v.id);
} else {
param['borrowerName'] = pageParams.value.borrowerName;
param['borrowerIdCard'] = pageParams.value.idCard;
param['borrowerPhone'] = pageParams.value.borrowerPhone;
param['commissionAmount'] = pageParams.value.commissionAmount;
param['remainingAmount'] = pageParams.value.remainingAmount;
}
distributeCpe(param).then((res) => {
if (res.success) {
tabledata.value = res.result;
}
});
};
const changeRadio = () => {
radio.value === 0 && getStatisis(pageParams.value);
step.value = 0;
currentTenant.value = null;
};
const openModal = (param, select) => {
console.log('select', select);
lonsArr.value = select;
showModal.value = true;
pageParams.value = param;
currentAllBtn.value = null;
getTree();
step.value = 0;
radio.value = 0;
SaveBol.value = false;
currentTenant.value = null;
editRowIndex.value = -1;
tabledata.value = [];
alltabledata.value = [];
checked1.value = false;
};
const changeAll = () => {
if (checked1.value) {
allTreeRef.value.setCheckedNodes(alltabledata.value);
} else {
allTreeRef.value.setCheckedKeys([]);
}
};
const backform = () => {
step.value = 0;
};
const saveFrom = () => {
if (currentAllBtn.value === 'CASE') {
const sum = tabledata.value.reduce((pre, cur) => pre + cur.caseNum, 0);
if (Number(sum) !== Number(statisis.value.unCaseNum))
return ElMessage.warning({
message: '总数与待分派案件数不一致',
plain: true,
});
} else if (currentAllBtn.value === 'BORROWER') {
const sum = tabledata.value.reduce((pre, cur) => pre + cur.borrowerNum, 0);
if (Number(sum) !== Number(statisis.value.unCustomerNum))
return ElMessage.warning({
message: '总数与待分派案人数不一致',
plain: true,
});
}
changeDistributeCpe({
records: tabledata.value,
distributeType: currentAllBtn.value,
}).then((res) => {
if (res.success) {
ElMessage.success({
message: '保存成功',
plain: true,
});
SaveBol.value = true;
}
});
};
const submitForm = () => {
if (radio.value === 1) {
if (step.value) {
if (!SaveBol.value)
ElMessage.warning({
message: '要先保存',
plain: true,
});
confirm({
records: tabledata.value,
distributeType: currentAllBtn.value,
}).then((res) => {
if (res.success) {
ElMessage.success({
message: '分派成功',
plain: true,
});
showModal.value = false;
emits('success');
}
});
} else {
step.value = 1;
}
} else if (radio.value === 0) {
// chooseIdea('BORROWER');
distributeLoan(currentTenant.value, {
borrowerName: pageParams.value.borrowerName,
borrowerIdCard: pageParams.value.idCard,
borrowerPhone: pageParams.value.borrowerPhone,
commissionAmount: pageParams.value.commissionAmount,
remainingAmount: pageParams.value.remainingAmount,
tenantId: null,
}).then((res) => {
if (res.success) {
ElMessage.success({
message: '分派成功',
plain: true,
});
showModal.value = false;
emits('success');
}
});
}
};
const handleNodeClick = (data1) => {
if (typeof data1 === 'object') {
currentTenant.value = data1.id;
let param = {};
if (lonsArr.value && lonsArr.value.length) {
param['loanIds'] = lonsArr.value.map((v) => v.id);
} else {
param = { ...pageParams.value };
}
getStatisis(param, currentTenant.value);
tabledata.value = data1.users.map((v) => ({
cpe: v,
borrowerNum: null,
caseNum: null,
amount: null,
}));
alltabledata.value = data1.users;
checked1.value = true;
console.log('allTreeRef', data1.users);
console.log('allTreeRef.value', allTreeRef.value);
nextTick(() => {
setTimeout(() => {
allTreeRef.value.setCheckedNodes(data1.users);
});
});
}
};
const resetAllocation = () => {
chooseIdea(currentAllBtn.value);
};
const checkChange = (dara, ddd, aaa) => {
nextTick(() => {
const arr = allTreeRef.value.getCheckedNodes();
tabledata.value = arr.map((v) => ({
cpe: v,
borrowerNum: null,
caseNum: null,
amount: null,
}));
});
};
const changeNum = (type, row, index) => {
// editRowIndex.value = index;
console.log('changeNum', type, row, index);
};
const leftChange = (value, direction) => {
console.log(value, direction); //这个就是它包含的所有的属性以及事件,如果需要别的操作直接执行,也可以查询到
};
const options = [
{
label: '以案人数均分',
value: 'BORROWER',
},
{
label: '以案件数均分',
value: 'CASE',
},
{
label: '以委案金额均分',
value: 'AMOUNT',
},
];
const config = computed(() => {
// 去除分页控件,toolbar控件
return {
toolbarConfig: { enabled: false },
columns: [
{ type: 'seq', width: 50, title: '序号' },
{
field: 'cpe.username',
title: 'CPE',
},
{
field: 'borrowerNum',
title: '分派案人数',
slots: {
default: ({ row, rowIndex }) => {
if (currentAllBtn.value === 'BORROWER') {
return (
<>
<ElInputNumber
v-model={row.borrowerNum}
onChange={() => changeNum(1, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return <>{row.borrowerNum}</>;
}
},
},
},
{
field: 'caseNum',
title: '分派案件数',
slots: {
default: ({ row, rowIndex }) => {
if (currentAllBtn.value === 'CASE') {
return (
<>
<ElInputNumber
v-model={row.caseNum}
onChange={() => changeNum(2, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return <>{row.caseNum}</>;
}
},
},
},
{
field: 'amount',
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}</>;
// // }
// },
// },
},
],
};
});
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: 'name',
};
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-right: 10px;
margin-top: 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;
.bb {
padding-left: 14px;
border: 1px solid #ebeef5;
border-bottom: none;
}
.tree-wrapper {
border: 1px solid #ebeef5;
width: 290px;
height: 318px;
}
.bc {
display: flex;
}
}
</style>
<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) => {
......
......@@ -23,6 +23,7 @@
ref="caseLRef"
:api="getTrackRecord"
:paramCallback="paramCallback"
:selectdList="selectdList"
>
<!-- 表格 header 按钮 -->
<template #left_buttons>
......
<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>
<el-button
type="primary"
:disabled="!selectdList || selectdList.length < 1"
@click="stayCase"
>留案
</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="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 };
......
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