From 43fa37125ef9ce4200928c99e5591822fcb2c881 Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Mon, 30 Dec 2024 13:40:37 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=8A=9F=E8=83=BD=E7=95=8C=E9=9D=A2=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/user/components/user_add.vue | 250 ++++++++++----------
 src/pages/user/index.vue               | 301 +++++++++++++------------
 2 files changed, 292 insertions(+), 259 deletions(-)

diff --git a/src/pages/user/components/user_add.vue b/src/pages/user/components/user_add.vue
index ddcd200..8d92df7 100644
--- a/src/pages/user/components/user_add.vue
+++ b/src/pages/user/components/user_add.vue
@@ -1,117 +1,133 @@
-<template>
-  <div>
-    <a-form-model ref="editUserForm" :rules="rules" :model="temp" :label-col="{ span: 4}" :wrapper-col="{ span: 20 }">
-      <a-form-model-item label="用户名称" prop="id">
-        <a-input v-model="temp.id" placeholder="创建之后不能修改" :disabled="createOption == false" />
-      </a-form-model-item>
-      <a-form-model-item label="登录密码" prop="password">
-        <a-input-password v-model="temp.password" placeholder="请输入登录密码" />
-      </a-form-model-item>
-      <a-form-model-item label="确认密码" prop="confirmPassword" class="mb0">
-        <a-input-password v-model="temp.confirmPassword" placeholder="请输入确认密码" />
-      </a-form-model-item>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-import { addUser, updateUser } from '@/api/user'
-import sha1 from 'sha1'
-import { deepClone, deepCloneV2 } from '@/utils/obj'
-export	default	{
-  props: {
-    rowData: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  data()	{
-    const pwdValidate = (rule, value, callback) => {
-      const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{9,50}$/
-      if (!reg.test(value)) {
-        callback(new Error('密码至少包含大小写字母、数字、特殊字符，长度为9~50'))
-      }
-      callback()
-    }
-    const confirmValidate = (rule, value, callback) => {
-      if (value !== this.temp.password) {
-        callback(new Error('两次密码不一致'))
-      }
-      callback()
-    }
-    return	{
-      rules: {
-        id: [
-          { required: true, message: '用户名称不能为空', trigger: 'blur' },
-          { min: 3, max: 20, message: '用户名称长度为3~20位', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, message: '登录密码不能为空', trigger: 'blur' },
-          { validator: pwdValidate, trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, message: '确认密码不能为空', trigger: 'blur' },
-          { validator: confirmValidate, trigger: 'blur' }
-        ]
-      },
-      temp: {},
-      createOption: true
-    }
-  },
-  watch: {
-    rowData: {
-      handler(val) {
-        this.$nextTick(() => {
-          this.$refs['editUserForm'].clearValidate()
-        })
-        this.temp = deepCloneV2(val)
-        const keys = Object.keys(val)
-        if (keys.length === 0) { // 新增用户
-          this.createOption = true
-        } else {
-          this.createOption = false
-        }
-      },
-      immediate: true
-    }
-  },
-  methods:	{
-    formSubmit() {
-      this.$refs['editUserForm'].validate((valid) => {
-        if (!valid) return false
-        if (this.createOption) this.temp.name = this.temp.id
-        const paramsTemp = Object.assign({}, this.temp)
-        if (paramsTemp.password) {
-          paramsTemp.password = sha1(this.temp.password)
-        }
-        delete paramsTemp.confirmPassword
-        if (this.createOption) {
-          addUser(paramsTemp).then(res => {
-            if (res.code === 200) {
-              this.$notification.success({
-                message: res.msg,
-                duration: 2
-              })
-              this.$refs['editUserForm'].resetFields()
-              this.$emit('on-refresh')
-            }
-          })
-        } else {
-          updateUser(paramsTemp).then(res => {
-            if (res.code === 200) {
-              this.$notification.success({
-                message: res.msg,
-                duration: 2
-              })
-              this.$refs['editUserForm'].resetFields()
-              this.$emit('on-refresh')
-            }
-          })
-        }
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <a-form-model ref="editUserForm" :rules="rules" :model="temp" :label-col="{ span: 4}" :wrapper-col="{ span: 20 }">
+      <a-form-model-item label="用户名称" prop="id">
+        <a-input v-model="temp.id" placeholder="创建之后不能修改" :disabled="createOption == false" />
+      </a-form-model-item>
+      <a-form-model-item :label="pwdLabel" prop="password">
+        <a-input-password v-model="temp.password" :placeholder="'请输入'+pwdLabel" />
+      </a-form-model-item>
+      <a-form-model-item label="确认密码" prop="confirmPassword" class="mb0">
+        <a-input-password v-model="temp.confirmPassword" placeholder="请输入确认密码" />
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { addUser, updateUser } from '@/api/user'
+import sha1 from 'sha1'
+export	default	{
+  props: {
+    rowData: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data()	{
+    const pwdValidate = (rule, value, callback) => {
+      const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{9,50}$/
+      if (!reg.test(value)) {
+        callback(new Error('密码至少包含大小写字母、数字、特殊字符，长度为9~50'))
+      }
+      callback()
+    }
+    const confirmValidate = (rule, value, callback) => {
+      if (value !== this.temp.password) {
+        callback(new Error('两次密码不一致'))
+      }
+      callback()
+    }
+    return	{
+      // 表单校验规则
+      rules: {
+        id: [
+          { required: true, message: '用户名称不能为空', trigger: 'blur' },
+          { min: 3, max: 20, message: '用户名称长度为3~20位', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: 'blur' },
+          { validator: pwdValidate, trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: '确认密码不能为空', trigger: 'blur' },
+          { validator: confirmValidate, trigger: 'blur' }
+        ]
+      },
+      temp: {},
+      createOption: true,
+      pwdLabel: '登录密码'
+    }
+  },
+  watch: {
+    rowData: {
+      handler(val) {
+        // 清空验证信息
+        this.$nextTick(() => {
+          this.$refs['editUserForm'].clearValidate()
+        })
+        // 需要深拷贝，避免编辑不提交影响表格里面的数据
+        this.temp = JSON.parse(JSON.stringify(val))
+        const keys = Object.keys(val)
+        if (keys.length === 0) { // 新增用户
+          this.createOption = true
+          this.pwdLabel = '登录密码'
+        } else { // 编辑用户
+          this.createOption = false
+          this.pwdLabel = '新密码'
+        }
+        this.rules.password[0].message = this.pwdLabel + '不能为空'
+      },
+      immediate: true
+    }
+  },
+  methods:	{
+    formSubmit() {
+      // 检验表单
+      this.$refs['editUserForm'].validate((valid) => {
+        if (!valid) return false
+        // 暂时用户名称和用户昵称一样，后端改动繁琐
+        if (this.createOption) this.temp.name = this.temp.id
+        // 加密密码
+        const paramsTemp = Object.assign({}, this.temp)
+        if (paramsTemp.password) {
+          paramsTemp.password = sha1(this.temp.password)
+        }
+        // 确认密码删除不提交给后端
+        delete paramsTemp.confirmPassword
+        // 需要判断当前操作是【新增】还是【修改】
+        if (this.createOption) {
+          // 新增
+          addUser(paramsTemp).then(res => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              })
+              this.$refs['editUserForm'].resetFields()
+              this.$emit('on-refresh')
+            }
+          })
+        } else {
+          // 修改
+          updateUser(paramsTemp).then(res => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              })
+              this.$refs['editUserForm'].resetFields()
+              this.$emit('on-refresh')
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 247bbd0..8620d7a 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -1,142 +1,159 @@
-<template>
-  <div class="user">
-    <div ref="filter" class="filter">
-      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
-    </div>
-    <a-table
-      :data-source="list"
-      :loading="loading"
-      :columns="columns"
-      :style="{'max-height': tableHeight + 'px' }"
-      :scroll="{x: 1000, y: tableHeight - 60}"
-      :pagination="false"
-      bordered
-      :row-key="(record, index) => index"
-    >
-      <a-tooltip slot="id" slot-scope="text" :title="text" placement="topLeft">
-        <span>{{ text }}</span>
-      </a-tooltip>
-      <template slot="operation" slot-scope="text, record">
-        <a-tooltip title="编辑">
-          <a-button type="link" @click="handleEdit(record)"><a-icon type="edit" /></a-button>
-        </a-tooltip>
-        <a-tooltip title="删除">
-          <a-button type="link" @click="handleDelete(record)"><a-icon type="delete" class="danger" /></a-button>
-        </a-tooltip>
-        <a-tooltip title="解锁">
-          <a-button type="link" :disabled="record.pwdErrorCount === 0" @click="handleUnlock(record)"><a-icon type="unlock" /></a-button>
-        </a-tooltip>
-      </template>
-    </a-table>
-    <a-modal v-model="editUserVisible" :title="title" :mask-closable="false" @keyup.native.enter="handleEditUserOk" @ok="handleEditUserOk">
-      <user-add ref="userAdd" :row-data="rowData" @on-refresh="refreshTable" />
-    </a-modal
-  </div>
-</template>
-
-<script>
-import { getUserList, deleteUser, unlockUser } from '../../api/user'
-import { parseTime } from '../../utils/time'
-import userAdd from './components/user_add.vue'
-export default {
-  components: {
-    userAdd
-  },
-  data() {
-    return {
-      loading: false,
-      tableHeight: '70vh',
-      list: [],
-      rowData: {},
-      editUserVisible: false,
-      columns: [
-        { title: '用户名称', dataIndex: 'id', ellipsis: true, scopedSlots: { customRender: 'id' }},
-        { title: '修改时间', dataIndex: 'modifyTime', ellipsis: true, customRender: (text) => { return parseTime(text) } },
-        { title: '输入密码错误次数', dataIndex: 'pwdErrorCount', ellipsis: true },
-        { title: '输入密码错误时间', dataIndex: 'lastPwdErrorTime', ellipsis: true, customRender: (text) => { if (text === '0') { return '--' } return parseTime(text) } },
-        { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }, width: 200, align: 'center' }
-      ],
-      title: '新增用户'
-    }
-  },
-  created() {
-    this.calcTableHeight()
-    this.loadData()
-  },
-  methods: {
-    calcTableHeight() {
-      this.$nextTick(() => {
-        this.tableHeight = window.innerHeight - this.$refs['filter'].clientHeight - 135
-      })
-    },
-    loadData() {
-      this.list = []
-      this.loading = true
-      getUserList().then(res => {
-        if (res.code === 200) {
-          this.list = res.data
-        }
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    handleAdd() {
-      this.title = '新增用户'
-      this.rowData = {}
-      this.editUserVisible = true
-    },
-    handleEdit(record) {
-      this.title = '编辑用户'
-      this.rowData = Object.assign(record)
-      this.editUserVisible = true
-    },
-    refreshTable() {
-      this.editUserVisible = false
-      this.loadData()
-    },
-    handleEditUserOk() {
-      this.$refs.userAdd.formSubmit()
-    },
-    handleDelete(record) {
-      this.$confirm({
-        title: '系统提示',
-        content: '真的要删除用户么？',
-        okText: '确认',
-        cancelText: '取消',
-        onOk: () => {
-          // 删除
-          deleteUser(record.id).then((res) => {
-            if (res.code === 200) {
-              this.$notification.success({
-                message: res.msg,
-                duration: 2
-              })
-              this.loadData()
-            }
-          })
-        }
-      })
-    },
-    handleUnlock(record) {
-      this.$confirm({
-        title: '系统提示',
-        content: '真的要解锁用户么？',
-        okText: '确认',
-        cancelText: '取消',
-        onOk: () => {
-          // 解锁用户
-          unlockUser(record.id).then(res => {
-            if (res.code === 200) {
-              this.$notification.success({
-                message: res.msg,
-                duration: 2
-              })
-              this.loadData()
-            }
-          })
-        }
-      })
-    }
-  }
-}
-</script>
\ No newline at end of file
+<template>
+  <div class="user">
+    <div ref="filter" class="filter">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+    </div>
+    <!-- 用户数据表格 -->
+    <a-table
+      :data-source="list"
+      :loading="loading"
+      :columns="columns"
+      :style="{'max-height': tableHeight + 'px' }"
+      :scroll="{x: 1000, y: tableHeight - 60}"
+      :pagination="false"
+      bordered
+      :row-key="(record, index) => index"
+    >
+      <a-tooltip slot="id" slot-scope="text" :title="text" placement="topLeft">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <template slot="operation" slot-scope="text, record">
+        <a-tooltip title="编辑">
+          <a-button type="link" @click="handleEdit(record)"><a-icon type="edit" /></a-button>
+        </a-tooltip>
+        <a-tooltip title="删除">
+          <a-button type="link" @click="handleDelete(record)"><a-icon type="delete" class="danger" /></a-button>
+        </a-tooltip>
+        <a-tooltip title="解锁">
+          <a-button type="link" :disabled="record.pwdErrorCount === 0" @click="handleUnlock(record)"><a-icon type="unlock" /></a-button>
+        </a-tooltip>
+      </template>
+    </a-table>
+    <!-- 新增和编辑区 -->
+    <a-modal v-model="editUserVisible" :title="title" :mask-closable="false" @keyup.native.enter="handleEditUserOk" @ok="handleEditUserOk">
+      <user-add ref="userAdd" :row-data="rowData" @on-refresh="refreshTable" />
+    </a-modal>
+  </div>
+</template>
+<script>
+import { getUserList, deleteUser, unlockUser } from '../../api/user'
+import { parseTime } from '../../utils/time'
+import userAdd from './components/user_add.vue'
+export default {
+  components: {
+    userAdd
+  },
+  data() {
+    return {
+      loading: false,
+      tableHeight: '70vh',
+      list: [],
+      rowData: {},
+      editUserVisible: false,
+      columns: [
+        { title: '用户名称', dataIndex: 'id', ellipsis: true, scopedSlots: { customRender: 'id' }},
+        { title: '修改时间', dataIndex: 'modifyTime', ellipsis: true, customRender: (text) => { return parseTime(text) } },
+        { title: '输入密码错误次数', dataIndex: 'pwdErrorCount', ellipsis: true },
+        { title: '输入密码错误时间', dataIndex: 'lastPwdErrorTime', ellipsis: true, customRender: (text) => { if (text === '0') { return '--' } return parseTime(text) } },
+        { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }, width: 200, align: 'center' }
+      ],
+      title: '新增用户'
+    }
+  },
+  created() {
+    this.calcTableHeight()
+    this.loadData()
+  },
+  methods: {
+    // 计算表格高度
+    calcTableHeight() {
+      this.$nextTick(() => {
+        this.tableHeight = window.innerHeight - this.$refs['filter'].clientHeight - 135
+      })
+    },
+    // 加载数据
+    loadData() {
+      this.list = []
+      this.loading = true
+      getUserList().then(res => {
+        if (res.code === 200) {
+          this.list = res.data
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 新增用户
+    handleAdd() {
+      this.title = '新增用户'
+      this.rowData = {}
+      this.editUserVisible = true
+    },
+    // 修改用户
+    handleEdit(record) {
+      this.title = '编辑用户'
+      this.rowData = Object.assign(record)
+      this.editUserVisible = true
+    },
+    // 提交用户数据
+    handleEditUserOk() {
+      this.$refs.userAdd.formSubmit()
+    },
+    // 刷新表格
+    refreshTable() {
+      this.editUserVisible = false
+      this.loadData()
+    },
+    // 删除用户
+    handleDelete(record) {
+      this.$confirm({
+        title: '系统提示',
+        content: '真的要删除用户么？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          // 删除
+          deleteUser(record.id).then((res) => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              })
+              this.loadData()
+            }
+          })
+        }
+      })
+    },
+    // 解锁
+    handleUnlock(record) {
+      this.$confirm({
+        title: '系统提示',
+        content: '真的要解锁用户么？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          // 解锁用户
+          unlockUser(record.id).then(res => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: res.msg,
+                duration: 2
+              })
+              this.loadData()
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.filter {
+  margin-bottom: 10px;
+}
+.ant-btn {
+  margin-right: 10px;
+}
+</style>
-- 
Gitee