This commit is contained in:
zmj 2024-03-23 10:48:54 +08:00
parent 7d4b2d5979
commit 944a8f37fb
6 changed files with 124 additions and 115 deletions

View File

@ -58,4 +58,13 @@ watch(
</el-config-provider> </el-config-provider>
</template> </template>
<style></style> <style>
.el-table th.el-table__cell>.cell {
text-align: center;
}
.el-table td.el-table__cell div {
text-align: center;
}
</style>

View File

@ -1,72 +1,86 @@
import { reactive, toRaw } from 'vue' import { reactive, toRaw } from "vue";
// 分页钩子函数 // 分页钩子函数
interface Options { interface Options {
page?: number page?: number;
size?: number size?: number;
fetchFun: (_arg: any) => Promise<any> fetchFun: (_arg: any) => Promise<any>;
params?: Record<any, any> params?: Record<any, any>;
firstLoading?: boolean firstLoading?: boolean;
}
interface Icolumn {
column: { label: String; width: Number; property: string };
} }
export function usePaging(options: Options) { export function usePaging(options: Options) {
const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options const {
// 记录分页初始参数 page = 1,
const paramsInit: Record<any, any> = Object.assign({}, toRaw(params)) size = 15,
// 分页数据 fetchFun,
const pager = reactive({ params = {},
page, firstLoading = false,
size, } = options;
loading: firstLoading, // 记录分页初始参数
count: 0, const paramsInit: Record<any, any> = Object.assign({}, toRaw(params));
lists: [] as any[], // 分页数据
extend: {} as Record<string, any>, const pager = reactive({
calcWidth:(value:string)=>{ page,
let list = pager.lists.map(item => item[value]) size,
const maxLength = list.reduce((max, str) => { loading: firstLoading,
return Math.max(max, str.length); count: 0,
}, 0); lists: [] as any[],
extend: {} as Record<string, any>,
return (maxLength*14+24) calcWidth: ({ column }: Icolumn) => {
} let propWidth = column.label.length * 14 + 24;
let list = pager.lists.map(
(item: Object) => (item as any)[column.property]
);
const maxLength = list.reduce((max, str) => {
return Math.max(max, str.length);
}, 0);
const columnWidth = maxLength * 14 + 24;
column.width = Math.max(columnWidth, propWidth);
return column.label;
},
});
// 请求分页接口
const getLists = () => {
pager.loading = true;
return fetchFun({
page_no: pager.page,
page_size: pager.size,
...params,
}) })
// 请求分页接口 .then((res: any) => {
const getLists = () => { pager.count = res?.count;
pager.loading = true pager.lists = res?.lists;
return fetchFun({ pager.extend = res?.extend;
page_no: pager.page, return Promise.resolve(res);
page_size: pager.size, })
...params .catch((err: any) => {
}) return Promise.reject(err);
.then((res: any) => { })
pager.count = res?.count .finally(() => {
pager.lists = res?.lists pager.loading = false;
pager.extend = res?.extend });
return Promise.resolve(res) };
}) // 重置为第一页
.catch((err: any) => { const resetPage = () => {
return Promise.reject(err) pager.page = 1;
}) getLists();
.finally(() => { };
pager.loading = false // 重置参数
}) const resetParams = () => {
} Object.keys(paramsInit).forEach((item) => {
// 重置为第一页 params[item] = paramsInit[item];
const resetPage = () => { });
pager.page = 1 getLists();
getLists() };
} return {
// 重置参数 pager,
const resetParams = () => { getLists,
Object.keys(paramsInit).forEach((item) => { resetParams,
params[item] = paramsInit[item] resetPage,
}) };
getLists()
}
return {
pager,
getLists,
resetParams,
resetPage
}
} }

View File

@ -6,29 +6,19 @@
<image-contain :src="config.login_image" :width="400" height="100%" /> <image-contain :src="config.login_image" :width="400" height="100%" />
</div> </div>
<div <div
class="login-form bg-body flex flex-col justify-center px-10 py-10 md:w-[400px] w-[375px] flex-none mx-auto" class="login-form bg-body flex flex-col justify-center px-10 py-10 md:w-[400px] w-[375px] flex-none mx-auto">
>
<div class="text-center text-3xl font-medium mb-8">{{ config.web_name }}</div> <div class="text-center text-3xl font-medium mb-8">{{ config.web_name }}</div>
<el-form ref="formRef" :model="formData" size="large" :rules="rules"> <el-form ref="formRef" :model="formData" size="large" :rules="rules">
<el-form-item prop="account"> <el-form-item prop="account">
<el-input <el-input v-model="formData.account" placeholder="请输入账号" @keyup.enter="handleEnter">
v-model="formData.account"
placeholder="请输入账号"
@keyup.enter="handleEnter"
>
<template #prepend> <template #prepend>
<icon name="el-icon-User" /> <icon name="el-icon-User" />
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input ref="passwordRef" v-model="formData.password" show-password placeholder="请输入密码"
ref="passwordRef" @keyup.enter="handleLogin">
v-model="formData.password"
show-password
placeholder="请输入密码"
@keyup.enter="handleLogin"
>
<template #prepend> <template #prepend>
<icon name="el-icon-Lock" /> <icon name="el-icon-Lock" />
</template> </template>
@ -123,6 +113,7 @@ onMounted(() => {
.login { .login {
background-image: url('./images/login_bg.png'); background-image: url('./images/login_bg.png');
@apply min-h-screen bg-no-repeat bg-center bg-cover; @apply min-h-screen bg-no-repeat bg-center bg-cover;
.login-card { .login-card {
height: 400px; height: 400px;
} }

View File

@ -39,46 +39,39 @@
</template> </template>
新增 新增
</el-button> </el-button>
<el-button v-perms="['custom.custom/delete']" :disabled="!selectData.length" <el-button v-perms="['custom.custom/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
@click="handleDelete(selectData)">
删除 删除
</el-button> </el-button>
<div class="mt-4"> <div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange"> <el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="55" /> <el-table-column label="序号" type="index" width="55" />
<el-table-column label="客户名称" prop="name" show-overflow-tooltip /> <el-table-column label="客户名称" prop="name" />
<el-table-column label="客户属性" prop="custom_type"> <el-table-column label="客户属性" prop="custom_type">
<template #default="{ row }"> <template #default="{ row }">
<dict-value :options="dictData.custom_type" :value="row.custom_type" /> <dict-value :options="dictData.custom_type" :value="row.custom_type" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="所在省" prop="province_name" show-overflow-tooltip /> <el-table-column label="所在省" prop="province_name" show-overflow-tooltip />
<el-table-column label="负责人姓名" prop="master_name" show-overflow-tooltip /> <el-table-column label="负责人姓名" prop="master_name" show-overflow-tooltip />
<el-table-column label="负责人职务" prop="master_position" show-overflow-tooltip /> <el-table-column label="负责人职务" prop="master_position" show-overflow-tooltip />
<el-table-column label="负责人手机" prop="master_phone" show-overflow-tooltip /> <el-table-column label="负责人手机" prop="master_phone" show-overflow-tooltip />
<el-table-column label="负责人电话" prop="master_telephone" show-overflow-tooltip /> <el-table-column label="负责人电话" prop="master_telephone" show-overflow-tooltip />
<el-table-column label="跟进记录" prop="follow_total" show-overflow-tooltip /> <el-table-column label="跟进记录" prop="follow_total" show-overflow-tooltip />
<el-table-column label="最后跟进" prop="last_follow_date" show-overflow-tooltip /> <el-table-column label="最后跟进" prop="last_follow_date" show-overflow-tooltip />
<el-table-column label="下次回访日期" prop="next_follow_date" show-overflow-tooltip /> <el-table-column label="下次回访日期" prop="next_follow_date" show-overflow-tooltip />
<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip /> <el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
<el-table-column label="操作" width="160" fixed="right"> <el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button v-perms="['custom.custom/edit']" type="primary" link @click="handleEdit(row)"> <el-button v-perms="['custom.custom/edit']" type="primary" link @click="handleEdit(row)">
编辑 编辑
</el-button> </el-button>
<el-button v-perms="['custom.custom/delete']" type="danger" link <el-button v-perms="['custom.custom/delete']" type="danger" link @click="handleDelete(row.id)">
@click="handleDelete(row.id)">
删除 删除
</el-button> </el-button>
<el-button v-perms="['custom.custom/detail']" link @click="handleDetail(row)"> <el-button v-perms="['custom.custom/detail']" link @click="handleDetail(row)">
详情 详情
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

View File

@ -58,22 +58,22 @@
<el-table :data="pager.lists" @selection-change="handleSelectionChange"> <el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="55" /> <el-table-column label="序号" type="index" width="55" />
<el-table-column label="客户名称" prop="custom_name" :width="pager.calcWidth('custom_name')" /> <el-table-column label="客户名称" prop="custom_name" />
<el-table-column label="项目名称" prop="project_name" :width="pager.calcWidth('project_name')" /> <el-table-column label="项目名称" prop="project_name":render-header="pager.calcWidth" />
<el-table-column label="项目编码" prop="project_code" :width="pager.calcWidth('project_code')" /> <el-table-column label="项目编码" prop="project_code" :render-header="pager.calcWidth" />
<el-table-column label="合同编号" prop="contract_code" :width="pager.calcWidth('contract_code')" /> <el-table-column label="合同编号" prop="contract_code" :render-header="pager.calcWidth" />
<el-table-column label="投诉主题" prop="name" :width="pager.calcWidth('name')" /> <el-table-column label="投诉主题" prop="name" show-overflow-tooltip />
<el-table-column label="日期" prop="date" /> <el-table-column label="日期" prop="date" show-overflow-tooltip />
<el-table-column label="接待人" prop="receiver" /> <el-table-column label="接待人" prop="receiver" show-overflow-tooltip />
<el-table-column label="分类" prop="classification" /> <el-table-column label="分类" prop="classification" show-overflow-tooltip />
<el-table-column label="投诉人" prop="custom_master_name" /> <el-table-column label="投诉人" prop="custom_master_name" show-overflow-tooltip />
<el-table-column label="联系电话" prop="custom_master_phone" /> <el-table-column label="联系电话" prop="custom_master_phone" show-overflow-tooltip />
<el-table-column label="处理结果" prop="processing_result" /> <el-table-column label="处理结果" prop="processing_result" show-overflow-tooltip />
<el-table-column label="紧急程度" prop="urgency" /> <el-table-column label="紧急程度" prop="urgency" show-overflow-tooltip />
<el-table-column label="指定处理人" prop="processed_user" width="105" /> <el-table-column label="指定处理人" prop="processed_user" width="105" show-overflow-tooltip />
<el-table-column label="问题是否解决" prop="is_solve_text" width="110" /> <el-table-column label="问题是否解决" prop="is_solve_text" width="110" show-overflow-tooltip />
<el-table-column label="完成日期" prop="done_date" /> <el-table-column label="完成日期" prop="done_date" show-overflow-tooltip />
<el-table-column label="评分" prop="score" /> <el-table-column label="评分" prop="score" show-overflow-tooltip />
<el-table-column label="操作" width="110" fixed="right"> <el-table-column label="操作" width="110" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button v-perms="['custom_service.custom_service/solve']" type="primary" link <el-button v-perms="['custom_service.custom_service/solve']" type="primary" link
@ -88,8 +88,7 @@
@click="handleDelete(row.id)"> @click="handleDelete(row.id)">
删除 删除
</el-button> </el-button>
<el-button v-perms="['custom_service.custom_service/detail']" link <el-button v-perms="['custom_service.custom_service/detail']" link @click="handledetail(row)">
@click="handledetail(row)">
详情 详情
</el-button> </el-button>
</template> </template>

View File

@ -19,8 +19,8 @@
<el-select class="w-[280px]" v-model="queryParams.strategic_significance" clearable <el-select class="w-[280px]" v-model="queryParams.strategic_significance" clearable
placeholder="请选择战略意义"> placeholder="请选择战略意义">
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option v-for="(item, index) in dictData.strategic_significance" :key="index" <el-option v-for="(item, index) in dictData.strategic_significance" :key="index" :label="item.name"
:label="item.name" :value="item.value" /> :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="所属行业" prop="industry"> <el-form-item label="所属行业" prop="industry">
@ -45,8 +45,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="信息来源" prop="information_sources"> <el-form-item label="信息来源" prop="information_sources">
<el-select class="w-[280px]" v-model="queryParams.information_sources" clearable <el-select class="w-[280px]" v-model="queryParams.information_sources" clearable placeholder="请选择信息来源">
placeholder="请选择信息来源">
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option v-for="(item, index) in dictData.information_sources" :key="index" :label="item.name" <el-option v-for="(item, index) in dictData.information_sources" :key="index" :label="item.name"
:value="item.value" /> :value="item.value" />
@ -81,11 +80,11 @@
<el-table :data="pager.lists" @selection-change="handleSelectionChange"> <el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="55" /> <el-table-column label="序号" type="index" width="55" />
<el-table-column label="客户" prop="custom_name" show-overflow-tooltip /> <el-table-column label="客户" prop="custom_name" />
<el-table-column label="项目编码" prop="project_code" show-overflow-tooltip /> <el-table-column label="项目编码" prop="project_code" :render-header="pager.calcWidth" />
<el-table-column label="项目名称" prop="name" show-overflow-tooltip /> <el-table-column label="项目名称" prop="name" />
<el-table-column label="项目状态" prop="status" show-overflow-tooltip /> <el-table-column label="项目状态" prop="status" show-overflow-tooltip />
<el-table-column label="项目所在地" prop="project_address" show-overflow-tooltip /> <el-table-column label="项目所在地" prop="project_address" width="94" show-overflow-tooltip />
<el-table-column label="项目类型" prop="project_type" show-overflow-tooltip /> <el-table-column label="项目类型" prop="project_type" show-overflow-tooltip />
<el-table-column label="战略意义" prop="strategic_significance" show-overflow-tooltip /> <el-table-column label="战略意义" prop="strategic_significance" show-overflow-tooltip />
<el-table-column label="所属行业" prop="industry" show-overflow-tooltip /> <el-table-column label="所属行业" prop="industry" show-overflow-tooltip />
@ -136,6 +135,10 @@ const showEdit = ref(false)
const showDtail = ref(false) const showDtail = ref(false)
const test = (column) => {
console.log(column, 'column')
return column.column.label
}