Skip to content

肖康 / cloudSystem

Go to a project
Commit 164efb85 by LJM
Options

bug

parent 130dd1c6
Inline Side-by-side
Showing with 856 additions and 87 deletions
src/assets/css/info/subAccount.less 0 → 100644
.subAccount {
.role-auth {
ul {
li {
padding: 0 10px;
border-right: 1px dashed #DCDFE6;
margin-bottom: 10px;
&:last-child {
border-right: none;
}
}
}
}
.el-checkbox-group-box {
margin-left: 27px;
margin-top: 5px;
.el-checkbox-group {
.el-checkbox {
display: block;
}
}
}
.tip {
padding: 8px 16px;
background-color: #ecf8ff;
border-radius: 4px;
border-left: 5px solid #50bfff;
margin-bottom: 10px;
}
}
\ No newline at end of file
src/assets/css/info/subAccount.min.css 0 → 100644
.subAccount .role-auth ul li {
padding: 0 10px;
border-right: 1px dashed #DCDFE6;
margin-bottom: 10px;
}
.subAccount .role-auth ul li:last-child {
border-right: none;
}
.subAccount .el-checkbox-group-box {
margin-left: 27px;
margin-top: 5px;
}
.subAccount .el-checkbox-group-box .el-checkbox-group .el-checkbox {
display: block;
}
.subAccount .tip {
padding: 8px 16px;
background-color: #ecf8ff;
border-radius: 4px;
border-left: 5px solid #50bfff;
margin-bottom: 10px;
}
/*# sourceMappingURL=subAccount.min.css.map */
\ No newline at end of file
src/assets/css/info/subAccount.min.css.map 0 → 100644
{"version":3,"sources":["subAccount.less"],"names":[],"mappings":"AAAA,WACI,WACI,GACI;EACI,eAAA;EACA,gCAAA;EACA,mBAAA;;AAEA,WAPZ,WACI,GACI,GAKK;EACG,kBAAA;;AATpB,WAeI;EACI,iBAAA;EACA,eAAA;;AAjBR,WAeI,uBAII,mBACI;EACI,cAAA;;AArBhB,WA0BI;EACI,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,8BAAA;EACA,mBAAA","file":"subAccount.min.css"}
\ No newline at end of file
src/components/menu.vue
......@@ -49,84 +49,26 @@
<span class="icon iconfont fr" @click="zk"></span>
</div>
<!--菜单栏-->
<el-menu class="el-menu-vertical-demo" @open="handleOpen" active-text-color="#1969F9" router :default-active="$route.path" :router="true" :unique-opened="true" @close="handleClose" @select="handleSelect">
<el-menu class="el-menu-vertical-demo" active-text-color="#1969F9" router :default-active="$route.path" :router="true" :unique-opened="true" @open="handleOpen" @close="handleClose" @select="handleSelect">
<template v-if="Object.keys(index_home).length !== 0">
<el-menu-item :index="'/'" :class="{'indextab':isIndexTab}">
<template slot="title">
<span class="icon iconfont iconsy"></span>
<span>概况</span>
</template>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<span class="icon iconfont iconbj"></span>
<span slot="title">询报价管理</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/inquire'">询价管理</el-menu-item>
<el-menu-item :index="'/quote'">报价管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<span class="icon iconfont iconzhibiaozhuizong"></span>
<span slot="title">订单追踪</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/orderTrackGoods'">已采购订单</el-menu-item>
<el-menu-item :index="'/orderTrackInvoice'">发货单</el-menu-item>
<el-menu-item :index="'/returnGoods'">退货单</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<span class="icon iconfont iconstore"></span>
<span slot="title">库存管理</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/list'">现货库存</el-menu-item>
<el-menu-item :index="'/enter'">库存导入</el-menu-item>
<el-menu-item :index="'/goodslist'">优势物料</el-menu-item>
<el-menu-item :index="'/listDetail'" style="display:none">导入详情</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<span class="icon iconfont icongoods"></span>
<span slot="title">商品管理</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/goods'">商品列表</el-menu-item>
<el-menu-item :index="'/brand'">品牌列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="6">
<template v-if="menuData.length > 0">
<el-submenu :index="(index+2).toString()" v-for="(item,index) in menuData" :key="index">
<template slot="title">
<span class="icon iconfont iconshujutongji"></span>
<span slot="title">数据统计</span>
<span :class="['icon', 'iconfont', item.iconfont]"></span>
<span slot="title">{{ item.name }}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/inquireTransform'">询价转化统计</el-menu-item>
<el-menu-item :index="v.path" v-for="(v,i) in item.children" :key="i">{{ v.name }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="7">
<template slot="title">
<span class="icon iconfont iconxiaoxiguanli1"></span>
<span slot="title">消息管理</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/news'">消息列表</el-menu-item>
<el-menu-item :index="'/notice'">系统公告</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="8">
<template slot="title">
<span class="icon iconfont iconuser"></span>
<span slot="title">用户中心</span>
</template>
<el-menu-item-group>
<el-menu-item :index="'/message'">基本信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</div>
......@@ -135,30 +77,16 @@
<div class="zankai">
<span class="icon iconfont fr" @click="zk"></span>
</div>
<template v-if="Object.keys(index_home).length !== 0">
<div class="item" :class="{'act':tabSure==1}">
<span class="icon iconfont iconsy"></span>
</div>
<div class="item" :class="{'act':tabSure==2}">
<span class="icon iconfont iconbj"></span>
</div>
<div class="item" :class="{'act':tabSure==3}">
<span class="icon iconfont iconzhibiaozhuizong"></span>
</div>
<div class="item" :class="{'act':tabSure==4}">
<span class="icon iconfont iconstore"></span>
</div>
<div class="item" :class="{'act':tabSure==5}">
<span class="icon iconfont icongoods"></span>
</div>
<div class="item" :class="{'act':tabSure==6}">
<span class="icon iconfont iconshujutongji"></span>
</div>
<div class="item" :class="{'act':tabSure==7}">
<span class="icon iconfont iconxiaoxiguanli1"></span>
</div>
<div class="item" :class="{'act':tabSure==8}">
<span class="icon iconfont iconuser"></span>
</template>
<template v-if="menuData.length > 0">
<div class="item" :class="{'act':tabSure==(index+1)}" v-for="(item,index) in menuData" :key="index">
<span :class="['icon', 'iconfont', item.iconfont]"></span>
</div>
</template>
</div>
<!--修改密码弹窗-->
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" class="demo-ruleForm">
......@@ -308,9 +236,9 @@ import Util from "../tool";
import axios from 'axios';
import {NODE_ENVS_MSG} from "../ajax";
import {Badge, Button, Checkbox, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Notification, Pagination, Submenu, TabPane, Tabs, Tooltip} from 'element-ui'
Vue.prototype.$message = Message;
Vue.prototype.$notify = Notification;
Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input).use(Tabs).use(TabPane).use(Badge).use(Pagination).use(Checkbox);
export default {
......@@ -353,6 +281,8 @@ export default {
total: 0,
limit: 10,
page: 1,
menuData: [],//菜单数据集合
index_home: {},//概况
color_arr: [{
name: '询价',
value: '#409EFF'
......@@ -413,7 +343,7 @@ export default {
var self = this
this.getData();//获取个人信息
this.tabUi();
this.getMenu();
this.getWelcome();
window.onresize = function () {
self.tabUi()
......@@ -424,6 +354,27 @@ export default {
},
methods: {
/**
* 获取当前用户的权限菜单
*/
getMenu() {
this.$http('GET', "/api/subAccount/getMenu", {
sbat_id: ''
}).then(res => {
if (res.code === 0) {
const overviewItem = res.data.data.find(item => item.name === "概况");
const menuData = res.data.data.filter(item => item.name !== "概况");
this.index_home = overviewItem;
this.menuData = menuData;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
/**
* 欢迎
*/
getWelcome() {
......
src/router/index.js
......@@ -25,6 +25,9 @@ const ReturnGoods = resolve => require(['@/views/OrderTrack/returnGoods.vue'], r
const OrderTrackPurAdd = resolve => require(['@/views/OrderTrack/purAdd.vue'], resolve);
const News = resolve => require(['@/views/News/index.vue'], resolve);
const Notice = resolve => require(['@/views/News/notice.vue'], resolve);
const SubAccount = resolve => require(['@/views/Info/subAccount.vue'], resolve);
const SubAccountAdd = resolve => require(['@/views/Info/subAccountAdd.vue'], resolve);
const SubAccountEdit = resolve => require(['@/views/Info/subAccountEdit.vue'], resolve);
const InquireTransform = resolve => require(['@/views/InquireTransform/index.vue'], resolve);
......@@ -207,6 +210,30 @@ const routes = [
component: Notice
},
{
path: '/subAccount',
name: 'subAccount',
meta: {
title: '子账号管理'
},
component: SubAccount
},
{
path: '/subAccountadd',
name: 'subAccountadd',
meta: {
title: '创建子账号'
},
component: SubAccountAdd
},
{
path: '/subAccountEdit',
name: 'subAccountEdit',
meta: {
title: '编辑子账号'
},
component: SubAccountEdit
},
{
path: '/inquireTransform',
name: 'inquireTransform',
meta: {
......
src/views/Info/subAccount.vue 0 → 100644
<template>
<section class="subAccount pagex">
<div class="subAccount-con">
<!--搜索区-->
<el-form :inline="true" :model="formParam" class="demo-form-inline" ref="formParam" label-width="80px">
<el-form-item label="子账号" prop="mobile">
<el-input v-model="formParam.mobile" placeholder="请输入子账号" @keyup.enter.native="submit" clearable></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="formParam.name" placeholder="请输入子账号" @keyup.enter.native="submit" clearable></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="formParam.status" placeholder="请选择" clearable>
<el-option label="全部" value=""></el-option>
<el-option label="启动" value="1"></el-option>
<el-option label="禁用" value="2"></el-option>
<el-option label="删除" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="创建渠道" prop="status">
<el-select v-model="formParam.create_type" placeholder="请选择" clearable>
<el-option label="全部" value=""></el-option>
<el-option label="芯链系统" value="1"></el-option>
<el-option label="猎芯后台" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker :unlink-panels=true style="width:193px" prefix-icon="prefix-icon-time-style" v-model="create_time_val" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item label="更新时间">
<el-date-picker :unlink-panels=true style="width:193px" prefix-icon="prefix-icon-time-style" v-model="update_time_val" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
<el-button @click="resetForm('formParam')">重置</el-button>
</el-form-item>
</el-form>
<!--操作区-->
<div class="operation-area row verCenter bothSide">
<div class="operation-button row verCenter">
<el-button type="primary" @click="$router.push('/subAccountadd')">创建子账号</el-button>
</div>
</div>
<!--列表区-->
<div class="data-box">
<el-table key="listTable" :data="tableData" border max-height="600" highlight-current-row>
<el-table-column prop="mobile" label="子账号" width="200" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column prop="status_cn" label="状态" width="200" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="create_type_cn" label="创建渠道" width="200" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="create_time_cn" label="创建时间" width="200" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="update_time_cn" label="修改时间" width="200" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column label="操作" width="250" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="goToSubAccountEdit(scope.row.sbat_id,scope.row.ynat_id)">编辑</el-button>
<template v-if="scope.row.status == 1">
<el-button size="mini" type="warning" @click="confirmEnable(scope.row,2)">禁用</el-button>
</template>
<template v-else>
<el-button size="mini" type="success" @click="confirmEnable(scope.row,1)">启用</el-button>
</template>
<el-button size="mini" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
</div>
</div>
<Menu/>
</section>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, MessageBox, Option, Pagination, Popover, Radio, RadioButton, RadioGroup, Select, Table, TableColumn, Tag, Tooltip} from 'element-ui'
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete).use(Radio).use(RadioGroup).use(RadioButton);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Popover).use(Tag).use(Tooltip);
export default {
name: "subAccount",
data() {
return {
total: 0,
limit: 10,
page: 1,
tableData: [],
create_time_val: '',
update_time_val: '',
formParam: {
mobile: '',
name: '',
status: '',
create_type: '',
create_time: '',
update_time: ''
}
};
},
created() {
this.getData();
},
methods: {
getData() {
//格式化时间
if (this.create_time_val) {
this.formParam.create_time = this.create_time_val[0] + '~' + this.create_time_val[1];
} else {
this.formParam.update_time = '';
}
if (this.update_time_val) {
this.formParam.update_time = this.update_time_val[0] + '~' + this.update_time_val[1];
} else {
this.formParam.update_time = '';
}
var params = Object.assign({}, {page: this.page, limit: this.limit}, this.formParam);
this.$http('GET', "/api/subAccount/list", params).then(res => {
if (res.code === 0) {
this.tableData = res.data.list || [];
this.total = res.data.total;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
/**
* 启用，禁用
* @param row
*/
confirmEnable(row, type) {
this.$confirm(`确定要"${row.status == 1 ? '禁用' : '启用'}" 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http('POST', "/api/subAccount/changeStatus", {sbat_id: row.sbat_id, status: type}).then(res => {
if (res.code === 0) {
this.getData();
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
}).catch(() => {
});
},
/**
* 删除
*/
confirmDelete(row) {
this.$confirm(`确定要删除 "${row.name}" 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http('POST', "/api/subAccount/changeStatus", {sbat_id: row.sbat_id, status: 0}).then(res => {
if (res.code === 0) {
this.getData();
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
}).catch(() => {
});
},
goToSubAccountEdit(sbat_id, ynat_id) {
this.$router.push(`/subAccountEdit?sbat_id=${sbat_id}&ynat_id=${ynat_id}`);
},
/**
* 分页条数切换
* @param val
*/
handleSizeChange(val) {
this.limit = val;
this.getData();
},
/**
* 分页点击切换
* @param val
*/
handleCurrentChange(val) {
this.page = val;
this.getData();
},
/**
* 重置
* @param formName
*/
resetForm(formName) {
this.create_time_val = '';
this.deadline_time_val = '';
this.$refs[formName].resetFields();
},
/**
* 搜索提交
*/
onSubmit() {
this.page = 1;
this.getData();
}
},
components: {
Menu
}
};
</script>
<style scoped>
@import "../../assets/css/info/subAccount.min.css";
</style>
\ No newline at end of file
src/views/Info/subAccountAdd.vue 0 → 100644
<template>
<section class="subAccount pagex">
<el-form :inline="true" :model="formParam" :rules="rules" ref="ruleForm" label-width="90px">
<div class="tip row verCenter">
<span>子账号信息</span>
</div>
<el-form-item label="账号" prop="mobile">
<el-input v-model="formParam.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password_raw">
<el-input v-model="formParam.password_raw" placeholder="请输入登录密码"></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="formParam.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formParam.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<div class="tip row">
<span>子账号权限配置</span>
<div class="text-tip row verCenter">
<i class="el-icon-warning"></i>
<span>勾选以下页面后，子账号可以看到对应的页面内容并进行操作；没有勾选的页面，子账号则无权查看</span>
</div>
</div>
<!--子账号权限配置-->
<section class="role-auth">
<ul class="row">
<li v-for="(item,index) in menuData" :key="index">
<el-tree :data="item" show-checkbox node-key="id" :props="defaultProps" default-expand-all @check-change="handleCheckChange"></el-tree>
</li>
</ul>
</section>
<div class="tip">子账号消息推送配置</div>
<!--子账号消息推送配置-->
<section class="role-auth">
<ul class="row">
<li v-for="(item,index) in messageMenu" :key="index">
<el-tree :data="item" show-checkbox node-key="id" :props="defaultProps" default-expand-all @check-change="handleCheckMsgChange"></el-tree>
</li>
</ul>
</section>
<el-row>
<el-button @click="$router.push('/subAccount')">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</el-row>
</el-form>
<Menu/>
</section>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, Checkbox, CheckboxButton, CheckboxGroup, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, Option, Pagination, Popover, Radio, RadioButton, RadioGroup, Row, Select, Table, TableColumn, Tag, Tooltip, Tree} from 'element-ui'
Vue.prototype.$message = Message;
Vue.use(Button).use(Form).use(Select).use(Tree).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete).use(Radio).use(RadioGroup).use(RadioButton).use(Checkbox).use(CheckboxButton).use(CheckboxGroup);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Popover).use(Tag).use(Tooltip).use(Row);
export default {
name: "subAccountAdd",
data() {
return {
defaultProps: {
children: 'children',
label: 'name'
},
data: [{
name: '询报价管理',
children: [{
name: '询价管理',
}, {
name: '报价管理'
}]
}],
rules: {
mobile: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}],
name: [{
required: true,
message: '请输入名称',
trigger: 'blur'
}],
password_raw: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}],
email: [{
required: true,
message: '请输入邮箱',
trigger: 'blur'
}],
},
menuData: [],//权限菜单
checkedNodes: [],//存储勾选的子账号权限配置
messageMenu: [],//消息权限菜单
checkedMessageNodes: [],//存储勾选的消息菜单
formParam: {
mobile: '',
name: '',
password_raw: '',
email: '',
user_message_rule: [],
user_rule: []
}
};
},
created() {
this.getMenu();
this.getMessageMenu();
},
methods: {
/**
* 获取当前用户的权限菜单
*/
getMenu() {
this.$http('GET', "/api/subAccount/getMenu", {method: 'add'}).then(res => {
if (res.code === 0) {
let newMenuData = res.data.data.map(item => [item]);
this.menuData = newMenuData;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
/**
* 获取当前用户的消息权限菜单
*/
getMessageMenu() {
this.$http('GET', "/api/subAccount/getMessageMenu", {ynat_id: ''}).then(res => {
if (res.code === 0) {
let newMenuData = res.data.data.map(item => [item]);
this.messageMenu = newMenuData;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
handleCheckChange(data, checked) {
if (checked) {
if (!this.checkedNodes.includes(data.name)) {
this.checkedNodes.push(data.name);
}
} else {
const index = this.checkedNodes.indexOf(data.name);
if (index !== -1) {
this.checkedNodes.splice(index, 1);
}
if (data.children) {
if (!this.checkedNodes.includes(data.name)) {
this.checkedNodes.push(data.name);
}
}
}
},
handleCheckMsgChange(data, checked) {
if (checked) {
if (!this.checkedMessageNodes.includes(data.name)) {
this.checkedMessageNodes.push(data.name);
}
} else {
const index = this.checkedMessageNodes.indexOf(data.name);
if (index !== -1) {
this.checkedMessageNodes.splice(index, 1);
}
if (data.children) {
if (!this.checkedMessageNodes.includes(data.name)) {
this.checkedMessageNodes.push(data.name);
}
}
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.formParam.user_message_rule = JSON.stringify(this.checkedMessageNodes);
this.formParam.user_rule = JSON.stringify(this.checkedNodes);
this.$http('POST', "/api/subAccount/create", this.formParam).then(res => {
if (res.code === 0) {
this.$message({
message: '创建成功',
type: 'success'
});
setTimeout(() => {
this.$router.push('/subAccount')
}, 2000)
} else {
this.$message({
message: res.msg,
type: 'error'
});
}
})
} else {
return false;
}
});
}
}
,
components: {
Menu
}
}
;
</script>
<style scoped>
@import "../../assets/css/info/subAccount.min.css";
</style>
\ No newline at end of file
src/views/Info/subAccountEdit.vue 0 → 100644
<template>
<section class="subAccount pagex">
<el-form :inline="true" :model="formParam" :rules="rules" ref="ruleForm" label-width="90px">
<div class="tip row verCenter">
<span>子账号信息</span>
</div>
<el-form-item label="账号" prop="mobile">
<el-input v-model="formParam.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password_raw">
<el-input v-model="formParam.password_raw" placeholder="请输入登录密码"></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="formParam.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formParam.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<div class="tip row">
<span>子账号权限配置</span>
<div class="text-tip row verCenter">
<i class="el-icon-warning"></i>
<span>勾选以下页面后，子账号可以看到对应的页面内容并进行操作；没有勾选的页面，子账号则无权查看</span>
</div>
</div>
<!--子账号权限配置-->
<section class="role-auth">
<ul class="row">
<li v-for="(item,index) in menuData" :key="item.id">
<el-tree :data="item" show-checkbox :props="defaultProps" :default-checked-keys="filteredRuleIds" default-expand-all node-key="id" @check-change="handleCheckChange"></el-tree>
</li>
</ul>
</section>
<div class="tip">子账号消息推送配置</div>
<!--子账号消息推送配置-->
<section class="role-auth">
<ul class="row">
<li v-for="(item,index) in messageMenu" :key="index">
<el-tree :data="item" show-checkbox :props="defaultProps" :default-checked-keys="filteredMessageIds" default-expand-all node-key="id" @check-change="handleCheckMsgChange"></el-tree>
</li>
</ul>
</section>
<el-row>
<el-button @click="$router.push('/subAccount')">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</el-row>
</el-form>
<Menu/>
</section>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, Checkbox, CheckboxButton, CheckboxGroup, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, Option, Pagination, Popover, Radio, RadioButton, RadioGroup, Row, Select, Table, TableColumn, Tag, Tooltip, Tree} from 'element-ui'
Vue.prototype.$message = Message;
Vue.use(Button).use(Form).use(Select).use(Tree).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete).use(Radio).use(RadioGroup).use(RadioButton).use(Checkbox).use(CheckboxButton).use(CheckboxGroup);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Popover).use(Tag).use(Tooltip).use(Row);
export default {
name: "subAccountAdd",
data() {
return {
defaultProps: {
children: 'children',
label: 'name'
},
data: [{
name: '询报价管理',
children: [{
name: '询价管理',
}, {
name: '报价管理'
}]
}],
rules: {
mobile: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}],
name: [{
required: true,
message: '请输入名称',
trigger: 'blur'
}],
password_raw: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}],
email: [{
required: true,
message: '请输入邮箱',
trigger: 'blur'
}],
},
menuData: [],//权限菜单
messageMenu: [],//消息权限菜单
checkedNodes: [],//存储勾选的子账号权限配置
checkedMessageNodes: [],//存储勾选的消息菜单
filteredRuleIds: [],
filteredMessageIds: [],
ynat_id: this.$route.query.ynat_id,
formParam: {
sbat_id: this.$route.query.sbat_id,
mobile: '',
name: '',
password_raw: '',
email: '',
user_message_rule: [],
user_rule: []
}
};
},
created() {
this.getData();
this.getMenu();
this.getMessageMenu();
},
methods: {
getData() {
this.$http('GET', "/api/subAccount/getSubAccountInfo", {sbat_id: this.formParam.sbat_id}).then(res => {
if (res.code === 0) {
//赋值子账号信息
this.formParam.mobile = res.data.mobile;
this.formParam.name = res.data.name;
this.formParam.password_raw = res.data.password_raw;
this.formParam.email = res.data.email;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
/**
* 获取当前用户的权限菜单
*/
getMenu() {
this.$http('GET', "/api/subAccount/getMenu", {sbat_id: this.formParam.sbat_id}).then(res => {
if (res.code === 0) {
if (res.data.data.length > 0) {
let newMenuData = res.data.data.map(item => [item]);
this.menuData = newMenuData;
const filteredIds = [];
res.data.data.forEach(item => {
if (item.children) {
const childrenWithChecked = item.children.filter(child => child.checked);
const ids = childrenWithChecked.map(child => child.id);
filteredIds.push(...ids);
}
});
this.filteredRuleIds = filteredIds;
}
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
/**
* 获取当前用户的消息权限菜单
*/
getMessageMenu() {
this.$http('GET', "/api/subAccount/getMessageMenu", {ynat_id: this.ynat_id}).then(res => {
if (res.code === 0) {
if (res.data.data.length > 0) {
let newMenuData = res.data.data.map(item => [item]);
this.messageMenu = newMenuData;
const filteredIds = [];
res.data.data.forEach(item => {
if (item.children) {
const childrenWithChecked = item.children.filter(child => child.checked);
const ids = childrenWithChecked.map(child => child.id);
filteredIds.push(...ids);
}
});
this.filteredMessageIds = filteredIds;
}
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
})
},
/**
* 筛选子账号勾选的权限配置
* @param data
* @param checked
*/
handleCheckChange(data, checked) {
if (checked) {
if (!this.checkedNodes.includes(data.name)) {
this.checkedNodes.push(data.name);
}
} else {
const index = this.checkedNodes.indexOf(data.name);
if (index !== -1) {
this.checkedNodes.splice(index, 1);
}
if (data.children) {
if (!this.checkedNodes.includes(data.name)) {
this.checkedNodes.push(data.name);
}
}
}
},
/**
* 筛选子账号勾选的消息推送配置
* @param data
* @param checked
*/
handleCheckMsgChange(data, checked) {
if (checked) {
if (!this.checkedMessageNodes.includes(data.name)) {
this.checkedMessageNodes.push(data.name);
}
} else {
const index = this.checkedMessageNodes.indexOf(data.name);
if (index !== -1) {
this.checkedMessageNodes.splice(index, 1);
}
if (data.children) {
if (!this.checkedMessageNodes.includes(data.name)) {
this.checkedMessageNodes.push(data.name);
}
}
}
},
/**
* 获取需要勾选的数据
*/
getDefaultCheckedKeys(item) {
console.log(item)
return [3];
},
/**
* 表单提交
* @param formName
*/
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.formParam.user_message_rule = JSON.stringify(this.checkedNodes);
this.formParam.user_rule = JSON.stringify(this.checkedMessageNodes);
this.$http('POST', "/api/subAccount/edit", this.formParam).then(res => {
if (res.code === 0) {
this.$message({
message: '修改成功',
type: 'success'
});
setTimeout(() => {
this.$router.push('/subAccount')
}, 2000)
} else {
this.$message({
message: res.msg,
type: 'error'
});
}
})
} else {
return false;
}
});
}
}
,
components: {
Menu
}
}
;
</script>
<style scoped>
@import "../../assets/css/info/subAccount.min.css";
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment