Skip to content

O
office-web
Commit 805a2773 by xiaohai
Options

门店架构

parent 134f88bb
Showing with 270 additions and 72 deletions
src/views/contacts/storeFrame.vue
......@@ -18,66 +18,160 @@
<a class="J_edit a-href">编辑</a>
</span>
</div>
<div class="sf-right-button-box">
<el-button type="primary">添加门店</el-button>
<a><el-button>批量导入/导出</el-button></a>
<el-button type="danger" plain @click="delStores" :disabled="disabledDel">批量删除</el-button>
<el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
<div class="tab-div">
<el-radio-group v-model="tableView" @change="switchView">
<el-radio-button :label="1">门店视图</el-radio-button>
<el-radio-button :label="2">店员视图</el-radio-button>
</el-radio-group>
</div>
<el-table
height="495"
:data="storeList"
@selection-change="selectMember"
@row-click="linkToDetail"
>
<el-table-column
type="selection"
width="42"
></el-table-column>
<el-table-column
label="门店"
prop="storeName"
></el-table-column>
<el-table-column
label="代码"
prop="storeCode"
width="80"
></el-table-column>
<el-table-column
label="类型"
prop="storeType"
width="50"
>
<template slot-scope="scope">
{{typeArr[scope.row.storeType]}}
</template>
</el-table-column>
<el-table-column
label="地区"
prop="areaChainName"
></el-table-column>
<el-table-column
label="所属分组"
prop="groupChainName"
></el-table-column>
<el-table-column
label="状态"
prop="status"
width="80"
>
<template slot-scope="scope">
{{statusArr[scope.row.status]}}
</template>
</el-table-column>
<el-table-column
label="操作"
>
<template slot-scope="scope">
<a class="a-href" @click="editStore(scope.row)">编辑</a>
<a class="a-href" @click="delStore(scope.row)">删除</a>
</template>
</el-table-column>
</el-table>
<template v-if="tableView == 1">
<div class="sf-right-button-box">
<el-button type="primary">添加门店</el-button>
<a><el-button>批量导入/导出</el-button></a>
<el-button type="danger" plain @click="delStores" :disabled="disabledDel">批量删除</el-button>
<el-button class="J_show-children" size="small"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
</div>
<el-table
height="445"
:data="storeList"
@selection-change="selectMember"
@row-click="linkToDetail">
<el-table-column
type="selection"
width="42"
></el-table-column>
<el-table-column
label="门店"
prop="storeName"
width="140"
></el-table-column>
<el-table-column
label="代码"
prop="storeCode"
width="140"
></el-table-column>
<el-table-column
label="类型"
prop="storeType"
width="100"
>
<template slot-scope="scope">
{{typeArr[scope.row.storeType * 1 + 1]}}
</template>
</el-table-column>
<el-table-column
label="地区"
prop="areaChainName"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="所属分组"
prop="departName"
:show-overflow-tooltip="true"
></el-table-column>
<!-- <el-table-column
label="状态"
prop="status"
width="100"
>
<template slot-scope="scope">
{{statusArr[scope.row.status]}}
</template>
</el-table-column> -->
<el-table-column
label="操作"
width="120"
>
<template slot-scope="scope">
<a class="a-href m-r-20" @click="editStore(scope.row)">编辑</a>
<a class="a-href" @click="delStore(scope.row)">删除</a>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
:current-page="pageNumber"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<template v-else>
<div class="sf-right-button-box">
<el-select v-model="storeType" size="small">
<el-option
v-for="(type, index) in typeArr"
:key="type"
:label="type"
:value="index">
</el-option>
</el-select>
<el-select v-model="storeStatus" size="small">
<el-option label="全部状态" :value="0"></el-option>
<el-option label="正常" :value="1"></el-option>
<el-option label="停业整顿" :value="3"></el-option>
</el-select>
<el-button style="vertical-align: middle;" class="J_show-children" size="small"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
</div>
<el-table
height="445"
:data="storeList"
@row-click="linkToDetail">
<el-table-column
label="门店"
width="125"
>
<template slot-scope="scope">
<div>
<p class="m-b-10">{{scope.row.storeName}}</p>
<p><a class="a-href">新增门店</a></p>
</div>
</template>
</el-table-column>
<el-table-column
label="门店code"
prop="storeCode"
width="125"
></el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<ul class="diy-header">
<li class="name">姓名</li>
<li class="phone">手机号</li>
<li class="position">职位</li>
<li class="status">状态</li>
<li>操作</li>
</ul>
</template>
<template slot-scope="scope">
<ul>
<li v-for="clerk in scope.row.clerks" :key="clerk.employeeClerkId" class="clerk-obj-li">
<div class="clerk-name clerk-cell">
<el-radio :value="1" :label="clerk.isManager" @change="changeManager(scope.row, clerk)">{{clerk.name}}</el-radio>
<span class="manager" v-if="clerk.isManager == 1">店长</span>
</div>
<div class="clerk-cell clerk-phone">{{clerk.phoneNumber}}</div>
<div class="clerk-cell clerk-position">{{clerk.positionName}}</div>
<div class="clerk-cell clerk-status">
<div class="status-icon" :class="clerk.status == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</div>
<div class="clerk-cell clerk-handle">
<a class="a-href m-r-20">编辑</a>
<a class="a-href">删除</a>
</div>
</li>
</ul>
</template>
</el-table-column>
</el-table>
</template>
</div>
</div>
</template>
......@@ -93,27 +187,40 @@ export default {
return {
menuData: [],
searchResult: {},
loading: false,
loading: true,
groupInfo: {
groupName: "test",
departmentId: "0001"
},
total: 100,
showChildMember: false,
pageSize: 100,
showChildMember: false, // 是否显示子成员
pageSize: 20,
pageNumber: 1,
showType: 1,
storeList: [],
typeArr: ["自营", "联营", "代理(加盟)", "代销", "托管"],
statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"]
typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"],
selectedList: [],
tableView: 2,
storeType: 0,
storeStatus: 0
};
},
methods: {
handleSearchKey() {},
handleTreeSelection() {},
handleEmployeeSelection() {},
handleSizeChange() {},
handleCurrentChange() {},
switchView(view) {
console.log(view);
this.getStoreList();
},
editStore(store) {},
delStore(store) {},
setChildMemberShow() {
this.getStoreList();
},
getGroupData() {
let _this = this;
let params = {
......@@ -139,25 +246,35 @@ export default {
getStoreList() {
let _this = this;
let params = {
departmentId: _this.groupInfo.departmentId,
storeGroupId: _this.groupInfo.departmentId,
showChild: _this.showChildMember * 1,
showType: _this.showType,
showType: _this.tableView,
pageSize: _this.pageSize,
pageSize: _this.pageNumber,
pageNumber: _this.pageNumber,
status: 1
};
getRequest("/haoban-manage-web/store/findSimplePage", params)
.then(res => {
console.log(res, "storeList");
// _this.employeeList = res.data.result.list;
_this.total = res.data.result.total;
// _this.loading = false;
// _this.formatList(res.data.result.list);
_this.storeList = res.data.result.list;
_this.loading = false;
})
.catch(e => {
console.log(e, "error");
_this.loading = false;
});
},
changeManager(row, clerk) {
console.log(row, clerk);
row.clerks.some(per => {
if (per.isManager == 1) {
per.isManager = 0;
}
return per.isManager == 1;
});
clerk.isManager = 1;
},
/**
* 树形菜单选择项处理
*/
......@@ -168,11 +285,18 @@ export default {
this.getStoreList();
},
delStores() {},
selectMember() {},
selectMember(selection) {
this.selectedList = selection;
},
linkToDetail() {}
},
beforeMount() {
this.getGroupData();
},
computed: {
disabledDel() {
return this.selectedList.length < 1 ;
}
}
};
</script>
......@@ -206,9 +330,78 @@ export default {
}
}
}
.tab-div {
margin-bottom: 20px;
}
.sf-right-button-box {
padding: 8px 15px;
background: #EBEEF5;
font-size: 0;
.el-select--small {
width: 120px;
margin-right: 10px;
}
.el-button {
margin-right: 10px;
}
}
.pagination {
margin-top: 30px;
text-align: right;
}
.diy-header {
display: flex;
.name {
width: 130px;
}
.phone, .position {
width: 125px;
}
.status {
width: 100px;
}
}
.clerk-obj-li {
display: flex;
padding: 10px 0;
margin-bottom: 25px;
line-height: 32px;
&:last-child {
margin-bottom: 0;
}
.clerk-name {
width: 130px;
.manager {
display: inline-block;
width: 30px;
height: 15px;
line-height: 16px;
vertical-align: middle;
text-align: center;
background:rgba(247,203,39,1);
border-radius:2px;
color: #fff;
font-size: 10px;
}
}
.clerk-phone, .clerk-position {
width: 125px;
}
.clerk-status {
width: 100px;
.status-icon {
width: 34px;
height: 32px;
line-height: 32px;
text-align: center;
background: #ECF5FF;
border: 1px solid #D9ECFF;
border-radius: 4px;
&.is-active {
color: #409EFF;
}
}
}
}
}
}
......
static/css/public.css
......@@ -338,7 +338,12 @@ input:focus {
.m-r-10 {
margin-right: 10px;
}
.m-r-20 {
margin-right: 20px;
}
.m-b-10 {
margin-bottom: 10px;
}
.font-0 .el-form-item__content, .dialog-footer {
font-size: 0;
}
......
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 to comment