style: 修改为setup语法糖,统一按钮样式，删除用户备注

修改为setup语法糖,统一按钮样式，删除用户备注

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,27 +424,22 @@
   </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
-  },
-  setup() {
-    const treeRef = ref(ElTree)
-    const queryForm = ref<HTMLInputElement | null>(null)
-    const addForm = ref<HTMLInputElement | null>(null)
-    const uploadRef = ref(ElUpload)
-    const dataMap = reactive({
+
+const treeRef = ref(ElTree)
+const queryForm = ref<HTMLInputElement | null>(null)
+
+const dataMap = reactive({
   props: { // 配置项（必选）
     value: 'id',
     label: 'label',
@@ -545,13 +520,13 @@ export default defineComponent({
   },
   // 列信息
   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 }
+    {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: {
@@ -582,22 +557,21 @@ export default defineComponent({
       }
     ]
   }
-    })
+})
 
-    /** 查询用户列表 */
-    const getList = () => {
+/** 查询用户列表 */
+function 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) => {
+function flatten(origin: any) {
   let result: any = []
   for (let i = 0; i < origin.length; i++) {
     const item = origin[i]
@@ -608,63 +582,90 @@ export default defineComponent({
     }
   }
   return result
-    }
-    /** 查询部门下拉树结构 */
-    const loadDeptOptions = () => {
+}
+
+/** 查询部门下拉树结构 */
+function loadDeptOptions() {
   getDeptSelectList().then(response => {
     dataMap.deptOptions = response.data
     dataMap.originOptions = flatten(response?.data) as any
   })
-    }
+}
 
-    // 筛选节点
-    const filterNode = (value: string, data: any) => {
+// 筛选节点
+function filterNode(value: string, data: any) {
   if (!value) return true
   return data.label.indexOf(value) !== -1
-    }
-    // 节点单击事件
-    const handleNodeClick = (data: {[key: string]: any}) => {
+}
+
+// 节点单击事件
+function handleNodeClick(data: { [key: string]: any }) {
   dataMap.queryParams.deptId = data.id
   getList()
-    }
-    // 用户状态修改
-    const handleStatusChange = (row: {[key: string]: any}) => {
+}
+
+// 用户状态修改
+function handleStatusChange(row: { [key: string]: any }) {
   if (dataMap.tigger) {
     const text = row.status === '1' ? '启用' : '停用'
-        ElMessageBox.confirm('确认要"' + text +'""'+ row.username + '"用户吗?', '警告', {
+    ElMessageBox.confirm('确认要"' + text + '""' + row.username + '"用户吗?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
-        }).then(function () {
+    }).then( () =>{
       return patch(row.id, {status: row.status})
     }).then(() => {
       ElMessage.success(text + '成功')
-        }).catch(function () {
+    }).catch( ()=>{
       row.status = row.status === '1' ? 1 : 0
     })
 
   }
-    }
+}
 
-    /** 搜索按钮操作 */
-    const handleQuery = () => {
+/** 重置密码按钮操作 */
+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()
-    }
-    /** 重置按钮操作 */
-    const resetQuery = () => {
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
   (queryForm.value as any).resetFields()
   handleQuery()
-    }
+}
 
-    // 多选框选中数据
-    const handleSelectionChange = (selection: any) => {
+// 多选框选中数据
+function handleSelectionChange(selection: any) {
   dataMap.ids = selection.map((item: any) => item.id)
   dataMap.single = selection.length !== 1
   dataMap.multiple = !selection.length
-    }
-    /** 新增按钮操作 */
-    const handleAdd = () => {
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
   console.log(dataMap.formVal)
   dataMap.addformFlag = true
   resetForm()
@@ -673,11 +674,11 @@ export default defineComponent({
   dataMap.open = true
   dataMap.title = '添加用户'
   dataMap.formVal.password = "123456"
-    }
+}
 
-    // 表单重置
-    const resetForm = ()=> {
-      dataMap.formVal=  {
+// 表单重置
+function resetForm() {
+  dataMap.formVal = {
     id: undefined,
     deptId: '',
     username: undefined,
@@ -691,46 +692,29 @@ export default defineComponent({
     postIds: [],
     roleIds: []
   }
-    }
+}
 
-    /** 修改按钮操作 */
-    const handleUpdate = (row: {[key: string]: any}) => {
+/** 修改按钮操作 */
+async function handleUpdate(row: { [key: string]: any }) {
   resetForm()
   const userId = row.id || dataMap.ids
-      getUser(userId).then(response => {
+ const response = await getUser(userId);
   dataMap.formVal = response.data
-        // dataMap.formVal.postIds = response.postIds
-        // dataMap.formVal.roleIds = response.roleIds
-        dataMap.open = true
+  console.log(response.data)
   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 = () => {
+  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(() => {
+        updateUser(dataMap.formVal.id, dataMap.formVal).then(() => {
           ElMessage.success('修改成功')
           dataMap.open = false
           getList()
@@ -744,15 +728,16 @@ export default defineComponent({
       }
     }
   })
-    }
-    /** 删除按钮操作 */
-    const handleDelete = (row: {[key: string]: any}) => {
+}
+
+/** 删除按钮操作 */
+function handleDelete(row: { [key: string]: any }) {
   const userIds = row.id || dataMap.ids.join(',')
   ElMessageBox.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-      }).then(function() {
+  }).then(function () {
     return delUser(userIds)
   }).then(() => {
     getList()
@@ -760,36 +745,37 @@ export default defineComponent({
   }).catch(() =>
       ElMessage.info('已取消删除')
   )
-    }
-     // 取消按钮
-    function cancel() {
+}
+
+// 取消按钮
+function cancel() {
   dataMap.tigger = true
   dataMap.open = false
   resetForm()
-    }
+}
 
-    const getParentValue = (event: any) => {
+function getParentValue(event: any) {
   console.log(event)
-    }
+}
 
-    const getDeptId = (e: any) => {
+function getDeptId(e: any) {
   dataMap.formVal.deptId = e
-    }
+}
 
-    watchEffect(() => {
+watchEffect(() => {
   if (dataMap.deptName) {
     const tree = unref(treeRef)
     tree.filter(dataMap.deptName)
   }
-    })
-    const loadRoleOptions = async ()=> {
+})
+
+async function loadRoleOptions() {
   listRoles({}).then(response => {
     dataMap.roleOptions = response.data
-        console.log(response.data)
   })
-    }
+}
 
-    onMounted(() => {
+onMounted(() => {
   getList()
   loadDeptOptions()
   loadRoleOptions()
@@ -797,14 +783,12 @@ export default defineComponent({
   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 showDialog() {
+  loadDeptOptions()
+}
+
 </script>
 <style lang="scss" scoped>
 .small-padding {