add
This commit is contained in:
parent
7d4b2d5979
commit
944a8f37fb
11
src/App.vue
11
src/App.vue
@ -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>
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user