refactor: 页面布局样式优化和接口合理性优化

Former-commit-id: 4af1b0aa5aca3569f540e3bcad99f6e14741e855

src/views/system/dept/index.vue

@@ -5,10 +5,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-// Vue依赖
 import { onMounted, reactive, ref, toRefs } from 'vue';
 
-// API依赖
 import {
   getDeptForm,
   deleteDept,
@@ -18,36 +16,27 @@ import {
   listDepartments
 } from '@/api/dept';
 
-// 组件依赖
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
 import { DeptFormData, DeptItem, DeptQueryParam } from '@/types/api/dept';
 import { Dialog, Option } from '@/types/common';
 
-// DOM元素的引用声明定义
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
 
 const state = reactive({
+  loading: false,
   // 选中ID数组
   ids: [] as number[],
-  // 非单个禁用
-  single: true,
-  loading: true,
   // 表格树数据
-  deptList: [] as DeptItem[],
-  // 部门下拉选项
+  dataList: [] as DeptItem[],
   deptOptions: [] as Option[],
-  // 弹窗属性
   dialog: { visible: false } as Dialog,
-  // 查询参数
   queryParams: {} as DeptQueryParam,
-  // 表单数据
   formData: {
     sort: 1,
     status: 1
   } as DeptFormData,
-  // 表单参数校验
   rules: {
     parentId: [
       { required: true, message: '上级部门不能为空', trigger: 'blur' }
@@ -58,9 +47,9 @@ const state = reactive({
 });
 
 const {
-  single,
+  ids,
   loading,
-  deptList,
+  dataList,
   deptOptions,
   queryParams,
   formData,
@@ -69,18 +58,18 @@ const {
 } = toRefs(state);
 
 /**
- * 部门查询
+ * 查询
  */
 function handleQuery() {
-  state.loading = true;
+  loading.value = true;
   listDepartments(state.queryParams).then(({ data }) => {
-    state.deptList = data;
-    state.loading = false;
+    dataList.value = data;
+    loading.value = false;
   });
 }
 
 /**
- * 重置查询
+ * 重置
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
@@ -89,13 +78,12 @@ function resetQuery() {
 
 function handleSelectionChange(selection: any) {
   state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length === 0;
 }
 
 /**
- * 加载部门下拉数据源
+ * 获取部门下拉数据
  */
-async function loadDeptData() {
+async function getDeptOptions() {
   const deptOptions: any[] = [];
   listDeptOptions().then(response => {
     const rootDeptOption = {
@@ -109,23 +97,23 @@ async function loadDeptData() {
 }
 
 /**
- * 添加部门
+ * 添加
  */
 function handleAdd(row: any) {
-  loadDeptData();
-  state.formData.id = undefined;
-  state.formData.parentId = row.id;
-  state.dialog = {
+  getDeptOptions();
+  formData.value.id = undefined;
+  formData.value.parentId = row.id;
+  dialog.value = {
     title: '添加部门',
     visible: true
   };
 }
 
 /**
- * 修改部门
+ * 修改
  */
 async function handleUpdate(row: any) {
-  await loadDeptData();
+  await getDeptOptions();
   const deptId = row.id || state.ids;
   state.dialog = {
     title: '修改部门',
@@ -137,7 +125,7 @@ async function handleUpdate(row: any) {
 }
 
 /**
- * 部门表单提交
+ * 提交
  */
 function submitForm() {
   dataFormRef.value.validate((valid: any) => {
@@ -145,13 +133,13 @@ function submitForm() {
       if (state.formData.id) {
         updateDept(state.formData.id, state.formData).then(() => {
           ElMessage.success('修改成功');
-          cancel();
+          closeDialog();
           handleQuery();
         });
       } else {
         addDept(state.formData).then(() => {
           ElMessage.success('新增成功');
-          cancel();
+          closeDialog();
           handleQuery();
         });
       }
@@ -160,12 +148,15 @@ function submitForm() {
 }
 
 /**
- * 删除部门
- *
- * @param row
+ * 删除
  */
 function handleDelete(row: any) {
   const ids = [row.id || state.ids].join(',');
+  if (!ids) {
+    ElMessage.warning('请勾选删除项');
+    return;
+  }
+
   ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -185,11 +176,10 @@ function handleDelete(row: any) {
 }
 
 /**
- * 取消/关闭弹窗
+ * 关闭弹窗
  **/
-function cancel() {
+function closeDialog() {
   dialog.value.visible = false;
-  formData.value.id = undefined;
   dataFormRef.value.resetFields();
   dataFormRef.value.clearValidate();
 }
@@ -200,110 +190,116 @@ onMounted(() => {
 </script>
 <template>
   <div class="app-container">
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
+    <div class="search">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="部门名称"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="部门状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="部门状态"
+            clearable
+          >
+            <el-option :value="1" label="正常" />
+            <el-option :value="0" label="禁用" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            class="filter-item"
+            type="primary"
+            :icon="Search"
+            @click="handleQuery"
+          >
+            搜索
+          </el-button>
+          <el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card>
+      <!--toolbar-->
+      <template #header>
         <el-button type="success" :icon="Plus" @click="handleAdd"
           >新增</el-button
         >
         <el-button
           type="danger"
           :icon="Delete"
-          :disabled="single"
           @click="handleDelete"
+          :disabled="ids.length === 0"
           >删除
         </el-button>
-      </el-form-item>
+      </template>
 
-      <el-form-item prop="keywords">
-        <el-input
-          v-model="queryParams.keywords"
-          placeholder="请输入部门名称"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
+      <!--table-->
+      <el-table
+        v-loading="loading"
+        :data="dataList"
+        row-key="id"
+        default-expand-all
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="name" label="部门名称" min-width="300" />
+        <el-table-column prop="status" label="状态" width="200">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
 
-      <el-form-item prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="部门状态"
-          clearable
-        >
-          <el-option :value="1" label="正常" />
-          <el-option :value="0" label="禁用" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          class="filter-item"
-          type="primary"
-          :icon="Search"
-          @click="handleQuery"
-        >
-          搜索
-        </el-button>
-        <el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
-      </el-form-item>
-    </el-form>
+        <el-table-column prop="sort" label="排序" width="200" />
 
-    <el-table
-      v-loading="loading"
-      :data="deptList"
-      row-key="id"
-      default-expand-all
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column prop="name" label="部门名称" min-width="300" />
-      <el-table-column prop="status" label="状态" width="200">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
-          <el-tag v-else type="info">禁用</el-tag>
-        </template>
-      </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="250" />
+        <el-table-column prop="updateTime" label="修改时间" width="250" />
 
-      <el-table-column prop="sort" label="排序" width="200" />
+        <el-table-column label="操作" align="center" width="150">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              :icon="Edit"
+              circle
+              plain
+              @click.stop="handleUpdate(scope.row)"
+            >
+            </el-button>
+            <el-button
+              type="success"
+              :icon="Plus"
+              circle
+              plain
+              @click.stop="handleAdd(scope.row)"
+            >
+            </el-button>
 
-      <el-table-column prop="createTime" label="创建时间" width="250" />
-      <el-table-column prop="updateTime" label="修改时间" width="250" />
+            <el-button
+              type="danger"
+              :icon="Delete"
+              circle
+              plain
+              @click.stop="handleDelete(scope.row)"
+            >
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          >
-          </el-button>
-          <el-button
-            type="success"
-            :icon="Plus"
-            circle
-            plain
-            @click.stop="handleAdd(scope.row)"
-          >
-          </el-button>
-
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          >
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 添加或修改部门对话框 -->
+    <!-- dialog -->
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
       width="600px"
-      @closed="cancel"
+      @closed="closeDialog"
     >
       <el-form
         ref="dataFormRef"
@@ -343,7 +339,7 @@ onMounted(() => {
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm"> 确 定 </el-button>
-          <el-button @click="cancel"> 取 消 </el-button>
+          <el-button @click="closeDialog"> 取 消 </el-button>
         </div>
       </template>
     </el-dialog>