1062 lines
30 KiB
Vue
1062 lines
30 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { ElForm, ElMessageBox, ElMessage } from "element-plus";
|
|
import {
|
|
getdata,
|
|
addmenu,
|
|
editmenu,
|
|
deltmenu,
|
|
moveOrderno,
|
|
uploadIcon,
|
|
moveIcon,
|
|
} from "@/api/menu";
|
|
import Sortable from "sortablejs";
|
|
//定义表格数据
|
|
const url = import.meta.env.VITE_APP_BASE_API;
|
|
const tableData: any = ref([]);
|
|
function gteTabledata() {
|
|
const params = {
|
|
systemcode: systemcode.value,
|
|
name: "",
|
|
};
|
|
loading.value = true;
|
|
getdata(params)
|
|
.then((res) => {
|
|
tableData.value = res;
|
|
loading.value = false;
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
const expertInfoRef = ref();
|
|
const menuInfoRef = ref();
|
|
const btnInfoRef = ref();
|
|
const loading = ref(false);
|
|
//定义tabbar
|
|
const systemcode = ref("4");
|
|
const activeIndex = ref("4");
|
|
function handleSelect(key: string) {
|
|
if (key == "1") {
|
|
systemcode.value = "1";
|
|
} else if (key == "2") {
|
|
systemcode.value = "2";
|
|
} else if (key == "3") {
|
|
systemcode.value = "3";
|
|
} else if (key == "4") {
|
|
systemcode.value = "4";
|
|
}
|
|
gteTabledata();
|
|
}
|
|
//定义搜索框文本
|
|
const menuname = ref("");
|
|
//点击搜索
|
|
function search() {
|
|
menuname.value = menuname.value.replace(/\s+/g, "");
|
|
let params = {
|
|
systemcode: systemcode.value,
|
|
name: menuname.value,
|
|
isdisplay: "",
|
|
};
|
|
getdata(params).then((res) => {
|
|
tableData.value = res;
|
|
});
|
|
}
|
|
//目录添加
|
|
const title = ref("");
|
|
const expertInfo: any = ref({
|
|
name: "",
|
|
type: "0",
|
|
opturl: "",
|
|
permission: "",
|
|
isdisplay: true,
|
|
systemcode: "",
|
|
icon: "",
|
|
code: "",
|
|
});
|
|
const dialogVisible = ref(false);
|
|
function addClick() {
|
|
title.value = "新增目录";
|
|
const orgnamemage = ref({
|
|
name: "",
|
|
type: "3",
|
|
opturl: "",
|
|
permission: "",
|
|
orderno: 1,
|
|
isdisplay: "1",
|
|
});
|
|
expertInfo.value = orgnamemage.value;
|
|
dialogVisible.value = true;
|
|
}
|
|
//关闭目录
|
|
function handleClose() {
|
|
dialogVisible.value = false;
|
|
btnVisible.value = false;
|
|
menuVisible.value = false;
|
|
if (expertInfoRef.value != null) expertInfoRef.value.resetFields();
|
|
if (menuInfoRef.value != null) menuInfoRef.value.resetFields();
|
|
if (btnInfoRef.value != null) btnInfoRef.value.resetFields();
|
|
}
|
|
//表格规则定义
|
|
const rules = ref({
|
|
name: [{ required: true, message: "请输入目录名称", trigger: "blur" }],
|
|
opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
|
|
permission: [{ required: true, message: "请输入目录权限标识", trigger: "blur" }],
|
|
});
|
|
//添加子目录
|
|
const parentID = ref("");
|
|
function addchilder(row: any) {
|
|
title.value = "新增子目录";
|
|
|
|
const orgnamemage = ref({
|
|
name: "",
|
|
type: "3",
|
|
opturl: "",
|
|
permission: "",
|
|
orderno: 1,
|
|
isdisplay: "1",
|
|
});
|
|
parentID.value = row.id;
|
|
expertInfo.value = orgnamemage.value;
|
|
dialogVisible.value = true;
|
|
iconall.value = "";
|
|
getid.value = row.id;
|
|
}
|
|
//新增目录-确认按钮
|
|
function expertsubmit() {
|
|
if (expertInfo.value.name == "") {
|
|
ElMessage({
|
|
message: "请填写目录名称",
|
|
type: "error",
|
|
});
|
|
return false;
|
|
}
|
|
if (expertInfo.value.id) {
|
|
let params = {
|
|
name: expertInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "0",
|
|
parentid: "0",
|
|
id: expertInfo.value.id,
|
|
icon: iconall.value,
|
|
opturl: expertInfo.value.opturl,
|
|
isdisplay: expertInfo.value.isdisplay,
|
|
};
|
|
editmenu(params).then(() => {
|
|
gteTabledata();
|
|
dialogVisible.value = false;
|
|
ElMessage({
|
|
message: "修改成功",
|
|
type: "success",
|
|
});
|
|
});
|
|
} else if (title.value == "新增子目录") {
|
|
let params = {
|
|
name: expertInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "0",
|
|
opturl: expertInfo.value.opturl,
|
|
isdisplay: expertInfo.value.isdisplay,
|
|
parentid: parentID.value,
|
|
icon: iconall.value,
|
|
};
|
|
addmenu(params).then(() => {
|
|
gteTabledata();
|
|
dialogVisible.value = false;
|
|
ElMessage({
|
|
message: "新建成功",
|
|
type: "success",
|
|
});
|
|
});
|
|
} else {
|
|
let params = {
|
|
name: expertInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "0",
|
|
opturl: expertInfo.value.opturl,
|
|
isdisplay: expertInfo.value.isdisplay,
|
|
parentid: "0",
|
|
id: expertInfo.value.id,
|
|
icon: iconall.value,
|
|
};
|
|
addmenu(params).then(() => {
|
|
gteTabledata();
|
|
dialogVisible.value = false;
|
|
ElMessage({
|
|
message: "新建成功",
|
|
type: "success",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
//菜单目录
|
|
const menurules = ref({
|
|
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
|
|
opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
|
|
permission: [{ required: true, message: "请输入菜单权限标识", trigger: "blur" }],
|
|
});
|
|
const menuVisible = ref(false);
|
|
const menutitle = ref("");
|
|
//定义按钮弹窗数据
|
|
const btnInfo: any = ref({
|
|
name: " ",
|
|
orderno: " ",
|
|
islink: " ",
|
|
opturl: " ",
|
|
permission: " ",
|
|
isdisplay: " ",
|
|
icon: "",
|
|
});
|
|
const btnVisible = ref(false);
|
|
const btnrules = ref({
|
|
name: [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
|
|
permission: [{ required: true, message: "请输入按钮权限标识", trigger: "blur" }],
|
|
});
|
|
//定义菜单弹窗数据
|
|
const menuInfo: any = ref({
|
|
name: "",
|
|
orderno: "",
|
|
islink: "",
|
|
opturl: "",
|
|
permission: "",
|
|
isdisplay: "",
|
|
icon: "",
|
|
});
|
|
//修改目录
|
|
const btntitle = ref("");
|
|
const getid = ref("");
|
|
const allId = ref("");
|
|
function handleEdit(row: any) {
|
|
iconall.value = row.icon;
|
|
const Row = JSON.parse(JSON.stringify(row));
|
|
getid.value = row.id;
|
|
btnparentid.value = row.parentid;
|
|
if (row.type == "2") {
|
|
btntitle.value = "修改按钮";
|
|
let newInfo = ref({});
|
|
newInfo.value = Row;
|
|
btnInfo.value = newInfo.value;
|
|
btnVisible.value = true;
|
|
} else if (row.type == "1") {
|
|
menutitle.value = "修改菜单";
|
|
let newInfo = ref({});
|
|
newInfo.value = Row;
|
|
menuInfo.value = newInfo.value;
|
|
menuVisible.value = true;
|
|
} else {
|
|
title.value = "修改目录";
|
|
let newInfo = ref({});
|
|
newInfo.value = Row;
|
|
expertInfo.value = newInfo.value;
|
|
dialogVisible.value = true;
|
|
}
|
|
}
|
|
//新增菜单
|
|
const btnparentid = ref("");
|
|
function menuclick(row: any) {
|
|
if (row.id == undefined) {
|
|
btnparentid.value = "0";
|
|
} else {
|
|
btnparentid.value = row.id;
|
|
}
|
|
menutitle.value = "添加菜单";
|
|
(menuInfo.value = {
|
|
name: "",
|
|
type: "1",
|
|
islink: "0",
|
|
opturl: "",
|
|
permission: "",
|
|
orderno: 1,
|
|
isdisplay: "1",
|
|
}),
|
|
(menuVisible.value = true);
|
|
iconall.value = "";
|
|
getid.value = row.id;
|
|
}
|
|
//添加按钮
|
|
function btnclick(row: any) {
|
|
getid.value = row.id;
|
|
btntitle.value = "添加按钮";
|
|
(btnInfo.value = {
|
|
name: "",
|
|
type: "2",
|
|
islink: "0",
|
|
opturl: "",
|
|
permission: "",
|
|
orderno: 1,
|
|
isdisplay: "1",
|
|
}),
|
|
(btnVisible.value = true);
|
|
btnparentid.value = row.id;
|
|
}
|
|
//删除
|
|
function handleDelete(row: any) {
|
|
const message = ref();
|
|
if (row.type == "0") {
|
|
message.value = "确定删除此目录及此目录下的所有菜单吗？";
|
|
} else if (row.type == "1") {
|
|
message.value = "确定删除此菜单及此菜单下的所有按钮吗？";
|
|
} else if (row.type == "2") {
|
|
message.value = "确定删除此按钮吗？";
|
|
}
|
|
ElMessageBox.confirm(message.value, "删除提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
const params = {
|
|
id: row.id,
|
|
};
|
|
deltmenu(params).then(() => {
|
|
gteTabledata();
|
|
ElMessage({
|
|
message: "删除成功",
|
|
type: "success",
|
|
});
|
|
});
|
|
});
|
|
}
|
|
//菜单目录-确定
|
|
function menusubmit() {
|
|
if (menuInfo.value.name == "") {
|
|
ElMessage({
|
|
message: "请填写菜单名称",
|
|
type: "error",
|
|
});
|
|
return false;
|
|
}
|
|
if (menuInfo.value.id) {
|
|
let params = {
|
|
name: menuInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "1",
|
|
opturl: menuInfo.value.opturl,
|
|
permission: menuInfo.value.permission,
|
|
islink: menuInfo.value.islink,
|
|
isdisplay: menuInfo.value.isdisplay,
|
|
// parentid: '',
|
|
id: getid.value,
|
|
icon: iconall.value,
|
|
};
|
|
editmenu(params).then(() => {
|
|
gteTabledata();
|
|
menuVisible.value = false;
|
|
ElMessage({
|
|
message: "修改成功",
|
|
type: "success",
|
|
});
|
|
});
|
|
} else {
|
|
let params = {
|
|
name: menuInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "1",
|
|
opturl: menuInfo.value.opturl,
|
|
islink: menuInfo.value.islink,
|
|
isdisplay: menuInfo.value.isdisplay,
|
|
parentid: btnparentid.value,
|
|
id: expertInfo.value.id,
|
|
icon: iconall.value,
|
|
};
|
|
addmenu(params).then(() => {
|
|
gteTabledata();
|
|
menuVisible.value = false;
|
|
ElMessage({
|
|
message: "新建成功",
|
|
type: "success",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
//按钮目录-确定
|
|
|
|
function btnsubmit() {
|
|
if (btnInfo.value.name == "" || btnInfo.value.permission == "") {
|
|
ElMessage({
|
|
message: "请填写按钮名称和权限标识",
|
|
type: "error",
|
|
});
|
|
return false;
|
|
}
|
|
if (btnInfo.value.id) {
|
|
let params = {
|
|
code: btnInfo.value.code,
|
|
name: btnInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "2",
|
|
opturl: btnInfo.value.opturl,
|
|
permission: btnInfo.value.permission,
|
|
islink: btnInfo.value.islink,
|
|
// isdisplay: btnInfo.value.isdisplay,
|
|
id: getid.value,
|
|
};
|
|
editmenu(params).then(() => {
|
|
gteTabledata();
|
|
dialogVisible.value = false;
|
|
ElMessage({
|
|
message: "修改成功",
|
|
type: "success",
|
|
});
|
|
btnVisible.value = false;
|
|
});
|
|
} else {
|
|
let params = {
|
|
name: btnInfo.value.name,
|
|
systemcode: systemcode.value,
|
|
type: "2",
|
|
opturl: btnInfo.value.opturl,
|
|
permission: btnInfo.value.permission,
|
|
islink: btnInfo.value.islink,
|
|
isdisplay: btnInfo.value.isdisplay,
|
|
parentid: btnparentid.value,
|
|
};
|
|
addmenu(params).then(() => {
|
|
gteTabledata();
|
|
dialogVisible.value = false;
|
|
ElMessage({
|
|
message: "新建成功",
|
|
type: "success",
|
|
});
|
|
btnVisible.value = false;
|
|
});
|
|
}
|
|
}
|
|
function dateFormat(row: any) {
|
|
const daterc = row;
|
|
if (daterc != null) {
|
|
var date = new Date(daterc);
|
|
var year = date.getFullYear();
|
|
var month =
|
|
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
|
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
|
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
// 拼接
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
|
}
|
|
}
|
|
//上传图标
|
|
function fileClick(val: any) {
|
|
allId.value = val;
|
|
const avatar = document.getElementById("avatar");
|
|
avatar?.click();
|
|
}
|
|
const iconall = ref("");
|
|
function changeFile(e: any) {
|
|
const files = new FormData();
|
|
files.append("icon", e.target.files[0]);
|
|
files.append("menuId", allId.value);
|
|
uploadIcon(files)
|
|
.then((res) => {
|
|
iconall.value = res.data;
|
|
gteTabledata();
|
|
ElMessage({
|
|
type: "success",
|
|
message: "上传成功",
|
|
});
|
|
// location.reload()
|
|
var file: any = document.getElementById("avatar");
|
|
file.value = "";
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "error",
|
|
message: "上传失败",
|
|
});
|
|
var file: any = document.getElementById("avatar");
|
|
file.value = "";
|
|
});
|
|
}
|
|
//图标删除事件
|
|
function delectIcon(id: any) {
|
|
ElMessageBox.confirm("确定删除此图标吗？", "删除提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
const params = {
|
|
id: id,
|
|
};
|
|
moveIcon(params).then(() => {
|
|
iconall.value = "";
|
|
gteTabledata();
|
|
ElMessage({
|
|
type: "success",
|
|
message: "删除成功",
|
|
});
|
|
});
|
|
});
|
|
}
|
|
// Icon选择器显示状态
|
|
function treeToTile(treeData: any, childKey = "children") {
|
|
const arr = [] as any[];
|
|
const expanded = (data: any) => {
|
|
if (data && data.length > 0) {
|
|
data
|
|
.filter((d: any) => d)
|
|
.forEach((e: any) => {
|
|
arr.push(e);
|
|
expanded(e[childKey] || []);
|
|
});
|
|
}
|
|
};
|
|
expanded(treeData);
|
|
return arr;
|
|
}
|
|
const activeRows: any = ref([]);
|
|
function rowDrop() {
|
|
const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
|
|
Sortable.create(tbody, {
|
|
draggable: ".draggable .el-table__row",
|
|
onMove: () => {
|
|
activeRows.value = treeToTile(tableData.value); // 把树形的结构转为列表再进行拖拽
|
|
},
|
|
onEnd(e: any) {
|
|
const oldRow = activeRows.value[e.oldIndex]; // 移动的那个元素
|
|
const newRow = activeRows.value[e.newIndex]; // 新的元素
|
|
|
|
if (oldRow.type != newRow.type) {
|
|
ElMessage({
|
|
message: "拖拽同级目录排序",
|
|
type: "warning",
|
|
});
|
|
tableData.value = [];
|
|
gteTabledata();
|
|
return;
|
|
}
|
|
const params = {
|
|
fromId: oldRow.id,
|
|
toId: newRow.id,
|
|
};
|
|
moveOrderno(params).then((res: any) => {
|
|
if (res.code == 1) {
|
|
tableData.value = [];
|
|
gteTabledata();
|
|
ElMessage({
|
|
type: "error",
|
|
message: "修改失败",
|
|
});
|
|
} else {
|
|
tableData.value = [];
|
|
gteTabledata();
|
|
}
|
|
});
|
|
},
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
gteTabledata();
|
|
rowDrop();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="collectiontemplate-box">
|
|
<section class="detail-box">
|
|
<el-menu
|
|
style="margin-bottom: 10px"
|
|
:default-active="activeIndex"
|
|
class="el-menu-demo"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
>
|
|
<!-- <el-menu-item index="1">Web端</el-menu-item>
|
|
<el-menu-item index="2">手机App</el-menu-item>
|
|
<el-menu-item index="3">Pad端</el-menu-item> -->
|
|
<el-menu-item index="4">数据填报</el-menu-item>
|
|
</el-menu>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: space-between;
|
|
-webkit-justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
"
|
|
>
|
|
<div style="display: flex; display: -webkit-flex">
|
|
<el-input
|
|
v-model="menuname"
|
|
placeholder="请输入菜单标题"
|
|
clearable
|
|
style="width: 200px; margin-right: 10px"
|
|
@keyup.enter="search()"
|
|
/>
|
|
<el-button type="primary" @click="search()">搜索</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button v-hasPerm="['add:menu']" type="primary" @click="addClick">
|
|
<img
|
|
src="@/assets/MenuIcon/jscz_xz.png"
|
|
alt=""
|
|
style="margin-right: 4px"
|
|
/>新增目录</el-button
|
|
>
|
|
<el-button v-hasPerm="['add:menu']" type="primary" @click="menuclick">
|
|
<img
|
|
src="@/assets/MenuIcon/jscz_xz.png"
|
|
alt=""
|
|
style="margin-right: 4px"
|
|
/>添加菜单</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="draggable">
|
|
<el-table
|
|
v-loading="loading"
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
default-expand-all
|
|
tooltip-effect="dark"
|
|
style="width: 100%; height: calc(104vh - 290px)"
|
|
row-key="id"
|
|
border
|
|
:header-cell-style="{
|
|
background: 'rgb(250 250 250)',
|
|
color: '#383838',
|
|
height: '50px',
|
|
}"
|
|
>
|
|
<el-table-column label="菜单标题" width="250" prop="name" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<div style="position: absolute; left: 15px">
|
|
<img src="@/assets/MenuIcon/lbcz_td.png" alt="" />
|
|
</div>
|
|
<div style="margin-left: 20px">{{ scope.row.name }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="菜单类型" width="100" align="center" prop="type">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.type == '2'">按钮</span>
|
|
<span v-else-if="scope.row.type == '1'">菜单</span>
|
|
<span v-else>目录</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="菜单编号"
|
|
prop="code"
|
|
width="100"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column label="系统类型" width="120" prop="systemcode" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.systemcode == '1'">Web端</span>
|
|
<span v-else-if="scope.row.systemcode == '2'">手机App</span>
|
|
<span v-else-if="scope.row.systemcode == '3'">Pad端</span>
|
|
<span v-else-if="scope.row.systemcode == '4'">数据填报</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="图标" width="100" prop="icon" align="center">
|
|
<template #default="scope">
|
|
<div
|
|
v-if="scope.row.type !== '2'"
|
|
style="
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: center;
|
|
-webkit-justify-content: center;
|
|
align-items: center;
|
|
-webkit-align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
"
|
|
>
|
|
<div v-if="scope.row.icon == ''">
|
|
<el-button @click="fileClick(scope.row.id)" class="avatar"
|
|
>上传</el-button
|
|
>
|
|
<input
|
|
type="file"
|
|
id="avatar"
|
|
style="display: none"
|
|
@change="changeFile"
|
|
/>
|
|
</div>
|
|
<div v-else class="delicon">
|
|
<div
|
|
class="delIcon"
|
|
style="
|
|
position: absolute;
|
|
top: 0px;
|
|
right: -7px;
|
|
background-color: red;
|
|
width: 10px;
|
|
height: 10px;
|
|
text-align: center;
|
|
line-height: 9px;
|
|
border-radius: 50%;
|
|
display: none;
|
|
z-index: 1000;
|
|
"
|
|
@click="delectIcon(scope.row.id)"
|
|
>
|
|
x
|
|
</div>
|
|
<img
|
|
:src="url + '/menu/' + scope.row.icon"
|
|
@click="fileClick(scope.row.id)"
|
|
alt=""
|
|
style="width: 16px; height: 16px; cursor: pointer"
|
|
/>
|
|
<input
|
|
type="file"
|
|
id="avatar"
|
|
style="display: none"
|
|
@change="changeFile"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column> -->
|
|
<!-- <el-table-column label="是否外链" width="100" prop="islink" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.islink == '1'">是</span>
|
|
<span v-else>否</span>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column
|
|
label="操作URL"
|
|
min-width="100"
|
|
prop="opturl"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="scope">
|
|
<span v-if="scope.row.opturl">{{ scope.row.opturl }}</span>
|
|
<span v-else>--</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="权限标识"
|
|
width="140"
|
|
prop="permission"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column label="是否显示" width="100" prop="isdisplay" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.isdisplay == '1'">是</span>
|
|
<span v-else>否</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="lastmodifier"
|
|
label="最近修改者"
|
|
width="120"
|
|
></el-table-column>
|
|
<el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
|
|
<template #default="scope">
|
|
{{ dateFormat(scope.row.lastmodifydate) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
width="160"
|
|
fixed="right"
|
|
align="center"
|
|
style="display: flex; display: -webkit-flex"
|
|
>
|
|
<template #default="scope">
|
|
<!-- <img src="@/assets/icon/edit.png" alt="" title="修改" @click="handleEdit(scope.row)"
|
|
style="cursor: pointer;margin-left:5px;"> -->
|
|
<!-- <img src="@/assets/icon/subdirectory.png" alt="" title="子目录" @click="subdirectoryclick(scope.$index, scope.row)" style="cursor: pointer;margin-left:5px"> -->
|
|
<span
|
|
style="
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: space-around;
|
|
-webkit-justify-content: space-around;
|
|
"
|
|
>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_xg.png"
|
|
alt=""
|
|
v-hasPerm="['update:menu']"
|
|
title="修改"
|
|
@click="handleEdit(scope.row)"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_zml.png"
|
|
alt=""
|
|
v-hasPerm="['add:menu']"
|
|
v-if="scope.row.type == '0'"
|
|
title="添加子目录"
|
|
@click="addchilder(scope.row)"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_zml1.png"
|
|
alt=""
|
|
v-hasPerm="['add:menu']"
|
|
v-else
|
|
title="新增子目录"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_cd.png"
|
|
alt=""
|
|
v-hasPerm="['add:menu']"
|
|
v-if="scope.row.type == '0'"
|
|
title="添加菜单"
|
|
@click="menuclick(scope.row)"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_cd1.png"
|
|
alt=""
|
|
v-hasPerm="['add:menu']"
|
|
v-else
|
|
title="添加菜单"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_an.png"
|
|
alt=""
|
|
v-hasPerm="['add:menu']"
|
|
v-if="scope.row.type == '1'"
|
|
title="按钮"
|
|
@click="btnclick(scope.row)"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_an1.png"
|
|
alt=""
|
|
v-hasPerm="['add:menu']"
|
|
v-else
|
|
title="按钮"
|
|
style="
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
font-size: 18px;
|
|
color: rgb(153 214 255);
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_sc.png"
|
|
alt=""
|
|
v-hasPerm="['del:menu']"
|
|
v-if="scope.row.status == '09'"
|
|
title="删除"
|
|
style="cursor: pointer"
|
|
/>
|
|
<img
|
|
src="@/assets/MenuIcon/lbcz_sc.png"
|
|
alt=""
|
|
v-hasPerm="['del:menu']"
|
|
v-else
|
|
title="删除"
|
|
@click="handleDelete(scope.row)"
|
|
style="cursor: pointer"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- </div> -->
|
|
</section>
|
|
<!-- 新增目录 -->
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
:close-on-click-modal="false"
|
|
:before-close="handleClose"
|
|
:title="title"
|
|
draggable
|
|
append-to-body
|
|
width="620px"
|
|
class="dialogClass"
|
|
>
|
|
<el-form ref="expertInfoRef" :model="expertInfo" :rules="rules" label-width="90px">
|
|
<el-form-item label="目录编号" prop="name">
|
|
<el-input
|
|
v-model="expertInfo.code"
|
|
placeholder=""
|
|
disabled
|
|
style="width: 100%"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="目录名称" prop="name">
|
|
<el-input
|
|
v-model="expertInfo.name"
|
|
placeholder=""
|
|
style="width: 100%"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否显示" prop="isdisplay">
|
|
<el-radio-group v-model="expertInfo.isdisplay">
|
|
<el-radio label="1">是</el-radio>
|
|
<el-radio label="0">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span
|
|
class="dialog-footer"
|
|
style="
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: flex-end;
|
|
-webkit-justify-content: flex-end;
|
|
"
|
|
>
|
|
<el-button @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" @click="expertsubmit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 菜单目录 -->
|
|
<el-dialog
|
|
v-model="menuVisible"
|
|
:close-on-click-modal="false"
|
|
:before-close="handleClose"
|
|
:title="menutitle"
|
|
draggable
|
|
append-to-body
|
|
width="620px"
|
|
class="dialogClass"
|
|
>
|
|
<el-form ref="menuInfoRef" :model="menuInfo" :rules="menurules" label-width="90px">
|
|
<el-form-item label="菜单编号">
|
|
<el-input
|
|
v-model="menuInfo.code"
|
|
placeholder=""
|
|
disabled
|
|
style="width: 100%"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="菜单名称" prop="name">
|
|
<el-input v-model="menuInfo.name" placeholder="" style="width: 100%"></el-input>
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="是否外链" prop="islink">
|
|
<el-radio-group v-model="menuInfo.islink">
|
|
<el-radio label="1">是</el-radio>
|
|
<el-radio label="0">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item> -->
|
|
<el-form-item label="操作URL" prop="opturl">
|
|
<el-input
|
|
v-model="menuInfo.opturl"
|
|
placeholder=""
|
|
style="width: 100%"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否显示" prop="isdisplay">
|
|
<el-radio-group v-model="menuInfo.isdisplay">
|
|
<el-radio label="1">是</el-radio>
|
|
<el-radio label="0">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span
|
|
class="dialog-footer"
|
|
style="
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: flex-end;
|
|
-webkit-justify-content: flex-end;
|
|
"
|
|
>
|
|
<el-button @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" @click="menusubmit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 按钮 -->
|
|
<el-dialog
|
|
v-model="btnVisible"
|
|
:close-on-click-modal="false"
|
|
:before-close="handleClose"
|
|
:title="btntitle"
|
|
append-to-body
|
|
width="620px"
|
|
class="dialogClass"
|
|
draggable
|
|
>
|
|
<el-form ref="btnInfoRef" :model="btnInfo" :rules="btnrules" label-width="90px">
|
|
<el-form-item label="按钮编号">
|
|
<el-input
|
|
v-model="btnInfo.code"
|
|
placeholder=""
|
|
disabled
|
|
style="width: 100%"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="按钮名称" prop="name">
|
|
<el-input v-model="btnInfo.name" placeholder="" style="width: 100%"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="权限标识" prop="permission">
|
|
<el-input
|
|
v-model="btnInfo.permission"
|
|
placeholder=""
|
|
style="width: 100%"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否显示" prop="isdisplay">
|
|
<el-radio-group v-model="btnInfo.isdisplay">
|
|
<el-radio label="1">是</el-radio>
|
|
<el-radio label="0">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span
|
|
class="dialog-footer"
|
|
style="
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: flex-end;
|
|
-webkit-justify-content: flex-end;
|
|
"
|
|
>
|
|
<el-button @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" @click="btnsubmit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.detail-box {
|
|
position: relative;
|
|
z-index: 900;
|
|
pointer-events: all;
|
|
width: 100%;
|
|
height: calc(100vh - 110px);
|
|
overflow: auto;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: none;
|
|
padding: 5px 20px 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:deep(.el-tooltip) {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
align-items: center;
|
|
-webkit-align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.delicon {
|
|
width: 20px;
|
|
height: 25px;
|
|
position: relative;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
align-items: center;
|
|
-webkit-align-items: center;
|
|
// margin-left: 20px;
|
|
}
|
|
|
|
.delicon:hover {
|
|
// background-color: red;
|
|
|
|
.delIcon {
|
|
display: block !important;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
:deep(.el-table__expand-icon) {
|
|
margin-left: 15px;
|
|
margin-right: -10px !important;
|
|
}
|
|
</style>
|