zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

resolve conflict

master
misworga831 2023-10-11 10:11:11 +08:00
parent 2aae5a4bff e935f2a3e3
commit 7e88ee930b
20 changed files with 2171 additions and 1051 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
buyer/src/pages/home/memberCenter/Distribution.vue
View File

@ -226,7 +226,23 @@
>
</Alert>
</div>
<!-- 分销资格被清退 -->
<div v-if="status === 4">
<Alert type="error">
您的分销资格已被清退。请联系管理员或进行申诉
<Button style="margin-left: 50px;" type="warning" @click="repaying">申诉</Button>
</Alert>
</div>
<!-- 分销申诉审核 -->
<div v-if="status === 5">
<Alert type="success">
您提交的申诉正在审核
<template slot="desc"
>提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
>
</Alert>
</div>
<Modal v-model="withdrawApplyModal" width="530">
<p slot="header">
<Icon type="edit"></Icon>
@ -243,21 +259,39 @@
</Modal>
<Modal v-model="qrcodeShow" title="分销商品" width="800">
<Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
<div style="width: 200px; height: 200px; border: 1px solid #eee">
<div class="qrcode">
<div style="width: 150px; height: 150px; border: 1px solid #eee">
<vue-qr
:text="qrcode"
:callback="qrcodeData"
:margin="0"
colorDark="#000"
colorLight="#fff"
:size="200"
:size="150"
></vue-qr>
<div class="qrcode-platform">PC端</div>
<Button class="download-btn" type="success" @click="downloadQrcode"
>下载二维码</Button
>
</div>
<div class="mt_10">
商品链接：<Input style="width: 400px" v-model="qrcode"></Input>
<div style="width: 150px; height: 150px; border: 1px solid #eee">
<vue-qr
:text="qrcodeH5"
:callback="qrcodeDataH5"
:margin="0"
colorDark="#000"
colorLight="#fff"
:size="150"
></vue-qr>
<div class="qrcode-platform">移动应用端</div>
<Button class="download-btn" type="success" @click="downloadQrcodeH5"
>下载二维码</Button
>
</div>
</div>
<div class="mt_10" style="margin-top: 100px;">
商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
</div>
</Modal>
</div>
@ -280,6 +314,7 @@ export default {
components: { vueQr },
data() {
return {
config:require('@/config'),
status: 0, // 申请状态，0为未申请 1 申请中 2 申请完成 3 功能暂未开启
applyForm: {}, // 申请表单
rules: {
@ -364,8 +399,10 @@ export default {
order: "desc",
},
qrcode: "", // 二维码
qrcodeH5:"",//H5二维码
qrcodeShow: false, // 显示二维码
base64Img: "", // base64编码
base64ImgH5: "", // base64H5编码
goodsNameCurr: "", // 当前分销商品名称
};
},
@ -406,6 +443,10 @@ export default {
// 二维码base64地址
this.base64Img = data64;
},
qrcodeDataH5(data64) {
// 二维码H5端base64地址
this.base64ImgH5 = data64;
},
downloadQrcode() {
// 下载二维码
let a = document.createElement("a"); // 生成一个a元素
@ -414,6 +455,14 @@ export default {
a.href = this.base64Img; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
},
downloadQrcodeH5(){
// 下载H5二维码
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = this.goodsNameCurr || "photo";
a.href = this.base64ImgH5; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
},
tabPaneChange(tab) {
// tab栏切换
if (tab === "goodsChecked") {
@ -453,7 +502,8 @@ export default {
},
fenxiao(row) {
// 分销商品
this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
this.qrcode = `${this.config.PC_DOMAIN}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
this.qrcodeH5 = `${this.config.WAP_DOMAIN}/pages/product/goods?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
this.goodsNameCurr = row.goodsName;
this.qrcodeShow = true;
},
@ -469,18 +519,31 @@ export default {
if (res.success) this.logData = res.result;
});
},
//申诉
repaying(){
applyDistribution().then((res) => {
this.applyLoading = false;
if (res.success) {
this.$Message.success("申诉已提交，请等待管理员审核");
// this.status = 1;
}
});
},
distribution() {
// 获取分销商信息
distribution().then((res) => {
if (res.result) {
this.result = res.result;
let type = res.result.distributionStatus;
if (type === "PASS") {
this.status = 2;
this.getGoodsData();
} else if (type === "RETREAT" || type === "REFUSE") {
} else if ( type === "REFUSE") {
this.status = 0;
} else if (type === "RETREAT") {
this.status = 4;
}else if (type === "APPEAL") {
this.status = 5;
}else {
this.status = 1;
}
@ -523,9 +586,11 @@ export default {
}
}
.download-btn {
position: relative;
top: -200px;
left: 200px;
// position: relative;
// top: -200px;
// left: 200px;
margin-left: 25px;
margin-top: 5px
}
/deep/ .ivu-alert-message {
p {
@ -540,4 +605,15 @@ export default {
margin: 6px 0;
}
}
.qrcode{
display: flex;
justify-content: space-evenly;
padding-top: 10px
}
.qrcode-platform{
text-align: center;
font-size: 14px;
margin: 5px;
}
</style>

62
manager/src/components/affix-time.vue
View File

@ -4,9 +4,9 @@
<span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
:key="index"> {{ item.title }}</span>
<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;">
<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>
</Select>
</div>
@ -66,6 +66,29 @@ export default {
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: [], // 店铺数据
@ -126,8 +149,8 @@ export default {
this.dates = dates.reverse();
},
// 改变已选店铺
changeSelect() {
console.log(this.month);
changeSelect(e) {
this.month = e
if (this.month) {
this.dateList.forEach((res) => {
res.selected = false;
@ -138,29 +161,36 @@ export default {
this.$emit("selected", this.selectedWay);
} else {
const current = this.dateList.find(item => { return item.selected })
this.selectedWay = current
this.clickBreadcrumb(current)
this.$emit("selected", this.selectedWay);
}
},
// 变更时间
clickBreadcrumb(item) {
this.dateList.forEach((res) => {
let currentIndex;
this.dateList.forEach((res,index) => {
res.selected = false;
if(res.title === item.title){
currentIndex = index
}
});
item.selected = true;
item.storeId = this.storeId;
this.month = "";
if (item.searchType == "") {
if (
dateList.some((date) => {
return date.title == item.title;
})
) {
item.searchType = date.searchType;
let currentDate = this.originDateList[currentIndex].searchType
if (currentDate) {
item.searchType = currentDate
} else {
item.searchType = "LAST_SEVEN";
}
}
this.selectedWay = item;
this.selectedWay.year = new Date().getFullYear();
this.selectedWay.month = "";
@ -179,12 +209,14 @@ export default {
cursor: pointer;
}
}
.active {
color: $theme_color;
position: relative;
}
.date-picker {
}
.date-picker {}
.active:before {
content: "";
position: absolute;

50
manager/src/components/lili-dialog/goods-dialog.vue
View File

@ -46,10 +46,8 @@
</div>
</div>
<div>
<Scroll
<div
class="wap-content-list"
:on-reach-bottom="handleReachBottom"
:distance-to-edge="[3, 3]"
>
<div
class="wap-content-item"
@ -63,8 +61,8 @@
</div>
<div class="wap-content-desc">
<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>￥{{ item.price | unitPrice }}</div>
</div>
@ -73,7 +71,18 @@
<Spin size="large" fix v-if="loading"></Spin>
<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>
@ -89,7 +98,7 @@ export default {
goodsParams: {
// 商品请求参数
pageNumber: 1,
pageSize: 18,
pageSize: 15,
order: "desc",
goodsName: "",
sn: "",
@ -135,17 +144,9 @@ export default {
this.init();
},
methods: {
// 触底加载更多方法
handleReachBottom() {
setTimeout(() => {
if (
this.goodsParams.pageNumber * this.goodsParams.pageSize <=
this.total
) {
this.goodsParams.pageNumber++;
changePageSize(v){
this.goodsParams.pageNumber = v;
this.getQueryGoodsList();
}
}, 1500);
},
// 获取商品列表
getQueryGoodsList() {
@ -169,7 +170,7 @@ export default {
* 解决数据请求中，滚动栏会一直上下跳动
*/
this.total = res.result.total;
this.goodsData.push(...res.result.records);
this.goodsData = res.result.records;
} else {
this.empty = true;
}
@ -180,13 +181,11 @@ export default {
// 商品
this.initGoods(res);
});
if (localStorage.getItem("category")) {
this.deepGroup(JSON.parse(localStorage.getItem("category")));
} else {
setTimeout(() => {
this.deepGroup(JSON.parse(localStorage.getItem("category")));
}, 3000);
API_Goods.getCategoryTree({deleteFlag: false}).then((res) => {
if (res.success) {
this.deepGroup(res.result);
}
});
},
deepGroup(val) {
@ -271,7 +270,10 @@ export default {
padding: 0;
}
.wap-content-list {
display: flex;
position: relative;
flex-wrap: wrap;
height: 340px;
}
.wap-content-item {
width: 210px;

10
manager/src/components/lili-dialog/style.scss
View File

@ -21,7 +21,8 @@
font-size: 12px;
color: #999;
overflow: hidden;
display: flex;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
@ -65,13 +66,16 @@
background: #ededed;
}
.pageration {
text-align: right;
padding-right: 20px;
}
.wap-content-item {
cursor: pointer;
display: flex;
height: 100px;
height: 90px;
padding: 2px;
overflow: hidden;
align-items: center;

33
manager/src/components/lili-dialog/template/shops.vue
View File

@ -13,7 +13,7 @@
</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>
<img class="shop-logo" :src="item.storeLogo" alt="" />
@ -26,7 +26,18 @@
</div>
</div>
<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>
@ -40,7 +51,7 @@ export default {
total: "", // 总数
params: { // 请求参数
pageNumber: 1,
pageSize: 10,
pageSize: 12,
storeDisable: "OPEN",
storeName: "",
},
@ -54,13 +65,9 @@ export default {
this.init();
},
methods: {
handleReachBottom() {
setTimeout(() => {
if (this.params.pageNumber * this.params.pageSize <= this.total) {
this.params.pageNumber++;
changePageSize(v){
this.params.pageNumber = v;
this.init();
}
}, 1500);
},
init() {
this.loading = true;
@ -71,7 +78,7 @@ export default {
*/
this.total = res.result.total;
this.shopsData.push(...res.result.records);
this.shopsData = res.result.records;
this.loading = false;
}
@ -95,13 +102,15 @@ export default {
color: #999;
}
.wap-content-list {
display: flex;
flex-wrap: wrap;
height: 340px;
}
.shop-logo {
object-fit: cover;
}
.wap-content-item {
}
.active {
background: url("../../../assets/selected.png") no-repeat;
background-position: right;

50
manager/src/views/order/after-order/afterSaleOrderDetail.vue
View File

@ -5,6 +5,19 @@
<div class="div-flow-left">
<div class="div-form-default">
<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>
<dt>退货状态</dt>
<dd>{{ afterSaleInfo.serviceName }}</dd>
@ -155,43 +168,6 @@
</div>
<div class="div-flow-center"></div>
<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">
<h3>订单相关信息</h3>
<dl>

20
manager/src/views/order/after-order/orderComplaintDetail.vue
View File

@ -8,6 +8,13 @@
<dl>
<dt>投诉商品</dt>
<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>
<dt>投诉状态</dt>
@ -144,19 +151,6 @@
</div>
<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">
<h3>订单相关信息</h3>
<dl>

8
manager/src/views/page-decoration/renovation.vue
View File

@ -15,7 +15,7 @@
<model-form ref="modelForm" :data="modelForm"></model-form>
</div>
<!-- 操作按钮 -->
<div class="btn-bar">
<div class="btn-bar" :class="{'top':isHiddenBar}">
<Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
<Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
@ -35,6 +35,8 @@ export default {
ModelForm,
},
mounted() {
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
this.isHiddenBar = setting.isUseTabsRouter
// 先读缓存，如果缓存有值则读缓存。
const cache = this.getStore('managerPCPageCache')
this.hasCache = !!cache;
@ -71,6 +73,7 @@ export default {
modelData, // 可选模块数据
modelForm: { list: [] }, // 模板数据
submitLoading: false, // 提交加载状态
isHiddenBar:true,
};
},
methods: {
@ -219,6 +222,9 @@ export default {
padding: 10px;
box-shadow: 1px 1px 10px #999;
z-index: 99;
}
.top{
top: 100px;
}
</style>

2
manager/src/views/page/article-manage/articleList.vue
View File

@ -36,7 +36,7 @@
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
<Button @click="add" v-if="!selected" type="primary">添加</Button>
</Row>
<Table
:loading="loading"

26
manager/src/views/statistics/order.vue
View File

@ -172,18 +172,20 @@
<div>
<Table stripe :columns="columns" :data="data"></Table>
</div>
<!-- (index) => {
refundParams.pageNumber = index;
} -->
<!-- (size) => {
(refundParams.pageSize = size), (refundParams.pageNumber = 1);
} -->
<Page
v-if="showRecords"
size="small"
@on-change="
(index) => {
refundParams.pageNumber = index;
}
pageNumberChange
"
@on-page-size-change="
(size) => {
(refundParams.pageSize = size), (refundParams.pageNumber = 1);
}
pageSizeChange
"
class="mt_10"
show-total
@ -523,6 +525,14 @@ export default {
},
},
methods: {
pageNumberChange(val){
this.refundParams.pageNumber = val
this.getOrderList();
},
pageSizeChange(val){
this.refundParams.pageSize = val
this.getOrderList();
},
// 订单图
initOrderChart() {
// 默认已经加载 legend-filter 交互
@ -563,11 +573,13 @@ export default {
clickBreadcrumb(item, index) {
let callback = JSON.parse(JSON.stringify(item));
console.log("callback",callback)
this.orderParams = callback;
this.overViewParams = callback;
this.refundParams = callback;
this.refundParams.pageNumber = 1
this.refundParams.pageSize = 10
},
// 实例化订单概览

576
manager/src/views/sys/menu-manage/menu.vue Normal file
View File

@ -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>

580
manager/src/views/sys/menu-manage/menuManage.vue
View File

@ -1,576 +1,24 @@
<template>
<div class="search">
<Card>
<!-- 筛选项和操作按钮 -->
<Row class="operation">
<i-switch
v-model="strict"
class="selectModel"
size="large"
style="margin-right: 5px"
>
<span slot="open">级联</span>
<span slot="close">单选</span>
</i-switch>
<Button @click="addRootMenu">添加顶级菜单</Button>
<Button @click="addMenu" type="primary">添加子菜单</Button>
<Button @click="delAll">批量删除</Button>
<Dropdown @on-click="handleDropdown">
<Button>
更多操作
<Icon type="md-arrow-dropdown"></Icon>
</Button>
<DropdownMenu slot="list">
<DropdownItem name="refresh">刷新</DropdownItem>
<DropdownItem name="expandOne">收合所有</DropdownItem>
<DropdownItem name="expandTwo">展开一级</DropdownItem>
<DropdownItem name="expandThree">展开两级</DropdownItem>
<DropdownItem name="expandAll">展开所有</DropdownItem>
</DropdownMenu>
</Dropdown>
</Row>
<!-- 页面主体，左侧树结构，右侧表单项 -->
<Row type="flex" justify="start">
<Col :md="8" :lg="8" :xl="6">
<Alert show-icon>
当前选择编辑：
<span class="select-title">{{ editTitle }}</span>
<a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
</Alert>
<Input
v-model="searchKey"
suffix="ios-search"
@on-change="search"
placeholder="输入菜单名搜索"
clearable
/>
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
<Tree
ref="tree"
:data="data"
show-checkbox
:render="renderContent"
@on-select-change="selectTree"
@on-check-change="changeSelect"
:check-strictly="!strict"
></Tree>
<Spin size="large" fix v-if="loading"></Spin>
</div>
</Col>
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
<FormItem label="类型" prop="type">
<div v-show="form.level == 0">
<Icon
type="ios-navigate-outline"
size="16"
style="margin-right: 5px"
></Icon>
<span>顶级菜单</span>
</div>
<div v-show="form.level == 1 || form.level == 2">
<Icon
type="ios-list-box-outline"
size="16"
style="margin-right: 5px"
></Icon>
<span>页面菜单</span>
</div>
</FormItem>
<FormItem label="菜单名称" prop="title">
<Input class="menu-input" v-model="form.title" />
</FormItem>
<FormItem
label="路由地址"
prop="path"
v-if="form.level != 0"
class="block-tool"
>
<Tooltip
placement="right"
content="路由地址，英文唯一，跳转页面，路径展示用 "
>
<Input class="menu-input" v-model="form.path" />
</Tooltip>
</FormItem>
<FormItem label="路由名称" prop="name" class="block-tool">
<Tooltip
placement="right"
content="路由name，需英文唯一，跳转页面用"
transfer
>
<Input class="menu-input" v-model="form.name" />
</Tooltip>
</FormItem>
<FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
<Input class="menu-input" v-model="form.frontRoute" />
</FormItem>
<FormItem label="权限url" v-if="form.level != 0" class="block-tool">
<Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
<Input class="menu-input" v-model="form.permission" type="textarea" />
</Tooltip>
</FormItem>
<FormItem label="排序值" prop="sortOrder">
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
</Tooltip>
</FormItem>
<Form-item>
<Button
style="margin-right: 5px"
@click="submitEdit"
:loading="submitLoading"
type="primary"
>保存
</Button>
<Button @click="handleReset">重置</Button>
</Form-item>
</Form>
</Col>
</Row>
</Card>
<Tabs value="name1">
<TabPane label="平台菜单" name="name1">
<managerMenu></managerMenu>
<Modal
draggable
:title="modalTitle"
v-model="menuModalVisible"
:mask-closable="false"
:width="500"
:styles="{ top: '30px' }"
>
<Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
<div v-if="showParent">
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
</div>
<FormItem label="类型" prop="type">
<div v-show="formAdd.level == 0">
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
<span>顶级菜单</span>
</div>
<div v-show="formAdd.level != 0">
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
<span>页面菜单</span>
</div>
</FormItem>
<FormItem label="菜单名称" prop="title">
<Input class="menu-input" v-model="formAdd.title" />
</FormItem>
</TabPane>
<TabPane label="店铺菜单" name="name2">
<storeMenu></storeMenu>
<FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
<Input v-model="formAdd.path" />
</FormItem>
<FormItem label="路由名称" prop="name" class="block-tool">
<Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
<Input v-model="formAdd.name" />
</Tooltip>
</FormItem>
<FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
<Input v-model="formAdd.frontRoute" />
</FormItem>
<FormItem label="权限url" v-if="formAdd.level != 0">
<Input v-model="formAdd.permission" type="textarea" />
<div class="desc">*号模糊匹配，逗号分割</div>
</FormItem>
<FormItem label="排序值" prop="sortOrder">
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
</Tooltip>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="menuModalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
</div>
</Modal>
</div>
</TabPane>
</Tabs>
</template>
<script>
import {
getAllPermissionList,
addPermission,
editPermission,
deletePermission,
searchPermission,
} from "@/api/index";
import util from "@/libs/util.js";
import Cookies from "js-cookie";
import managerMenu from "./menu";
import storeMenu from "./storeMenu";
export default {
name: "menu-manage",
data() {
return {
loading: true, // 加载状态
strict: true, // 级联 单选
maxHeight: "500px", // 最大高度
expandLevel: 1, // 展开层级
menuModalVisible: false, // 添加菜单modal
selectList: [], // 已选列表
selectCount: 0, // 所选数量
showParent: false, // 展示父级
searchKey: "", // 搜索关键词
parentTitle: "", // 父级标题
editTitle: "", // 编辑标题
modalTitle: "", // modal标题
form: {
// 表单数据
id: "",
title: "",
name: "",
path: "",
frontRoute: "",
parentId: "",
sortOrder: 0,
level: 0,
permission: "",
},
formAdd: {
// 添加表单
},
formValidate: {
// 验证规则
title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
sortOrder: [
{
required: true,
type: "number",
message: "排序值不能为空",
trigger: "blur",
},
],
},
submitLoading: false, // 提交状态
data: [], // 数据
};
},
methods: {
// 初始化数据
init() {
this.getAllList();
components: {
managerMenu, storeMenu
},
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>

576
manager/src/views/sys/menu-manage/storeMenu.vue Normal file
View File

@ -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>

658
manager/src/views/sys/oss-manage/ossManage.vue
View File

@ -1,44 +1,62 @@
<style lang="scss">
@import "./ossManage.scss";
.group-row {
padding-top: 10px;
border-top: 1px solid #ededed;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
> * {
margin-right: 10px;
}
}
.article-category {
flex: 2;
min-width: 200px;
}
.table {
flex: 11;
}
.ivu-card {
width: 100%;
}
.modal-footer {
text-align: center;
> * {
margin: 0 10px;
}
}
</style>
<template>
<div class="search">
<Row>
<Card>
<div class="operation">
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="85" class="search-form"
<Form
ref="searchForm"
:label-width="85"
:model="searchForm"
class="search-form"
inline
>
<Form-item label="原文件名" prop="name">
<Input
type="text"
v-model="searchForm.name"
placeholder="请输入原文件名"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="存储文件名" prop="fileKey">
<Input
type="text"
v-model="searchForm.fileKey"
placeholder="请输入存储文件名"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="上传时间">
<DatePicker
v-model="selectDate"
type="daterange"
format="yyyy-MM-dd"
clearable
@on-change="selectDateRange"
format="yyyy-MM-dd"
placeholder="选择起始时间"
style="width: 200px"
type="daterange"
@on-change="selectDateRange"
></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn"
<Button
class="search-btn"
icon="ios-search"
type="primary"
@click="handleSearch"
>搜索
</Button>
</Form>
@ -46,62 +64,39 @@
<div class="oss-operation padding-row">
<div>
<Upload
style="display:inline-block;"
:action="commonUrl + '/common/common/upload/file'"
:headers="accessToken"
:on-success="handleSuccess"
:on-error="handleError"
:show-upload-list="false"
:max-size="2048"
:on-exceeded-size="handleMaxSize"
multiple
ref="up"
:action="commonUrl + '/common/common/upload/file'"
:data="{
directoryPath: searchForm.fileDirectoryId,
}"
:headers="accessToken"
:max-size="20480"
:on-error="handleError"
:on-exceeded-size="handleMaxSize"
:on-success="handleSuccess"
:show-upload-list="false"
multiple
style="display: inline-block"
>
<Button type="primary">上传文件</Button>
<Button>上传图片</Button>
</Upload>
<Dropdown @on-click="handleDropdown">
<Dropdown @on-click="handleDropdown" v-if="!isComponent">
<Button>
更多操作
<Icon type="md-arrow-dropdown"/>
</Button>
<DropdownMenu slot="list">
<DropdownItem name="refresh">刷新</DropdownItem>
<DropdownItem v-show="showType == 'list'" name="removeAll">批量删除
<DropdownItem v-show="showType == 'list'" name="removeAll"
>批量删除
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div>
<RadioGroup
v-model="fileType"
@on-change="changeFileType"
type="button" button-style="solid"
style="margin-right: 25px"
>
<Radio label="all">所有类型</Radio>
<Radio label="pic">图片</Radio>
<Radio label="video">视频</Radio>
</RadioGroup>
<RadioGroup
v-model="showType"
type="button" button-style="solid"
@on-change="changeShowType"
>
<Radio title="列表" label="list">
<Icon type="md-list"></Icon>
</Radio>
<Radio title="缩略图" label="thumb">
<Icon type="ios-apps"></Icon>
</Radio>
</RadioGroup>
</div>
</div>
</div>
<div v-show="showType == 'list'">
<Row >
<Alert show-icon>
<Alert show-icon v-if="!isComponent">
已选择
<span>{{ selectCount }}</span> 项
<a class="select-clear" @click="clearSelectAll">清空</a>
@ -109,27 +104,60 @@
>共计 {{ totalSize }} 存储量</span
>
</Alert>
</Row>
<div v-show="showType === 'list'" >
<div class="flex">
<div class="article-category mr_10">
<Tree
:data="treeData"
@on-contextmenu="handleContextMenu"
@on-select-change="handleCateChange"
>
<template slot="contextMenu" v-if="!isComponent">
<DropdownItem @click.native="handleContextMenuEdit"
>编辑
</DropdownItem
>
<DropdownItem
style="color: #ed4014"
@click.native="handleContextMenuDelete"
>删除
</DropdownItem
>
</template>
</Tree>
<Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>
<div class="group-row flex" v-if="!isComponent">
<Button @click="handleClickAddGroup">添加分组</Button>
</div>
</div>
<Table
ref="table"
:columns="isComponent ? viewColumns : columns"
:data="data"
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="table"
sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect"
></Table>
>
<template slot="fileKey" slot-scope="{ row }">
<a @click="copyFileUrl(row)">{{ row.fileKey }}</a>
</template>
</Table>
</div>
<div v-show="showType == 'thumb'">
</div>
<div v-show="showType === 'thumb'">
<div class="oss-wrapper">
<Card v-for="(item, i) in data" :key="i" class="oss-card">
<div class="content">
<img
@click="showPic(item)"
v-if="item.fileType.indexOf('image') >= 0"
class="img"
:src="item.url"
class="img"
@click="showPic(item)"
/>
<div
v-else-if="item.fileType.indexOf('video') >= 0"
@ -137,7 +165,7 @@
@click="showVideo(item)"
>
<!-- 文件小于5MB显示video -->
<video class="cover" v-if="item.fileSize < 1024 * 1024 * 5">
<video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">
<source :src="item.url"/>
</video>
<img class="play" src="@/assets/play.png"/>
@ -155,17 +183,21 @@
<div class="actions">
<div class="btn">
<Tooltip content="下载" placement="top">
<Icon @click="download(item)" type="md-download" size="16"/>
<Icon
size="16"
type="md-download"
@click="download(item)"
/>
</Tooltip>
</div>
<div class="btn">
<Tooltip content="重命名" placement="top">
<Icon @click="rename(item)" type="md-create" size="16"/>
<Icon size="16" type="md-create" @click="rename(item)"/>
</Tooltip>
</div>
<div class="btn-no">
<Tooltip content="删除" placement="top">
<Icon @click="remove(item)" type="md-trash" size="16"/>
<Icon size="16" type="md-trash" @click="remove(item)"/>
</Tooltip>
</div>
</div>
@ -173,31 +205,29 @@
</Card>
</div>
</div>
<Row type="flex" justify="end" class="mt_10">
<Row class="mt_10" justify="end" type="flex">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="pageSizeOpts"
size="small"
show-total
:total="total"
show-elevator
show-sizer
show-total
size="small"
@on-change="changePage"
@on-page-size-change="changePageSize"
></Page>
</Row>
</Card>
</Row>
<Modal
:title="modalTitle"
v-model="modalVisible"
:mask-closable="false"
:title="modalTitle"
:width="500"
>
<Form ref="form" :model="form" :label-width="95" :rules="formValidate">
<Form ref="form" :label-width="95" :model="form" :rules="formValidate">
<FormItem label="原文件名" prop="name">
<Input v-model="form.name"/>
</FormItem>
@ -207,10 +237,9 @@
</Form>
<div slot="footer">
<Button type="text" @click="handleCancel">取消</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
<Button :loading="submitLoading" type="primary" @click="handleSubmit"
>提交
</Button
>
</Button>
</div>
</Modal>
@ -233,8 +262,8 @@
v-model="videoVisible"
:title="videoTitle"
:width="800"
@on-cancel="closeVideo"
draggable
@on-cancel="closeVideo"
>
<div id="dplayer"></div>
<div slot="footer">
@ -245,32 +274,96 @@
>
</div>
</Modal>
<!-- 添加分组修改分组编辑框 -->
<Modal
v-model="enableGroup"
:title="insertOrUpdate === 'insert' ? '添加分组' : '修改分组'"
:loading="groupLoading"
@on-ok="submitAddGroup"
footer-hide
>
<Form
ref="formValidate"
:label-width="80"
:model="groupFormValidate"
:rules="groupRuleValidate"
>
<FormItem label="所在分组" prop="id">
<Cascader
v-model="groupFormValidate.id"
:data="treeData"
change-on-select
></Cascader>
</FormItem>
<FormItem label="分组名称" prop="directoryName">
<Input v-model="groupFormValidate.directoryName"/>
</FormItem>
</Form>
<div class="modal-footer">
<Button @click="enableGroup = false">取消</Button>
<Button type="primary" @click="submitAddGroup">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import {
addFileDirectory,
deleteFile,
delFileDirectory,
getFileDirectory,
getFileListData,
renameFile,
deleteFile,
updateFileDirectory,
} from "@/api/index";
import DPlayer from "dplayer";
const config = require('@/config/index')
import { commonUrl } from "@/libs/axios";
var dp;
const config = require("@/config/index");
let dp;
export default {
name: "oss-manage",
props: {
isComponent: {
default: false,
type:Boolean
type: Boolean,
},
choose: {
type: String,
default: ""
}
},
data() {
return {
commonUrl, // 上传文件路径
config, // api地址
fileDirectoryId: "",
groupFormValidate: {
id: [],
directoryName: "",
},
groupRuleValidate: {
directoryName: [
{
required: true,
message: "请输入分组名称",
trigger: "blur",
},
],
id: [
{
required: true,
message: "请选择分组",
trigger: "blur",
type: "array",
},
],
},
enableGroup: false, // 是否展示分组
selectImage: false, //是否是选择
accessToken: {}, // 上传token鉴权
loading: false, // 表单加载状态
@ -297,7 +390,8 @@ export default {
},
selectDate: null, // 选择日期绑定modal
oldKey: "", // 请求参数
form: { // 表单
form: {
// 表单
name: "",
fileKey: "",
},
@ -318,32 +412,16 @@ export default {
width: 60,
align: "center",
},
{
title: "原文件名",
key: "name",
minWidth: 130,
sortable: true,
ellipsis: false,
tooltip: true,
},
{
title: "存储文件名",
key: "fileKey",
width: 165,
sortable: true,
ellipsis: false,
tooltip: true,
},
{
title: "缩略图(点击预览)",
key: "url",
width: 150,
width: 300,
align: "center",
render: (h, params) => {
if (params.row.fileType.includes("image") > 0) {
return h("img", {
attrs: {
src: params.row.url || '',
src: params.row.url || "",
alt: "加载图片失败",
},
style: {
@ -414,7 +492,6 @@ export default {
title: "文件类型",
key: "fileType",
width: 115,
sortable: true,
className: this.selectImage == true ? "none" : "",
},
{
@ -432,46 +509,39 @@ export default {
{
title: "上传者",
key: "createBy",
width: 120,
sortable: true,
width: 200,
render: (h, params) => {
let m = "";
if (params.row.userEnums == "MANAGER") {
m="[管理员]"
m = "[管理员]";
} else if (params.row.userEnums == "STORE") {
m="[店铺]"
m = "[店铺]";
} else {
m="[会员]"
m = "[会员]";
}
m += params.row.createBy
m += params.row.createBy;
return h("span", m);
},
},
{
title: "上传时间",
key: "createTime",
width: 180,
sortable: true,
sortType: "desc",
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 200,
// width: 300,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
type: "default",
size: "small",
},
style: {
marginRight: "5px",
display: this.selectImage == true ? "inline-block" : "none",
display:
this.selectImage === true ? "inline-block" : "none",
},
on: {
click: () => {
@ -500,25 +570,6 @@ export default {
},
"下载"
),
h(
"Button",
{
props: {
size: "small",
type: 'success'
},
style: {
marginRight: "5px",
display: this.selectImage == true ? "none" : "inline-block",
},
on: {
click: () => {
this.rename(params.row);
},
},
},
"重命名"
),
h(
"Button",
{
@ -541,17 +592,301 @@ export default {
},
},
],
viewColumns: [
{
title: "缩略图(点击预览)",
key: "url",
// width: 150,
align: "center",
render: (h, params) => {
if (params.row.fileType.includes("image") > 0) {
return h("img", {
attrs: {
src: params.row.url || "",
alt: "加载图片失败",
},
style: {
cursor: "pointer",
width: "80px",
height: "60px",
margin: "10px 0",
"object-fit": "contain",
},
on: {
click: () => {
this.showPic(params.row);
},
},
});
} else if (params.row.fileType.includes("video") > 0) {
// 如果视频文件大小超过5MB不予加载video
if (params.row.fileSize < 1024 * 1024 * 5) {
return h(
"video",
{
style: {
cursor: "pointer",
width: "80px",
height: "60px",
margin: "10px 0",
"object-fit": "contain",
},
on: {
click: () => {
this.showVideo(params.row);
},
},
},
[
h("source", {
attrs: {
src: params.row.url,
},
}),
]
);
} else {
return h("img", {
attrs: {
src: require("@/assets/play.png"),
},
style: {
cursor: "pointer",
width: "80px",
height: "60px",
margin: "10px 0",
"object-fit": "contain",
},
on: {
click: () => {
this.showVideo(params.row);
},
},
});
}
} else {
return h("span", "非多媒体类型");
}
},
},
{
title: "上传者",
key: "createBy",
width: 120,
sortable: true,
render: (h, params) => {
let m = "";
if (params.row.userEnums == "MANAGER") {
m = "[管理员]";
} else if (params.row.userEnums == "STORE") {
m = "[店铺]";
} else {
m = "[会员]";
}
m += params.row.createBy;
return h("span", m);
},
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 300,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "default",
size: "small",
},
style: {
marginRight: "5px",
display:
this.selectImage === true ? "inline-block" : "none",
},
on: {
click: () => {
this.selectedParams(params.row);
},
},
},
"选择"
)
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
pageSizeOpts: [5, 10, 20], // 页码展示项
list: [], // 列表
//树结构
treeData: [],
treeDataDefault: [],
selectedGroupData: "",
insertOrUpdate: "insert",
groupLoading: false,
};
},
watch: {
selectImage(val) {
if (val && !this.data.length) this.init()
if (val && !this.data.length) this.init();
},
choose(val) {
if (val) this.selectImage = val
}
},
methods: {
handleContextMenu(val) {
console.log("val", val);
this.selectedGroupData = val;
},
// 编辑分组
handleContextMenuEdit(val) {
this.insertOrUpdate = "update";
this.enableGroup = true;
// this.groupFormValidate = this.selectedGroupData;
this.groupFormValidate.directoryName = this.selectedGroupData.title;
this.groupFormValidate.id = [this.selectedGroupData.value];
this.groupFormValidate.level = this.selectedGroupData.level;
this.groupFormValidate.parentId = this.selectedGroupData.parentId;
console.log(this.groupFormValidate);
},
// 删除分组
async handleContextMenuDelete(val) {
this.$Modal.confirm({
title: "提示",
content: "是否删除该分组",
onOk: async () => {
const res = await delFileDirectory(this.selectedGroupData.value);
if (res.success) {
this.$Message.success("删除成功!");
this.getAllList();
}
},
});
},
// 保存/修改分组
async submitAddGroup() {
this.$refs["formValidate"].validate(async (valid) => {
if (valid) {
let res
const params = { ...this.groupFormValidate };
if (this.insertOrUpdate === "insert") {
// params.directoryType = this.selectedGroupData.directoryType
params.parentId = params.id[params.id.length - 1];
// params.type = this.selectedGroupData.type
params.level =
params.parentId == "0" ? 0 : this.selectedGroupData.level + 1;
delete params.id;
res = await addFileDirectory(params);
} else {
params.id = params.id[params.id.length - 1];
res = await updateFileDirectory(params);
}
if (res.success) {
this.$Message.success("操作成功!");
this.enableGroup = false;
this.getAllList();
}
this.$Modal.remove();
} else {
this.$Message.error("请填写完整信息!");
}
});
},
// 添加/修改分组
handleClickAddGroup() {
this.insertOrUpdate = "insert";
if (this.selectedGroupData) {
this.groupFormValidate.id = [this.selectedGroupData.value];
} else {
this.groupFormValidate.id = ["0"];
}
this.enableGroup = true;
this.groupFormValidate.directoryName = "";
},
copyFileUrl(row) {
const textArea = document.createElement("textarea");
textArea.value = row.url;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand("copy");
this.$Message.success("复制成功");
} catch (err) {
console.error("Unable to copy to clipboard", err);
}
document.body.removeChild(textArea);
},
// 获取全部文件目录
getAllList(parent_id) {
this.loading = true;
getFileDirectory(parent_id).then((res) => {
this.loading = false;
if (res.success) {
this.treeData = this.getTree(res.result);
this.treeDataDefault = this.getTree(res.result);
this.treeData.unshift({
title: "全部图片",
label: "全部分类",
value: "0",
level: 0,
children: [],
id: "0",
categoryId: 0,
});
}
});
},
// 文件目录分类格式化方法
getTree(tree = []) {
let arr = [];
if (!!tree && tree.length !== 0) {
tree.forEach((item) => {
let obj = {};
obj.title = item.directoryName;
obj.value = item.id; // 拥有者id
obj.type = item.directoryType; // 用户类型
obj.label = item.directoryName;
obj.level = item.level;
obj.expand = false;
obj.selected = false;
obj.contextmenu = true;
obj.parentId = item.parentId;
obj.children = this.getTree(item.children); // 递归调用
arr.push(obj);
});
}
return arr;
},
// 选择分类回调
handleCateChange(data) {
this.selectedGroupData = data[0];
let {value, type} = data[0];
this.list.push({
value,
type,
});
this.searchForm.fileDirectoryId = value;
if (value === "0") {
delete this.searchForm.fileDirectoryId;
}
this.searchForm.userEnums = type;
this.getDataList();
},
/**
* 选择
*/
@ -560,9 +895,9 @@ export default {
},
// 更多操作
handleDropdown(name) {
if (name == "refresh") {
if (name === "refresh") {
this.getDataList();
} else if (name == "removeAll") {
} else if (name === "removeAll") {
this.removeAll();
}
},
@ -572,6 +907,7 @@ export default {
accessToken: this.getStore("accessToken"),
};
this.getDataList();
this.getAllList();
},
// 查看大图
showPic(v) {
@ -725,13 +1061,16 @@ export default {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
deleteFile(ids).then((res) => {
deleteFile({ids: ids}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("批量删除文件成功");
this.clearSelectAll();
this.getDataList();
}
})
.catch((err) => {
console.log("失败", err);
});
},
});
@ -743,13 +1082,13 @@ export default {
content: "您确认要删除文件 " + v.name + " ?",
loading: true,
onOk: () => {
deleteFile(v.id).then((res) => {
deleteFile({ids: v.id}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除文件 " + v.name + " 成功");
this.getDataList();
}
});
})
},
});
},
@ -792,6 +1131,7 @@ export default {
},
// 清除选中状态
clearSelectAll() {
console.log("清除选中状态");
this.$refs.table.selectAll(false);
this.totalSize = "";
},
@ -807,10 +1147,10 @@ export default {
},
},
mounted() {
if(!this.isComponent) { // 是组件的话，初始化不调用接口
if (!this.isComponent) {
// 是组件的话，初始化不调用接口
this.init();
}
},
};
</script>

13
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@ -156,12 +156,12 @@
<div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
<Card :bordered="true" class="ivu-card-body">
<Button slot="extra" type="primary" @click="handleCloseSkuItem($index, item)">
删除规格
删除规格项
</Button>
<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"
:maxlength="30" placeholder="请输入规格名称" style="width: 150px"
:maxlength="30" placeholder="请输入规格项名称" style="width: 150px"
@on-focus="changeSkuItem(item.name)" @on-change="
editSkuItem(item.name, $index, item)
">
@ -1568,6 +1568,13 @@ export default {
this.submitLoading = false;
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);
submit.skuList = [];
this.skuTableData.map((sku) => {

122
seller/src/views/lili-components/affix-time.vue
View File

@ -1,45 +1,42 @@
<template>
<div>
<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">
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" 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 @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询"
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>
</div>
</div>
</div>
</template>
<script>
import Cookies from "js-cookie";
import { getShopListData } from "@/api/shops.js";
export default {
props: ["closeShop"],
data() {
return {
month: "", // 所选月份
defuaultWay: {
title: "过去7天",
selected: true,
searchType: "LAST_SEVEN",
},
month: "", // 月份
selectedWay: {
// 可选时间项
title: "过去7天",
selected: true,
searchType: "LAST_SEVEN",
},
storeId: "", // 店铺id
dates: [], // 日期列表
params: { // 请求参数
params: {
// 请求参数
pageNumber: 1,
pageSize: 10,
storeName: "",
storeId: "",
},
dateList: [
// 筛选条件
{
title: "今天",
selected: false,
@ -61,13 +58,67 @@ export default {
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() {
this.storeId = JSON.parse(Cookies.get("userInfoSeller")).id;
this.getFiveYears();
this.getShopList();
},
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年 年月
getFiveYears() {
let getYear = new Date().getFullYear();
@ -89,8 +140,9 @@ export default {
}
this.dates = dates.reverse();
},
// 选择回调
changeSelect() {
// 改变已选店铺
changeSelect(e) {
this.month = e
if (this.month) {
this.dateList.forEach((res) => {
res.selected = false;
@ -101,29 +153,36 @@ export default {
this.$emit("selected", this.selectedWay);
} else {
const current = this.dateList.find(item => { return item.selected })
this.selectedWay = current
this.clickBreadcrumb(current)
this.$emit("selected", this.selectedWay);
}
},
// 点击时间筛选
// 变更时间
clickBreadcrumb(item) {
this.dateList.forEach((res) => {
let currentIndex;
this.dateList.forEach((res,index) => {
res.selected = false;
if(res.title === item.title){
currentIndex = index
}
});
item.selected = true;
item.storeId = this.storeId;
this.month = "";
if (item.searchType == "") {
if (
dateList.some((date) => {
return date.title == item.title;
})
) {
item.searchType = date.searchType;
let currentDate = this.originDateList[currentIndex].searchType
if (currentDate) {
item.searchType = currentDate
} else {
item.searchType = "LAST_SEVEN";
}
}
this.selectedWay = item;
this.selectedWay.year = new Date().getFullYear();
this.selectedWay.month = "";
@ -137,17 +196,20 @@ export default {
.breadcrumb {
display: flex;
align-items: center;
>span {
margin-right: 15px;
cursor: pointer;
}
}
.active {
color: $theme_color;
position: relative;
}
.date-picker {
}
.date-picker {}
.active:before {
content: "";
position: absolute;

21
seller/src/views/order/after-order/orderComplaintDetail.vue
View File

@ -7,7 +7,13 @@
<h3>投诉信息</h3>
<dl>
<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>
<dt>投诉状态</dt>
@ -160,19 +166,6 @@
</div>
<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">
<h3>订单相关信息</h3>
<dl>

25
seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
View File

@ -8,8 +8,15 @@
<div class="div-form-default">
<h3>售后申请</h3>
<dl>
<dt>售后状态</dt>
<dd>{{filterStatus(afterSaleInfo.serviceStatus)}}</dd>
<dt>售后商品</dt>
<dd>
<div>
<img :src="afterSaleInfo.goodsImage" style="height: 60px">
</div>
<a>{{ afterSaleInfo.goodsName }}</a><br>
<span>{{ afterSaleInfo.num }}(数量)</span>
</dd>
</dl>
<dl>
@ -155,20 +162,6 @@
</div>
<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">
<h3>订单相关信息</h3>
<dl>

8
seller/src/views/shop/renovation.vue
View File

@ -23,7 +23,7 @@
<model-form ref="modelForm" :data="modelForm"></model-form>
</div>
<!-- 操作按钮 -->
<div class="btn-bar">
<div class="btn-bar" :class="{'top':isHiddenBar}">
<Button type="primary" :loading="submitLoading" @click="saveTemplate"
>保存模板</Button
>
@ -44,6 +44,8 @@ export default {
ModelForm,
},
mounted() {
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
this.isHiddenBar = setting.isUseTabsRouter
// 先读缓存，如果缓存有值则读缓存。
const cache = this.getStore('sellerPCPageCache')
this.hasCache = !!cache;
@ -80,6 +82,7 @@ export default {
modelData, // 可选模块数据
modelForm: { list: [] }, // 模板数据
submitLoading: false, // 提交加载状态
isHiddenBar:true,
};
},
methods: {
@ -225,4 +228,7 @@ export default {
z-index: 99;
top: 100px;
}
.top{
top: 100px;
}
</style>

10
seller/src/views/statistics/order.vue
View File

@ -152,7 +152,7 @@
<div>
<Table stripe :columns="columns" :data="data"></Table>
</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>
</Card>
@ -459,6 +459,14 @@ export default {
},
},
methods: {
pageNumberChange(val){
this.refundParams.pageNumber = val
this.getOrderList();
},
pageSizeChange(val){
this.refundParams.pageSize = val
this.getOrderList();
},
// 订单图
initOrderChart() {
// 默认已经加载 legend-filter 交互