From 7ada8888d77674a03a226c3d8894475f188b2cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=BB=BA=E9=9B=84?= <jsonwu@qq.com>
Date: Tue, 9 Apr 2024 11:19:16 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common-vue3                                   |   2 +-
 .../component/classifyUpdateDialog.vue        |  64 ++++++++++
 src/views/supplier/component/updateDialog.vue | 117 ++++++++++--------
 src/views/supplier/index.vue                  |  28 ++++-
 src/views/supplier/mockData.ts                |  14 ++-
 src/views/supplier/types.ts                   |   2 +
 6 files changed, 171 insertions(+), 56 deletions(-)
 create mode 100644 src/views/supplier/component/classifyUpdateDialog.vue

diff --git a/common-vue3 b/common-vue3
index 80df44c..fdaf57a 160000
--- a/common-vue3
+++ b/common-vue3
@@ -1 +1 @@
-Subproject commit 80df44c74f019217741217a12f9955faf08da497
+Subproject commit fdaf57a038e1c12527ed873b8ecdfdfa8a40a735
diff --git a/src/views/supplier/component/classifyUpdateDialog.vue b/src/views/supplier/component/classifyUpdateDialog.vue
new file mode 100644
index 0000000..81ffc5c
--- /dev/null
+++ b/src/views/supplier/component/classifyUpdateDialog.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+defineOptions({
+  // 供应商分类修改、新增弹窗
+  name: "ClassifyUpdateDialog"
+})
+
+const  dialogVisible = defineModel({ default: false })
+
+const formData = reactive({
+  level: '2323',
+  code: '222',
+  name: '梅州市华禧商贸有限公司',
+  simpleCode: 'MZHSGA',
+});
+
+const emit = defineEmits(['confirm', 'close']);
+
+const confirm = () => {
+  emit('confirm');
+  dialogVisible.value = false;
+}
+
+const close = () => {
+  emit('close');
+  dialogVisible.value = false;
+}
+
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" title="分类编辑" width="800">
+    <div class="wrap">
+      <el-form style="max-width: 400px;margin: 0 auto" ref="formRef" :model="formData" label-width="60px" label-position="right">
+        <el-form-item prop="level" label="上级">
+          <el-input v-model="formData.level" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="code" label="编码">
+          <div class="flex">
+            <span style="margin-right: 15px;">308</span>
+            <el-input v-model="formData.code" placeholder="请输入" />
+          </div>
+        </el-form-item>
+        <el-form-item prop="name" label="名称">
+          <el-input v-model="formData.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="password" label="简码">
+          <el-input v-model="formData.simpleCode" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="confirm">
+          确定
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/supplier/component/updateDialog.vue b/src/views/supplier/component/updateDialog.vue
index f5872da..40f97d5 100644
--- a/src/views/supplier/component/updateDialog.vue
+++ b/src/views/supplier/component/updateDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  // 命名当前组件
+  // 供应商修改、新增弹窗
   name: "UpdateDialog"
 })
 
@@ -9,9 +9,24 @@ import { reactive } from 'vue'
 const  dialogVisible = defineModel({ default: false })
 
 const formData = reactive({
-  username: '2323',
-  password: '222',
-  id: '11',
+  level: '2323',
+  name: "产品A",
+  code: "001",
+  shortCode: "PA",
+  // type: "电子产品",
+  permitNumber: "121323",
+  permitExpiryDate: "2025年12月31日",
+  licenseNumber: "许可证123",
+  licenseExpiryDate: "2025年12月31日",
+  address: "123号主街",
+  phone: "+1234567890",
+  taxRegistrationNumber: "税务登记号123",
+  bankName: "美国银行",
+  accountNumber: "987654321",
+  contactPerson: "张三",
+  creditLimit: "5000",
+  creationDate: "2024年04月07日",
+  usageStatus: "活跃",
   type: [],
 });
 
@@ -37,20 +52,20 @@ const close = () => {
       <el-tabs type="border-card">
         <el-tab-pane label="常规信息">
           <el-form style="max-width: 400px;margin: 0 auto" ref="formRef" :model="formData" label-width="60px" label-position="right">
-            <el-form-item prop="username" label="上级">
-              <el-input v-model="formData.username" placeholder="请输入" />
+            <el-form-item prop="level" label="上级">
+              <el-input v-model="formData.level" placeholder="请输入" />
             </el-form-item>
-            <el-form-item prop="password" label="编码">
+            <el-form-item prop="code" label="编码">
               <div class="flex">
                 <span style="margin-right: 15px;">30858</span>
-                <el-input v-model="formData.password" placeholder="请输入" />
+                <el-input v-model="formData.code" placeholder="请输入" />
               </div>
             </el-form-item>
             <el-form-item prop="name" label="名称">
-              <el-input v-model="formData.password" placeholder="请输入" />
+              <el-input v-model="formData.name" placeholder="请输入" />
             </el-form-item>
-            <el-form-item prop="password" label="简码">
-              <el-input v-model="formData.password" placeholder="请输入" />
+            <el-form-item prop="shortCode" label="简码">
+              <el-input v-model="formData.shortCode" placeholder="请输入" />
             </el-form-item>
             <el-form-item>
               <el-checkbox-group v-model="formData.type">
@@ -76,65 +91,65 @@ const close = () => {
         <el-tab-pane label="附加信息">
           <el-form ref="formRef" style="max-width: 80%;margin: 0 auto" :model="formData" label-width="100px" label-position="right">
             <div class="flex j-s-b" style="width: 100%">
-              <el-form-item prop="username" label="账号">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="accountNumber" label="账号">
+                <el-input v-model="formData.accountNumber" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="password" label="税务登记号">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="taxRegistrationNumber" label="税务登记号">
+                <el-input v-model="formData.taxRegistrationNumber" placeholder="请输入" />
               </el-form-item>
             </div>
 
             <div class="flex j-s-b" style="width: 100%">
-              <el-form-item prop="username" label="联系人">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="contactPerson" label="联系人">
+                <el-input v-model="formData.contactPerson" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="password" label="电话">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="phone" label="电话">
+                <el-input v-model="formData.phone" placeholder="请输入" />
               </el-form-item>
             </div>
 
             <div class="flex j-s-b" style="width: 100%">
-              <el-form-item prop="username" label="许可证号">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="licenseNumber" label="许可证号">
+                <el-input v-model="formData.licenseNumber" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="password" label="许可证效期">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="licenseExpiryDate" label="许可证效期">
+                <el-input v-model="formData.licenseExpiryDate" placeholder="请输入" />
               </el-form-item>
             </div>
 
             <div class="flex j-s-b" style="width: 100%">
-              <el-form-item prop="username" label="执照号">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="permitNumber" label="执照号">
+                <el-input v-model="formData.permitExpiryDate" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="password" label="执照效期">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="permitExpiryDate" label="执照效期">
+                <el-input v-model="formData.permitExpiryDate" placeholder="请输入" />
               </el-form-item>
             </div>
 
             <div class="flex j-s-b" style="width: 100%">
-              <el-form-item prop="username" label="授权号">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="name" label="授权号">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="password" label="授权期">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="name" label="授权期">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
             </div>
 
             <div class="flex j-s-b" style="width: 100%">
-              <el-form-item prop="username" label="信用期">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="name" label="信用期">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="password" label="信用额">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="creditLimit" label="信用额">
+                <el-input v-model="formData.creditLimit" placeholder="请输入" />
               </el-form-item>
             </div>
 
-            <el-form-item prop="password" label="开户银行">
-              <el-input v-model="formData.password" placeholder="请输入" />
+            <el-form-item prop="bankName" label="开户银行">
+              <el-input v-model="formData.bankName" placeholder="请输入" />
             </el-form-item>
 
-            <el-form-item prop="password" label="地址">
-              <el-input v-model="formData.password" placeholder="请输入" />
+            <el-form-item prop="address" label="地址">
+              <el-input v-model="formData.address" placeholder="请输入" />
             </el-form-item>
           </el-form>
         </el-tab-pane>
@@ -142,27 +157,27 @@ const close = () => {
           <el-form ref="formRef" :model="formData" label-width="70px" label-position="right">
             <div>销售人员委托书信息</div>
             <div class="flex">
-              <el-form-item prop="username" label="姓名">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="name" label="姓名">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="username" label="日期">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="name" label="日期">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
             </div>
             <div>质量认证信息</div>
             <div class="flex">
-              <el-form-item prop="password" label="证号">
-                <el-input v-model="formData.password" placeholder="请输入" />
+              <el-form-item prop="name" label="证号">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
-              <el-form-item prop="username" label="日期">
-                <el-input v-model="formData.username" placeholder="请输入" />
+              <el-form-item prop="name" label="日期">
+                <el-input v-model="formData.name" placeholder="请输入" />
               </el-form-item>
             </div>
-            <el-form-item prop="username" label="首营品种">
-              <el-input v-model="formData.username" placeholder="请输入" />
+            <el-form-item prop="name" label="首营品种">
+              <el-input v-model="formData.name" placeholder="请输入" />
             </el-form-item>
-            <el-form-item prop="username" label="备注">
-              <el-input v-model="formData.username" placeholder="请输入" />
+            <el-form-item prop="name" label="备注">
+              <el-input v-model="formData.name" placeholder="请输入" />
             </el-form-item>
           </el-form>
         </el-tab-pane>
diff --git a/src/views/supplier/index.vue b/src/views/supplier/index.vue
index 7bd2a4b..1140043 100644
--- a/src/views/supplier/index.vue
+++ b/src/views/supplier/index.vue
@@ -5,7 +5,7 @@
         <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.ADD_CLASSIFY)">增加分类</el-button>
         <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.UPDATE_CLASSIFY)">修改分类</el-button>
         <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.DEL_CLASSIFY)" type="danger">删除分类</el-button>
-        <el-button :disabled="isDisabled" @click="btnClick(BtnText.ADD)">增加</el-button>
+        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.ADD)">增加</el-button>
         <el-button :disabled="isDisabled" @click="btnClick(BtnText.UPDATE)">修改</el-button>
         <el-button :disabled="isDisabled" @click="btnClick(BtnText.DELETE)" type="danger">删除</el-button>
         <el-button :disabled="isDisabled" @click="btnClick(BtnText.START)">启用</el-button>
@@ -37,15 +37,18 @@
       </div>
 
       <update-dialog v-model="dialogVisible"></update-dialog>
+
+      <classify-update-dialog v-model="classifyVisible"></classify-update-dialog>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import { supplierList, tableColumnList, treeData} from "./mockData.ts";
-import {BtnText, SupplierTableData} from './types.ts'
+import { BtnText, SupplierTableData } from './types.ts'
 import { ElTable, ElMessageBox } from 'element-plus'
 import updateDialog from "./component/updateDialog.vue";
+import ClassifyUpdateDialog from "@/views/supplier/component/classifyUpdateDialog.vue";
 
 defineOptions({
   // 命名当前组件
@@ -75,6 +78,8 @@ const handleNodeClick = (data: Tree) => {
 
 const dialogVisible = ref(false);
 
+const classifyVisible = ref(false);
+
 // 按钮操作事件
 const btnClick = (btnName: BtnText) => {
   console.log(`当前点击事件：${BtnText[btnName]}`)
@@ -82,10 +87,13 @@ const btnClick = (btnName: BtnText) => {
     case BtnText.PRINT:
       break
     case BtnText.ADD_CLASSIFY:
+      classifyVisible.value = true;
       break
     case BtnText.UPDATE_CLASSIFY:
+      classifyVisible.value = true;
       break
     case BtnText.DEL_CLASSIFY:
+      delClassify();
       break
     case BtnText.ADD:
       dialogVisible.value = true;
@@ -138,6 +146,22 @@ const delRow = (done: () => void) => {
       })
 }
 
+// 删除选中供应商分裂
+const delClassify = (done: () => void) => {
+  ElMessageBox.confirm('确认要删除该供应商分类吗?', '警告', {
+    cancelButtonText: '取消',
+    confirmButtonText: '确认',
+    type: 'warning',
+  })
+    .then(() => {
+
+      done()
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/supplier/mockData.ts b/src/views/supplier/mockData.ts
index 2453e0a..2ba0fbf 100644
--- a/src/views/supplier/mockData.ts
+++ b/src/views/supplier/mockData.ts
@@ -65,6 +65,8 @@ export const supplierList: SupplierTableData[] = [
         "code": "001",
         "shortCode": "PA",
         "type": "电子产品",
+        "permitNumber": "121323",
+        "permitExpiryDate": "2025年12月31日",
         "licenseNumber": "许可证123",
         "licenseExpiryDate": "2025年12月31日",
         "address": "123号主街",
@@ -82,6 +84,8 @@ export const supplierList: SupplierTableData[] = [
         "code": "002",
         "shortCode": "PB",
         "type": "服装",
+        "permitNumber": "121323",
+        "permitExpiryDate": "2025年12月31日",
         "licenseNumber": "许可证456",
         "licenseExpiryDate": "2025年11月30日",
         "address": "456号商业街",
@@ -99,6 +103,8 @@ export const supplierList: SupplierTableData[] = [
         "code": "003",
         "shortCode": "PC",
         "type": "食品",
+        "permitNumber": "121323",
+        "permitExpiryDate": "2025年12月31日",
         "licenseNumber": "许可证789",
         "licenseExpiryDate": "2025年10月29日",
         "address": "789号广场",
@@ -116,6 +122,8 @@ export const supplierList: SupplierTableData[] = [
         "code": "004",
         "shortCode": "PD",
         "type": "家具",
+        "permitNumber": "121323",
+        "permitExpiryDate": "2025年12月31日",
         "licenseNumber": "许可证234",
         "licenseExpiryDate": "2025年09月28日",
         "address": "234号街道",
@@ -133,6 +141,8 @@ export const supplierList: SupplierTableData[] = [
         "code": "005",
         "shortCode": "PE",
         "type": "化妆品",
+        "permitNumber": "121323",
+        "permitExpiryDate": "2025年12月31日",
         "licenseNumber": "许可证567",
         "licenseExpiryDate": "2025年08月27日",
         "address": "567号大道",
@@ -174,11 +184,11 @@ export const tableColumnList: TableColumn[] = [
         "label": "许可证有效期"
     },
     {
-        "prop": "licenseNumber",
+        "prop": "permitNumber",
         "label": "执照号"
     },
     {
-        "prop": "licenseExpiryDate",
+        "prop": "permitExpiryDate",
         "label": "执照效期"
     },
     {
diff --git a/src/views/supplier/types.ts b/src/views/supplier/types.ts
index 5800fc2..18960fa 100644
--- a/src/views/supplier/types.ts
+++ b/src/views/supplier/types.ts
@@ -5,6 +5,8 @@ export interface SupplierTableData {
     code: string;
     shortCode: string;
     type: string;
+    permitNumber: string,
+    permitExpiryDate: string,
     licenseNumber: string;
     licenseExpiryDate: string;
     address: string;
-- 
Gitee


From 78d5a1345a28211ce94da094ad261efc6c83629f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=BB=BA=E9=9B=84?= <jsonwu@qq.com>
Date: Tue, 9 Apr 2024 17:41:58 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common-vue3                                   |   2 +-
 src/components.d.ts                           |   4 +
 .../component/updateUserDialog.vue            | 216 ++++++++++++++++++
 src/views/userManagement/index.vue            | 111 +++++++++
 src/views/userManagement/mockData.ts          |  39 ++++
 src/views/userManagement/types.ts             |  12 +
 6 files changed, 383 insertions(+), 1 deletion(-)
 create mode 100644 src/views/userManagement/component/updateUserDialog.vue
 create mode 100644 src/views/userManagement/index.vue
 create mode 100644 src/views/userManagement/mockData.ts
 create mode 100644 src/views/userManagement/types.ts

diff --git a/common-vue3 b/common-vue3
index fdaf57a..e3d617d 160000
--- a/common-vue3
+++ b/common-vue3
@@ -1 +1 @@
-Subproject commit fdaf57a038e1c12527ed873b8ecdfdfa8a40a735
+Subproject commit e3d617d086ee2531f722016835b943f0180a9558
diff --git a/src/components.d.ts b/src/components.d.ts
index 65c66d0..c92d5f0 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,12 +9,15 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImput: typeof import('element-plus/es')['ElImput']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
@@ -23,6 +26,7 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
diff --git a/src/views/userManagement/component/updateUserDialog.vue b/src/views/userManagement/component/updateUserDialog.vue
new file mode 100644
index 0000000..341f1e6
--- /dev/null
+++ b/src/views/userManagement/component/updateUserDialog.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+
+defineOptions({
+  name: "UpdateUserDialog",
+})
+
+const formData = shallowRef({
+  // 工号:
+  employeeId: '',
+  // 用户名:
+  userName: '',
+  // 密码:
+  password: '',
+  // 确认密码:
+  confirmPassword: '',
+  // 拼音码:
+  pinyinCode: '',
+  // 五笔码:
+  wubiCode: '',
+  // 编码:
+  code: '',
+  // 姓名:
+  name: '',
+})
+
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 是否为新增用户，false 为修改用户信息
+  isAdd: {
+    type: Boolean,
+    default: true
+  }
+})
+const dialogVisible = defineModel({ default: false })
+
+const tableData = reactive([
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  },
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  },
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  },
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  },
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  },
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  },
+  {
+    roleName: '住院医生',
+    checked: false,
+  },
+  {
+    roleName: '护士',
+    checked: false,
+  },
+  {
+    roleName: '系统管理员',
+    checked: false,
+  }
+])
+
+watch(dialogVisible, (newVal) => {
+  if (newVal) {
+    console.log('弹窗显示，props.form数据：', props.form)
+    console.log('formData.value:', formData.value);
+    if (props.form.employeeId && !props.isAdd) {
+      formData.value = {
+        ...formData.value,
+        ...props.form
+      }
+    }
+  }
+})
+
+const title = computed(() => {
+  return props.isAdd ? '【新建】用户' : '【修改】用户'
+})
+
+const emit = defineEmits(['confirm', 'close']);
+const confirm = () => {
+  emit('confirm');
+  dialogVisible.value = false;
+}
+const close = () => {
+  emit('close');
+  dialogVisible.value = false;
+}
+</script>
+
+<template>
+<el-dialog destroy-on-close v-model="dialogVisible" :title="title" width="1000">
+  <el-row>
+    <el-col :span="12">
+      <div class="mb5">用户信息</div>
+      <el-form style="max-width: 300px;margin: 0 auto" ref="formRef" :model="formData" label-width="80px" label-position="right">
+        <el-form-item prop="employeeId" label="工号">
+          <el-input v-model="formData.employeeId" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="userName" label="用户名">
+          <el-input v-model="formData.userName" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="password" label="密码">
+          <el-input v-model="formData.password" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="confirmPassword" label="确认密码">
+          <el-input v-model="formData.confirmPassword" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="pinyinCode" label="拼音码">
+          <el-input v-model="formData.pinyinCode" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="wubiCode" label="五笔码">
+          <el-input v-model="formData.wubiCode" placeholder="请输入" />
+        </el-form-item>
+        <div>对应人员</div>
+        <el-form-item prop="code" label="编码">
+          <el-input v-model="formData.code" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="name" label="姓名">
+          <el-input v-model="formData.name" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <el-col :span="12">
+      <div class="mb5">角色授权[选择该用户可充当的角色]</div>
+      <el-table :data="tableData" max-height="400">
+        <el-table-column prop="roleName" label="角色名称"></el-table-column>
+        <el-table-column label="选择" width="100">
+          <template #default="scope">
+            <div class="flex ac">
+              <el-checkbox v-model="scope.row.checked" />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+
+  <template #footer>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="confirm">
+        确定
+      </el-button>
+      <el-button @click="close">取消</el-button>
+    </div>
+  </template>
+</el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/userManagement/index.vue b/src/views/userManagement/index.vue
new file mode 100644
index 0000000..5d778a2
--- /dev/null
+++ b/src/views/userManagement/index.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { userTableList, tableColumnList } from "./mockData.ts";
+import { UserTableData } from "./types.ts";
+import { ElTable, ElMessageBox } from 'element-plus'
+import UpdateUserDialog from "@/views/userManagement/component/updateUserDialog.vue";
+
+defineOptions({
+  // 用户管理
+  name: 'UserManagement',
+})
+
+
+const dialogVisible = ref(false);
+const searchVal = ref('');
+const isAdd = ref(true);
+
+const tableData = ref(userTableList)
+
+// 当前选择的行数据
+const currentRow = ref()
+// 表格的ref对象
+const tableRef = ref<InstanceType<typeof ElTable>>()
+// 表格操作按钮禁用状态
+const isDisabled = computed(() => {
+  return !currentRow.value
+})
+
+const handleCurrentChange = (row: UserTableData | undefined) => {
+  currentRow.value = row
+  tableRef.value!.setCurrentRow(row)
+  console.log(`当前选择的行:`, row)
+}
+
+const addUser = () => {
+  dialogVisible.value = true;
+  isAdd.value = true;
+}
+
+const updateUser = () => {
+  dialogVisible.value = true;
+  isAdd.value = false;
+}
+
+// 删除选中供应商分裂
+const delUser = (done: () => void) => {
+  ElMessageBox.confirm('确认要删除该供应用户吗?', '警告', {
+    cancelButtonText: '取消',
+    confirmButtonText: '确认',
+    type: 'warning',
+  })
+    .then(() => {
+      done()
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+
+</script>
+
+<template>
+  <update-user-dialog v-model="dialogVisible" :form="currentRow" :isAdd="isAdd"></update-user-dialog>
+
+<div class="userManagement">
+  <div class="flex pb10">
+    <div class="flex ac">
+      <div class="mr10">姓名或拼音码</div>
+      <el-input class="flex-1" v-model="searchVal"></el-input>
+      <el-button class="ml10">查找</el-button>
+    </div>
+    <el-button class="ml25" @click="addUser">新增用户</el-button>
+    <el-button :disabled="isDisabled" @click="updateUser">修改用户</el-button>
+    <el-button :disabled="isDisabled" @click="delUser" type="danger">删除用户</el-button>
+    <el-button :disabled="isDisabled" type="danger">禁用用户</el-button>
+    <el-button :disabled="isDisabled">重置用户密码</el-button>
+  </div>
+
+  <el-row>
+    <el-col :span="16">
+      <div class="table">
+        <el-table
+          ref="tableRef"
+          highlight-current-row
+          @current-change="handleCurrentChange"
+          :data="tableData" style="width: 100%">
+          <el-table-column v-for="column in tableColumnList" :prop="column.prop" :label="column.label"/>
+        </el-table>
+      </div>
+    </el-col>
+    <el-col :span="8">
+      <!-- 角色列表  -->
+      <div class="roleList">
+        <el-row>
+          <el-col  v-for="item in 7" :span="6">
+              <div class="flex flex-column ac mb5">
+                <svg style="font-size: 30px;" class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-quanxian"></use>
+                </svg>
+                <span class="mt5">系统管理员{{item}}</span>
+              </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-col>
+  </el-row>
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/userManagement/mockData.ts b/src/views/userManagement/mockData.ts
new file mode 100644
index 0000000..70e255b
--- /dev/null
+++ b/src/views/userManagement/mockData.ts
@@ -0,0 +1,39 @@
+import { UserTableData, TableColumn} from './types.ts'
+
+// 表格数据
+export const userTableList: UserTableData[] = [
+    { userName: '用户1', employeeId: '工号001', personnelID: '编号001', name: '张三', userStatus: '活跃' },
+    { userName: '用户2', employeeId: '工号002', personnelID: '编号002', name: '李四', userStatus: '停用' },
+    { userName: '用户3', employeeId: '工号003', personnelID: '编号003', name: '王五', userStatus: '活跃' },
+    { userName: '用户4', employeeId: '工号004', personnelID: '编号004', name: '赵六', userStatus: '停用' },
+    { userName: '用户5', employeeId: '工号005', personnelID: '编号005', name: '钱七', userStatus: '活跃' },
+    { userName: '用户6', employeeId: '工号006', personnelID: '编号006', name: '孙八', userStatus: '停用' },
+    { userName: '用户7', employeeId: '工号007', personnelID: '编号007', name: '周九', userStatus: '活跃' },
+    { userName: '用户8', employeeId: '工号008', personnelID: '编号008', name: '吴十', userStatus: '停用' },
+    { userName: '用户9', employeeId: '工号009', personnelID: '编号009', name: '郑十一', userStatus: '活跃' },
+    { userName: '用户10', employeeId: '工号010', personnelID: '编号010', name: '周十二', userStatus: '停用' }
+]
+
+// 表格列参数
+export const tableColumnList: TableColumn[] = [
+    {
+        "prop": "userName",
+        "label": "用户名"
+    },
+    {
+        "prop": "employeeId",
+        "label": "工号"
+    },
+    {
+        "prop": "personnelID",
+        "label": "人员编号"
+    },
+    {
+        "prop": "name",
+        "label": "姓名"
+    },
+    {
+        "prop": "userStatus",
+        "label": "用户状态"
+    }
+]
diff --git a/src/views/userManagement/types.ts b/src/views/userManagement/types.ts
new file mode 100644
index 0000000..cdaf918
--- /dev/null
+++ b/src/views/userManagement/types.ts
@@ -0,0 +1,12 @@
+export interface UserTableData {
+    userName: string;
+    employeeId: string;
+    personnelID: string;
+    name: string;
+    userStatus: string,
+}
+
+export interface TableColumn {
+    prop: string;
+    label: string;
+}
-- 
Gitee