Skip to content

O
office-web
Commit a6b3b5e4 by xiaohai
Options

store

parent 0f58bd57
Showing with 1347 additions and 340 deletions
src/components/common/vueSelectStore.vue
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<div class="input-container"> <div class="input-container">
<el-input v-model="searchText" placeholder="请输入内容"></el-input> <el-input v-model="searchText" placeholder="请输入内容"></el-input>
</div> </div>
<div class="select-div"> <div class="select-div" style="width: 100%;">
<el-select v-model="brandSelection" placeholder="请选择品牌" @change="selectBrand" style="width: 100%;"> <el-select v-model="brandSelection" placeholder="请选择品牌" @change="selectBrand" style="width: 100%;margin-top:20px;">
<el-option <el-option
v-for="(item, index) in brands" v-for="(item, index) in brands"
:key="item.id" :key="item.id"
...@@ -265,6 +265,7 @@ ...@@ -265,6 +265,7 @@
*/ */
submitSelected() { submitSelected() {
this.$emit("handleSelectedList", this.selectedList); this.$emit("handleSelectedList", this.selectedList);
this.treeSet.dialogVisible = false;
}, },
/** /**
* 选择品牌 * 选择品牌
......
src/components/contacts/employeeInfo.vue
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<p class="title">员工信息</p> <p class="title">员工信息</p>
<el-form <el-form
class="employee-info-form" class="employee-info-form"
:rules="rules"
:model="info"
label-width="70px" label-width="70px"
> >
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
...@@ -12,8 +14,8 @@ ...@@ -12,8 +14,8 @@
<el-form-item label="手机号" prop="phoneNumber"> <el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="info.phoneNumber"></el-input> <el-input v-model="info.phoneNumber"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="部门" prop="departmentName"> <el-form-item label="部门" prop="departmentId">
<el-input v-model="info.departmentName"></el-input> <el-input v-model="info.departmentName" @focus="callGroupSelector" :disabled="disabled" suffix-icon="el-icon-arrow-down"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="职位" prop="positionName"> <el-form-item label="职位" prop="positionName">
<el-input v-model="info.positionName"></el-input> <el-input v-model="info.positionName"></el-input>
...@@ -33,29 +35,129 @@ ...@@ -33,29 +35,129 @@
</el-switch> </el-switch>
</div> </div>
</div> </div>
<vue-select-employee ref="parentSelector" :treeSet="treeSet" @handleSelectedList="handleSelectedList" :treeData="treeData"></vue-select-employee>
</div> </div>
</template> </template>
<script> <script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import vueSelectEmployee from "components/common/vueSelectEmployee";
export default { export default {
name: "employeeInfo", name: "employeeInfo",
components: {
vueSelectEmployee
},
props: { props: {
info: { // info: {
type: Object, // type: Object,
required: true // required: true
// }
isNew: {
type: Boolean,
default: false
} }
}, },
data() { data() {
let validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入手机号'));
} else {
let reg = /^1[34578]\d{9}$/;
if (!reg.test(value)) {
return callback(new Error("手机号格式不正确"));
}
}
}
return { return {
info: {
name: "",
phoneNumber: "",
departmentId: "",
departmentName: "",
managerMode: false
},
treeData: {},
disabled: true,
employeeInfo: { employeeInfo: {
name: "", name: "",
phoneNumber: "", phoneNumber: "",
departmentName: "" departmentName: ""
},
rules: {
name: [
{ required: true, message: '请输入员工姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
phoneNumber: [
{ required:true, validator: validatePhone, trigger: "blur"}
],
departmentId: [
{ required: true, message: '请选择部门', trigger: 'change' }
]
},
treeSet: {
isSelectPerson: false,
dialogVisible: false,
isSingle: true // 是否单选
} }
}; };
}, },
methods: { methods: {
getGroupData() {
let _this = this;
let params = {
isStoreGroup: 0
};
getRequest("/haoban-manage-web/dept/deptListForCompany", params)
.then(res => {
let treeData = [];
let personData = [];
if (res.data.errorCode == 1) {
treeData = res.data.result.departmentList || [];
personData = res.data.result.searchList || []
}
// _this.formatGroupData(treeData, personData);
_this.treeData = {
treeData,
personData
};
_this.disabled = false;
})
.catch(e => {
console.log(e, "error");
});
},
switchManagerMode() { switchManagerMode() {
console.log(this.info.managerMode); console.log(this.info.managerMode);
},
callGroupSelector() {
this.treeSet.dialogVisible = true;
},
handleSelectedList(obj) {
console.log(obj);
this.info.departmentId = obj.id;
this.info.departmentName = obj.label;
// console.log(this.info);
},
getEmployInfo() {
let that = this;
let params = {
id: that.$route.query.employeeClerkId
};
getRequest("/haoban-manage-web/emp/findOne", params)
.then(res => {
console.log(res, "employeeDetail");
that.info = res.data.result;
that.info.managerMode = !!res.data.result.managerMode;
})
.catch(e => {
console.log(e, "error");
});
}
},
beforeMount() {
this.getGroupData();
if (!this.isNew) {
this.getEmployInfo();
} }
} }
}; };
......
src/components/contacts/employeeList.vue
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
*/ */
linkToDetail(row) { linkToDetail(row) {
console.log(row); console.log(row);
window.open("#/employee?employeeClerkId="+row.employeeClerkId); window.location.href = "#/employee?employeeClerkId="+row.employeeClerkId;
} }
} }
}; };
......
src/components/contacts/storeFrame/clerkInfo.vue
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
<el-form-item label="手机号" prop="phoneNumber"> <el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="clerkInfo.phoneNumber"></el-input> <el-input v-model="clerkInfo.phoneNumber"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="门店"> <el-form-item label="门店" prop="storeName">
<el-input v-model="clerkInfo.storeName"></el-input> <el-input v-model="clerkInfo.storeName" @focus="callSelector"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="code" prop="code"> <el-form-item label="code" prop="code">
<el-input v-model="clerkInfo.code"></el-input> <el-input v-model="clerkInfo.code"></el-input>
...@@ -23,22 +23,20 @@ ...@@ -23,22 +23,20 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="btn-box"> <div class="btn-box">
<el-button type="primary" @click="save">保存</el-button> <el-button type="primary" @click="saveFn">保存</el-button>
<el-button type="primary" @click="save(true)">保存并继续添加</el-button> <el-button type="primary" @click="saveFn(1)">保存并继续添加</el-button>
<el-button>取消</el-button> <el-button @click="cancel">取消</el-button>
</div> </div>
<vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList"></vue-select-store>
</div> </div>
</template> </template>
<script> <script>
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default { export default {
name: "clerk-info-form", name: "clerk-info-form",
props: { components: {
clerkInfo: { vueSelectStore
type: Object,
default() {
return {};
}
}
}, },
data() { data() {
let validatePhone = (rule, value, callback) => { let validatePhone = (rule, value, callback) => {
...@@ -60,6 +58,7 @@ export default { ...@@ -60,6 +58,7 @@ export default {
phoneNumber: [ phoneNumber: [
{ required:true, validator: validatePhone, trigger: "blur"} { required:true, validator: validatePhone, trigger: "blur"}
], ],
storeName: [{required: true, message: "请选择门店", trigger: "blur"}],
code: [ code: [
{ required: true, message: "请输入code", trigger: "blur" }, { required: true, message: "请输入code", trigger: "blur" },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
...@@ -67,17 +66,88 @@ export default { ...@@ -67,17 +66,88 @@ export default {
positionName: [ positionName: [
{ required: true, message: "请输入店员职位", trigger: "blur" } { required: true, message: "请输入店员职位", trigger: "blur" }
] ]
},
clerkInfo: {
storeName: "",
storeId: "",
managerMode:false
} }
}; };
}, },
methods: { methods: {
save(goahead) { saveFn(goahead) {
this.$refs.clerk_info.validate((valid) => { let that = this;
console.log(valid, "valid"); let ok = true;
if (valid) { this.$refs["clerk_info"].validate((valid) => {
if (!valid) {
ok = false;
} }
}); });
if (ok) {
that.addEmployee(this.clerkInfo, goahead);
}
},
callSelector() {
this.$refs.storeSelector.treeSet.dialogVisible = true;
},
handleSelectedList(list) {
this.clerkInfo.storeName = list[0].label;
this.clerkInfo.storeId = list[0].id;
},
/**
* 新增员工
*/
addEmployee(info, contin) {
let that = this;
let params = {
name: info.name,
isClerk: 1,
phoneNumber: info.phoneNumber,
positionName: info.positionName,
storeId: info.storeId,
managerMode: info.managerMode*1,
code: info.code
};
console.log(info, params);
getRequest("/haoban-manage-web/emp/add", params)
.then(res => {
if (res.data.errorCode == 1) {
that.$message.success({
message: "操作成功"
});
if (contin == 1) {
that.clerkInfo = {
name: "",
isClerk: 1,
phoneNumber: "",
positionName: "",
storeId: "",
managerMode: false,
code: ""
};
} else {
window.history.go(-1);
}
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
},
cancel() {
this.$confirm(" 是否确认取消，取消后当前页面信息将丢失 ？", "提示", {
type: "warning"
}).then(() => {
window.history.go(-1);
}).catch(e => {
console.log(e);
});
} }
} }
}; };
...@@ -87,9 +157,11 @@ export default { ...@@ -87,9 +157,11 @@ export default {
flex: 1; flex: 1;
padding: 24px 35px 48px; padding: 24px 35px 48px;
background: #fff; background: #fff;
.add-clerk-form {
.el-input { .el-input {
width: 380px; width: 380px;
} }
}
.btn-box { .btn-box {
padding-left: 80px; padding-left: 80px;
} }
......
src/components/contacts/storeFrame/clerkView.vue
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
<p class="m-b-10">{{scope.row.storeName}}</p> <p class="m-b-10">{{scope.row.storeName}}</p>
<p><a class="a-href" :href="'#/addClerk?storeId='+scope.row.storeId" target="_blank">新增店员</a></p> <p><a class="a-href" :href="'#/addClerk?storeId='+scope.row.storeId">新增店员</a></p>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
......
src/components/contacts/storeFrame/storeInfo.vue
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
label-width="90px"> label-width="90px">
<el-form-item label="门店名称" prop="name"> <el-form-item label="门店名称" prop="name">
<el-input v-model="storeInfo.storeName"> <el-input v-model="storeInfo.storeName">
<template slot="suffix">{{storeInfo.storeName.length}}/20</template> <template slot="suffix">{{storeInfo.storeName ? storeInfo.storeName.length : 0}}/20</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="所属分组" prop="group"> <el-form-item label="所属分组" prop="group">
<el-input v-model="storeInfo.groupChainName"> <el-input v-model="storeInfo.groupChainName" @focus="callSelector">
<i slot="suffix" class="el-input__icon el-icon-arrow-down"></i> <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
<vue-gic-upload-image <vue-gic-upload-image
projectName="gic-web" projectName="gic-web"
wxFlag="0" wxFlag="0"
actionUrl="/api-plug/upload-img" actionUrl="/haoban-manage-web/upload-img"
:imageList="(storeInfo.imageUrls || '').split(',')" :imageList="imgs"
:limitW="500" :limitW="500"
:limitH="500" :limitH="500"
:maxImageLength="5" :maxImageLength="5"
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<el-form-item label="门店地址"> <el-form-item label="门店地址">
<vue-office-area :areaOptions="areaOptions" @selected="selected" projectName="haoban-web" postUrl="/api-admin/dict-district-list"></vue-office-area> <vue-office-area :areaOptions="areaOptions" @selected="selected" projectName="haoban-web" postUrl="/api-admin/dict-district-list"></vue-office-area>
<el-input v-model="areaOptions.postAddress"> <el-input v-model="areaOptions.postAddress">
<template slot="suffix">{{(storeInfo.postAddress || "").length}}/50</template> <template slot="suffix">{{(areaOptions.postAddress || "").length}}/50</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="GPS坐标"> <el-form-item label="GPS坐标">
...@@ -101,8 +101,8 @@ ...@@ -101,8 +101,8 @@
</el-form-item> </el-form-item>
<el-form-item label="店长性别"> <el-form-item label="店长性别">
<el-radio-group v-model="storeInfo.managerSex"> <el-radio-group v-model="storeInfo.managerSex">
<el-radio label="男"></el-radio> <el-radio label="1">男</el-radio>
<el-radio label="女"></el-radio> <el-radio label="2">女</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="店长代码"> <el-form-item label="店长代码">
...@@ -136,32 +136,86 @@ ...@@ -136,32 +136,86 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="handle-area">
<el-button type="primary" @click="save">保存</el-button>
</div>
<vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList"></vue-select-store>
</div> </div>
</template> </template>
<script> <script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import vueSelectStore from "components/common/vueSelectStore";
export default { export default {
name: "storeInfo", name: "store-detail",
components: {
vueSelectStore
},
props: { props: {
storeInfo: { storeInfo: {
type: Object, type: Object,
default() { default() {
return {}; return {
groupChainName: ""
};
} }
} }
}, },
data() {
return {
areaChainName: "",
location: ""
};
},
methods: { methods: {
callSelector() {
this.$refs.storeSelector.treeSet.dialogVisible = true;
},
handleSelectedList(list) {
console.log(list);
this.storeInfo.groupChainName = list[0].label;
this.storeInfo.storeGroupId = list[0].id;
},
selected(val) { selected(val) {
console.log(val); console.log(val);
let that = this;
that.areaChainName = val.provinceName + "/" + val.cityName + "/" + val.countryName;
}, },
uploadOnSuccess() {}, uploadOnSuccess() {},
sortImg() {}, sortImg() {},
deleteImage() {} deleteImage() {},
save() {
let that = this;
let locationArr = that.location.split(",");
that.storeInfo.longitude = locationArr[0];
that.storeInfo.latitude = locationArr.length !== 2 ? "" : locationArr[1];
that.storeInfo.postAddress = that.areaOptions.postAddress;
that.storeInfo.managerPhone = that.storeInfo.managerPhoneNumber;
that.storeInfo.areaChainName = that.areaChainName;
let params = that.storeInfo;
console.log(params, "params");
getRequest("/haoban-manage-web/store/update", params)
.then(res => {
console.log(res, "eidt result");
if (res.data.errorCode == 1) {
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
}
}, },
computed: { computed: {
areaOptions() { areaOptions() {
let ths = this; let ths = this;
let arr = ths.storeInfo.areaChainName.split("/"); let arr = (ths.storeInfo.areaChainName || "").split("/");
return { return {
provinceName: arr[0], provinceName: arr[0],
provinceId: ths.provinceId, provinceId: ths.provinceId,
...@@ -171,90 +225,20 @@ export default { ...@@ -171,90 +225,20 @@ export default {
countyId: ths.countyId countyId: ths.countyId
}; };
}, },
location() { imgs() {
return this.storeInfo.longitude + "," + this.storeInfo.latitude; console.log(this.storeInfo.imageUrl, !!this.storeInfo.imageUrl);
return !this.storeInfo.imageUrl ? [] : this.storeInfo.imageUrl.split(",");
}
},
watch: {
$route(to) {
console.log(to, "to");
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.store-info {
flex: 1;
height: 690px;
overflow: auto;
.info-cell {
margin-bottom: 24px;
background: #fff;
padding-bottom: 24px;
>.title {
line-height: 55px;
text-indent: 32px;
border-bottom: 1px solid #E4E7ED;
}
.info-form {
padding: 24px 60px 0;
.el-form-item:last-child {
margin-bottom: 0;
}
.el-input, .el-textarea, .counter {
width: 500px;
&.el-date-editor {
width: 150px;
}
}
.area-container {
.el-select {
width: 163px;
}
.el-input {
width: 160px;
}
}
.img-list {
display: flex;
flex-wrap: wrap;
width: 500px;
.img-li {
width:148px;
height:148px;
border-radius:6px;
margin-right: 12px;
margin-bottom: 10px;
position: relative;
&.J_add-img {
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%;
}
}
.J_del-img {
position: absolute;
font-size: 20px;
color: #808995;
top: -10px;
right: -10px;
cursor: pointer;
}
img {
width: 100%;
height: 100%;
border-radius:6px;
}
}
}
}
}
}
</style> </style>
src/components/contacts/storeFrame/storeView.vue
<template> <template>
<div> <div>
<div class="sf-right-button-box"> <div class="sf-right-button-box">
<a href="#/storeInfo">
<el-button type="primary">添加门店</el-button> <el-button type="primary">添加门店</el-button>
</a>
<a><el-button>批量导入/导出</el-button></a> <a><el-button>批量导入/导出</el-button></a>
<el-button type="danger" plain @click="delStores" :disabled="disabledDel">批量删除</el-button> <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-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>
...@@ -10,8 +12,7 @@ ...@@ -10,8 +12,7 @@
ref="table1" ref="table1"
height="445" height="445"
:data="tableData" :data="tableData"
@selection-change="selectMember" @selection-change="selectMember">
@row-click="linkToDetail">
<el-table-column <el-table-column
type="selection" type="selection"
width="42" width="42"
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
width="120" width="120"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<a class="a-href m-r-20" @click="editStore(scope.row)">编辑</a> <a class="a-href m-r-20" :href="'#/storeInfo?storeId='+scope.row.storeId">编辑</a>
<a class="a-href" @click="delStores(scope.row, true)">删除</a> <a class="a-href" @click="delStores(scope.row, true)">删除</a>
</template> </template>
</el-table-column> </el-table-column>
...@@ -138,9 +139,7 @@ export default { ...@@ -138,9 +139,7 @@ export default {
}, },
setChildMemberShow() { setChildMemberShow() {
this.$emit("setChildMemberShow", this.showChildMember); this.$emit("setChildMemberShow", this.showChildMember);
}, }
linkToDetail() {},
editStore() {}
}, },
computed: { computed: {
disabledDel() { disabledDel() {
......
src/components/contacts/storeFrame/storeViewGroupInfo.vue 0 → 100644
<template>
<div>
<el-form
class="department-info-form"
label-position="right"
:rules="rules"
:model="departInfo"
ref="departForm"
label-width="120px">
<el-form-item label="部门名称" prop="name">
<el-input v-model="departInfo.name"></el-input>
</el-form-item>
<el-form-item label="部门排序调整" prop="parentId">
<el-input :disabled="disabled" v-model="departInfo.parentName" @focus="callGroupSelector" suffix-icon="el-icon-arrow-down"></el-input>
</el-form-item>
</el-form>
<vue-select-employee ref="parentSelector" :treeSet="treeSet" @handleSelectedList="handleSelectedList" :treeData="treeData"></vue-select-employee>
</div>
</template>
<script>
import vueSelectEmployee from "components/common/vueSelectEmployee";
export default {
name: "store-view-group-info",
components: {
vueSelectEmployee
},
data() {
return {
rules: {
name: [
{ required: true, message: '请输入部门名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请选择父级部门', trigger: 'change' }
]
},
disabled: true,
treeSet: {
isSelectPerson: false,
dialogVisible: false,
isSingle: true // 是否单选
},
departInfo: {
name: "",
parentName: "",
parentId: ""
},
treeData: {}
}
},
methods: {
handleSelectedList() {
console.log(group);
this.departInfo.parentId = group ? group.id : "";
this.departInfo.parentName = group ? group.label : "";
},
callGroupSelector() {
this.treeSet.dialogVisible = true;
}
},
watch: {
treeData() {
this.disabled = false;
}
}
}
</script>
src/router/index.js
...@@ -50,6 +50,11 @@ export const constantRouterMap = [ ...@@ -50,6 +50,11 @@ export const constantRouterMap = [
component: _import('contacts','administrativeFrame') component: _import('contacts','administrativeFrame')
}, },
{ {
path: "/employeeIo",
name: "批量导入/导出",
component: _import('contacts','employeeIo')
},
{
path: '/addDepartment', path: '/addDepartment',
name: '添加部门', name: '添加部门',
component: _import('contacts','addDepartment') component: _import('contacts','addDepartment')
...@@ -65,6 +70,16 @@ export const constantRouterMap = [ ...@@ -65,6 +70,16 @@ export const constantRouterMap = [
component: _import('contacts','storeFrame') component: _import('contacts','storeFrame')
}, },
{ {
path: '/addGroup',
name: '添加子分组',
component: _import('contacts','addGroup')
},
{
path: '/storeInfo',
name: '编辑门店',
component: _import('contacts','storeInfo')
},
{
path: '/employee', path: '/employee',
name: '在职员工', name: '在职员工',
component: _import('contacts','employee') component: _import('contacts','employee')
......
src/views/contacts/addEmployee.vue 0 → 100644
<template>
<div></div>
</template>
<script>
export default {
name: "add-employee"
};
</script>
<style lang="scss">
</style>
src/views/contacts/addGroup.vue 0 → 100644
<template>
<div class="add-department-container">
<div class="setting-cell">
<el-form
class="department-info-form"
label-position="right"
:rules="rules"
:model="departInfo"
ref="departForm"
label-width="120px">
<el-form-item label="部门名称" prop="name">
<el-input v-model="departInfo.name"></el-input>
</el-form-item>
<el-form-item label="部门排序调整" prop="parentId">
<el-input :disabled="disabled" v-model="departInfo.parentName" @focus="callGroupSelector" suffix-icon="el-icon-arrow-down"></el-input>
</el-form-item>
</el-form>
</div>
<div class="setting-cell">
<div class="btn-area">
<el-button type="primary" @click="saveEdit">保存</el-button>
<el-button type="primary" @click="saveEdit('continue')">保存并继续添加</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</div>
<vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList"></vue-select-store>
</div>
</template>
<script>
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "store-view-group-info",
components: {
vueSelectStore
},
data() {
return {
departInfo: {
name: "",
parentName: "",
parentId: ""
},
rules: {
name: [
{ required: true, message: '请输入部门名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请选择父级部门', trigger: 'change' }
]
},
disabled: true,
treeSet: {
isSelectPerson: false,
dialogVisible: false,
isSingle: true // 是否单选
}
}
},
methods: {
handleSelectedList(list) {
let group = list[0];
console.log(group);
this.departInfo.parentId = group ? group.id : "";
this.departInfo.parentName = group ? group.label : "";
},
callGroupSelector() {
this.$refs.storeSelector.treeSet.dialogVisible = true;
},
saveEdit(goAhead = "") {
this.$refs.departForm.validate(valid => {
if (!valid) {
return false;
}
let _this = this;
let params = {
parentId: _this.departInfo.parentId,
name: _this.departInfo.name
}
let url = _this.isAddNew ? "/haoban-manage-web/dept/insert" : "/haoban-manage-web/department/update";
getRequest(url, params)
.then(res => {
console.log(res);
if (res.data.errorCode == 1) {
_this.$message.success({
duration: 1000,
message: "操作成功！"
});
console.log(goAhead);
if (goAhead == "continue") {
_this.departInfo = {
name: "",
parentName: "",
parentId: ""
}
_this.disabled = true;
_this.getGroupData();
} else {
window.history.go(-1);
}
} else {
_this.$message.error({
duration: 1000,
message: res.data.message
});
}
})
.catch(e => {
_this.$message.error({
duration: 1000,
message: e.message
});
});
});
},
cancel() {
this.$confirm(" 是否确认取消，取消后当前页面信息将丢失 ？", "提示", {
type: "warning"
}).then(() => {
window.history.go(-1);
}).catch(e => {
console.log(e);
});
},
getGroupInfo() {
let that = this;
let params = {
groupId: that.$route.query.groupId
};
getRequest("/haoban-manage-web/dept/findDeptById", params)
.then(res => {
if (res.data.errorCode == 1) {
that.departInfo = {
name: res.data.result.name,
parentName: res.data.result.chainName,
parentId: res.data.result.parentId
};
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
}
},
computed: {
isAddNew() {
return !!(this.$route.query.addnew == 1);
}
},
beforeMount() {
if (!this.isAddNew) {
this.getGroupInfo();
}
},
mounted() {
this.disabled = false;
},
watch: {
treeData() {
this.disabled = false;
}
}
}
</script>
<style lang="scss">
.add-department-container {
.setting-cell {
background: #fff;
margin-bottom: 24px;
.title {
height: 55px;
line-height: 55px;
border-bottom: 1px solid #E4E7ED;
text-indent: 32px;
font-size:16px;
font-weight:500;
color:#303133;
}
.department-info-form {
padding: 24px 32px;
.el-input {
width: 380px;
}
}
.btn-area{
width: 100%;
text-align: center;
padding: 12px;
}
}
}
</style>
src/views/contacts/administrativeFrame.vue
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
</span> </span>
</div> </div>
<div class="af-right-button-box"> <div class="af-right-button-box">
<a :href="'#/employee?addnew=1&departmentId='+groupInfo.departmentId">
<el-button type="primary">添加成员</el-button> <el-button type="primary">添加成员</el-button>
</a>
<a><el-button>批量导入/导出</el-button></a> <a><el-button>批量导入/导出</el-button></a>
<el-button type="danger" plain @click="delMembers" :disabled="disabledDel">批量删除</el-button> <el-button type="danger" plain @click="delMembers" :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> <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>
......
src/views/contacts/administrativeFrame1.vue deleted 100644 → 0
<template>
<div class="administrative-wrap">
<div class="inline-block administrative-wrap__left common-wrap__left">
</div>
<search-menu></search-menu>
<div class="inline-block administrative-wrap__right common-wrap__right">
</div>
</div>
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
export default {
name: "administrativeFrame",
components: {
searchMenu
},
data() {
return {
}
},
computed: {
},
methods: {
},
mounted() {
},
};
</script>
<style lang="less" scoped>
.administrative-wrap {
width: 100%;
font-size: 0;
&__left {
width: 260px;
height: 690px;
vertical-align: top;
font-size: 14px;
background: rgba(238,241,248,1);
border-radius: 2px;
}
&__right {
width: calc(100% - 260px);
min-height: 690px;
padding: 24px;
vertical-align: top;
font-size: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
</style>
src/views/contacts/employee.vue
<template> <template>
<div class="employee-detail"> <div class="employee-detail">
<employee-info :info="info"></employee-info> <employee-info :isNew="isNew" ref="emmployInfo"></employee-info>
<div class="btn-box"> <div class="btn-boxs">
<el-button @click="saveEmployeeInfo" type="primary">保存</el-button> <el-button @click="save" type="primary">保存</el-button>
<el-button type="primary">保存并继续添加</el-button> <el-button type="primary" @click="save(1)" v-if="isNew">保存并继续添加</el-button>
<el-button>取消</el-button> <el-button @click="cancel">取消</el-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -18,48 +18,105 @@ export default { ...@@ -18,48 +18,105 @@ export default {
}, },
data() { data() {
return { return {
info: {},
managerMode: false managerMode: false
}; };
}, },
methods: { methods: {
getEmployInfo() { save(contin) {
let info = this.$refs.emmployInfo.info;
console.log( info , "ssss");
if (this.isNew) {
this.addEmployee(info, contin);
} else {
this.saveEmployeeInfo(info);
}
},
/**
* 新增员工
*/
addEmployee(info, contin) {
let that = this; let that = this;
let params = { let params = {
id: that.$route.query.employeeClerkId name: info.name,
isClerk: 0,
phoneNumber: info.phoneNumber,
positionName: info.positionName,
departmentId: info.departmentId,
managerMode: info.managerMode*1
}; };
getRequest("/haoban-manage-web/emp/findOne", params) console.log(info, params);
getRequest("/haoban-manage-web/emp/add", params)
.then(res => { .then(res => {
console.log(res, "employeeDetail"); console.log(res, "add result");
that.info = res.data.result; if (res.data.errorCode == 1) {
that.info.managerMode = !!res.data.result.managerMode; that.$message.success({
message: "操作成功"
});
if (contin == 1) {
that.$refs.emmployInfo.info = {
name: "",
phoneNumber: "",
departmentId: "",
departmentName: "",
managerMode: false
};
} else {
window.history.go(-1);
}
} else {
that.$message.error({
message: res.data.message
});
}
}) })
.catch(e => { .catch(e => {
console.log(e, "error"); console.log(e, "error");
}); });
}, },
saveEmployeeInfo() { saveEmployeeInfo(info) {
let that = this; let that = this;
let info = that.info;
let params = { let params = {
name: info.name, name: info.name,
phoneNumber: info.phoneNumber, phoneNumber: info.phoneNumber,
positionName: info.positionName, positionName: info.positionName,
employeeClerkId: info.employeeClerkId, employeeClerkId: that.$route.query.employeeClerkId,
managerMode: info.managerMode * 1 managerMode: info.managerMode * 1
}; };
console.log(info, params); console.log(info, params);
getRequest("/haoban-manage-web/emp/update", params) getRequest("/haoban-manage-web/emp/update", params)
.then(res => { .then(res => {
console.log(res, "update result"); console.log(res, "update result");
if (res.data.errorCode == 1) {
that.$message.success({
message: "操作成功"
});
} else {
that.$message.error({
message: res.data.message
});
}
}) })
.catch(e => { .catch(e => {
console.log(e, "error"); console.log(e, "error");
that.$message.error({
message: e.message
});
});
},
cancel() {
this.$confirm(" 是否确认取消，取消后当前页面信息将丢失 ？", "提示", {
type: "warning"
}).then(() => {
window.history.go(-1);
}).catch(e => {
console.log(e);
}); });
} }
}, },
beforeMount() { computed: {
this.getEmployInfo(); isNew() {
return !!this.$route.query.addnew == 1;
}
} }
}; };
</script> </script>
...@@ -67,7 +124,7 @@ export default { ...@@ -67,7 +124,7 @@ export default {
.employee-detail { .employee-detail {
overflow: auto; overflow: auto;
height: 460px; height: 460px;
.btn-box { .btn-boxs {
width: calc(100% - 200px); width: calc(100% - 200px);
padding: 12px 0; padding: 12px 0;
background: #fff; background: #fff;
......
src/views/contacts/employeeIo.vue 0 → 100644
<template>
<div class="io-container">
<ul class="tip-area">
<li class="tip">由于你的企业未进行企业认证，通讯录最多只能导入200人以内的员工，如有超出可先进行<a class="a-href">企业认证</a></li>
<li class="tip">如需更新已存在的员工，可逐个进行修改，或请先导出通讯录，在导出表格里进行修改</li>
<li class="tip">行政架构通讯录的导入规则和门店架构通讯录的导入规则有些区别，详细请看导入的表格说明</li>
<li class="tip">姓名必须和好办企业通讯录中的员工姓名保持一致，手机号必须为员工注册好办的手机号</li>
<li class="tip">员工档案导入时，直接以手机号去做匹配，通讯录中不存在的将无法导入（模板中配置的部门、职位、code，这些字段信息请保持与企业通讯录中一致，这几个字段的信息将不会修改通讯录的信息，直接取该成员对应的通讯录的字段信息）</li>
<li class="tip">如果想要新增字段，可在后台档案设置中增加，再导入模板</li>
<li class="tip">字段类型为图片上传、多选的字段无法导入、导出</li>
<li class="tip">确保导入的表头字段和后台配置表头字段的名称一致（模板下载时间不可修改）</li>
<li class="tip">由于数据量可能较大，每次最多导入2000条员工档案，若超过只取前2000条，可以分多次导入</li>
</ul>
<el-radio-group v-model="type" class="m-t-20">
<el-radio-button label="import">导入通讯录</el-radio-button>
<el-radio-button label="export">导出/修改通讯录</el-radio-button>
<el-radio-button label="note">错误记录</el-radio-button>
</el-radio-group>
<div class="handle-area import">
<el-steps direction="vertical" :active="2" style="height: 200px;">
<el-step>
<template slot="title">
<div>
下载员工通讯录模板，统一收集员工信息<span class="download-btn">下载<i class="iconfont icon-icon_yunxiazai"></i></span>
</div>
</template>
<el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
</el-step>
<el-step>
<template slot="title">
<div>
上传收集完毕的员工信息表
<div style="display:inline-block;vertical-align: middle;">
<span class="download-btn">选择文件</span>
<p class="warming">文件格式必须为xls或xlsx格式</p>
</div>
</div>
</template>
</el-step>
</el-steps>
<div class="up-btn-div">
<el-button type="primary">上传</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "employee-io",
data() {
return {
type: "import"
};
}
}
</script>
<style lang="scss">
.io-container {
width: 100%;
height: 538px;
background: #fff;
box-sizing: border-box;
padding: 28px 32px;
overflow: auto;
.tip-area {
width:100%;
background:rgba(236,245,255,1);
border:1px solid rgba(179,216,255,1);
border-radius:4px;
padding: 10px;
font-size:13px;
font-weight:400;
color:rgba(96,98,102,1);
.tip {
line-height: 24px;
position: relative;
padding-left: 16px;
&:last-child {
margin-bottom: 0;
}
.radio {
width:6px;
height:6px;
background:rgba(64,158,255,1);
border-radius:50%;
}
&::before {
position: absolute;
content: "";
width:6px;
height:6px;
background:rgba(64,158,255,1);
border-radius:50%;
top: 9px;
left: 0;
}
}
}
.handle-area {
height: 310px;
background:rgba(255,255,255,1);
border:1px solid rgba(220,223,230,1);
border-radius:4px;
padding: 25px 20px;
margin-top: 24px;
.el-step__title {
font-size:16px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(96,98,102,1);
.download-btn {
display: inline-block;
width:89px;
height:36px;
background:rgba(64,158,255,1);
border-radius:4px;
color: #fff;
text-align: center;
line-height: 36px;
margin-left: 10px;
cursor: pointer;
.iconfont {
margin-left: 5px;
}
}
.warming {
font-size:12px;
font-weight:400;
color:rgba(96,98,102,1);
}
}
.el-step__head.is-finish {
color: rgba(96,98,102,1);
border-color: rgba(96,98,102,1);
}
.up-btn-div {
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 20px;
}
}
}
</style>
src/views/contacts/shareCode.vue
<template> <template>
<div class="share-code-div"> <div class="share-code-div">
<p class="company-name">中国达摩</p> <p class="company-name">{{myEnterprise}}的共享企业</p>
<p class="word">双方共享的通讯录，选人时可以选到，同时邀请企业建立共享关系</p> <p class="word">双方共享的通讯录，选人时可以选到，同时邀请企业建立共享关系</p>
<p class="time-tip">一个二维码只能和一个企业建立共享关系，24小时有效</p> <p class="time-tip">一个二维码只能和一个企业建立共享关系，24小时有效</p>
<img :src="qrCodeContent.data" class="code-img"> <div id="qrcode" class="m-t-20"></div>
<div class="btn-area"> <div class="btn-area">
<el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button> <el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
<el-button>重新生成</el-button> <el-button @click="reFresh()">重新生成</el-button>
</div> </div>
<p class="company-name">已建立的共享企业</p> <p class="company-name">已建立的共享企业</p>
<div class="share-table"> <div class="share-table">
<div class="company">达摩克里斯之剑</div> <div class="company">{{myEnterprise}}</div>
<ul class="list"> <ul class="list">
<li class="li"> <li class="li" v-for="enterprise in shares" :key="enterprise.importEnterpriseId">
<div class="name">达摩克里斯之剑</div> <div class="name">{{enterprise.importEnterpriseName}}</div>
<div class="cancel-btn"><a href="" class="a-href">取消共享</a></div> <div class="cancel-btn"><a class="a-href" @click="cancelShare(enterprise.importEnterpriseId)">取消共享</a></div>
</li>
<li class="li">
<div class="name">达摩克里斯之剑</div>
<div class="cancel-btn"><a href="" class="a-href">取消共享</a></div>
</li>
<li class="li">
<div class="name">达摩克里斯之剑</div>
<div class="cancel-btn"><a href="" class="a-href">取消共享</a></div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -30,25 +22,30 @@ ...@@ -30,25 +22,30 @@
</template> </template>
<script> <script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api'; import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import QRCode from 'qrcodejs2'
export default { export default {
name: "shareCode", name: "shareCode",
data() { data() {
return { return {
regenerate: false, regenerate: false,
qrCodeContent: {} qrCodeContent: {},
shares: [],
qrcodeCase: "",
myEnterprise: ""
} }
}, },
methods: { methods: {
getCode() { getCode(regenerate = false) {
let _this = this; let _this = this;
let params = { let params = {
regenerate: _this.regenerate regenerate
} }
getRequest("/haoban-manage-web/shared-contact/get-shared-qrcode", params) getRequest("/haoban-manage-web/shared-contact/get-shared-qrcode", params)
.then(res => { .then(res => {
console.log(res, "code"); console.log(res, "code");
if (res.data.errorCode == 1) { if (res.data.errorCode == 1) {
_this.qrCodeContent = JSON.parse(res.data.result.qrCodeContent); console.log(regenerate);
_this.qrcode(res.data.result.qrCodeContent);
} else { } else {
_this.$message.error({ _this.$message.error({
message: res.data.message message: res.data.message
...@@ -61,21 +58,76 @@ export default { ...@@ -61,21 +58,76 @@ export default {
}); });
}); });
}, },
reFresh() {
document.getElementById("qrcode").innerHTML = '';
this.qrcodeCase.clear(); // 先清除原有的
this.getCode(true);
},
/**
* 生成二维码
*/
qrcode (text) {
const that = this;
that.qrcodeCase = new QRCode('qrcode',
{
width: 245,
height: 245, // 高度
text: text, // 二维码内容 //
//render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas） //
//background: '#f0f',
//foreground: '#ff0'
}
);
},
getShareBrands() { getShareBrands() {
let _this = this; let _this = this;
let params = {}; let params = {};
getRequest("/haoban-manage-web/shared-contact/find-shared-contact-relation", params) getRequest("/haoban-manage-web/shared-contact/get-all-shared-enterprise", params)
.then(res => { .then(res => {
console.log(res, "shares"); console.log(res, "shares");
if (res.data.errorCode == 1) {
_this.shares = res.data.result || [];
} else {
_this.$message.error({
message: res.data.message
});
}
})
.catch(e => {
_this.$message.error({
message: e.message
});
});
},
getShareRelation() {
let _this = this;
let params = {
enterpriseIdCondition: 1
};
getRequest("/haoban-manage-web/shared-contact/find-shared-contact-relation", params)
.then(res => {
console.log(res, "getShareRelation");
if (res.data.errorCode == 1) {
_this.shares = res.data.result || [];
_this.myEnterprise = res.data.result[0].exportEnterpriseName;
} else {
_this.$message.error({
message: res.data.message
});
}
}) })
.catch(e => { .catch(e => {
_this.$message.error({ _this.$message.error({
message: e.message message: e.message
}); });
}); });
},
cancelShare(id) {
console.log(id);
} }
}, },
beforeMount() { beforeMount() {
this.getShareRelation();
this.getShareBrands(); this.getShareBrands();
this.getCode(); this.getCode();
} }
...@@ -107,11 +159,6 @@ export default { ...@@ -107,11 +159,6 @@ export default {
margin-top: 25px; margin-top: 25px;
color:rgba(245,108,108,1); color:rgba(245,108,108,1);
} }
.code-img {
width:245px;
height:245px;
margin-top: 20px;
}
.btn-area { .btn-area {
margin-top: 24px; margin-top: 24px;
margin-bottom: 46px; margin-bottom: 46px;
......
src/views/contacts/storeFrame.vue
...@@ -30,9 +30,9 @@ ...@@ -30,9 +30,9 @@
<span class="title-span">{{groupInfo.groupName}}（{{total}}家）</span> <span class="title-span">{{groupInfo.groupName}}（{{total}}家）</span>
<span class="id-span">部门ID： {{groupInfo.departmentId}}</span> <span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
<span class="handle-area"> <span class="handle-area">
<a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" target="_blank" class="J_add-child a-href">添加子部门</a> <a :href="'#/addGroup?addnew=1&groupId='+groupInfo.departmentId" class="J_add-child a-href">添加子分组</a>
<span class="hurdle"></span> <span class="hurdle"></span>
<a class="J_edit a-href">编辑</a> <a class="J_edit a-href" :href="'#/addGroup?groupId='+groupInfo.departmentId">编辑</a>
</span> </span>
</div> </div>
<div class="tab-div"> <div class="tab-div">
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
</div> </div>
</div> </div>
<add-brand ref="add_brand"></add-brand> <add-brand ref="add_brand"></add-brand>
<vue-select-store></vue-select-store>
</div> </div>
</template> </template>
<script> <script>
...@@ -72,7 +71,6 @@ import storeInfo from "components/contacts/storeFrame/storeInfo"; ...@@ -72,7 +71,6 @@ import storeInfo from "components/contacts/storeFrame/storeInfo";
import addBrand from "components/contacts/storeFrame/addBrand"; import addBrand from "components/contacts/storeFrame/addBrand";
import employeeInfo from "components/contacts/employeeInfo"; import employeeInfo from "components/contacts/employeeInfo";
import clerkInfo from "components/contacts/storeFrame/clerkInfo"; import clerkInfo from "components/contacts/storeFrame/clerkInfo";
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api'; import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default { export default {
name: "storeEstruturaContainer", name: "storeEstruturaContainer",
...@@ -83,8 +81,7 @@ export default { ...@@ -83,8 +81,7 @@ export default {
employeeInfo, employeeInfo,
storeInfo, storeInfo,
addBrand, addBrand,
clerkInfo, clerkInfo
vueSelectStore
}, },
data() { data() {
return { return {
...@@ -109,6 +106,10 @@ export default { ...@@ -109,6 +106,10 @@ export default {
storeType: "" storeType: ""
}; };
}, },
beforeRouteUpdate(to, from, next) {
next();
},
methods: { methods: {
handleSearchKey(keyWord) { handleSearchKey(keyWord) {
let params = { let params = {
...@@ -140,9 +141,20 @@ export default { ...@@ -140,9 +141,20 @@ export default {
* 树形搜索结果选门店处理 * 树形搜索结果选门店处理
*/ */
handleStoreSelection(store) { handleStoreSelection(store) {
console.log(store); let that = this;
this.storeInfo = store; let params = {storeId: store.storeId};
this.showEmployee = "store"; getRequest("/haoban-manage-web/store/findStoreById", params)
.then(res => {
console.log(res, "storeInfo");
if (res.data.errorCode == 1) {
that.storeInfo = res.data.result;
that.showEmployee = "store";
} else {
that.$message.error({
message: res.data.message
});
}
});
}, },
handleSizeChange(size) { handleSizeChange(size) {
this.pageSize = size; this.pageSize = size;
...@@ -282,111 +294,6 @@ export default { ...@@ -282,111 +294,6 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.store-estrutura-container {
display: flex;
.sf-right-container {
height: 690px;
background: #fff;
flex: 1;
padding: 0 24px;
.sf-right-header {
height: 70px;
line-height: 70px;
font-weight: 400;
font-size: 14px;
color: #606266;
.title-span {
color: #303133;
font-size: 20px;
}
.handle-area {
float: right;
.hurdle {
width:1px;
height:16px;
display: inline-block;
background: #DCDFE6;
margin: 0 10px;
vertical-align: sub;
}
}
}
.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-table {
.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;
}
}
}
}
}
}
}
</style> </style>
src/views/contacts/storeInfo.vue 0 → 100644
<template>
<div>
<div class="store-info">
<div class="info-cell">
<p class="title">门店信息</p>
<el-form
class="store-info-form info-form"
label-width="90px">
<el-form-item label="门店名称" prop="name">
<el-input v-model="storeInfo.storeName">
<template slot="suffix">{{storeInfo.storeName ? storeInfo.storeName.length : 0}}/20</template>
</el-input>
</el-form-item>
<el-form-item label="所属分组" prop="group">
<el-input v-model="storeInfo.groupChainName" @focus="callSelector">
<i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
</el-input>
</el-form-item>
<el-form-item label="门店图片" prop="imageUrls">
<div class="member-upload-image">
<vue-gic-upload-image
projectName="gic-web"
wxFlag="0"
actionUrl="/haoban-manage-web/upload-img"
:imageList="imgs"
:limitW="500"
:limitH="500"
:maxImageLength="5"
@uploadOnSuccess="uploadOnSuccess"
@sortImg="sortImg"
@deleteImage="deleteImage">
</vue-gic-upload-image>
</div>
</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-select
placeholder="起始时间"
v-model="storeInfo.openTime"
:picker-options="{
start: '00:00',
step: '00:05',
end: '24:00'
}">
</el-time-select>
~
<el-time-select
placeholder="结束时间"
v-model="storeInfo.closeTime"
:picker-options="{
start: '00:00',
step: '00:05',
end: '24:00',
minTime: storeInfo.openTime
}">
</el-time-select>
</el-form-item>
<el-form-item label="门店类型">
<el-radio-group v-model="storeInfo.storeType">
<el-radio :label="0">自营</el-radio>
<el-radio :label="1">联营</el-radio>
<el-radio :label="2">代理</el-radio>
<el-radio :label="3">代销</el-radio>
<el-radio :label="4">托管</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="门店地址">
<vue-office-area :areaOptions="areaOptions" @selected="selected" projectName="haoban-web" postUrl="/api-admin/dict-district-list"></vue-office-area>
<el-input v-model="areaOptions.postAddress">
<template slot="suffix">{{(areaOptions.postAddress || "").length}}/50</template>
</el-input>
</el-form-item>
<el-form-item label="GPS坐标">
<el-input v-model="location" class="m-r-10"></el-input>
<a href="http://m.gpsspg.com/maps.htm" class="a-href" target="_blank">经纬度测试工具</a>
</el-form-item>
<el-form-item>
<template slot="label">
门店代码
<i class="el-icon-question" style="color:#C0C4CC;"></i>
</template>
<el-input v-model="storeInfo.storeCode">
<template slot="suffix">{{(storeInfo.storeCode || "").length}}/20</template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="info-cell">
<p class="title">店长信息</p>
<el-form
class="store-manager-info-form info-form"
label-width="90px">
<el-form-item label="店长姓名" prop="name">
<el-input v-model="storeInfo.managerName">
<template slot="suffix">{{(storeInfo.managerName || "").length}}/10</template>
</el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="storeInfo.managerPhoneNumber"></el-input>
</el-form-item>
<el-form-item label="店长性别">
<el-radio-group v-model="storeInfo.managerSex">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="店长代码">
<el-input v-model="storeInfo.managerCode">
<template slot="suffix">{{(storeInfo.managerCode || "").length}}/20</template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="info-cell">
<p class="title">经营信息</p>
<el-form
class="operate-info-form info-form"
label-width="90px">
<el-form-item label="特色服务">
<el-input type="textarea" :rows="2" v-model="storeInfo.specialService"></el-input>
<p class="counter t-rt c-909399">{{(storeInfo.specialService || "").length}}/20</p>
</el-form-item>
<el-form-item label="人均消费">
<el-input v-model="storeInfo.personCost">
<template slot="suffix">{{(storeInfo.personCost+'').length}}/10</template>
</el-input>
</el-form-item>
<el-form-item label="推荐商品">
<el-input type="textarea" :rows="2" v-model="storeInfo.recommendGoods"></el-input>
<p class="counter t-rt c-909399">{{(storeInfo.recommendGoods || "").length}}/100</p>
</el-form-item>
<el-form-item label="品牌介绍">
<el-input type="textarea" :rows="2" v-model="storeInfo.brandDes"></el-input>
<p class="counter t-rt c-909399">{{(storeInfo.recommendGoods || "").length}}/200</p>
</el-form-item>
</el-form>
</div>
<div class="handle-area">
<el-button type="primary" @click="save">保存</el-button>
</div>
</div>
<vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList"></vue-select-store>
</div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import vueSelectStore from "components/common/vueSelectStore";
export default {
name: "store-info",
components: {
vueSelectStore
},
data() {
return {
storeInfo: {
groupChainName: ""
},
areaChainName: "",
location: ""
};
},
methods: {
callSelector() {
this.$refs.storeSelector.treeSet.dialogVisible = true;
},
handleSelectedList(list) {
console.log(list);
this.storeInfo.groupChainName = list[0].label;
this.storeInfo.storeGroupId = list[0].id;
},
selected(val) {
console.log(val);
let that = this;
that.areaChainName = val.provinceName + "/" + val.cityName + "/" + val.countryName;
},
getStoreInfo() {
let that = this;
let params = {storeId: that.$route.query.storeId};
getRequest("/haoban-manage-web/store/findStoreById", params)
.then(res => {
if (res.data.errorCode == 1) {
that.storeInfo = res.data.result;
that.showEmployee = "store";
} else {
that.$message.error({
message: res.data.message
});
}
});
},
uploadOnSuccess() {},
sortImg() {},
deleteImage() {},
save() {
let that = this;
let locationArr = that.location.split(",");
that.storeInfo.longitude = locationArr[0];
that.storeInfo.latitude = locationArr.length !== 2 ? "" : locationArr[1];
that.storeInfo.postAddress = that.areaOptions.postAddress;
that.storeInfo.managerPhone = that.storeInfo.managerPhoneNumber;
that.storeInfo.areaChainName = that.areaChainName;
let params = that.storeInfo;
console.log(params, "params");
let url = that.isNew ? "/haoban-manage-web/store/add" : "/haoban-manage-web/store/update";
getRequest(url, params)
.then(res => {
if (res.data.errorCode == 1) {
that.$message.success({
message: res.data.message
});
window.history.go(-1);
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
}
},
computed: {
isNew() {
if (this.$route.query.storeId) {
return false;
} else {
return true;
}
},
areaOptions() {
let ths = this;
let arr = (ths.storeInfo.areaChainName || "").split("/");
return {
provinceName: arr[0],
provinceId: ths.provinceId,
cityName: arr[1],
cityId: ths.cityId,
countryName: arr[2],
countyId: ths.countyId
};
},
imgs() {
console.log(this.storeInfo.imageUrl, !!this.storeInfo.imageUrl);
return !this.storeInfo.imageUrl ? [] : this.storeInfo.imageUrl.split(",");
}
},
beforeMount() {
if (!this.isNew) {
this.getStoreInfo();
}
}
}
</script>
<style lang="scss">
</style>
static/css/index.less
...@@ -32,3 +32,194 @@ ...@@ -32,3 +32,194 @@
}*/ }*/
} }
.store-estrutura-container {
display: flex;
.sf-right-container {
height: 690px;
background: #fff;
flex: 1;
padding: 0 24px;
.sf-right-header {
height: 70px;
line-height: 70px;
font-weight: 400;
font-size: 14px;
color: #606266;
.title-span {
color: #303133;
font-size: 20px;
}
.handle-area {
float: right;
.hurdle {
width:1px;
height:16px;
display: inline-block;
background: #DCDFE6;
margin: 0 10px;
vertical-align: sub;
}
}
}
.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-table {
.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;
}
}
}
}
}
}
}
.store-info {
flex: 1;
height: 690px;
overflow: auto;
.info-cell {
margin-bottom: 24px;
background: #fff;
padding-bottom: 24px;
>.title {
line-height: 55px;
text-indent: 32px;
border-bottom: 1px solid #E4E7ED;
}
.info-form {
padding: 24px 60px 0;
.el-form-item:last-child {
margin-bottom: 0;
}
.el-input, .el-textarea, .counter {
width: 500px;
&.el-date-editor {
width: 150px;
}
}
.area-container {
.el-select {
width: 163px;
}
.el-input {
width: 160px;
}
}
.img-list {
display: flex;
flex-wrap: wrap;
width: 500px;
.img-li {
width:148px;
height:148px;
border-radius:6px;
margin-right: 12px;
margin-bottom: 10px;
position: relative;
&.J_add-img {
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%;
}
}
.J_del-img {
position: absolute;
font-size: 20px;
color: #808995;
top: -10px;
right: -10px;
cursor: pointer;
}
img {
width: 100%;
height: 100%;
border-radius:6px;
}
}
}
}
}
.handle-area {
background:rgba(255,255,255,1);
height: 57px;
line-height: 57px;
text-align: center;
}
}
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