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)

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,16 +128,16 @@
 
     <!-- 添加或修改部门对话框 -->
     <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
@@ -145,24 +145,24 @@
             prop="parentId"
         >
           <TreeSelect
-                  :treeProps="props"
+              :treeProps="dataMap.props"
-                  :options="deptOptions"
+              :options="dataMap.deptOptions"
               placeholder="选择上级部门"
-                  :originOptions="originOptions"
+              :originOptions="dataMap.originOptions"
-                  :defalut="formVal.parentId"
+              :defalut="dataMap.formVal.parentId"
               :user="true"
               @callBack="getDeptId"
-                  :disabled="disabled"
+              :disabled="dataMap.disabled"
           />
         </el-form-item>
         <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 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,20 +188,14 @@
   </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 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({
-  components: {
-    TreeSelect
-  },
-  setup() {
-    const queryForm = ref(ElForm)
-    const formDialog = ref(ElForm)
 const dataMap = reactive({
   disabled: false,
   isAdd: false,
@@ -210,7 +204,6 @@ export default defineComponent({
     value: 'id',
     label: 'label',
     children: 'children'
-        // disabled:true
   },
   loading: true,
   // 显示搜索条件
@@ -261,28 +254,20 @@ export default defineComponent({
     ]
   }
 })
+const queryForm = ref(ElForm)
+const formDialog = ref(ElForm)
 
 /** 查询部门列表 */
-    const getList = () => {
+function 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 = () => {
+function cancel() {
   dataMap.open = false
   dataMap.isAdd = false
   dataMap.formVal = {
@@ -295,17 +280,18 @@ export default defineComponent({
 }
 
 /** 搜索按钮操作 */
-    const handleQuery = () => {
+function handleQuery() {
   getList()
 }
+
 /** 重置按钮操作 */
-    const resetQuery = () => {
+function resetQuery() {
   const form = unref(queryForm)
   form.resetFields()
   handleQuery()
 }
 
-    const flatten = (origin: any) => {
+function flatten(origin: any) {
   let result: any = []
   for (let i = 0; i < origin.length; i++) {
     const item = origin[i]
@@ -318,14 +304,16 @@ export default defineComponent({
   }
   return result
 }
+
 /** 查询部门下拉树结构 */
-    const getTreeselect = () => {
+function getTreeselect() {
   getDeptSelectList().then(response => {
     dataMap.deptOptions = response.data
     dataMap.originOptions = flatten(response?.data) as any
   })
 }
-    const handleAdd = (row: any) => {
+
+function handleAdd(row: any) {
   dataMap.isAdd = true
   if (row.id) {
     dataMap.formVal.parentId = row.id.toString()
@@ -333,76 +321,76 @@ export default defineComponent({
   dataMap.open = true
   dataMap.title = '添加部门'
 }
+
 /** 修改按钮操作 */
-    const handleUpdate = async(row: any) => {
+async function handleUpdate(row: any) {
   dataMap.disabled = true
   dataMap.isAdd = false
   dataMap.deptidfix = row.id
+  try {
     const result = await getDept(row.id) as any
-      if (result?.code === "00000") {
     dataMap.formVal = result.data
     dataMap.title = '修改部门'
     dataMap.open = true
+  } catch (e) {
+    console.log("获取部门数据失败")
   }
+
 }
+
 /** 提交按钮 */
-    const submitForm = () => {
+function 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) => {
+async function handleDelete(row: any) {
-      const result = await delDept(row.id) as any
+
-      if (result?.code === "00000") {
+    ElMessageBox.confirm(`确认删除${row.name}部门?`, '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+       delDept(row.id).then(rps=>{
          getList()
-      } else {
+         ElMessage.success('删除成功')
-        ElMessage.error(result?.msg)
+       }).catch(e=>{
-      }
+         console.log(`删除失败:${e}`)
+       })
+      }).catch(() =>
+        ElMessage.info('已取消删除')
+    )
 }
 
-    const statusFormat = (row: any) => {
-      return row.status === '0' ? '正常' : '  停用'
-    }
 
-    const getDeptId = (e: any) => {
+function getDeptId(e: any) {
   dataMap.formVal.parentId = e
 }
-    const dialogshow = () => {
+
+function 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 }
-  }
-})
-
 </script>