refactor: 修改部门Options的方式为setup语法糖

修改部门Options的方式为setup语法糖

src/api/system/dept.ts

@@ -8,16 +8,16 @@ export const listDept = (queryParams?: object) => {
     })
 }
 
-export const getDept = (deptId: any) => {
+export const getDept = (id: any) => {
     return request({
-        url: '/youlai-admin/api/v1/depts/'+deptId,
+        url: '/youlai-admin/api/v1/depts/'+id,
         method: 'get'
     })
 }
 
-export const delDept = (deptId: any) => {
+export const delDept = (id: any) => {
     return request({
-        url: '/youlai-admin/api/v1/depts/'+deptId,
+        url: '/youlai-admin/api/v1/depts/'+id,
         method: 'delete',
     })
 }
@@ -32,7 +32,7 @@ export const addDept = (data: any) => {
 }
 
 // 修改部门
-export const updateDept = (id:string,data: any) => {
+export const updateDept = (id:number,data: any) => {
     return request({
         url: '/youlai-admin/api/v1/depts/'+id,
         method: 'put',

src/main.ts

@@ -16,7 +16,7 @@ import '@/permission'
 
 
 import Pagination from '@/components/Pagination/index.vue'
-import {listDictItems} from '@/api/system/dict.ts'
+import {listDictItems} from '@/api/system/dict'
 
 
 const app = createApp(App)
@@ -34,4 +34,4 @@ app
     .use(router)
     .use(store, key)
     .use(ElementPlus, {locale})
-    .mount('#app')
+    .mount('#app')

src/views/system/dept/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="app-container">
     <el-form
-        :model="queryParams"
+        :model="dataMap.queryParams"
         ref="queryForm"
         :inline="true"
-        v-show="showSearch"
+        v-show="dataMap.showSearch"
     >
       <el-form-item
           label="部门名称"
           prop="name"
       >
         <el-input
-            v-model="queryParams.name"
+            v-model="dataMap.queryParams.name"
             placeholder="请输入部门名称"
             size="small"
             @keyup.enter="handleQuery"
@@ -22,13 +22,13 @@
           prop="status"
       >
         <el-select
-            v-model="queryParams.status"
+            v-model="dataMap.queryParams.status"
             placeholder="部门状态"
             clearable
             size="small"
         >
           <el-option
-              v-for="dict in statusOptions"
+              v-for="dict in dataMap.statusOptions"
               :key="dict.dictValue"
               :label="dict.dictLabel"
               :value="dict.dictValue"
@@ -73,8 +73,8 @@
     </el-row>
 
     <el-table
-        v-loading="loading"
+        v-loading="dataMap.loading"
-        :data="deptList"
+        :data="dataMap.deptList"
         row-key="id"
         default-expand-all
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -128,41 +128,41 @@
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog
-        :title="title"
+        :title="dataMap.title"
-        v-model="open"
+        v-model="dataMap.open"
         width="600px"
         @open="dialogshow"
         @closed="cancel"
     >
       <el-form
           ref="formDialog"
-          :model="formVal"
+          :model="dataMap.formVal"
-          :rules="rules"
+          :rules="dataMap.rules"
           label-width="80px"
       >
-            <el-form-item
+        <el-form-item
-                label="上级部门"
+            label="上级部门"
-                prop="parentId"
+            prop="parentId"
-            >
+        >
-              <TreeSelect
+          <TreeSelect
-                  :treeProps="props"
+              :treeProps="dataMap.props"
-                  :options="deptOptions"
+              :options="dataMap.deptOptions"
-                  placeholder="选择上级部门"
+              placeholder="选择上级部门"
-                  :originOptions="originOptions"
+              :originOptions="dataMap.originOptions"
-                  :defalut="formVal.parentId"
+              :defalut="dataMap.formVal.parentId"
-                  :user="true"
+              :user="true"
-                  @callBack="getDeptId"
+              @callBack="getDeptId"
-                  :disabled="disabled"
+              :disabled="dataMap.disabled"
-              />
+          />
-            </el-form-item>
+        </el-form-item>
-            <el-form-item label="部门名称" prop="name">
+        <el-form-item label="部门名称" prop="name">
-              <el-input v-model="formVal.name" placeholder="请输入部门名称"/>
+          <el-input v-model="dataMap.formVal.name" placeholder="请输入部门名称"/>
-            </el-form-item>
+        </el-form-item>
         <el-form-item label="显示排序" prop="sort">
-          <el-input-number v-model="formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
+          <el-input-number v-model="dataMap.formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
         </el-form-item>
         <el-form-item label="部门状态">
-          <el-radio-group v-model="formVal.status">
+          <el-radio-group v-model="dataMap.formVal.status">
             <el-radio :label="1">正常</el-radio>
             <el-radio :label="0">禁用</el-radio>
           </el-radio-group>
@@ -188,221 +188,209 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, unref, ref } from 'vue'
+import {onMounted, reactive, unref, ref} from 'vue'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
-import { listDept, getDept, delDept, updateDept, addDept,getDeptSelectList } from '@/api/system/dept'
+import {listDept, getDept, delDept, updateDept, addDept, getDeptSelectList} from '@/api/system/dept'
-import TreeSelect  from '@/components/TreeSelect/Index.vue'
+import TreeSelect from '@/components/TreeSelect/Index.vue'
-import { ElForm, ElMessage } from 'element-plus'
+import {ElForm, ElMessage, ElMessageBox} from 'element-plus'
+import {del} from "@api/system/client";
 
-export default defineComponent({
+const dataMap = reactive({
-  components: {
+  disabled: false,
-    TreeSelect
+  isAdd: false,
+  originOptions: [],
+  props: { // 配置项（必选）
+    value: 'id',
+    label: 'label',
+    children: 'children'
+  },
+  loading: true,
+  // 显示搜索条件
+  showSearch: true,
+  // 表格树数据
+  deptList: [],
+  // 部门树选项
+  deptOptions: [],
+  // 弹出层标题
+  title: '',
+  // 是否显示弹出层
+  open: false,
+  // 状态数据字典
+  statusOptions: [
+    {
+      "dictValue": 0,
+      "dictLabel": "禁用"
+    },
+    {
+      "dictValue": 1,
+      "dictLabel": "正常"
+    }
+  ],
+  // 查询参数
+  queryParams: {
+    name: undefined,
+    status: undefined
+  },
+  formVal: {
+    id: '',
+    parentId: '',
+    name: '',
+    sort: 1,
+    status: ''
   },
-  setup() {
-    const queryForm = ref(ElForm)
-    const formDialog = ref(ElForm)
-    const dataMap = reactive({
-      disabled: false,
-      isAdd: false,
-      originOptions: [],
-      props: { // 配置项（必选）
-        value: 'id',
-        label: 'label',
-        children: 'children'
-        // disabled:true
-      },
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 表格树数据
-      deptList: [],
-      // 部门树选项
-      deptOptions: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
-      // 状态数据字典
-      statusOptions: [
-        {
-          "dictValue":0,
-          "dictLabel":"禁用"
-        },
-        {
-          "dictValue":1,
-          "dictLabel":"正常"
-        }
-      ],
-      // 查询参数
-      queryParams: {
-        name: undefined,
-        status: undefined
-      },
-      formVal: {
-        id: '',
-        parentId: '',
-        name: '',
-        sort: 1,
-        status: ''
-      },
 
-      deptidfix: 1,
+  deptidfix: 1,
-      // 表单参数校验
+  // 表单参数校验
-      rules: {
+  rules: {
-        parentId: [
+    parentId: [
-          { required: true, message: '上级部门不能为空', trigger: 'blur' }
+      {required: true, message: '上级部门不能为空', trigger: 'blur'}
-        ],
+    ],
-        name: [
+    name: [
-          { required: true, message: '部门名称不能为空', trigger: 'blur' }
+      {required: true, message: '部门名称不能为空', trigger: 'blur'}
-        ],
+    ],
-        sort: [
+    sort: [
-          { required: true, message: '显示排序不能为空', trigger: 'blur' }
+      {required: true, message: '显示排序不能为空', trigger: 'blur'}
-        ]
+    ]
-      }
-    })
-
-    /** 查询部门列表 */
-    const getList = () => {
-      dataMap.loading = true
-      listDept(dataMap.queryParams).then((response: any) => {
-        dataMap.deptList = response.data
-        dataMap.loading = false
-      })
-    }
-    /** 转换部门数据结构 */
-    const normalizer = (node: any) => {
-      if (node.children && !node.children.length) {
-        delete node.children
-      }
-      return {
-        id: node.id,
-        label: node.name,
-        children: node.children
-      }
-    }
-    // 取消按钮
-    const cancel = () => {
-      dataMap.open = false
-      dataMap.isAdd = false
-      dataMap.formVal =  {
-        id: '',
-        parentId: '',
-        name: '',
-        sort: 1,
-        status: ''
-      }
-    }
-
-    /** 搜索按钮操作 */
-    const handleQuery = () => {
-      getList()
-    }
-    /** 重置按钮操作 */
-    const resetQuery = () => {
-      const form = unref(queryForm)
-      form.resetFields()
-      handleQuery()
-    }
-
-    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))
-          result.push(item)
-        } else {
-          result.push(item)
-        }
-      }
-      return result
-    }
-    /** 查询部门下拉树结构 */
-    const getTreeselect = () => {
-      getDeptSelectList().then(response => {
-          dataMap.deptOptions = response.data
-          dataMap.originOptions = flatten(response?.data) as any
-      })
-    }
-    const handleAdd = (row: any) => {
-      dataMap.isAdd = true
-      if (row.id) {
-        dataMap.formVal.parentId = row.id.toString()
-      }
-      dataMap.open = true
-      dataMap.title = '添加部门'
-    }
-    /** 修改按钮操作 */
-    const handleUpdate = async(row: any) => {
-      dataMap.disabled = true
-      dataMap.isAdd = false
-      dataMap.deptidfix = row.id
-      const result = await getDept(row.id) as any
-      if (result?.code === "00000") {
-        dataMap.formVal = result.data
-        dataMap.title = '修改部门'
-        dataMap.open = true
-      }
-    }
-    /** 提交按钮 */
-    const submitForm = () => {
-      const formNode = unref(formDialog)
-      formNode.validate((valid: any) => {
-        if (valid) {
-          if (!dataMap.isAdd) {
-            updateDept( dataMap.deptidfix,dataMap.formVal).then((res: any) => {
-              if (res?.code === "00000") {
-                ElMessage.success('修改成功')
-                dataMap.open = false
-                getList()
-              } else {
-                dataMap.open = false
-                ElMessage.error(res?.msg)
-              }
-            })
-          } else {
-            addDept(dataMap.formVal).then((res: any) => {
-              if (res?.code === "00000") {
-                ElMessage.success('新增成功')
-                dataMap.open = false
-                getList()
-              } else {
-                dataMap.open = false
-                ElMessage.error(res?.msg)
-              }
-            })
-          }
-        }
-      })
-    }
-    /** 删除按钮操作 */
-    const handleDelete = async(row: any) => {
-      const result = await delDept(row.id) as any
-      if (result?.code === "00000") {
-        getList()
-      } else {
-        ElMessage.error(result?.msg)
-      }
-    }
-
-    const statusFormat = (row: any) => {
-      return row.status === '0' ? '正常' : '  停用'
-    }
-
-    const getDeptId = (e: any) => {
-      dataMap.formVal.parentId = e
-    }
-    const dialogshow = () => {
-      getTreeselect()
-    }
-    onMounted(() => {
-      getList()
-      getTreeselect()
-    })
-
-    return { ...toRefs(dataMap),Search,Plus,Edit,Delete,Refresh,dialogshow, getDeptId, flatten, formDialog, statusFormat, queryForm, getList, normalizer, handleDelete, cancel, handleQuery, resetQuery, handleAdd, handleUpdate, submitForm }
   }
 })
+const queryForm = ref(ElForm)
+const formDialog = ref(ElForm)
+
+/** 查询部门列表 */
+function getList() {
+  dataMap.loading = true
+  listDept(dataMap.queryParams).then((response: any) => {
+    dataMap.deptList = response.data
+    dataMap.loading = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  dataMap.open = false
+  dataMap.isAdd = false
+  dataMap.formVal = {
+    id: '',
+    parentId: '',
+    name: '',
+    sort: 1,
+    status: ''
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  const form = unref(queryForm)
+  form.resetFields()
+  handleQuery()
+}
+
+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))
+      result.push(item)
+    } else {
+      result.push(item)
+    }
+  }
+  return result
+}
+
+/** 查询部门下拉树结构 */
+function getTreeselect() {
+  getDeptSelectList().then(response => {
+    dataMap.deptOptions = response.data
+    dataMap.originOptions = flatten(response?.data) as any
+  })
+}
+
+function handleAdd(row: any) {
+  dataMap.isAdd = true
+  if (row.id) {
+    dataMap.formVal.parentId = row.id.toString()
+  }
+  dataMap.open = true
+  dataMap.title = '添加部门'
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row: any) {
+  dataMap.disabled = true
+  dataMap.isAdd = false
+  dataMap.deptidfix = row.id
+  try {
+    const result = await getDept(row.id) as any
+    dataMap.formVal = result.data
+    dataMap.title = '修改部门'
+    dataMap.open = true
+  } catch (e) {
+    console.log("获取部门数据失败")
+  }
+
+}
+
+/** 提交按钮 */
+function submitForm() {
+  const formNode = unref(formDialog)
+  formNode.validate((valid: any) => {
+    if (valid) {
+      if (!dataMap.isAdd) {
+        updateDept(dataMap.deptidfix, dataMap.formVal).then((res: any) => {
+          ElMessage.success('修改成功')
+          dataMap.open = false
+          getList()
+        })
+      } else {
+        addDept(dataMap.formVal).then((res: any) => {
+          ElMessage.success('新增成功')
+          dataMap.open = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+
+    ElMessageBox.confirm(`确认删除${row.name}部门?`, '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+       delDept(row.id).then(rps=>{
+         getList()
+         ElMessage.success('删除成功')
+       }).catch(e=>{
+         console.log(`删除失败:${e}`)
+       })
+      }).catch(() =>
+        ElMessage.info('已取消删除')
+    )
+}
+
+
+function getDeptId(e: any) {
+  dataMap.formVal.parentId = e
+}
+
+function dialogshow() {
+  getTreeselect()
+}
+
+onMounted(() => {
+  getList()
+  getTreeselect()
+})
 
 </script>