From 944a8f37fbc9dde014e6b02b7ec68d020bb721ad Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Sat, 23 Mar 2024 10:48:54 +0800
Subject: [PATCH] add
---
src/App.vue | 11 ++-
src/hooks/usePaging.ts | 142 ++++++++++++++++-------------
src/views/account/login.vue | 19 +---
src/views/custom/index.vue | 13 +--
src/views/custom_service/index.vue | 35 ++++---
src/views/project/index.vue | 19 ++--
6 files changed, 124 insertions(+), 115 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 28c9f49..ba1d04c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,4 +58,13 @@ watch(
</el-config-provider>
</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>
diff --git a/src/hooks/usePaging.ts b/src/hooks/usePaging.ts
index 421f40c..faea5b3 100644
--- a/src/hooks/usePaging.ts
+++ b/src/hooks/usePaging.ts
@@ -1,72 +1,86 @@
-import { reactive, toRaw } from 'vue'
+import { reactive, toRaw } from "vue";
// 分页钩子函数
interface Options {
- page?: number
- size?: number
- fetchFun: (_arg: any) => Promise<any>
- params?: Record<any, any>
- firstLoading?: boolean
+ page?: number;
+ size?: number;
+ fetchFun: (_arg: any) => Promise<any>;
+ params?: Record<any, any>;
+ firstLoading?: boolean;
+}
+
+interface Icolumn {
+ column: { label: String; width: Number; property: string };
}
export function usePaging(options: Options) {
- const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options
- // 记录分页初始参数
- const paramsInit: Record<any, any> = Object.assign({}, toRaw(params))
- // 分页数据
- const pager = reactive({
- page,
- size,
- loading: firstLoading,
- count: 0,
- lists: [] as any[],
- extend: {} as Record<string, any>,
- calcWidth:(value:string)=>{
- let list = pager.lists.map(item => item[value])
- const maxLength = list.reduce((max, str) => {
- return Math.max(max, str.length);
- }, 0);
-
- return (maxLength*14+24)
- }
+ const {
+ page = 1,
+ size = 15,
+ fetchFun,
+ params = {},
+ firstLoading = false,
+ } = options;
+ // 记录分页初始参数
+ const paramsInit: Record<any, any> = Object.assign({}, toRaw(params));
+ // 分页数据
+ const pager = reactive({
+ page,
+ size,
+ loading: firstLoading,
+ count: 0,
+ lists: [] as any[],
+ extend: {} as Record<string, any>,
+ 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,
})
- // 请求分页接口
- const getLists = () => {
- pager.loading = true
- return fetchFun({
- page_no: pager.page,
- page_size: pager.size,
- ...params
- })
- .then((res: any) => {
- pager.count = res?.count
- pager.lists = res?.lists
- pager.extend = res?.extend
- return Promise.resolve(res)
- })
- .catch((err: any) => {
- return Promise.reject(err)
- })
- .finally(() => {
- pager.loading = false
- })
- }
- // 重置为第一页
- const resetPage = () => {
- pager.page = 1
- getLists()
- }
- // 重置参数
- const resetParams = () => {
- Object.keys(paramsInit).forEach((item) => {
- params[item] = paramsInit[item]
- })
- getLists()
- }
- return {
- pager,
- getLists,
- resetParams,
- resetPage
- }
+ .then((res: any) => {
+ pager.count = res?.count;
+ pager.lists = res?.lists;
+ pager.extend = res?.extend;
+ return Promise.resolve(res);
+ })
+ .catch((err: any) => {
+ return Promise.reject(err);
+ })
+ .finally(() => {
+ pager.loading = false;
+ });
+ };
+ // 重置为第一页
+ const resetPage = () => {
+ pager.page = 1;
+ getLists();
+ };
+ // 重置参数
+ const resetParams = () => {
+ Object.keys(paramsInit).forEach((item) => {
+ params[item] = paramsInit[item];
+ });
+ getLists();
+ };
+ return {
+ pager,
+ getLists,
+ resetParams,
+ resetPage,
+ };
}
diff --git a/src/views/account/login.vue b/src/views/account/login.vue
index 74b1aeb..f665ef7 100644
--- a/src/views/account/login.vue
+++ b/src/views/account/login.vue
@@ -6,29 +6,19 @@
<image-contain :src="config.login_image" :width="400" height="100%" />
</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>
<el-form ref="formRef" :model="formData" size="large" :rules="rules">
<el-form-item prop="account">
- <el-input
- v-model="formData.account"
- placeholder="请输入账号"
- @keyup.enter="handleEnter"
- >
+ <el-input v-model="formData.account" placeholder="请输入账号" @keyup.enter="handleEnter">
<template #prepend>
<icon name="el-icon-User" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
- <el-input
- ref="passwordRef"
- v-model="formData.password"
- show-password
- placeholder="请输入密码"
- @keyup.enter="handleLogin"
- >
+ <el-input ref="passwordRef" v-model="formData.password" show-password placeholder="请输入密码"
+ @keyup.enter="handleLogin">
<template #prepend>
<icon name="el-icon-Lock" />
</template>
@@ -123,6 +113,7 @@ onMounted(() => {
.login {
background-image: url('./images/login_bg.png');
@apply min-h-screen bg-no-repeat bg-center bg-cover;
+
.login-card {
height: 400px;
}
diff --git a/src/views/custom/index.vue b/src/views/custom/index.vue
index 06c10cb..41afe9b 100644
--- a/src/views/custom/index.vue
+++ b/src/views/custom/index.vue
@@ -39,46 +39,39 @@
</template>
新增
</el-button>
- <el-button v-perms="['custom.custom/delete']" :disabled="!selectData.length"
- @click="handleDelete(selectData)">
+ <el-button v-perms="['custom.custom/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
删除
</el-button>
<div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" 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">
-
<template #default="{ row }">
<dict-value :options="dictData.custom_type" :value="row.custom_type" />
</template>
</el-table-column>
-
<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_position" 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="follow_total" 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="create_time" show-overflow-tooltip />
<el-table-column label="操作" width="160" fixed="right">
-
<template #default="{ row }">
<el-button v-perms="['custom.custom/edit']" type="primary" link @click="handleEdit(row)">
编辑
</el-button>
- <el-button v-perms="['custom.custom/delete']" type="danger" link
- @click="handleDelete(row.id)">
+ <el-button v-perms="['custom.custom/delete']" type="danger" link @click="handleDelete(row.id)">
删除
</el-button>
<el-button v-perms="['custom.custom/detail']" link @click="handleDetail(row)">
详情
</el-button>
-
</template>
</el-table-column>
</el-table>
diff --git a/src/views/custom_service/index.vue b/src/views/custom_service/index.vue
index c6c7b4e..54f3454 100644
--- a/src/views/custom_service/index.vue
+++ b/src/views/custom_service/index.vue
@@ -58,22 +58,22 @@
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" 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="project_name" :width="pager.calcWidth('project_name')" />
- <el-table-column label="项目编码" prop="project_code" :width="pager.calcWidth('project_code')" />
- <el-table-column label="合同编号" prop="contract_code" :width="pager.calcWidth('contract_code')" />
- <el-table-column label="投诉主题" prop="name" :width="pager.calcWidth('name')" />
- <el-table-column label="日期" prop="date" />
- <el-table-column label="接待人" prop="receiver" />
- <el-table-column label="分类" prop="classification" />
- <el-table-column label="投诉人" prop="custom_master_name" />
- <el-table-column label="联系电话" prop="custom_master_phone" />
- <el-table-column label="处理结果" prop="processing_result" />
- <el-table-column label="紧急程度" prop="urgency" />
- <el-table-column label="指定处理人" prop="processed_user" width="105" />
- <el-table-column label="问题是否解决" prop="is_solve_text" width="110" />
- <el-table-column label="完成日期" prop="done_date" />
- <el-table-column label="评分" prop="score" />
+ <el-table-column label="客户名称" prop="custom_name" />
+ <el-table-column label="项目名称" prop="project_name":render-header="pager.calcWidth" />
+ <el-table-column label="项目编码" prop="project_code" :render-header="pager.calcWidth" />
+ <el-table-column label="合同编号" prop="contract_code" :render-header="pager.calcWidth" />
+ <el-table-column label="投诉主题" prop="name" show-overflow-tooltip />
+ <el-table-column label="日期" prop="date" show-overflow-tooltip />
+ <el-table-column label="接待人" prop="receiver" show-overflow-tooltip />
+ <el-table-column label="分类" prop="classification" show-overflow-tooltip />
+ <el-table-column label="投诉人" prop="custom_master_name" show-overflow-tooltip />
+ <el-table-column label="联系电话" prop="custom_master_phone" show-overflow-tooltip />
+ <el-table-column label="处理结果" prop="processing_result" show-overflow-tooltip />
+ <el-table-column label="紧急程度" prop="urgency" show-overflow-tooltip />
+ <el-table-column label="指定处理人" prop="processed_user" width="105" show-overflow-tooltip />
+ <el-table-column label="问题是否解决" prop="is_solve_text" width="110" show-overflow-tooltip />
+ <el-table-column label="完成日期" prop="done_date" show-overflow-tooltip />
+ <el-table-column label="评分" prop="score" show-overflow-tooltip />
<el-table-column label="操作" width="110" fixed="right">
<template #default="{ row }">
<el-button v-perms="['custom_service.custom_service/solve']" type="primary" link
@@ -88,8 +88,7 @@
@click="handleDelete(row.id)">
删除
</el-button>
- <el-button v-perms="['custom_service.custom_service/detail']" link
- @click="handledetail(row)">
+ <el-button v-perms="['custom_service.custom_service/detail']" link @click="handledetail(row)">
详情
</el-button>
</template>
diff --git a/src/views/project/index.vue b/src/views/project/index.vue
index 4416b3a..48a83e2 100644
--- a/src/views/project/index.vue
+++ b/src/views/project/index.vue
@@ -19,8 +19,8 @@
<el-select class="w-[280px]" v-model="queryParams.strategic_significance" clearable
placeholder="请选择战略意义">
<el-option label="全部" value=""></el-option>
- <el-option v-for="(item, index) in dictData.strategic_significance" :key="index"
- :label="item.name" :value="item.value" />
+ <el-option v-for="(item, index) in dictData.strategic_significance" :key="index" :label="item.name"
+ :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="所属行业" prop="industry">
@@ -45,8 +45,7 @@
</el-select>
</el-form-item>
<el-form-item label="信息来源" prop="information_sources">
- <el-select class="w-[280px]" v-model="queryParams.information_sources" clearable
- placeholder="请选择信息来源">
+ <el-select class="w-[280px]" v-model="queryParams.information_sources" clearable placeholder="请选择信息来源">
<el-option label="全部" value=""></el-option>
<el-option v-for="(item, index) in dictData.information_sources" :key="index" :label="item.name"
:value="item.value" />
@@ -81,11 +80,11 @@
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" 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="project_code" show-overflow-tooltip />
- <el-table-column label="项目名称" prop="name" show-overflow-tooltip />
+ <el-table-column label="客户" prop="custom_name" />
+ <el-table-column label="项目编码" prop="project_code" :render-header="pager.calcWidth" />
+ <el-table-column label="项目名称" prop="name" />
<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="strategic_significance" 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 test = (column) => {
+ console.log(column, 'column')
+ return column.column.label
+}