333 lines
12 KiB
Vue
333 lines
12 KiB
Vue
<!-- 菜单列表 -->
|
|
<template>
|
|
<div class="table-box">
|
|
<div style="padding-bottom: 16px">
|
|
<el-button type="primary" @click="handleAdd"> 添加 </el-button>
|
|
<el-button type="primary" @click="handleExport"> 导出 </el-button>
|
|
<el-button type="primary" @click="handleImport"> 导入 </el-button>
|
|
</div>
|
|
<!-- default-expand-all -->
|
|
<div class="card table-main">
|
|
<SearchForm
|
|
:search="search"
|
|
:reset="reset"
|
|
:formData="dataStore.searchFormData"
|
|
:search-param="dataStore.searchParam"
|
|
/>
|
|
<el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
|
|
<el-table-column prop="id" label="id" />
|
|
<el-table-column prop="title" label="菜单名称" />
|
|
<el-table-column prop="icon" label="图标">
|
|
<template #default="{ row }">
|
|
<!-- {{ row.status === 1 ? "✔️" : "❌" }} -->
|
|
<i class="icon iconfont" :class="row.icon"></i>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="component" label="组件路径" />
|
|
<el-table-column prop="path" label="访问路径" />
|
|
<el-table-column prop="sort" label="菜单栏排序">
|
|
<template #default="{ row }">
|
|
<div @click.stop="">
|
|
<el-input v-model="row.sort" @blur="handleBlur(row)" @input="handleInput(row)" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="hidden" label="是否显示" :width="100">
|
|
<template #default="{ row }">
|
|
{{ row.hidden === 0 ? "❌" : "✔️" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="是否启用" :width="100">
|
|
<template #default="{ row }">
|
|
{{ row.status === 1 ? "✔️" : "❌" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" :width="160">
|
|
<template #default="scope">
|
|
<el-button type="primary" size="small" @click="getMenusListDetails(scope.row.id)">编辑</el-button>
|
|
|
|
<el-button size="small" type="danger" @click="getMenusListDel(scope.row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-drawer
|
|
v-model="dataStore.visible"
|
|
:show-close="true"
|
|
:size="600"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:before-close="handleBeforeClone"
|
|
destroy-on-close
|
|
>
|
|
<template #header="{ titleId, titleClass }">
|
|
<h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
|
|
</template>
|
|
<div>
|
|
<rulesForm
|
|
:ruleForm="dataStore.editRuleForm"
|
|
:formData="dataStore.editFormData"
|
|
:rules="dataStore.rules"
|
|
ref="formRef"
|
|
@handleInputButton="handleInputButtonClick"
|
|
@handleSelectChangeEmits="handleSelectChangeEmits"
|
|
>
|
|
</rulesForm>
|
|
</div>
|
|
<template #footer>
|
|
<div style="flex: auto">
|
|
<el-button @click="handleResetClick">重置</el-button>
|
|
<el-button type="primary" @click="handleConfirmClick">确认</el-button>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
<el-dialog v-model="dataStore.dialogTableVisible" title="图标库">
|
|
<div style="display: flex; flex-wrap: wrap; height: 400px; overflow-y: auto">
|
|
<div
|
|
v-for="(item, index) in dataStore.icons"
|
|
:key="index"
|
|
style="
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 132px;
|
|
height: 80px;
|
|
cursor: pointer;
|
|
"
|
|
@click="handleIconsItem(item)"
|
|
>
|
|
<span class="icon iconfont" :class="item" style="font-size: 30px"> </span>
|
|
<span style="font-size: 14px">{{ item }}</span>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<ImportExcel ref="importRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="webMenuIndex">
|
|
import rulesForm from "@/components/rulesForm/index.vue";
|
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
|
import SearchForm from "@/components/SearchForm/index.vue";
|
|
import { integerRexg } from "@/utils/regexp/index";
|
|
import { useExport } from "@/hooks/useExport";
|
|
//列表接口
|
|
import {
|
|
getMenusListApi,
|
|
getMenusListDelApi,
|
|
getMenusListDetailsApi,
|
|
getMenusListUpApi,
|
|
getMenusLisSaveApi,
|
|
getMenusLisExportApi,
|
|
getMenusLisImportApi,
|
|
getRoleMenusListApi,
|
|
getMenusLisSortApi
|
|
} from "@/api/modules/webMenusList";
|
|
//getMenusListApi
|
|
// import { getRoleMenusListApi } from "@/api/modules/webMenusList";
|
|
import { messageBox } from "@/utils/messageBox";
|
|
import { useMsg } from "@/hooks/useMsg";
|
|
//深拷贝方法
|
|
import { cloneDeep } from "lodash-es";
|
|
//表格和搜索條件
|
|
import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, ICONS } from "./constant/index";
|
|
const importRef = ref();
|
|
const formRef: any = ref(null);
|
|
// 数据源
|
|
const dataStore = reactive<any>({
|
|
title: "添加菜单",
|
|
dialogTableVisible: false,
|
|
icons: ICONS,
|
|
columns: COLUMNS, //列表配置项
|
|
tableData: [], //表格数据
|
|
rules: cloneDeep(RULES), //抽屉表单验证
|
|
editRuleForm: cloneDeep(EDIT_RULE_FORM),
|
|
editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
|
|
searchParam: cloneDeep(RULE_FORM), // 搜索參數
|
|
searchFormData: FORM_DATA, //搜索配置项
|
|
visible: false,
|
|
selectRow: {} //当前选择的row
|
|
});
|
|
|
|
//抽屉确认
|
|
const handleConfirmClick = () => {
|
|
if (!formRef?.value?.ruleFormRef) return;
|
|
formRef?.value?.ruleFormRef?.validate((valid: any) => {
|
|
if (valid) {
|
|
console.log("submit!");
|
|
dataStore.title === "编辑菜单" ? getMenusListUp() : getMenusLisSave();
|
|
} else {
|
|
console.log("error submit!");
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
//列表
|
|
const getMenusList = async () => {
|
|
const result = await getMenusListApi(dataStore.searchParam);
|
|
if (result?.code === 0) {
|
|
dataStore.tableData = result?.data;
|
|
}
|
|
};
|
|
getMenusList();
|
|
|
|
const addLabelRecursively = (data: any): any => {
|
|
if (Array.isArray(data)) {
|
|
// 如果传入的是数组，遍历数组中的每个元素并递归调用该函数
|
|
return data.map(item => addLabelRecursively(item));
|
|
} else if (typeof data === "object" && data !== null) {
|
|
// 如果传入的是对象
|
|
data.label = data.title;
|
|
data.value = data.id;
|
|
if (data.children && Array.isArray(data.children)) {
|
|
// 如果对象有 children 属性且 children 是数组，递归处理 children
|
|
data.children = addLabelRecursively(data.children);
|
|
}
|
|
return data;
|
|
}
|
|
return data;
|
|
};
|
|
|
|
//权限管理
|
|
const getRoleMenusList = async () => {
|
|
const result = await getRoleMenusListApi();
|
|
if (result?.code === 0) {
|
|
dataStore.editFormData[3].options = addLabelRecursively(result?.data);
|
|
dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
|
|
}
|
|
};
|
|
getRoleMenusList();
|
|
//排序接口
|
|
const getMenusLisSort = async (row: any) => {
|
|
const result = await getMenusLisSortApi(row);
|
|
if (result?.code === 0) {
|
|
useMsg("success", result?.msg);
|
|
getMenusList();
|
|
}
|
|
};
|
|
|
|
//sort输入
|
|
const handleInput = (row: any) => {
|
|
row.sort = integerRexg(row.sort);
|
|
};
|
|
//sort请求
|
|
const handleBlur = (row: any) => {
|
|
console.log(row, "=======row=========");
|
|
getMenusLisSort(row);
|
|
};
|
|
const handleInputButtonClick = () => {
|
|
console.log("点击");
|
|
dataStore.dialogTableVisible = true;
|
|
};
|
|
|
|
//重置验证状态
|
|
const resetFields = () => {
|
|
if (!formRef?.value?.ruleFormRef) return;
|
|
formRef?.value?.ruleFormRef.resetFields();
|
|
};
|
|
//抽屉重置
|
|
const handleResetClick = () => {
|
|
dataStore.title === "编辑菜单" ? getMenusListDetails(dataStore.editRuleForm.id) : resetFields();
|
|
};
|
|
//添加
|
|
const handleAdd = () => {
|
|
dataStore.title = "添加菜单";
|
|
dataStore.visible = true;
|
|
resetFields();
|
|
};
|
|
//抽屉关闭前的钩子
|
|
const handleBeforeClone = () => {
|
|
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
|
resetFields();
|
|
dataStore.visible = false;
|
|
};
|
|
|
|
const handleIconsItem = (item: any) => {
|
|
dataStore.editRuleForm.icon = item;
|
|
dataStore.dialogTableVisible = false;
|
|
};
|
|
//删除
|
|
const getMenusListDel = async (id: any) => {
|
|
messageBox("你确定要删除?", async () => {
|
|
const result = await getMenusListDelApi(id);
|
|
if (result?.code === 0) {
|
|
const { msg } = result;
|
|
useMsg("success", msg);
|
|
getMenusList();
|
|
}
|
|
});
|
|
};
|
|
//详情
|
|
const getMenusListDetails = async (id: any) => {
|
|
dataStore.title = "编辑菜单";
|
|
dataStore.visible = true;
|
|
const result = await getMenusListDetailsApi(id);
|
|
if (result?.code === 0) {
|
|
dataStore.editRuleForm = result?.data;
|
|
}
|
|
};
|
|
//更新
|
|
const getMenusListUp = async () => {
|
|
const result = await getMenusListUpApi(dataStore.editRuleForm);
|
|
if (result?.code === 0) {
|
|
useMsg("success", result?.msg);
|
|
dataStore.visible = false;
|
|
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
|
getMenusList();
|
|
}
|
|
};
|
|
//新增
|
|
const getMenusLisSave = async () => {
|
|
// dataStore.editRuleForm.pid = dataStore.editRuleForm.id;
|
|
const result = await getMenusLisSaveApi(dataStore.editRuleForm);
|
|
if (result?.code === 0) {
|
|
const { msg } = result;
|
|
useMsg("success", msg);
|
|
dataStore.visible = false;
|
|
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
|
getMenusList();
|
|
getRoleMenusList();
|
|
}
|
|
};
|
|
//导出
|
|
const getMenusLisExport = async () => {
|
|
const result = await getMenusLisExportApi(dataStore.searchParam);
|
|
await useExport(result);
|
|
};
|
|
|
|
//导出接口
|
|
const handleExport = () => {
|
|
getMenusLisExport();
|
|
};
|
|
//导入
|
|
const handleImport = () => {
|
|
let params = {
|
|
title: "数据",
|
|
tempApi: "",
|
|
importApi: getMenusLisImportApi
|
|
// proTableRef: getMenusList
|
|
};
|
|
importRef.value.acceptParams(params);
|
|
setTimeout(() => {
|
|
getMenusList();
|
|
}, 1000);
|
|
};
|
|
const search = () => {
|
|
getMenusList();
|
|
};
|
|
const reset = () => {
|
|
dataStore.searchParam.title = "";
|
|
getMenusList();
|
|
};
|
|
const handleSelectChangeEmits = (value: any) => {
|
|
if (value.prop === "pid") {
|
|
dataStore.editRuleForm.pid = value.id;
|
|
}
|
|
|
|
console.log(value, "==========value===323232======");
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|