<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 - 312px)"
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-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="scope">
<el-button type="text" @click="orgMainSee(scope.row.id)" class="btn">详情</el-button>
<el-button type="text" @click="orgMainEdit(scope.row.id)" class="btn">编辑</el-button>
<el-button
type="text"
@click="orgMainDel(scope.row.id)"
class="listButtonRed"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<el-pagination
@current-change="orgMainPageChange"
:current-page="zcache.page.nowPage"
:page-size="zcache.page.pageSize"
layout="total, prev, pager, next, jumper"
:total="zcache.page.allItem"
></el-pagination>
</div>
<!-- 对话框区 -->
<div class="dialogs">
<el-dialog
title="新建组织"
:visible.sync="zcache.status.dialog.new"
width="65%"
:before-close="orgNewClose"
>
<div class="dialogMain">
<el-form :model="zdata.new.post" label-width="auto" ref="orgNewForm">
<el-form-item label="名称:" prop="name">
<el-input
size="small"
v-model="zdata.new.post.name"
style="width:240px;"
:placeholder="zcache.new.nameTip"
/>
</el-form-item>
<!-- <el-form-item label="类型:" prop="type">
<el-select
size="small"
v-model="zdata.new.post.typeId"
placeholder="请选择品牌类型"
style="width:240px"
>
<el-option
v-for="item in ztrans.orgType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>-->
<!-- <el-form-item v-if="zdata.new.post.typeId == '2'" label="所属门店:" prop="type">
<el-select
size="small"
v-model="zdata.new.post.typeId"
placeholder="请选择品牌类型"
style="width:240px"
>
<el-option
v-for="item in ztrans.orgType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="所属上级:" prop="from">
<el-tree
:data="ztrans.org"
show-checkbox
default-expand-all
node-key="id"
:props="ztrans.new.from"
@node-click="orgNewFromPick"
></el-tree>
</el-form-item>
<el-form-item label="品牌负责人:" prop="people"></el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="orgNewCancel">取 消</el-button>
<el-button type="primary" @click="orgNewSubmit" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import {} from "@api/in/org";
const zlog = console.log.bind(console);
export default {
components: {},
data() {
return {
zcache: {
status: {
dialog: {
new: false,
see: false,
edit: false
}
},
search: {
keywordTip: "请输入关键词"
},
page: {
pageSize: 10,
allItem: 9,
nowPage: 1
},
new: {
nameTip: "请输入名称"
}
},
ztrans: {
new: {
from: {
label: "name",
children: "children",
disabled: true,
isLeaf: true,
}
},
orgS: [
{
id: 1001,
name: 'A',
children: [
{
id: 2001,
name: 'A1',
}
]
}
],
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: []
}
]
}
]
}
],
orgType: [
{
id: "01",
name: "门店"
},
{
id: "02",
name: "商场"
},
{
id: "03",
name: "柜组"
},
{
id: "04",
name: "品牌店"
}
]
},
zdata: {
search: {
post: {
keyword: ""
},
default: {
keyword: ""
}
},
new: {
post: {
name: "",
typeId: "",
typeName: "",
fromType1Id: "",
formType1Name: "",
fromType2Id: "",
formType2Name: "",
fromType3Id: "",
formType3Name: "",
fromType4Id: "",
formType4Name: "",
bossId: "",
bossName: ""
},
default: {
name: "",
typeId: "",
typeName: "",
fromType1Id: "",
formType1Name: "",
fromType2Id: "",
formType2Name: "",
fromType3Id: "",
formType3Name: "",
fromType4Id: "",
formType4Name: "",
bossId: "",
bossName: ""
}
}
},
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: {},
created() {},
mounted() {},
methods: {
orgMainAdd() {},
orgMainDels() {},
orgMainSearch() {},
orgMainPageChange() {},
orgMainSee(inData) {
this.zcache.status.dialog.new = true;
},
orgMainEdit() {},
orgMainDel() {},
orgNewClose() {
this.zcache.status.dialog.new = false;
this.zdata.new.post = JSON.parse(JSON.stringify(this.zdata.new.default));
},
orgNewFromPick() {},
orgNewCancel() {
this.zcache.status.dialog.new = false;
this.zdata.new.post = JSON.parse(JSON.stringify(this.zdata.new.default));
},
orgNewSubmit() {
this.zcache.status.dialog.new = false;
this.zdata.new.post = JSON.parse(JSON.stringify(this.zdata.new.default));
}
}
};
</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>