feat: 暗黑模式临时提交

Former-commit-id: 8653f21636d0c32f48caae65a52aca98cbef8710

src/views/system/menu/index.vue

@@ -1,3 +1,215 @@
+<script lang="ts">
+export default {
+  name: 'cmenu'
+};
+</script>
+
+<script setup lang="ts">
+import { MenuQuery, MenuForm, Menu } from '@/api/menu/types';
+// API 依赖
+import {
+  listMenus,
+  getMenuDetail,
+  listMenuOptions,
+  addMenu,
+  deleteMenus,
+  updateMenu
+} from '@/api/menu';
+
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import IconSelect from '@/components/IconSelect/index.vue';
+
+const emit = defineEmits(['menuClick']);
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  queryParams: {} as MenuQuery,
+  menuList: [] as Menu[],
+  dialog: { visible: false } as DialogType,
+  formData: {
+    parentId: '0',
+    name: '',
+    visible: 1,
+    sort: 1,
+    component: undefined,
+    type: 'MENU'
+  } as MenuForm,
+  rules: {
+    parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
+    path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
+    component: [
+      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
+    ]
+  },
+  menuOptions: [] as OptionType[],
+  currentRow: undefined,
+  cacheData: {
+    menuType: '',
+    menuPath: ''
+  }
+});
+
+const {
+  loading,
+  queryParams,
+  menuList,
+  dialog,
+  formData,
+  rules,
+  menuOptions,
+  cacheData
+} = toRefs(state);
+
+/**
+ * 查询
+ */
+function handleQuery() {
+  // 重置父组件
+  emit('menuClick', null);
+  loading.value = true;
+  listMenus(state.queryParams).then(({ data }) => {
+    menuList.value = data;
+    loading.value = false;
+  });
+}
+
+/**
+ * 下拉菜单
+ */
+async function loadMenuData() {
+  listMenuOptions().then(({ data }) => {
+    menuOptions.value = [{ value: '0', label: '顶级菜单', children: data }];
+  });
+}
+
+/**
+ * 查询重置
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+function handleRowClick(row: any) {
+  state.currentRow = JSON.parse(JSON.stringify(row));
+  emit('menuClick', row);
+}
+
+/**
+ * 新增菜单
+ */
+async function handleAdd(row: any) {
+  dialog.value = {
+    title: '添加菜单',
+    visible: true
+  };
+  await loadMenuData();
+  if (row.id) {
+    // 行点击新增
+    formData.value.parentId = row.id;
+  } else {
+    // 工具栏新增
+    if (state.currentRow) {
+      // 选择行
+      formData.value.parentId = (state.currentRow as any).id;
+    } else {
+      // 未选择行
+      formData.value.parentId = '0';
+    }
+  }
+}
+
+/**
+ * 编辑菜单
+ */
+async function handleUpdate(row: MenuForm) {
+  await loadMenuData();
+  dialog.value = {
+    title: '编辑菜单',
+    visible: true
+  };
+  const id = row.id as string;
+  getMenuDetail(id).then(({ data }) => {
+    state.formData = data;
+    cacheData.value.menuType = data.type;
+    cacheData.value.menuPath = data.path;
+  });
+}
+
+/**
+ * 菜单类型 change
+ */
+function handleMenuTypeChange(menuType: any) {
+  if (menuType !== cacheData.value.menuType) {
+    formData.value.path = '';
+  } else {
+    formData.value.path = cacheData.value.menuPath;
+  }
+}
+
+/**
+ * 菜单提交
+ */
+function submitForm() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      if (state.formData.id) {
+        updateMenu(state.formData.id, state.formData).then(() => {
+          ElMessage.success('修改成功');
+          cancel();
+          handleQuery();
+        });
+      } else {
+        addMenu(state.formData).then(() => {
+          ElMessage.success('新增成功');
+          cancel();
+          handleQuery();
+        });
+      }
+    }
+  });
+}
+
+/**
+ * 删除菜单
+ *
+ */
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',');
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      deleteMenus(ids).then(() => {
+        ElMessage.success('删除成功');
+        handleQuery();
+      });
+    })
+    .catch(() => ElMessage.info('已取消删除'));
+}
+
+/**
+ * 取消关闭弹窗
+ */
+function cancel() {
+  formData.value.id = undefined;
+  dataFormRef.value.resetFields();
+  dialog.value.visible = false;
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
 <template>
   <div class="app-container">
     <div class="search">
@@ -11,10 +223,13 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" :icon="Search" @click="handleQuery"
-            >搜索</el-button
+          <el-button type="primary" @click="handleQuery"
+            ><template #icon><i-ep-search /></template>搜索</el-button
+          >
+          <el-button @click="resetQuery">
+            <template #icon><i-ep-refresh /></template>
+            重置</el-button
           >
-          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -22,8 +237,9 @@
     <!-- 数据表格 -->
     <el-card shadow="never">
       <template #header>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
+        <el-button type="success" @click="handleAdd">
+          <template #icon><i-ep-plus /></template>
+          新增</el-button
         >
       </template>
 
@@ -122,7 +338,6 @@
       </el-table>
     </el-card>
 
-    <!-- dialog -->
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
@@ -251,214 +466,3 @@
     </el-dialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import { Search, Plus, Refresh } from '@element-plus/icons-vue';
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-
-import { MenuQuery, MenuForm, Menu } from '@/api/menu/types';
-// API 依赖
-import {
-  listMenus,
-  getMenuDetail,
-  listMenuOptions,
-  addMenu,
-  deleteMenus,
-  updateMenu
-} from '@/api/menu';
-
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import IconSelect from '@/components/IconSelect/index.vue';
-
-const emit = defineEmits(['menuClick']);
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  queryParams: {} as MenuQuery,
-  menuList: [] as Menu[],
-  dialog: { visible: false } as DialogType,
-  formData: {
-    parentId: '0',
-    name: '',
-    visible: 1,
-    sort: 1,
-    component: undefined,
-    type: 'MENU'
-  } as MenuForm,
-  rules: {
-    parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
-    name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
-    type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
-    path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
-    component: [
-      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
-    ]
-  },
-  menuOptions: [] as OptionType[],
-  currentRow: undefined,
-  cacheData: {
-    menuType: '',
-    menuPath: ''
-  }
-});
-
-const {
-  loading,
-  queryParams,
-  menuList,
-  dialog,
-  formData,
-  rules,
-  menuOptions,
-  cacheData
-} = toRefs(state);
-
-/**
- * 查询
- */
-function handleQuery() {
-  // 重置父组件
-  emit('menuClick', null);
-  loading.value = true;
-  listMenus(state.queryParams).then(({ data }) => {
-    menuList.value = data;
-    loading.value = false;
-  });
-}
-
-/**
- * 下拉菜单
- */
-async function loadMenuData() {
-  await listMenuOptions().then(({ data }) => {
-    menuOptions.value = [{ value: '0', label: '顶级菜单', children: data }];
-  });
-}
-
-/**
- * 查询重置
- */
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleRowClick(row: any) {
-  state.currentRow = JSON.parse(JSON.stringify(row));
-  emit('menuClick', row);
-}
-
-/**
- * 新增菜单
- */
-async function handleAdd(row: any) {
-  formData.value.id = undefined;
-  await loadMenuData();
-  dialog.value = {
-    title: '添加菜单',
-    visible: true
-  };
-
-  if (row.id) {
-    // 行点击新增
-    formData.value.parentId = row.id;
-  } else {
-    // 工具栏新增
-    if (state.currentRow) {
-      // 选择行
-      formData.value.parentId = (state.currentRow as any).id;
-    } else {
-      // 未选择行
-      formData.value.parentId = '0';
-    }
-  }
-}
-
-/**
- * 编辑菜单
- */
-async function handleUpdate(row: MenuForm) {
-  await loadMenuData();
-  dialog.value = {
-    title: '编辑菜单',
-    visible: true
-  };
-  const id = row.id as string;
-  getMenuDetail(id).then(({ data }) => {
-    state.formData = data;
-    cacheData.value.menuType = data.type;
-    cacheData.value.menuPath = data.path;
-  });
-}
-
-/**
- * 菜单类型 change
- */
-function handleMenuTypeChange(menuType: any) {
-  if (menuType !== cacheData.value.menuType) {
-    formData.value.path = '';
-  } else {
-    formData.value.path = cacheData.value.menuPath;
-  }
-}
-
-/**
- * 菜单提交
- */
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateMenu(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改成功');
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addMenu(state.formData).then(() => {
-          ElMessage.success('新增成功');
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 删除菜单
- *
- * @param row
- */
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      deleteMenus(ids).then(() => {
-        ElMessage.success('删除成功');
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-/**
- * 取消关闭弹窗
- */
-function cancel() {
-  dataFormRef.value.resetFields();
-  state.dialog.visible = false;
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>

src/views/system/role/index.vue

@@ -40,14 +40,17 @@ const state = reactive({
     title: '',
     visible: false
   } as DialogType,
-  formData: {} as RoleForm,
+  formData: {
+    sort: 1,
+    status: 1
+  } as RoleForm,
   rules: {
     name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
     code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
     dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
     status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
   },
-  allocationDialogVisible: false,
+  resourceDialogVisible: false,
   resourceOptions: [] as OptionType[],
   // 勾选的菜单ID
   checkedMenuIds: new Set([]),
@@ -67,7 +70,7 @@ const {
   dialog,
   formData,
   rules,
-  allocationDialogVisible,
+  resourceDialogVisible,
   checkedRole,
   resourceOptions
 } = toRefs(state);
@@ -171,8 +174,8 @@ function handleDelete(row: any) {
 /**
  * 资源分配弹窗
  */
-function showAllocationDialog(row: Role) {
-  allocationDialogVisible.value = true;
+function openResourceDialog(row: Role) {
+  resourceDialogVisible.value = true;
   loading.value = true;
 
   const roleId: any = row.id;
@@ -206,7 +209,7 @@ function handleAllocationSubmit() {
 
   updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
     ElMessage.success('分配权限成功');
-    allocationDialogVisible.value = false;
+    resourceDialogVisible.value = false;
     handleQuery();
   });
 }
@@ -214,8 +217,8 @@ function handleAllocationSubmit() {
 /**
  * 关闭资源弹窗
  */
-function closeAllocationDialog() {
-  allocationDialogVisible.value = false;
+function closeResourceDailog() {
+  resourceDialogVisible.value = false;
 }
 
 onMounted(() => {
@@ -288,7 +291,7 @@ onMounted(() => {
             <el-button
               type="success"
               link
-              @click.stop="showAllocationDialog(scope.row)"
+              @click.stop="openResourceDialog(scope.row)"
             >
               资源分配
             </el-button>
@@ -306,12 +309,12 @@ onMounted(() => {
         </el-table-column>
       </el-table>
 
-      <!-- pagination -->
+      <!-- 分页 -->
       <pagination
         v-if="total > 0"
         :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
+        :page="queryParams.pageNum"
+        :limit="queryParams.pageSize"
         @pagination="handleQuery"
       />
     </el-card>
@@ -374,7 +377,7 @@ onMounted(() => {
     <!-- assign permission dialog -->
     <el-dialog
       :title="'【' + checkedRole.name + '】资源分配'"
-      v-model="allocationDialogVisible"
+      v-model="resourceDialogVisible"
       width="800px"
     >
       <el-scrollbar max-height="600px" v-loading="loading">
@@ -396,7 +399,7 @@ onMounted(() => {
           <el-button type="primary" @click="handleAllocationSubmit"
             >确 定</el-button
           >
-          <el-button @click="closeAllocationDialog">取 消</el-button>
+          <el-button @click="closeResourceDailog">取 消</el-button>
         </div>
       </template>
     </el-dialog>