Commit 8c0d8e2b by fairyly

feat: 删除多余组件

parent 5f749b51
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors : 无尘
* @LastEditTime : 2020-01-14 14:44:57
-->
<!--
<wx-tree v-model="itemData" ></wx-tree>
import wxTree from './wx-tree.vue';
-->
<template>
<div class="m-l-10">
</div>
</template>
<script>
import draggable from 'vuedraggable';
import showMsg from '@/common/js/showmsg';
export default {
name: 'li-row',
components: {
draggable
},
props: {
value: {
type: [Object, Array],
default() {
return [];
}
},
itemData: {
type: [Object, Array],
default() {
return [];
}
}
},
data() {
return {
};
},
computed: {},
methods: {
/**
*
*/
},
watch: {
value: function(newData, oldData) {
const that = this;
that.trData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.trData = JSON.parse(JSON.stringify(that.value));
},
beforeDestroy() {
}
};
</script>
<style lang="less" scoped>
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-12-19 09:13:48
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:13:42
-->
<template>
<div class="employee-info">
<div class="info-cell">
<p class="title font-w-500">员工信息</p>
<el-form class="employee-info-form" :rules="rules" :model="info" ref="employeeForm" label-width="70px">
<template v-if="readOnly">
<el-form-item label="姓名" prop="name">
<p>{{ info.name }}</p>
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<p>{{ info.nationcode == '86' ? info.phoneNumber : '+' + info.nationcode + '-' + info.phoneNumber }}</p>
<!-- <countryMobile :inputWidth="380" :nationCode.sync="info.nationcode" v-model="info.phoneNumber" :holder="'请输入手机号'"> </countryMobile> -->
</el-form-item>
<el-form-item label="部门" prop="departmentId">
<p>{{ info.departmentName }}</p>
</el-form-item>
<el-form-item label="职位" prop="positionName">
<p>{{ info.positionName }}</p>
</el-form-item>
</template>
<template v-else>
<el-form-item label="姓名" prop="name">
<!-- <el-input class="employee-item-input" v-model="info.name"></el-input> -->
<limitInput :inputWidth="380" :inputValue.sync="info.name" :holder="'请输入姓名'" :maxLength="10"> </limitInput>
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<!-- <el-input v-model="info.phoneNumber" :disabled="!isNew"></el-input> -->
<countryMobile :inputWidth="380" :nationCode.sync="info.nationcode" v-model="info.phoneNumber" :holder="'请输入手机号'" :disflag="!isNew"> </countryMobile>
</el-form-item>
<el-form-item label="部门" prop="departmentId">
<el-input class="employee-item-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 class="employee-item-input" v-model="info.positionName"></el-input> -->
<limitInput :inputWidth="380" :inputValue.sync="info.positionName" :holder="'请输入职位'" :maxLength="20"> </limitInput>
</el-form-item>
</template>
</el-form>
</div>
<div class="info-cell" v-if="!readOnly">
<p class="title font-w-500">隐私设置</p>
<p class="tip">开启后所有员工不可见手机号码,不可发起电话、短信管理层之间不受影响</p>
<div class="set-manager-mode">
管理层模式
<el-switch v-model="info.managerMode" active-color="#409EFF" inactive-color="#DCDFE6"> </el-switch>
</div>
</div>
<vue-select-employee ref="parentSelector" :defaultSelection="defaultSelection" :treeSet="treeSet" :treeData="treeData" @handleSelectedList="handleSelectedList"></vue-select-employee>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import limitInput from '@/components/limit-input.vue';
import countryMobile from '@/components/common/country-mobile.vue';
import vueSelectEmployee from 'components/common/vueSelectEmployee';
import PhoneNumber from 'awesome-phonenumber';
export default {
name: 'employeeInfo',
components: {
vueSelectEmployee,
countryMobile,
limitInput
},
props: {
perId: {
type: [String, Number],
default: ''
},
isNew: {
type: Boolean,
default: false
}
},
data() {
let validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入手机号'));
} else {
let pn = new PhoneNumber('+' + this.info.nationcode + value);
if (!pn.isValid() || !pn.isMobile()) {
callback(new Error('手机号格式不正确'));
} else {
callback();
}
}
};
return {
info: {
name: '',
phoneNumber: '',
departmentId: '',
departmentName: '',
managerMode: false,
nationcode: '86'
},
treeData: {},
disabled: true,
employeeInfo: {
name: '',
phoneNumber: '',
departmentName: ''
},
defaultSelection: [],
rules: {
name: [{ required: true, message: '请输入员工姓名', 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 that = 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 || [];
}
// that.formatGroupData(treeData, personData);
that.treeData = {
treeData,
personData
};
that.disabled = false;
})
/* eslint-disable */
.catch(e => {
});
},
callGroupSelector() {
this.treeSet.dialogVisible = true;
},
handleSelectedList(obj) {
// 获取选部门空间选择的父层分组
// console.log(this.info);
let that = this;
if (obj) {
that.defaultSelection = [obj]; // 增加默认已选数据
that.info.departmentId = obj.id;
that.info.departmentName = obj.label;
}else {
that.defaultSelection = [];
that.info.departmentId = '';
that.info.departmentName = '';
}
},
getEmployInfo() {
let that = this;
let params = {
id: !!that.$route.query.employeeClerkId ? that.$route.query.employeeClerkId : that.perId
};
getRequest('/haoban-manage-web/emp/findOne', params)
.then(res => {
that.defaultSelection = [
{
departmentId: res.data.result.departmentId,
departmentName: res.data.result.departmentName,
id: res.data.result.departmentId,
label: res.data.result.departmentName
}
]
that.info = res.data.result;
that.info.managerMode = !!res.data.result.managerMode;
})
/* eslint-disable */
.catch(e => {
});
},
/**
* 提交 form
*/
async submitForm(formName) {
const that = this;
let saveBack = true;
await that.$refs[formName].validate((valid) => {
if (valid) {
saveBack = true;
} else {
saveBack = false;
}
});
return saveBack;
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
beforeMount() {
this.getGroupData();
if (!this.isNew) {
this.getEmployInfo();
}
},
computed: {
// 是否只读
readOnly() {
return !!this.$route.query.readOnly;
}
},
watch: {
perId(id, ids) {
this.getEmployInfo();
}
}
};
</script>
<style lang="scss">
.employee-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;
}
.tip {
color: #909399;
text-indent: 32px;
font-size: 14px;
margin-top: 24px;
}
.set-manager-mode {
text-indent: 52px;
color: #606266;
margin-top: 35px;
}
.employee-info-form {
padding: 24px 60px 0;
.employee-item-input {
width: 380px;
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-12-20 14:24:50
* @LastEditors: 无尘
* @LastEditTime: 2018-12-20 14:24:50
-->
<template>
<div class="employee-table">
<el-table :data="employeeList" @selection-change="selectMember" @row-click="linkToDetail">
<template v-for="prop in headList">
<el-table-column :key="prop" v-if="prop == 'selection'" type="selection" width="42"> </el-table-column>
<el-table-column :key="prop" v-if="prop == 'name'" label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
<span v-if="scope.row.isManager == 1" class="is-manager">部门负责人</span>
</template>
</el-table-column>
<el-table-column :key="prop" v-if="prop == 'phoneNumber'" label="手机号">
<template slot-scope="scope">
{{ scope.row.nationcode == '86' ? scope.row.phoneNumber : '+' + scope.row.nationcode + '-' + scope.row.phoneNumber || '--' }}
</template>
</el-table-column>
<el-table-column :key="prop" v-if="prop == 'positionName'" label="职位" prop="positionName">
<template slot-scope="scope">
{{ !!scope.row.positionName ? scope.row.positionName : '--' }}
</template>
</el-table-column>
<el-table-column :key="prop" v-if="prop == 'activationStatus'" label="状态">
<template slot-scope="scope">
<div class="status-icon" :class="scope.row.activationStatus == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: 'employee-table',
props: {
employeeList: {
type: Array,
default() {
return [];
}
},
headList: {
type: Array,
default() {
return ['selection', 'name', 'phoneNumber', 'positionName', 'activationStatus'];
}
}
},
data() {
return {
tableH: window.screen.availHeight - 180
};
},
methods: {
/**
* table选择员工
*/
selectMember(selection) {
this.$emit('selectMember', selection);
},
/**
* 跳转至员工详情
*/
linkToDetail(row) {
let path = '/employee?employeeClerkId=' + row.employeeClerkId;
this.$router.push(path);
}
}
};
</script>
<style lang="scss">
.el-table .cell .is-manager {
display: inline-block;
vertical-align: middle;
font-size: 10px;
color: #fff;
width: auto;
padding: 0 4px;
height: 13px;
text-align: center;
line-height: 15px;
background: rgba(247, 203, 39, 1);
border-radius: 2px;
}
.el-table tr {
cursor: pointer;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-02-19 12:20:38
-->
<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: "departInfo",
components: {
vueSelectEmployee
},
props: {
departInfo: {
type: Object,
default() {
return {
name: "",
parentName: "",
parentId: ""
};
}
},
treeData: {
type: [Array, Object],
default() {
return {}
}
}
},
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 // 是否单选
}
}
},
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>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:14:19
-->
<template>
<div class="jurisdiction-setting">
<div class="only-visivble-there permission-div">
<div class="permission-div-title">
<span>本部门员工仅可见本部门员工</span>
<el-switch v-model="visibleThere" @change="switchPermission(visibleThere, 'visibleThere', 'visibleSelf')" active-color="#409EFF" inactive-color="#DCDFE6"> </el-switch>
</div>
<div class="particular-setting" v-if="visibleThere">
<select-area @callPerSelector="callPerSelector" :treeData="treeData" :butList="butList" :specialList="specialList"> </select-area>
</div>
</div>
<div class="only-visivble-self permission-div">
<div class="permission-div-title">
<span>本部门员工仅可见自己</span>
<el-switch v-model="visibleSelf" @change="switchPermission(visibleSelf, 'visibleSelf', 'visibleThere')" active-color="#409EFF" inactive-color="#DCDFE6"> </el-switch>
</div>
<div class="particular-setting" v-if="visibleSelf">
<select-area @callPerSelector="callPerSelector" :treeData="treeData" :butList="selfButList" :specialList="selfSpecialList"> </select-area>
</div>
</div>
</div>
</template>
<script>
import selectArea from 'components/contacts/permissionSet/selectArea';
export default {
name: 'permissionSetting',
components: {
selectArea
},
props: {
butList: {
type: Array,
default() {
return [];
}
},
specialList: {
type: Array,
default() {
return [];
}
},
selfButList: {
type: Array,
default() {
return [];
}
},
selfSpecialList: {
type: Array,
default() {
return [];
}
},
visibleSpecialLsit: {
type: Array,
default() {
return [];
}
},
onlySelfApartList: {
type: Array,
default() {
return [];
}
},
treeData: {
type: Object,
default() {
return {};
}
},
departInfo: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
visibleThere: false,
visibleSelf: false
};
},
methods: {
/**
* 切换权限设置
*/
switchPermission(val, _this, _there) {
val && (this[_there] = !val);
if (this.visibleSelf) {
this.departInfo.type = 2;
} else if (this.visibleThere) {
this.departInfo.type = 1;
} else {
this.departInfo.type = '';
}
},
callPerSelector(type, list) {
this.$emit('callPerSelector', type, list);
}
},
mounted() {
let type = this.departInfo.type;
this.visibleThere = !!(type == 1);
this.visibleSelf = !!(type == 2);
},
watch: {
departInfo: {
handler(newValue, oldValue) {
let type = newValue.type;
this.visibleThere = !!(type == 1);
this.visibleSelf = !!(type == 2);
},
deep: true
}
}
};
</script>
<style lang="scss">
.jurisdiction-setting {
padding: 36px 32px 55px;
font-size: 14px;
.permission-div {
margin-bottom: 30px;
.permission-div-title {
line-height: 20px;
}
.particular-setting {
width: 480px;
min-height: 300px;
border-radius: 2px;
background: #f5f7fa;
margin: 32px 0;
padding: 20px 20px 1px;
}
}
.el-switch {
padding-left: 12px;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:14:28
-->
<template>
<div class="select-area">
<div class="setting-name">
个别员工不设置该权限
</div>
<ul class="particular-list">
<template v-for="(li, index) in butList">
<li class="item person-item" v-if="li.employeeClerkId" :key="index + '_' + li.employeeClerkId">
<img :src="li.headPic" v-if="!!li.headPic" />
<div class="replace-head-img" v-else>
<i class="iconfont icon-yewuduanmorentouxian"></i>
</div>
<p class="name">{{ li.label }}</p>
<i class="el-icon-circle-close" @click="delCurrent(li, 'butList')"></i>
</li>
<li class="item group-item" v-else :key="index + '_' + li.groupId">
{{ li.label }}
<i class="el-icon-circle-close" @click="delCurrent(li, 'butList')"></i>
</li>
</template>
<li class="item J_add-btn" @click="callSelector('but', butList)"><i class="el-icon-plus"></i></li>
</ul>
<div class="setting-name">
允许指定部门/人员可见
</div>
<ul class="particular-list">
<template v-for="(li, index) in specialList">
<li class="item person-item" v-if="li.employeeClerkId" :key="index + '_' + li.employeeClerkId">
<img :src="li.headPic" v-if="!!li.headPic" />
<div class="replace-head-img" v-else>
<i class="iconfont icon-yewuduanmorentouxian"></i>
</div>
<p class="name">{{ li.label }}</p>
<i class="el-icon-circle-close" @click="delCurrent(li, 'specialList')"></i>
</li>
<li class="item group-item" v-else :key="index + '_' + li.groupId">
{{ li.label }}
<i class="el-icon-circle-close" @click="delCurrent(li, 'specialList')"></i>
</li>
</template>
<li class="item J_add-btn" @click="callSelector('special', specialList)">
<i class="el-icon-plus"></i>
</li>
</ul>
</div>
</template>
<script>
import vueSelectEmployee from 'components/common/vueSelectEmployee';
export default {
name: 'select-area',
components: {
vueSelectEmployee
},
props: {
treeData: {
type: Object,
default() {
return {};
}
},
butList: {
type: Array,
default() {
return [];
}
},
specialList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
copyTreeData: JSON.parse(JSON.stringify(this.treeData))
};
},
methods: {
/**
* 删除选中的人
*/
delCurrent(person, listName) {
let that = this;
let list = that[listName];
list.splice(list.indexOf(person), 1);
},
/**
* 处理树形控件选择的数据
*/
handleSelectedList(list) {
this.butList = list;
},
/**
* 唤起选人插件
*/
callSelector(type, list) {
this.$emit('callPerSelector', type, list);
}
}
};
</script>
<style lang="scss">
.select-area {
.setting-name {
.a-href {
font-size: 12px;
margin-left: 10px;
}
}
/deep/ .icon-yewuduanmorentouxian {
font-size: 20px;
}
.particular-list {
.replace-head-img {
width: 40px;
height: 40px;
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
background: rgba(64, 158, 255, 1);
}
}
// .particular-list {
// display: flex;
// flex-wrap: wrap;
// margin-bottom: 30px;
// .item {
// position: relative;
// margin-right: 24px;
// margin-top: 30px;
// width:40px;
// .el-icon-circle-close {
// position: absolute;
// font-size: 16px;
// color: #808995;
// right: -8px;
// top: -8px;
// cursor: pointer;
// }
// img {
// width: 100%;
// border-radius:4px;
// }
// .name {
// font-size: 12px;
// text-align: center;
// margin-top: 20px;
// }
// &.group-item {
// padding: 0 10px;
// width: auto;
// height:30px;
// line-height: 32px;
// background:rgba(236,245,255,1);
// border:1px solid rgba(217,236,255,1);
// border-radius:4px;
// font-size:12px;
// color:rgba(64,158,255,1);
// margin-top: 34px;
// }
// &.J_add-btn {
// height:40px;
// background:rgba(251,253,255,1);
// border:1px dashed rgba(192,204,218,1);
// border-radius:50%;
// text-align: center;
// line-height: 40px;
// font-size: 16px;
// box-sizing: border-box;
// cursor: pointer;
// }
// }
// }
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-12-10 10:00:02
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:13:26
-->
<template>
<div class="searh-menu-container">
<div class="p-0-15">
<el-input prefix-icon="el-icon-search" v-model="searchKey" :placeholder="storeFrame ? '姓名/手机号/部门/code' : '姓名/手机号/部门'" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
<slot name="buttonBox"></slot>
<el-tree v-if="!searchResultShow" class="search-menu" node-key="id" :default-expanded-keys="defaultOpen" :data="menuData" :highlight-current="true" :expand-on-click-node="false" :props="myProps" @node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : 'icon-tongshi-zuzhijiagou'"></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
<div class="search-result-container m-t-15" v-if="searchResultShow">
<template v-if="storeFrame">
<template v-for="(brand, index) in brandList">
<div :key="brand.topDepartment.brandId + '_' + index" v-if="brand.departmentList.length > 0 || brand.storeList.length > 0 || brand.searchList.length > 0">
<div>
<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>
</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', defaultId == department.groupId ? 'active-item' : '']" 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', defaultId == employee.employeeClerkId ? 'active-item' : '']" 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>
<script>
import { formatTreeData } from '@/utils/index';
export default {
name: 'searchMenu',
components: {},
props: {
treeData: {
type: Array,
required: true
},
searchResult: {
type: Object,
required: true
},
storeFrame: {
type: Boolean,
default: false
}
},
data() {
return {
searchKey: '',
searchResultShow: false,
myProps: {
children: 'childrens',
label: 'label',
disabled: 'disabled'
},
menuData: [],
defaultOpen: [],
defaultId: '' // 默认选择的 id
};
},
methods: {
/**
* 清楚输入框
*/
clearFn() {
this.searchResultShow = false;
this.$nextTick(function() {
document.querySelector('.el-tree-node').classList.add('is-current');
});
this.$emit('clearSearch');
},
/**
* 关键字搜索
*/
searchFn() {
if (this.searchKey == '') {
this.searchResultShow = false;
return false;
}
this.searchResultShow = true;
this.$emit('handleSearchKey', this.searchKey);
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
let that = this;
if (obj.id != that.defaultId && !!document.querySelector('.el-tree-node')) {
document.querySelector('.el-tree-node').classList.remove('is-current');
}
that.defaultId = obj.groupId;
that.$emit('handleTreeSelection', obj, node, 'node');
},
/**
* 搜索结果中选人
*/
selectEmployee(person) {
let that = this;
that.defaultId = person.employeeClerkId;
that.$emit('handleEmployeeSelection', person, 'employee');
},
/**
* 搜索结果中选门店
*/
handleStoreClick(store) {
let that = this;
that.$emit('handleStoreSelection', store, 'store');
}
},
filter: {},
computed: {
// 搜索结果返回的员工,部门,品牌列表
employeeList() {
if (this.searchResult.searchList) {
return this.searchResult.searchList;
} else {
return [];
}
},
departmentList() {
if (this.searchResult.departmentList) {
return this.searchResult.departmentList;
} else {
return [];
}
},
brandList() {
if (this.searchResult.brandList) {
return this.searchResult.brandList;
} else {
return [];
}
}
},
watch: {
treeData(newArr, old) {
const that = this;
let obj = formatTreeData(newArr);
that.defaultOpen = obj.defaultOpen;
that.menuData = obj.menuArr;
if (!!that.menuData.length) {
that.$nextTick(function() {
that.defaultId = !!that.menuData.length ? that.menuData[0].id : '';
document.querySelector('.el-tree-node').classList.add('is-current');
});
}
}
}
};
</script>
<style lang="scss">
.searh-menu-container {
overflow-y: auto;
overflow-x: auto;
width: 260px;
max-width: 260px;
min-width: 260px;
background: #eef1f8;
padding: 20px 0;
box-sizing: border-box;
.p-0-15 {
padding: 0 15px;
}
.no-data-tip {
text-align: center;
margin-top: 50px;
color: #5b6a80;
font-size: 15px;
}
.slot-button {
text-align: center;
margin-top: 20px;
.el-icon-info {
color: #c0c4cc;
cursor: pointer;
&:hover {
color: #000;
}
}
}
.search-menu {
margin-top: 20px;
color: #606266;
font-size: 14px;
background: #eef1f8;
min-width: 100%;
display: inline-block !important;
.el-tree-node {
.el-tree-node__content {
height: 36px;
.iconfont {
color: #409eff;
margin-right: 5px;
opacity: 0.6;
}
&:hover {
color: #fff;
background: #409eff;
.iconfont {
color: #fff;
}
}
}
&.is-current {
.el-tree-node__content {
.iconfont {
opacity: 0.8;
}
}
.el-tree-node__children {
.iconfont {
opacity: 0.6;
}
}
}
}
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background: #409eff;
color: #fff;
.iconfont {
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;
background: #fff;
box-sizing: border-box;
border-bottom: 1px solid #e4e7ed;
cursor: pointer;
.iconfont {
color: #409eff;
}
.from-group {
float: right;
}
&:hover {
background: #409eff;
color: #fff;
.iconfont {
color: #fff;
}
}
&.active-item {
background: #409eff;
color: #fff;
.iconfont {
color: #fff;
}
}
}
}
}
</style>
<template>
<div class="tip-area">
<img src="../../../assets/guid6.png" />
<p v-if="!groupInfo.isMine">暂无成员,联系建立共享企业的管理员,对方添加后即可查看</p>
<template v-else>
<p v-if="!!groupInfo.level">暂无成员,开始添加成员吧</p>
<p v-if="!groupInfo.level">暂无成员,开始添加子分组吧</p>
<el-button class="add-new-btn" @click="addNew" v-if="!!groupInfo.level">添加成员</el-button>
</template>
</div>
</template>
<script>
export default {
name: 'addNewGuid',
props: {
groupInfo: {
type: Object,
required: true
}
},
methods: {
addNew() {
let isStoreGroup = this.groupInfo.isStoreGroup;
if (!isStoreGroup) {
this.$emit('addEmployee');
} else {
this.$emit('addStoreEmployee');
}
}
}
};
</script>
<style lang="scss">
.tip-area {
width: 100%;
text-align: center;
padding: 150px 0 50px 0;
p {
font-size: 14px;
font-weight: 400;
color: rgba(128, 137, 149, 1);
}
.add-new-btn {
border: 1px solid #409eff;
color: #409eff;
margin-top: 24px;
}
}
</style>
<template>
<div>
<el-table ref="clerkViewTable" class="diy-table" :data="tableData" @selection-change="selectMember">
<el-table-column type="selection" width="42"></el-table-column>
<el-table-column label="门店" width="175" prop="employeeStoreName"></el-table-column>
<el-table-column label="门店code" prop="storeCode" width="175"></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>
</ul>
</template>
<template slot-scope="scope">
<ul>
<li v-for="clerk in scope.row.ext.store.ext.employeeClerkList" :key="clerk.employeeClerkId" class="clerk-obj-li">
<div class="clerk-name clerk-cell">{{ clerk.name }}</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.activationStatus == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</div>
</li>
</ul>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
// import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: 'clerkView',
props: {
tableData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
tableH: window.screen.availHeight - 440 - 250,
storeType: 0,
typeArr: ['全部类型', '自营', '联营', '代理(加盟)', '代销', '托管'],
storeStatus: '',
showChildMember: false
};
},
methods: {
/**
* table选择门店
*/
selectMember(selection) {
this.$emit('selectMember', selection);
}
},
mounted() {
let list = this.tableData;
list.forEach(store => {
store.ext.store = !!store.ext.store ? store.ext.store : {};
store.ext.store.ext = !!store.ext.store ? store.ext.store.ext : { employeeClerkList: [] };
if (!store.ext.store.ext) {
store.ext.store.ext = { employeeClerkList: [] };
}
store.ext.store.ext.employeeClerkList = !!store.ext.store ? store.ext.store.ext.employeeClerkList : [];
store.storeCode = !!store.ext.store ? store.ext.store.storeCode : '';
});
},
watch: {
tableData(table) {
table.forEach(store => {
store.ext.store = !!store.ext.store ? store.ext.store : {};
store.ext.store.ext = !!store.ext.store ? store.ext.store.ext : { employeeClerkList: [] };
if (!store.ext.store.ext) {
store.ext.store.ext = { employeeClerkList: [] };
}
store.ext.store.ext.employeeClerkList = !!store.ext.store ? store.ext.store.ext.employeeClerkList : [];
store.storeCode = !!store.ext.store ? store.ext.store.storeCode : '';
});
}
}
};
</script>
<style lang="scss">
.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>
<template>
<div class="employee-info">
<div class="info-cell">
<p class="title">员工信息</p>
<el-form class="employee-info-form" :model="info" label-width="70px">
<el-form-item label="姓名:" prop="name">
<p>{{ info.name }}</p>
</el-form-item>
<el-form-item label="手机号:" prop="phoneNumber">
<p>{{ info.nationcode == '86' ? info.phoneNumber : '+' + info.nationcode + '-' + info.phoneNumber }}</p>
</el-form-item>
<el-form-item label="部门:" prop="departmentId">
<p>{{ info.departmentName }}</p>
</el-form-item>
<el-form-item label="职位:" prop="positionName">
<p>{{ info.positionName }}</p>
</el-form-item>
</el-form>
</div>
<vue-select-employee ref="parentSelector" :treeSet="treeSet" :treeData="treeData" @handleSelectedList="handleSelectedList"> </vue-select-employee>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import vueSelectEmployee from 'components/common/vueSelectEmployee';
export default {
name: 'employeeInfo',
components: {
vueSelectEmployee
},
props: {
perId: {
type: [String, Number],
default: ''
},
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' }],
phoneNumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }]
},
treeSet: {
isSelectPerson: false,
dialogVisible: false,
isSingle: true // 是否单选
}
};
},
methods: {
// 获取分组信息
getGroupData() {
let that = 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 || [];
}
// that.formatGroupData(treeData, personData);
that.treeData = {
treeData,
personData
};
that.disabled = false;
})
/* eslint-disable */
.catch(e => {
});
},
callGroupSelector() {
this.treeSet.dialogVisible = true;
},
handleSelectedList(obj) {
this.info.departmentId = obj.id;
this.info.departmentName = obj.label;
},
getEmployInfo() {
let that = this;
let params = {
id: !!that.$route.query.employeeClerkId ? that.$route.query.employeeClerkId : that.perId
};
getRequest('/haoban-manage-web/emp/findOne', params)
.then(res => {
that.info = res.data.result;
that.info.managerMode = !!res.data.result.managerMode;
})
/* eslint-disable */
.catch(e => {
});
}
},
beforeMount() {
this.getGroupData();
if (!this.isNew) {
this.getEmployInfo();
}
},
watch: {
perId(id, ids) {
this.getEmployInfo();
}
}
};
</script>
<style lang="scss">
.employee-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;
}
.tip {
color: #909399;
text-indent: 32px;
font-size: 14px;
margin-top: 24px;
}
.set-manager-mode {
text-indent: 52px;
color: #606266;
margin-top: 35px;
}
.employee-info-form {
padding: 24px 60px 0;
/* .el-input {
width: 380px;
} */
}
}
}
</style>
<template>
<div class="employee-table">
<el-table :data="tableData" @selection-change="selectMember" @row-click="linkToDetail">
<el-table-column type="selection" width="42"> </el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="手机号">
<template slot-scope="scope">
{{ scope.row.nationcode == '86' ? scope.row.phoneNumber : '+' + scope.row.nationcode + '-' + scope.row.phoneNumber || '--' }}
</template>
</el-table-column>
<el-table-column label="职位">
<template slot-scope="scope">
{{ scope.row.positionName || '--' }}
</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<div class="status-icon" :class="scope.row.activationStatus == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'employee-table',
props: {
employeeList: {
type: Array,
default() {
return [];
}
},
headList: {
type: Array,
default() {
return ['selection', 'name', 'phoneNumber', 'positionName', 'activationStatus'];
}
},
groupInfo: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
tableH: window.screen.availHeight - 440 - 250,
tableData: []
};
},
methods: {
/**
* table选择员工
*/
selectMember(selection) {
this.$emit('selectMember', selection);
},
/**
* 跳转至员工详情
*/
linkToDetail(row) {
if (!!this.groupInfo.isMine) {
window.location.href = '#/employee?employeeClerkId=' + row.employeeClerkId;
} else {
// 如果是对方企业共享的职员只能查看信息不能修改
window.location.href = '#/employee?readOnly=1&employeeClerkId=' + row.employeeClerkId;
}
}
},
mounted() {
// let arr = [];
// console.log( this.employeeList, " this.employeeList");
// this.employeeList.forEach(clerk => {
// arr.push(clerk.ext.employeeClerk);
// });
// this.tableData = arr;
let list = this.employeeList;
let arr = [];
list.forEach(clerk => {
clerk.ext.employeeClerk.sharedContactEmployeeStoreId = clerk.sharedContactEmployeeStoreId;
arr.push(clerk.ext.employeeClerk);
});
this.tableData = arr;
},
watch: {
employeeList(list) {
let arr = [];
list.forEach(clerk => {
clerk.ext.employeeClerk.sharedContactEmployeeStoreId = clerk.sharedContactEmployeeStoreId;
arr.push(clerk.ext.employeeClerk);
});
this.tableData = arr;
}
}
};
</script>
<style lang="scss">
.el-table .cell .is-manager {
display: inline-block;
font-size: 10px;
color: #fff;
width: auto;
padding: 0 4px;
height: 13px;
text-align: center;
line-height: 15px;
background: rgba(247, 203, 39, 1);
border-radius: 2px;
}
.el-table tr {
cursor: pointer;
}
</style>
<template>
<div class="guid-div">
<div class="guid">
<p class="title">共享通讯录操作引导</p>
<div class="flex-div">
<div class="step">
<img src="../../../assets/guid1.png" />
<p>点击建立共享企业,下载二维码 发给所要建立共享的企业</p>
</div>
<div class="step">
<img src="../../../assets/guid2.png" />
<p>从企业通讯录中添加对方可见我方 企业的成员及门店</p>
</div>
<div class="step">
<img src="../../../assets/guid3.png" />
<p>添加完成之后必须点击发布,所添加或 修改的信息才会同步至对方共享通讯录中</p>
</div>
</div>
</div>
<div class="guid">
<p class="des">应用场景</p>
<p class="des">适用于集团公司与子公司建立通讯录部分成员共享机制</p>
<p class="des">适用于总部与代理商、加盟商建立通讯录部分成员共享机制</p>
</div>
<div style="text-align: center;margin-top:50px;">
<a href="#/shareCode">
<el-button type="primary">建立共享企业</el-button>
</a>
</div>
</div>
</template>
<style lang="scss">
.guid-div {
width: 100%;
height: 690px;
box-sizing: border-box;
background: rgba(255, 255, 255, 1);
border-radius: 2px;
padding: 30px;
.guid {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 238, 245, 1);
border-radius: 4px;
padding: 30px;
margin-bottom: 24px;
font-size: 14px;
color: rgba(96, 98, 102, 1);
.des {
text-align: center;
margin-bottom: 30px;
&:first-child {
font-size: 16px;
margin-bottom: 44px;
}
}
.title {
font-size: 16px;
font-weight: 500;
color: rgba(48, 49, 51, 1);
margin-bottom: 50px;
text-align: center;
}
.flex-div {
display: flex;
.step {
flex: 1;
text-align: center;
height: 200px;
img {
height: 96px;
}
p {
width: 260px;
height: 34px;
line-height: 24px;
margin: 40px auto 0;
}
}
}
}
}
</style>
<template>
<div class="per-set-div">
<el-form label-width="150px">
<el-form-item label="当前范围:">
<span>{{ groupInfo.label }}</span>
</el-form-item>
<el-form-item label="设置可见范围(员工):">
<ul class="particular-list">
<template v-for="(li, index) in visibleList">
<li class="item person-item" v-if="li.employeeClerkId" :key="index + '_' + li.id">
<img :src="li.headPic" v-if="!!li.headPic" />
<div class="replace-head-img" v-else>
<i class="iconfont icon-yewuduanmorentouxian"></i>
</div>
<p class="name">{{ li.label }}</p>
<i class="el-icon-circle-close" @click="delCurrent(li, 'visibleList')"></i>
</li>
</template>
<li class="item J_add-btn" @click="callPerSelector"><i class="el-icon-plus"></i></li>
</ul>
</el-form-item>
<el-form-item label="设置可见范围(门店):">
<ul class="particular-list">
<template v-for="(li, index) in visibleStoreList">
<li class="item group-item" :key="index + '_' + li.id">
{{ li.label }}
<i class="el-icon-circle-close" @click="delCurrent(li, 'visibleStoreList')"></i>
</li>
</template>
<li class="item J_add-btn" @click="callSelector"><i class="el-icon-plus"></i></li>
</ul>
</el-form-item>
</el-form>
<p class="m-t-20">
<el-button type="primary" @click="setSharedGroupVisible">确定</el-button>
<el-button @click="cancelSet">取消</el-button>
</p>
<vue-select-store ref="storeSelector" :defaultList="visibleStoreList" @handleSelectedList="handleSelectedList" :treeSet="treeSet" selectType="store"></vue-select-store>
<vue-select-employee :defaultSelection="visibleList" ref="selectEmployee" :onlyPerson="true" @handleSelectedList="handlePerSelectedList" :treeSet="perTreeSet" :changed="changed"></vue-select-employee>
</div>
</template>
<script>
import { getRequest, postJson } from '@/api/api';
import vueSelectStore from 'components/common/vueSelectStore';
import vueSelectEmployee from 'components/common/vueSelectEmployee';
export default {
name: 'permission-set',
components: {
vueSelectStore,
vueSelectEmployee
},
props: {
groupInfo: {
type: Object,
required: true
}
},
data() {
return {
visibleList: [],
visibleStoreList: [],
treeSet: {
isSelectPerson: false,
dialogVisible: false,
isSingle: false // 是否单选
},
perTreeSet: {
isSelectPerson: true,
dialogVisible: false,
isSingle: false // 是否单选
},
dialogVisible: true,
changed: ''
};
},
methods: {
getVisibleRange() {
let that = this;
let group = that.groupInfo;
let paramas = {
sharedContactGroupId: group.sharedContactGroupId
};
getRequest('/haoban-manage-web/shared-contact/get-shared-group-visible-range', paramas)
.then(res => {
if (res.data.errorCode == 1) {
// that.visibleList = res.data.result || [];
that.formatList(res.data.result);
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
},
formatList(list) {
let that = this;
let perList = [];
let storeList = [];
list.forEach(li => {
li.label = li.name;
// 根据type值判断是门店架构下的门店还是行政架构下的人,分别放到对应列表中
if (li.type == 1) {
li.employeeClerkId = li.id;
perList.push(li);
} else {
li.storeId = li.id;
storeList.push(li);
}
});
that.visibleList = perList;
that.visibleStoreList = storeList;
},
delCurrent(item, list) {
let idx = this[list].indexOf(item);
this[list].splice(idx, 1);
},
callSelector() {
this.treeSet.dialogVisible = true;
},
callPerSelector() {
this.changed = 'permission';
this.perTreeSet.dialogVisible = true;
},
setSharedGroupVisible() {
let that = this;
let allList = that.visibleList.concat(that.visibleStoreList);
let arr = [];
allList.forEach(li => {
let type = li.employeeClerkId ? 1 : 2;
arr.push({
id: li.id,
type
});
});
let params = {
visibleMemberList: [
{
memberList: arr,
sharedContactGroupId: that.groupInfo.id
}
]
};
postJson('/haoban-manage-web/shared-contact/set-shared-group-visible-range', params)
.then(res => {
if (res.data.errorCode == 1) {
that.$message.success({
message: res.data.message
});
that.getVisibleRange();
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
},
cancelSet() {
this.$emit('cancelSet');
},
handleSelectedList(list) {
this.visibleStoreList = list;
},
handlePerSelectedList(list) {
this.visibleList = list;
}
},
beforeMount() {
this.getVisibleRange();
},
/* eslint-disable */
mounted() {
}
};
</script>
<style lang="scss">
.per-set-div {
width: 100%;
height: 690px;
background: #fff;
padding: 30px;
box-sizing: border-box;
.particular-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
.item {
position: relative;
margin-right: 24px;
width: 40px;
display: flex;
flex-direction: column;
margin-bottom: 30px;
.el-icon-circle-close {
position: absolute;
font-size: 16px;
color: #808995;
right: -8px;
top: -8px;
cursor: pointer;
}
img {
width: 40px;
height: 40px;
border-radius: 4px;
}
.replace-head-img {
width: 40px;
height: 40px;
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
background: rgba(64, 158, 255, 1);
}
.name {
font-size: 12px;
text-align: center;
margin-top: 10px;
overflow-wrap: break-word;
line-height: 1.2;
}
&.group-item {
padding: 0 10px;
width: auto;
height: 30px;
line-height: 32px;
background: rgba(236, 245, 255, 1);
border: 1px solid rgba(217, 236, 255, 1);
border-radius: 4px;
font-size: 12px;
color: rgba(64, 158, 255, 1);
}
&.J_add-btn {
height: 40px;
background: rgba(251, 253, 255, 1);
border: 1px dashed rgba(192, 204, 218, 1);
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 16px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-01-09 11:47:38
* @LastEditors: 无尘
* @LastEditTime: 2019-01-09 11:47:38
-->
<template>
<div class="staff-info-panel">
<div class="info-title m-b-50 font-16 color-303133">员工档案信息将应用在以下两个地方</div>
<div class="flex flex-align-center">
<div class="flex-1">
<img src="../../assets/guid4.png" alt="" />
<p class="m-t-20 font-14 color-606266">个人信息页展示</p>
</div>
<div class="flex-1">
<img src="../../assets/guid5.png" alt="" />
<p class="m-t-20 font-14 color-606266">员工档案</p>
</div>
</div>
<div class="info-btn m-t-60 font-14">
<el-button type="primary" @click="$router.push('/staffRecordsTemplate')">进入档案设置</el-button>
</div>
</div>
</template>
<script>
// import showMsg from '@/common/js/showmsg';
// import errMsg from '@/common/js/error';
// import strLength from '@/common/js/strlen';
// import { _debounce, formatDate } from '@/common/js/public';
// import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: 'staff-info-set',
data() {
return {};
},
methods: {
/**
* 表格---多选
*/
},
// mounted() {},
components: {}
};
</script>
<style lang="less" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-303133 {
color: #303133;
}
.color-606266 {
color: #606266;
}
.font-14 {
font-size: 14px;
}
.font-16 {
font-size: 16px;
}
.w-80 {
width: 80px;
}
.w-130 {
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.m-b-50 {
margin-bottom: 50px;
}
.m-t-20 {
margin-top: 20px;
}
.m-t-60 {
margin-top: 60px;
}
.common-wrap__page {
margin-top: 24px;
}
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.staff-info-panel {
width: 600px;
margin: 0 auto;
text-align: center;
img {
width: 68px;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-01-09 14:38:33
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:13:14
-->
<template>
<div class="staff-prob-panel">
<div class="depart-cell">
<!-- <div class="info-title font-16 color-303133">行政架构设置</div> -->
<div class="m-t-24"><span class="font-14 color-606266 p-r-12">设置企业试用期时间</span><el-input-number v-model="probObj.probationDay" controls-position="right" @change="handleChange" :min="0" :max="31"> </el-input-number><span class="font-14 color-606266 p-l-12"></span><span class="font-14 color-606266 p-l-12 p-r-12"> + </span><el-input-number v-model="probObj.probationMonth" controls-position="right" @change="handleChange" :min="0" :max="6"> </el-input-number><span class="font-14 color-606266 p-l-12"></span></div>
<div class="p-l-138 m-t-24">
<el-button type="primary" @click="saveSet">保 存</el-button>
</div>
</div>
<!-- <div class="depart-cell">
<div class="info-title m-b-50 font-16 color-303133">门店架构设置</div>
<el-radio-group v-model="activeName" style="margin-bottom: 30px;">
<template v-for="(item,index) in brandList">
<el-radio-button label="top" :key="index+item.">top</el-radio-button>
</template>
</el-radio-group>
</div> -->
</div>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'staff-info-set',
data() {
return {
activeName: '',
brandList: [],
probObj: {
probationDay: '',
probationMonth: ''
}
};
},
methods: {
/**
* 值改变
*/
/* eslint-disable */
handleChange(value) {},
/**
* 保存
*/
saveSet: _debounce(function() {
const that = this;
if (that.probObj.probationDay == '' || that.probObj.probationMonth == '') {
that.$message.error({
duration: 1000,
message: '请设置时间'
});
return;
}
let para = {
day: that.probObj.probationDay,
month: that.probObj.probationMonth
};
postRequest('/haoban-manage-web/enterprise-probation-period-setting.json', para)
.then(res => {
// console.log(res,res.data,res.data.errorCode)
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}, 500),
/**
* 获取品牌列表
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/brand/list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandList = resData.result;
that.activeName = resData.result[0].groupId;
that.getStoreAuth(resData.result[0].groupId, 0);
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取设置数据
*/
getProbData() {
const that = this;
postRequest('/haoban-manage-web/find-enterprise-probation-period', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.probObj = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getProbData();
},
components: {}
};
</script>
<style lang="less" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-303133 {
color: #303133;
}
.color-606266 {
color: #606266;
}
.font-14 {
font-size: 14px;
}
.font-16 {
font-size: 16px;
}
.w-80 {
width: 80px;
}
.w-130 {
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.p-l-12 {
padding-left: 12px;
}
.p-l-138 {
padding-left: 138px;
}
.p-r-12 {
padding-right: 12px;
}
.m-b-50 {
margin-bottom: 50px;
}
.m-t-20 {
margin-top: 20px;
}
.m-t-24 {
margin-top: 24px;
}
.m-t-60 {
margin-top: 60px;
}
.common-wrap__page {
margin-top: 24px;
}
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.staff-prob-panel {
/*width: 600px;*/
/*margin: 0 auto;*/
text-align: left;
min-height: calc(100% - 240px);
}
</style>
let defineInfo = [
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '单行输入框',
systemFlag: false,
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fieldType: '0',
fixed: false,
fieldDescription: '请输入',
fieldOperations: {
ruleContent: [], // 单选 日期有
fieldContent: [] // 选项
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '多行输入框',
systemFlag: false,
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fieldType: '1',
fixed: false,
fieldDescription: '请输入',
fieldOperations: {
ruleContent: [], // 单选 日期有
fieldContent: [] // 选项
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '单选框',
systemFlag: false,
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fieldType: '2',
fixed: false,
fieldDescription: '请选择',
fieldOperations: {
ruleContent: [],
fieldContent: [
{ type: 'radio', name: '选项1' },
{ type: 'radio', name: '选项2' },
{ type: 'radio', name: '选项3' }
]
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '多选框',
systemFlag: false,
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fieldType: '3',
fixed: false,
fieldDescription: '请选择',
fieldOperations: {
ruleContent: [],
fieldContent: [
{ type: 'checkbox', name: '选项1' },
{ type: 'checkbox', name: '选项2' },
{ type: 'checkbox', name: '选项3' }
]
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '日期',
systemFlag: false,
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fieldType: '4',
fixed: false,
fieldDescription: '请选择',
fieldOperations: {
typeValue: 'yyyy-MM-dd',
ruleContent: [
{ type: 'radio', name: '年-月-日', key: 'yyyy-MM-dd', isEdit: 1 },
{ type: 'radio', name: '年-月', key: 'yyyy-MM', isEdit: 1 }
],
fieldContent: [] // 选项
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '日期区间',
systemFlag: false,
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fieldType: '5',
fixed: false,
fieldOperations: {
startName: '开始时间',
endName: '结束时间',
startDescription: '请选择开始时间',
endDescription: '请选择结束时间',
typeValue: 'yyyy-MM-dd',
ruleContent: [
{ type: 'radio', name: '年-月-日', key: 'yyyy-MM-dd', isEdit: 1 },
{ type: 'radio', name: '年-月', key: 'yyyy-MM', isEdit: 1 }
],
fieldContent: [] // 选项
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '数字输入框',
systemFlag: false,
fieldType: '6', // 字段类型 数字输入框
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fixed: false,
fieldDescription: '请输入',
fieldOperations: {
ruleContent: [], // 单选 日期有
fieldContent: [], // 选项
unit: '元' // 数字单位
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
},
{
parentCode: 'defineInfo',
fieldCode: '-1',
fieldName: '图片',
systemFlag: false,
fieldType: '7', // 字段类型
fieldEdited: 1, // 修改(0:不可修改,1:可修改)
fixed: false,
fieldDescription: '最多上传9张图片',
fieldOperations: {
ruleContent: [], // 单选 日期有
fieldContent: [] // 选项
},
isMust: false,
staffRecordsIds: {
staffVisible: '1',
staffModify: '1'
}
}
];
let cardInfo = [
{
parentCode: 'cardInfo',
fieldCode: '',
name: '单行输入框',
title: '',
type: '',
fixed: false
}
];
let tradeInfo = [
{
parentCode: 'tradeInfo',
fieldCode: '',
name: '单行输入框',
title: '',
type: '',
fixed: false
}
];
let birthdayMemberInfo = [
{
parentCode: 'birthdayMemberInfo',
fieldCode: '',
name: '单行输入框',
title: '',
type: '',
fixed: false
}
];
let memberInfo = [
{
parentCode: 'memberInfo',
fieldCode: '',
name: '单行输入框',
title: '',
type: '',
fixed: false
}
];
let powerInfo = [
{
parentCode: 'powerInfo',
fieldCode: '',
name: '单行输入框',
title: '',
type: '',
fixed: false
}
];
export default {
/* baseInfo: function() {
return baseInfo;
},
jobInfo: function() {
return jobInfo;
},
selfInfo: function() {
return selfInfo;
},
eduInfo: function() {
return eduInfo;
},
contractInfo: function() {
return contractInfo;
},
contactInfo: function() {
return contactInfo;
},
personalInfo: function() {
return personalInfo;
}, */
cardInfo: function() {
return cardInfo;
},
tradeInfo: function() {
return tradeInfo;
},
birthdayMemberInfo: function() {
return birthdayMemberInfo;
},
memberInfo: function() {
return memberInfo;
},
powerInfo: function() {
return powerInfo;
},
defineInfo: function() {
return defineInfo;
}
};
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-02-19 12:20:38
-->
<template>
<div>
<el-dialog title="新建品牌" width="422px" :visible.sync="dialogVisible">
<p>请输入品牌名称</p>
<!-- <el-input v-model="brandName" class="m-t-20"></el-input> -->
<div class="m-t-20">
<limitInput :inputWidth="380" :inputValue.sync="brandName" :holder="'请输入品牌名称'" :maxLength="50"> </limitInput>
</div>
<div class="btn-box t-rt m-t-20 m-b-10">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveFn">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { getRequest } from '@/api/api';
export default {
name: 'add-brand-dialog',
components: {
limitInput
},
data() {
return {
dialogVisible: false,
brandName: '',
brand: ''
};
},
methods: {
saveFn() {
if (!this.brandName) {
this.$message.error({
message: '请输入品牌名称'
});
} else {
let that = this;
let params = {
brandName: that.brandName
};
getRequest('/haoban-manage-web/brand/insert', params)
.then(res => {
if (res.data.errorCode == 1) {
that.$emit('addSuccess');
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
}
}
}
};
</script>
<style lang="scss">
.danger-tip {
width: 100%;
height: 36px;
line-height: 36px;
background: rgba(253, 246, 236, 1);
border-radius: 4px;
padding: 0 14px;
box-sizing: border-box;
margin-top: 24px;
color: #e6a23c;
font-size: 13px;
.el-icon-info {
font-size: 16px;
margin-right: 7px;
vertical-align: middle;
}
}
.select-div {
width: 100%;
margin-top: 20px;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-02-19 12:20:38
-->
<template>
<div class="form-container bdr-box">
<el-form ref="clerk_info" :model="clerkInfo" :rules="rules" class="add-clerk-form" label-width="80px">
<el-form-item label="姓名" prop="name">
<!-- <el-input class="clerk-info-input" v-model="clerkInfo.name"></el-input> -->
<limitInput :inputWidth="380" :inputValue.sync="clerkInfo.name" :holder="'请输入姓名'" :maxLength="10"> </limitInput>
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<!-- <el-input class="clerk-info-input" v-model="clerkInfo.phoneNumber" :disabled="!isAddnew"></el-input> -->
<countryMobile :inputWidth="380" :nationCode.sync="clerkInfo.nationcode" v-model="clerkInfo.phoneNumber" :holder="'请输入手机号'" :disflag="!isAddnew"> </countryMobile>
</el-form-item>
<el-form-item label="门店" prop="storeName">
<el-input class="clerk-info-input" v-model="clerkInfo.storeName" @focus="callSelector" :disabled="!isAddnew"></el-input>
</el-form-item>
<el-form-item label="code" prop="code">
<!-- <el-input class="clerk-info-input" v-model="clerkInfo.code" @blur="value => toInputCode(value)" :disabled="gicFlag && !isAddnew"></el-input> -->
<limitInput :inputWidth="380" :disflag="gicFlag && !isAddnew" :inputValue.sync="clerkInfo.code" :holder="'请输入工号或员工代码'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="职位" prop="positionName">
<!-- <el-input class="clerk-info-input" v-model="clerkInfo.positionName"></el-input> -->
<limitInput :inputWidth="380" :inputValue.sync="clerkInfo.positionName" :holder="'请输入职位'" :maxLength="20"> </limitInput>
</el-form-item>
</el-form>
<div class="btn-box">
<el-button type="primary" @click="saveFn">保 存</el-button>
<el-button v-if="!gicFlag && isAddnew" type="primary" @click="saveFn(1)">保存并继续添加</el-button>
<el-button v-if="!gicFlag" @click="cancel">取 消</el-button>
</div>
<vue-select-store ref="storeSelector" selectType="store" :defaultList="defaultList" :treeSet="treeSet" @handleSelectedList="handleSelectedList"></vue-select-store>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import vueSelectStore from 'components/common/vueSelectStore';
import { getRequest } from '@/api/api';
// import { _debounce } from '@/common/js/public';
import countryMobile from '@/components/common/country-mobile.vue';
import PhoneNumber from 'awesome-phonenumber';
export default {
name: 'clerk-info-form',
props: {
isAddnew: {
type: Boolean, // 判断是新增店员还是编辑店员
default: false
},
perId: {
type: [String, Number],
default: ''
},
firstLevelId: {
type: [String, Number],
default: ''
},
storeType: {
type: [String, Number],
default: ''
},
// gic 同步标志
gicFlag: {
type: Boolean,
default: false
}
},
components: {
vueSelectStore,
countryMobile,
limitInput
},
data() {
let validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入手机号'));
} else {
let pn = new PhoneNumber('+' + this.clerkInfo.nationcode + value);
if (!pn.isValid() || !pn.isMobile()) {
callback(new Error('手机号格式不正确'));
} else {
callback();
}
}
};
let validateCode = (rule, value, callback) => {
if (value == '') {
return callback(new Error('请输入工号或员工代码'));
} else {
let codeFlag = /^[A-Za-z0-9_\u4e00-\u9fa5]+$/.test(value);
if (!codeFlag) {
this.clerkInfo.code = value.replace(/[^A-Za-z0-9_\u4e00-\u9fa5]+/g, '');
// callback(new Error('code 格式不正确'));
} else {
callback();
}
}
};
return {
rules: {
name: [{ required: true, message: '请输入店员姓名', trigger: 'blur' }],
phoneNumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
storeName: [{ required: true, message: '请选择门店', trigger: 'change' }],
code: [{ required: true, validator: validateCode, trigger: 'blur' }]
// positionName: [{ required: true, message: '请输入店员职位', trigger: 'blur' }]
},
clerkInfo: {
storeName: this.$route.query.storeName || '',
storeId: this.$route.query.storeId || '',
managerMode: false,
positionName: '职员',
nationcode: '86'
},
treeSet: {
isSelectPerson: false,
dialogVisible: false,
isSingle: true, // 是否单选
groupId: '',
storeType: '',
openNextBool: true // 展开下级不调用接口
},
defaultList: [
{
id: this.$route.query.storeId,
label: this.$route.query.storeName
}
]
};
},
methods: {
/**
* 输入
*/
toInputCode: function(value) {
let that = this;
let newValue = that.clerkInfo.code;
if (newValue !== '') {
that.clerkInfo.code = newValue.replace(/[^A-Za-z0-9]+/g, '');
}
},
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.treeSet.dialogVisible = true;
},
handleSelectedList(list) {
/* eslint-disable */
this.clerkInfo.storeName = !!list && !!list.length ? list[0].label : '';
this.clerkInfo.storeId = !!list && !!list.length ? list[0].id : '';
this.$forceUpdate();
},
/**
* 新增员工
*/
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,
employeeClerkId: info.employeeClerkId || '',
nationcode: info.nationcode
};
let url = that.isAddnew ? '/haoban-manage-web/emp/add' : '/haoban-manage-web/emp/update';
// !that.isAddnew && (params.employeeClerkId = that.$route.query.clerkId);
getRequest(url, 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: '',
nationcode: '86'
};
that.defaultList = [];
that.$refs['clerk_info'].resetFields();
} else {
// window.history.go(-1);
that.$router.push('/storeFrame');
}
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
},
cancel() {
this.$confirm(' 是否确认取消,取消后当前页面信息将丢失 ?', '提示', {
type: 'warning'
})
.then(() => {
this.$router.go(-1);
// this.$emit('cancelClerkInfo', true);
})
/* eslint-disable */
.catch(e => {
});
},
getClerkInfo() {
let that = this;
let params = {
id: !!that.$route.query.clerkId ? that.$route.query.clerkId : that.perId
};
getRequest('/haoban-manage-web/emp/findOne', params)
.then(res => {
if (res.data.errorCode == 1) {
that.clerkInfo = res.data.result;
that.defaultList = [
{
id: res.data.result.storeId,
label: res.data.result.storeName
}
];
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e
});
});
}
},
beforeMount() {
this.treeSet.storeType = this.storeType;
this.treeSet.groupId = this.firstLevelId;
if (!this.isAddnew) this.getClerkInfo();
},
watch: {
perId(id, ids) {
this.getClerkInfo(id);
}
}
};
</script>
<style lang="scss">
.form-container {
flex: 1;
padding: 24px 35px 48px;
background: #fff;
.add-clerk-form {
.clerk-info-input {
width: 380px;
}
}
.btn-box {
padding-left: 80px;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:14:03
-->
<template>
<div class="recycle-bin">
<p class="r-b-top-header">
<a class="a-href title" @click="goBack">返回</a>
<el-button v-if="!gicFlag" @click="transClerk('group')" :disabled="selectedList.length == 0">批量转移</el-button>
<el-button v-if="!gicFlag" @click="transClerk('all')" type="primary">全部转移</el-button>
</p>
<el-table :data="storeListData.clerks" @selection-change="selectMember" ref="clerkTable" style="width: 100%">
<el-table-column type="selection" width="42"></el-table-column>
<el-table-column label="姓名" prop="name"> </el-table-column>
<el-table-column label="手机号码" prop="phoneNumber">
<template slot-scope="scope">
{{ scope.row.nationcode == '86' ? scope.row.phoneNumber : '+' + scope.row.nationcode + '-' + scope.row.phoneNumber }}
</template>
</el-table-column>
<el-table-column label="操作" width="80" prop="clerkCount">
<template slot-scope="scope">
<a v-if="!gicFlag" class="a-href" @click="transClerk('single', scope.row)"><i class="el-icon-sort"></i></a>
<a v-if="!gicFlag" class="a-href" @click="delClerk(scope.row)"><i class="el-icon-delete"></i></a>
</template>
</el-table-column>
</el-table>
<vue-select-store ref="storeSelector" :currentBrand="currentBrand" :treeSet="treeSet" :selectType="selectType" @handleSelectedList="handleSelectedList"></vue-select-store>
</div>
</template>
<script>
import vueSelectStore from 'components/common/vueSelectStore';
import { postRequest } from '@/api/api';
export default {
name: 'clerkTbale',
components: {
vueSelectStore
},
props: {
store: {
type: Object,
required: true
},
gicFlag: {
type: Boolean,
default: true
}
},
data() {
return {
currentBrand: this.store.storeGroupId,
treeSet: {
isSelectPerson: true,
dialogVisible: false,
isSingle: true, // 是否单选
openNextBool: true // 展开下级不调用接口
},
selectType: 'store',
transArr: [],
selectedList: [],
storeListData: {}
};
},
methods: {
goBack() {
window.location.reload();
},
// 将店员转移到其他们门店
transClerk(type, clerk) {
if (type == 'single') {
this.transArr = [clerk];
} else if (type == 'all') {
this.transArr = this.storeListData.clerks;
} else {
this.transArr = this.selectedList;
}
this.treeSet.dialogVisible = true;
},
delClerk(clerk) {
this.$emit('delClerk', clerk);
},
selectMember(arr) {
this.selectedList = arr;
},
handleSelectedList(store) {
let that = this;
if (!store.length) {
return false;
}
let arr = [];
that.transArr.forEach(clerk => {
arr.push(clerk.employeeClerkId);
});
let params = {
ids: arr.join(','),
storeId: store[0].id
};
postRequest('/haoban-manage-web/emp/batchTransfer', params)
.then(res => {
if (res.data.errorCode == 1) {
that.$message.success({
message: '操作成功'
});
that.getClerkList();
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
},
/**
* 获取员工列表
*/
getClerkList() {
let that = this;
let params = {
departmentId: that.store.storeGroupId,
storeId: that.store.storeId,
showChild: 1,
showType: 2,
pageSize: 200,
pageNum: 1,
status: 1,
isCherk: 1
};
postRequest('/haoban-manage-web/emp/findsimplepage', params)
.then(res => {
if (res.data.errorCode == 1) {
that.storeListData.clerks = res.data.result.list || [];
} else {
that.$message.error({
duration: 1000,
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
duration: 1000,
message: e.message
});
});
}
},
watch: {
store: function(newData, oldData) {
const that = this;
that.storeListData = newData || {};
}
},
mounted() {
let that = this;
that.storeListData = that.store || {};
}
};
</script>
<style lang="scss"></style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:13:53
-->
<template>
<div>
<div class="common-right-button-box">
<a @click="changeRouter('/storeInfo?firstLevelId=' + firstLevelId)">
<el-button type="primary" v-if="!gicFlag">添加门店</el-button>
</a>
<a @click="changeRouter('/storeIo?importCode=store&departmentId=' + departmentId + '&showChildMember=' + showChildMember * 1 + '&brandId=' + brandId)"><el-button>批量导入/导出</el-button></a>
<el-button v-if="!gicFlag" type="danger" @click="delStores" :disabled="disabledDel">批量删除</el-button>
<span class="J_show-children el-button" size="small"> <el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow">显示子分组门店</el-checkbox><a class="a-href"></a> </span>
</div>
<el-table ref="table1" :data="tableData" @selection-change="selectMember">
<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">
<template slot-scope="scope">
{{ scope.row.areaChainName || '--' }}
</template>
</el-table-column>
<el-table-column label="所属分组" prop="groupChainName" :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="changeRouter('/storeInfo?gicFlag=' + gicFlag + '&storeId=' + scope.row.storeId + '&firstLevelId=' + firstLevelId)">编辑</a>
<!-- <a class="a-href" @click="delStores(scope.row, true)">删除</a> -->
<el-popover placement="top" width="160" v-model="scope.row.popVisible" v-if="!gicFlag">
<p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelDelTag(scope.$index, scope.row)">取消</el-button>
<el-button type="primary" size="mini" @click="toDelTag(scope.$index, scope.row)">确定</el-button>
</div>
<el-button slot="reference" class="p-l-10" type="text">
删除
</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
export default {
name: 'storeView',
props: {
tableData: {
type: Array,
default() {
return [];
}
},
departmentId: {
type: [String, Number],
default: ''
},
brandId: {
type: [String, Number],
default: ''
},
firstLevelId: {
type: [String, Number],
default: ''
},
gicFlag: {
type: Boolean,
default: true
}
},
data() {
return {
tableH: window.screen.availHeight - 440 - 180 - 70,
selectedList: [],
showChildMember: true, // 是否显示子成员
typeArr: ['全部类型', '自营', '联营', '代理(加盟)', '代销', '托管'],
statusArr: ['待审核', '正常', '审核失败', '停业整顿', '回收站', '删除']
};
},
methods: {
/**
* 路由跳转
*/
changeRouter(path) {
let that = this;
that.$router.push(path);
},
/**
* 批量删除店铺
*/
delStores(store, single = false) {
let that = this;
that
.$confirm('是否删除所选店铺', '提示', {
type: 'warning'
})
.then(() => {
let ids = '';
if (single) {
ids = store.storeId;
} else {
let arr = [];
that.selectedList.forEach(li => {
arr.push(li.storeId);
});
ids = arr.join(',');
}
let params = {
ids
};
that.postDel(params);
});
},
/**
* 删除 --- API
*/
postDel(params, row) {
const that = this;
getRequest('/haoban-manage-web/store/delByIds', params)
.then(res => {
if (res.data.errorCode == 1) {
that.$message.success({
duration: 1000,
message: '操作成功'
});
if (!!row) {
row.popVisible = false;
}
that.$emit('getStoreList');
} else {
that.$message.error({
duration: 1000,
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
duration: 1000,
message: e.message
});
});
},
selectMember(selection) {
this.selectedList = selection;
},
// 是否显示子成员
setChildMemberShow() {
this.$emit('setChildMemberShow', this.showChildMember);
},
/**
* 删除 -- 取消
*/
cancelDelTag(index, row) {
row.popVisible = false;
},
/**
* 删除 -- 确定
*/
toDelTag(index, row) {
const that = this;
let ids = '';
ids = row.storeId;
let params = {
ids
};
that.postDel(params, row);
}
},
computed: {
disabledDel() {
return this.selectedList.length < 1;
}
}
};
</script>
<style lang="scss">
.J_show-children {
&.el-button {
vertical-align: top;
margin-left: 0;
padding: 0 15px;
line-height: 29px;
height: 32px;
.el-checkbox {
vertical-align: -1px;
&.is-checked {
.el-checkbox__label {
color: #409eff;
}
}
}
/deep/ .el-checkbox {
&.is-checked {
.el-checkbox__label {
color: #409eff;
}
}
.el-checkbox__input {
vertical-align: -2px;
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-02-19 12:20:38
-->
<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>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:12:53
-->
<template>
<div class="export-set-container">
<div class="title">已选择字段<span>导出的列表中将按顺序显示这些字段(可拖拽排序)</span></div>
<div class="cho-list">
<draggable v-model="checkedList">
<template v-for="(item, index) in checkedList">
<div class="cho" v-if="item.checked" :key="item.fieldCode + index">{{ item.fieldName }} <i class="el-icon-circle-close" @click="deleteField(index)"></i></div>
</template>
</draggable>
</div>
<div class="cho-area">
<div class="title">选择需要导出的字段</div>
<div class="cho-area-group">
<div class="group-div">
<div class="group-title"></div>
<ul class="group-son-list">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</ul>
</div>
<div class="group-div" v-for="(group, index) in tempList" :key="group.fieldCode + index">
<div class="group-title">{{ group.title }}</div>
<ul class="group-son-list">
<template v-for="items in origin">
<li :key="items.fieldCode" v-if="items.parentCode == group.fieldCode">
<el-checkbox :label="items.fieldName" :key="items.fieldCode" v-model="items.checked" @change="checkThis(items)">{{ items.fieldName }}</el-checkbox>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="handle-cho-btn">
<el-button type="primary" class="export-btn" @click="exportCho" :disabled="checkedList.length < 1"><i class="iconfont icon-icon_yunxiazai p-r-6"></i>导出</el-button>
<el-button @click="cancelCho">取消</el-button>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import draggable from 'vuedraggable';
export default {
name: 'export-set',
components: {
draggable
},
data() {
return {
tempList: [],
checkList: [],
origin: [],
checkAll: false,
isIndeterminate: false,
checkedList: []
};
},
methods: {
/**
* 删除已选
*/
deleteField(index) {
let that = this;
that.checkedList.splice(index, 1);
let listData = that.checkedList.map(item => item.fieldCode);
that.origin.forEach(function(ele, index) {
if (listData.includes(ele.fieldCode)) {
ele.checked = true;
} else {
ele.checked = false;
}
});
that.checkHalf();
},
/**
* 检查全选和半选
*/
checkHalf() {
let that = this;
if (that.checkedList.length === 0) {
that.isIndeterminate = false;
return false;
}
if (that.checkedList.length === that.origin.length) {
that.isIndeterminate = false;
} else {
that.isIndeterminate = true;
}
},
checkThis(items) {
let that = this;
// 将勾选的字段放入已勾选列表
if (items.checked) {
that.checkedList.push(items);
} else {
that.checkedList.forEach((item, index) => {
if (item.fieldCode === items.fieldCode) {
that.checkedList.splice(index, 1);
}
});
}
that.checkHalf();
},
handleCheckAllChange(val) {
// 全选勾选框
let that = this;
this.checkedList = [];
this.origin.forEach((tem, idx) => {
tem.checked = val;
if (val) {
tem.order = idx + 1;
}
});
if (val) {
that.checkedList = that.origin.slice(0);
}
that.checkHalf();
},
getTemplate() {
// 获取模版字段
let that = this;
getRequest('/haoban-manage-web/record/employee-find-template', {})
.then(res => {
if (res.data.errorCode == 1) {
that.formatTemplateList(res.data.result);
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
},
formatTemplateList(list) {
// 模版字段按种类分组,按排序字段排序
let that = this;
let fieldList = [];
let origin = [];
let copyData = list;
list.forEach(tem => {
tem.title = tem.fieldName;
tem.name = tem.fieldName;
tem.checked = false;
let arr = [];
copyData.forEach(li => {
if (li.parentCode == tem.fieldCode) {
arr.push(li);
}
});
arr.sort(function(a, b) {
return a.sort * 1 - b.sort * 1;
});
if (arr.length > 0) tem['childrens'] = arr;
if (tem.parentCode == 0) {
fieldList.push(tem);
}
});
fieldList.sort(function(a, b) {
return a.sort * 1 - b.sort * 1;
});
fieldList.forEach(group => {
origin = origin.concat(group.childrens);
});
that.origin = origin;
that.tempList = fieldList;
},
cancelCho() {
// 取消选择
this.origin.forEach(tem => {
tem.checked = false;
});
this.$emit('cancelCho');
},
exportCho() {
// 导出
let arr = [];
let that = this;
that.checkedList.forEach(tem => {
if (tem.checked) {
arr.push({
fieldCode: tem.fieldCode,
fieldName: tem.fieldName
});
}
});
let params = {};
params['exportTitleContent'] = JSON.stringify(arr);
let local = window.location.origin;
if (local.indexOf('localhost') != -1) {
local = 'http://www.gicdev.com';
}
location.href = local + '/haoban-manage-web/record/define-export?exportTitleContent=' + JSON.stringify(arr);
this.$emit('cancelCho');
}
},
beforeMount() {
this.getTemplate();
}
};
</script>
<style lang="scss">
.export-set-container {
background: #fff;
padding: 25px;
.title {
font-size: 16px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(48, 49, 51, 1);
span {
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(144, 147, 153, 1);
margin-left: 20px;
}
}
.cho-list {
> div {
padding: 34px 0;
border-bottom: 1px solid #e4e7ed;
display: flex;
flex-wrap: wrap;
margin-bottom: 44px;
.cho {
position: relative;
padding: 0 15px;
box-sizing: border-box;
height: 32px;
background: rgba(236, 245, 255, 1);
border: 1px solid rgba(217, 236, 255, 1);
border-radius: 4px;
color: #409eff;
box-sizing: border-box;
text-align: center;
line-height: 32px;
font-size: 12px;
margin-right: 10px;
margin-bottom: 20px;
cursor: pointer;
&.osen {
background: rgba(64, 158, 255, 1);
color: #fff;
}
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
&:hover {
color: #f56c6c;
}
}
}
}
}
.cho-area {
margin-top: 60px;
font-size: 14px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(96, 98, 102, 1);
.group-div {
display: flex;
margin-bottom: 50px;
&:first-child {
margin-top: 60px;
}
.group-title {
width: 100px;
font-weight: 400;
color: rgba(96, 98, 102, 1);
}
.group-son-list {
flex: 1;
display: flex;
flex-wrap: wrap;
li {
width: 180px;
margin-bottom: 25px;
}
}
}
}
.handle-cho-btn {
text-align: center;
.export-btn {
margin-right: 10px;
.iconfont {
color: #fff;
margin-left: 5px;
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:12:46
-->
<template>
<div class="dialog-content">
<el-form label-width="110px" :model="ruleForm" :rules="rules" ref="ruleForm">
<template v-if="typeTitle == '办理离职' || typeTitle == '修改离职信息'">
<el-form-item label="最后工作日:" prop="date">
<el-date-picker style="width: 280px;" v-model="ruleForm.date" :picker-options="endPickerOptions" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
</el-form-item>
<el-form-item label="离职原因:" required>
<el-select v-model="ruleForm.reason" placeholder="请选择离职原因" style="width: 280px;">
<el-option v-for="(item, index) in reasons" :key="index" :label="item" :value="index"> </el-option>
</el-select>
</el-form-item>
</template>
<template v-else>
<el-form-item label="姓名:">
<span>{{ employee.clerkName }}</span>
</el-form-item>
<el-form-item label="入职时间:">
<span>{{ employee.hireDate | formatDate('YY-MM-DD') }}</span>
</el-form-item>
<el-form-item label="实际转正时间:">
<span>{{ employee.correctionDate | formatDate('YY-MM-DD') }}</span>
</el-form-item>
<el-form-item label="今日日期:">
<span>{{ today }}</span>
</el-form-item>
<el-form-item label="调整转正时间:" v-if="typeTitle == '修改转正时间'" prop="editDate">
<el-date-picker style="width: 280px;" v-model="ruleForm.editDate" :picker-options="endPickerOptions" type="date" placeholder="选择日期"> </el-date-picker>
</el-form-item>
</template>
<el-form-item label="备注:" prop="remarks">
<el-input type="textarea" style="width: 280px;" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入备注" v-model="ruleForm.remarks"> </el-input>
<p class="counter">{{ ruleForm.remarks.length }}/100</p>
</el-form-item>
</el-form>
<div class="button-box">
<el-button type="primary" @click="submitHandle">{{ typeTitle == '办理转正' ? '确认转正' : typeTitle == '修改离职信息' ? '确认修改' : '确认办理' }}</el-button>
</div>
</div>
</template>
<script>
import { formatDate } from '@/utils/index';
import { getRequest } from '@/api/api';
export default {
name: 'handleDialog',
props: {
employee: {
type: Object,
required: true
},
handleType: {
type: String,
required: true
},
typeTitle: {
type: String,
required: true
}
},
filters: {
formatDate
},
data() {
return {
ruleForm: {
remarks: '',
date: '',
editDate: '',
reason: 1
},
rules: {
remarks: [{ max: 100, message: '长度不能超过100字符', trigger: 'blur' }],
reason: [{ required: true, message: '请选择活离职原因', trigger: 'change' }],
date: [{ required: true, message: '请选择日期', trigger: 'change' }],
editDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
},
reasons: ['家庭原因', '个人原因', '发展原因', '合同到期不续签', '协议解除', '无法胜任工作', '经济性裁员', '严重违法违纪', '其他']
};
},
methods: {
submitHandle() {
let that = this;
this.$refs.ruleForm.validate(valid => {
if (valid) {
that
.$confirm('是否要确认' + that.typeTitle, '提示', {
type: 'warning'
})
.then(() => {
let typeObj = {
turnPositive: {
// 办理转正
params: {
correctionDate: that.today,
remark: that.ruleForm.remarks,
recordId: that.employee.recordId
},
url: '/haoban-manage-web/record/become-regular'
},
eidtCorrectionTime: {
// 修改转正时间
params: {
correctionDate: that.ruleForm.editDate,
remark: that.ruleForm.remarks,
recordId: that.employee.recordId
},
url: '/haoban-manage-web/record/change-correction-detail'
},
resignation: {
// 办理离职
params: {
fireReason: that.ruleForm.reason * 1 + 1,
remark: that.ruleForm.remarks,
recordId: that.employee.recordId,
fireDate: that.ruleForm.date
},
url: '/haoban-manage-web/record/fire-work'
},
changeFireInfo: {
// 修改离职信息
params: {
fireReason: that.ruleForm.reason * 1 + 1,
remark: that.ruleForm.remarks,
recordId: that.employee.recordId,
fireDate: that.ruleForm.date,
historyId: that.employee.historyId
},
url: '/haoban-manage-web/record/edit-record-history'
}
};
that.subRequest(typeObj[that.handleType].params, typeObj[that.handleType].url);
})
/* eslint-disable */
.catch(e => {
});
} else {
return false;
}
});
},
subRequest(params, url) {
let that = this;
getRequest(url, params)
.then(res => {
if (res.data.errorCode == 1) {
that.$emit('handleSuccess');
} else {
that.$message.error({
message: res.data.message
});
}
})
.catch(e => {
that.$message.error({
message: e.message
});
});
}
},
computed: {
today() {
let time = Date.parse(new Date());
return formatDate(time, 'YY-MM-DD');
},
endPickerOptions() {
// 控制时间选择插件只能选择大于入职时间的日期
let that = this;
return {
disabledDate(time) {
let timeSpace = time.getTime() < new Date(that.employee.hireDate).getTime();
return timeSpace;
}
};
}
}
};
</script>
<style lang="scss">
.dialog-content {
.date-picker {
width: 280px;
}
.counter {
width: 280px;
text-align: right;
font-size: 12px;
color: rgba(192, 196, 204, 1);
}
.button-box {
text-align: center;
margin: 20px 0 25px;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-02-19 12:20:38
-->
<template>
<el-table-column v-if="propList[item].slot" :label="propList[item].label" :width="propList[item].width" :sortable="propList[item].needSort" :prop="item">
<template slot-scope="scope">
<div v-if="item == 'clerkType'">
{{ typeList[scope.row[item] || 5] }}
</div>
<div v-if="item == 'clerkStatus'">
{{ statusList[scope.row[item]] || '无状态' }}
</div>
<div v-else-if="item == 'hireDate' || item == 'correctionDate' || item == 'fireDate'">
{{ scope.row[item] | formatDate('YY-MM-DD') || '--' }}
</div>
<div v-else-if="item == 'headPic'">
<img class="header-pic" :src="scope.row[item]" v-if="!!scope.row[item]" />
<div class="replace-head-img" v-else>
<i class="iconfont icon-yewuduanmorentouxian"></i>
</div>
</div>
<div v-else-if="item == 'fireReason'">
{{ reasons[scope.row[item]] || '--' }}
</div>
<div v-else-if="item == 'handleEmployee'">
<div class="table-handle">
<el-dropdown class="more" @command="callHandle">
<span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </span>
<el-dropdown-menu slot="dropdown">
<template v-if="scope.row.clerkStatus == 2">
<el-dropdown-item :command="{ obj: scope.row, type: 'turnPositive', typeTitle: '办理转正' }">办理转正</el-dropdown-item>
<el-dropdown-item :command="{ obj: scope.row, type: 'eidtCorrectionTime', typeTitle: '修改转正时间' }">修改转正时间</el-dropdown-item>
</template>
<el-dropdown-item :command="{ obj: scope.row, type: 'editEmployee', typeTitle: '编辑员工资料' }">编辑员工资料</el-dropdown-item>
<el-dropdown-item :command="{ obj: scope.row, type: 'resignation', typeTitle: '办理离职' }">办理离职</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div v-else-if="item == 'handleUnEmployee'">
<div class="table-handle">
<a @click="changeRouter('/recordInfo?recordId=' + scope.row.recordId + '&type=unemployee')" class="a-href">编辑</a>
</div>
</div>
</template>
</el-table-column>
<el-table-column v-else-if="item != 'clerkPhone'" :class-name="item == 'clerkName' ? 'control-width' : ''" :label="propList[item].label" :width="propList[item].width" :prop="item" show-overflow-tooltip> </el-table-column>
<el-table-column v-else-if="item == 'clerkPhone'" :class-name="item == 'clerkName' ? 'control-width' : ''" :label="propList[item].label" :width="propList[item].width" :prop="item" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.nationcode == '86' || scope.row.nationcode == null ? scope.row.clerkPhone : '+' + scope.row.nationcode + '-' + scope.row.clerkPhone }}
</template>
</el-table-column>
</template>
<script>
import { formatDate } from '@/utils/index';
import { getGicStatus } from '@/api/gicStatus';
import errMsg from '@/common/js/error';
export default {
name: 'list-item',
props: {
item: {
type: String,
required: true
}
},
filters: {
formatDate
},
data() {
return {
typeList: ['全部', '全职', '兼职', '外包', '实习', '无类型'],
statusList: ['全部', '正式', '试用', '离职'],
reasons: ['', '家庭原因', '个人原因', '发展原因', '合同到期不续签', '协议解除', '无法胜任工作', '经济性裁员', '严重违法违纪', '其他'],
propList: {
headPic: {
label: '',
slot: true,
width: 50
},
clerkName: {
label: '姓名',
width: 90
},
clerkPhone: {
label: '手机号'
},
groupName: {
label: '部门'
},
clerkCode: {
label: 'code'
},
positionName: {
label: '职位'
},
clerkType: {
label: '员工类型',
slot: true
},
clerkStatus: {
label: '员工状态',
slot: true
},
hireDate: {
label: '入职日期',
needSort: 'custom',
slot: true
},
correctionDate: {
label: '转正日期',
needSort: 'custom',
slot: true
},
fireDate: {
label: '离职日期',
needSort: 'custom',
slot: true
},
fireReason: {
label: '离职原因',
slot: true
},
handleEmployee: {
label: '操作',
slot: true
},
handleUnEmployee: {
label: '操作',
slot: true
}
}
};
},
methods: {
/**
* 路由跳转
*/
changeRouter(path) {
let that = this;
that.$router.push(path);
},
callHandle(command) {
if (command.typeTitle != '编辑员工资料') {
this.$emit('callHandle', command.obj, command.type, command.typeTitle);
// this.getGicData(command);
} else {
let path = '/recordInfo?recordId=' + command.obj.recordId;
this.changeRouter(path);
}
},
// 获取 GIC 门店同步状态
async getGicData(command) {
let that = this;
let para = {
type: 3,
businessId: command.obj.recordId
};
let res = await getGicStatus(para);
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.result) {
that.$message.error({
duration: 1000,
message: '已经与 GIC 门店同步,暂无操作权限'
});
return false;
}
} else {
errMsg.errorMsg(resData);
}
}
},
mounted() {
// console.log(this.item)
}
};
</script>
<style lang="scss">
.header-pic {
width: 35px;
height: 35px;
border-radius: 3px;
}
.replace-head-img {
width: 35px;
height: 35px;
border-radius: 3px;
line-height: 35px;
text-align: center;
color: #fff;
background: #82c5ff;
}
.table-handle {
cursor: pointer;
.el-dropdown-link {
color: #409eff;
}
}
.control-width {
.cell {
width: 70px;
white-space: nowrap;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2018-10-10 14:44:45
-->
<template>
<div class="custom-dialog-wrap">
<el-dialog :title="'自定义' + customTitle" :visible.sync="customDialog" width="761px" :before-close="handleCardClose">
<div class="custom-dialog__title">
<p class="custom-dialog__p">
请选择您想在首页展示的{{ customTitle }},还可以再勾选<span> {{ 8 - checkList.length }} </span>
</p>
</div>
<div class="custom-dialog__checkbox">
<el-checkbox-group v-model="checkList" @change="customChange" :max="8">
<template v-if="customType === 'data'">
<el-checkbox v-for="item in customData" :label="item.dataViewId" :key="item.dataViewId" name="type">{{ item.fieldTitle }}</el-checkbox>
</template>
<template v-if="customType != 'data'">
<el-checkbox v-for="item in customData" :label="item.settingViewId" :key="item.settingViewId" name="type">{{ item.fieldTitle }}</el-checkbox>
</template>
</el-checkbox-group>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { postRequest, postJson } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
name: 'custom-dialog',
props: {
showCustomDialog: {
type: Boolean,
default: false
},
customType: {
type: String,
default: ''
},
customTitle: {
type: String,
default: ''
}
},
data() {
return {
repProjectName: 'haoban-manage-web', // 项目名
customDialog: false, // 弹框显示
// 复选框数据
customData: [
/*{
dataViewId: 1,
fieldTitle: "通讯录行政架构",
homeDisplay: true
}*/
],
checkList: [] //已选数据
};
},
/* eslint-disable */
beforeMount() {},
methods: {
/**
* 关闭
*/
handleCardClose() {
const that = this;
that.customCancel();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.customDialog = false;
that.$emit('customHandleConfirm');
},
/**
* 确定
*/
customConfirm() {
const that = this;
if (!that.checkList.length) {
that.$message.error({
duration: 1000,
message: '请选择操作'
});
return false;
}
that.setData(that.checkList);
},
/**
* 复选框选择事件
*/
/* eslint-disable */
customChange(value) {
},
/**
* 设置首页数据概览显示项
*/
setData(list) {
const that = this;
let para = {
viewIdList: list
};
let url = that.customType == 'data' ? '/haoban-manage-web/home/set-display-enterprise-data' : '/haoban-manage-web/home/set-display-quick-entry';
postJson(url, para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('设置成功', 'success');
that.$emit('customHandleConfirm');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取 设置首页数据概览显示项
*/
getCardList() {
const that = this;
let para = {
all: true
};
that.customType == 'data' ? (para.fetchData = false) : '';
// 判断企业数据概览
let url = that.customType == 'data' ? '/haoban-manage-web/home/find-enterprise-data' : '/haoban-manage-web/home/find-quick-entry';
that.checkList = [];
postRequest(url, para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
let selList = [];
resData.result.forEach(function(ele, index) {
if (!!ele.homeDisplay) {
that.customType == 'data' ? selList.push(ele.dataViewId) : selList.push(ele.settingViewId);
}
});
that.customData = resData.result;
that.checkList = selList;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
showCustomDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
customType: function(newData, oldData) {
const that = this;
if (!!newData) {
that.getCardList();
}
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showCustomDialog;
}
};
</script>
<style lang="scss" scoped>
.custom-dialog {
&-wrap {
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
&__p {
width: 100%;
font-size: 14px;
color: #606266;
span {
color: #1890ff;
}
}
&__checkbox {
width: 100%;
min-height: 100px;
max-height: 300px;
padding-top: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
.el-checkbox {
width: 22%;
margin-left: 16px;
line-height: 62px;
&.is-checked {
/deep/ .el-checkbox__label {
color: #1890ff;
}
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-10-21 14:27:29
* @LastEditors: 无尘
* @LastEditTime: 2019-10-29 14:59:36
-->
<!--
<review-result-detail
:detailShow="detailShow"
@hideDetailDialog="hideDetailDialog">
</review-result-detail>
import reviewResultDetail from '@/components/review/review-result-detail.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" title="审核详情" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-table :data="tableData" style="width: 100%" height="332">
<el-table-column prop="publishRecordId" label="审核事项" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.auditingType == 0 ? '门店信息变更' : scope.row.auditingType == 1 ? '新增成员' : scope.row.auditingType == 2 ? '成员离职' : '转移成员' }}
</template>
</el-table-column>
<el-table-column label="品牌" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.brandName || '--' }}
</template>
</el-table-column>
<el-table-column label="提交人" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<div class="flex">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
<i v-if="!scope.row.headPic" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headPic" alt="img" />
</div>
<div class="flex flex-column apply-info">
<span class="text-ellipsis">{{ scope.row.applyName }}</span>
<span class="font-13 text-ellipsis">{{ scope.row.storeName }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="提交时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="审核结果" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.auditStatus }}
</template>
</el-table-column>
</el-table>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'record-list',
props: {
detailShow: {
type: Boolean,
default: false
},
tableListData: {
type: Object,
default() {
return [];
}
}
},
data() {
return {
customDialog: false, // 弹框显示
tableData: [
/* {
interfaceVersionId: '1',
version: '测试',
remark: '描述内容',
createTime: 1564455643252
} */
]
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.$emit('hideDetailDialog');
}
},
watch: {
detailShow: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
tableListData: function(newData, oldData) {
const that = this;
that.tableData = newData;
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.detailShow;
that.tableData = that.tableListData;
}
};
</script>
<style lang="less" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.table-head-pic {
width: 35px;
height: 35px;
padding: 10px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
max-width: 35px;
max-height: 35px;
}
}
.apply-info {
margin-left: 15px;
line-height: 18px;
.text-ellipsis {
display: block;
width: 96px;
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.edit-dialog {
/deep/ .el-dialog__body {
padding: 25px 20px 17px 20px;
min-height: 352px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #1890ff;
}
.el-form {
margin-top: 40px;
}
}
</style>
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