<template>
<div class="main">
<!-- 搜索区 -->
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small" @click="orgMainAdd">添加组织</el-button>
<el-button class="button buttondark" size="small" @click="orgMainDels">批量删除</el-button>
</div>
<el-form class="searchzone" :inline="true" :model="zdata.searchPost" label-width="auto">
<el-form-item label="关键词">
<el-input
size="small"
v-model="zdata.search.post.keyword"
style="width:160px"
:placeholder="zcache.search.keywordTip"
/>
</el-form-item>
<el-button
class="button buttondark"
size="small"
@click="orgMainSearch"
style="margin-top:4px;"
>搜索</el-button>
</el-form>
</div>
<!-- 列表区 -->
<div class="lists">
<el-table
stripe
class="list"
ref="multipleTable"
:data="zlist.org"
tooltip-effect="dark"
style="width: 100%"
height="calc(100vh - 360px)"
row-key="id"
:tree-props="{children: 'children',hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="名称" align="left"></el-table-column>
<el-table-column prop="typeName" label="类型" align="center"></el-table-column>
<el-table-column prop="bossName" label="主管" align="center"></el-table-column>
<el-table-column prop="bossWxId" label="主管微信ID" align="center"></el-table-column>
<el-table-column prop="bossPhoneNum" label="主管电话" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
</el-table>
</div>
<div class="pages">
<el-pagination
@current-change="storePageIndexChange"
:current-page="zcache.page.nowPage"
:page-size="zcache.page.pageSize"
layout="total, prev, pager, next, jumper"
:total="zcache.page.allItem"
></el-pagination>
</div>
<add-store ref="addStore"></add-store>
<store-detail ref="storeDetail"></store-detail>
<!-- 对话框区 -->
<div class="ztask-dialogs">
<!-- New -->
<el-dialog
title="新建品牌"
:visible.sync="zcache.status.newDialog"
width="65%"
:before-close="dialogNewClose"
>
<div class="dialogMain">
<!-- <el-form :model="zdata.post" label-width="auto" ref="addStore" :rules="zrule"> -->
<el-form
:model="zdata.newPost"
label-width="auto"
ref="newStore"
style="border: 0px solid red;"
>
<!-- <el-form :model="zdata.post" label-width="auto" ref="createForm" :rules="rules"> -->
<el-form-item label="品牌名称:" prop="storeName">
<el-input
size="small"
v-model="zdata.newPost.storeName"
style="width:240px;"
placeholder="请输入品牌名称"
/>
</el-form-item>
<el-form-item label="品牌类型:" prop="storeType">
<el-select
size="small"
v-model="zdata.newPost.storeTypeId"
placeholder="请选择品牌类型"
style="width:240px"
>
<el-option
v-for="item in zlist.storeType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="品牌负责人:" prop="people">
<el-select
size="small"
v-model="zdata.newPost.storeBossId"
placeholder="请选择品牌负责人"
style="width:240px"
@change="ztestman"
>
<el-option
v-for="item in zlist.unGroupMan"
:key="item.id"
:label="item.userName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属柜组:" prop="counter">
<el-select
size="small"
v-model="zdata.newPost.storeFromBarId"
placeholder="请选择所属柜组"
style="width:240px"
>
<el-option
v-for="item in zlist.bar"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="门牌号:" prop="number">
<el-input
size="small"
v-model="zdata.newPost.storeDoorCode"
style="width:240px"
placeholder="请输入门牌号"
/>
</el-form-item>
<el-form-item label="位置:" prop="area">
<el-input
size="small"
v-model="zdata.newPost.storeAddress"
style="width:240px"
placeholder="请输入位置"
/>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogNewCancel">取 消</el-button>
<!-- <el-button type="primary" @click="addStoreSubmit('createForm')" size="small">确 定</el-button> -->
<el-button type="primary" @click="dialogNewSubmit" size="small">确 定</el-button>
</span>
</el-dialog>
<!-- See -->
<el-dialog
title="品牌详情"
:visible.sync="zcache.status.seeDialog"
width="50%"
:before-close="dialogSeeClose"
>
<div class="dialogMain">
<el-form :model="zdata.see" label-width="120px">
<el-row>
<el-col :span="24">
<el-form-item label="品牌名称：">
<el-input
:disabled="true"
v-model="zdata.see.storeName"
autocomplete="off"
placeholder="品牌名称缺失"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="品牌类型：">
<el-input
:disabled="true"
v-model="zdata.see.storeType"
autocomplete="off"
placeholder="品牌类型为空"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="所属柜组：">
<el-input
:disabled="true"
v-model="zdata.see.storeFromBar"
autocomplete="off"
placeholder="柜组信息未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="品牌负责人：">
<el-input
:disabled="true"
v-model="zdata.see.storeBossName"
autocomplete="off"
placeholder="品牌负责人未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="门牌号：">
<el-input
:disabled="true"
v-model="zdata.see.storeDoorId"
autocomplete="off"
placeholder="门牌号未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="位置：">
<el-input
:disabled="true"
v-model="zdata.see.storeAddress"
autocomplete="off"
placeholder="位置未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="店员：">
<el-table class="list" :data="zdata.see.storeManList" tooltip-effect="dark">
<el-table-column type="index" width="50" align="center"></el-table-column>
<el-table-column prop="userName" label="品牌名称" align="center"></el-table-column>
<el-table-column prop="userId" label="品牌类型" align="center"></el-table-column>
<el-table-column prop="mobile" label="品牌类型" align="center"></el-table-column>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogSeeClose">关 闭</el-button>
<!-- <el-button size="small" type="primary" @click="dialogSeeSubmitSend('seeForm')">任务下发</el-button> -->
</span>
</el-dialog>
<!-- Edit -->
<el-dialog
title="编辑品牌"
:visible.sync="zcache.status.editDialog"
width="65%"
:before-close="dialogEditClose"
>
<div class="dialogMain">
<!-- <el-form :model="zdata.post" label-width="auto" ref="addStore" :rules="zrule"> -->
<el-form
:model="zdata.editPost"
label-width="auto"
ref="editStore"
style="border: 0px solid red;"
>
<!-- <el-form :model="zdata.post" label-width="auto" ref="createForm" :rules="rules"> -->
<el-form-item label="品牌名称:" prop="storeName">
<el-input
size="small"
v-model="zdata.editPost.storeName"
style="width:240px;"
placeholder="请输入品牌名称"
/>
</el-form-item>
<el-form-item label="品牌类型:" prop="storeType">
<el-select
size="small"
v-model="zdata.editPost.storeTypeId"
placeholder="请选择品牌类型"
style="width:240px"
>
<el-option
v-for="item in zlist.storeType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="品牌负责人:" prop="people">
<el-select
size="small"
v-model="zdata.editPost.storeBossId"
placeholder="请选择品牌负责人"
style="width:240px"
>
<el-option
v-for="item in zlist.unGroupMan"
:key="item.id"
:label="item.userName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属柜组:" prop="counter">
<el-select
size="small"
v-model="zdata.editPost.storeFromBarId"
placeholder="请选择所属柜组"
style="width:240px"
>
<el-option
v-for="item in zlist.storeFromBarId"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="门牌号:" prop="number">
<el-input
size="small"
v-model="zdata.editPost.storeDoorCode"
style="width:240px"
placeholder="请输入门牌号"
/>
</el-form-item>
<el-form-item label="位置:" prop="area">
<el-input
size="small"
v-model="zdata.editPost.storeAddress"
style="width:240px"
placeholder="请输入位置"
/>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogEditCancel">取 消</el-button>
<!-- <el-button type="primary" @click="addStoreSubmit('createForm')" size="small">确 定</el-button> -->
<el-button type="primary" @click="dialogEditSubmit" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import AddStore from "./components/addStore";
import StoreDetail from "./components/storeDetail";
import {
ApiStoreGetMainList,
ApiStoreGetStoreDetail,
ApiStoreDelStore,
ApiStoreGetUnGroupManList,
ApiStoreAddStore,
ApiStoreEditStore,
ApiStoreGetBarList,
ApiStoreSearch
} from "@api/in/org";
import axios from "axios";
const zlog = console.log.bind(console);
export default {
components: {
AddStore,
StoreDetail
},
data() {
return {
zcache: {
search: {
keywordTip: "F请输入关键词"
}
},
zdata: {
search: {
post: {
keyword: ""
}
}
},
zlist: {
org: [
{
id: "01000000",
name: "欧亚万豪购物中心",
typeId: "",
typeName: "门店",
bossId: "",
bossName: "Alice",
bossWxId: "WxAlice",
bossPhoneNum: "18800000001",
createTime: "2019/01/01",
children: [
{
id: "01010000",
name: "品牌店",
typeId: "",
typeName: "商场",
bossId: "",
bossName: "Bob",
bossWxId: "WxBob",
bossPhoneNum: "18800000002",
createTime: "2019/02/01",
children: [
{
id: "01010100",
name: "精品男装",
typeId: "",
typeName: "柜组",
bossId: "",
bossName: "Clid",
bossWxId: "WxClid",
bossPhoneNum: "18800000003",
createTime: "2019/03/01",
children: [
{
id: "01010101",
name: "Asics",
typeId: "",
typeName: "专柜",
bossId: "",
bossName: "Dive",
bossWxId: "WxDive",
bossPhoneNum: "18800000004",
createTime: "2019/04/01"
},
{
id: "01010102",
name: "Adidas",
typeId: "",
typeName: "专柜",
bossId: "",
bossName: "Eva",
bossWxId: "WxEva",
bossPhoneNum: "18800000005",
createTime: "2019/04/02"
},
{
id: "01010103",
name: "Nike",
typeId: "",
typeName: "专柜",
bossId: "",
bossName: "Fox",
bossWxId: "WxFox",
bossPhoneNum: "18800000006",
createTime: "2019/04/03"
},
]
},
{
id: "01010200",
name: "精品女装",
typeId: "",
typeName: "柜组",
bossId: "",
bossName: "Gome",
bossWxId: "WxGome",
bossPhoneNum: "18800000007",
createTime: "2019/03/02",
children: [
]
},
{
id: "01010300",
name: "皮鞋柜组",
typeId: "",
typeName: "柜组",
bossId: "",
bossName: "Hola",
bossWxId: "WxHola",
bossPhoneNum: "18800000008",
createTime: "2019/03/03",
children: [
]
},
{
id: "01010400",
name: "护肤美颜",
typeId: "",
typeName: "柜组",
bossId: "",
bossName: "Ink",
bossWxId: "WxInk",
bossPhoneNum: "18800000009",
createTime: "2019/03/04",
children: [
]
},
]
},
]
},
]
}
};
},
watch: {
// addStoreDialog() {
addStoreDialog() {
// if ((this.$refs.addStore.addStoreDialog = false)) {
// this.storeGetMainList();
// }
},
"": {
handler: function() {},
deep: true
}
},
// created() {
// this.storeGetMainList();
// zlog('--->Created!')
// },
mounted() {
// this.storeGetMainList();
this.storeSearch();
this.storeReadyBarList();
this.storeGetUnGroupManList();
},
methods: {
orgMainAdd() {},
orgMainDels() {},
orgMainSearch() {},
storeReadyBarList() {
ApiStoreGetBarList()
.then(res => {
this.zlist.bar = res.data;
})
.catch(err => {});
},
storeGetUnGroupManList() {
let postData = {};
ApiStoreGetUnGroupManList(postData)
.then(res => {
this.zlist.unGroupMan = res.data;
})
.catch(err => {});
},
storeGetBarList() {},
matchManIdAndManName(inId) {
let manList = this.list.man;
let manName = "未知";
for (let i = 0; i < this.list.man.length; i++) {
let item = manList[i];
if (item != null && item.id != null) {
if (item.id == inId) {
manName = item.userName;
}
}
}
return manName;
},
transManIdToManName() {
let mainList = this.list.main;
let id = "";
let name = "";
for (let i = 0; i < mainList.length; i++) {
if (
this.list.main[i].adminStall.principal &&
this.list.main[i].adminStall.principal != null
) {
id = this.list.main[i].adminStall.principal;
name = this.matchManIdAndManName(id);
this.list.main[i].adminStall.principal = name;
} else {
this.list.main[i].adminStall.principal = "未知";
}
}
},
storeSearch() {
if (this.zdata.searchPost.keywords == "") {
this.zcache.status.isSearch = false;
this.zcache.page.nowPage = 1;
this.storeGetMainList();
} else {
this.zcache.status.isSearch = true;
let postData = {
keyWords: this.zdata.searchPost.keywords,
pageNum: 1
};
ApiStoreSearch(postData)
.then(res => {
// let result = [];
// result.push(res.data.stallInfo);
// this.list.main = result;
// this.list.main = res.data.list;
this.list.main = res.data.pageInfo_adminStalls.list;
this.zcache.page.allItem = Number(
res.data.pageInfo_adminStalls.total
);
this.zcache.page.pageSize = res.data.pageInfo_adminStalls.pageSize;
this.zcache.page.nowPage = res.data.pageInfo_adminStalls.pageNum;
})
.catch(err => {});
}
},
storeGetMainList() {
// zlog("--->In Get API!");
let postData = {
pageNum: this.zcache.page.nowPage
};
ApiStoreGetMainList(postData).then(res => {
// this.list.main = res.data.pageInfo_adminStalls.list[0];
// this.list.man = res.data.pageInfo_principals.list[0];
this.list.main = res.data.pageInfo_adminStalls.list;
this.list.man = res.data.adminStall_principals;
this.transManIdToManName();
this.zcache.page.allItem = Number(res.data.pageInfo_adminStalls.total);
this.zcache.page.pageSize = res.data.pageInfo_adminStalls.pageSize;
this.zcache.page.nowPage = res.data.pageInfo_adminStalls.pageNum;
});
},
storePageIndexChange(inData) {
console.log("--->page: inData =", inData);
this.zcache.page.nowPage = inData;
if (this.zcache.status.isSearch) {
let postData = {
keyWords: this.zdata.searchPost.keywords,
pageNum: inData
};
ApiStoreSearch(postData)
.then(res => {
// let result = [];
// result.push(res.data.stallInfo);
// this.list.main = result;
// this.list.main = res.data.list;
this.list.main = res.data.pageInfo_adminStalls.list;
this.zcache.page.allItem = Number(
res.data.pageInfo_adminStalls.total
);
this.zcache.page.pageSize = res.data.pageInfo_adminStalls.pageSize;
this.zcache.page.nowPage = res.data.pageInfo_adminStalls.pageNum;
})
.catch(err => {});
} else {
this.zcache.page.nowPage = inData;
this.storeGetMainList();
}
},
storeGetStoreDetail(inData) {
let postData = {
isDetail: true,
stallId: inData
};
ApiStoreGetStoreDetail(postData)
.then(res => {
this.zdata.see.storeName = res.data.adminStall.name;
this.zdata.see.storeType = res.data.adminStall.type;
// this.zdata.see.storeFromBar = res.data.adminStall.shopId;
this.zdata.see.storeFromBar = res.data.shopName;
this.zdata.see.storeBossName = res.data.principal.userName;
this.zdata.see.storeDoorId = res.data.adminStall.signNum;
this.zdata.see.storeAddress = res.data.adminStall.location;
this.zdata.see.storeManList = res.data.clerks_unselected;
})
.catch(err => {});
this.zcache.status.seeDialog = true;
},
storeEditStore(inData) {
this.storeGetUnGroupManList();
this.zdata.editPost.id = Number(inData);
let postData = {
isDetail: true,
stallId: inData
};
ApiStoreGetStoreDetail(postData)
.then(res => {
this.zdata.edit = res;
let timeStoreTypeId = "";
if (res.data.adminStall.type == "普通") {
timeStoreTypeId = "0";
} else {
timeStoreTypeId = "1";
}
this.zdata.editPost.storeName = res.data.adminStall.name;
this.zdata.editPost.storeTypeId = timeStoreTypeId;
this.zdata.editPost.storeBossId = res.data.adminStall.principal;
this.zdata.editPost.storeFromBarId = res.data.adminStall.shopId;
this.zdata.editPost.storeDoorCode = res.data.adminStall.signNum;
this.zdata.editPost.storeAddress = res.data.adminStall.location;
})
.catch(err => {});
this.zcache.status.editDialog = true;
},
storeDelStore(inData) {
let delArr = [];
delArr.push(String(inData));
let postData = {
stallIds: delArr
};
ApiStoreDelStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "删除成功",
type: "success"
});
this.storeGetMainList();
} else {
this.$message({
message: "删除失败！",
type: "error"
});
}
})
.catch(err => {
this.$message({
message: "删除失败！",
type: "error"
});
});
},
listPick(inData) {
this.zlist.listPick = inData;
},
storeDelStoreArr() {
let delArr = this.zlist.listPick;
let delIdsArr = [];
for (let i = 0; i < delArr.length; i++) {
delIdsArr.push(String(delArr[i].id));
}
let postData = {
stallIds: delIdsArr
};
ApiStoreDelStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "删除成功",
type: "success"
});
this.storeGetMainList();
} else {
this.$message({
message: "删除失败！",
type: "error"
});
}
})
.catch(err => {
this.$message({
message: "删除失败！",
type: "error"
});
});
},
ztestman(inData) {
console.log("--->ManList =", this.zlist.unGroupMan);
console.log("--->PickId =", inData, " type =", typeof inData);
// this.zdata.newPost.storeBossId = Number(inData)
},
dialogNewClose() {
this.zcache.status.newDialog = false;
this.zdata.newPost = JSON.parse(
JSON.stringify(this.zdata.newPostDefault)
);
},
dialogNewCancel() {
this.zcache.status.newDialog = false;
this.zdata.newPost = JSON.parse(
JSON.stringify(this.zdata.newPostDefault)
);
},
dialogNewSubmit() {
// console.log('--->PostId =', this.zdata.newPost.storeBossId * 1)
let postData = {
name: this.zdata.newPost.storeName,
// stallType: Number(this.zdata.newPost.storeTypeId),
stallType: this.zdata.newPost.storeTypeId,
principal: this.zdata.newPost.storeBossId,
shopId: this.zdata.newPost.storeFromBarId,
signNum: this.zdata.newPost.storeDoorCode,
location: this.zdata.newPost.storeAddress
};
console.log("--->postData =", postData);
ApiStoreAddStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "添加成功",
type: "success"
});
this.zcache.status.newDialog = false;
this.zdata.newPost = JSON.parse(
JSON.stringify(this.zdata.newPostDefault)
);
this.storeSearch();
}
})
.catch(err => {});
},
dialogEditClose() {
this.zcache.status.editDialog = false;
this.zdata.editPost = JSON.parse(
JSON.stringify(this.zdata.editPostDefault)
);
},
dialogEditCancel() {
this.zcache.status.editDialog = false;
this.zdata.editPost = JSON.parse(
JSON.stringify(this.zdata.editPostDefault)
);
},
dialogEditSubmit() {
let postData = {
stallId: Number(this.zdata.editPost.id),
name: this.zdata.editPost.storeName,
type: String(this.zdata.editPost.storeTypeId),
principal: Number(this.zdata.editPost.storeBossId),
shopId: Number(this.zdata.editPost.storeFromBarId),
signNum: String(this.zdata.editPost.storeDoorCode),
location: this.zdata.editPost.storeAddress
};
ApiStoreEditStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "编辑成功",
type: "success"
});
this.zdata.editPost = JSON.parse(
JSON.stringify(this.zdata.editPostDefault)
);
this.zcache.status.editDialog = false;
this.storeGetMainList();
} else {
this.$message({
message: "编辑失败！",
type: "error"
});
}
})
.catch(err => {
this.$message({
message: "编辑失败！",
type: "error"
});
});
},
testButtonClick() {},
pagesSizeChange() {},
pagesNowPageChange() {},
setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
},
addStore() {
// this.$refs.addStore.addStoreDialog = true;
this.zcache.status.newDialog = true;
},
handleDetail() {
this.$refs.storeDetail.detailDialog = true;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
dialogSeeClose() {
this.zcache.status.seeDialog = false;
}
}
};
</script>
<style lang="scss" scoped>
.btn {
font-size: 14px;
font-weight: bold;
color: rgba(102, 102, 102, 1);
}
.main {
position: relative;
background-color: #fff;
box-sizing: border-box;
height: 100%;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
box-shadow: 0px 2px 4px 0px #ddd;
}
.buttons {
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark {
width: 88px;
height: 32px;
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.searchzone {
height: 40px;
width: auto;
min-width: 654px;
text-align: right;
}
.lists {
height: auto;
min-height: 70%;
width: 100%;
margin-top: 20px;
}
.listButtonRed {
color: #d0021b;
font-weight: bold;
}
.pages {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.title {
height: 48px;
line-height: 48px;
color: rgba(56, 56, 56, 1);
border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px;
}
</style>