resolve conflict
commit
7e88ee930b
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<Button type="primary" :loading="applyLoading" @click="apply"
|
<Button type="primary" :loading="applyLoading" @click="apply"
|
||||||
>提交申请</Button
|
>提交申请</Button
|
||||||
>
|
>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
<Alert type="success">
|
<Alert type="success">
|
||||||
您提交的信息正在审核
|
您提交的信息正在审核
|
||||||
<template slot="desc"
|
<template slot="desc"
|
||||||
>提交认证申请后,工作人员将在三个工作日进行核对完成审核</template
|
>提交认证申请后,工作人员将在三个工作日进行核对完成审核</template
|
||||||
>
|
>
|
||||||
</Alert>
|
</Alert>
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,11 +42,11 @@
|
||||||
<div v-if="status === 2">
|
<div v-if="status === 2">
|
||||||
<div class="tips">
|
<div class="tips">
|
||||||
|
|
||||||
<p>分销下线付款之后会生成分销订单。</p>
|
<p>分销下线付款之后会生成分销订单。</p>
|
||||||
<p>
|
<p>
|
||||||
冻结金额:用户提现金额即为冻结金额,审核通过后扣除冻结金额,审核拒绝之后冻结金额返回可提现金额。
|
冻结金额:用户提现金额即为冻结金额,审核通过后扣除冻结金额,审核拒绝之后冻结金额返回可提现金额。
|
||||||
</p>
|
</p>
|
||||||
<p>可提现金额:分销订单佣金T+1解冻后可变为可提现金额。</p>
|
<p>可提现金额:分销订单佣金T+1解冻后可变为可提现金额。</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -54,7 +54,7 @@
|
||||||
<div class="mb_20 account-price">
|
<div class="mb_20 account-price">
|
||||||
<span class="subTips">可提现金额:</span>
|
<span class="subTips">可提现金额:</span>
|
||||||
<span class="fontsize_48 global_color"
|
<span class="fontsize_48 global_color"
|
||||||
>¥{{ result.canRebate | unitPrice }}</span
|
>¥{{ result.canRebate | unitPrice }}</span
|
||||||
>
|
>
|
||||||
<span class="subTips">冻结金额:</span>
|
<span class="subTips">冻结金额:</span>
|
||||||
<span class="">¥{{ result.commissionFrozen | unitPrice }}</span>
|
<span class="">¥{{ result.commissionFrozen | unitPrice }}</span>
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
size="small"
|
size="small"
|
||||||
class="ml_20"
|
class="ml_20"
|
||||||
@click="withdrawApplyModal = true"
|
@click="withdrawApplyModal = true"
|
||||||
>申请提现</Button
|
>申请提现</Button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -102,13 +102,13 @@
|
||||||
size="small"
|
size="small"
|
||||||
style="margin-right: 5px"
|
style="margin-right: 5px"
|
||||||
@click="fenxiao(row)"
|
@click="fenxiao(row)"
|
||||||
>分销商品</Button
|
>分销商品</Button
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
type="error"
|
type="error"
|
||||||
size="small"
|
size="small"
|
||||||
@click="selectGoods(row.id, false)"
|
@click="selectGoods(row.id, false)"
|
||||||
>取消选择</Button
|
>取消选择</Button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</Table>
|
</Table>
|
||||||
|
@ -156,7 +156,7 @@
|
||||||
size="small"
|
size="small"
|
||||||
style="margin-right: 5px"
|
style="margin-right: 5px"
|
||||||
@click="selectGoods(row.id, true)"
|
@click="selectGoods(row.id, true)"
|
||||||
>选择商品</Button
|
>选择商品</Button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</Table>
|
</Table>
|
||||||
|
@ -197,8 +197,8 @@
|
||||||
row.distributionCashStatus == "APPLY"
|
row.distributionCashStatus == "APPLY"
|
||||||
? "待处理"
|
? "待处理"
|
||||||
: row.distributionCashStatus == "VIA_AUDITING"
|
: row.distributionCashStatus == "VIA_AUDITING"
|
||||||
? "通过"
|
? "通过"
|
||||||
: "拒绝"
|
: "拒绝"
|
||||||
}}</span
|
}}</span
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
|
@ -222,11 +222,27 @@
|
||||||
<Alert type="error">
|
<Alert type="error">
|
||||||
分销功能暂未开启
|
分销功能暂未开启
|
||||||
<template slot="desc"
|
<template slot="desc"
|
||||||
>提交认证申请后,工作人员将在三个工作日进行核对完成审核</template
|
>提交认证申请后,工作人员将在三个工作日进行核对完成审核</template
|
||||||
>
|
>
|
||||||
</Alert>
|
</Alert>
|
||||||
</div>
|
</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">
|
<Modal v-model="withdrawApplyModal" width="530">
|
||||||
<p slot="header">
|
<p slot="header">
|
||||||
<Icon type="edit"></Icon>
|
<Icon type="edit"></Icon>
|
||||||
|
@ -234,7 +250,7 @@
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<Input v-model="withdrawPrice" size="large" number maxlength="9"
|
<Input v-model="withdrawPrice" size="large" number maxlength="9"
|
||||||
><span slot="append">元</span></Input
|
><span slot="append">元</span></Input
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div slot="footer" style="text-align: center">
|
<div slot="footer" style="text-align: center">
|
||||||
|
@ -243,21 +259,39 @@
|
||||||
</Modal>
|
</Modal>
|
||||||
<Modal v-model="qrcodeShow" title="分销商品" width="800">
|
<Modal v-model="qrcodeShow" title="分销商品" width="800">
|
||||||
<Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
|
<Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
|
||||||
<div style="width: 200px; height: 200px; border: 1px solid #eee">
|
<div class="qrcode">
|
||||||
<vue-qr
|
<div style="width: 150px; height: 150px; border: 1px solid #eee">
|
||||||
:text="qrcode"
|
<vue-qr
|
||||||
:callback="qrcodeData"
|
:text="qrcode"
|
||||||
:margin="0"
|
:callback="qrcodeData"
|
||||||
colorDark="#000"
|
:margin="0"
|
||||||
colorLight="#fff"
|
colorDark="#000"
|
||||||
:size="200"
|
colorLight="#fff"
|
||||||
></vue-qr>
|
:size="150"
|
||||||
<Button class="download-btn" type="success" @click="downloadQrcode"
|
></vue-qr>
|
||||||
|
<div class="qrcode-platform">PC端</div>
|
||||||
|
<Button class="download-btn" type="success" @click="downloadQrcode"
|
||||||
>下载二维码</Button
|
>下载二维码</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>
|
||||||
<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>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
@ -280,6 +314,7 @@ export default {
|
||||||
components: { vueQr },
|
components: { vueQr },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
config:require('@/config'),
|
||||||
status: 0, // 申请状态,0为未申请 1 申请中 2 申请完成 3 功能暂未开启
|
status: 0, // 申请状态,0为未申请 1 申请中 2 申请完成 3 功能暂未开启
|
||||||
applyForm: {}, // 申请表单
|
applyForm: {}, // 申请表单
|
||||||
rules: {
|
rules: {
|
||||||
|
@ -364,8 +399,10 @@ export default {
|
||||||
order: "desc",
|
order: "desc",
|
||||||
},
|
},
|
||||||
qrcode: "", // 二维码
|
qrcode: "", // 二维码
|
||||||
|
qrcodeH5:"",//H5二维码
|
||||||
qrcodeShow: false, // 显示二维码
|
qrcodeShow: false, // 显示二维码
|
||||||
base64Img: "", // base64编码
|
base64Img: "", // base64编码
|
||||||
|
base64ImgH5: "", // base64H5编码
|
||||||
goodsNameCurr: "", // 当前分销商品名称
|
goodsNameCurr: "", // 当前分销商品名称
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -406,6 +443,10 @@ export default {
|
||||||
// 二维码base64地址
|
// 二维码base64地址
|
||||||
this.base64Img = data64;
|
this.base64Img = data64;
|
||||||
},
|
},
|
||||||
|
qrcodeDataH5(data64) {
|
||||||
|
// 二维码H5端base64地址
|
||||||
|
this.base64ImgH5 = data64;
|
||||||
|
},
|
||||||
downloadQrcode() {
|
downloadQrcode() {
|
||||||
// 下载二维码
|
// 下载二维码
|
||||||
let a = document.createElement("a"); // 生成一个a元素
|
let a = document.createElement("a"); // 生成一个a元素
|
||||||
|
@ -414,6 +455,14 @@ export default {
|
||||||
a.href = this.base64Img; // 将生成的URL设置为a.href属性
|
a.href = this.base64Img; // 将生成的URL设置为a.href属性
|
||||||
a.dispatchEvent(event); // 触发a的单击事件
|
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) {
|
tabPaneChange(tab) {
|
||||||
// tab栏切换
|
// tab栏切换
|
||||||
if (tab === "goodsChecked") {
|
if (tab === "goodsChecked") {
|
||||||
|
@ -453,7 +502,8 @@ export default {
|
||||||
},
|
},
|
||||||
fenxiao(row) {
|
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.goodsNameCurr = row.goodsName;
|
||||||
this.qrcodeShow = true;
|
this.qrcodeShow = true;
|
||||||
},
|
},
|
||||||
|
@ -469,19 +519,32 @@ export default {
|
||||||
if (res.success) this.logData = res.result;
|
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() {
|
||||||
// 获取分销商信息
|
// 获取分销商信息
|
||||||
distribution().then((res) => {
|
distribution().then((res) => {
|
||||||
if (res.result) {
|
if (res.result) {
|
||||||
this.result = res.result;
|
this.result = res.result;
|
||||||
let type = res.result.distributionStatus;
|
let type = res.result.distributionStatus;
|
||||||
|
|
||||||
if (type === "PASS") {
|
if (type === "PASS") {
|
||||||
this.status = 2;
|
this.status = 2;
|
||||||
this.getGoodsData();
|
this.getGoodsData();
|
||||||
} else if (type === "RETREAT" || type === "REFUSE") {
|
} else if ( type === "REFUSE") {
|
||||||
this.status = 0;
|
this.status = 0;
|
||||||
} else {
|
} else if (type === "RETREAT") {
|
||||||
|
this.status = 4;
|
||||||
|
}else if (type === "APPEAL") {
|
||||||
|
this.status = 5;
|
||||||
|
}else {
|
||||||
this.status = 1;
|
this.status = 1;
|
||||||
}
|
}
|
||||||
} else if (!res.data.success && res.data.code === 22000) {
|
} else if (!res.data.success && res.data.code === 22000) {
|
||||||
|
@ -523,9 +586,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.download-btn {
|
.download-btn {
|
||||||
position: relative;
|
// position: relative;
|
||||||
top: -200px;
|
// top: -200px;
|
||||||
left: 200px;
|
// left: 200px;
|
||||||
|
margin-left: 25px;
|
||||||
|
margin-top: 5px
|
||||||
}
|
}
|
||||||
/deep/ .ivu-alert-message {
|
/deep/ .ivu-alert-message {
|
||||||
p {
|
p {
|
||||||
|
@ -540,4 +605,15 @@ export default {
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.qrcode{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding-top: 10px
|
||||||
|
|
||||||
|
}
|
||||||
|
.qrcode-platform{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList"
|
<span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
|
||||||
:key="index"> {{item.title}}</span>
|
:key="index"> {{ item.title }}</span>
|
||||||
<div class="date-picker">
|
<div class="date-picker">
|
||||||
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" clearable
|
<Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
|
||||||
style="width:200px;margin-left:10px;">
|
style="width:200px;margin-left:10px;">
|
||||||
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index" clearable>
|
<Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
|
||||||
{{ item.year+'年'+item.month+'月' }}</Option>
|
{{ item.year + '年' + item.month + '月' }}</Option>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-list" v-if="!closeShop">
|
<div class="shop-list" v-if="!closeShop">
|
||||||
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
|
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
|
||||||
style="width:200px;margin-left:10px;">
|
style="width:200px;margin-left:10px;">
|
||||||
<Scroll :on-reach-bottom="handleReachBottom">
|
<Scroll :on-reach-bottom="handleReachBottom">
|
||||||
<Option v-for="(item,index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
|
<Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
|
||||||
</Scroll>
|
</Scroll>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,6 +66,29 @@ export default {
|
||||||
searchType: "LAST_THIRTY",
|
searchType: "LAST_THIRTY",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
originDateList: [
|
||||||
|
// 筛选条件
|
||||||
|
{
|
||||||
|
title: "今天",
|
||||||
|
selected: false,
|
||||||
|
searchType: "TODAY",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "昨天",
|
||||||
|
selected: false,
|
||||||
|
searchType: "YESTERDAY",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "过去7天",
|
||||||
|
selected: true,
|
||||||
|
searchType: "LAST_SEVEN",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "过去30天",
|
||||||
|
selected: false,
|
||||||
|
searchType: "LAST_THIRTY",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
shopTotal: "", // 店铺总数
|
shopTotal: "", // 店铺总数
|
||||||
shopsData: [], // 店铺数据
|
shopsData: [], // 店铺数据
|
||||||
|
@ -126,8 +149,8 @@ export default {
|
||||||
this.dates = dates.reverse();
|
this.dates = dates.reverse();
|
||||||
},
|
},
|
||||||
// 改变已选店铺
|
// 改变已选店铺
|
||||||
changeSelect() {
|
changeSelect(e) {
|
||||||
console.log(this.month);
|
this.month = e
|
||||||
if (this.month) {
|
if (this.month) {
|
||||||
this.dateList.forEach((res) => {
|
this.dateList.forEach((res) => {
|
||||||
res.selected = false;
|
res.selected = false;
|
||||||
|
@ -138,29 +161,36 @@ export default {
|
||||||
|
|
||||||
this.$emit("selected", this.selectedWay);
|
this.$emit("selected", this.selectedWay);
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const current = this.dateList.find(item => { return item.selected })
|
||||||
|
this.selectedWay = current
|
||||||
|
this.clickBreadcrumb(current)
|
||||||
|
this.$emit("selected", this.selectedWay);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 变更时间
|
// 变更时间
|
||||||
clickBreadcrumb(item) {
|
clickBreadcrumb(item) {
|
||||||
this.dateList.forEach((res) => {
|
|
||||||
|
let currentIndex;
|
||||||
|
this.dateList.forEach((res,index) => {
|
||||||
res.selected = false;
|
res.selected = false;
|
||||||
|
if(res.title === item.title){
|
||||||
|
currentIndex = index
|
||||||
|
}
|
||||||
});
|
});
|
||||||
item.selected = true;
|
item.selected = true;
|
||||||
item.storeId = this.storeId;
|
item.storeId = this.storeId;
|
||||||
this.month = "";
|
this.month = "";
|
||||||
|
|
||||||
if (item.searchType == "") {
|
if (item.searchType == "") {
|
||||||
if (
|
let currentDate = this.originDateList[currentIndex].searchType
|
||||||
dateList.some((date) => {
|
if (currentDate) {
|
||||||
return date.title == item.title;
|
item.searchType = currentDate
|
||||||
})
|
|
||||||
) {
|
|
||||||
item.searchType = date.searchType;
|
|
||||||
} else {
|
} else {
|
||||||
item.searchType = "LAST_SEVEN";
|
item.searchType = "LAST_SEVEN";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.selectedWay = item;
|
this.selectedWay = item;
|
||||||
this.selectedWay.year = new Date().getFullYear();
|
this.selectedWay.year = new Date().getFullYear();
|
||||||
this.selectedWay.month = "";
|
this.selectedWay.month = "";
|
||||||
|
@ -174,17 +204,19 @@ export default {
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> span {
|
>span {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.date-picker {
|
|
||||||
}
|
.date-picker {}
|
||||||
|
|
||||||
.active:before {
|
.active:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -46,10 +46,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Scroll
|
<div
|
||||||
class="wap-content-list"
|
class="wap-content-list"
|
||||||
:on-reach-bottom="handleReachBottom"
|
|
||||||
:distance-to-edge="[3, 3]"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="wap-content-item"
|
class="wap-content-item"
|
||||||
|
@ -63,8 +61,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="wap-content-desc">
|
<div class="wap-content-desc">
|
||||||
<div class="wap-content-desc-title">{{ item.goodsName }}</div>
|
<div class="wap-content-desc-title">{{ item.goodsName }}</div>
|
||||||
<div class="wap-sku">{{ item.goodsUnit }}</div>
|
|
||||||
<div class="wap-sku"><Tag :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
|
<div class="wap-sku">{{ item.goodsUnit }}<Tag style="margin-left: 10px;" :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
|
||||||
<div class="wap-content-desc-bottom">
|
<div class="wap-content-desc-bottom">
|
||||||
<div>¥{{ item.price | unitPrice }}</div>
|
<div>¥{{ item.price | unitPrice }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -73,7 +71,18 @@
|
||||||
<Spin size="large" fix v-if="loading"></Spin>
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
|
|
||||||
<div v-if="empty" class="empty">暂无商品信息</div>
|
<div v-if="empty" class="empty">暂无商品信息</div>
|
||||||
</Scroll>
|
</div>
|
||||||
|
<Page
|
||||||
|
:total="total"
|
||||||
|
class="pageration"
|
||||||
|
@on-change="changePageSize"
|
||||||
|
:page-size="goodsParams.pageSize"
|
||||||
|
size="small"
|
||||||
|
show-total
|
||||||
|
show-elevator
|
||||||
|
|
||||||
|
>
|
||||||
|
</Page>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -89,7 +98,7 @@ export default {
|
||||||
goodsParams: {
|
goodsParams: {
|
||||||
// 商品请求参数
|
// 商品请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 18,
|
pageSize: 15,
|
||||||
order: "desc",
|
order: "desc",
|
||||||
goodsName: "",
|
goodsName: "",
|
||||||
sn: "",
|
sn: "",
|
||||||
|
@ -135,17 +144,9 @@ export default {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 触底加载更多方法
|
changePageSize(v){
|
||||||
handleReachBottom() {
|
this.goodsParams.pageNumber = v;
|
||||||
setTimeout(() => {
|
this.getQueryGoodsList();
|
||||||
if (
|
|
||||||
this.goodsParams.pageNumber * this.goodsParams.pageSize <=
|
|
||||||
this.total
|
|
||||||
) {
|
|
||||||
this.goodsParams.pageNumber++;
|
|
||||||
this.getQueryGoodsList();
|
|
||||||
}
|
|
||||||
}, 1500);
|
|
||||||
},
|
},
|
||||||
// 获取商品列表
|
// 获取商品列表
|
||||||
getQueryGoodsList() {
|
getQueryGoodsList() {
|
||||||
|
@ -169,7 +170,7 @@ export default {
|
||||||
* 解决数据请求中,滚动栏会一直上下跳动
|
* 解决数据请求中,滚动栏会一直上下跳动
|
||||||
*/
|
*/
|
||||||
this.total = res.result.total;
|
this.total = res.result.total;
|
||||||
this.goodsData.push(...res.result.records);
|
this.goodsData = res.result.records;
|
||||||
} else {
|
} else {
|
||||||
this.empty = true;
|
this.empty = true;
|
||||||
}
|
}
|
||||||
|
@ -180,13 +181,11 @@ export default {
|
||||||
// 商品
|
// 商品
|
||||||
this.initGoods(res);
|
this.initGoods(res);
|
||||||
});
|
});
|
||||||
if (localStorage.getItem("category")) {
|
API_Goods.getCategoryTree({deleteFlag: false}).then((res) => {
|
||||||
this.deepGroup(JSON.parse(localStorage.getItem("category")));
|
if (res.success) {
|
||||||
} else {
|
this.deepGroup(res.result);
|
||||||
setTimeout(() => {
|
}
|
||||||
this.deepGroup(JSON.parse(localStorage.getItem("category")));
|
});
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
deepGroup(val) {
|
deepGroup(val) {
|
||||||
|
@ -271,7 +270,10 @@ export default {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.wap-content-list {
|
.wap-content-list {
|
||||||
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 340px;
|
||||||
}
|
}
|
||||||
.wap-content-item {
|
.wap-content-item {
|
||||||
width: 210px;
|
width: 210px;
|
||||||
|
|
|
@ -21,7 +21,8 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -65,13 +66,16 @@
|
||||||
background: #ededed;
|
background: #ededed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pageration {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
.wap-content-item {
|
.wap-content-item {
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100px;
|
height: 90px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
|
<div class="wap-content-list" >
|
||||||
<div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
|
<div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
|
||||||
<div>
|
<div>
|
||||||
<img class="shop-logo" :src="item.storeLogo" alt="" />
|
<img class="shop-logo" :src="item.storeLogo" alt="" />
|
||||||
|
@ -26,7 +26,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Spin size="large" fix v-if="loading"></Spin>
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
</Scroll>
|
</div>
|
||||||
|
<Page
|
||||||
|
:total="total"
|
||||||
|
class="pageration"
|
||||||
|
@on-change="changePageSize"
|
||||||
|
:page-size="params.pageSize"
|
||||||
|
size="small"
|
||||||
|
show-total
|
||||||
|
show-elevator
|
||||||
|
|
||||||
|
>
|
||||||
|
</Page>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,7 +51,7 @@ export default {
|
||||||
total: "", // 总数
|
total: "", // 总数
|
||||||
params: { // 请求参数
|
params: { // 请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 12,
|
||||||
storeDisable: "OPEN",
|
storeDisable: "OPEN",
|
||||||
storeName: "",
|
storeName: "",
|
||||||
},
|
},
|
||||||
|
@ -54,13 +65,9 @@ export default {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleReachBottom() {
|
changePageSize(v){
|
||||||
setTimeout(() => {
|
this.params.pageNumber = v;
|
||||||
if (this.params.pageNumber * this.params.pageSize <= this.total) {
|
this.init();
|
||||||
this.params.pageNumber++;
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
}, 1500);
|
|
||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
@ -71,7 +78,7 @@ export default {
|
||||||
*/
|
*/
|
||||||
this.total = res.result.total;
|
this.total = res.result.total;
|
||||||
|
|
||||||
this.shopsData.push(...res.result.records);
|
this.shopsData = res.result.records;
|
||||||
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}
|
}
|
||||||
|
@ -95,13 +102,15 @@ export default {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
.wap-content-list {
|
.wap-content-list {
|
||||||
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
height: 340px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-logo {
|
.shop-logo {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.wap-content-item {
|
|
||||||
}
|
|
||||||
.active {
|
.active {
|
||||||
background: url("../../../assets/selected.png") no-repeat;
|
background: url("../../../assets/selected.png") no-repeat;
|
||||||
background-position: right;
|
background-position: right;
|
||||||
|
|
|
@ -5,6 +5,19 @@
|
||||||
<div class="div-flow-left">
|
<div class="div-flow-left">
|
||||||
<div class="div-form-default">
|
<div class="div-form-default">
|
||||||
<h3>退货申请</h3>
|
<h3>退货申请</h3>
|
||||||
|
<dl>
|
||||||
|
<dt>退货商品</dt>
|
||||||
|
<dd>
|
||||||
|
<div>
|
||||||
|
<img :src="afterSaleInfo.goodsImage" style="height: 60px">
|
||||||
|
</div>
|
||||||
|
<a @click="linkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)">{{ afterSaleInfo.goodsName }}
|
||||||
|
</a><br>
|
||||||
|
|
||||||
|
<span>{{ afterSaleInfo.num }}(数量)</span>
|
||||||
|
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>退货状态</dt>
|
<dt>退货状态</dt>
|
||||||
<dd>{{ afterSaleInfo.serviceName }}</dd>
|
<dd>{{ afterSaleInfo.serviceName }}</dd>
|
||||||
|
@ -155,43 +168,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="div-flow-center"></div>
|
<div class="div-flow-center"></div>
|
||||||
<div class="div-flow-right">
|
<div class="div-flow-right">
|
||||||
<div class="div-form-default">
|
|
||||||
<h3>相关商品交易信息</h3>
|
|
||||||
<dl>
|
|
||||||
<dt>
|
|
||||||
<img :src="afterSaleInfo.goodsImage" height="60px" />
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<div class="div-zoom">
|
|
||||||
<a @click="linkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)">{{
|
|
||||||
afterSaleInfo.goodsName
|
|
||||||
}}</a>
|
|
||||||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
|
||||||
<div slot="content">
|
|
||||||
<vue-qr
|
|
||||||
:text="wapLinkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)"
|
|
||||||
:margin="0"
|
|
||||||
colorDark="#000"
|
|
||||||
colorLight="#fff"
|
|
||||||
:size="150"
|
|
||||||
></vue-qr>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
src="../../../assets/qrcode.svg"
|
|
||||||
style="vertical-align: middle"
|
|
||||||
class="hover-pointer ml_10"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</Poptip>
|
|
||||||
</div>
|
|
||||||
<div style="color: #999; font-size: 10px">
|
|
||||||
数量:x{{ afterSaleInfo.num }}
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<div class="div-form-default">
|
<div class="div-form-default">
|
||||||
<h3>订单相关信息</h3>
|
<h3>订单相关信息</h3>
|
||||||
<dl>
|
<dl>
|
||||||
|
|
|
@ -8,6 +8,13 @@
|
||||||
<dl>
|
<dl>
|
||||||
<dt>投诉商品</dt>
|
<dt>投诉商品</dt>
|
||||||
<dd>{{complaintInfo.goodsName}}</dd>
|
<dd>{{complaintInfo.goodsName}}</dd>
|
||||||
|
<dd>
|
||||||
|
<div>
|
||||||
|
<img :src="complaintInfo.goodsImage" style="height: 60px">
|
||||||
|
</div>
|
||||||
|
<a>{{ complaintInfo.goodsName }}</a><br>
|
||||||
|
<span>{{ complaintInfo.num }}(数量)</span>
|
||||||
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>投诉状态</dt>
|
<dt>投诉状态</dt>
|
||||||
|
@ -144,19 +151,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="div-flow-right">
|
<div class="div-flow-right">
|
||||||
<div class="div-form-default">
|
|
||||||
<h3>相关商品交易信息</h3>
|
|
||||||
<dl>
|
|
||||||
<dt>
|
|
||||||
<img :src="complaintInfo.goodsImage" height="60px">
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<a @click="linkTo(complaintInfo.goodsId, complaintInfo.skuId)">{{complaintInfo.goodsName}}</a><br>
|
|
||||||
<span>¥{{complaintInfo.goodsPrice}} * {{complaintInfo.num}}(数量)</span>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="div-form-default">
|
<div class="div-form-default">
|
||||||
<h3>订单相关信息</h3>
|
<h3>订单相关信息</h3>
|
||||||
<dl>
|
<dl>
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||||
</div>
|
</div>
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="btn-bar">
|
<div class="btn-bar" :class="{'top':isHiddenBar}">
|
||||||
<Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
|
<Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
|
||||||
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
|
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
|
||||||
<Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
|
<Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
|
||||||
|
@ -35,6 +35,8 @@ export default {
|
||||||
ModelForm,
|
ModelForm,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
|
||||||
|
this.isHiddenBar = setting.isUseTabsRouter
|
||||||
// 先读缓存,如果缓存有值则读缓存。
|
// 先读缓存,如果缓存有值则读缓存。
|
||||||
const cache = this.getStore('managerPCPageCache')
|
const cache = this.getStore('managerPCPageCache')
|
||||||
this.hasCache = !!cache;
|
this.hasCache = !!cache;
|
||||||
|
@ -71,6 +73,7 @@ export default {
|
||||||
modelData, // 可选模块数据
|
modelData, // 可选模块数据
|
||||||
modelForm: { list: [] }, // 模板数据
|
modelForm: { list: [] }, // 模板数据
|
||||||
submitLoading: false, // 提交加载状态
|
submitLoading: false, // 提交加载状态
|
||||||
|
isHiddenBar:true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -219,6 +222,9 @@ export default {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-shadow: 1px 1px 10px #999;
|
box-shadow: 1px 1px 10px #999;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
||||||
|
}
|
||||||
|
.top{
|
||||||
top: 100px;
|
top: 100px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
</Form>
|
</Form>
|
||||||
</Row>
|
</Row>
|
||||||
<Row class="operation padding-row">
|
<Row class="operation padding-row">
|
||||||
<Button @click="add" type="primary">添加</Button>
|
<Button @click="add" v-if="!selected" type="primary">添加</Button>
|
||||||
</Row>
|
</Row>
|
||||||
<Table
|
<Table
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
|
|
|
@ -172,18 +172,20 @@
|
||||||
<div>
|
<div>
|
||||||
<Table stripe :columns="columns" :data="data"></Table>
|
<Table stripe :columns="columns" :data="data"></Table>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- (index) => {
|
||||||
|
refundParams.pageNumber = index;
|
||||||
|
} -->
|
||||||
|
<!-- (size) => {
|
||||||
|
(refundParams.pageSize = size), (refundParams.pageNumber = 1);
|
||||||
|
} -->
|
||||||
<Page
|
<Page
|
||||||
v-if="showRecords"
|
v-if="showRecords"
|
||||||
size="small"
|
size="small"
|
||||||
@on-change="
|
@on-change="
|
||||||
(index) => {
|
pageNumberChange
|
||||||
refundParams.pageNumber = index;
|
|
||||||
}
|
|
||||||
"
|
"
|
||||||
@on-page-size-change="
|
@on-page-size-change="
|
||||||
(size) => {
|
pageSizeChange
|
||||||
(refundParams.pageSize = size), (refundParams.pageNumber = 1);
|
|
||||||
}
|
|
||||||
"
|
"
|
||||||
class="mt_10"
|
class="mt_10"
|
||||||
show-total
|
show-total
|
||||||
|
@ -523,6 +525,14 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
pageNumberChange(val){
|
||||||
|
this.refundParams.pageNumber = val
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
|
pageSizeChange(val){
|
||||||
|
this.refundParams.pageSize = val
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
// 订单图
|
// 订单图
|
||||||
initOrderChart() {
|
initOrderChart() {
|
||||||
// 默认已经加载 legend-filter 交互
|
// 默认已经加载 legend-filter 交互
|
||||||
|
@ -563,11 +573,13 @@ export default {
|
||||||
|
|
||||||
clickBreadcrumb(item, index) {
|
clickBreadcrumb(item, index) {
|
||||||
let callback = JSON.parse(JSON.stringify(item));
|
let callback = JSON.parse(JSON.stringify(item));
|
||||||
|
console.log("callback",callback)
|
||||||
this.orderParams = callback;
|
this.orderParams = callback;
|
||||||
|
|
||||||
this.overViewParams = callback;
|
this.overViewParams = callback;
|
||||||
this.refundParams = callback;
|
this.refundParams = callback;
|
||||||
|
this.refundParams.pageNumber = 1
|
||||||
|
this.refundParams.pageSize = 10
|
||||||
},
|
},
|
||||||
|
|
||||||
// 实例化订单概览
|
// 实例化订单概览
|
||||||
|
|
|
@ -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>
|
<template>
|
||||||
<div class="search">
|
<Tabs value="name1">
|
||||||
<Card>
|
<TabPane label="平台菜单" name="name1">
|
||||||
<!-- 筛选项和操作按钮 -->
|
<managerMenu></managerMenu>
|
||||||
<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>
|
|
||||||
|
|
||||||
<Modal
|
</TabPane>
|
||||||
draggable
|
<TabPane label="店铺菜单" name="name2">
|
||||||
:title="modalTitle"
|
<storeMenu></storeMenu>
|
||||||
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">
|
</TabPane>
|
||||||
<Input v-model="formAdd.path" />
|
</Tabs>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
|
||||||
getAllPermissionList,
|
import managerMenu from "./menu";
|
||||||
addPermission,
|
import storeMenu from "./storeMenu";
|
||||||
editPermission,
|
|
||||||
deletePermission,
|
|
||||||
searchPermission,
|
|
||||||
} from "@/api/index";
|
|
||||||
import util from "@/libs/util.js";
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
export default {
|
export default {
|
||||||
name: "menu-manage",
|
components: {
|
||||||
data() {
|
managerMenu, storeMenu
|
||||||
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>
|
</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>
|
File diff suppressed because it is too large
Load Diff
|
@ -156,12 +156,12 @@
|
||||||
<div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
|
<div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
|
||||||
<Card :bordered="true" class="ivu-card-body">
|
<Card :bordered="true" class="ivu-card-body">
|
||||||
<Button slot="extra" type="primary" @click="handleCloseSkuItem($index, item)">
|
<Button slot="extra" type="primary" @click="handleCloseSkuItem($index, item)">
|
||||||
删除规格
|
删除规格项
|
||||||
</Button>
|
</Button>
|
||||||
<div>
|
<div>
|
||||||
<FormItem class="sku-item-content-val flex" label="规格名">
|
<FormItem class="sku-item-content-val flex" label="规格项名">
|
||||||
<AutoComplete v-model="item.name" :data="skuData" :filter-method="filterMethod"
|
<AutoComplete v-model="item.name" :data="skuData" :filter-method="filterMethod"
|
||||||
:maxlength="30" placeholder="请输入规格名称" style="width: 150px"
|
:maxlength="30" placeholder="请输入规格项名称" style="width: 150px"
|
||||||
@on-focus="changeSkuItem(item.name)" @on-change="
|
@on-focus="changeSkuItem(item.name)" @on-change="
|
||||||
editSkuItem(item.name, $index, item)
|
editSkuItem(item.name, $index, item)
|
||||||
">
|
">
|
||||||
|
@ -1568,6 +1568,13 @@ export default {
|
||||||
this.submitLoading = false;
|
this.submitLoading = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.goodsUnitList && !this.goodsUnitList.find(i => i === this.baseInfoForm.goodsUnit)) {
|
||||||
|
submit.goodsUnit = ""
|
||||||
|
this.$Message.error("商品单位不存在");
|
||||||
|
this.submitLoading = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
let skuInfoNames = this.skuInfo.map((n) => n.name);
|
let skuInfoNames = this.skuInfo.map((n) => n.name);
|
||||||
submit.skuList = [];
|
submit.skuList = [];
|
||||||
this.skuTableData.map((sku) => {
|
this.skuTableData.map((sku) => {
|
||||||
|
|
|
@ -1,45 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span>
|
<span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
|
||||||
|
:key="index"> {{ item.title }}</span>
|
||||||
<div class="date-picker">
|
<div class="date-picker">
|
||||||
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;">
|
<Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询"
|
||||||
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+'年'+item.month+'月' }}</Option>
|
style="width:200px;margin-left:10px;">
|
||||||
|
<Option v-for="(item, index) in dates" :value="item.year + '-' + item.month" :key="index">{{
|
||||||
|
item.year + '年' + item.month + '月' }}</Option>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Cookies from "js-cookie";
|
import { getShopListData } from "@/api/shops.js";
|
||||||
export default {
|
export default {
|
||||||
props: ["closeShop"],
|
props: ["closeShop"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
month: "", // 所选月份
|
month: "", // 月份
|
||||||
|
|
||||||
defuaultWay: {
|
|
||||||
title: "过去7天",
|
|
||||||
selected: true,
|
|
||||||
searchType: "LAST_SEVEN",
|
|
||||||
},
|
|
||||||
|
|
||||||
selectedWay: {
|
selectedWay: {
|
||||||
|
// 可选时间项
|
||||||
title: "过去7天",
|
title: "过去7天",
|
||||||
selected: true,
|
selected: true,
|
||||||
searchType: "LAST_SEVEN",
|
searchType: "LAST_SEVEN",
|
||||||
},
|
},
|
||||||
storeId: "", // 店铺id
|
storeId: "", // 店铺id
|
||||||
dates: [], // 日期列表
|
dates: [], // 日期列表
|
||||||
params: { // 请求参数
|
params: {
|
||||||
|
// 请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
storeName: "",
|
storeName: "",
|
||||||
storeId: "",
|
|
||||||
},
|
},
|
||||||
|
|
||||||
dateList: [
|
dateList: [
|
||||||
|
// 筛选条件
|
||||||
{
|
{
|
||||||
title: "今天",
|
title: "今天",
|
||||||
selected: false,
|
selected: false,
|
||||||
|
@ -61,13 +58,67 @@ export default {
|
||||||
searchType: "LAST_THIRTY",
|
searchType: "LAST_THIRTY",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
originDateList: [
|
||||||
|
// 筛选条件
|
||||||
|
{
|
||||||
|
title: "今天",
|
||||||
|
selected: false,
|
||||||
|
searchType: "TODAY",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "昨天",
|
||||||
|
selected: false,
|
||||||
|
searchType: "YESTERDAY",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "过去7天",
|
||||||
|
selected: true,
|
||||||
|
searchType: "LAST_SEVEN",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "过去30天",
|
||||||
|
selected: false,
|
||||||
|
searchType: "LAST_THIRTY",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
shopTotal: "", // 店铺总数
|
||||||
|
shopsData: [], // 店铺数据
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.storeId = JSON.parse(Cookies.get("userInfoSeller")).id;
|
|
||||||
this.getFiveYears();
|
this.getFiveYears();
|
||||||
|
this.getShopList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 页面触底
|
||||||
|
handleReachBottom() {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.params.pageNumber * this.params.pageSize <= this.shopTotal) {
|
||||||
|
this.params.pageNumber++;
|
||||||
|
this.getShopList();
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
|
},
|
||||||
|
// 查询店铺列表
|
||||||
|
getShopList() {
|
||||||
|
getShopListData(this.params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
/**
|
||||||
|
* 解决数据请求中,滚动栏会一直上下跳动
|
||||||
|
*/
|
||||||
|
this.shopTotal = res.result.total;
|
||||||
|
|
||||||
|
this.shopsData.push(...res.result.records);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 变更店铺
|
||||||
|
changeshop(val) {
|
||||||
|
this.selectedWay.storeId = this.storeId;
|
||||||
|
this.$emit("selected", this.selectedWay);
|
||||||
|
},
|
||||||
|
|
||||||
// 获取近5年 年月
|
// 获取近5年 年月
|
||||||
getFiveYears() {
|
getFiveYears() {
|
||||||
let getYear = new Date().getFullYear();
|
let getYear = new Date().getFullYear();
|
||||||
|
@ -89,8 +140,9 @@ export default {
|
||||||
}
|
}
|
||||||
this.dates = dates.reverse();
|
this.dates = dates.reverse();
|
||||||
},
|
},
|
||||||
// 选择回调
|
// 改变已选店铺
|
||||||
changeSelect() {
|
changeSelect(e) {
|
||||||
|
this.month = e
|
||||||
if (this.month) {
|
if (this.month) {
|
||||||
this.dateList.forEach((res) => {
|
this.dateList.forEach((res) => {
|
||||||
res.selected = false;
|
res.selected = false;
|
||||||
|
@ -101,29 +153,36 @@ export default {
|
||||||
|
|
||||||
this.$emit("selected", this.selectedWay);
|
this.$emit("selected", this.selectedWay);
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const current = this.dateList.find(item => { return item.selected })
|
||||||
|
this.selectedWay = current
|
||||||
|
this.clickBreadcrumb(current)
|
||||||
|
this.$emit("selected", this.selectedWay);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 点击时间筛选
|
// 变更时间
|
||||||
clickBreadcrumb(item) {
|
clickBreadcrumb(item) {
|
||||||
this.dateList.forEach((res) => {
|
|
||||||
|
let currentIndex;
|
||||||
|
this.dateList.forEach((res,index) => {
|
||||||
res.selected = false;
|
res.selected = false;
|
||||||
|
if(res.title === item.title){
|
||||||
|
currentIndex = index
|
||||||
|
}
|
||||||
});
|
});
|
||||||
item.selected = true;
|
item.selected = true;
|
||||||
item.storeId = this.storeId;
|
item.storeId = this.storeId;
|
||||||
this.month = "";
|
this.month = "";
|
||||||
|
if (item.searchType == "") {
|
||||||
if (item.searchType == "") {
|
let currentDate = this.originDateList[currentIndex].searchType
|
||||||
if (
|
if (currentDate) {
|
||||||
dateList.some((date) => {
|
item.searchType = currentDate
|
||||||
return date.title == item.title;
|
|
||||||
})
|
|
||||||
) {
|
|
||||||
item.searchType = date.searchType;
|
|
||||||
} else {
|
} else {
|
||||||
item.searchType = "LAST_SEVEN";
|
item.searchType = "LAST_SEVEN";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.selectedWay = item;
|
this.selectedWay = item;
|
||||||
this.selectedWay.year = new Date().getFullYear();
|
this.selectedWay.year = new Date().getFullYear();
|
||||||
this.selectedWay.month = "";
|
this.selectedWay.month = "";
|
||||||
|
@ -137,17 +196,20 @@ export default {
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> span {
|
|
||||||
|
>span {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.date-picker {
|
|
||||||
}
|
.date-picker {}
|
||||||
|
|
||||||
.active:before {
|
.active:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -7,7 +7,13 @@
|
||||||
<h3>投诉信息</h3>
|
<h3>投诉信息</h3>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>投诉商品</dt>
|
<dt>投诉商品</dt>
|
||||||
<dd>{{ complaintInfo.goodsName }}</dd>
|
<dd>
|
||||||
|
<div>
|
||||||
|
<img :src="complaintInfo.goodsImage" style="height: 60px">
|
||||||
|
</div>
|
||||||
|
<a>{{ complaintInfo.goodsName }}</a><br>
|
||||||
|
<span>¥{{ complaintInfo.goodsPrice | unitPrice }} * {{ complaintInfo.num }}(数量)</span>
|
||||||
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>投诉状态</dt>
|
<dt>投诉状态</dt>
|
||||||
|
@ -160,19 +166,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="div-flow-right">
|
<div class="div-flow-right">
|
||||||
<div class="div-form-default">
|
|
||||||
<h3>相关商品交易信息</h3>
|
|
||||||
<dl>
|
|
||||||
<dt>
|
|
||||||
<img :src="complaintInfo.goodsImage" height="60px">
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<a>{{ complaintInfo.goodsName }}</a><br>
|
|
||||||
<span>¥{{ complaintInfo.goodsPrice | unitPrice }} * {{ complaintInfo.num }}(数量)</span>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="div-form-default">
|
<div class="div-form-default">
|
||||||
<h3>订单相关信息</h3>
|
<h3>订单相关信息</h3>
|
||||||
<dl>
|
<dl>
|
||||||
|
|
|
@ -8,8 +8,15 @@
|
||||||
<div class="div-form-default">
|
<div class="div-form-default">
|
||||||
<h3>售后申请</h3>
|
<h3>售后申请</h3>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>售后状态</dt>
|
<dt>售后商品</dt>
|
||||||
<dd>{{filterStatus(afterSaleInfo.serviceStatus)}}</dd>
|
<dd>
|
||||||
|
<div>
|
||||||
|
<img :src="afterSaleInfo.goodsImage" style="height: 60px">
|
||||||
|
</div>
|
||||||
|
<a>{{ afterSaleInfo.goodsName }}</a><br>
|
||||||
|
<span>{{ afterSaleInfo.num }}(数量)</span>
|
||||||
|
</dd>
|
||||||
|
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl>
|
<dl>
|
||||||
|
@ -155,20 +162,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="div-flow-right">
|
<div class="div-flow-right">
|
||||||
<div class="div-form-default">
|
|
||||||
<h3>相关商品交易信息</h3>
|
|
||||||
<dl>
|
|
||||||
<dt>
|
|
||||||
<img :src="afterSaleInfo.goodsImage" height="60px">
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<a>{{ afterSaleInfo.goodsName }}</a><br>
|
|
||||||
<span>{{ afterSaleInfo.num }}(数量)</span><br>
|
|
||||||
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="div-form-default">
|
<div class="div-form-default">
|
||||||
<h3>订单相关信息</h3>
|
<h3>订单相关信息</h3>
|
||||||
<dl>
|
<dl>
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||||
</div>
|
</div>
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="btn-bar">
|
<div class="btn-bar" :class="{'top':isHiddenBar}">
|
||||||
<Button type="primary" :loading="submitLoading" @click="saveTemplate"
|
<Button type="primary" :loading="submitLoading" @click="saveTemplate"
|
||||||
>保存模板</Button
|
>保存模板</Button
|
||||||
>
|
>
|
||||||
|
@ -44,6 +44,8 @@ export default {
|
||||||
ModelForm,
|
ModelForm,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
|
||||||
|
this.isHiddenBar = setting.isUseTabsRouter
|
||||||
// 先读缓存,如果缓存有值则读缓存。
|
// 先读缓存,如果缓存有值则读缓存。
|
||||||
const cache = this.getStore('sellerPCPageCache')
|
const cache = this.getStore('sellerPCPageCache')
|
||||||
this.hasCache = !!cache;
|
this.hasCache = !!cache;
|
||||||
|
@ -80,6 +82,7 @@ export default {
|
||||||
modelData, // 可选模块数据
|
modelData, // 可选模块数据
|
||||||
modelForm: { list: [] }, // 模板数据
|
modelForm: { list: [] }, // 模板数据
|
||||||
submitLoading: false, // 提交加载状态
|
submitLoading: false, // 提交加载状态
|
||||||
|
isHiddenBar:true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -225,4 +228,7 @@ export default {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
top: 100px;
|
top: 100px;
|
||||||
}
|
}
|
||||||
|
.top{
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -152,7 +152,7 @@
|
||||||
<div>
|
<div>
|
||||||
<Table stripe :columns="columns" :data="data"></Table>
|
<Table stripe :columns="columns" :data="data"></Table>
|
||||||
</div>
|
</div>
|
||||||
<Page @on-change="(index)=>{refundParams.pageNumber = index}" @on-page-size-change="(size)=>{refundParams.pageSize= size}" class="mt_10" show-total show-elevator :total="total" />
|
<Page @on-change="pageNumberChange" @on-page-size-change="pageSizeChange" class="mt_10" show-total show-elevator :total="total" />
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
@ -459,6 +459,14 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
pageNumberChange(val){
|
||||||
|
this.refundParams.pageNumber = val
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
|
pageSizeChange(val){
|
||||||
|
this.refundParams.pageSize = val
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
// 订单图
|
// 订单图
|
||||||
initOrderChart() {
|
initOrderChart() {
|
||||||
// 默认已经加载 legend-filter 交互
|
// 默认已经加载 legend-filter 交互
|
||||||
|
|
Loading…
Reference in New Issue