From abc24aef0280345b7d53534d675cb887110e8d53 Mon Sep 17 00:00:00 2001
From: zc <>
Date: Wed, 15 Dec 2021 07:38:25 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E4=B8=BAsetup?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95=E7=B3=96,=E7=BB=9F=E4=B8=80=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=88=A0=E9=99=A4=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=A4=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改为setup语法糖,统一按钮样式，删除用户备注
---
 src/views/system/user/index.vue | 878 ++++++++++++++++----------------
 1 file changed, 431 insertions(+), 447 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 54264442..132db431 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -8,7 +8,7 @@
       >
         <div class="head-container">
           <el-input
-              v-model="deptName"
+              v-model="dataMap.deptName"
               placeholder="请输入部门名称"
               clearable
               size="small"
@@ -19,8 +19,8 @@
         <div class="head-container">
           <el-tree
               ref="treeRef"
-              :data="deptOptions"
-              :props="defaultProps"
+              :data="dataMap.deptOptions"
+              :props="dataMap.defaultProps"
               :expand-on-click-node="false"
               :filter-node-method="filterNode"
               default-expand-all
@@ -34,21 +34,54 @@
           :xs="24"
       >
         <el-form
-            v-show="showSearch"
+            v-show="dataMap.showSearch"
             ref="queryForm"
-            :model="queryParams"
+            :model="dataMap.queryParams"
             :inline="true"
 
         >
+          <el-form-item>
+            <el-button
+                type="primary"
+                plain
+                :icon="Plus"
+                size="mini"
+                @click="handleAdd"
+            >
+              新增
+            </el-button>
+            <el-button
+                type="success"
+                plain
+                :icon="Edit"
+                size="mini"
+                :disabled="dataMap.single"
+                @click="handleUpdate"
+            >
+              修改
+            </el-button>
+            <el-button
+                type="danger"
+                plain
+                :icon="Delete"
+                size="mini"
+                :disabled="dataMap.multiple"
+                @click="handleDelete"
+            >
+              删除
+            </el-button>
+          </el-form-item>
+
           <el-form-item
               label="关键字"
               prop="keywords"
           >
             <el-input
-                v-model="queryParams.keywords"
+                v-model="dataMap.queryParams.keywords"
                 placeholder="用户名/昵称/手机号"
                 clearable
                 size="small"
+                style="width: 200px"
                 @keyup.enter="handleQuery"
             />
           </el-form-item>
@@ -57,11 +90,11 @@
               prop="mobile"
           >
             <el-input
-                v-model="queryParams.mobile"
+                v-model="dataMap.queryParams.mobile"
                 placeholder="请输入手机号码"
                 clearable
                 size="small"
-                style="width: 240px"
+                style="width: 200px"
                 @keyup.enter="handleQuery"
             />
           </el-form-item>
@@ -70,14 +103,14 @@
               prop="status"
           >
             <el-select
-                v-model="queryParams.status"
+                v-model="dataMap.queryParams.status"
                 placeholder="用户状态"
                 clearable
                 size="small"
-                style="width: 240px"
+                style="width: 200px"
             >
               <el-option
-                  v-for="dict in statusOptions"
+                  v-for="dict in dataMap.statusOptions"
                   :key="dict.dictValue"
                   :label="dict.dictLabel"
                   :value="dict.dictValue"
@@ -103,51 +136,9 @@
           </el-form-item>
         </el-form>
 
-        <el-row
-            :gutter="10"
-            class="mb8"
-        >
-          <el-col :span="1.5">
-            <el-button
-                type="primary"
-                plain
-                :icon="Plus"
-                size="mini"
-                @click="handleAdd"
-            >
-              新增
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-                type="success"
-                plain
-                :icon="Edit"
-                size="mini"
-                :disabled="single"
-                @click="handleUpdate"
-            >
-              修改
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-                type="danger"
-                plain
-                :icon="Delete"
-                size="mini"
-                :disabled="multiple"
-                @click="handleDelete"
-            >
-              删除
-            </el-button>
-          </el-col>
-
-        </el-row>
-
         <el-table
-            v-loading="loading"
-            :data="userList"
+            v-loading="dataMap.loading"
+            :data="dataMap.userList"
             @selection-change="handleSelectionChange"
         >
           <el-table-column
@@ -156,14 +147,14 @@
               align="center"
           />
           <el-table-column
-              v-if="columns[0].visible"
+              v-if="dataMap.columns[0].visible"
               key="id"
               label="用户编号"
               align="center"
               prop="id"
           />
           <el-table-column
-              v-if="columns[1].visible"
+              v-if="dataMap.columns[1].visible"
               key="username"
               label="用户名称"
               align="center"
@@ -171,7 +162,7 @@
               :show-overflow-tooltip="true"
           />
           <el-table-column
-              v-if="columns[2].visible"
+              v-if="dataMap.columns[2].visible"
               key="nickname"
               label="用户昵称"
               align="center"
@@ -179,7 +170,7 @@
               :show-overflow-tooltip="true"
           />
           <el-table-column
-              v-if="columns[3].visible"
+              v-if="dataMap.columns[3].visible"
               key="deptName"
               label="部门"
               align="center"
@@ -187,7 +178,7 @@
               :show-overflow-tooltip="true"
           />
           <el-table-column
-              v-if="columns[4].visible"
+              v-if="dataMap.columns[4].visible"
               key="mobile"
               label="手机号码"
               align="center"
@@ -196,7 +187,7 @@
           />
 
           <el-table-column
-              v-if="columns[5].visible"
+              v-if="dataMap.columns[5].visible"
               key="status"
               label="状态"
               align="center"
@@ -212,7 +203,7 @@
             </template>
           </el-table-column>
           <el-table-column
-              v-if="columns[6].visible"
+              v-if="dataMap.columns[6].visible"
               label="创建时间"
               align="center"
               prop="gmtCreate"
@@ -257,10 +248,10 @@
         </el-table>
 
         <pagination
-            v-show="total>0"
-            :total="total"
-            v-model:page="queryParams.page"
-            v-model:limit="queryParams.limit"
+            v-show="dataMap.total>0"
+            :total="dataMap.total"
+            v-model:page="dataMap.queryParams.page"
+            v-model:limit="dataMap.queryParams.limit"
             @pagination="getList"
         />
       </el-col>
@@ -268,16 +259,16 @@
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog
-        :title="title"
-        v-model="open"
+        :title="dataMap.title"
+        v-model="dataMap.open"
         width="600px"
         append-to-body
         @opened="showDialog"
     >
       <el-form
           ref="addForm"
-          :model="formVal"
-          :rules="rules"
+          :model="dataMap.formVal"
+          :rules="dataMap.rules"
           label-width="80px"
       >
         <el-row>
@@ -287,7 +278,7 @@
                 prop="nickname"
             >
               <el-input
-                  v-model="formVal.nickname"
+                  v-model="dataMap.formVal.nickname"
                   placeholder="请输入用户昵称"
               />
             </el-form-item>
@@ -298,11 +289,11 @@
                 prop="deptId"
             >
               <Treeselect
-                  :treeProps="props"
-                  :options="deptOptions"
+                  :treeProps="dataMap.props"
+                  :options="dataMap.deptOptions"
                   placeholder="请选择归属部门"
-                  :originOptions="originOptions"
-                  :defalut="formVal.deptId"
+                  :originOptions="dataMap.originOptions"
+                  :defalut="dataMap.formVal.deptId"
                   :user="true"
                   @callBack="getDeptId"
               />
@@ -316,7 +307,7 @@
                 prop="mobile"
             >
               <el-input
-                  v-model="formVal.mobile"
+                  v-model="dataMap.formVal.mobile"
                   placeholder="请输入手机号码"
                   maxlength="11"
               />
@@ -328,7 +319,7 @@
                 prop="email"
             >
               <el-input
-                  v-model="formVal.email"
+                  v-model="dataMap.formVal.email"
                   placeholder="请输入邮箱"
                   maxlength="50"
               />
@@ -338,24 +329,24 @@
         <el-row>
           <el-col :span="12">
             <el-form-item
-                v-if="formVal.userId === undefined"
+                v-if="dataMap.formVal.userId === undefined"
                 label="用户名称"
                 prop="userName"
             >
               <el-input
-                  v-model="formVal.username"
+                  v-model="dataMap.formVal.username"
                   placeholder="请输入用户名称"
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
-                v-if="formVal.id === undefined"
+                v-if="dataMap.formVal.id === undefined"
                 label="用户密码"
                 prop="password"
             >
               <el-input
-                  v-model="formVal.password"
+                  v-model="dataMap.formVal.password"
                   placeholder="请输入用户密码"
                   type="password"
               />
@@ -366,11 +357,11 @@
           <el-col :span="12">
             <el-form-item label="用户性别">
               <el-select
-                  v-model="formVal.gender"
+                  v-model="dataMap.formVal.gender"
                   placeholder="请选择"
               >
                 <el-option
-                    v-for="dict in sexOptions"
+                    v-for="dict in dataMap.sexOptions"
                     :key="dict.value"
                     :label="dict.name"
                     :value="dict.value"
@@ -380,9 +371,9 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="状态">
-              <el-radio-group v-model="formVal.status">
+              <el-radio-group v-model="dataMap.formVal.status">
                 <el-radio
-                    v-for="dict in statusOptions"
+                    v-for="dict in dataMap.statusOptions"
                     :key="dict.dictValue"
                     :label="dict.dictValue"
                 >
@@ -396,12 +387,12 @@
           <el-col :span="12">
             <el-form-item label="角色">
               <el-select
-                  v-model="formVal.roleIds"
+                  v-model="dataMap.formVal.roleIds"
                   multiple
                   placeholder="请选择"
               >
                 <el-option
-                    v-for="item in roleOptions"
+                    v-for="item in dataMap.roleOptions"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
@@ -411,17 +402,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input
-                  v-model="formVal.remark"
-                  type="textarea"
-                  placeholder="请输入内容"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
       </el-form>
       <template #footer>
         <div
@@ -444,367 +424,371 @@
   </div>
 </template>
 
-<script  lang='ts'>
-import { listUser, getUser, delUser, addUser, updateUser,patch } from '@/api/system/user'
+<script setup lang='ts'>
+import {listUser, getUser, delUser, addUser, updateUser, patch} from '@/api/system/user'
 
 import {getDeptSelectList} from '@/api/system/dept'
 import Treeselect from '@/components/TreeSelect/Index.vue'
 import {listRoles} from '@/api/system/role'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 
-import {defineComponent, reactive, toRefs, ref, unref, onMounted, watchEffect, getCurrentInstance} from 'vue'
-import { ElMessage, ElMessageBox, ElTree, ElUpload } from 'element-plus'
+import {reactive, ref, unref, onMounted, watchEffect, getCurrentInstance} from 'vue'
+import {ElMessage, ElMessageBox, ElTree} from 'element-plus'
 
-export default defineComponent({
-  components: {
-    Treeselect
+
+const treeRef = ref(ElTree)
+const queryForm = ref<HTMLInputElement | null>(null)
+
+const dataMap = reactive({
+  props: { // 配置项（必选）
+    value: 'id',
+    label: 'label',
+    children: 'children'
   },
-  setup() {
-    const treeRef = ref(ElTree)
-    const queryForm = ref<HTMLInputElement | null>(null)
-    const addForm = ref<HTMLInputElement | null>(null)
-    const uploadRef = ref(ElUpload)
-    const dataMap = reactive({
-      props: { // 配置项（必选）
-        value: 'id',
-        label: 'label',
-        children: 'children'
-      },
-      addformFlag: false,
-      // 阻止触发switch  change事件
-      tigger: false,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      originOptions: [],
-      // 用户表格数据
-      userList: null,
-      // 弹出层标题
-      title: '',
-      // 部门树选项
-      deptOptions: [],
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      deptName: '',
-      // 默认密码
-      initPassword: '123456',
-      // 日期范围
-      dateRange: [],
-      // 状态数据字典
-      statusOptions: [
-        {
-          "dictValue": 0,
-          "dictLabel": "禁用"
-        },
-        {
-          "dictValue": 1,
-          "dictLabel": "正常"
-        }
-      ],
-      // 性别状态字典
-      sexOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 表单参数
-      formVal: {
-        id: undefined,
-        deptId: '',
-        username: undefined,
-        nickname: undefined,
-        password: '',
-        mobile: undefined,
-        email: undefined,
-        gender: undefined,
-        status: 1,
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      },
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      // 查询参数
-      queryParams: {
-        page: 1,
-        limit: 10,
-        keywords: undefined,
-        mobile: undefined,
-        status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-      columns: [
-        { key: 0, label: '用户编号', visible: true },
-        { key: 1, label: '用户名称', visible: true },
-        { key: 2, label: '用户昵称', visible: true },
-        { key: 3, label: '部门', visible: true },
-        { key: 4, label: '手机号码', visible: true },
-        { key: 5, label: '状态', visible: true },
-        { key: 6, label: '创建时间', visible: true }
-      ],
-      // 表单校验
-      rules: {
-        username: [
-          {required: true, message: '用户名不能为空', trigger: 'blur'}
-        ],
-        password: [
-          {required: true, message: '用户密码不能为空', trigger: 'blur'}
-        ],
-        roleId: [
-          {required: true, message: '用户角色不能为空', trigger: 'blur'}
-        ],
-        deptId: [
-          {required: true, message: '归属部门不能为空', trigger: 'blur'}
-        ],
-        email: [
-          {
-            type: 'email',
-            message: '\'请输入正确的邮箱地址',
-            trigger: ['blur', 'change']
-          }
-        ],
-        mobile: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: '请输入正确的手机号码',
-            trigger: 'blur'
-          }
-        ]
+  addformFlag: false,
+  // 阻止触发switch  change事件
+  tigger: false,
+  // 遮罩层
+  loading: true,
+  // 选中数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  // 显示搜索条件
+  showSearch: true,
+  // 总条数
+  total: 0,
+  originOptions: [],
+  // 用户表格数据
+  userList: null,
+  // 弹出层标题
+  title: '',
+  // 部门树选项
+  deptOptions: [],
+  // 是否显示弹出层
+  open: false,
+  // 部门名称
+  deptName: '',
+  // 默认密码
+  initPassword: '123456',
+  // 日期范围
+  dateRange: [],
+  // 状态数据字典
+  statusOptions: [
+    {
+      "dictValue": 0,
+      "dictLabel": "禁用"
+    },
+    {
+      "dictValue": 1,
+      "dictLabel": "正常"
+    }
+  ],
+  // 性别状态字典
+  sexOptions: [],
+  // 角色选项
+  roleOptions: [],
+  // 表单参数
+  formVal: {
+    id: undefined,
+    deptId: '',
+    username: undefined,
+    nickname: undefined,
+    password: '',
+    mobile: undefined,
+    email: undefined,
+    gender: undefined,
+    status: 1,
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  },
+  defaultProps: {
+    children: 'children',
+    label: 'label'
+  },
+  // 查询参数
+  queryParams: {
+    page: 1,
+    limit: 10,
+    keywords: undefined,
+    mobile: undefined,
+    status: undefined,
+    deptId: undefined
+  },
+  // 列信息
+  columns: [
+    {key: 0, label: '用户编号', visible: true},
+    {key: 1, label: '用户名称', visible: true},
+    {key: 2, label: '用户昵称', visible: true},
+    {key: 3, label: '部门', visible: true},
+    {key: 4, label: '手机号码', visible: true},
+    {key: 5, label: '状态', visible: true},
+    {key: 6, label: '创建时间', visible: true}
+  ],
+  // 表单校验
+  rules: {
+    username: [
+      {required: true, message: '用户名不能为空', trigger: 'blur'}
+    ],
+    password: [
+      {required: true, message: '用户密码不能为空', trigger: 'blur'}
+    ],
+    roleId: [
+      {required: true, message: '用户角色不能为空', trigger: 'blur'}
+    ],
+    deptId: [
+      {required: true, message: '归属部门不能为空', trigger: 'blur'}
+    ],
+    email: [
+      {
+        type: 'email',
+        message: '\'请输入正确的邮箱地址',
+        trigger: ['blur', 'change']
       }
-    })
-
-    /** 查询用户列表 */
-    const getList = () => {
-      dataMap.loading = true
-      dataMap.tigger = true
-      listUser(dataMap.queryParams).then(response => {
-        const {data, total} = response
-        console.log(response)
-        dataMap.userList = data
-        dataMap.total = total
-        dataMap.loading = false
-      })
-    }
-
-    const flatten = (origin: any) => {
-      let result: any = []
-      for (let i = 0; i < origin.length; i++) {
-        const item = origin[i]
-        if (Array.isArray(item.children)) {
-          result = result.concat(flatten(item.children))
-        } else {
-          result.push(item)
-        }
+    ],
+    mobile: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: '请输入正确的手机号码',
+        trigger: 'blur'
       }
-      return result
-    }
-    /** 查询部门下拉树结构 */
-    const loadDeptOptions = () => {
-      getDeptSelectList().then(response => {
-        dataMap.deptOptions = response.data
-        dataMap.originOptions = flatten(response?.data) as any
-      })
-    }
-
-    // 筛选节点
-    const filterNode = (value: string, data: any) => {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    }
-    // 节点单击事件
-    const handleNodeClick = (data: {[key: string]: any}) => {
-      dataMap.queryParams.deptId = data.id
-      getList()
-    }
-    // 用户状态修改
-    const handleStatusChange = (row: {[key: string]: any}) => {
-      if (dataMap.tigger) {
-        const text = row.status === '1' ? '启用' : '停用'
-        ElMessageBox.confirm('确认要"' + text +'""'+ row.username + '"用户吗?', '警告', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(function () {
-          return patch(row.id, {status: row.status})
-        }).then(() => {
-          ElMessage.success(text + '成功')
-        }).catch(function () {
-          row.status = row.status === '1' ? 1 : 0
-        })
-
-      }
-    }
-
-    /** 搜索按钮操作 */
-    const handleQuery = () => {
-      dataMap.queryParams.page = 1
-      getList()
-    }
-    /** 重置按钮操作 */
-    const resetQuery = () => {
-      (queryForm.value as any).resetFields()
-      handleQuery()
-    }
-
-    // 多选框选中数据
-    const handleSelectionChange = (selection: any) => {
-      dataMap.ids = selection.map((item: any) => item.id)
-      dataMap.single = selection.length !== 1
-      dataMap.multiple = !selection.length
-    }
-    /** 新增按钮操作 */
-    const handleAdd = () => {
-      console.log(dataMap.formVal)
-      dataMap.addformFlag = true
-      resetForm()
-      dataMap.originOptions = []
-      // loadDeptOptions()
-      dataMap.open = true
-      dataMap.title = '添加用户'
-      dataMap.formVal.password = "123456"
-    }
-
-    // 表单重置
-    const resetForm = ()=> {
-      dataMap.formVal=  {
-        id: undefined,
-        deptId: '',
-        username: undefined,
-        nickname: undefined,
-        password: '',
-        mobile: undefined,
-        email: undefined,
-        gender: undefined,
-        status: 1,
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      }
-    }
-
-    /** 修改按钮操作 */
-    const handleUpdate = (row: {[key: string]: any}) => {
-      resetForm()
-      const userId = row.id || dataMap.ids
-      getUser(userId).then(response => {
-        dataMap.formVal = response.data
-        // dataMap.formVal.postIds = response.postIds
-        // dataMap.formVal.roleIds = response.roleIds
-        dataMap.open = true
-        dataMap.title = '修改用户'
-        dataMap.formVal.password = ''
-        dataMap.formVal.deptId = response.data.deptId
-      })
-    }
-    /** 重置密码按钮操作 */
-    const handleResetPwd = (row: {[key: string]: any}) => {
-      ElMessageBox.prompt('请输入' + row.username + '"的新密码', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputValidator: (value) => {
-          if (!value || value.trim().length < 1) {
-            return '请填写新密码'
-          }
-        }
-      }).then(({value}) => {
-        patch(row.id, {
-          password: value
-        }).then(() => {
-          ElMessage.success('修改成功，新密码是：' + value)
-        })
-      }).catch((err) => {})
-    }
-    /** 提交按钮 */
-    const submitForm = () => {
-      (queryForm.value as any).validate((valid: any) => {
-        if (valid) {
-          if (dataMap.formVal.id !== undefined) {
-            updateUser(dataMap.formVal.id,dataMap.formVal).then(() => {
-              ElMessage.success('修改成功')
-              dataMap.open = false
-              getList()
-            })
-          } else {
-            addUser(dataMap.formVal).then((response: any) => {
-                ElMessage.success('新增成功')
-                dataMap.open = false
-                getList()
-            })
-          }
-        }
-      })
-    }
-    /** 删除按钮操作 */
-    const handleDelete = (row: {[key: string]: any}) => {
-      const userIds = row.id || dataMap.ids.join(',')
-      ElMessageBox.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        return delUser(userIds)
-      }).then(() => {
-        getList()
-        ElMessage.success('刪除成功')
-      }).catch(() =>
-          ElMessage.info('已取消删除')
-      )
-    }
-     // 取消按钮
-    function cancel() {
-      dataMap.tigger = true
-      dataMap.open = false
-      resetForm()
-    }
-
-    const getParentValue = (event: any) => {
-      console.log(event)
-    }
-
-    const getDeptId = (e: any) => {
-      dataMap.formVal.deptId = e
-    }
-
-    watchEffect(() => {
-      if (dataMap.deptName) {
-        const tree = unref(treeRef)
-        tree.filter(dataMap.deptName)
-      }
-    })
-    const loadRoleOptions = async ()=> {
-      listRoles({}).then(response => {
-        dataMap.roleOptions = response.data
-        console.log(response.data)
-      })
-    }
-
-    onMounted(() => {
-      getList()
-      loadDeptOptions()
-      loadRoleOptions()
-      const {proxy}: any = getCurrentInstance();
-      proxy.$getDictItemsByCode('gender').then((response: any) => {
-        dataMap.sexOptions = response?.data
-      })
-    })
-
-    const showDialog = () => {
-      loadDeptOptions()
-    }
-    return { ...toRefs(dataMap), uploadRef, getDeptId, getParentValue, resetForm, addForm, showDialog, flatten, queryForm, treeRef, handleQuery, handleStatusChange, handleNodeClick, filterNode, loadDeptOptions, getList, resetQuery, handleAdd, handleSelectionChange, handleUpdate, handleResetPwd, submitForm, handleDelete,cancel,Search, Plus, Edit, Refresh, Delete }
+    ]
   }
 })
+
+/** 查询用户列表 */
+function getList() {
+  dataMap.loading = true
+  dataMap.tigger = true
+  listUser(dataMap.queryParams).then(response => {
+    const {data, total} = response
+    dataMap.userList = data
+    dataMap.total = total
+    dataMap.loading = false
+  })
+}
+
+function flatten(origin: any) {
+  let result: any = []
+  for (let i = 0; i < origin.length; i++) {
+    const item = origin[i]
+    if (Array.isArray(item.children)) {
+      result = result.concat(flatten(item.children))
+    } else {
+      result.push(item)
+    }
+  }
+  return result
+}
+
+/** 查询部门下拉树结构 */
+function loadDeptOptions() {
+  getDeptSelectList().then(response => {
+    dataMap.deptOptions = response.data
+    dataMap.originOptions = flatten(response?.data) as any
+  })
+}
+
+// 筛选节点
+function filterNode(value: string, data: any) {
+  if (!value) return true
+  return data.label.indexOf(value) !== -1
+}
+
+// 节点单击事件
+function handleNodeClick(data: { [key: string]: any }) {
+  dataMap.queryParams.deptId = data.id
+  getList()
+}
+
+// 用户状态修改
+function handleStatusChange(row: { [key: string]: any }) {
+  if (dataMap.tigger) {
+    const text = row.status === '1' ? '启用' : '停用'
+    ElMessageBox.confirm('确认要"' + text + '""' + row.username + '"用户吗?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then( () =>{
+      return patch(row.id, {status: row.status})
+    }).then(() => {
+      ElMessage.success(text + '成功')
+    }).catch( ()=>{
+      row.status = row.status === '1' ? 1 : 0
+    })
+
+  }
+}
+
+/** 重置密码按钮操作 */
+function handleResetPwd(row: { [key: string]: any }) {
+  ElMessageBox.prompt('请输入' + row.username + '"的新密码', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputValidator: (value) => {
+      if (!value || value.trim().length < 1) {
+        return '请填写新密码'
+      }
+    }
+  }).then(({value}) => {
+    patch(row.id, {
+      status: row.status,
+      password: value
+    }).then(() => {
+      ElMessage.success('修改成功，新密码是：' + value)
+    })
+  }).catch((err) => {
+  })
+}
+
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  dataMap.queryParams.page = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  (queryForm.value as any).resetFields()
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection: any) {
+  dataMap.ids = selection.map((item: any) => item.id)
+  dataMap.single = selection.length !== 1
+  dataMap.multiple = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  console.log(dataMap.formVal)
+  dataMap.addformFlag = true
+  resetForm()
+  dataMap.originOptions = []
+  // loadDeptOptions()
+  dataMap.open = true
+  dataMap.title = '添加用户'
+  dataMap.formVal.password = "123456"
+}
+
+// 表单重置
+function resetForm() {
+  dataMap.formVal = {
+    id: undefined,
+    deptId: '',
+    username: undefined,
+    nickname: undefined,
+    password: '',
+    mobile: undefined,
+    email: undefined,
+    gender: undefined,
+    status: 1,
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row: { [key: string]: any }) {
+  resetForm()
+  const userId = row.id || dataMap.ids
+ const response = await getUser(userId);
+  dataMap.formVal = response.data
+  console.log(response.data)
+  dataMap.title = '修改用户'
+  dataMap.formVal.password = ''
+  dataMap.formVal.deptId = 1
+  // dataMap.formVal.deptId = parseInt(response.data.deptId)
+  dataMap.open = true
+}
+
+
+/** 提交按钮 */
+function submitForm() {
+  (queryForm.value as any).validate((valid: any) => {
+    if (valid) {
+      if (dataMap.formVal.id !== undefined) {
+        updateUser(dataMap.formVal.id, dataMap.formVal).then(() => {
+          ElMessage.success('修改成功')
+          dataMap.open = false
+          getList()
+        })
+      } else {
+        addUser(dataMap.formVal).then((response: any) => {
+          ElMessage.success('新增成功')
+          dataMap.open = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row: { [key: string]: any }) {
+  const userIds = row.id || dataMap.ids.join(',')
+  ElMessageBox.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    ElMessage.success('刪除成功')
+  }).catch(() =>
+      ElMessage.info('已取消删除')
+  )
+}
+
+// 取消按钮
+function cancel() {
+  dataMap.tigger = true
+  dataMap.open = false
+  resetForm()
+}
+
+function getParentValue(event: any) {
+  console.log(event)
+}
+
+function getDeptId(e: any) {
+  dataMap.formVal.deptId = e
+}
+
+watchEffect(() => {
+  if (dataMap.deptName) {
+    const tree = unref(treeRef)
+    tree.filter(dataMap.deptName)
+  }
+})
+
+async function loadRoleOptions() {
+  listRoles({}).then(response => {
+    dataMap.roleOptions = response.data
+  })
+}
+
+onMounted(() => {
+  getList()
+  loadDeptOptions()
+  loadRoleOptions()
+  const {proxy}: any = getCurrentInstance();
+  proxy.$getDictItemsByCode('gender').then((response: any) => {
+    dataMap.sexOptions = response?.data
+  })
+})
+
+function showDialog() {
+  loadDeptOptions()
+}
+
 </script>
 <style lang="scss" scoped>
 .small-padding {