From ca06eb230f03cff1e3da4db1498c5bdb4b3e44b8 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Wed, 11 Jun 2025 15:57:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/FTTable/index.vue |   2 +
 src/components/user/Edit/index.vue      | 174 ++++++++++++++++++++
 src/types/user.d.ts                     |   6 +-
 src/views/user/index.vue                | 280 +++++++++-----------------------
 4 files changed, 252 insertions(+), 210 deletions(-)
 create mode 100644 src/components/user/Edit/index.vue

diff --git a/src/components/common/FTTable/index.vue b/src/components/common/FTTable/index.vue
index a21f91c..d4c1093 100644
--- a/src/components/common/FTTable/index.vue
+++ b/src/components/common/FTTable/index.vue
@@ -43,6 +43,7 @@ interface TableColumn {
   width?: number // 列宽
   fixed?: 'left' | 'right' | undefined // 是否固定列
   render?: (row: any) => VNode // 内容自定义
+  selectable?: (row: any) => boolean
 }
 
 interface Btn {
@@ -165,6 +166,7 @@ defineExpose({
             :width="column.width"
             :type="column.type"
             :fixed="column.fixed"
+            :selectable="column.selectable"
           >
             <template v-if="column.render" #default="scope">
               <Expand :column="column" :row="scope.row" :render="column.render" :index="index" />
diff --git a/src/components/user/Edit/index.vue b/src/components/user/Edit/index.vue
new file mode 100644
index 0000000..b5db879
--- /dev/null
+++ b/src/components/user/Edit/index.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { addUser, updateUser } from 'apis/user'
+import { FtMessage } from 'libs/message'
+import { useSystemStore } from 'stores/systemStore'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const emits = defineEmits(['ok', 'cancel'])
+
+onMounted(() => {
+})
+
+onUnmounted(() => {
+})
+
+const form = ref<User.User>(props.data.id ? props.data : {})
+const formRef = ref()
+
+const validateHandle = (rule: any, value: any, callback: any) => {
+  if (!value?.length) {
+    callback(new Error('请选择试管'))
+  }
+  else {
+    callback()
+  }
+}
+
+const passwordValidateHandle = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    callback(new Error('请输入密码'))
+  }
+  else if (value.length > 6) {
+    callback(new Error('密码长度不能大于6个字符'))
+  }
+  else {
+    callback()
+  }
+}
+
+const passwordValidateHandle1 = (rule: any, value: any, callback: any) => {
+  console.log('passwordValidateHandle1', value)
+  if (!value) {
+    callback(new Error('请输入密码'))
+  }
+  else if (value !== form.value.password) {
+    callback(new Error('两次密码输入不一致'))
+  }
+  else {
+    callback()
+  }
+}
+
+const rules = {
+  username: [
+    { required: true, message: '请输入账号', trigger: 'blur', validator: validateHandle },
+  ],
+  nickname: [
+    { required: false, message: '请输入用户名', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', validator: passwordValidateHandle },
+  ],
+  passwordAgain: [
+    { required: true, trigger: 'blur', validator: passwordValidateHandle1 },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    if (form.value.id) {
+      await updateUser(form.value)
+    }
+    else {
+      form.value.role = 'USER'
+      form.value.deleted = 'DISABLE'
+      await addUser(form.value)
+    }
+    FtMessage.success('保存成功')
+    emits('ok')
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+const cancel = () => {
+  emits('cancel')
+}
+</script>
+
+<template>
+  <FtDialog visible :title="data.id ? '编辑用户' : '新增用户'" width="40%" :ok-handle="okHandle" @cancel="cancel">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+      <el-form-item label="账号" prop="username">
+        <el-input v-model="form.username" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入账号" />
+      </el-form-item>
+      <el-form-item label="用户名" prop="nickname">
+        <el-input v-model="form.nickname" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入用户名" />
+      </el-form-item>
+      <el-form-item v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'" label="密码" prop="password">
+        <el-input v-model.number="form.password" maxlength="6" show-word-limit show-password type="password" placeholder="请输入密码" />
+      </el-form-item>
+      <el-form-item v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'" label="再次输入密码" prop="passwordAgain">
+        <el-input v-model.number="form.passwordAgain" maxlength="6" show-word-limit show-password type="password" placeholder="请输入密码" />
+      </el-form-item>
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+.el-row {
+  height: 450px;
+  .el-col {
+    height: 100%;
+    overflow: auto;
+    :deep(.el-tag) {
+      width: 100%;
+      margin-bottom: 5px;
+      .el-tag__content {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+.tube-item {
+  padding: 5px;
+  background: #384D5D;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  grid-gap: 5px;
+  position: relative;
+  .tube-line {
+    display: flex;
+    flex-direction: column;
+    .tube-line-inner {
+      display: inline-block;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      background: #fff;
+      margin: 2px;
+      transition: background 0.5s;
+    }
+  }
+  .tube-line-disable {
+    .tube-line-inner {
+      background: #C6C6C6;
+    }
+  }
+  .tube-line-active {
+    .tube-line-inner {
+      background: #26D574;
+    }
+  }
+
+}
+</style>
diff --git a/src/types/user.d.ts b/src/types/user.d.ts
index 349dbbf..3b1157c 100644
--- a/src/types/user.d.ts
+++ b/src/types/user.d.ts
@@ -1,10 +1,10 @@
 declare namespace User {
   interface User {
-    id: number
+    id?: number
     createTime?: string
     updateTime?: string
-    username: string
-    nickname: string
+    username?: string
+    nickname?: string
     password?: string | null
     role?: string
     deleted?: string
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 236d55f..37ea562 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,223 +1,89 @@
-<script lang="ts" setup>
-import type { FormInstance } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { onMounted, ref } from 'vue'
-import { addUser, delUser, updateUser, userList } from '@/apis/user'
+<script setup lang="ts">
+import { delUser, userList } from 'apis/user'
+import Edit from 'components/user/Edit/index.vue'
+import { ElMessageBox } from 'element-plus'
+import { FtMessage } from 'libs/message'
+import { cloneDeep } from 'lodash'
+import { useSystemStore } from 'stores/systemStore'
+import { useTemplateRef } from 'vue'
 
-onMounted(() => {
-  queryUserList()
-})
-const userDataList = ref<User.User[]>([])
-const visible = ref(false)
-const userForm = ref<Record<string, string | number | boolean>>({})
-const userFormRef = ref()
-const queryUserList = () => {
-  const params = {
-    pageSize: 10,
-    pageNum: 1,
-  }
-  userList(params).then((res) => {
-    userDataList.value = res.list
-  })
-}
-const createUser = () => {
-  userForm.value = {}
-  visible.value = true
-}
-const editUser = () => {
-  if (!selectedList.value || !selectedList.value.length) {
-    ElMessage.warning('请选择一条数据进行编辑')
-    return
-  }
-  const userItem = selectedList.value[0]
-  userForm.value = {
-    username: userItem.username,
-    nickname: userItem.nickname,
-    deleted: userItem.deleted,
-    id: userItem.id,
-    isAdmin: userItem.role === 'ADMIN',
-    role: userItem.role,
-  }
-  visible.value = true
-  // updateUser()
-}
-const onDelUser = () => {
-  if (!selectedList.value.length) {
-    ElMessage.warning('请选择要删除的数据')
-    return
-  }
-  ElMessageBox.confirm(
-    '确认删除选中的数据吗？',
-    '确认提示',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
+const systemStore = useSystemStore()
+
+const btnList = systemStore.systemStatus.currentUser?.fixedUser === 'ENABLE'
+  ? [
+      {
+        name: '新增',
+        type: 'primary',
+        serverUrl: 'add',
+        serverCondition: 0,
+      },
+      {
+        name: '编辑',
+        type: 'primary',
+        serverUrl: 'edit',
+        serverCondition: 1,
+      },
+      {
+        name: '删除',
+        type: 'danger',
+        serverUrl: 'del',
+        serverCondition: 2,
+      },
+    ]
+  : []
+const columns = [
+  {
+    type: 'selection',
+    selectable: (row: any) => {
+      return row.fixedUser !== 'ENABLE'
     },
-  ).then(() => {
-    const ids = selectedList.value.map(item => item.id)
-    delUser(ids.join(',')).then(() => {
-      ElMessage.success('删除成功')
-      queryUserList()
-    })
-  })
-}
+  },
+  {
+    title: '账号',
+    key: 'username',
+  },
+  {
+    title: '用户名',
+    key: 'nickname',
+  },
+]
 
-const selectedList = ref<User.User[]>([])
-const onSelectionChange = (rows: User.User[]) => {
-  selectedList.value = rows
-}
-const closeDialog = () => {
-  visible.value = false
-}
-const onConfirm = (formRef: FormInstance | undefined) => {
-  if (!formRef) {
-    return
-  }
-  formRef.validate((valid) => {
-    if (valid) {
-      if (userForm.value.id) {
-        doEdit()
-      }
-      else {
-        doSave()
-      }
-    }
-    else {
-      console.log('error submit!')
-    }
+const tableRef = useTemplateRef('tableRef')
+
+const del = async (selectedRows: any) => {
+  const ids = selectedRows.map((item: any) => item.id)
+  await ElMessageBox.confirm('确定删除当前选中的行?', '消息', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
   })
+  await delUser(ids)
+  FtMessage.success('删除成功')
+  tableRef.value?.initData()
 }
-const doEdit = () => {
-  const { username, nickname, isAdmin, id } = userForm.value
-  const params = {
-    username: username as string,
-    nickname: nickname as string,
-    role: isAdmin ? 'ADMIN' : 'USER',
-    deleted: 'ENABLE',
-    id: id as number,
-  }
-  updateUser(params).then(() => {
-    ElMessage.success('保存成功')
-    queryUserList()
-    closeDialog()
-  })
+
+const addVisible = ref(false)
+
+const currentData = ref({})
+const addHandle = () => {
+  currentData.value = {}
+  addVisible.value = true
 }
 
-const doSave = () => {
-  const { username, nickname, password, confirmPassword, isAdmin } = userForm.value
-  if (password !== confirmPassword) {
-    ElMessage.error('两次输入的密码不一致')
-    return
-  }
-  const params: User.AddUser = {
-    username: username as string,
-    nickname: nickname as string,
-    password: password as string,
-    role: isAdmin ? 'ADMIN' : 'USER',
-    deleted: 'ENABLE',
-  }
-  addUser(params).then(() => {
-    ElMessage.success('保存成功')
-    queryUserList()
-    closeDialog()
-  })
+const editHandle = (data: any) => {
+  currentData.value = cloneDeep(data[0])
+  console.log(currentData.value)
+  addVisible.value = true
 }
 </script>
 
 <template>
   <div>
-    <div>
-      <FtButton type="primary" @click="createUser">
-        添加用户
-      </FtButton>
-      <FtButton type="primary" @click="editUser">
-        编辑用户
-      </FtButton>
-      <FtButton @click="onDelUser">
-        删除用户
-      </FtButton>
-    </div>
-    <div>
-      <el-table :data="userDataList" stripe style="width: 100%" @selection-change="onSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column type="index" width="50" />
-        <el-table-column prop="username" label="登录名" />
-        <el-table-column prop="nickname" label="用户名" />
-        <!--        <el-table-column prop="fixedUser" label="状态"> -->
-        <!--          <template #default="scoped"> -->
-        <!--            <span v-if="scoped.row.deleted === 'ENABLE'">正常</span> -->
-        <!--            <span v-else>停用</span> -->
-        <!--          </template> -->
-        <!--        </el-table-column> -->
-        <el-table-column prop="createTime" label="创建时间" />
-        <el-table-column prop="updateTime" label="更新时间" />
-      </el-table>
-    </div>
-    <FtDialog v-model="visible" title="添加用户" width="30%" :ok-handle="() => { onConfirm(userFormRef) }" @cancel="closeDialog">
-      <div>
-        <el-form ref="userFormRef" :model="userForm" label-width="auto" style="max-width: 600px">
-          <el-form-item
-            label="登录名："
-            prop="username"
-            :rules="[{
-              required: true,
-              message: '输入登录名',
-              trigger: ['blur', 'change'],
-            }]"
-          >
-            <el-input v-model="userForm.username" placeholder="登录名" />
-          </el-form-item>
-          <el-form-item
-            label="用户名："
-            prop="nickname"
-            :rules="{
-              required: true,
-              message: '输入用户名',
-              trigger: 'blur',
-            }"
-          >
-            <el-input v-model="userForm.nickname" placeholder="用户名" />
-          </el-form-item>
-          <div v-if="!userForm.id">
-            <el-form-item
-              label="密码："
-              prop="password"
-              :rules="{
-                required: true,
-                message: '输入密码',
-                trigger: 'blur',
-              }"
-            >
-              <el-input v-model="userForm.password" type="password" placeholder="密码" />
-            </el-form-item>
-            <el-form-item
-              label="确认密码："
-              prop="confirmPassword"
-              :rules="{
-                required: true,
-                message: '输入密码',
-                trigger: 'blur',
-              }"
-            >
-              <el-input v-model="userForm.confirmPassword" type="password" placeholder="确认密码" />
-            </el-form-item>
-          </div>
-          <el-form-item
-            label="是否管理员："
-          >
-            <el-checkbox v-model="userForm.isAdmin" size="small" />
-          </el-form-item>
-        </el-form>
-      </div>
-    </FtDialog>
+    <FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :get-data-fn="userList" @add="addHandle" @edit="editHandle" @del="del" />
+    <Edit v-if="addVisible" :data="currentData" @ok="addVisible = false;tableRef?.initData()" @cancel="addVisible = false" />
   </div>
 </template>
 
-<style lang="css" scoped>
-  .footer{
-    display: flex;
-    justify-content: center;
-    width: 35vw;
-  }
+<style scoped lang="scss">
+
 </style>