Skip to content

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

优化页面样式

parent 388055c0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 1370 deletions
src/components/Pagination/index.vue
View file @ d429b3fe
......@@ -4,7 +4,7 @@
:background="true"
:current-page="pageable.current"
:page-size="pageable.size"
:page-sizes="[100, 500, 800, 1000]"
:page-sizes="[20, 50, 100, 200, 500, 1000]"
:total="pageable.total"
:size="globalStore?.assemblySize ?? 'default'"
layout="total, sizes, prev, pager, next, jumper"
......
src/components/ProTable/index.vue
View file @ d429b3fe
......@@ -15,12 +15,14 @@
<!-- 表格主体 -->
<div>
<slot name="table_top"></slot>
<!-- <div class="flex rounded w-full h-11 items-center pl-2 btn-grp">
<!-- <div >
</div> -->
<slot name="left_buttons" v-if="selectdList"></slot>
<vxe-grid ref="xGrid" v-bind="gridOptions" :data="processTableData" :loading="loading">
<template #toolbar_buttons>
<slot name="left_buttons"></slot>
<slot name="left_buttons" v-if="!selectdList"></slot>
<div v-else>选中项：{{selectdList.length}} <span class=" text-blue-400 cursor-pointer ml-4" @click="cancel">取消</span></div>
</template>
<template #toolbar_tools>
<slot name="right_tools"></slot>
......@@ -58,6 +60,10 @@
type: Object,
required: true,
},
selectdList: {
type: Array,
default: undefined,
},
showToolBar: {
type: Boolean,
default: true,
......@@ -121,7 +127,14 @@
const tableHeight = computed(() => `calc(100% - ${props.showPagination ? 52 : 0}px)`);
// 表格配置项
const gridOptions = computed(() => Object.assign({}, gridConfig.value, props.config));
const cancel = () => {
if (xGrid.value) {
xGrid.value.setAllCheckboxRow(false);
}
if (props.config.onCheckboxAll) {
props.config.onCheckboxAll({checked: false, records: []})
}
}
// 处理表格数据
const processTableData = computed(() => {
if (!props.data) return tableData.value;
......@@ -219,7 +232,4 @@
});
</script>
<style lang="scss" scoped>
.btn-grp {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);
}
</style>
src/hooks/useProTable.js
View file @ d429b3fe
......@@ -17,7 +17,7 @@ export function useProTable(
// 当前页数
current: 1,
// 每页显示条数
size: 100,
size: 20,
// 总条数
total: 0,
},
......@@ -82,7 +82,6 @@ export function useProTable(
dataCallBack && (result = dataCallBack(result));
state.tableData = isPageable ? result.content : result;
console.log(state.tableData, '---');
// 解构后台返回的分页数据 (如果有分页更新分页信息)
if (isPageable) {
state.pageable.total = +result.page.totalElements;
......
src/styles/element.scss
View file @ d429b3fe
......@@ -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
src/views/business-approval/by-stages-apply/index.vue
View file @ d429b3fe
<template>
<div class="table-box">
<ProTable :config="config" ref="ProTableRef" :api="getByStagesPage">
<ProTable :config="config" ref="ProTableRef" :api="getByStagesPage" :selectdList="selectdList">
<template #left_buttons>
<!-- <el-button type="primary">下载申请 </el-button> -->
<el-button
......
src/views/business-approval/reduction-apply/index.vue
View file @ d429b3fe
<template>
<div class="table-box">
<ProTable :config="config" ref="ProTableRef" :api="getReducePage">
<ProTable :config="config" ref="ProTableRef" :api="getReducePage" :selectdList="selectdList">
<template #left_buttons>
<!-- <el-button type="primary">下载申请 </el-button> -->
<el-button
......
src/views/business-approval/repair-approve/index.vue
View file @ d429b3fe
<template>
<div class="table-box">
<ProTable :config="config" ref="caseLRef" :api="getRepairRecord">
<ProTable :config="config" ref="caseLRef" :api="getRepairRecord" :selectdList="selectdList">
<template #left_buttons>
<!-- <el-button type="primary">下载申请 </el-button> -->
<el-button
......
src/views/business-approval/repayment-approve/index.vue
View file @ d429b3fe
<template>
<div class="table-box">
<ProTable :config="config" ref="ProTableRef" :api="getRepayRecordPage">
<ProTable :config="config" ref="ProTableRef" :api="getRepayRecordPage" :selectdList="selectdList">
<template #left_buttons>
<!-- <el-button type="primary">下载申请 </el-button> -->
<el-button
......
src/views/infoGather/customerGather/index.vue
View file @ d429b3fe
<template>
<div class="table-box">
<ProTable ref="proTable" :config="config" :api="getPlatformPage" :paramCallback="paramCallback">
<ProTable ref="proTable" :config="config" :api="getPlatformPage" :paramCallback="paramCallback" :selectdList="selectdList">
<template #left_buttons>
<!-- <el-button type="primary" :disabled="!selectdList || selectdList.length < 1" @click="pushCreditcard">新建信用卡</el-button> -->
<el-button type="primary" @click="pushCredit">新建信用卡</el-button>
......
src/views/property/audit-manage/index.vue
View file @ d429b3fe
......@@ -22,6 +22,7 @@
:config="config"
ref="caseLRef"
:api="getTrackRecord"
:selectdList="selectdList"
:paramCallback="paramCallback"
>
<!-- 表格 header 按钮 -->
......
src/views/property/case-allocation/components/allocationModal.vue
View file @ d429b3fe
......@@ -15,7 +15,7 @@
<div class="number-box">
<div class="number-left">
<div class="icon-wrapper">
<el-icon><UserFilled size="850" /></el-icon>
<img src="@/assets/images/userlist.png" />
</div>
</div>
<div class="number-right">
......@@ -26,7 +26,7 @@
<div class="number-box">
<div class="number-left">
<div class="icon-wrapper">
<el-icon><List /></el-icon>
<img src="@/assets/images/caselist.png" />
</div>
</div>
<div class="number-right">
......@@ -37,12 +37,12 @@
<div class="number-box">
<div class="number-left">
<div class="icon-wrapper">
<el-icon><UserFilled size="850" /></el-icon>
<img src="@/assets/images/money.png" />
</div>
</div>
<div class="number-right">
<p>待分派金额</p>
<p>{{ statisis.unAmount }}</p>
<p>￥{{ statisis.unAmount }}</p>
</div>
</div>
</div>
......@@ -614,8 +614,6 @@
text-align: center;
line-height: 40px;
color: #bbc3ca;
border: 2px solid #bbc3ca;
border-radius: 100%;
margin-right: 10px;
font-size: 37px;
}
......
src/views/property/case-allocation/index.vue
View file @ d429b3fe
<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();
......
src/views/property/case-back/index.vue
View file @ d429b3fe
<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 };
......
src/views/property/case-repair/index.vue
View file @ d429b3fe
......@@ -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',
......
src/views/property/case-return/index.vue
View file @ d429b3fe
<template>
<div class="table-box">
<div>
<ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback">
<ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback" :selectdList="selectdList">
<!-- 表格 header 按钮 -->
<template #left_buttons>
<el-button type="primary" @click="backCase">撤案 </el-button>
<div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
<el-dropdown @command="(command) => dataValue = command">
<span class="el-dropdown-link">
{{dataValue}}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in dataOptions" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary" @click="backCase">撤案</el-button>
</div>
</template>
</ProTable>
</div>
......@@ -42,11 +57,23 @@
import { getManageOrgPage } from '@/api/manageOrg';
import { getTenantPage } from '@/api/tenant';
import { useDict } from '@/hooks/useDict';
import { ArrowDown } from '@element-plus/icons-vue';
const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, DistributeStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus","DistributeStatus", "CaseStatus");
const caseLRef = ref();
const selectdList = ref([]);
const curParam = ref({});
const showModal = ref(false);
const dataValue = ref('对查询结果操作');
const dataOptions = [
{
label: '对查询结果操作',
value: '对查询结果操作',
},
{
label: '对选中项操作',
value: '对选中项操作',
}
];
const onCheckboxChange = (row) => {
selectdList.value = row.records;
};
......@@ -61,7 +88,7 @@
const submitForm = async (type) => {
const ids = selectdList.value.map((v) => v.id).join(',');
let param = {};
if (ids.length > 0) {
if (dataValue.value === '对选中项操作') {
param['loanIds'] = ids;
} else {
param = { ...curParam.value };
......@@ -110,24 +137,12 @@
return obj;
};
const backCase = async () => {
// 勾选的情况
// if (selectdList.value && selectdList.value.length) {
// const arr = selectdList.value.filter(v => v.caseStatus === 'stay')
// if (arr.length > 0) {
// showModal.value = true
// } else {
// submitForm('withdraw')
// }
// } else {
// const param = {...curParam.value, caseStatus: 'stay'}
// getLoanpage(param).then(res=>{
// if(res.success && res.result && res.result.content && res.result.content.length) {
// showModal.value = true
// } else {
// submitForm('withdraw')
// }
// })
// }
if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
return ElMessage.warning({
message: '请先选择操作对象!',
plain: true,
});
}
showModal.value = true;
};
const onCheckboxAll = (flag) => {
......
src/views/workplace/audit/index.vue
View file @ d429b3fe
......@@ -23,6 +23,7 @@
ref="caseLRef"
:api="getTrackRecord"
:paramCallback="paramCallback"
:selectdList="selectdList"
>
<!-- 表格 header 按钮 -->
<template #left_buttons>
......
src/views/workplace/case/index.vue
View file @ d429b3fe
<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