Skip to content

O
office-web
Commit a6b3b5e4 by xiaohai
Options

store

parent 0f58bd57
Showing with 1084 additions and 340 deletions
src/components/common/vueSelectStore.vue
......@@ -11,8 +11,8 @@
<div class="input-container">
<el-input v-model="searchText" placeholder="请输入内容"></el-input>
</div>
<div class="select-div">
<el-select v-model="brandSelection" placeholder="请选择品牌" @change="selectBrand" style="width: 100%;">
<div class="select-div" style="width: 100%;">
<el-select v-model="brandSelection" placeholder="请选择品牌" @change="selectBrand" style="width: 100%;margin-top:20px;">
<el-option
v-for="(item, index) in brands"
:key="item.id"
......@@ -265,6 +265,7 @@
*/
submitSelected() {
this.$emit("handleSelectedList", this.selectedList);
this.treeSet.dialogVisible = false;
},
/**
* 选择品牌
......
src/components/contacts/employeeInfo.vue
......@@ -4,6 +4,8 @@
<p class="title">员工信息</p>
<el-form
class="employee-info-form"
:rules="rules"
:model="info"
label-width="70px"
>
<el-form-item label="姓名" prop="name">
......@@ -12,8 +14,8 @@
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="info.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="部门" prop="departmentName">
<el-input v-model="info.departmentName"></el-input>
<el-form-item label="部门" prop="departmentId">
<el-input v-model="info.departmentName" @focus="callGroupSelector" :disabled="disabled" suffix-icon="el-icon-arrow-down"></el-input>
</el-form-item>
<el-form-item label="职位" prop="positionName">
<el-input v-model="info.positionName"></el-input>
......@@ -33,29 +35,129 @@
</el-switch>
</div>
</div>
<vue-select-employee ref="parentSelector" :treeSet="treeSet" @handleSelectedList="handleSelectedList" :treeData="treeData"></vue-select-employee>
</div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import vueSelectEmployee from "components/common/vueSelectEmployee";
export default {
name: "employeeInfo",
components: {
vueSelectEmployee
},
props: {
info: {
type: Object,
required: true
// info: {
// type: Object,
// required: true
// }
isNew: {
type: Boolean,
default: false
}
},
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 {
info: {
name: "",
phoneNumber: "",
departmentId: "",
departmentName: "",
managerMode: false
},
treeData: {},
disabled: true,
employeeInfo: {
name: "",
phoneNumber: "",
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: {
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() {
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 {
*/
linkToDetail(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 @@
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="clerkInfo.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="门店">
<el-input v-model="clerkInfo.storeName"></el-input>
<el-form-item label="门店" prop="storeName">
<el-input v-model="clerkInfo.storeName" @focus="callSelector"></el-input>
</el-form-item>
<el-form-item label="code" prop="code">
<el-input v-model="clerkInfo.code"></el-input>
......@@ -23,22 +23,20 @@
</el-form-item>
</el-form>
<div class="btn-box">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="save(true)">保存并继续添加</el-button>
<el-button>取消</el-button>
<el-button type="primary" @click="saveFn">保存</el-button>
<el-button type="primary" @click="saveFn(1)">保存并继续添加</el-button>
<el-button @click="cancel">取消</el-button>
</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: "clerk-info-form",
props: {
clerkInfo: {
type: Object,
default() {
return {};
}
}
components: {
vueSelectStore
},
data() {
let validatePhone = (rule, value, callback) => {
......@@ -60,6 +58,7 @@ export default {
phoneNumber: [
{ required:true, validator: validatePhone, trigger: "blur"}
],
storeName: [{required: true, message: "请选择门店", trigger: "blur"}],
code: [
{ required: true, message: "请输入code", trigger: "blur" },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
......@@ -67,17 +66,88 @@ export default {
positionName: [
{ required: true, message: "请输入店员职位", trigger: "blur" }
]
},
clerkInfo: {
storeName: "",
storeId: "",
managerMode:false
}
};
},
methods: {
save(goahead) {
this.$refs.clerk_info.validate((valid) => {
console.log(valid, "valid");
if (valid) {
saveFn(goahead) {
let that = this;
let ok = true;
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 {
flex: 1;
padding: 24px 35px 48px;
background: #fff;
.add-clerk-form {
.el-input {
width: 380px;
}
}
.btn-box {
padding-left: 80px;
}
......
src/components/contacts/storeFrame/clerkView.vue
......@@ -28,7 +28,7 @@
<template slot-scope="scope">
<div>
<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>
</template>
</el-table-column>
......
src/components/contacts/storeFrame/storeInfo.vue
......@@ -7,11 +7,11 @@
label-width="90px">
<el-form-item label="门店名称" prop="name">
<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-form-item>
<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>
</el-input>
</el-form-item>
......@@ -20,8 +20,8 @@
<vue-gic-upload-image
projectName="gic-web"
wxFlag="0"
actionUrl="/api-plug/upload-img"
:imageList="(storeInfo.imageUrls || '').split(',')"
actionUrl="/haoban-manage-web/upload-img"
:imageList="imgs"
:limitW="500"
:limitH="500"
:maxImageLength="5"
......@@ -68,7 +68,7 @@
<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">{{(storeInfo.postAddress || "").length}}/50</template>
<template slot="suffix">{{(areaOptions.postAddress || "").length}}/50</template>
</el-input>
</el-form-item>
<el-form-item label="GPS坐标">
......@@ -101,8 +101,8 @@
</el-form-item>
<el-form-item label="店长性别">
<el-radio-group v-model="storeInfo.managerSex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="店长代码">
......@@ -136,32 +136,86 @@
</el-form-item>
</el-form>
</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>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import vueSelectStore from "components/common/vueSelectStore";
export default {
name: "storeInfo",
name: "store-detail",
components: {
vueSelectStore
},
props: {
storeInfo: {
type: Object,
default() {
return {};
return {
groupChainName: ""
};
}
}
},
data() {
return {
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;
},
uploadOnSuccess() {},
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: {
areaOptions() {
let ths = this;
let arr = ths.storeInfo.areaChainName.split("/");
let arr = (ths.storeInfo.areaChainName || "").split("/");
return {
provinceName: arr[0],
provinceId: ths.provinceId,
......@@ -171,90 +225,20 @@ export default {
countyId: ths.countyId
};
},
location() {
return this.storeInfo.longitude + "," + this.storeInfo.latitude;
imgs() {
console.log(this.storeInfo.imageUrl, !!this.storeInfo.imageUrl);
return !this.storeInfo.imageUrl ? [] : this.storeInfo.imageUrl.split(",");
}
},
watch: {
$route(to) {
console.log(to, "to");
}
}
};
</script>
<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>
src/components/contacts/storeFrame/storeView.vue
<template>
<div>
<div class="sf-right-button-box">
<a href="#/storeInfo">
<el-button type="primary">添加门店</el-button>
</a>
<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>
......@@ -10,8 +12,7 @@
ref="table1"
height="445"
:data="tableData"
@selection-change="selectMember"
@row-click="linkToDetail">
@selection-change="selectMember">
<el-table-column
type="selection"
width="42"
......@@ -50,7 +51,7 @@
width="120"
>
<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>
</template>
</el-table-column>
......@@ -138,9 +139,7 @@ export default {
},
setChildMemberShow() {
this.$emit("setChildMemberShow", this.showChildMember);
},
linkToDetail() {},
editStore() {}
}
},
computed: {
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 = [
component: _import('contacts','administrativeFrame')
},
{
path: "/employeeIo",
name: "批量导入/导出",
component: _import('contacts','employeeIo')
},
{
path: '/addDepartment',
name: '添加部门',
component: _import('contacts','addDepartment')
......@@ -65,6 +70,16 @@ export const constantRouterMap = [
component: _import('contacts','storeFrame')
},
{
path: '/addGroup',
name: '添加子分组',
component: _import('contacts','addGroup')
},
{
path: '/storeInfo',
name: '编辑门店',
component: _import('contacts','storeInfo')
},
{
path: '/employee',
name: '在职员工',
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 @@
</span>
</div>
<div class="af-right-button-box">
<a :href="'#/employee?addnew=1&departmentId='+groupInfo.departmentId">
<el-button type="primary">添加成员</el-button>
</a>
<a><el-button>批量导入/导出</el-button></a>
<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>
......
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>
<div class="employee-detail">
<employee-info :info="info"></employee-info>
<div class="btn-box">
<el-button @click="saveEmployeeInfo" type="primary">保存</el-button>
<el-button type="primary">保存并继续添加</el-button>
<el-button>取消</el-button>
<employee-info :isNew="isNew" ref="emmployInfo"></employee-info>
<div class="btn-boxs">
<el-button @click="save" type="primary">保存</el-button>
<el-button type="primary" @click="save(1)" v-if="isNew">保存并继续添加</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</div>
</template>
......@@ -18,48 +18,105 @@ export default {
},
data() {
return {
info: {},
managerMode: false
};
},
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 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 => {
console.log(res, "employeeDetail");
that.info = res.data.result;
that.info.managerMode = !!res.data.result.managerMode;
console.log(res, "add result");
if (res.data.errorCode == 1) {
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 => {
console.log(e, "error");
});
},
saveEmployeeInfo() {
saveEmployeeInfo(info) {
let that = this;
let info = that.info;
let params = {
name: info.name,
phoneNumber: info.phoneNumber,
positionName: info.positionName,
employeeClerkId: info.employeeClerkId,
employeeClerkId: that.$route.query.employeeClerkId,
managerMode: info.managerMode * 1
};
console.log(info, params);
getRequest("/haoban-manage-web/emp/update", params)
.then(res => {
console.log(res, "update result");
if (res.data.errorCode == 1) {
that.$message.success({
message: "操作成功"
});
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
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() {
this.getEmployInfo();
computed: {
isNew() {
return !!this.$route.query.addnew == 1;
}
}
};
</script>
......@@ -67,7 +124,7 @@ export default {
.employee-detail {
overflow: auto;
height: 460px;
.btn-box {
.btn-boxs {
width: calc(100% - 200px);
padding: 12px 0;
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>
<div class="share-code-div">
<p class="company-name">中国达摩</p>
<p class="company-name">{{myEnterprise}}的共享企业</p>
<p class="word">双方共享的通讯录，选人时可以选到，同时邀请企业建立共享关系</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">
<el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
<el-button>重新生成</el-button>
<el-button @click="reFresh()">重新生成</el-button>
</div>
<p class="company-name">已建立的共享企业</p>
<div class="share-table">
<div class="company">达摩克里斯之剑</div>
<div class="company">{{myEnterprise}}</div>
<ul class="list">
<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 class="li">
<div class="name">达摩克里斯之剑</div>
<div class="cancel-btn"><a href="" class="a-href">取消共享</a></div>
<li class="li" v-for="enterprise in shares" :key="enterprise.importEnterpriseId">
<div class="name">{{enterprise.importEnterpriseName}}</div>
<div class="cancel-btn"><a class="a-href" @click="cancelShare(enterprise.importEnterpriseId)">取消共享</a></div>
</li>
</ul>
</div>
......@@ -30,25 +22,30 @@
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import QRCode from 'qrcodejs2'
export default {
name: "shareCode",
data() {
return {
regenerate: false,
qrCodeContent: {}
qrCodeContent: {},
shares: [],
qrcodeCase: "",
myEnterprise: ""
}
},
methods: {
getCode() {
getCode(regenerate = false) {
let _this = this;
let params = {
regenerate: _this.regenerate
regenerate
}
getRequest("/haoban-manage-web/shared-contact/get-shared-qrcode", params)
.then(res => {
console.log(res, "code");
if (res.data.errorCode == 1) {
_this.qrCodeContent = JSON.parse(res.data.result.qrCodeContent);
console.log(regenerate);
_this.qrcode(res.data.result.qrCodeContent);
} else {
_this.$message.error({
message: res.data.message
......@@ -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() {
let _this = this;
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 => {
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 => {
_this.$message.error({
message: e.message
});
});
},
cancelShare(id) {
console.log(id);
}
},
beforeMount() {
this.getShareRelation();
this.getShareBrands();
this.getCode();
}
......@@ -107,11 +159,6 @@ export default {
margin-top: 25px;
color:rgba(245,108,108,1);
}
.code-img {
width:245px;
height:245px;
margin-top: 20px;
}
.btn-area {
margin-top: 24px;
margin-bottom: 46px;
......
src/views/contacts/storeFrame.vue
......@@ -30,9 +30,9 @@
<span class="title-span">{{groupInfo.groupName}}（{{total}}家）</span>
<span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
<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>
<a class="J_edit a-href">编辑</a>
<a class="J_edit a-href" :href="'#/addGroup?groupId='+groupInfo.departmentId">编辑</a>
</span>
</div>
<div class="tab-div">
......@@ -61,7 +61,6 @@
</div>
</div>
<add-brand ref="add_brand"></add-brand>
<vue-select-store></vue-select-store>
</div>
</template>
<script>
......@@ -72,7 +71,6 @@ import storeInfo from "components/contacts/storeFrame/storeInfo";
import addBrand from "components/contacts/storeFrame/addBrand";
import employeeInfo from "components/contacts/employeeInfo";
import clerkInfo from "components/contacts/storeFrame/clerkInfo";
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "storeEstruturaContainer",
......@@ -83,8 +81,7 @@ export default {
employeeInfo,
storeInfo,
addBrand,
clerkInfo,
vueSelectStore
clerkInfo
},
data() {
return {
......@@ -109,6 +106,10 @@ export default {
storeType: ""
};
},
beforeRouteUpdate(to, from, next) {
next();
},
methods: {
handleSearchKey(keyWord) {
let params = {
......@@ -140,9 +141,20 @@ export default {
* 树形搜索结果选门店处理
*/
handleStoreSelection(store) {
console.log(store);
this.storeInfo = store;
this.showEmployee = "store";
let that = this;
let params = {storeId: store.storeId};
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) {
this.pageSize = size;
......@@ -282,111 +294,6 @@ export default {
};
</script>
<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>
static/css/index.less
......@@ -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