Commit de44fc45 authored by “yiyousong”'s avatar “yiyousong”

feat: 添加菜单管理板块

parent 367ee107
...@@ -262,3 +262,88 @@ export const deleteUser = (params) => { ...@@ -262,3 +262,88 @@ export const deleteUser = (params) => {
params, params,
}); });
}; };
/**
* 区县系统
*/
// 获取区县系统列表
export const getSystemList = (data) => {
return request({
url: `/bill/access/system/list`,
method: "post",
data,
});
};
// 获取区县系统详情
export const getSystemInfo = (params) => {
return request({
url: `/bill/access/system/info`,
method: "get",
params,
});
};
// 保存区县系统
export const saveSystem = (data) => {
return request({
url: `/bill/access/system/save`,
method: "post",
data,
});
};
// 删除区县系统
export const deleteSystem = (params) => {
return request({
url: `/bill/access/system/delete`,
method: "get",
params,
});
};
/**
* 菜单管理
*/
// 获取菜单列表
export const getMenuList = (data) => {
return request({
url: `/bill/menu/list`,
method: "post",
data,
});
};
// 获取菜单信息
export const getMenuInfo = (params) => {
return request({
url: `/bill/menu/info`,
method: "get",
params,
});
};
// 保存菜单
export const saveMenu = (data) => {
return request({
url: `/bill/menu/save`,
method: "post",
data,
});
};
// 删除菜单
export const deleteMenu = (params) => {
return request({
url: `/bill/menu/delete`,
method: "get",
params,
});
};
// 改变菜单排序
export const changeMenuSort = (data) => {
return request({
url: `/bill/menu/upOrDown`,
method: "post",
data,
});
};
export let iconList = [
"el-icon-platform-eleme",
"el-icon-eleme",
"el-icon-delete-solid",
"el-icon-delete",
"el-icon-s-tools",
"el-icon-setting",
"el-icon-user-solid",
"el-icon-user",
"el-icon-phone",
"el-icon-phone-outline",
"el-icon-more",
"el-icon-more-outline",
"el-icon-star-on",
"el-icon-star-off",
"el-icon-s-goods",
"el-icon-goods",
"el-icon-warning",
"el-icon-warning-outline",
"el-icon-question",
"el-icon-info",
"el-icon-remove",
"el-icon-circle-plus",
"el-icon-success",
"el-icon-error",
"el-icon-zoom-in",
"el-icon-zoom-out",
"el-icon-remove-outline",
"el-icon-circle-plus-outline",
"el-icon-circle-check",
"el-icon-circle-close",
"el-icon-s-help",
"el-icon-help",
"el-icon-minus",
"el-icon-plus",
"el-icon-check",
"el-icon-close",
"el-icon-picture",
"el-icon-picture-outline",
"el-icon-picture-outline-round",
"el-icon-upload",
"el-icon-upload2",
"el-icon-download",
"el-icon-camera-solid",
"el-icon-camera",
"el-icon-video-camera-solid",
"el-icon-video-camera",
"el-icon-message-solid",
"el-icon-bell",
"el-icon-s-cooperation",
"el-icon-s-order",
"el-icon-s-platform",
"el-icon-s-fold",
"el-icon-s-unfold",
"el-icon-s-operation",
"el-icon-s-promotion",
"el-icon-s-home",
"el-icon-s-release",
"el-icon-s-ticket",
"el-icon-s-management",
"el-icon-s-open",
"el-icon-s-shop",
"el-icon-s-marketing",
"el-icon-s-flag",
"el-icon-s-comment",
"el-icon-s-finance",
"el-icon-s-claim",
"el-icon-s-custom",
"el-icon-s-opportunity",
"el-icon-s-data",
"el-icon-s-check",
"el-icon-s-grid",
"el-icon-menu",
"el-icon-share",
"el-icon-d-caret",
"el-icon-caret-left",
"el-icon-caret-right",
"el-icon-caret-bottom",
"el-icon-caret-top",
"el-icon-bottom-left",
"el-icon-bottom-right",
"el-icon-back",
"el-icon-right",
"el-icon-bottom",
"el-icon-top",
"el-icon-top-left",
"el-icon-top-right",
"el-icon-arrow-left",
"el-icon-arrow-right",
"el-icon-arrow-down",
"el-icon-arrow-up",
"el-icon-d-arrow-left",
"el-icon-d-arrow-right",
"el-icon-video-pause",
"el-icon-video-play",
"el-icon-refresh",
"el-icon-refresh-right",
"el-icon-refresh-left",
"el-icon-finished",
"el-icon-sort",
"el-icon-sort-up",
"el-icon-sort-down",
"el-icon-rank",
"el-icon-loading",
"el-icon-view",
"el-icon-c-scale-to-original",
"el-icon-date",
"el-icon-edit",
"el-icon-edit-outline",
"el-icon-folder",
"el-icon-folder-opened",
"el-icon-folder-add",
"el-icon-folder-remove",
"el-icon-folder-delete",
"el-icon-folder-checked",
"el-icon-tickets",
"el-icon-document-remove",
"el-icon-document-delete",
"el-icon-document-copy",
"el-icon-document-checked",
"el-icon-document",
"el-icon-document-add",
"el-icon-printer",
"el-icon-paperclip",
"el-icon-takeaway-box",
"el-icon-search",
"el-icon-monitor",
"el-icon-attract",
"el-icon-mobile",
"el-icon-scissors",
"el-icon-umbrella",
"el-icon-headset",
"el-icon-brush",
"el-icon-mouse",
"el-icon-coordinate",
"el-icon-magic-stick",
"el-icon-reading",
"el-icon-data-line",
"el-icon-data-board",
"el-icon-pie-chart",
"el-icon-data-analysis",
"el-icon-collection-tag",
"el-icon-film",
"el-icon-suitcase",
"el-icon-suitcase-1",
"el-icon-receiving",
"el-icon-collection",
"el-icon-files",
"el-icon-notebook-1",
"el-icon-notebook-2",
"el-icon-toilet-paper",
"el-icon-office-building",
"el-icon-school",
"el-icon-table-lamp",
"el-icon-house",
"el-icon-no-smoking",
"el-icon-smoking",
"el-icon-shopping-cart-full",
"el-icon-shopping-cart-1",
"el-icon-shopping-cart-2",
"el-icon-shopping-bag-1",
"el-icon-shopping-bag-2",
"el-icon-sold-out",
"el-icon-sell",
"el-icon-present",
"el-icon-box",
"el-icon-bank-card",
"el-icon-money",
"el-icon-coin",
"el-icon-wallet",
"el-icon-discount",
"el-icon-price-tag",
"el-icon-news",
"el-icon-guide",
"el-icon-male",
"el-icon-female",
"el-icon-thumb",
"el-icon-cpu",
"el-icon-link",
"el-icon-connection",
"el-icon-open",
"el-icon-turn-off",
"el-icon-set-up",
"el-icon-chat-round",
"el-icon-chat-line-round",
"el-icon-chat-square",
"el-icon-chat-dot-round",
"el-icon-chat-dot-square",
"el-icon-chat-line-square",
"el-icon-message",
"el-icon-postcard",
"el-icon-position",
"el-icon-turn-off-microphone",
"el-icon-microphone",
"el-icon-close-notification",
"el-icon-bangzhu",
"el-icon-time",
"el-icon-odometer",
"el-icon-crop",
"el-icon-aim",
"el-icon-switch-button",
"el-icon-full-screen",
"el-icon-copy-document",
"el-icon-mic",
"el-icon-stopwatch",
"el-icon-medal-1",
"el-icon-medal",
"el-icon-trophy",
"el-icon-trophy-1",
"el-icon-first-aid-kit",
"el-icon-discover",
"el-icon-place",
"el-icon-location",
"el-icon-location-outline",
"el-icon-location-information",
"el-icon-add-location",
"el-icon-delete-location",
"el-icon-map-location",
"el-icon-alarm-clock",
"el-icon-timer",
"el-icon-watch-1",
"el-icon-watch",
"el-icon-lock",
"el-icon-unlock",
"el-icon-key",
"el-icon-service",
"el-icon-mobile-phone",
"el-icon-bicycle",
"el-icon-truck",
"el-icon-ship",
"el-icon-basketball",
"el-icon-football",
"el-icon-soccer",
"el-icon-baseball",
"el-icon-wind-power",
"el-icon-light-rain",
"el-icon-lightning",
"el-icon-heavy-rain",
"el-icon-sunrise",
"el-icon-sunrise-1",
"el-icon-sunset",
"el-icon-sunny",
"el-icon-cloudy",
"el-icon-partly-cloudy",
"el-icon-cloudy-and-sunny",
"el-icon-moon",
"el-icon-moon-night",
"el-icon-dish",
"el-icon-dish-1",
"el-icon-food",
"el-icon-chicken",
"el-icon-fork-spoon",
"el-icon-knife-fork",
"el-icon-burger",
"el-icon-tableware",
"el-icon-sugar",
"el-icon-dessert",
"el-icon-ice-cream",
"el-icon-hot-water",
"el-icon-water-cup",
"el-icon-coffee-cup",
"el-icon-cold-drink",
"el-icon-goblet",
"el-icon-goblet-full",
"el-icon-goblet-square",
"el-icon-goblet-square-full",
"el-icon-refrigerator",
"el-icon-grape",
"el-icon-watermelon",
"el-icon-cherry",
"el-icon-apple",
"el-icon-pear",
"el-icon-orange",
"el-icon-coffee",
"el-icon-ice-tea",
"el-icon-ice-drink",
"el-icon-milk-tea",
"el-icon-potato-strips",
"el-icon-lollipop",
"el-icon-ice-cream-square",
"el-icon-ice-cream-round",
];
<template>
<div class="h-full w-full">
<TableHeader>
<div slot="left">
<el-button size="small" type="primary" @click="handleAdd"
>新增</el-button
>
<el-button size="small" type="danger" @click="handleDelAll"
>批量删除</el-button
>
</div>
<div slot="right">
<el-form ref="searchForm" :model="searchForm" inline>
<el-form-item prop="systemName">
<el-input
size="small"
v-model="searchForm.systemName"
style="width: 200px"
class="ml10 mr10"
placeholder="请输入系统名称搜索"
@keyup.native.enter="handleSearch"
></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleSearch"
>搜 索</el-button
>
</el-form-item>
<el-form-item>
<el-button size="small" @click="handleReset">重 置</el-button>
</el-form-item>
</el-form>
</div>
</TableHeader>
<!-- 表格 -->
<div class="table-content">
<y-table
ref="MyTable"
:loading="loading"
:data="tableData"
:column="column"
border
tooltip-effect="dark"
:max-height="600"
:row-key="(row) => row.id"
@selection-change="handleSelectionChange"
></y-table>
</div>
<Pagination
:total="total"
:current.sync="current"
:size.sync="size"
@get="getSystemList"
></Pagination>
<!-- 新增 -->
<AddAreaSystem
ref="AddAreaSystem"
:show.sync="show"
:title="title"
@success="getSystemList"
></AddAreaSystem>
</div>
</template>
<script>
import TableHeader from "@/components/TableHeader.vue";
import { getSystemList, deleteSystem } from "@/api/system";
import AddAreaSystem from "./components/AddAreaSystem.vue";
export default {
components: {
TableHeader,
AddAreaSystem,
},
data() {
return {
column: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.current - 1) * this.size + index + 1;
},
},
{
label: "系统名称",
prop: "systemName",
align: "center",
},
{
label: "系统编码",
prop: "systemCode",
align: "center",
},
{
label: "创建时间",
align: "center",
formatter: (row) => {
if (row.createTime) {
return this.$moment(row.createTime).format("YYYY-MM-DD HH:mm:ss");
}
},
},
{
label: "排序",
prop: "sort",
align: "center",
},
{
label: "备注",
prop: "remark",
align: "center",
},
{
label: "操作",
align: "center",
width: "120",
formatter: (row) => {
return (
<div class="flex justify-center gap-4">
<span
class="primary cursor-pointer"
onClick={() => this.handleEdit(row)}
>
编辑
</span>
<span
class="delete cursor-pointer"
onClick={() => this.handleDel(row.id)}
>
删除
</span>
</div>
);
},
},
],
searchForm: {
systemName: "",
},
tableData: [],
current: 1,
size: 10,
total: 0,
loading: false,
selectRows: [],
show: false,
title: "新增",
dict: {}, // 字典
};
},
created() {
this.getSystemList();
},
computed: {},
methods: {
// 获取接入区域列表
async getSystemList() {
this.loading = true;
let res = await getSystemList({
page: this.current,
size: this.size,
systemName: `%${this.searchForm.systemName}%`,
});
this.loading = false;
if (res.data.code == 1) {
let { data, total, dict } = res.data.data;
if (!data.length && this.current > 1) {
this.current -= 1;
this.getSystemList();
}
this.tableData = data;
this.total = total;
this.dict = dict;
}
},
// 批量移除
handleDelAll() {
if (!this.selectRows.length) {
this.$message.warning("请先勾选数据");
return;
}
let ids = this.selectRows.map((v) => v.id).join(",");
this.handleDel(ids);
},
// 搜索
handleSearch() {
this.current = 1;
this.$clearSelection("MyTable");
this.getSystemList();
},
// 重置
handleReset() {
this.current = 1;
this.$clearSelection("MyTable");
this.$resetForm("searchForm");
this.getSystemList();
},
// 选中
handleSelectionChange(select) {
this.selectRows = select;
},
// 新增
handleAdd() {
this.title = "新增";
this.$refs.AddAreaSystem.onAdd();
this.show = true;
},
// 编辑
handleEdit(row) {
this.title = "编辑";
let data = this.$cloneDeep(row);
this.$refs.AddAreaSystem.onEdit(data);
this.show = true;
},
// 移除
handleDel(id) {
this.$confirm("此操作将删除所选数据,是否继续?", "系统提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
cancelButtonClass: "btn-custom-cancel",
type: "warning",
})
.then(async () => {
let res = await deleteSystem({ id });
let { code, msg } = res.data;
if (code === 1) {
this.$message.success(msg);
this.getSystemList();
this.$clearSelection("MyTable");
}
})
.catch(() => {
console.log("取消成功!");
});
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div>
<el-dialog
:title="title"
:destroy-on-close="true"
:visible.sync="Visible"
width="30%"
@close="handleClose"
:close-on-click-modal="false"
top="10vh"
>
<el-form
ref="form"
:model="form"
:rules="rules"
size="small"
label-width="100px"
>
<el-form-item label="系统名称" prop="systemName">
<el-input
placeholder="请输入系统名称"
v-model="form.systemName"
></el-input>
</el-form-item>
<el-form-item label="系统编码" prop="systemCode">
<el-input
placeholder="请输入系统编码"
v-model="form.systemCode"
></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="form.sort"
controls-position="right"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
resize="none"
:autosize="{ minRows: 3, maxRows: 3 }"
type="textarea"
placeholder="请输入备注"
v-model="form.remark"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="small" type="primary" @click="handleOk"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { saveSystem } from "@/api/system";
export default {
components: {},
props: {
title: {
type: String,
required: true,
default: "",
},
show: {
type: Boolean,
required: true,
default: false,
},
},
data() {
return {
form: {
systemName: "",
systemCode: "",
sort: 99,
remark: "",
},
rules: {
systemName: [
{ required: true, message: "请输入系统名称", trigger: "blur" },
],
systemCode: [
{ required: true, message: "请输入系统编码", trigger: "blur" },
],
},
};
},
computed: {
Visible: {
get() {
return this.show;
},
set(val) {
this.$emit("update:show", val);
},
},
},
methods: {
// 确定
handleOk() {
this.$refs.form.validate(async (valid) => {
if (valid) {
let res = await saveSystem(this.form);
let { code, msg } = res.data;
if (code === 1) {
this.$message.success(msg);
this.$emit("success");
this.handleClose();
}
}
});
},
// 新增
onAdd() {
Object.assign(this.form, this.$options.data().form);
this.form.id && this.$delete(this.form, "id");
},
// 编辑
onEdit(row) {
setTimeout(() => {
this.form = { ...row };
}, 10);
},
// 重置
handleRest() {
this.$resetForm("form");
},
// 关闭
handleClose() {
this.$resetForm("form");
this.Visible = false;
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div class="h-full w-full">
<TableHeader>
<div slot="left">
<el-button size="small" type="primary" @click="handleAdd"
>新增</el-button
>
<el-button size="small" type="danger" @click="handleDelAll"
>批量删除</el-button
>
</div>
<!-- <div slot="right">
<el-form ref="searchForm" :model="searchForm" inline>
<el-form-item prop="name">
<el-input
size="small"
v-model="searchForm.name"
style="width: 200px"
class="ml10 mr10"
placeholder="请输入系统名称搜索"
@keyup.native.enter="handleSearch"
></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleSearch"
>搜 索</el-button
>
</el-form-item>
<el-form-item>
<el-button size="small" @click="handleReset">重 置</el-button>
</el-form-item>
</el-form>
</div> -->
</TableHeader>
<!-- 表格 -->
<div class="table-content">
<y-table
ref="MyTable"
:loading="loading"
:data="tableData"
:column="column"
border
tooltip-effect="dark"
:max-height="600"
:row-key="(row) => row.id"
:tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
></y-table>
</div>
<Pagination
:total="total"
:current.sync="current"
:size.sync="size"
layout="total,prev,pager,next"
@get="getMenuList"
></Pagination>
<AddMenu
ref="AddMenu"
:show.sync="show"
:title="title"
:dict="dict"
:menuList="menuList"
></AddMenu>
</div>
</template>
<script>
import TableHeader from "@/components/TableHeader.vue";
import AddMenu from "./components/AddMenu.vue";
import {
getMenuList,
deleteMenu,
saveMenu,
changeMenuSort,
} from "@/api/system";
import { buildTree } from "@/utils";
export default {
components: {
TableHeader,
AddMenu,
},
data() {
return {
column: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.current - 1) * this.size + index + 1;
},
},
// {
// label: "树形展开",
// width: "80",
// align: "center",
// },
{
label: "菜单名称",
prop: "name",
align: "center",
},
{
label: "ID",
prop: "id",
align: "center",
},
{
label: "图标",
align: "center",
prop: "imgPath",
},
{
label: "权限类型",
prop: "authType",
align: "center",
formatter: (row) => {
return this.dict.authType[row.authType];
},
},
{
label: "父ID",
prop: "parentId",
align: "center",
},
{
label: "地址",
prop: "url",
align: "center",
},
{
label: "状态",
prop: "status",
align: "center",
formatter: (row) => {
return (
<el-switch
active-value={1}
inactive-value={0}
value={row.status}
onChange={(val) => {
this.handleStatus(row, val);
}}
></el-switch>
);
},
},
{
label: "操作",
align: "center",
width: "180",
formatter: (row) => {
return (
<div class="flex items-center justify-center gap-4">
<i
class="el-icon-top primary cursor-pointer"
onClick={() => this.changeMenuSort(row.id, 0)}
></i>
<i
class="el-icon-bottom primary cursor-pointer"
onClick={() => this.changeMenuSort(row.id, 1)}
></i>
<span
class="primary cursor-pointer"
onClick={() => this.handleEdit(row)}
>
编辑
</span>
<span
class="delete cursor-pointer"
onClick={() => this.handleDel(row.id)}
>
删除
</span>
</div>
);
},
},
],
searchForm: {
name: "",
},
tableData: [],
menuList: [],
current: 1,
size: 10000,
total: 0,
loading: false,
selectRows: [],
show: false,
title: "新增",
dict: {}, // 字典
};
},
created() {
this.getMenuList();
},
computed: {},
methods: {
// 获取接入区域列表
async getMenuList() {
this.loading = true;
this.menuList = [
{
id: 0,
name: "",
},
];
let res = await getMenuList({
page: this.current,
size: this.size,
name: `%${this.searchForm.name}%`,
});
this.loading = false;
if (res.data.code == 1) {
let { data, total, dict } = res.data.data;
if (!data.length && this.current > 1) {
this.current -= 1;
this.getMenuList();
}
this.menuList = [...this.menuList, ...data];
this.tableData = buildTree(data);
this.total = total;
this.dict = dict;
}
},
// 批量移除
handleDelAll() {
if (!this.selectRows.length) {
this.$message.warning("请先勾选数据");
return;
}
let ids = this.selectRows.map((v) => v.id).join(",");
this.handleDel(ids);
},
// 搜索
handleSearch() {
this.current = 1;
this.$clearSelection("MyTable");
this.getMenuList();
},
// 重置
handleReset() {
this.current = 1;
this.$clearSelection("MyTable");
this.$resetForm("searchForm");
this.getMenuList();
},
// 选中
handleSelectionChange(select) {
this.selectRows = select;
},
// 新增
handleAdd() {
this.title = "新增";
this.$refs.AddMenu.onAdd();
this.show = true;
},
// 编辑
handleEdit(row) {
this.title = "编辑";
let data = this.$cloneDeep(row);
this.$refs.AddMenu.onEdit(data);
this.show = true;
},
// 移除
handleDel(id) {
this.$confirm("此操作将删除所选数据,是否继续?", "系统提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
cancelButtonClass: "btn-custom-cancel",
type: "warning",
})
.then(async () => {
let res = await deleteMenu({ id });
let { code, msg } = res.data;
if (code === 1) {
this.$message.success(msg);
this.getMenuList();
this.$clearSelection("MyTable");
}
})
.catch(() => {
console.log("取消成功!");
});
},
async handleStatus(row, status) {
row.status = status;
let res = await saveMenu(row);
if (res.data.code == 1) {
this.$message.success(res.data.msg);
}
this.getMenuList();
},
// 改变菜单排序
async changeMenuSort(id, type) {
let res = await changeMenuSort({ id, type });
if (res.data.code == 1) {
this.$message.success("更改排序成功");
this.getMenuList();
}
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div>
<el-dialog
:title="title"
:destroy-on-close="true"
:visible.sync="Visible"
width="40%"
@close="handleClose"
:close-on-click-modal="false"
top="10vh"
>
<el-form
ref="form"
:model="form"
:rules="rules"
size="small"
label-width="100px"
>
<el-form-item label="菜单名称" prop="name">
<el-input placeholder="请输入系统名称" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="父级菜单" prop="parentId">
<el-select
clearable
v-model="form.parentId"
placeholder="请选择父级菜单"
>
<el-option
v-for="item in menuList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="权限类型" prop="authType">
<el-select
clearable
v-model="form.authType"
placeholder="请选择权限类型"
>
<el-option
v-for="(item, key) in dict.authType"
:key="key"
:label="item"
:value="Number(key)"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="访问地址" prop="url">
<el-input
placeholder="请输入菜单访问地址"
v-model="form.url"
></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="(item, key) in dict.status"
:key="key"
:label="Number(key)"
>{{ item }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="图标" prop="imgPath">
<div class="icon-box grid grid-cols-2 gap-1">
<div
:class="[
'icon-item',
'cursor-pointer',
{ active: form.imgPath == '' },
]"
@click="form.imgPath = ''"
>
不需要图标
</div>
<div
:class="[
'icon-item',
'cursor-pointer',
{ active: form.imgPath == v },
]"
v-for="(v, i) in iconList"
:key="i"
@click="form.imgPath = v"
>
<i :class="v"></i>
<span class="ml-2">{{ v }}</span>
</div>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="small" type="primary" @click="handleOk"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { saveSystem } from "@/api/system";
import { iconList } from "@/assets/icon";
export default {
components: {},
props: {
title: {
type: String,
required: true,
default: "",
},
show: {
type: Boolean,
required: true,
default: false,
},
menuList: {
required: true,
type: Array,
default: () => [],
},
dict: {
required: true,
type: Object,
default: () => {},
},
},
data() {
return {
iconList,
form: {
name: "",
parentId: 0,
status: 1,
url: "",
authType: "",
imgPath: "",
},
rules: {
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
url: [
{ required: true, message: "请输入菜单访问地址", trigger: "blur" },
],
authType: [
{ required: true, message: "请输入选择权限类型", trigger: "change" },
],
},
};
},
computed: {
Visible: {
get() {
return this.show;
},
set(val) {
this.$emit("update:show", val);
},
},
},
methods: {
// 确定
handleOk() {
this.$refs.form.validate(async (valid) => {
if (valid) {
let res = await saveSystem(this.form);
let { code, msg } = res.data;
if (code === 1) {
this.$message.success(msg);
this.$emit("success");
this.handleClose();
}
}
});
},
// 新增
onAdd() {
Object.assign(this.form, this.$options.data().form);
this.form.id && this.$delete(this.form, "id");
},
// 编辑
onEdit(row) {
setTimeout(() => {
this.form = { ...row };
}, 10);
},
// 重置
handleRest() {
this.$resetForm("form");
},
// 关闭
handleClose() {
this.$resetForm("form");
this.Visible = false;
},
},
};
</script>
<style lang="less" scoped>
:deep(.el-dialog__body) {
max-height: 600px;
overflow: auto;
}
:deep(.el-select) {
width: 100%;
}
.active {
color: var(--primary);
}
</style>
...@@ -149,6 +149,15 @@ const routes = [ ...@@ -149,6 +149,15 @@ const routes = [
icon: "el-icon-set-up", icon: "el-icon-set-up",
}, },
}, },
{
path: "/system/areasystem",
component: () => import("@/pages/system/areaSystem/AreaSystem.vue"),
meta: {
activeMenu: "/system",
title: "区县系统",
icon: "el-icon-monitor",
},
},
{ {
path: "/system/user", path: "/system/user",
component: () => import("@/pages/system/user/User.vue"), component: () => import("@/pages/system/user/User.vue"),
...@@ -177,6 +186,15 @@ const routes = [ ...@@ -177,6 +186,15 @@ const routes = [
icon: "el-icon-box", icon: "el-icon-box",
}, },
}, },
{
path: "/system/menu",
component: () => import("@/pages/system/menu/Menu.vue"),
meta: {
activeMenu: "/system",
title: "菜单管理",
icon: "el-icon-box",
},
},
{ {
path: "/system/parameter", path: "/system/parameter",
component: () => import("@/pages/system/parameter/Parameter.vue"), component: () => import("@/pages/system/parameter/Parameter.vue"),
......
...@@ -161,3 +161,26 @@ export const dataSection = async (fn, searchForm = {}, callback) => { ...@@ -161,3 +161,26 @@ export const dataSection = async (fn, searchForm = {}, callback) => {
}; };
execute(); execute();
}; };
// 构建树形数据
export function buildTree(data, idField = "id", parentIdField = "parentId") {
const idToItem = {};
data.forEach((item) => {
idToItem[item[idField]] = { ...item, childList: [] };
});
const tree = [];
data.forEach((item) => {
const parentId = item[parentIdField];
if (parentId === null || parentId === 0) {
tree.push(idToItem[item[idField]]);
} else {
const parent = idToItem[parentId];
if (parent) {
parent.childList.push(idToItem[item[idField]]);
}
}
});
return tree;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment