Skip to content

O
office-web
Commit 217676e8 by xiaohai
Options

门店详情

parent 16b34686
Showing with 417 additions and 23 deletions
src/components/contacts/searchMenu.vue
......@@ -19,23 +19,55 @@
</span>
</el-tree>
</div>
<div class="search-result-container" v-if="searchResultShow">
<ul class="search-result-ul" v-if="departmentList.length > 0">
<p class="title">部门列表</p>
<li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}}
</li>
</ul>
<ul class="search-result-ul" v-if="employeeList.length > 0">
<p class="title">人员列表</p>
<li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
<i class="iconfont icon-chengyuan"></i>
{{employee.name}}
<span class="from-group">{{employee.departmentName}}</span>
</li>
</ul>
<p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
<div class="search-result-container m-t-15" v-if="searchResultShow">
<template v-if="storeFrame">
<template v-for="(brand, index) in brandList" v-if="brand.departmentList.length > 0 || brand.storeList.length > 0 || brand.searchList.length > 0">
<div :key="brand.topDepartment.brandId + '_' + index">
<p class="brand-title">{{brand.topDepartment.name}}</p>
<ul class="search-result-ul" v-if="brand.departmentList.length > 0">
<p class="title store-frame-title">分组列表</p>
<li class="group-item items" v-for="(department, index) in brand.departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}}
</li>
</ul>
<ul class="search-result-ul" v-if="brand.storeList.length > 0">
<p class="title store-frame-title">门店列表</p>
<li class="group-item items" v-for="(store, index) in brand.storeList" :key="index+'_'+store.storeGroupId" @click="handleStoreClick(store)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{store.storeName}}
</li>
</ul>
<ul class="search-result-ul" v-if="brand.searchList.length > 0">
<p class="title store-frame-title">人员列表</p>
<li class="person-item items" v-for="(employee, index) in brand.searchList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
<i class="iconfont icon-chengyuan"></i>
{{employee.name}}
<span class="from-group">{{employee.departmentName}}</span>
</li>
</ul>
</div>
</template>
<p class="no-data-tip" v-if="brandList.length < 1">暂无数据</p>
</template>
<template v-else>
<ul class="search-result-ul" v-if="departmentList.length > 0">
<p class="title">部门列表</p>
<li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}}
</li>
</ul>
<ul class="search-result-ul" v-if="employeeList.length > 0">
<p class="title">人员列表</p>
<li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
<i class="iconfont icon-chengyuan"></i>
{{employee.name}}
<span class="from-group">{{employee.departmentName}}</span>
</li>
</ul>
<p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
</template>
</div>
</div>
</template>
......@@ -51,6 +83,10 @@
searchResult: {
type: Object,
required: true
},
storeFrame: {
type: Boolean,
default: false
}
},
data() {
......@@ -82,21 +118,26 @@
return false;
}
this.searchResultShow = true;
// console.log(this.searchKey);
this.$emit("handleSearchKey", this.searchKey);
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
this.$emit("handleTreeSelection", obj, node, false);
this.$emit("handleTreeSelection", obj, node, 'node');
},
/**
* 搜索结果中选人
*/
selectEmployee(person) {
this.$emit("handleEmployeeSelection", person, true);
this.$emit("handleEmployeeSelection", person, 'employee');
},
/**
* 搜索结果中选门店
*/
handleStoreClick(store) {
this.$emit("handleStoreSelection", store, 'store');
},
/**
* 按层级排序部门
......@@ -180,11 +221,17 @@
} else {
return [];
}
},
brandList() {
if (this.searchResult.brandList) {
return this.searchResult.brandList;
} else {
return [];
}
}
},
watch: {
treeData(newArr, old) {
// console.log(old, newArr, "newarr");
this.sortGroupByLevel(newArr);
}
}
......@@ -238,12 +285,19 @@
color: #fff;
}
}
.brand-title {
padding: 15px;
color: #303133;
}
.search-result-ul {
font-size: 14px;
color: #606266;
.title {
padding: 15px;
color: #303133;
&.store-frame-title {
background:rgba(228,231,237,1);
}
}
li.items {
padding: 15px;
......
src/components/contacts/storeFrame/clerkView.vue 0 → 100644
<template>
<div>
<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
ref="clerkViewTable"
class="diy-table"
height="445"
:data="tableData">
<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>
</div>
</template>
<script>
export default {
name: "clerkView",
props: {
tableData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
storeType: 0,
typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
storeStatus: 0,
showChildMember: false,
};
},
methods: {
setChildMemberShow() {
this.$emit("setChildMemberShow", this.showChildMember);
},
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;
}
}
};
</script>
src/components/contacts/storeFrame/storeInfo.vue 0 → 100644
<template>
<div class="store-info">
<div class="info-cell">
<p class="title">门店信息</p>
<el-form
class="store-info-form info-form"
label-width="70px">
<el-form-item label="门店名称" prop="name">
<el-input v-model="storeInfo.name">
<template slot="suffix">{{storeInfo.name.length}}/20</template>
</el-input>
</el-form-item>
<el-form-item label="所属分组" prop="group">
<el-input v-model="storeInfo.name">
<i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
</el-input>
</el-form-item>
<el-form-item label="门店图片" prop="imageUrls">
<ul class="img-list">
<li class="img-li" v-for="(img, index) in storeInfo.imageUrls.split(',')" :key="index + '_' + img ">
<img :src="img">
</li>
<li class="img-li J_add-img">
<i class="el-icon-plus"></i>
<p class="tip">图片规格640*340像素</p>
</li>
</ul>
</el-form-item>
<el-form-item label="联系电话" prop="phoneNumber">
<el-input v-model="storeInfo.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="营业时间" prop="phoneNumber">
<el-time-picker
is-range
v-model="storeInfo.operateTime"
:picker-options="{
start: '00:00',
step: '00:01',
end: '23:59'
}"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "storeInfo",
data() {
return {
storeInfo: {
name: "",
group: "",
imageUrls: "https://www.foodnext.net/dispPageBox/getFile/GetImg.aspx?FileLocation=%2FPJ-FOODNEXT%2FFiles%2F&FileName=photo-03817-i.jpg,https://video.nextmag.com.tw/photo/2015/04/19/00bOOOPIC2b_1429452213732_209232_ver1.0.jpg,https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2017/12/28/20171228-052047_U9180_M363881_1edc.jpg?itok=Swxr8yZb,https://www.yw11.com/uploads/allimg/161224/16-16122413133KM.jpg",
phoneNumber: 18758198024,
operateTime: []
}
};
}
};
</script>
<style lang="scss">
.store-info {
flex: 1;
.info-cell {
margin-bottom: 24px;
background: #fff;
padding-bottom: 24px;
>.title {
line-height: 55px;
text-indent: 32px;
border-bottom: 1px solid #E4E7ED;
}
.store-info-form {
padding: 24px 60px 0;
.el-input {
width: 500px;
}
.img-list {
display: flex;
flex-wrap: wrap;
width: 500px;
.img-li {
width:148px;
height:148px;
border-radius:6px;
margin-right: 8px;
margin-bottom: 10px;
&.J_add-img {
position: relative;
text-align: center;
line-height: 150px;
border:1px solid rgba(192,204,218,1);
font-size: 23px;
color: #909399;
.tip {
position: absolute;
font-size: 13px;
bottom: -23px;
height: 13px;
line-height: 13px;
text-align: center;
width: 100%;
}
}
img {
width: 100%;
height: 100%;
border-radius:6px;
}
}
}
}
}
}
</style>
src/components/contacts/storeFrame/storeView.vue 0 → 100644
<template>
<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" 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
ref="table1"
height="445"
:data="tableData"
@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="操作"
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>
</template>
<script>
export default {
name: "storeView",
props: {
tableData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
selectedList: [],
showChildMember: false, // 是否显示子成员
typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"]
};
},
methods: {
delStores() {},
selectMember(selection) {
this.selectedList = selection;
},
setChildMemberShow() {
this.$emit("setChildMemberShow", this.showChildMember);
},
linkToDetail() {},
editStore() {},
delStore() {}
},
computed: {
disabledDel() {
return this.selectedList.length < 1 ;
}
}
};
</script>
<style lang="scss">
</style>
src/views/contacts/administrativeFrame.vue
......@@ -7,7 +7,7 @@
:searchResult="searchResult"
@handleEmployeeSelection="handleEmployeeSelection">
</search-menu>
<employee-info v-if="showEmployee" :info="selectedEmployee"></employee-info>
<employee-info v-if="showEmployee == 'employee'" :info="selectedEmployee"></employee-info>
<div class="af-right-container"
v-loading="loading"
v-else>
......@@ -98,7 +98,7 @@
})
.catch(e => {
console.log(e, "error");
})
});
},
/**
......
static/css/public.css
......@@ -332,6 +332,9 @@ input:focus {
.m-t-10 {
margin-top: 10px;
}
.m-t-15 {
margin-top: 15px;
}
.m-t-30 {
margin-top: 30px;
}
......
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