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 @@ ...@@ -18,66 +18,160 @@
<a class="J_edit a-href">编辑</a> <a class="J_edit a-href">编辑</a>
</span> </span>
</div> </div>
<div class="sf-right-button-box"> <div class="tab-div">
<el-button type="primary">添加门店</el-button> <el-radio-group v-model="tableView" @change="switchView">
<a><el-button>批量导入/导出</el-button></a> <el-radio-button :label="1">门店视图</el-radio-button>
<el-button type="danger" plain @click="delStores" :disabled="disabledDel">批量删除</el-button> <el-radio-button :label="2">店员视图</el-radio-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> </el-radio-group>
</div> </div>
<el-table <template v-if="tableView == 1">
height="495" <div class="sf-right-button-box">
:data="storeList" <el-button type="primary">添加门店</el-button>
@selection-change="selectMember" <a><el-button>批量导入/导出</el-button></a>
@row-click="linkToDetail" <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>
<el-table-column </div>
type="selection" <el-table
width="42" height="445"
></el-table-column> :data="storeList"
<el-table-column @selection-change="selectMember"
label="门店" @row-click="linkToDetail">
prop="storeName" <el-table-column
></el-table-column> type="selection"
<el-table-column width="42"
label="代码" ></el-table-column>
prop="storeCode" <el-table-column
width="80" label="门店"
></el-table-column> prop="storeName"
<el-table-column width="140"
label="类型" ></el-table-column>
prop="storeType" <el-table-column
width="50" label="代码"
> prop="storeCode"
<template slot-scope="scope"> width="140"
{{typeArr[scope.row.storeType]}} ></el-table-column>
</template> <el-table-column
</el-table-column> label="类型"
<el-table-column prop="storeType"
label="地区" width="100"
prop="areaChainName" >
></el-table-column> <template slot-scope="scope">
<el-table-column {{typeArr[scope.row.storeType * 1 + 1]}}
label="所属分组" </template>
prop="groupChainName" </el-table-column>
></el-table-column> <el-table-column
<el-table-column label="地区"
label="状态" prop="areaChainName"
prop="status" :show-overflow-tooltip="true"
width="80" ></el-table-column>
> <el-table-column
<template slot-scope="scope"> label="所属分组"
{{statusArr[scope.row.status]}} prop="departName"
</template> :show-overflow-tooltip="true"
</el-table-column> ></el-table-column>
<el-table-column <!-- <el-table-column
label="操作" label="状态"
> prop="status"
<template slot-scope="scope"> width="100"
<a class="a-href" @click="editStore(scope.row)">编辑</a> >
<a class="a-href" @click="delStore(scope.row)">删除</a> <template slot-scope="scope">
</template> {{statusArr[scope.row.status]}}
</el-table-column> </template>
</el-table> </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>
</div> </div>
</template> </template>
...@@ -93,27 +187,40 @@ export default { ...@@ -93,27 +187,40 @@ export default {
return { return {
menuData: [], menuData: [],
searchResult: {}, searchResult: {},
loading: false, loading: true,
groupInfo: { groupInfo: {
groupName: "test", groupName: "test",
departmentId: "0001" departmentId: "0001"
}, },
total: 100, total: 100,
showChildMember: false, showChildMember: false, // 是否显示子成员
pageSize: 100, pageSize: 20,
pageNumber: 1, pageNumber: 1,
showType: 1, showType: 1,
storeList: [], storeList: [],
typeArr: ["自营", "联营", "代理(加盟)", "代销", "托管"], typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"] statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"],
selectedList: [],
tableView: 2,
storeType: 0,
storeStatus: 0
}; };
}, },
methods: { methods: {
handleSearchKey() {}, handleSearchKey() {},
handleTreeSelection() {}, handleTreeSelection() {},
handleEmployeeSelection() {}, handleEmployeeSelection() {},
handleSizeChange() {},
handleCurrentChange() {},
switchView(view) {
console.log(view);
this.getStoreList();
},
editStore(store) {}, editStore(store) {},
delStore(store) {}, delStore(store) {},
setChildMemberShow() {
this.getStoreList();
},
getGroupData() { getGroupData() {
let _this = this; let _this = this;
let params = { let params = {
...@@ -139,25 +246,35 @@ export default { ...@@ -139,25 +246,35 @@ export default {
getStoreList() { getStoreList() {
let _this = this; let _this = this;
let params = { let params = {
departmentId: _this.groupInfo.departmentId, storeGroupId: _this.groupInfo.departmentId,
showChild: _this.showChildMember * 1, showChild: _this.showChildMember * 1,
showType: _this.showType, showType: _this.tableView,
pageSize: _this.pageSize, pageSize: _this.pageSize,
pageSize: _this.pageNumber, pageNumber: _this.pageNumber,
status: 1 status: 1
}; };
getRequest("/haoban-manage-web/store/findSimplePage", params) getRequest("/haoban-manage-web/store/findSimplePage", params)
.then(res => { .then(res => {
console.log(res, "storeList");
// _this.employeeList = res.data.result.list;
_this.total = res.data.result.total; _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 => { .catch(e => {
console.log(e, "error"); console.log(e, "error");
_this.loading = false; _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 { ...@@ -168,11 +285,18 @@ export default {
this.getStoreList(); this.getStoreList();
}, },
delStores() {}, delStores() {},
selectMember() {}, selectMember(selection) {
this.selectedList = selection;
},
linkToDetail() {} linkToDetail() {}
}, },
beforeMount() { beforeMount() {
this.getGroupData(); this.getGroupData();
},
computed: {
disabledDel() {
return this.selectedList.length < 1 ;
}
} }
}; };
</script> </script>
...@@ -206,9 +330,78 @@ export default { ...@@ -206,9 +330,78 @@ export default {
} }
} }
} }
.tab-div {
margin-bottom: 20px;
}
.sf-right-button-box { .sf-right-button-box {
padding: 8px 15px; padding: 8px 15px;
background: #EBEEF5; 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 { ...@@ -338,7 +338,12 @@ input:focus {
.m-r-10 { .m-r-10 {
margin-right: 10px; margin-right: 10px;
} }
.m-r-20 {
margin-right: 20px;
}
.m-b-10 {
margin-bottom: 10px;
}
.font-0 .el-form-item__content, .dialog-footer { .font-0 .el-form-item__content, .dialog-footer {
font-size: 0; 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