fix:表格组件优化

src/components/Table/index.vue

@@ -2,7 +2,10 @@
 <template>
 	<div class="container">
 		<div class="table_box">
-			<el-table ref="multipleTableRef" :data="props.tableData" style="width: 100%">
+      <div class="table-title-btn">
+        <slot name="table-title-btn"></slot>
+      </div>
+			<el-table ref="multipleTableRef"  :header-cell-style="{'background-color': '#f2f2f2'}" :data="props.tableData" style="width: 100%">
 				<el-table-column type="selection" v-if="showSelect" :selectable="selectable" width="55" />
 				
 				<el-table-column v-if="showIndex" type="index" label="序号" width="55" />
@@ -74,19 +77,15 @@
 	import { defineProps, ref, onMounted,defineEmits  } from "vue";
 	import type { TableInstance } from "element-plus";
  
-	// interface TableRow {
-	// 	Date: string;
-	// 	Name: string;
-	// 	Organization: string;
-	// 	_edit?: boolean;
-	// 	Tag: string;
-	// }
+	interface TableRow {
+		[key: string]: any; 
+	}
     interface TagTypes{
         [key:string]:string;
     }
     const emit = defineEmits(['getList']);
 	const props = defineProps<{
-		tableData: Array<[]>;
+		tableData: Array<TableRow>;
 		columns: {
 			prop: string;
 			label: string;
@@ -148,6 +147,9 @@
 	const handleCancle = (scope: { row: TableRow }) => {
 		scope.row._edit = false;
 	};
+  const headClass= (scope: { row: TableRow }) =>  {
+      // return 'background:#F8F8F9'
+    }
 </script>
 <style lang="scss" scoped>
 	.container {
@@ -157,7 +159,7 @@
 		display: flex;
 		flex-direction: column;
 	}
-	.table_box {
+ .table_box {
 		flex: 1;
 		margin-bottom: 10px;
 		overflow-y: auto;
@@ -168,5 +170,22 @@
 				margin: 5px 0;
 			}
 		}
+    :deep(.cell){
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .table-title-btn {
+      margin-bottom: 20px;
+      :deep(.el-button){
+        margin-right: 20px;
+      }
+    }
+    
 	}
+  .page_box{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
 </style>

src/views/memberManage/index.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="member">
-    <el-form label-position="left" label-width="auto" >
-        <el-row :gutter="20">
-            <el-col :span="6">
-                <el-form-item label="成员信息">
-                    <el-input
-                        v-model="formAccessibility.firstName"
-                     
-                        placeholder="输入姓名，手机号，工号查询"
-                    />
-
-                </el-form-item>
-            </el-col>
-            <el-col :span="6">
-                <el-form-item label="状态">
-                    <el-select
-                        v-model="value"
-                        placeholder="成员状态"
-                        
-                        style="width: 240px"
-                        >
-                        <el-option
-                            v-for="item in options"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                        </el-select>
-
-                </el-form-item>
-            </el-col>
-            <el-col :span="4">
-                <el-form-item label="">
-                    <el-button type="primary">查询</el-button>
-                    <el-button type="primary" plain>重置</el-button>
-
-                </el-form-item>
-            </el-col>
-        </el-row>
-    
-    </el-form>
-    <div>
-        <Table 
-            :tableData="tableData" 
-            :columns="columns" 
-            :showIndex="false" 
-            :showSelect="true" 
-            :pageInfo="pageInfo" 
-            @getList="getList">
-            <template v-slot:operation="scope">
-                <el-button type="primary" @click="editor(scope)"> 编辑 </el-button>
-				<el-button type="danger" @click="handleCancle(scope)"> 删除 </el-button>
-            </template>
-            <template v-slot:search="scope">
-                {{ scope.slotData.label }}
-            </template>
-            
-
-        </Table >
-    </div>
-  </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, reactive} from 'vue'
-// import universalTable from "../"
-const formAccessibility = reactive({
-  fullName: '',
-  firstName: '',
-  lastName: '',
-})
-interface PageInfo {
-    pageNum: number;
-    pageSize: number;
-    sizes: number[];
-    total: number;
-}
-const value = ref('')
-
-const options = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  },
-]
-// import Select from "@/components/select/selectMain.vue";
-// import TestTable from "@/components/Table/index.vue";
-	const tableData = [
-		{
-			size: "2024/12/1",
-			Name: "Dec",
-			Phone: "13333333333",
-			role: "公司",
-            status:"123"
-
-		},
-		
-	];
-	const columns = [	
-		
-		{ prop: "Name", label: "姓名", },
-		{ prop: "Phone", label: "手机号", },
-		{ prop: "size", label: "工号", },
-		{ prop: "role", label: "角色", },
-		{ prop: "status", label: "状态", },
-		
-		// { 
-        //     prop: "operation", label: "operation", width: "280",
-        //     type:'operation', btn:[{
-        //         type:"pramary",
-        //         label:"编辑"
-        //     }]
-        // },
-		
-    ]
-    const pageInfo={
-        pageNum:1,
-        pageSize:10,
-        sizes:[10,20,30,40,50],
-        total:100,
-    }
-    const getList= (item:PageInfo)=>{
-        pageInfo.pageNum=item.pageNum
-        pageInfo.pageSize=item.pageSize
-    }
-
-</script>
-<style lang='scss' scoped>
-.member{
-    background: #fff;
-    width: 100%;
-    // height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-</style>

src/views/personnel/memberManagement.vue

@@ -1,154 +1,312 @@
 <template>
-    <div class="member">
-      <el-form label-position="left" label-width="auto" >
-          <el-row :gutter="20">
-              <el-col :span="6">
-                  <el-form-item label="成员信息">
-                      <el-input
-                          v-model="formAccessibility.firstName"
-                       
-                          placeholder="输入姓名，手机号，工号查询"
-                      />
-  
-                  </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                  <el-form-item label="状态">
-                      <el-select
-                          v-model="value"
-                          placeholder="成员状态"
-                          
-                          style="width: 240px"
-                          >
-                          <el-option
-                              v-for="item in options"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value"
-                          />
-                          </el-select>
-  
-                  </el-form-item>
-              </el-col>
-              <el-col :span="4">
-                  <el-form-item label="">
-                      <el-button type="primary">查询</el-button>
-                      <el-button type="primary" plain>重置</el-button>
-  
-                  </el-form-item>
-              </el-col>
-          </el-row>
-      
+  <div class="member">
+    <el-form label-position="left" label-width="auto">
+      <el-row :gutter="16">
+        <el-col :span="6">
+          <el-form-item label="成员信息">
+            <el-input
+              v-model="formAccessibility.firstName"
+              placeholder="输入姓名，手机号，工号查询"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select
+              v-model="value"
+              placeholder="成员状态"
+              style="width: 240px"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="">
+            <el-button type="primary">查询</el-button>
+            <el-button type="primary" plain>重置</el-button>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="24">
+          <el-form-item label="">
+            <el-button type="primary" @click="add(ruleFormRef)">
+              <el-icon><Plus /></el-icon>添加成员</el-button
+            >
+         
+          </el-form-item>
+        </el-col> -->
+      </el-row>
+    </el-form>
+   
+      <Table
+        :tableData="tableData"
+        :columns="columns"
+        :showIndex="false"
+        :showSelect="true"
+        :pageInfo="pageInfo"
+        @getList="getList"
+      >
+        <template v-slot:table-title-btn>
+          <el-button type="primary" @click="add(ruleFormRef)">
+              <el-icon><Plus /></el-icon>添加成员</el-button
+            >
+          <el-dropdown placement="bottom-start">
+            <el-button> 批量操作<el-icon class="el-icon--right">
+                <arrow-down />
+              </el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>批量删除</el-dropdown-item>
+                <el-dropdown-item>批量禁用</el-dropdown-item>
+                <el-dropdown-item>批量启用</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+        <template v-slot:operation="scope">
+          <el-button type="primary" link @click="editor(scope)"> 编辑 </el-button>
+          <el-dropdown placement="bottom-start">
+            <span class="el-dropdown-link">
+              更 多
+            
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>删除</el-dropdown-item>
+                <el-dropdown-item>禁用</el-dropdown-item>
+                <el-dropdown-item>启用</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+        <template v-slot:search="scope">
+          {{ scope.slotData.label }}
+        </template>
+      </Table>
+   
+    <el-dialog v-model="dialogVisible" title="基本信息" width="800" draggable>
+      <el-form
+        label-position="top"
+        label-width="auto"
+        :rules="rules"
+        :model="form"
+        ref="ruleFormRef"
+      >
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="name">
+              <el-input
+                v-model.trim="form.name"
+                maxlength="20"
+                placeholder="输入人员姓名"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="phone">
+              <el-input
+                v-model.number.trim="form.phone"
+                maxlength="11"
+                placeholder="输入人员手机号"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="登录密码" prop="password">
+              <el-input
+                v-model.trim="form.password"
+                maxlength="20"
+                placeholder="输入登录密码（8-20位，包含字母和数字）"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色" prop="role">
+              <el-select
+                v-model="form.role"
+                placeholder="选择角色"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-      <div>
-          <Table 
-              :tableData="tableData" 
-              :columns="columns" 
-              :showIndex="false" 
-              :showSelect="true" 
-              :pageInfo="pageInfo" 
-              @getList="getList">
-              <template v-slot:operation="scope">
-                  <el-button type="primary" @click="editor(scope)"> 编辑 </el-button>
-                  <el-button type="danger" @click="handleCancle(scope)"> 删除 </el-button>
-              </template>
-              <template v-slot:search="scope">
-                  {{ scope.slotData.label }}
-              </template>
-              
-  
-          </Table >
-      </div>
-    </div>
-  </template>
-  
-  <script setup lang='ts'>
-  import { ref, reactive} from 'vue'
-  // import universalTable from "../"
-  const formAccessibility = reactive({
-    fullName: '',
-    firstName: '',
-    lastName: '',
-  })
-  interface PageInfo {
-      pageNum: number;
-      pageSize: number;
-      sizes: number[];
-      total: number;
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">
+            保 存
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import type { ComponentSize, FormInstance, FormRules } from "element-plus";
+import { Plus,ArrowDown } from "@element-plus/icons-vue";
+// import universalTable from "../"
+const formAccessibility = reactive({
+  fullName: "",
+  firstName: "",
+  lastName: "",
+  phone: "",
+});
+const ruleFormRef = ref<FormInstance>();
+const form = reactive({
+  name: "",
+  role: "",
+  password: "",
+  phone: "",
+});
+
+interface RuleForm {
+  name: string;
+  phone: string;
+  role: string[];
+  password: string;
+}
+interface PageInfo {
+  pageNum: number;
+  pageSize: number;
+  sizes: number[];
+  total: number;
+}
+const value = ref("");
+const dialogVisible = ref(false);
+const options = [
+  {
+    value: "Option1",
+    label: "Option1",
+  },
+  {
+    value: "Option2",
+    label: "Option2",
+  },
+  {
+    value: "Option3",
+    label: "Option3",
+  },
+  {
+    value: "Option4",
+    label: "Option4",
+  },
+  {
+    value: "Option5",
+    label: "Option5",
+  },
+];
+const validatePhone = (rule: any, value: string, callback: any) => {
+  const reg = /^1[3-9]\d{9}$/;
+  if (!value) {
+    return callback(new Error("手机号码不能为空"));
   }
-  const value = ref('')
-  
-  const options = [
-    {
-      value: 'Option1',
-      label: 'Option1',
-    },
-    {
-      value: 'Option2',
-      label: 'Option2',
-    },
-    {
-      value: 'Option3',
-      label: 'Option3',
-    },
-    {
-      value: 'Option4',
-      label: 'Option4',
-    },
-    {
-      value: 'Option5',
-      label: 'Option5',
-    },
-  ]
-  // import Select from "@/components/select/selectMain.vue";
-  // import TestTable from "@/components/Table/index.vue";
-      const tableData = [
-          {
-              size: "2024/12/1",
-              Name: "Dec",
-              Phone: "13333333333",
-              role: "公司",
-              status:"123"
-  
-          },
-          
-      ];
-      const columns = [	
-          
-          { prop: "Name", label: "姓名", },
-          { prop: "Phone", label: "手机号", },
-          { prop: "size", label: "工号", },
-          { prop: "role", label: "角色", },
-          { prop: "status", label: "状态", },
-          
-          // { 
-          //     prop: "operation", label: "operation", width: "280",
-          //     type:'operation', btn:[{
-          //         type:"pramary",
-          //         label:"编辑"
-          //     }]
-          // },
-          
-      ]
-      const pageInfo={
-          pageNum:1,
-          pageSize:10,
-          sizes:[10,20,30,40,50],
-          total:100,
-      }
-      const getList= (item:PageInfo)=>{
-          pageInfo.pageNum=item.pageNum
-          pageInfo.pageSize=item.pageSize
-      }
-  
-  </script>
-  <style lang='scss' scoped>
-  .member{
-      background: #fff;
-      width: 100%;
-      // height: 100%;
-      padding: 20px;
-      box-sizing: border-box;
+  if (!reg.test(value)) {
+    return callback(new Error("请输入正确的手机号码"));
   }
-  
-  </style>
+  return callback();
+};
+const validatePassword = (rule: any, value: string, callback: any) => {
+  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
+  if (!value) {
+    return callback(new Error("密码不能为空"));
+  }
+  if (!reg.test(value)) {
+    return callback(new Error("请输入正确的密码格式"));
+  }
+  return callback();
+};
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: "请输入成员姓名", trigger: "blur" },
+    { min: 1, max: 20, message: "请输入成员姓名", trigger: "blur" },
+  ],
+  phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
+  password: [{ required: true, validator: validatePassword, trigger: "blur" }],
+  role: [{ required: true, message: "请选择角色", trigger: "change" }],
+});
+// import Select from "@/components/select/selectMain.vue";
+// import TestTable from "@/components/Table/index.vue";
+const tableData = [
+  {
+    size: "2024/12/1",
+    Name: "Dec",
+    Phone: "13333333333",
+    role: "公司",
+    status: "123",
+  },
+];
+const columns = [
+  { prop: "Name", label: "姓名" },
+  { prop: "Phone", label: "手机号" },
+  { prop: "size", label: "工号" },
+  { prop: "role", label: "角色" },
+  { prop: "status", label: "状态" },
+
+  // {
+  //     prop: "operation", label: "operation", width: "280",
+  //     type:'operation', btn:[{
+  //         type:"pramary",
+  //         label:"编辑"
+  //     }]
+  // },
+];
+const pageInfo = {
+  pageNum: 1,
+  pageSize: 10,
+  sizes: [10, 20, 30, 40, 50],
+  total: 100,
+};
+const getList = (item: PageInfo) => {
+  pageInfo.pageNum = item.pageNum;
+  pageInfo.pageSize = item.pageSize;
+};
+const editor = (item: any) => {
+  dialogVisible.value = true;
+  // pageInfo.pageNum=item.pageNum
+  // pageInfo.pageSize=item.pageSize
+};
+const add = (formEl: FormInstance | undefined) => {
+  dialogVisible.value = true;
+  if (!formEl) return;
+  formEl.resetFields();
+  // pageInfo.pageNum=item.pageNum
+  // pageInfo.pageSize=item.pageSize
+};
+
+const operationMany = (item: any) => {
+  // pageInfo.pageNum=item.pageNum
+  // pageInfo.pageSize=item.pageSize
+};
+</script>
+<style lang="scss" scoped>
+.member {
+  background: #fff;
+  width: 100%;
+  // height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+:deep(.el-dropdown-link) {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+  margin-left: 15px;
+}
+</style>