|
|
@@ -1,40 +1,109 @@
|
|
|
<template>
|
|
|
<div class="page-container list-container">
|
|
|
<div :gutter="10" class="list-btns-container">
|
|
|
- <el-button type="primary" size="small" icon="Plus" @click="handleAdd"
|
|
|
- v-hasPermi="['system:menu:add']">新增</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="Plus"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-hasPermi="['system:menu:add']"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
<!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
|
|
|
</div>
|
|
|
- <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
|
|
+ <el-form
|
|
|
+ class="list-search-container"
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryRef"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ >
|
|
|
<el-form-item label="版本名称：" prop="name">
|
|
|
- <el-input size="small" v-model="queryParams.name" placeholder="请输入版本名称" clearable style="width: 200px"
|
|
|
- @keyup.enter="handleQuery" />
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ v-model="queryParams.name"
|
|
|
+ placeholder="请输入版本名称"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="说明：" prop="remark" @change="handleQuery">
|
|
|
- <el-input size="small" v-model="queryParams.remark" placeholder="请输入版本说明" clearable style="width: 200px"
|
|
|
- @keyup.enter="handleQuery" />
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ v-model="queryParams.remark"
|
|
|
+ placeholder="请输入版本说明"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button size="small" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="Search"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" icon="Refresh" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <el-table size="small" v-if="refreshTable" v-loading="loading" :data="versionList" row-key="menuId">
|
|
|
- <el-table-column label="版本名称" prop="name" align="center"></el-table-column>
|
|
|
- <el-table-column label="版本说明" prop="remark" align="center"></el-table-column>
|
|
|
- <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
|
|
|
+ <el-table
|
|
|
+ size="small"
|
|
|
+ v-if="refreshTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="versionList"
|
|
|
+ row-key="menuId"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="版本名称"
|
|
|
+ prop="name"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="版本说明"
|
|
|
+ prop="remark"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ width="210"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
- <el-button link type="warning" size="small" icon="Edit" @click="handleUpdate(scope.row)"
|
|
|
- v-hasPermi="['system:menu:edit']">修改</el-button>
|
|
|
- <el-button link type="danger" size="small" icon="Delete" @click="handleDelete(scope.row)"
|
|
|
- v-hasPermi="['system:menu:remove']">删除</el-button>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="warning"
|
|
|
+ size="small"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['system:menu:edit']"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['system:menu:remove']"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<!-- 添加或修改菜单对话框 -->
|
|
|
- <el-dialog :title="title" v-model="open" width="680px" append-to-body draggable>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ v-model="open"
|
|
|
+ width="680px"
|
|
|
+ append-to-body
|
|
|
+ draggable
|
|
|
+ >
|
|
|
<el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
@@ -49,15 +118,30 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="版本包含模块" prop="remark">
|
|
|
- <el-select v-model="versionModules" value-key="id" multiple collapse-tags collapse-tags-tooltip
|
|
|
- placeholder="请选择模块" style="width: 240px">
|
|
|
- <el-option v-for="item in modules" :key="item.id" :label="item.moduleName" :value="item.id">
|
|
|
+ <el-select
|
|
|
+ v-model="versionModules"
|
|
|
+ value-key="id"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ placeholder="请选择模块"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in modules"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.moduleName"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
<span style="float: left">{{ item.moduleName }}</span>
|
|
|
- <span style="
|
|
|
- float: right;
|
|
|
- color: var(--el-text-color-secondary);
|
|
|
- font-size: 10px;
|
|
|
- ">{{ item.remark }}</span>
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ float: right;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ font-size: 10px;
|
|
|
+ "
|
|
|
+ >{{ item.remark }}</span
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
@@ -75,67 +159,78 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup name="Menu">
|
|
|
-import { addVersion, delVersion, getVersion, listVersion, updateVersion } from '@/api/system/version'
|
|
|
-import { listModule } from '@/api/system/module'
|
|
|
-import { ref } from 'vue';
|
|
|
+import {
|
|
|
+ addVersion,
|
|
|
+ delVersion,
|
|
|
+ getVersion,
|
|
|
+ listVersion,
|
|
|
+ updateVersion,
|
|
|
+} from "@/api/system/version";
|
|
|
+import { listModule } from "@/api/system/module";
|
|
|
+import { ref } from "vue";
|
|
|
|
|
|
-const { proxy } = getCurrentInstance()
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
// const { sys_show_hide, sys_normal_disable, app_key } = proxy.useDict('sys_show_hide', 'sys_normal_disable', 'app_key')
|
|
|
|
|
|
-const versionList = ref([])
|
|
|
-const open = ref(false)
|
|
|
-const loading = ref(true)
|
|
|
-const showSearch = ref(true)
|
|
|
-const title = ref('')
|
|
|
-const menuOptions = ref([])
|
|
|
-const isExpandAll = ref(false)
|
|
|
-const refreshTable = ref(true)
|
|
|
-const showChooseIcon = ref(false)
|
|
|
-const iconSelectRef = ref(null)
|
|
|
-const modules = ref([])
|
|
|
-const versionModules = ref([])
|
|
|
+const versionList = ref([]);
|
|
|
+const open = ref(false);
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const title = ref("");
|
|
|
+const menuOptions = ref([]);
|
|
|
+const isExpandAll = ref(false);
|
|
|
+const refreshTable = ref(true);
|
|
|
+const showChooseIcon = ref(false);
|
|
|
+const iconSelectRef = ref(null);
|
|
|
+const modules = ref([]);
|
|
|
+const versionModules = ref([]);
|
|
|
|
|
|
const data = reactive({
|
|
|
form: {},
|
|
|
queryParams: {
|
|
|
menuName: undefined,
|
|
|
- visible: undefined
|
|
|
+ visible: undefined,
|
|
|
},
|
|
|
rules: {
|
|
|
- menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
|
|
- orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
|
|
|
- path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }]
|
|
|
- }
|
|
|
-})
|
|
|
+ menuName: [
|
|
|
+ { required: true, message: "菜单名称不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ orderNum: [
|
|
|
+ { required: true, message: "菜单顺序不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
-const { queryParams, form, rules } = toRefs(data)
|
|
|
+const { queryParams, form, rules } = toRefs(data);
|
|
|
|
|
|
/** 查询菜单列表 */
|
|
|
function getList() {
|
|
|
- loading.value = true
|
|
|
+ loading.value = true;
|
|
|
listVersion(queryParams.value).then((response) => {
|
|
|
- versionList.value = response.rows
|
|
|
- loading.value = false
|
|
|
- })
|
|
|
+ versionList.value = response.rows;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
}
|
|
|
/** 查询菜单下拉树结构 */
|
|
|
function getTreeselect() {
|
|
|
- menuOptions.value = []
|
|
|
+ menuOptions.value = [];
|
|
|
listVersion().then((response) => {
|
|
|
- const menu = { menuId: 0, menuName: '主类目', children: [] }
|
|
|
- menu.children = proxy.handleTree(response.data, 'menuId')
|
|
|
- menuOptions.value.push(menu)
|
|
|
- })
|
|
|
+ const menu = { menuId: 0, menuName: "主类目", children: [] };
|
|
|
+ menu.children = proxy.handleTree(response.data, "menuId");
|
|
|
+ menuOptions.value.push(menu);
|
|
|
+ });
|
|
|
}
|
|
|
function getModules() {
|
|
|
- listModule().then(res => {
|
|
|
- modules.value = res.rows
|
|
|
- })
|
|
|
+ listModule().then((res) => {
|
|
|
+ modules.value = res.rows;
|
|
|
+ });
|
|
|
}
|
|
|
/** 取消按钮 */
|
|
|
function cancel() {
|
|
|
- open.value = false
|
|
|
- reset()
|
|
|
+ open.value = false;
|
|
|
+ console.log("取消");
|
|
|
+ reset();
|
|
|
}
|
|
|
/** 表单重置 */
|
|
|
function reset() {
|
|
|
@@ -144,110 +239,119 @@ function reset() {
|
|
|
parentId: 0,
|
|
|
menuName: undefined,
|
|
|
icon: undefined,
|
|
|
- menuType: 'M',
|
|
|
+ menuType: "M",
|
|
|
orderNum: undefined,
|
|
|
- isFrame: '1',
|
|
|
- isCache: '0',
|
|
|
- visible: '0',
|
|
|
- status: '0'
|
|
|
- }
|
|
|
- versionModules.value = []
|
|
|
- proxy.resetForm('menuRef')
|
|
|
+ isFrame: "1",
|
|
|
+ isCache: "0",
|
|
|
+ visible: "0",
|
|
|
+ status: "0",
|
|
|
+ };
|
|
|
+ versionModules.value = [];
|
|
|
+ proxy.resetForm("menuRef");
|
|
|
}
|
|
|
/** 展示下拉图标 */
|
|
|
function showSelectIcon() {
|
|
|
- iconSelectRef.value.reset()
|
|
|
- showChooseIcon.value = true
|
|
|
+ iconSelectRef.value.reset();
|
|
|
+ showChooseIcon.value = true;
|
|
|
}
|
|
|
/** 选择图标 */
|
|
|
function selected(name) {
|
|
|
- form.value.icon = name
|
|
|
- showChooseIcon.value = false
|
|
|
+ form.value.icon = name;
|
|
|
+ showChooseIcon.value = false;
|
|
|
}
|
|
|
/** 图标外层点击隐藏下拉列表 */
|
|
|
function hideSelectIcon(event) {
|
|
|
- var elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget
|
|
|
- var className = elem.className
|
|
|
- if (className !== 'el-input__inner') {
|
|
|
- showChooseIcon.value = false
|
|
|
+ var elem =
|
|
|
+ event.relatedTarget ||
|
|
|
+ event.srcElement ||
|
|
|
+ event.target ||
|
|
|
+ event.currentTarget;
|
|
|
+ var className = elem.className;
|
|
|
+ if (className !== "el-input__inner") {
|
|
|
+ showChooseIcon.value = false;
|
|
|
}
|
|
|
}
|
|
|
/** 搜索按钮操作 */
|
|
|
function handleQuery() {
|
|
|
- getList()
|
|
|
+ getList();
|
|
|
}
|
|
|
/** 重置按钮操作 */
|
|
|
function resetQuery() {
|
|
|
- proxy.resetForm('queryRef')
|
|
|
- handleQuery()
|
|
|
+ proxy.resetForm("queryRef");
|
|
|
+ handleQuery();
|
|
|
}
|
|
|
/** 新增按钮操作 */
|
|
|
function handleAdd(row) {
|
|
|
- reset()
|
|
|
- getTreeselect()
|
|
|
+ reset();
|
|
|
+ getTreeselect();
|
|
|
if (row != null && row.menuId) {
|
|
|
- form.value.parentId = row.menuId
|
|
|
+ form.value.parentId = row.menuId;
|
|
|
} else {
|
|
|
- form.value.parentId = 0
|
|
|
+ form.value.parentId = 0;
|
|
|
}
|
|
|
- open.value = true
|
|
|
- title.value = '添加菜单'
|
|
|
+ open.value = true;
|
|
|
+ title.value = "添加菜单";
|
|
|
}
|
|
|
/** 展开/折叠操作 */
|
|
|
function toggleExpandAll() {
|
|
|
- refreshTable.value = false
|
|
|
- isExpandAll.value = !isExpandAll.value
|
|
|
+ refreshTable.value = false;
|
|
|
+ isExpandAll.value = !isExpandAll.value;
|
|
|
nextTick(() => {
|
|
|
- refreshTable.value = true
|
|
|
- })
|
|
|
+ refreshTable.value = true;
|
|
|
+ });
|
|
|
}
|
|
|
/** 修改按钮操作 */
|
|
|
async function handleUpdate(row) {
|
|
|
- reset()
|
|
|
- await getTreeselect()
|
|
|
+ reset();
|
|
|
+ await getTreeselect();
|
|
|
getVersion(row.id).then((response) => {
|
|
|
- form.value = response.data
|
|
|
- versionModules.value = Array.from(new Set(form.value.modules.map(item => item.moduleId)))
|
|
|
- open.value = true
|
|
|
- title.value = '修改版本'
|
|
|
- })
|
|
|
+ form.value = response.data;
|
|
|
+ versionModules.value = Array.from(
|
|
|
+ new Set(form.value.modules.map((item) => item.moduleId))
|
|
|
+ );
|
|
|
+ open.value = true;
|
|
|
+ title.value = "修改菜单";
|
|
|
+ });
|
|
|
}
|
|
|
/** 提交按钮 */
|
|
|
function submitForm() {
|
|
|
- form.value.modules = versionModules.value.map(l => ({ moduleId: l, versionId: form.value.id }))
|
|
|
- proxy.$refs['menuRef'].validate((valid) => {
|
|
|
+ form.value.modules = versionModules.value.map((l) => ({
|
|
|
+ moduleId: l,
|
|
|
+ versionId: form.value.id,
|
|
|
+ }));
|
|
|
+ proxy.$refs["menuRef"].validate((valid) => {
|
|
|
if (valid) {
|
|
|
if (form.value.id != undefined) {
|
|
|
updateVersion(form.value).then((response) => {
|
|
|
- proxy.$modal.msgSuccess('修改成功')
|
|
|
- open.value = false
|
|
|
- getList()
|
|
|
- })
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
} else {
|
|
|
addVersion(form.value).then((response) => {
|
|
|
- proxy.$modal.msgSuccess('新增成功')
|
|
|
- open.value = false
|
|
|
- getList()
|
|
|
- })
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
/** 删除按钮操作 */
|
|
|
function handleDelete(row) {
|
|
|
proxy.$modal
|
|
|
- .confirm('是否确认删除?')
|
|
|
+ .confirm("是否确认删除?")
|
|
|
.then(function () {
|
|
|
- return delVersion(row.menuId)
|
|
|
+ return delVersion(row.menuId);
|
|
|
})
|
|
|
.then(() => {
|
|
|
- getList()
|
|
|
- proxy.$modal.msgSuccess('删除成功')
|
|
|
+ getList();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
})
|
|
|
- .catch(() => { })
|
|
|
+ .catch(() => {});
|
|
|
}
|
|
|
-getModules()
|
|
|
+getModules();
|
|
|
|
|
|
-getList()
|
|
|
+getList();
|
|
|
</script>
|
|
|
|
ezhizao_zx