Skip to content

Y
yishuju-ui
Commit 1c863f1d authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

资产详情

parent 0724314c
Show whitespace changes
Inline Side-by-side
Showing with 2128 additions and 978 deletions
src/assets/fonts/font.scss
View file @ 1c863f1d
@font-face {
font-family: YouSheBiaoTiHei;
src: url("./YouSheBiaoTiHei.ttf");
src: url('./YouSheBiaoTiHei.ttf');
}
@font-face {
font-family: MetroDF;
src: url("./MetroDF.ttf");
src: url('./MetroDF.ttf');
}
@font-face {
font-family: DIN;
src: url("./DIN.otf");
src: url('./DIN.otf');
}
src/assets/iconfont/iconfont.scss
View file @ 1c863f1d
@font-face {
font-family: iconfont; /* Project id 2667653 */
src: url("iconfont.ttf?t=1719667796161") format("truetype");
src: url('iconfont.ttf?t=1719667796161') format('truetype');
}
.iconfont {
font-family: iconfont !important;
......@@ -12,40 +12,40 @@
}
.icon-yiwen::before {
font-size: 15px;
content: "\e693";
content: '\e693';
}
.icon-xiala::before {
content: "\e62b";
content: '\e62b';
}
.icon-tuichu::before {
content: "\e645";
content: '\e645';
}
.icon-xiaoxi::before {
font-size: 21.2px;
content: "\e61f";
content: '\e61f';
}
.icon-zhuti::before {
font-size: 22.4px;
content: "\e638";
content: '\e638';
}
.icon-sousuo::before {
content: "\e611";
content: '\e611';
}
.icon-contentright::before {
content: "\e8c9";
content: '\e8c9';
}
.icon-contentleft::before {
content: "\e8ca";
content: '\e8ca';
}
.icon-fangda::before {
content: "\e826";
content: '\e826';
}
.icon-suoxiao::before {
content: "\e641";
content: '\e641';
}
.icon-zhongyingwen::before {
content: "\e8cb";
content: '\e8cb';
}
.icon-huiche::before {
content: "\e637";
content: '\e637';
}
src/bootstrap.js
View file @ 1c863f1d
......@@ -25,7 +25,7 @@ export async function bootstrapInstall() {
// 挂载路由
setupRouter(app);
app.component('ProTable', ProTable)
app.component('ProTable', ProTable);
// 路由准备就绪后挂载 APP 实例
await router.isReady();
......
src/layouts/components/Tabs/index.scss
View file @ 1c863f1d
......@@ -56,7 +56,7 @@
bottom: 0;
width: 100%;
height: 0;
content: "";
content: '';
border-bottom: 2px solid var(--el-color-primary) !important;
}
}
......
src/views/property/case-allocation/components/allocationModal.vue
View file @ 1c863f1d
......@@ -3,7 +3,7 @@
v-model="showModal"
title="案件分派"
@hide="onHide"
max-height="582"
height="582"
width="1003"
show-footer
esc-closable
......@@ -18,7 +18,7 @@
</div>
<div class="number-right">
<p>待分派案人人数</p>
<p>{{currentAccount.people}}</p>
<p>{{ currentAccount.people }}</p>
</div>
</div>
<div class="number-box">
......@@ -29,7 +29,7 @@
</div>
<div class="number-right">
<p>待分派案件数量</p>
<p>{{currentAccount.case}}</p>
<p>{{ currentAccount.case }}</p>
</div>
</div>
<div class="number-box">
......@@ -40,13 +40,13 @@
</div>
<div class="number-right">
<p>待分派金额</p>
<p>{{currentAccount.money}}</p>
<p>{{ currentAccount.money }}</p>
</div>
</div>
</div>
<div class="Content">
<template v-if="!step">
<div style="margin-top:10px;margin-bottom: 10px;">
<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>
......@@ -54,13 +54,15 @@
</div>
<div class="mainContent">
<div class="tree-wrapper">
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
/>
<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" />
<el-transfer
v-model="value1"
:data="data1"
:titles="['CPE', '已选CPE']"
ref="mytransfer"
@left-check-change="leftChange"
/>
</div>
</template>
<template v-else>
......@@ -68,24 +70,46 @@
<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>
<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>
<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>
<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 @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>
......@@ -105,7 +129,7 @@
const tabledata = ref([]);
const showModal = ref(false);
const currentAccount = ref({people: 0, case: 0, money:0});
const currentAccount = ref({ people: 0, case: 0, money: 0 });
const currentAllBtn = ref(1);
const editRowIndex = ref(-1);
......@@ -113,43 +137,42 @@
const step = ref(0);
const onHide = () => {
currentAccount.value = {people: 0, case: 0, money:0};
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
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
}
step.value = 0;
};
const submitForm = () => {
if(step.value || radio.value === 0) {
if (step.value || radio.value === 0) {
} else {
step.value = 1
step.value = 1;
}
};
const handleNodeClick = (data) => {
console.log(data)
}
console.log(data);
};
const chooseIdea = (type) => {
editRowIndex.value = -1
currentAllBtn.value = type
}
editRowIndex.value = -1;
currentAllBtn.value = type;
};
const resetAllocation = () => {
editRowIndex.value = -1
}
editRowIndex.value = -1;
};
const changeNum = (type, row, index) => {
editRowIndex.value = index
console.log('changeNum', type, row, index)
}
editRowIndex.value = index;
console.log('changeNum', type, row, index);
};
const leftChange = (value, direction) => {
console.log(value, direction)//这个就是它包含的所有的属性以及事件，如果需要别的操作直接执行，也可以查询到
}
console.log(value, direction); //这个就是它包含的所有的属性以及事件，如果需要别的操作直接执行，也可以查询到
};
data.value = [
{
label: 'Level one 1',
......@@ -206,107 +229,113 @@
},
],
},
]
];
const config = computed(() => {
// 去除分页控件，toolbar控件
return {
toolbarConfig: {enabled: false},
toolbarConfig: { enabled: false },
columns: [
{ type: 'index', width: 50,title: '序号' },
{ type: 'seq', width: 50, title: '序号' },
{
field: 'code',
title: 'CPE'
title: 'CPE',
},
{
field: 'code',
title: '分派案人数',
slots: {
default: ({row, rowIndex}) => {
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} />
<ElInputNumber
v-model={row.num}
onChange={() => changeNum(1, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return (
<>{row.num}</>
)
return <>{row.num}</>;
}
},
}
},
},
{
field: 'code',
title: '分派案件数',
slots: {
default: ({row, rowIndex}) => {
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} />
<ElInputNumber
v-model={row.num}
onChange={() => changeNum(2, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return (
<>{row.num}</>
)
return <>{row.num}</>;
}
},
}
},
},
{
field: 'code',
title: '分派委案金额',
slots: {
default: ({row, rowIndex}) => {
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} />
<ElInputNumber
v-model={row.num}
onChange={() => changeNum(3, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return (
<>{row.num}</>
)
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 },
{ 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 = []
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${i}`
})
}
return data
label: `Option ${i}`,
});
}
return data;
};
const data1 = ref(generateData())
const value1 = ref([])
const data1 = ref(generateData());
const value1 = ref([]);
const defaultProps = {
children: 'children',
label: 'label',
}
};
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.allocation-wrap {
.allocation-wrap {
height: 100%;
.top {
display: flex;
......@@ -332,19 +361,19 @@ const value1 = ref([])
}
}
.number-right {
p:nth-child(1){
p:nth-child(1) {
color: #cacaca;
font-size: 13px;
}
}
}
.Content {
}
.Content {
height: calc(100% - 50px);
.idea-box{
.idea-box {
height: calc(100% - 24px);
display: flex;
}
.left-idea{
.left-idea {
width: 250px;
border: 1px solid #ebeef5;
display: flex;
......@@ -374,8 +403,8 @@ const value1 = ref([])
align-items: center;
justify-content: center;
}
}
.mainContent {
}
.mainContent {
display: flex;
.tree-wrapper {
border: 1px solid #ebeef5;
......@@ -393,6 +422,5 @@ const value1 = ref([])
:deep(.el-transfer-panel) {
width: 250px;
}
}
}
</style>
src/views/property/case-detail/components/callDrawer.vue 0 → 100644
View file @ 1c863f1d
<template>
<el-drawer
v-model="showModal"
title="拨打跟进记录"
:size="850"
direction="rtl"
:before-close="onHide"
>
<div class="h-full flex-col flex mydrawer pb-2">
<div>
<p class="font-bold mb-2">联系人信息：</p>
<div class="flex justify-between">
<div>
<span class="text-gray-400">姓名：</span>
<span>44444</span>
</div>
<div>
<span class="text-gray-400">与案人关系：</span>
<span>44444</span>
</div>
<div>
<span class="text-gray-400">联系号码：</span>
<span>44444</span>
</div>
<div>
<span class="text-gray-400">号码状态：</span>
<span>
<el-radio-group v-model="radio1">
<el-radio value="1">无效</el-radio>
<el-radio label="2">有效</el-radio>
</el-radio-group>
</span>
</div>
</div>
</div>
<div>
<ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
<template #table_top>
<p class="font-bold">关联案件：</p>
</template>
</ProTable>
</div>
<div class="flex">
<div class="mt-3 pr-8 w-1/2">
<p class="font-bold mb-2">跟进信息：</p>
<el-form
ref="formRef"
inline
:model="form"
:rules="rules"
label-width="110px"
label-position="left"
>
<el-row>
<el-col :span="24">
<el-form-item class="w-full" label="跟进时间：" prop="name">
<el-date-picker
v-model="form.datetime"
class="w-full"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="下次跟进时间：" prop="code">
<div>
<el-date-picker
v-model="form.lastTime"
class="w-full"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
/>
<div>
<el-button size="small" @click="changeLastTime('tomorrow')">明天</el-button>
<el-button size="small" @click="changeLastTime('tomorrowDay')"
>后天</el-button
>
<el-button size="small" @click="changeLastTime('tomorrow2Day')"
>2天后</el-button
>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item
class="w-full"
style="display: block"
label="跟进结果："
prop="name"
label-position="top"
>
<el-tabs v-model="resuleObj.label" class="w-full">
<el-tab-pane
:label="item.label"
:name="item.label"
v-for="(item, index) in tabObj"
:key="`tab${index}`"
>
<el-button
size="small"
:type="resuleObj.childrenlabel === item1.label ? 'primary' : null"
plain
v-for="(item1, index1) in item.children"
:key="`tabchild${index1}`"
@click="resuleObj.childrenlabel = item1.label"
>{{ item1.label }}</el-button
>
</el-tab-pane>
</el-tabs>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" style="display: block" label="跟进状态：" prop="code">
<el-button
size="small"
style="margin-left: 0"
class="mr-2 mb-2"
:type="form.status === item1.label ? 'primary' : null"
plain
v-for="(item1, index1) in statusArr"
:key="`btn${index1}`"
@click="form.status = item1.label"
>{{ item1.label }}</el-button
>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="跟进备注：" prop="code" style="display: block">
<el-input
v-model="form.remark"
class="w-full"
:rows="2"
type="textarea"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="w-1/2">
<p class="font-bold mb-2">跟进附件：</p>
<el-form inline :model="form" :rules="rules" label-width="110px" label-position="left">
<el-form-item class="w-full" label="通话录音：" prop="code">
<el-upload
class="avatar-uploader"
:action="'https://jsonplaceholder.typicode.com/posts/'"
:on-progress="uploadVideoProcess"
>
<el-button type="primary" plain :icon="Upload">上传录音文件</el-button>
</el-upload>
<!-- 进度条 -->
<!-- <el-progress v-if="progressFlag" :percentage="loadProgress" /> -->
</el-form-item>
<el-form-item label="微信图片附件：" prop="code" class="w-full">
<el-upload
v-model:file-list="form.wxfiles"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
list-type="picture-card"
class="mypicture"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<div class="text-center">
<el-icon><Plus /></el-icon>
<div>微信相关附件</div>
</div>
</el-upload>
</el-form-item>
<el-form-item label="短信图片附件：" prop="code" class="w-full">
<el-upload
v-model:file-list="form.messagefiles"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
list-type="picture-card"
class="mypicture"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<div class="text-center">
<el-icon><Plus /></el-icon>
<div>短信相关附件</div>
</div>
</el-upload>
</el-form-item>
<el-form-item label="其他图片附件：" prop="code" class="w-full">
<el-upload
v-model:file-list="form.otherfiles"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
list-type="picture-card"
class="mypicture"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<div class="text-center">
<el-icon><Plus /></el-icon>
<div>其他相关附件</div>
</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</div>
<template #footer>
<div style="flex: auto">
<el-button @click="showModal = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</template>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-drawer>
</template>
<script setup lang="jsx" name="reduceDrawer">
import dayjs from 'dayjs';
import { computed } from 'vue';
import { reactive, ref } from 'vue';
import { ElInputNumber } from 'element-plus';
import { Upload } from '@element-plus/icons-vue';
const showModal = ref(false);
const editFirst = ref(false);
const tabledata = ref([]);
const splitdata = ref([]);
const progressFlag = ref(false);
const loadProgress = ref(0);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const tabObj = [
{ label: '本人可联', children: [{ label: '接听有实质沟通' }, { label: '接听后挂断' }] },
{ label: '联系人可联', children: [{ label: '接听有实质1' }, { label: '接听后2' }] },
{ label: '未接听', children: [{ label: '接听有实质3' }, { label: '接听后4' }] },
];
const resuleObj = reactive({
label: '本人可联',
childrenlabel: null,
});
const form = reactive({
sum: 0,
wxfiles: [],
messagefiles: [],
otherfiles: [],
num: 0,
remark: '',
splitnum: 2,
status: null,
datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
lastTime: null,
});
const currentAccount = ref({ people: 0, case: 0, money: 0 });
const onHide = (done) => {
currentAccount.value = { people: 0, case: 0, money: 0 };
done();
};
const statusArr = [
{
label: '后续再跟进',
value: '后续再跟进',
},
{
label: '承诺还款',
value: '承诺还款',
},
{
label: '暂无还款意愿',
value: '暂无还款意愿',
},
{
label: '要求停催',
value: '要求停催',
},
{
label: '要求停催1',
value: '要求停催1',
},
];
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
];
const selectdList = ref([]);
const onCheckboxChange = (row) => {
selectdList.value = row.records;
};
const handleRemove = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview = (uploadFile) => {
dialogImageUrl.value = uploadFile.url;
dialogVisible.value = true;
};
const changeLastTime = (day) => {
if (day === 'tomorrow') {
form.lastTime = dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
} else if (day === 'tomorrowDay') {
form.lastTime = dayjs().add(2, 'day').format('YYYY-MM-DD HH:mm:ss');
} else {
form.lastTime = dayjs().add(3, 'day').format('YYYY-MM-DD HH:mm:ss');
}
};
const config = reactive({
minHeight: 200,
columns: [
{ type: 'checkbox', width: 50 },
{
field: 'code',
title: '案件ID',
},
{
field: 'code',
title: '产品',
},
{
field: 'code',
title: '借款机构',
},
{
field: 'code',
title: '委案金额',
},
{
field: 'code',
title: '累计减免金额',
},
{
field: 'code',
title: '累计还款金额',
},
{
field: 'code',
title: '剩余待还金额',
},
],
onCheckboxChange: onCheckboxChange,
toolbarConfig: { enabled: false },
});
const splitconfig = computed(() => {
return {
minHeight: 200,
columns: [
{ type: 'seq', width: 50, title: '期次' },
{
field: 'code',
title: '到期日',
},
{
field: 'code',
title: '状态',
width: 70,
},
{
field: 'num',
title: '金额',
slots: {
default: ({ row, rowIndex }) => {
if (editFirst.value && rowIndex === 0) {
return (
<>
<ElInputNumber v-model={row.num} />
</>
);
} else {
return <>{row.num}</>;
}
},
},
},
],
onCheckboxChange: onCheckboxChange,
};
});
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 },
];
splitdata.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 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 openModal = (account) => {
showModal.value = true;
currentAccount.value = { people: 333, case: 44, money: 1111 };
};
const submitForm = () => {};
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.mydrawer {
:deep(.card) {
padding: 0;
border: none;
}
:deep(.el-date-editor) {
width: 100%;
}
.el-form-item {
margin-right: 0;
}
}
.mypicture {
:deep(.el-upload--picture-card) {
width: 100px;
height: 100px;
}
}
</style>
src/views/property/case-detail/components/reduceDrawer.vue 0 → 100644
View file @ 1c863f1d
<template>
<el-drawer
v-model="showModal"
title="减免申请"
:size="800"
direction="rtl"
:before-close="onHide"
>
<div class="h-full overflow-auto flex-col flex mydrawer">
<el-form
ref="formRef"
inline
:model="form"
:rules="rules"
label-width="110px"
label-position="left"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item class="w-full" label="减免类型：" prop="name" label-width="82px">
<el-select v-model="form.relation" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="减免申请时间：" prop="code">
<el-date-picker v-model="form.datetime" type="datetime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="减免到期时间：" prop="code">
<el-date-picker v-model="form.datetime" type="datetime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="减免金额(总计)：" prop="name" label-width="120px">
4444
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="减免案件数：" prop="role"> 1 </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="应还金额：" prop="relation">
<div>
<p>3000</p>
<p class="text-red-600 leading-3">*应还金额</p>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div>
<ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
<template #table_top>
<p class="font-bold">关联案件：</p>
</template>
</ProTable>
</div>
</div>
<template #footer>
<div style="flex: auto">
<el-button @click="showModal = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</template>
</el-drawer>
</template>
<script setup lang="jsx" name="reduceDrawer">
import dayjs from 'dayjs';
import { computed } from 'vue';
import { reactive, ref } from 'vue';
const showModal = ref(false);
const tabledata = ref([]);
const form = reactive({
name: '',
relation: '',
datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
});
const currentAccount = ref({ people: 0, case: 0, money: 0 });
const onHide = (done) => {
currentAccount.value = { people: 0, case: 0, money: 0 };
done();
};
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
];
const config = reactive({
minHeight: 200,
columns: [
{
field: 'code',
title: '案件ID',
},
{
field: 'code',
title: '产品',
},
{
field: 'code',
title: '借款机构',
},
{
field: 'code',
title: '委案金额',
},
{
field: 'code',
title: '累计减免金额',
},
{
field: 'code',
title: '累计还款金额',
},
{
field: 'code',
title: '剩余待还金额',
},
],
toolbarConfig: { enabled: false },
});
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 openModal = (account) => {
showModal.value = true;
currentAccount.value = { people: 333, case: 44, money: 1111 };
};
const submitForm = () => {};
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.mydrawer {
:deep(.card) {
padding: 0;
border: none;
}
}
</style>
src/views/property/case-detail/components/repairModal.vue 0 → 100644
View file @ 1c863f1d
<template>
<vxe-modal
v-model="showModal"
title="修复申请"
@hide="onHide"
height="582"
width="1003"
show-footer
esc-closable
>
<div class="w-full px-3 h-full overflow-auto flex-col flex">
<div class="box-title">案人基本信息</div>
<el-form ref="formRef" inline :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item class="w-full" label="姓名：" prop="name" label-width="72px">
{{ currentAccount.people }}
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item class="w-full" label="身份证号：" prop="code" label-width="85px">
{{ currentAccount.people }}
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item class="w-full" label="联系人姓名：" prop="name">
<el-input v-model="form.name" placeholder="请输入账号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="号码类型：" prop="role"> 修复 </el-form-item>
</el-col>
<el-col :span="10">
<el-form-item class="w-full" label="与案人关系：" prop="relation">
<el-select v-model="form.relation" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="w-full" label="修复前联系号码：" prop="role" label-width="140px">
{{ currentAccount.people }}
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="flex-1">
<ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="true">
<template #left_buttons>
<el-button type="primary">下载申请 </el-button>
<el-button type="primary">审批 </el-button>
<el-button type="primary">下载 </el-button>
<el-button type="primary">批量修复上传 </el-button>
</template>
</ProTable>
</div>
</div>
<template #footer>
<el-button type="default" @click="showModal = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</template>
</vxe-modal>
</template>
<script setup lang="jsx" name="allocationModal">
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 form = reactive({
name: '',
relation: '',
});
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;
};
const submitForm = () => {
if (step.value || radio.value === 0) {
} else {
step.value = 1;
}
};
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
];
const config = computed(() => {
return {
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{
field: 'code',
title: '联系人姓名',
},
{
field: 'code',
title: '与债权人关系',
},
{
field: 'code',
title: '号码类型',
},
],
};
});
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 },
];
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.box-title {
font-weight: 600;
font-size: 18px;
color: #000000;
line-height: 45px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 10px;
}
</style>
src/views/property/case-detail/components/splitDrawer.vue 0 → 100644
View file @ 1c863f1d
<template>
<el-drawer
v-model="showModal"
title="分期申请"
:size="850"
direction="rtl"
:before-close="onHide"
>
<div class="h-full flex-col flex mydrawer pb-2">
<div>
<ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
<template #table_top>
<p class="font-bold">关联案件：</p>
</template>
</ProTable>
</div>
<div class="flex">
<div class="mt-3 pr-8 w-2/5">
<el-form
ref="formRef"
inline
:model="form"
:rules="rules"
label-width="110px"
label-position="left"
>
<el-row>
<el-col :span="24">
<el-form-item class="w-full" label="剩余待还总额：" prop="name">
{{ form.sum }}
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="还款总额：" prop="code">
<el-input v-model="form.num" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="分期申请时间：" prop="code">
<el-date-picker
v-model="form.datetime"
class="w-full"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="还款期数：" prop="name">
<el-select v-model="form.splitnum" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="首期还款日：" prop="code">
<el-date-picker
class="w-full"
v-model="form.datetime"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="非首期还款日：" prop="code">
<el-date-picker
v-model="form.datetime"
class="w-full"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w-full" label="分期生效时间：" prop="code">
<el-date-picker
v-model="form.datetime"
class="w-full"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="w-3/5">
<ProTable :config="splitconfig" :data="splitdata" :showPagination="false">
<template #right_tools>
<el-button type="primary" @click="editFirst = !editFirst" class="mr-1">{{
editFirst ? '确定' : '修改'
}}</el-button>
</template>
</ProTable>
<div class="flex">
<div class="ml-auto text-gray-400">总计： xxxxx</div>
</div>
</div>
</div>
</div>
<template #footer>
<div style="flex: auto">
<el-button @click="showModal = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</template>
</el-drawer>
</template>
<script setup lang="jsx" name="reduceDrawer">
import dayjs from 'dayjs';
import { computed } from 'vue';
import { reactive, ref } from 'vue';
import { ElInputNumber } from 'element-plus';
const showModal = ref(false);
const editFirst = ref(false);
const tabledata = ref([]);
const splitdata = ref([]);
const form = reactive({
sum: 0,
num: 0,
splitnum: 2,
datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
});
const currentAccount = ref({ people: 0, case: 0, money: 0 });
const onHide = (done) => {
currentAccount.value = { people: 0, case: 0, money: 0 };
done();
};
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
];
const selectdList = ref([]);
const onCheckboxChange = (row) => {
selectdList.value = row.records;
};
const config = reactive({
minHeight: 200,
columns: [
{ type: 'checkbox', width: 50 },
{
field: 'code',
title: '案件ID',
},
{
field: 'code',
title: '产品',
},
{
field: 'code',
title: '借款机构',
},
{
field: 'code',
title: '委案金额',
},
{
field: 'code',
title: '累计减免金额',
},
{
field: 'code',
title: '累计还款金额',
},
{
field: 'code',
title: '剩余待还金额',
},
],
onCheckboxChange: onCheckboxChange,
toolbarConfig: { enabled: false },
});
const splitconfig = computed(() => {
return {
minHeight: 200,
columns: [
{ type: 'seq', width: 50, title: '期次' },
{
field: 'code',
title: '到期日',
},
{
field: 'code',
title: '状态',
width: 70,
},
{
field: 'num',
title: '金额',
slots: {
default: ({ row, rowIndex }) => {
if (editFirst.value && rowIndex === 0) {
return (
<>
<ElInputNumber v-model={row.num} />
</>
);
} else {
return <>{row.num}</>;
}
},
},
},
],
onCheckboxChange: onCheckboxChange,
};
});
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 },
];
splitdata.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 openModal = (account) => {
showModal.value = true;
currentAccount.value = { people: 333, case: 44, money: 1111 };
};
const submitForm = () => {};
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.mydrawer {
:deep(.card) {
padding: 0;
border: none;
}
:deep(.el-date-editor) {
width: 100%;
}
}
</style>
src/views/property/case-detail/index.vue
View file @ 1c863f1d
<template>
<div class="card content-box">
<div class="navigation-box">
<div class="card table-box">
<div class="navigation-box absolute z-10 right-8 w-52 rounded-md pl-10 bg-white text-sm">
<el-affix :offset="140">
<div @click="anchor('baseinfo')" class="anchor-item">案人基本信息</div>
<div @click="anchor('caserelation')" class="anchor-item">案件联系人</div>
......@@ -9,18 +9,23 @@
<div @click="anchor('reducerecord')" class="anchor-item">减免记录</div>
<div @click="anchor('splitrecord')" class="anchor-item">分期记录</div>
<div @click="anchor('returnrecord')" class="anchor-item">还款记录</div>
</el-affix>
</div>
<div class="content1">
<div class="btn-grps">
<el-button type="primary" >修复申请</el-button>
<el-button type="primary" >减免申请</el-button>
<el-button type="primary" >分期申请</el-button>
<div class="h-full w-full">
<div class="pl-8">
<el-button type="primary" @click="repair">修复申请</el-button>
<el-button type="primary" @click="reduce">减免申请</el-button>
<el-button type="primary" @click="split">分期申请</el-button>
</div>
<div class="detail-steps">
<el-steps style="max-width: 600px" :active="activeStep">
<el-step :title="item.title" :description="item.desc" :class="{current: (index+1) === activeStep}" v-for="(item, index) in stepList" :key="item.title"/>
<el-steps :active="activeStep">
<el-step
:title="item.title"
:description="item.desc"
:class="{ current: index + 1 === activeStep }"
v-for="(item, index) in stepList"
:key="item.title"
/>
</el-steps>
</div>
<div id="baseinfo">
......@@ -48,15 +53,18 @@
<div id="caserelation">
<div class="box-title">案件联系人</div>
<div class="box-content">
<ProTable :config="relationConfig" :data="relationData" :showPagination="false" :showToolBar="false">
</ProTable>
<ProTable
:config="relationConfig"
:data="relationData"
:showPagination="false"
:showToolBar="false"
/>
</div>
</div>
<div id="casedetail">
<div class="box-title">案件明细
<el-button type="primary" @click="foldCaseTree"
>展开/折叠
</el-button>
<div class="box-title"
>案件明细
<el-button type="primary" @click="foldCaseTree">展开/折叠 </el-button>
</div>
<div class="box-content">
<vxe-grid v-bind="caseDetailConfig" ref="caseDetailRef">
......@@ -98,16 +106,30 @@
</div>
</div>
<div id="callrecord">
<div class="box-title">跟进记录</div>
<div class="box-title"
>跟进记录
<!-- <el-select v-model="form.relation" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> -->
</div>
<div class="box-content">
<ProTable :config="recordConfig" :data="recordData" :showPagination="false" :showToolBar="false">
</ProTable>
<ProTable
:config="recordConfig"
:data="recordData"
:showPagination="false"
:showToolBar="false"
/>
</div>
</div>
<div id="reducerecord">
<div class="box-title">减免记录</div>
<div class="box-content">
<table>
<table style="margin-bottom: 10px">
<tr>
<td class="label">减免类型</td>
<td>John Doe</td>
......@@ -126,14 +148,18 @@
</tr>
<!-- Add more rows as needed -->
</table>
<ProTable :config="recordConfig" :data="recordData" :showPagination="false" :showToolBar="false">
</ProTable>
<ProTable
:config="recordConfig"
:data="recordData"
:showPagination="false"
:showToolBar="false"
/>
</div>
</div>
<div id="splitrecord">
<div class="box-title">分期记录</div>
<div class="box-content">
<table>
<table style="margin-bottom: 10px">
<tr>
<td class="label">分期申请ID</td>
<td>John Doe</td>
......@@ -152,120 +178,141 @@
</tr>
<!-- Add more rows as needed -->
</table>
<ProTable :config="recordConfig" :data="recordData" :showPagination="false" :showToolBar="false">
</ProTable>
<ProTable
:config="recordConfig"
:data="recordData"
:showPagination="false"
:showToolBar="false"
/>
</div>
</div>
<div id="returnrecord">
<div class="box-title">还款记录</div>
<div class="box-content">
<ProTable :config="returnConfig" :data="returnData" :showPagination="false" :showToolBar="false">
</ProTable>
<ProTable
:config="returnConfig"
:data="returnData"
:showPagination="false"
:showToolBar="false"
/>
</div>
</div>
</div>
<repairModal ref="repairModalRef"></repairModal>
<reduceDrawer ref="reduceDrawerRef"></reduceDrawer>
<splitDrawer ref="splitDrawerRef"></splitDrawer>
<callDrawer ref="callDrawerRef"></callDrawer>
</div>
</template>
</template>
<script setup lang="jsx" name="caseDetail">
import { useRoute } from 'vue-router'
import { useRoute } from 'vue-router';
import { reactive, ref } from 'vue';
import { ElButton } from 'element-plus';
import repairModal from './components/repairModal.vue';
import reduceDrawer from './components/reduceDrawer.vue';
import splitDrawer from './components/splitDrawer.vue';
import callDrawer from './components/callDrawer.vue';
const relationData = ref([]);
const returnData = ref([]);
const recordData = ref([]);
const caseDetailRef = ref()
const route = useRoute()
const detail = JSON.parse(route.query.item)
console.log('detail', detail)
const activeStep = ref(2)
const caseDetailRef = ref();
const repairModalRef = ref();
const splitDrawerRef = ref();
const callDrawerRef = ref();
const reduceDrawerRef = ref();
const route = useRoute();
const detail = JSON.parse(route.query.item);
console.log('detail', detail);
const activeStep = ref(2);
const stepList = ref([
{title: '已分派', desc: 'sadas'},
{title: '跟进中', desc: 'sadas1'},
{title: '还款中', desc: 'sadas1'}
])
const callTelephone = (row) => {}
{ title: '已分派', desc: 'sadas' },
{ title: '跟进中', desc: 'sadas1' },
{ title: '还款中', desc: 'sadas1' },
]);
const callTelephone = (row) => {
callDrawerRef.value.openModal(JSON.parse(JSON.stringify(detail)));
};
const returnConfig = reactive({
columns: [
{
field: 'code',
title: '还款记录ID'
title: '还款记录ID',
},
{
field: 'code',
title: '实际还款金额'
title: '实际还款金额',
},
{
field: 'code',
title: '实际还款时间'
title: '实际还款时间',
},
{
field: 'code',
title: '关联减免ID'
title: '关联减免ID',
},
{
field: 'code',
title: '关联分期ID'
title: '关联分期ID',
},
{
field: 'code',
title: '关联分期期次'
title: '关联分期期次',
},
{
field: 'code',
title: '应还金额'
title: '应还金额',
},
{
field: 'code',
title: '借款机构'
}
title: '借款机构',
},
],
toolbarConfig: {enabled: false}
toolbarConfig: { enabled: false },
});
const recordConfig = reactive({
columns: [
{
field: 'code',
title: '跟进记录ID'
title: '跟进记录ID',
},
{
field: 'code',
title: '跟进日期'
title: '跟进日期',
},
{
field: 'code',
title: '下次跟进时间'
title: '下次跟进时间',
},
{
field: 'code',
title: '联系人姓名'
title: '联系人姓名',
},
{
field: 'code',
title: '联系人号码'
title: '联系人号码',
},
{
field: 'code',
title: '拨打跟进结果'
title: '拨打跟进结果',
},
{
field: 'code',
title: '拨打处置状态'
title: '拨打处置状态',
},
{
field: 'code',
title: '备注'
title: '备注',
},
{
field: 'code',
title: '通话录音'
title: '通话录音',
},
{
field: 'code',
title: '微信图片附件',
slots: {
default: ({row, rowIndex}) => {
default: ({ row, rowIndex }) => {
return (
<>
<ElButton type="primary" link onClick={() => callTelephone(row)}>
......@@ -273,36 +320,36 @@
</ElButton>
</>
);
}
}
}
},
},
},
],
toolbarConfig: {enabled: false}
toolbarConfig: { enabled: false },
});
const relationConfig = reactive({
columns: [
{ type: 'seq', width: 70 },
{
field: 'code',
title: '联系人姓名'
title: '联系人姓名',
},
{
field: 'code',
title: '与债权人关系'
title: '与债权人关系',
},
{
field: 'code',
title: '号码类型'
title: '号码类型',
},
{
field: 'code',
title: '号码'
title: '号码',
},
{
field: 'code',
title: '',
slots: {
default: ({row, rowIndex}) => {
default: ({ row, rowIndex }) => {
return (
<>
<ElButton type="primary" onClick={() => callTelephone(row)}>
......@@ -310,51 +357,58 @@
</ElButton>
</>
);
}
}
}
},
},
},
],
toolbarConfig: {enabled: false}
toolbarConfig: { enabled: false },
});
const returnCrash = (row) => {
}
const returnCrash = (row) => {};
const repair = () => {
repairModalRef.value.openModal(JSON.parse(JSON.stringify(detail)));
};
const reduce = () => {
reduceDrawerRef.value.openModal(JSON.parse(JSON.stringify(detail)));
};
const split = () => {
splitDrawerRef.value.openModal(JSON.parse(JSON.stringify(detail)));
};
const caseDetailConfig = reactive({
columns: [
{ type: 'expand', width: 80, slots: { content: 'expand_content' } },
{
field: 'code',
title: '案件ID'
title: '案件ID',
},
{
field: 'code',
title: '产品'
title: '产品',
},
{
field: 'code',
title: '借款机构'
title: '借款机构',
},
{
field: 'code',
title: '备案金额'
title: '备案金额',
},
{
field: 'code',
title: '累计减免金额'
title: '累计减免金额',
},
{
field: 'code',
title: '累计还款金额'
title: '累计还款金额',
},
{
field: 'code',
title: '剩余待还金额'
title: '剩余待还金额',
},
{
field: 'code',
title: '',
slots: {
default: ({row, rowIndex}) => {
default: ({ row, rowIndex }) => {
return (
<>
<ElButton type="primary" onClick={() => returnCrash(row)}>
......@@ -362,63 +416,53 @@
</ElButton>
</>
);
}
}
}
},
},
},
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
],
toolbarConfig: {enabled: false}
toolbarConfig: { enabled: false },
});
const anchor = (type) => {
console.log('sadasda0', type)
document.querySelector(`#${type}`).scrollIntoView(true)
}
console.log('sadasda0', type);
document.querySelector(`#${type}`).scrollIntoView(true);
};
const foldCaseTree = () => {
if(caseDetailRef.value?.getRowExpandRecords().length === caseDetailConfig.data.length){
caseDetailRef.value?.setAllRowExpand(false)
if (caseDetailRef.value?.getRowExpandRecords().length === caseDetailConfig.data.length) {
caseDetailRef.value?.setAllRowExpand(false);
} else {
caseDetailRef.value?.setAllRowExpand(true)
}
caseDetailRef.value?.setAllRowExpand(true);
}
};
recordData.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 },
{ 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 },
];
relationData.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 },
{ 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 },
];
returnData.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 },
{ 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 },
];
</script>
<style lang="scss" scoped>
.content-box {
.table-box {
.navigation-box {
position: absolute;
right: 33px;
z-index: 2;
width: 200px;
border-radius: 5px;
padding-left: 40px;
background: #fff;
font-size: 14px;
color: rgba(0,0,0,0.88);
color: rgba(0, 0, 0, 0.88);
.anchor-item {
position: relative;
padding-bottom: 20px;
......@@ -438,23 +482,19 @@
position: absolute;
height: 100%;
width: 1px;
background: rgba(0,0,0,0.06);
background: rgba(0, 0, 0, 0.06);
display: block;
top: 10px;
content: '';
left: -25px;
}
&:last-child::after{
&:last-child::after {
display: none;
}
}
}
.content1{
width: 100%;
height: 100%;
}
}
.detail-steps {
.detail-steps {
margin-top: 20px;
margin-left: 10px;
:deep(.el-step__icon) {
......@@ -462,22 +502,24 @@
border: none;
width: 8px;
overflow: hidden;
background: #1677FF;
.el-step__icon-inner{
background: #1677ff;
.el-step__icon-inner {
display: none;
}
}
:deep(.is-process), :deep(.is-wait) {
:deep(.is-process),
:deep(.is-wait) {
.el-step__icon {
background: rgba(0,0,0,0.45);
background: rgba(0, 0, 0, 0.45);
}
}
:deep(.el-step__title.is-finish) {
color: #000;
font-weight: 400;
}
:deep(.el-step__title.is-process), :deep(.el-step__title.is-process) {
color: rgba(0,0,0,0.45);
:deep(.el-step__title.is-process),
:deep(.el-step__title.is-process) {
color: rgba(0, 0, 0, 0.45);
font-weight: 400;
}
:deep(.el-step__head) {
......@@ -490,7 +532,7 @@
}
}
:deep(.el-step__description) {
color: rgba(0,0,0,0.45);
color: rgba(0, 0, 0, 0.45);
}
.el-step.current {
:deep(.el-step__icon) {
......@@ -505,33 +547,32 @@
color: #000;
}
}
}
.btn-grps {
padding-left: 30px;
}
.box-title {
}
.box-title {
font-weight: 600;
font-size: 18px;
color: #000000;
line-height: 70px;
border-bottom: 1px solid rgba(0,0,0,0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 10px;
margin-top: 10px;
}
.box-content {
}
.box-content {
padding-right: 40px;
:deep(.card) {
padding: 0;
border: none;
}
}
#baseinfo, #reducerecord, #splitrecord {
}
#baseinfo,
#reducerecord,
#splitrecord {
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid rgba(5,5,5,0.06);
border: 1px solid rgba(5, 5, 5, 0.06);
background: #fff;
padding: 8px;
width: 240px;
......@@ -540,10 +581,10 @@
background: #f5f7f9;
}
}
}
}
.expand-box{
background: #F0EAEA;
.expand-box {
background: #f0eaea;
padding: 20px;
.expand-table {
color: #000;
......@@ -556,10 +597,10 @@
td {
border: none;
span.label {
color: rgba(0,0,0,0.45);
color: rgba(0, 0, 0, 0.45);
font-size: 14px;
}
}
}
}
}
</style>
src/views/property/case-manage/components/caseModal.vue
View file @ 1c863f1d
......@@ -3,7 +3,7 @@
v-model="showModal"
title="案件分派"
@hide="onHide"
max-height="582"
height="582"
width="1003"
show-footer
esc-closable
......@@ -18,7 +18,7 @@
</div>
<div class="number-right">
<p>待分派案人人数</p>
<p>{{currentAccount.people}}</p>
<p>{{ currentAccount.people }}</p>
</div>
</div>
<div class="number-box">
......@@ -29,7 +29,7 @@
</div>
<div class="number-right">
<p>待分派案件数量</p>
<p>{{currentAccount.case}}</p>
<p>{{ currentAccount.case }}</p>
</div>
</div>
<div class="number-box">
......@@ -40,13 +40,13 @@
</div>
<div class="number-right">
<p>待分派金额</p>
<p>{{currentAccount.money}}</p>
<p>{{ currentAccount.money }}</p>
</div>
</div>
</div>
<div class="Content">
<template v-if="!step">
<div style="margin-top:10px;margin-bottom: 10px;">
<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>
......@@ -54,13 +54,15 @@
</div>
<div class="mainContent">
<div class="tree-wrapper">
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
/>
<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" />
<el-transfer
v-model="value1"
:data="data1"
:titles="['CPE', '已选CPE']"
ref="mytransfer"
@left-check-change="leftChange"
/>
</div>
</template>
<template v-else>
......@@ -68,16 +70,39 @@
<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>
<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>
<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
:config="config"
:data="tabledata"
ref="caseLRef"
:showPagination="false"
:showToolBar="false"
>
</ProTable>
</div>
</div>
......@@ -85,7 +110,7 @@
</div>
</div>
<template #footer>
<el-button @click="backform" v-if="step" style="float:left;">上一步</el-button>
<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>
......@@ -105,7 +130,7 @@
const tabledata = ref([]);
const showModal = ref(false);
const currentAccount = ref({people: 0, case: 0, money:0});
const currentAccount = ref({ people: 0, case: 0, money: 0 });
const currentAllBtn = ref(1);
const editRowIndex = ref(-1);
......@@ -113,43 +138,42 @@
const step = ref(0);
const onHide = () => {
currentAccount.value = {people: 0, case: 0, money:0};
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
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
}
step.value = 0;
};
const submitForm = () => {
if(step.value || radio.value === 0) {
if (step.value || radio.value === 0) {
} else {
step.value = 1
step.value = 1;
}
};
const handleNodeClick = (data) => {
console.log(data)
}
console.log(data);
};
const chooseIdea = (type) => {
editRowIndex.value = -1
currentAllBtn.value = type
}
editRowIndex.value = -1;
currentAllBtn.value = type;
};
const resetAllocation = () => {
editRowIndex.value = -1
}
editRowIndex.value = -1;
};
const changeNum = (type, row, index) => {
editRowIndex.value = index
console.log('changeNum', type, row, index)
}
editRowIndex.value = index;
console.log('changeNum', type, row, index);
};
const leftChange = (value, direction) => {
console.log(value, direction)//这个就是它包含的所有的属性以及事件，如果需要别的操作直接执行，也可以查询到
}
console.log(value, direction); //这个就是它包含的所有的属性以及事件，如果需要别的操作直接执行，也可以查询到
};
data.value = [
{
label: 'Level one 1',
......@@ -206,107 +230,113 @@
},
],
},
]
];
const config = computed(() => {
// 去除分页控件，toolbar控件
return {
toolbarConfig: {enabled: false},
toolbarConfig: { enabled: false },
columns: [
{ type: 'seq', width: 50,title: '序号' },
{ type: 'seq', width: 50, title: '序号' },
{
field: 'code',
title: 'CPE'
title: 'CPE',
},
{
field: 'code',
title: '分派案人数',
slots: {
default: ({row, rowIndex}) => {
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} />
<ElInputNumber
v-model={row.num}
onChange={() => changeNum(1, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return (
<>{row.num}</>
)
return <>{row.num}</>;
}
},
}
},
},
{
field: 'code',
title: '分派案件数',
slots: {
default: ({row, rowIndex}) => {
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} />
<ElInputNumber
v-model={row.num}
onChange={() => changeNum(2, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return (
<>{row.num}</>
)
return <>{row.num}</>;
}
},
}
},
},
{
field: 'code',
title: '分派委案金额',
slots: {
default: ({row, rowIndex}) => {
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} />
<ElInputNumber
v-model={row.num}
onChange={() => changeNum(3, row, rowIndex)}
disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
/>
</>
);
} else {
return (
<>{row.num}</>
)
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 },
{ 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 = []
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${i}`
})
}
return data
label: `Option ${i}`,
});
}
return data;
};
const data1 = ref(generateData())
const value1 = ref([])
const data1 = ref(generateData());
const value1 = ref([]);
const defaultProps = {
children: 'children',
label: 'label',
}
};
defineExpose({
openModal,
});
</script>
<style lang="scss" scoped>
.allocation-wrap {
.allocation-wrap {
height: 100%;
.top {
display: flex;
......@@ -332,19 +362,19 @@ const value1 = ref([])
}
}
.number-right {
p:nth-child(1){
p:nth-child(1) {
color: #cacaca;
font-size: 13px;
}
}
}
.Content {
}
.Content {
height: calc(100% - 50px);
.idea-box{
.idea-box {
height: calc(100% - 24px);
display: flex;
}
.left-idea{
.left-idea {
width: 250px;
border: 1px solid #ebeef5;
display: flex;
......@@ -374,8 +404,8 @@ const value1 = ref([])
align-items: center;
justify-content: center;
}
}
.mainContent {
}
.mainContent {
display: flex;
.tree-wrapper {
border: 1px solid #ebeef5;
......@@ -393,6 +423,5 @@ const value1 = ref([])
:deep(.el-transfer-panel) {
width: 250px;
}
}
}
</style>
src/views/property/case-manage/index.vue
View file @ 1c863f1d
......@@ -2,7 +2,7 @@
<div class="card content-box">
<div class="table-inner">
<ProTable :config="config" :data="data" ref="caseLRef">
<template #left_buttons>
<template #table_top>
<div class="topgrp">
<div class="topbox">
<div class="topinner">
......@@ -20,20 +20,20 @@
<script setup name="case-manage">
import caseModal from './components/caseModal.vue';
import { useRouter } from 'vue-router'
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
const caseModalRef = ref();
const caseLRef = ref();
const router = useRouter()
const options = ref([])
const onCellClick = ({row, rowIndex}) => {
let obj = JSON.stringify(row)
const router = useRouter();
const options = ref([]);
const onCellClick = ({ row, rowIndex }) => {
let obj = JSON.stringify(row);
router.push({
path: '/property/case-detail',
query: { item: obj }, //这里不能直接写成 query: JSON.stringify(item)
})
}
});
};
const config = reactive({
columns: [
{ field: 'name', title: '案件ID', search: { el: 'input' } },
......@@ -90,7 +90,7 @@
{
field: 'role',
title: '分配CPE日期',
search: { el: 'date-picker', props: { type: "date", valueFormat: "YYYY-MM-DD" } },
search: { el: 'date-picker', props: { type: 'date', valueFormat: 'YYYY-MM-DD' } },
},
{
field: 'role',
......@@ -111,32 +111,36 @@
field: 'role',
title: '跟进结果',
enum: options,
search: { el: 'select', props:{filterable:true },span: 1 },
fieldNames:{ label:"genderLabel", value: "genderValue" }
search: { el: 'select', props: { filterable: true }, span: 1 },
fieldNames: { label: 'genderLabel', value: 'genderValue' },
},
{
field: 'role',
title: '跟进状态',
enum: options,
search: { el: 'select', props:{filterable:true },span: 1 },
fieldNames:{ label:"genderLabel", value: "genderValue" }
search: { el: 'select', props: { filterable: true }, span: 1 },
fieldNames: { label: 'genderLabel', value: 'genderValue' },
},
{
field: 'role',
title: '案件状态',
enum: options,
search: { el: 'select', props:{filterable:true },span: 1 },
fieldNames:{ label:"genderLabel", value: "genderValue" }
}
search: { el: 'select', props: { filterable: true }, span: 1 },
fieldNames: { label: 'genderLabel', value: 'genderValue' },
},
],
onCellClick: onCellClick
onCellClick: onCellClick,
});
const allocation = (row) => {
if (!caseLRef.value.element.getCheckboxRecords() || caseLRef.value.element.getCheckboxRecords().length === 0) return
console.log('111', caseLRef.value.element.getCheckboxRecords() )
if (
!caseLRef.value.element.getCheckboxRecords() ||
caseLRef.value.element.getCheckboxRecords().length === 0
)
return;
console.log('111', caseLRef.value.element.getCheckboxRecords());
caseModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
}
};
const data = [
{ name: 'admin', code: 'admin', role: 'superadmin' },
{ name: 'account1', code: 'account1', role: 'user' },
......@@ -145,14 +149,14 @@
];
</script>
<style lang="scss" scoped>
.table-inner {
.table-inner {
width: 100%;
:deep(.topgrp) {
display: flex;
margin-bottom: 8px;
.topbox {
margin-right: 10px;
background: rgba(0,0,0,0.02);
background: rgba(0, 0, 0, 0.02);
border-radius: 16px;
width: 146px;
height: 97px;
......@@ -162,14 +166,9 @@
font-size: 24px;
p:nth-child(1) {
font-size: 14px;
color: rgba(0,0,0,0.45);
color: rgba(0, 0, 0, 0.45);
}
}
}
:deep(.card) {
border: none;
box-shadow: none;
}
}
</style>
src/views/property/import/components/caseDetailModal.vue
View file @ 1c863f1d
......@@ -7,10 +7,8 @@
show-footer
esc-closable
>
<ProTable :config="config" :data="data">
</ProTable>
<template #footer>
</template>
<ProTable :config="config" :data="data"> </ProTable>
<template #footer> </template>
</vxe-modal>
</template>
......@@ -37,7 +35,7 @@
field: 'role',
title: '角色',
search: { el: 'input', props: { clearable: true } },
}
},
],
});
......
src/views/property/import/index.vue
View file @ 1c863f1d
......@@ -6,15 +6,19 @@
<div>
<el-upload
class="avatar-uploader"
:action="'https://jsonplaceholder.typicode.com/posts/'"
:show-file-list="false"
ref="uploadRef"
:action="upload.url"
:disabled="upload.isUploading"
accept=".xls, .xlsx"
:limit="1"
:on-success="handleFileSuccess"
:auto-upload="false"
:on-progress="uploadVideoProcess"
>
<el-button type="primary" plain :icon="Upload">上传文件</el-button>
</el-upload>
<!-- 进度条 -->
<el-progress v-if="progressFlag" :percentage="loadProgress" />
<!-- <el-progress v-if="progressFlag" :percentage="loadProgress" /> -->
<div class="mt-2 text-sm text-gray-400"> 仅支持1个文件上传，格式为xls和xlsx </div>
<div class="mt-1 text-blue-500 underline">下载模板</div>
</div>
......@@ -76,6 +80,7 @@
const options = ref([]);
const loadProgress = ref(0);
const caseDetailModalRef = ref();
const uploadRef = ref();
const isFold = ref(true);
const config = reactive({
columns: [
......@@ -170,15 +175,21 @@
code: '',
role: '',
});
const upload = reactive({
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
// headers: { Authorization: "Bearer " + getToken() },
headers: {},
// 上传的地址
url: '/mes/dv/machinery/importData',
});
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); // 一秒后关闭进度条
}
upload.isUploading = true;
};
const handleFileSuccess = (response, file, fileList) => {
upload.isUploading = false;
uploadRef.value.clearFiles();
};
const linkZK = (row) => {
caseDetailModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
......
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