Commit 667403bc authored by “yiyousong”'s avatar “yiyousong”

pref:修改菜单页面

parent a838779e
......@@ -9,6 +9,26 @@
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<style>
*,
:after,
:before {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-o-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
html,
body {
font-size: 16px;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑",
sans-serif !important;
width: 100%;
height: 100%;
}
</style>
</head>
<body style="font-size: 16px;">
......
<template>
<div id="app">
<div class="app">
<a-spin v-bind="loadingProps">
<a-config-provider :locale="zh_CN">
<router-view />
......@@ -49,34 +49,17 @@ export default {
},
};
</script>
<style lang="less">
*,
:after,
:before {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-o-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
html,
body,
#app {
font-size: 16px;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑",
sans-serif !important;
width: 100%;
height: 100%;
}
#app {
<style lang="less" scoped>
.app {
width: 100% !important;
min-width: 1440px !important;
height: 100%;
}
.ant-spin-nested-loading,
.ant-spin-container {
/deep/.ant-spin-container {
width: 100%;
min-height: 100% !important;
display: flex;
// flex-direction: column;
}
</style>
......@@ -42,9 +42,9 @@ service.interceptors.response.use(
message: msg,
maxCount: 1,
});
Storage.remove(2, "userInfo");
Storage.remove(2, "siteId");
Storage.remove(2, "Authorization");
Storage.clear(2);
// Storage.remove(2, "siteId");
// Storage.remove(2, "Authorization");
router.push("/");
}
}
......@@ -56,9 +56,6 @@ service.interceptors.response.use(
case 400:
error.message = "错误请求";
break;
case 401:
error.message = "未授权,请重新登录";
break;
case 403:
error.message = "拒绝访问";
break;
......@@ -92,14 +89,15 @@ service.interceptors.response.use(
default:
error.message = `连接错误${error.response.status}`;
}
message.error(error.message);
} else {
if (JSON.stringify(error).includes("timeout")) {
Vue.prototype.$message.error("服务器响应超时,请刷新当前页");
}
error.message = "连接服务器失败";
}
Vue.prototype.$setLoading(false);
// message.error(error.message);
return Promise.resolve(error.response);
}
......
......@@ -24,7 +24,7 @@
alt
/>
</div>
<h5 style="margin-top: 10px">{{ item.modelName }}</h5>
<div class="name" style="margin-top: 10px">{{ item.modelName }}</div>
</div>
</div>
</div>
......@@ -129,8 +129,9 @@ export default {
display: flex;
flex-wrap: wrap;
.mod_max {
width: 96px;
height: 115px;
margin-right: 39px;
margin-left: 39px;
margin-top: 5px;
text-align: center;
cursor: pointer;
......@@ -144,11 +145,15 @@ export default {
background-color: rgba(84, 120, 140, 1);
}
h5 {
.name {
width: 100%;
font-weight: 700;
font-size: 16px;
color: #ffffff;
padding-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
......
......@@ -82,8 +82,6 @@ export default {
this.stepsList = data.data;
// console.log(this.stepsList);
this.searchVal = undefined;
} else {
this.$message.error(res.msg);
}
});
},
......
......@@ -160,8 +160,6 @@ export default {
this.stepsList = data.data;
console.log(this.stepsList);
this.searchVal = undefined;
} else {
this.$message.error(res.msg);
}
});
},
......
......@@ -240,35 +240,6 @@ export default {
align-items: center;
.range_picker_style {
margin-right: 20px;
// color: #32a6fb !important;
.ant-calendar-picker-input {
// background: transparent !important;
// border-color: #32a6fb !important;
// color: #32a6fb !important;
}
.ant-calendar-range-picker-separator {
// color: #32a6fb !important;
}
::-webkit-input-placeholder {
/* WebKit browsers,webkit内核浏览器 */
// color: #32a6fb;
// font-size: 16px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
// color: #32a6fb;
// font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
// color: #32a6fb;
// font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
// color: #32a6fb;
// font-size: 16px;
}
}
/deep/.ant-input-affix-wrapper {
width: 15rem !important;
......@@ -330,9 +301,6 @@ export default {
margin-left: 1rem !important;
}
}
/deep/.ant-table-pagination {
float: left !important;
}
}
}
</style>
......@@ -4,7 +4,7 @@
<a-tabs v-model="tabsActive" @change="tabsChange" :forceRender="false">
<a-tab-pane
:key="item.path"
v-for="(item, index) of tabsList['children']"
v-for="item of tabsList['children']"
:tab="item['meta']['title']"
>
</a-tab-pane>
......@@ -50,6 +50,9 @@ export default {
<style lang="less" scoped>
@headerH: 4.5rem;
/deep/.ant-spin-container {
display: block;
}
.Container {
height: 100% !important;
// background: #fac;
......
......@@ -5,7 +5,7 @@
:centered="true"
:destroyOnClose="true"
:getContainer="() => $refs.EditModal_box"
:visible="EditModalVisible"
:visible="visible"
:confirmLoading="EditModalLoading"
@cancel="handleClose"
width="33%"
......@@ -22,13 +22,13 @@
:model="compileInfoForm"
:rules="Rules"
>
<a-form-model-item label="类型" prop="menuType">
<!-- <a-form-model-item label="类型" prop="menuType">
<a-radio-group v-model="compileInfoForm.menuType">
<a-radio v-for="v in MenuDict" :key="v.id" :value="v.id"
>{{ v.name }}
<a-radio v-for="(val, key) in MenuDict" :key="val" :value="key"
>{{ val }}
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-form-model-item> -->
<a-form-model-item label="名称" prop="name">
<a-input
......@@ -39,16 +39,14 @@
</a-form-model-item>
<a-form-model-item
label="菜单路径"
label="父级菜单"
prop="parentId"
v-if="formTitle == '编辑'"
>
<MyMenuTree
expandTrigger="hover"
v-model="compileInfoForm.parentId"
:options="MenuDict.MenuTree"
placeholder="请选择菜单路径"
@onChange="onChange"
<a-input
placeholder="请输入名称"
allowClear
v-model="compileInfoForm.name"
/>
</a-form-model-item>
<!-- <a-form-model-item>
......@@ -110,15 +108,18 @@
</a-form-model-item>
<a-form-model-item label="图标" prop="imgPath">
<MyUpload
:uploadInfo="uploadInfo"
v-model="compileInfoForm.imgPath"
@uploadChange="uploadChange"
<a-upload
name="file"
:action="api + 'zwfw/file/commonupload'"
:multiple="false"
:file-list="fileList"
@change="handleChangeFile"
accept="image/jpeg,image/png"
>
<a-button style="background: #04ca8f; color: #fff"
>选择文件</a-button
>
</MyUpload>
<a-button type="primary">
<a-icon type="upload" /> 选择文件
</a-button>
</a-upload>
</a-form-model-item>
<a-form-model-item label="序号" prop="orderId">
......@@ -146,15 +147,29 @@
</template>
<script>
import { deepClone } from "@/utils/js/common.js";
import { menuSave } from "@/api/menuMgmt.js";
export default {
name: "PortalAdminVueAddEdit",
data() {
return {
EditModalVisible: false, //模态
api: process.env.VUE_APP_API_BASE_URL + "/",
EditModalLoading: false, //确定回调 loading
compileInfoForm: {}, //页面表单信息
compileInfoForm: {
name: "",
url: "",
parentId: "",
linkType: "",
imgPath: "",
buttonImgPath: "",
imgCommPath: "",
visible: "",
menuType: "",
status: "",
authType: "",
orderId: "",
createUserName: "",
remark: "",
}, //页面表单信息
Rules: {
firstLevel: [
//一级菜单
......@@ -207,7 +222,7 @@ export default {
imgPath: [
//图标
{
required: false, //是否必选
required: true, //是否必选
message: "请选择图标",
trigger: "change",
},
......@@ -247,11 +262,18 @@ export default {
limit: 1, //限制文件上传数量
whiteFileList: ["jpg", "jpeg", "png", "gif", "bmp"],
},
fileList: [],
toStr: ["menuType"],
};
},
props: {
MenuDict: {
type: Object,
default: () => {
return {};
},
},
MenuList: {
type: Array,
default: () => {
return [];
......@@ -263,102 +285,89 @@ export default {
return "编辑";
},
},
sourceInfoForm: {
type: Object,
default: () => {
return {};
EditModalVisible: {
type: Boolean,
required: true,
default: false,
},
},
computed: {
visible: {
get() {
return this.EditModalVisible;
},
watch: {
sourceInfoForm: {
handler(newValue, oldValue) {
// console.log(newValue);
// console.log(oldValue);
this.compileInfoForm = deepClone(newValue);
this.toStr.map((item) => {
this.compileInfoForm[item] = this.compileInfoForm[item]
? this.compileInfoForm[item].toString()
: "0";
});
// for (let key in this.Rules) {
// this.Rules[key][0].required = this.formTitle == "添加";
// }
set(val) {
this.$emit("update:EditModalVisible", val);
},
deep: true,
},
},
mounted() {},
methods: {
// 上传
handleChangeFile(info) {
let fileList = [...info.fileList];
fileList = fileList.slice(-1);
fileList = fileList.map((file) => {
if (file.response) {
file.url = file.response.url;
}
return file;
});
this.fileList = fileList;
if (this.fileList.length) {
this.compileInfoForm.imgPath = this.fileList[0].url;
} else {
this.compileInfoForm.imgPath = "";
}
},
onChange(val) {
console.log(val);
},
uploadChange(fileInfo) {
this.uploadInfo.fileList = deepClone(fileInfo.fileList);
},
Modal_Ok() {
this.$refs.compileInfoForm.validate((valid) => {
if (valid) {
let submitObj = {
name: this.compileInfoForm["name"],
url: this.compileInfoForm["url"],
parentId: this.compileInfoForm["parentId"],
linkType: this.compileInfoForm["linkType"],
imgPath: this.compileInfoForm["imgPath"],
buttonImgPath: this.compileInfoForm["buttonImgPath"],
imgCommPath: this.compileInfoForm["imgCommPath"],
visible: this.compileInfoForm["visible"],
menuType: this.compileInfoForm["menuType"],
status: this.compileInfoForm["status"],
authType: this.compileInfoForm["authType"],
orderId: this.compileInfoForm["orderId"],
createUserName: this.compileInfoForm["createUserName"],
remark: this.compileInfoForm["remark"],
};
submitObj = JSON.parse(JSON.stringify(submitObj)); //过滤空值
if (this.formTitle == "编辑") {
submitObj["id"] = this.compileInfoForm["id"];
}
// console.log(submitObj);
// 提交成功 重新拉取父组件table data
menuSave(submitObj).then((res) => {
// console.log(res);
menuSave(this.compileInfoForm).then((res) => {
if (res.code == 1) {
this.$emit("getMenuList");
// this.$message.success(res.msg);
this.EditModalVisible = false;
this.$message.success(res.msg);
this.handleClose();
}
});
} else {
this.$message.error(`请完善表单信息!`);
return false;
}
});
},
resetForm() {
// 重置还原表单信息内容
this.$set(this, "compileInfoForm", this.sourceInfoForm);
this.$nextTick(() => {
this.$refs.compileInfoForm.resetFields();
});
},
firstLevelChange(val) {
this.compileInfoForm["firstLevel"] =
this.MenuDict.firstLevelOptions.filter((v) => v.id == val)[0]["name"];
this.compileInfoForm["firstLevel"];
},
secondLevelChange(val) {
this.compileInfoForm["secondLevel"] =
this.MenuDict.secondLevelOptions.filter((v) => v.id == val)[0]["name"];
this.compileInfoForm["secondLevel"];
// 新增
onAdd(type, parent) {
Object.assign(this.compileInfoForm, this.$options.data().compileInfoForm);
this.compileInfoForm.id && this.$delete(this.compileInfoForm, "id");
this.compileInfoForm.menuType = type;
this.compileInfoForm.parentId = parent;
console.log(this.compileInfoForm);
},
// 编辑
onEdit(row) {
this.compileInfoForm = { ...row };
this.fileList = [
{
uid: -1,
name: this.compileInfoForm.imgPath,
url: this.compileInfoForm.imgPath,
status: "done",
},
thirdLevelChange(val) {
this.compileInfoForm["thirdLevel"] =
this.MenuDict.thirdLevelOptions.filter((v) => v.id == val)[0]["name"];
];
},
// 关闭弹窗
handleClose() {
this.EditModalVisible = false;
this.fileList = [];
this.$refs.compileInfoForm.resetFields();
this.visible = false;
},
},
};
......
<template>
<div class="menuMgmt">
<div class="header_box">
<button class="add_btn" @click="showEditModal(1)">
<span>新增</span>
</button>
<a-button type="primary" @click="showEditModal(1)">新增</a-button>
<span>
<a-input v-model="searchForm.name" placeholder="请输入菜单名称搜索">
<a-icon slot="prefix" type="search" />
......@@ -29,6 +27,7 @@
:loading="tableLoading"
:columns="tableHeaders"
:dataSource="menusTreeData"
:expandIconColumnIndex="1"
>
<!-- 序号 -->
<template slot="index" slot-scope="text, record, index">
......@@ -48,7 +47,7 @@
<!-- 操作 -->
<template slot="operation" slot-scope="text, record, index">
<a-button
style="color: #8ae7d2"
style="color: #03d76f"
type="link"
@click="showEditModal(2, record)"
>添加</a-button
......@@ -66,9 +65,10 @@
</a-table>
<addEdit
ref="addEdit"
:sourceInfoForm="sourceInfoForm"
:EditModalVisible.sync="EditModalVisible"
:formTitle="formTitle"
:MenuDict="MenuDict"
:MenuList="menusTreeData"
@getMenuList="getMenuList"
/>
</div>
......@@ -76,7 +76,6 @@
</template>
<script>
import { deepClone } from "@/utils/js/common.js";
import { menuDelete, menuList } from "@/api/menuMgmt.js";
import addEdit from "./components/addEdit.vue";
// import { version } from "vue";
......@@ -87,9 +86,8 @@ export default {
name: "PortalAdminVueMenuMgmt",
data() {
return {
api: process.env.VUE_APP_API_BASE_URL.includes("zwfw")
? process.env.VUE_APP_API_BASE_URL.replace("zwfw", "")
: process.env.VUE_APP_API_BASE_URL + "/",
api: process.env.VUE_APP_API_BASE_URL + "/",
EditModalVisible: false,
searchForm: {
name: undefined,
parentId: "",
......@@ -97,10 +95,6 @@ export default {
tableLoading: false,
selectOptions: [],
tableHeaders: [
{
width: "60px",
align: "center",
},
{
width: "60px",
title: "序号",
......@@ -112,27 +106,11 @@ export default {
{
width: "150px",
title: "名称",
align: "center",
align: "left",
dataIndex: "name",
ellipsis: true,
},
// {
// title: "一级菜单",
// align: "center",
// dataIndex: "firstLevel",
// },
// {
// title: "二级菜单",
// align: "center",
// dataIndex: "secondLevel",
// },
// {
// title: "三级菜单",
// align: "center",
// dataIndex: "thirdLevel",
// },
{
title: "地址",
align: "center",
......@@ -176,7 +154,7 @@ export default {
defaultPageSize: 2000,
showTotal: (total, range) => `共${total}条`,
},
MenuDict: [],
MenuDict: {},
firstStair: [], // 一级菜单
menusTreeData: [], // 菜单树形结构数据
};
......@@ -189,20 +167,20 @@ export default {
},
methods: {
// 对象转对象数组
transverter(obj) {
return Object.keys(obj).map((v) => {
return {
id: v,
name: obj[v],
};
});
},
// transverter(obj) {
// return Object.keys(obj).map((v) => {
// return {
// id: v,
// name: obj[v],
// };
// });
// },
// 过滤菜单类型
filterMenuType(val) {
let str = "";
this.MenuDict.forEach((v) => {
if (val == v.id) {
str = v.name;
Object.keys(this.MenuDict).forEach((key) => {
if (val == key) {
str = this.MenuDict[key];
}
});
return str;
......@@ -232,10 +210,11 @@ export default {
let { data, total, dict } = res.data;
let { menuType } = dict;
this.tablePagination.total = total;
this.MenuDict = this.transverter(menuType);
this.MenuDict = menuType;
this.firstStair = data.filter((v) => v.parentId === -1);
let childrens = data.filter((v) => v.parentId !== -1);
this.menusTreeData = this.fliterEvent(this.firstStair, childrens);
console.log(this.MenuDict);
},
// 搜索
async searchData() {
......@@ -258,54 +237,17 @@ export default {
this.getMenuList();
},
showEditModal(type, row) {
// type 1 新增根节点-1 , 2 在此节点创建,3,编辑
if (type === 1) {
let obj = {
parentId: -1, //默认创建根节点
name: undefined,
url: undefined,
linkType: undefined,
imgPath: undefined,
buttonImgPath: undefined,
imgCommPath: undefined,
visible: undefined,
menuType: undefined,
status: undefined,
authType: undefined,
orderId: undefined,
createUserName: undefined,
remark: "",
visible: 1,
status: 1,
};
this.sourceInfoForm = deepClone(obj);
this.formTitle = "新增";
this.$refs.addEdit.onAdd(0, -1);
} else if (type === 2) {
let obj = {
parentId: row.id, //父节点id
name: undefined,
url: undefined,
linkType: undefined,
imgPath: undefined,
buttonImgPath: undefined,
imgCommPath: undefined,
visible: undefined,
menuType: undefined,
status: undefined,
authType: undefined,
orderId: undefined,
createUserName: undefined,
remark: "",
visible: 1,
status: 1,
};
this.sourceInfoForm = deepClone(obj);
this.formTitle = "添加";
} else if (type === 3) {
this.sourceInfoForm = deepClone(row);
this.formTitle = "新增子级菜单";
this.$refs.addEdit.onAdd(1, row.id);
} else if (3) {
this.formTitle = "编辑";
this.$refs.addEdit.onEdit(row);
}
this.$refs.addEdit.EditModalVisible = true;
this.EditModalVisible = true;
},
//删除
deleteRole(row, index) {
......@@ -324,7 +266,7 @@ export default {
//重新获取table数据
_this.$nextTick(() => {
_this.getMenuList();
// _this.$message.success(res.data.message);
_this.$message.success(res.msg);
});
}
});
......@@ -336,6 +278,9 @@ export default {
</script>
<style lang="less" scoped>
/deep/.ant-spin-container {
display: block;
}
.menuMgmt {
.header_box {
padding-bottom: 1rem;
......@@ -454,9 +399,6 @@ export default {
margin-left: 1rem !important;
}
}
/deep/.ant-table-pagination {
float: left !important;
}
}
}
</style>
\ No newline at end of file
......@@ -209,6 +209,9 @@ export default {
</script>
<style lang="less" scoped>
/deep/.ant-spin-container {
display: block;
}
.authorityMis {
.header_box {
padding-bottom: 1rem;
......@@ -306,9 +309,6 @@ export default {
margin-left: 1rem !important;
}
}
/deep/.ant-table-pagination {
float: left !important;
}
}
}
</style>
\ No newline at end of file
......@@ -133,8 +133,6 @@ export default {
this.$emit("getRoleList");
// this.$message.success(res.msg);
this.roleEditModalVisible = false;
} else {
this.$message.error(res.msg);
}
});
} else {
......
......@@ -243,8 +243,6 @@ export default {
// this.permsForm.menuIdList = this.getCheckedlist(data.menuIdList);
this.permsForm.menuIdList = data.menuIdList;
// console.log(this.permsForm.menuIdList);
} else {
this.$message.error(res.msg);
}
});
},
......
......@@ -274,6 +274,9 @@ export default {
</script>
<style lang="less" scoped>
/deep/.ant-spin-container {
display: block;
}
.user {
.user_btn {
display: flex;
......
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