Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui
Yer
commit
b8c74ac84c
|
|
@ -19,5 +19,9 @@ module.exports = {
|
|||
aMapSwitch:false, //是否开启高德定位
|
||||
enableCDN: true, //生产环境 是否启用cdn加载 vue等js
|
||||
port: 10000, //端口
|
||||
inputMaxLength:'140' //全局输入框默认最大输入长度字
|
||||
inputMaxLength:'140', //全局输入框默认最大输入长度字
|
||||
|
||||
|
||||
PC_DOMAIN: "https://pc-b2b2c.pickmall.cn", // PC端域名
|
||||
WAP_DOMAIN: "https://m-b2b2c.pickmall.cn", // WAP端域名
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<FormItem>
|
||||
<Button type="primary" :loading="applyLoading" @click="apply"
|
||||
>提交申请</Button
|
||||
>提交申请</Button
|
||||
>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<Alert type="success">
|
||||
您提交的信息正在审核
|
||||
<template slot="desc"
|
||||
>提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
|
||||
>提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
|
||||
>
|
||||
</Alert>
|
||||
</div>
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
<div v-if="status === 2">
|
||||
<div class="tips">
|
||||
|
||||
<p>分销下线付款之后会生成分销订单。</p>
|
||||
<p>
|
||||
冻结金额：用户提现金额即为冻结金额，审核通过后扣除冻结金额，审核拒绝之后冻结金额返回可提现金额。
|
||||
</p>
|
||||
<p>可提现金额：分销订单佣金T+1解冻后可变为可提现金额。</p>
|
||||
<p>分销下线付款之后会生成分销订单。</p>
|
||||
<p>
|
||||
冻结金额：用户提现金额即为冻结金额，审核通过后扣除冻结金额，审核拒绝之后冻结金额返回可提现金额。
|
||||
</p>
|
||||
<p>可提现金额：分销订单佣金T+1解冻后可变为可提现金额。</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<div class="mb_20 account-price">
|
||||
<span class="subTips">可提现金额：</span>
|
||||
<span class="fontsize_48 global_color"
|
||||
>￥{{ result.canRebate | unitPrice }}</span
|
||||
>￥{{ result.canRebate | unitPrice }}</span
|
||||
>
|
||||
<span class="subTips">冻结金额：</span>
|
||||
<span class="">￥{{ result.commissionFrozen | unitPrice }}</span>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
size="small"
|
||||
class="ml_20"
|
||||
@click="withdrawApplyModal = true"
|
||||
>申请提现</Button
|
||||
>申请提现</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,13 +102,13 @@
|
|||
size="small"
|
||||
style="margin-right: 5px"
|
||||
@click="fenxiao(row)"
|
||||
>分销商品</Button
|
||||
>分销商品</Button
|
||||
>
|
||||
<Button
|
||||
type="error"
|
||||
size="small"
|
||||
@click="selectGoods(row.id, false)"
|
||||
>取消选择</Button
|
||||
>取消选择</Button
|
||||
>
|
||||
</template>
|
||||
</Table>
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
size="small"
|
||||
style="margin-right: 5px"
|
||||
@click="selectGoods(row.id, true)"
|
||||
>选择商品</Button
|
||||
>选择商品</Button
|
||||
>
|
||||
</template>
|
||||
</Table>
|
||||
|
|
@ -197,8 +197,8 @@
|
|||
row.distributionCashStatus == "APPLY"
|
||||
? "待处理"
|
||||
: row.distributionCashStatus == "VIA_AUDITING"
|
||||
? "通过"
|
||||
: "拒绝"
|
||||
? "通过"
|
||||
: "拒绝"
|
||||
}}</span
|
||||
>
|
||||
</template>
|
||||
|
|
@ -222,11 +222,27 @@
|
|||
<Alert type="error">
|
||||
分销功能暂未开启
|
||||
<template slot="desc"
|
||||
>提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
|
||||
>提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
|
||||
>
|
||||
</Alert>
|
||||
</div>
|
||||
<!-- 分销资格被清退 -->
|
||||
<div v-if="status === 4">
|
||||
<Alert type="error">
|
||||
您的分销资格已被清退。请联系管理员或进行申诉
|
||||
|
||||
<Button style="margin-left: 50px;" type="warning" @click="repaying">申诉</Button>
|
||||
</Alert>
|
||||
</div>
|
||||
<!-- 分销申诉审核 -->
|
||||
<div v-if="status === 5">
|
||||
<Alert type="success">
|
||||
您提交的申诉正在审核
|
||||
<template slot="desc"
|
||||
>提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
|
||||
>
|
||||
</Alert>
|
||||
</div>
|
||||
<Modal v-model="withdrawApplyModal" width="530">
|
||||
<p slot="header">
|
||||
<Icon type="edit"></Icon>
|
||||
|
|
@ -234,7 +250,7 @@
|
|||
</p>
|
||||
<div>
|
||||
<Input v-model="withdrawPrice" size="large" number maxlength="9"
|
||||
><span slot="append">元</span></Input
|
||||
><span slot="append">元</span></Input
|
||||
>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: center">
|
||||
|
|
@ -243,21 +259,39 @@
|
|||
</Modal>
|
||||
<Modal v-model="qrcodeShow" title="分销商品" width="800">
|
||||
<Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
|
||||
<div style="width: 200px; height: 200px; border: 1px solid #eee">
|
||||
<vue-qr
|
||||
:text="qrcode"
|
||||
:callback="qrcodeData"
|
||||
:margin="0"
|
||||
colorDark="#000"
|
||||
colorLight="#fff"
|
||||
:size="200"
|
||||
></vue-qr>
|
||||
<Button class="download-btn" type="success" @click="downloadQrcode"
|
||||
<div class="qrcode">
|
||||
<div style="width: 150px; height: 150px; border: 1px solid #eee">
|
||||
<vue-qr
|
||||
:text="qrcode"
|
||||
:callback="qrcodeData"
|
||||
:margin="0"
|
||||
colorDark="#000"
|
||||
colorLight="#fff"
|
||||
:size="150"
|
||||
></vue-qr>
|
||||
<div class="qrcode-platform">PC端</div>
|
||||
<Button class="download-btn" type="success" @click="downloadQrcode"
|
||||
>下载二维码</Button
|
||||
>
|
||||
>
|
||||
</div>
|
||||
<div style="width: 150px; height: 150px; border: 1px solid #eee">
|
||||
<vue-qr
|
||||
:text="qrcodeH5"
|
||||
:callback="qrcodeDataH5"
|
||||
:margin="0"
|
||||
colorDark="#000"
|
||||
colorLight="#fff"
|
||||
:size="150"
|
||||
></vue-qr>
|
||||
<div class="qrcode-platform">移动应用端</div>
|
||||
<Button class="download-btn" type="success" @click="downloadQrcodeH5"
|
||||
>下载二维码</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt_10">
|
||||
商品链接：<Input style="width: 400px" v-model="qrcode"></Input>
|
||||
|
||||
<div class="mt_10" style="margin-top: 100px;">
|
||||
商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
|
@ -280,6 +314,7 @@ export default {
|
|||
components: { vueQr },
|
||||
data() {
|
||||
return {
|
||||
config:require('@/config'),
|
||||
status: 0, // 申请状态，0为未申请 1 申请中 2 申请完成 3 功能暂未开启
|
||||
applyForm: {}, // 申请表单
|
||||
rules: {
|
||||
|
|
@ -364,8 +399,10 @@ export default {
|
|||
order: "desc",
|
||||
},
|
||||
qrcode: "", // 二维码
|
||||
qrcodeH5:"",//H5二维码
|
||||
qrcodeShow: false, // 显示二维码
|
||||
base64Img: "", // base64编码
|
||||
base64ImgH5: "", // base64H5编码
|
||||
goodsNameCurr: "", // 当前分销商品名称
|
||||
};
|
||||
},
|
||||
|
|
@ -406,6 +443,10 @@ export default {
|
|||
// 二维码base64地址
|
||||
this.base64Img = data64;
|
||||
},
|
||||
qrcodeDataH5(data64) {
|
||||
// 二维码H5端base64地址
|
||||
this.base64ImgH5 = data64;
|
||||
},
|
||||
downloadQrcode() {
|
||||
// 下载二维码
|
||||
let a = document.createElement("a"); // 生成一个a元素
|
||||
|
|
@ -414,6 +455,14 @@ export default {
|
|||
a.href = this.base64Img; // 将生成的URL设置为a.href属性
|
||||
a.dispatchEvent(event); // 触发a的单击事件
|
||||
},
|
||||
downloadQrcodeH5(){
|
||||
// 下载H5二维码
|
||||
let a = document.createElement("a"); // 生成一个a元素
|
||||
let event = new MouseEvent("click"); // 创建一个单击事件
|
||||
a.download = this.goodsNameCurr || "photo";
|
||||
a.href = this.base64ImgH5; // 将生成的URL设置为a.href属性
|
||||
a.dispatchEvent(event); // 触发a的单击事件
|
||||
},
|
||||
tabPaneChange(tab) {
|
||||
// tab栏切换
|
||||
if (tab === "goodsChecked") {
|
||||
|
|
@ -453,7 +502,8 @@ export default {
|
|||
},
|
||||
fenxiao(row) {
|
||||
// 分销商品
|
||||
this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
|
||||
this.qrcode = `${this.config.PC_DOMAIN}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
|
||||
this.qrcodeH5 = `${this.config.WAP_DOMAIN}/pages/product/goods?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
|
||||
this.goodsNameCurr = row.goodsName;
|
||||
this.qrcodeShow = true;
|
||||
},
|
||||
|
|
@ -469,19 +519,32 @@ export default {
|
|||
if (res.success) this.logData = res.result;
|
||||
});
|
||||
},
|
||||
//申诉
|
||||
repaying(){
|
||||
applyDistribution().then((res) => {
|
||||
this.applyLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("申诉已提交，请等待管理员审核");
|
||||
// this.status = 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
distribution() {
|
||||
// 获取分销商信息
|
||||
distribution().then((res) => {
|
||||
if (res.result) {
|
||||
this.result = res.result;
|
||||
let type = res.result.distributionStatus;
|
||||
|
||||
if (type === "PASS") {
|
||||
this.status = 2;
|
||||
this.getGoodsData();
|
||||
} else if (type === "RETREAT" || type === "REFUSE") {
|
||||
} else if ( type === "REFUSE") {
|
||||
this.status = 0;
|
||||
} else {
|
||||
} else if (type === "RETREAT") {
|
||||
this.status = 4;
|
||||
}else if (type === "APPEAL") {
|
||||
this.status = 5;
|
||||
}else {
|
||||
this.status = 1;
|
||||
}
|
||||
} else if (!res.data.success && res.data.code === 22000) {
|
||||
|
|
@ -523,9 +586,11 @@ export default {
|
|||
}
|
||||
}
|
||||
.download-btn {
|
||||
position: relative;
|
||||
top: -200px;
|
||||
left: 200px;
|
||||
// position: relative;
|
||||
// top: -200px;
|
||||
// left: 200px;
|
||||
margin-left: 25px;
|
||||
margin-top: 5px
|
||||
}
|
||||
/deep/ .ivu-alert-message {
|
||||
p {
|
||||
|
|
@ -540,4 +605,15 @@ export default {
|
|||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
.qrcode{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding-top: 10px
|
||||
|
||||
}
|
||||
.qrcode-platform{
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -261,6 +261,38 @@ export const searchPermission = (params) => {
|
|||
/****************************** 权限结束 */
|
||||
|
||||
|
||||
/****************************** 店铺权限 */
|
||||
// 获取全部权限数据
|
||||
export const getStoreAllPermissionList = (params) => {
|
||||
return getRequest("/permission/storeMenu/tree", params);
|
||||
};
|
||||
|
||||
// 获取全部权限数据
|
||||
export const getStoreCurrentPermissionList = (params) => {
|
||||
return getRequest("/permission/storeMenu/memberMenu", params);
|
||||
};
|
||||
|
||||
// 添加权限
|
||||
export const addStorePermission = (params) => {
|
||||
return postRequest("/permission/storeMenu", params);
|
||||
};
|
||||
|
||||
// 编辑权限
|
||||
export const editStorePermission = (params) => {
|
||||
return putRequest(`/permission/storeMenu/${params.id}`, params);
|
||||
};
|
||||
// 删除权限
|
||||
export const deleteStorePermission = (ids, params) => {
|
||||
return deleteRequest(`/permission/storeMenu/${ids}`, params);
|
||||
};
|
||||
// 搜索权限
|
||||
export const searchStorePermission = (params) => {
|
||||
return getRequest("/permission/storeMenu", params);
|
||||
};
|
||||
|
||||
/****************************** 权限结束 */
|
||||
|
||||
|
||||
// 分页获取日志数据
|
||||
export const getLogListData = (params) => {
|
||||
return getRequest("/setting/log/getAllByPage", params);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,576 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<!-- 筛选项和操作按钮 -->
|
||||
<Row class="operation">
|
||||
<i-switch
|
||||
v-model="strict"
|
||||
class="selectModel"
|
||||
size="large"
|
||||
style="margin-right: 5px"
|
||||
>
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRootMenu">添加顶级菜单</Button>
|
||||
<Button @click="addMenu" type="primary">添加子菜单</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Dropdown @on-click="handleDropdown">
|
||||
<Button>
|
||||
更多操作
|
||||
<Icon type="md-arrow-dropdown"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="refresh">刷新</DropdownItem>
|
||||
<DropdownItem name="expandOne">收合所有</DropdownItem>
|
||||
<DropdownItem name="expandTwo">展开一级</DropdownItem>
|
||||
<DropdownItem name="expandThree">展开两级</DropdownItem>
|
||||
<DropdownItem name="expandAll">展开所有</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Row>
|
||||
<!-- 页面主体，左侧树结构，右侧表单项 -->
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
|
||||
</Alert>
|
||||
<Input
|
||||
v-model="searchKey"
|
||||
suffix="ios-search"
|
||||
@on-change="search"
|
||||
placeholder="输入菜单名搜索"
|
||||
clearable
|
||||
/>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
:render="renderContent"
|
||||
@on-select-change="selectTree"
|
||||
@on-check-change="changeSelect"
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
|
||||
<FormItem label="类型" prop="type">
|
||||
<div v-show="form.level == 0">
|
||||
<Icon
|
||||
type="ios-navigate-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="form.level == 1 || form.level == 2">
|
||||
<Icon
|
||||
type="ios-list-box-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="路由地址"
|
||||
prop="path"
|
||||
v-if="form.level != 0"
|
||||
class="block-tool"
|
||||
>
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由地址，英文唯一，跳转页面，路径展示用 "
|
||||
>
|
||||
<Input class="menu-input" v-model="form.path" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由name，需英文唯一，跳转页面用"
|
||||
transfer
|
||||
>
|
||||
<Input class="menu-input" v-model="form.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
|
||||
<Input class="menu-input" v-model="form.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="form.level != 0" class="block-tool">
|
||||
<Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
|
||||
<Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000"/>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
type="primary"
|
||||
>保存
|
||||
</Button>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
draggable
|
||||
:title="modalTitle"
|
||||
v-model="menuModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{ top: '30px' }"
|
||||
>
|
||||
<Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
|
||||
</div>
|
||||
<FormItem label="类型" prop="type">
|
||||
<div v-show="formAdd.level == 0">
|
||||
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="formAdd.level != 0">
|
||||
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.path" />
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<Input v-model="formAdd.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.permission" type="textarea" />
|
||||
<div class="desc">*号模糊匹配，逗号分割</div>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="menuModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAllPermissionList,
|
||||
addPermission,
|
||||
editPermission,
|
||||
deletePermission,
|
||||
searchPermission,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
import Cookies from "js-cookie";
|
||||
export default {
|
||||
name: "menu-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
strict: true, // 级联 单选
|
||||
maxHeight: "500px", // 最大高度
|
||||
expandLevel: 1, // 展开层级
|
||||
menuModalVisible: false, // 添加菜单modal
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 所选数量
|
||||
showParent: false, // 展示父级
|
||||
searchKey: "", // 搜索关键词
|
||||
parentTitle: "", // 父级标题
|
||||
editTitle: "", // 编辑标题
|
||||
modalTitle: "", // modal标题
|
||||
form: {
|
||||
// 表单数据
|
||||
id: "",
|
||||
title: "",
|
||||
name: "",
|
||||
path: "",
|
||||
frontRoute: "",
|
||||
parentId: "",
|
||||
sortOrder: 0,
|
||||
level: 0,
|
||||
permission: "",
|
||||
},
|
||||
formAdd: {
|
||||
// 添加表单
|
||||
},
|
||||
formValidate: {
|
||||
// 验证规则
|
||||
title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
|
||||
frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
required: true,
|
||||
type: "number",
|
||||
message: "排序值不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
data: [], // 数据
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getAllList();
|
||||
},
|
||||
|
||||
renderContent(h, { root, node, data }) {
|
||||
// 渲染树形结构前面图标
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
}
|
||||
return h("span", [
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
]),
|
||||
]);
|
||||
},
|
||||
// 更多操作
|
||||
handleDropdown(name) {
|
||||
if (name == "expandOne") {
|
||||
this.expandLevel = 1;
|
||||
this.getAllList();
|
||||
} else if (name == "expandTwo") {
|
||||
this.expandLevel = 2;
|
||||
this.getAllList();
|
||||
} else if (name == "expandThree") {
|
||||
this.expandLevel = 3;
|
||||
this.getAllList();
|
||||
}
|
||||
if (name == "expandAll") {
|
||||
this.expandLevel = 4;
|
||||
this.getAllList();
|
||||
} else if (name == "refresh") {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 获取所有菜单
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
e.expand = false;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 2) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 3) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 4) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选择菜单
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
let str = JSON.stringify(v);
|
||||
let menu = JSON.parse(str);
|
||||
this.form = menu[0];
|
||||
console.log(this.form);
|
||||
this.editTitle = menu[0].title;
|
||||
} else {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
// 搜索菜单
|
||||
search() {
|
||||
if (this.searchKey) {
|
||||
this.loading = true;
|
||||
searchPermission({ title: this.searchKey }).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 取消选择
|
||||
cancelEdit() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
this.form.id = "";
|
||||
this.editTitle = "";
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.frontRoute = "";
|
||||
},
|
||||
// 保存
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择要修改的菜单节点");
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
if (this.form.sortOrder == null) {
|
||||
this.form.sortOrder = 0;
|
||||
}
|
||||
// 删除一些之前添加的无用字段
|
||||
delete this.form.icon;
|
||||
delete this.form.frontComponent;
|
||||
delete this.form.buttonType;
|
||||
delete this.form.updateTime;
|
||||
delete this.form.selected;
|
||||
delete this.form.description;
|
||||
delete this.form.children;
|
||||
delete this.form.children;
|
||||
|
||||
editPermission(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("编辑成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
this.menuModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
|
||||
addPermission(this.formAdd).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
this.menuModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子菜单
|
||||
addMenu() {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择一个菜单权限节点");
|
||||
return;
|
||||
}
|
||||
this.parentTitle = this.form.title;
|
||||
this.modalTitle = "添加子节点";
|
||||
this.showParent = true;
|
||||
if (this.form.level == 2) {
|
||||
this.$Modal.warning({
|
||||
title: "抱歉，不能添加啦",
|
||||
content: "仅支持2级菜单目录",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
level: Number(this.form.level) + 1,
|
||||
sortOrder: 0,
|
||||
permission: "", // 权限url
|
||||
};
|
||||
if (this.form.level == 0) {
|
||||
this.formAdd.path = "/";
|
||||
this.formAdd.frontRoute = "Main";
|
||||
}
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 添加顶级菜单
|
||||
addRootMenu() {
|
||||
this.modalTitle = "添加顶级菜单";
|
||||
this.showParent = false;
|
||||
this.formAdd = {
|
||||
level: 0,
|
||||
sortOrder: 0,
|
||||
};
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 选中菜单赋值
|
||||
changeSelect(v) {
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除菜单
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deletePermission(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.selectList = [];
|
||||
this.selectCount = 0;
|
||||
this.cancelEdit();
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.menu-input {
|
||||
width: 362px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,576 +1,24 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<!-- 筛选项和操作按钮 -->
|
||||
<Row class="operation">
|
||||
<i-switch
|
||||
v-model="strict"
|
||||
class="selectModel"
|
||||
size="large"
|
||||
style="margin-right: 5px"
|
||||
>
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRootMenu">添加顶级菜单</Button>
|
||||
<Button @click="addMenu" type="primary">添加子菜单</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Dropdown @on-click="handleDropdown">
|
||||
<Button>
|
||||
更多操作
|
||||
<Icon type="md-arrow-dropdown"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="refresh">刷新</DropdownItem>
|
||||
<DropdownItem name="expandOne">收合所有</DropdownItem>
|
||||
<DropdownItem name="expandTwo">展开一级</DropdownItem>
|
||||
<DropdownItem name="expandThree">展开两级</DropdownItem>
|
||||
<DropdownItem name="expandAll">展开所有</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Row>
|
||||
<!-- 页面主体，左侧树结构，右侧表单项 -->
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
|
||||
</Alert>
|
||||
<Input
|
||||
v-model="searchKey"
|
||||
suffix="ios-search"
|
||||
@on-change="search"
|
||||
placeholder="输入菜单名搜索"
|
||||
clearable
|
||||
/>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
:render="renderContent"
|
||||
@on-select-change="selectTree"
|
||||
@on-check-change="changeSelect"
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
|
||||
<FormItem label="类型" prop="type">
|
||||
<div v-show="form.level == 0">
|
||||
<Icon
|
||||
type="ios-navigate-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="form.level == 1 || form.level == 2">
|
||||
<Icon
|
||||
type="ios-list-box-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="路由地址"
|
||||
prop="path"
|
||||
v-if="form.level != 0"
|
||||
class="block-tool"
|
||||
>
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由地址，英文唯一，跳转页面，路径展示用 "
|
||||
>
|
||||
<Input class="menu-input" v-model="form.path" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由name，需英文唯一，跳转页面用"
|
||||
transfer
|
||||
>
|
||||
<Input class="menu-input" v-model="form.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
|
||||
<Input class="menu-input" v-model="form.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="form.level != 0" class="block-tool">
|
||||
<Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
|
||||
<Input class="menu-input" v-model="form.permission" type="textarea" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
type="primary"
|
||||
>保存
|
||||
</Button>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Tabs value="name1">
|
||||
<TabPane label="平台菜单" name="name1">
|
||||
<managerMenu></managerMenu>
|
||||
|
||||
<Modal
|
||||
draggable
|
||||
:title="modalTitle"
|
||||
v-model="menuModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{ top: '30px' }"
|
||||
>
|
||||
<Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
|
||||
</div>
|
||||
<FormItem label="类型" prop="type">
|
||||
<div v-show="formAdd.level == 0">
|
||||
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="formAdd.level != 0">
|
||||
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
</TabPane>
|
||||
<TabPane label="店铺菜单" name="name2">
|
||||
<storeMenu></storeMenu>
|
||||
|
||||
<FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.path" />
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<Input v-model="formAdd.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.permission" type="textarea" />
|
||||
<div class="desc">*号模糊匹配，逗号分割</div>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="menuModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAllPermissionList,
|
||||
addPermission,
|
||||
editPermission,
|
||||
deletePermission,
|
||||
searchPermission,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
import managerMenu from "./menu";
|
||||
import storeMenu from "./storeMenu";
|
||||
|
||||
export default {
|
||||
name: "menu-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
strict: true, // 级联 单选
|
||||
maxHeight: "500px", // 最大高度
|
||||
expandLevel: 1, // 展开层级
|
||||
menuModalVisible: false, // 添加菜单modal
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 所选数量
|
||||
showParent: false, // 展示父级
|
||||
searchKey: "", // 搜索关键词
|
||||
parentTitle: "", // 父级标题
|
||||
editTitle: "", // 编辑标题
|
||||
modalTitle: "", // modal标题
|
||||
form: {
|
||||
// 表单数据
|
||||
id: "",
|
||||
title: "",
|
||||
name: "",
|
||||
path: "",
|
||||
frontRoute: "",
|
||||
parentId: "",
|
||||
sortOrder: 0,
|
||||
level: 0,
|
||||
permission: "",
|
||||
},
|
||||
formAdd: {
|
||||
// 添加表单
|
||||
},
|
||||
formValidate: {
|
||||
// 验证规则
|
||||
title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
|
||||
frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
required: true,
|
||||
type: "number",
|
||||
message: "排序值不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
data: [], // 数据
|
||||
};
|
||||
components: {
|
||||
managerMenu, storeMenu
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getAllList();
|
||||
},
|
||||
|
||||
renderContent(h, { root, node, data }) {
|
||||
// 渲染树形结构前面图标
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
}
|
||||
return h("span", [
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
]),
|
||||
]);
|
||||
},
|
||||
// 更多操作
|
||||
handleDropdown(name) {
|
||||
if (name == "expandOne") {
|
||||
this.expandLevel = 1;
|
||||
this.getAllList();
|
||||
} else if (name == "expandTwo") {
|
||||
this.expandLevel = 2;
|
||||
this.getAllList();
|
||||
} else if (name == "expandThree") {
|
||||
this.expandLevel = 3;
|
||||
this.getAllList();
|
||||
}
|
||||
if (name == "expandAll") {
|
||||
this.expandLevel = 4;
|
||||
this.getAllList();
|
||||
} else if (name == "refresh") {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 获取所有菜单
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
e.expand = false;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 2) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 3) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 4) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选择菜单
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
let str = JSON.stringify(v);
|
||||
let menu = JSON.parse(str);
|
||||
this.form = menu[0];
|
||||
console.log(this.form);
|
||||
this.editTitle = menu[0].title;
|
||||
} else {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
// 搜索菜单
|
||||
search() {
|
||||
if (this.searchKey) {
|
||||
this.loading = true;
|
||||
searchPermission({ title: this.searchKey }).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 取消选择
|
||||
cancelEdit() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
this.form.id = "";
|
||||
this.editTitle = "";
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.frontRoute = "";
|
||||
},
|
||||
// 保存
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择要修改的菜单节点");
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
if (this.form.sortOrder == null) {
|
||||
this.form.sortOrder = 0;
|
||||
}
|
||||
// 删除一些之前添加的无用字段
|
||||
delete this.form.icon;
|
||||
delete this.form.frontComponent;
|
||||
delete this.form.buttonType;
|
||||
delete this.form.updateTime;
|
||||
delete this.form.selected;
|
||||
delete this.form.description;
|
||||
delete this.form.children;
|
||||
delete this.form.children;
|
||||
|
||||
editPermission(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("编辑成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
this.menuModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
|
||||
addPermission(this.formAdd).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
this.menuModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子菜单
|
||||
addMenu() {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择一个菜单权限节点");
|
||||
return;
|
||||
}
|
||||
this.parentTitle = this.form.title;
|
||||
this.modalTitle = "添加子节点";
|
||||
this.showParent = true;
|
||||
if (this.form.level == 2) {
|
||||
this.$Modal.warning({
|
||||
title: "抱歉，不能添加啦",
|
||||
content: "仅支持2级菜单目录",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
level: Number(this.form.level) + 1,
|
||||
sortOrder: 0,
|
||||
permission: "", // 权限url
|
||||
};
|
||||
if (this.form.level == 0) {
|
||||
this.formAdd.path = "/";
|
||||
this.formAdd.frontRoute = "Main";
|
||||
}
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 添加顶级菜单
|
||||
addRootMenu() {
|
||||
this.modalTitle = "添加顶级菜单";
|
||||
this.showParent = false;
|
||||
this.formAdd = {
|
||||
level: 0,
|
||||
sortOrder: 0,
|
||||
};
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 选中菜单赋值
|
||||
changeSelect(v) {
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除菜单
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deletePermission(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.selectList = [];
|
||||
this.selectCount = 0;
|
||||
this.cancelEdit();
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.menu-input {
|
||||
width: 362px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,576 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<!-- 筛选项和操作按钮 -->
|
||||
<Row class="operation">
|
||||
<i-switch
|
||||
v-model="strict"
|
||||
class="selectModel"
|
||||
size="large"
|
||||
style="margin-right: 5px"
|
||||
>
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRootMenu">添加顶级菜单</Button>
|
||||
<Button @click="addMenu" type="primary">添加子菜单</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Dropdown @on-click="handleDropdown">
|
||||
<Button>
|
||||
更多操作
|
||||
<Icon type="md-arrow-dropdown"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="refresh">刷新</DropdownItem>
|
||||
<DropdownItem name="expandOne">收合所有</DropdownItem>
|
||||
<DropdownItem name="expandTwo">展开一级</DropdownItem>
|
||||
<DropdownItem name="expandThree">展开两级</DropdownItem>
|
||||
<DropdownItem name="expandAll">展开所有</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Row>
|
||||
<!-- 页面主体，左侧树结构，右侧表单项 -->
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
|
||||
</Alert>
|
||||
<Input
|
||||
v-model="searchKey"
|
||||
suffix="ios-search"
|
||||
@on-change="search"
|
||||
placeholder="输入菜单名搜索"
|
||||
clearable
|
||||
/>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
:render="renderContent"
|
||||
@on-select-change="selectTree"
|
||||
@on-check-change="changeSelect"
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
|
||||
<FormItem label="类型" prop="type">
|
||||
<div v-show="form.level == 0">
|
||||
<Icon
|
||||
type="ios-navigate-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="form.level == 1 || form.level == 2">
|
||||
<Icon
|
||||
type="ios-list-box-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="路由地址"
|
||||
prop="path"
|
||||
v-if="form.level != 0"
|
||||
class="block-tool"
|
||||
>
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由地址，英文唯一，跳转页面，路径展示用 "
|
||||
>
|
||||
<Input class="menu-input" v-model="form.path" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由name，需英文唯一，跳转页面用"
|
||||
transfer
|
||||
>
|
||||
<Input class="menu-input" v-model="form.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
|
||||
<Input class="menu-input" v-model="form.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="form.level != 0" class="block-tool">
|
||||
<Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
|
||||
<Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
type="primary"
|
||||
>保存
|
||||
</Button>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
draggable
|
||||
:title="modalTitle"
|
||||
v-model="menuModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{ top: '30px' }"
|
||||
>
|
||||
<Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
|
||||
</div>
|
||||
<FormItem label="类型" prop="type">
|
||||
<div v-show="formAdd.level == 0">
|
||||
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="formAdd.level != 0">
|
||||
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.path" />
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<Input v-model="formAdd.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.permission" type="textarea" />
|
||||
<div class="desc">*号模糊匹配，逗号分割</div>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="menuModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getStoreAllPermissionList,
|
||||
addStorePermission,
|
||||
editStorePermission,
|
||||
deleteStorePermission,
|
||||
searchStorePermission,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
import Cookies from "js-cookie";
|
||||
export default {
|
||||
name: "store-menu-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
strict: true, // 级联 单选
|
||||
maxHeight: "500px", // 最大高度
|
||||
expandLevel: 1, // 展开层级
|
||||
menuModalVisible: false, // 添加菜单modal
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 所选数量
|
||||
showParent: false, // 展示父级
|
||||
searchKey: "", // 搜索关键词
|
||||
parentTitle: "", // 父级标题
|
||||
editTitle: "", // 编辑标题
|
||||
modalTitle: "", // modal标题
|
||||
form: {
|
||||
// 表单数据
|
||||
id: "",
|
||||
title: "",
|
||||
name: "",
|
||||
path: "",
|
||||
frontRoute: "",
|
||||
parentId: "",
|
||||
sortOrder: 0,
|
||||
level: 0,
|
||||
permission: "",
|
||||
},
|
||||
formAdd: {
|
||||
// 添加表单
|
||||
},
|
||||
formValidate: {
|
||||
// 验证规则
|
||||
title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
|
||||
frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
required: true,
|
||||
type: "number",
|
||||
message: "排序值不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
data: [], // 数据
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getAllList();
|
||||
},
|
||||
|
||||
renderContent(h, { root, node, data }) {
|
||||
// 渲染树形结构前面图标
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
}
|
||||
return h("span", [
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
]),
|
||||
]);
|
||||
},
|
||||
// 更多操作
|
||||
handleDropdown(name) {
|
||||
if (name == "expandOne") {
|
||||
this.expandLevel = 1;
|
||||
this.getAllList();
|
||||
} else if (name == "expandTwo") {
|
||||
this.expandLevel = 2;
|
||||
this.getAllList();
|
||||
} else if (name == "expandThree") {
|
||||
this.expandLevel = 3;
|
||||
this.getAllList();
|
||||
}
|
||||
if (name == "expandAll") {
|
||||
this.expandLevel = 4;
|
||||
this.getAllList();
|
||||
} else if (name == "refresh") {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 获取所有菜单
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getStoreAllPermissionList().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
e.expand = false;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 2) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 3) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 4) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选择菜单
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
let str = JSON.stringify(v);
|
||||
let menu = JSON.parse(str);
|
||||
this.form = menu[0];
|
||||
console.log(this.form);
|
||||
this.editTitle = menu[0].title;
|
||||
} else {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
// 搜索菜单
|
||||
search() {
|
||||
if (this.searchKey) {
|
||||
this.loading = true;
|
||||
searchStorePermission({ title: this.searchKey }).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 取消选择
|
||||
cancelEdit() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
this.form.id = "";
|
||||
this.editTitle = "";
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.frontRoute = "";
|
||||
},
|
||||
// 保存
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择要修改的菜单节点");
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
if (this.form.sortOrder == null) {
|
||||
this.form.sortOrder = 0;
|
||||
}
|
||||
// 删除一些之前添加的无用字段
|
||||
delete this.form.icon;
|
||||
delete this.form.frontComponent;
|
||||
delete this.form.buttonType;
|
||||
delete this.form.updateTime;
|
||||
delete this.form.selected;
|
||||
delete this.form.description;
|
||||
delete this.form.children;
|
||||
delete this.form.children;
|
||||
|
||||
editStorePermission(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("编辑成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
this.menuModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
|
||||
addStorePermission(this.formAdd).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
this.menuModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子菜单
|
||||
addMenu() {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择一个菜单权限节点");
|
||||
return;
|
||||
}
|
||||
this.parentTitle = this.form.title;
|
||||
this.modalTitle = "添加子节点";
|
||||
this.showParent = true;
|
||||
if (this.form.level == 2) {
|
||||
this.$Modal.warning({
|
||||
title: "抱歉，不能添加啦",
|
||||
content: "仅支持2级菜单目录",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
level: Number(this.form.level) + 1,
|
||||
sortOrder: 0,
|
||||
permission: "", // 权限url
|
||||
};
|
||||
if (this.form.level == 0) {
|
||||
this.formAdd.path = "/";
|
||||
this.formAdd.frontRoute = "Main";
|
||||
}
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 添加顶级菜单
|
||||
addRootMenu() {
|
||||
this.modalTitle = "添加顶级菜单";
|
||||
this.showParent = false;
|
||||
this.formAdd = {
|
||||
level: 0,
|
||||
sortOrder: 0,
|
||||
};
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 选中菜单赋值
|
||||
changeSelect(v) {
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除菜单
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteStorePermission(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.selectList = [];
|
||||
this.selectCount = 0;
|
||||
this.cancelEdit();
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.menu-input {
|
||||
width: 362px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue