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

Former-commit-id: 4af1b0aa5aca3569f540e3bcad99f6e14741e855
2022-10-27 01:45:31 +08:00
parent 2fb3839594
commit c783b5420e
11 changed files with 389 additions and 603 deletions
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -5,7 +5,6 @@ export default {
 </script>

 <script setup lang="ts">
-// Vue依赖
 import {
  reactive,
  ref,
@@ -15,7 +14,7 @@ import {
  toRefs
 } from 'vue';

-// 导入API
+// api
 import {
  listUserPages,
  getUserFormData,
@@ -31,7 +30,6 @@ import {
 import { listDeptOptions } from '@/api/dept';
 import { listRoleOptions } from '@/api/role';

-// 组件依赖
 import {
  ElMessage,
  ElMessageBox,
@@ -54,12 +52,11 @@ import {
  UserItem,
  UserQueryParam,
  UserFormData,
-  UserImportFormData
+  UserImportData
 } from '@/types/api/user';

 import { Option, Dialog } from '@/types/common';

-// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
 const deptTreeRef = ref(ElTree); // 部门树
 const queryFormRef = ref(ElForm); // 查询表单
 const dataFormRef = ref(ElForm); // 用户表单
@@ -71,37 +68,27 @@ const state = reactive({
  // 遮罩层
  loading: true,
  // 选中数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
+  ids: [] as number[],
  // 总条数
  total: 0,
-  // 用户分页数据
  userList: [] as UserItem[],
-  // 弹窗属性
  dialog: {
    visible: false
  } as Dialog,
  deptName: undefined,
-  // 部门树选项
+  // 部门下拉项
  deptOptions: [] as Option[],
-  // 部门名称
-  // 性别状态字典
-  genderOptions: [] as any[],
-  // 角色选项
+  // 性别下拉项
+  genderOptions: [] as Option[],
+  // 角色下拉项
  roleOptions: [] as Option[],
-  // 表单参数
  formData: {
    status: 1
  } as UserFormData,
-  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10
  } as UserQueryParam,
-  // 表单校验
  rules: {
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    nickname: [
@@ -129,14 +116,14 @@ const state = reactive({
    title: '用户搭配',
    visible: false
  } as Dialog,
-  importFormData: {} as UserImportFormData,
+  importFormData: {} as UserImportData,
  excelFile: undefined as any,
  excelFilelist: [] as File[]
 });

 const {
+  ids,
  loading,
-  multiple,
  queryParams,
  userList,
  total,
@@ -151,9 +138,6 @@ const {
  excelFilelist
 } = toRefs(state);

-/**
- * 部门筛选
- */
 watchEffect(
  () => {
    deptTreeRef.value.filter(state.deptName);
@@ -164,7 +148,7 @@ watchEffect(
 );

 /**
- * 部门列表筛选
+ * 部门筛选
 */
 function filterDeptNode(value: string, data: any) {
  if (!value) {
@@ -182,16 +166,16 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
 }

 /**
- * 加载角色下拉列表
+ * 获取角色下拉项
 */
-async function loadRoleOptions() {
+async function getRoleOptions() {
  listRoleOptions().then(response => {
    state.roleOptions = response.data;
  });
 }

 /**
- * 用户状态修改
+ * 用户状态change
 */
 function handleStatusChange(row: { [key: string]: any }) {
  const text = row.status === 1 ? '启用' : '停用';
@@ -216,8 +200,8 @@ function handleStatusChange(row: { [key: string]: any }) {
 }

 /**
- * 用户查询
- **/
+ * 查询
+ */
 function handleQuery() {
  state.loading = true;
  listUserPages(state.queryParams).then(({ data }) => {
@@ -228,7 +212,7 @@ function handleQuery() {
 }

 /**
- * 重置查询
+ * 重置
 */
 function resetQuery() {
  queryFormRef.value.resetFields();
@@ -236,16 +220,14 @@ function resetQuery() {
 }

 /**
- * 表格行选中事件
+ * 行选中
 */
 function handleSelectionChange(selection: any) {
  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
 }

 /**
- * 密码重置
+ * 重置密码
 */
 function resetPassword(row: { [key: string]: any }) {
  ElMessageBox.prompt(
@@ -276,8 +258,8 @@ async function handleAdd() {
    title: '添加用户',
    visible: true
  };
-  await loadDeptOptions();
-  await loadRoleOptions();
+  await getDeptOptions();
+  await getRoleOptions();
 }

 /**
@@ -290,8 +272,8 @@ async function handleUpdate(row: { [key: string]: any }) {
  };

  const userId = row.id || state.ids;
-  await loadDeptOptions();
-  await loadRoleOptions();
+  await getDeptOptions();
+  await getRoleOptions();
  getUserFormData(userId).then(({ data }) => {
    formData.value = data;
  });
@@ -307,13 +289,13 @@ function submitForm() {
      if (userId) {
        updateUser(userId, state.formData).then(() => {
          ElMessage.success('修改用户成功');
-          cancel();
+          closeDialog();
          handleQuery();
        });
      } else {
        addUser(state.formData).then(() => {
          ElMessage.success('新增用户成功');
-          cancel();
+          closeDialog();
          handleQuery();
        });
      }
@@ -345,28 +327,27 @@ function handleDelete(row: { [key: string]: any }) {
 }

 /**
- * 取消
+ * 关闭用户弹窗
 */
-function cancel() {
+function closeDialog() {
  dialog.value.visible = false;
-  formData.value.id = undefined;
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
 }

 /**
- * 加载部门
+ * 获取部门下拉项
 */
-async function loadDeptOptions() {
+async function getDeptOptions() {
  listDeptOptions().then(response => {
    state.deptOptions = response.data;
  });
 }

 /**
- * 加载性别字典
+ * 获取性别下拉项
 */
-function loadGenderOptions() {
+function getGenderOptions() {
  proxy.$listDictItemsByTypeCode('gender').then((response: any) => {
    state.genderOptions = response?.data;
  });
@@ -394,11 +375,11 @@ function handleDownloadTemplate() {
 }

 /**
- * 显示导入弹窗
+ * 导入弹窗
 */
 async function showImportDialog() {
-  await loadDeptOptions();
-  await loadRoleOptions();
+  await getDeptOptions();
+  await getRoleOptions();
  importDialog.value.visible = true;
 }

@@ -470,20 +451,13 @@ function handleExport() {
  });
 }

-/**
- * 初始化数据
- */
-function loadData() {
+onMounted(() => {
  // 初始化性别字典
-  loadGenderOptions();
+  getGenderOptions();
  // 初始化部门
-  loadDeptOptions();
+  getDeptOptions();
  // 初始化用户列表数据
  handleQuery();
-}
-
-onMounted(() => {
-  loadData();
 });
 </script>

@@ -514,87 +488,82 @@ onMounted(() => {

      <!-- 用户数据 -->
      <el-col :span="20" :xs="24">
-        <el-card class="box-card">
+        <div class="search">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-row>
-              <el-col :span="18" :xs="24">
-                <el-form-item>
-                  <el-button
-                    type="success"
-                    :icon="Plus"
-                    @click="handleAdd"
-                    v-hasPerm="['sys:user:add']"
-                    >新增</el-button
-                  >
-                  <el-button
-                    type="danger"
-                    :icon="Delete"
-                    :disabled="multiple"
-                    @click="handleDelete"
-                    v-hasPerm="['sys:user:delete']"
-                    >删除</el-button
-                  >
-                </el-form-item>
+            <el-form-item label="关键字" prop="keywords">
+              <el-input
+                v-model="queryParams.keywords"
+                placeholder="用户名/昵称/手机号"
+                clearable
+                style="width: 200px"
+                @keyup.enter="handleQuery"
+              />
+            </el-form-item>

-                <el-form-item prop="keywords">
-                  <el-input
-                    v-model="queryParams.keywords"
-                    placeholder="用户名/昵称/手机号"
-                    clearable
-                    style="width: 200px"
-                    @keyup.enter="handleQuery"
-                  />
-                </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="全部"
+                clearable
+                style="width: 200px"
+              >
+                <el-option label="启用" value="1" />
+                <el-option label="禁用" value="0" />
+              </el-select>
+            </el-form-item>

-                <el-form-item prop="status">
-                  <el-select
-                    v-model="queryParams.status"
-                    placeholder="用户状态"
-                    clearable
-                    style="width: 200px"
-                  >
-                    <el-option label="正常" value="1" />
-                    <el-option label="禁用" value="0" />
-                  </el-select>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" :icon="Search" @click="handleQuery"
-                    >搜索</el-button
-                  >
-                  <el-button :icon="Refresh" @click="resetQuery"
-                    >重置</el-button
-                  >
-                </el-form-item>
-              </el-col>
-
-              <el-col :span="6" :xs="24" style="text-align: right">
-                <el-form-item>
-                  <el-dropdown split-button style="margin-left: 12px">
-                    导入
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item
-                          :icon="Download"
-                          @click="handleDownloadTemplate"
-                          >下载模板</el-dropdown-item
-                        >
-                        <el-dropdown-item :icon="Top" @click="showImportDialog"
-                          >导入数据</el-dropdown-item
-                        >
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                  <el-button
-                    :icon="Download"
-                    style="margin-left: 12px"
-                    @click="handleExport"
-                    >导出</el-button
-                  >
-                </el-form-item>
-              </el-col>
-            </el-row>
+            <el-form-item>
+              <el-button type="primary" :icon="Search" @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
          </el-form>
+        </div>
+
+        <el-card>
+          <template #header>
+            <el-form-item style="float: left">
+              <el-button
+                type="success"
+                :icon="Plus"
+                @click="handleAdd"
+                v-hasPerm="['sys:user:add']"
+                >新增</el-button
+              >
+              <el-button
+                type="danger"
+                :icon="Delete"
+                :disabled="ids.length === 0"
+                @click="handleDelete"
+                v-hasPerm="['sys:user:delete']"
+                >删除</el-button
+              >
+            </el-form-item>
+            <el-form-item style="float: right">
+              <el-dropdown split-button style="margin-left: 12px">
+                导入
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      :icon="Download"
+                      @click="handleDownloadTemplate"
+                      >下载模板</el-dropdown-item
+                    >
+                    <el-dropdown-item :icon="Top" @click="showImportDialog"
+                      >导入数据</el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <el-button
+                :icon="Download"
+                style="margin-left: 12px"
+                @click="handleExport"
+                >导出</el-button
+              >
+            </el-form-item>
+          </template>

          <el-table
            v-loading="loading"
@@ -689,7 +658,7 @@ onMounted(() => {
      v-model="dialog.visible"
      width="600px"
      append-to-body
-      @close="cancel"
+      @close="closeDialog"
    >
      <el-form
        ref="dataFormRef"
@@ -765,12 +734,12 @@ 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>

-    <!--用户导入弹窗-->
+    <!-- import dialog -->
    <el-dialog
      :title="importDialog.title"
      v-model="importDialog.visible"
@@ -842,5 +811,3 @@ onMounted(() => {
    </el-dialog>
  </div>
 </template>
-
-<style lang="scss" scoped></style>