|
|
@@ -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>
|
刘恒