add

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>

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,
+  };
 }

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;
     }

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>

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>

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
+}