Skip to content

O
office-web
Commit 98f19d85 by 无尘
Options

add: 增加会员详情字段

parent 3a0a06f9
Showing with 234 additions and 170 deletions
src/components/set/staff-detail-field.vue
......@@ -7,10 +7,16 @@
<div class="custom-dialog-body">
<template v-for="(item,index) in customData">
<div class="detail-field-cell flex" :key="index">
<div class="detail-field-left">{{item.name}}</div>
<div class="detail-field-left">{{item.fieldName}}</div>
<div class="detail-field-right flex">
<el-checkbox-group class="flex flex-wrap" v-model="item.checkList" @change="customChange">
<el-checkbox v-for="(childItem,childIndex) in item.childList" :label="childItem.id" :key="childItem.id" name="type">{{childItem.name}}</el-checkbox>
<el-checkbox v-for="(childItem,childIndex) in item.children"
:label="childItem.fieldCode"
:key="childItem.fieldCode"
:disabled="childItem.disable"
name="type" >
{{childItem.fieldName}}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
......@@ -35,91 +41,97 @@
type: Boolean,
default: false
},
datailData: {
detailData: {
type: Array,
default: []
},
dataType: {
type: Number,
default: 1 //'类型：1行政架构，2门店架构'
}
},
data () {
return {
repProjectName: 'gic-web', // 项目名
customDialog: false, // 弹框显示
fixData: ['clerkName','clerkPhone','groupName','positionName'],
fixDataStore: ['clerkName','clerkPhone','groupName','positionName','clerkCode'],
// 复选框数据
customData: [
{
id: 1,
name: "基本信息",
fieldCode: 1,
fieldName: "基本信息",
checkList: [],
childList: [
children: [
{
id: 'name',
name: '姓名'
fieldCode: 'name',
fieldName: '姓名'
},
{
id: 'depart',
name: '部门'
fieldCode: 'depart',
fieldName: '部门'
},
{
id: 'phone',
name: '手机号'
fieldCode: 'phone',
fieldName: '手机号'
},
{
id: 'email',
name: '邮箱'
fieldCode: 'email',
fieldName: '邮箱'
},
{
id: 'profession',
name: '职业'
fieldCode: 'profession',
fieldName: '职业'
},
{
id: 'hiredate',
name: '入职时间'
fieldCode: 'hiredate',
fieldName: '入职时间'
},
]
},
{
id: 2,
name: "工作信息",
fieldCode: 2,
fieldName: "工作信息",
checkList: [],
childList: [
children: [
{
id: 'name',
name: '姓名'
fieldCode: 'name',
fieldName: '姓名'
},
{
id: 'depart',
name: '部门'
fieldCode: 'depart',
fieldName: '部门'
}
]
},
{
id: 3,
name: "个人信息",
fieldCode: 3,
fieldName: "个人信息",
checkList: [],
childList: [
children: [
{
id: 'name',
name: '姓名'
fieldCode: 'name',
fieldName: '姓名'
},
{
id: 'depart',
name: '部门'
fieldCode: 'depart',
fieldName: '部门'
},
]
},
{
id: 4,
name: "学历信息",
fieldCode: 4,
fieldName: "学历信息",
checkList: [],
childList: [
children: [
{
id: 'name',
name: '姓名'
fieldCode: 'name',
fieldName: '姓名'
},
{
id: 'depart',
name: '部门'
fieldCode: 'depart',
fieldName: '部门'
},
]
},
......@@ -141,6 +153,9 @@
that.baseUrl = host
}
},
computed: {
},
methods:{
/**
......@@ -157,16 +172,18 @@
customCancel() {
const that = this;
that.customDialog = false
that.$emit('customHandleConfirm')
that.$emit('customHandleConfirm','hide')
},
/**
* 确定
*/
customConfirm() {
const that = this;
// console.log(that.customData)
that.$emit('customHandleConfirm')
that.checkList = that.customData.map(item=>item.checkList).flat();
that.saveFields(that.dataType)
},
/**
......@@ -187,13 +204,13 @@
type: type,// 类型：1行政架构，2门店架构'
}
postRequest('/haoban-manage-web/employee-show-field-detail.json',para)
postRequest('/haoban-manage-web/record/employee-show-field-save.json',para)
.then((res) => {
// console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功','success')
showMsg.showmsg('添加成功','success');
that.$emit('customHandleConfirm')
return;
}
......@@ -266,40 +283,30 @@
*/
handleAllFields(result) {
const that = this
result.forEach(function(ele,index){
if (!!that.hasOwnProperty(ele.parentCode)) {
ele.fixed = parseInt(ele.fixed) === 1? true : false;
ele.isMust = parseInt(ele.isMust) === 1? true : false;
ele.fieldEdited = parseInt(ele.fieldEdited) === 1? true : false;
ele.systemFlag = true;
ele.fieldOperations = !!ele.fieldOperations? JSON.parse(ele.fieldOperations): {};
ele.staffRecordsIds = !!ele.staffRecordsIds? JSON.parse(ele.staffRecordsIds): [];
that[ele.parentCode].push(ele);
};
// 设置 fieldParent
if (!!that.fieldParent.hasOwnProperty(ele.fieldCode)) {
ele.children = [];
that.fieldParent[ele.fieldCode] = ele;
ele.systemFlag = true;
}
// console.log(that.treeData(result))
let newResult = that.treeData(result);
newResult.forEach(function(ele,index){
ele.checkList = []
// ele.children.forEach(function(el,key){
// el.disable = that.dataType == 1 ? that.fixData.includes(el.fieldCode) : that.fixDataStore.includes(el.fieldCode)
// })
})
that.customData = newResult;
},
formatDate(time,flag) {
/**
* 处理已选信息
*/
handleDetailData() {
const that = this
// (0-9)年月数字的显示
function formatDig(num) {
return num > 9 ? '' + num : '0' + num;
}
var myDate = new Date(time);
let y = myDate.getFullYear();
let m = myDate.getMonth()+1;
let d = myDate.getDate();
return y + flag + formatDig(m) + flag + formatDig(d) + flag
that.customData.forEach(function(ele,index) {
ele.checkList = [];
ele.children.forEach(function(el,key){
that.checkList.includes(el.fieldCode)? ele.checkList.push(el.fieldCode): '';
el.disable = that.dataType == 1 ? that.fixData.includes(el.fieldCode) : that.fixDataStore.includes(el.fieldCode)
})
})
}
},
......@@ -308,17 +315,20 @@
const that = this;
that.customDialog = newData
},
datailData: function(newData,oldData){
detailData: function(newData,oldData){
const that = this;
// console.log(newData)
that.checkList = !!newData && !!newData.length ? newData: [];
},
that.handleDetailData()
}
},
/* 接收数据 */
mounted(){
console.log("传递的参数对象:",this.showCustomDialog)
// console.log("传递的参数对象:",this.showCustomDialog)
const that = this;
that.customDialog = that.showCustomDialog
that.customDialog = that.showCustomDialog;
that.getAllFields()
},
}
......
src/views/setting/staffDetails.vue
......@@ -7,12 +7,12 @@
<h2 class="m-b-25">{{adminStruct.name}}</h2>
<div class="staffDetails-cell-fixed">
<template v-for="(item,index) in adminStruct.fixedList">
<el-button disabled class="staffDetails-cell-btn">{{item.name}}</el-button>
<el-button disabled class="staffDetails-cell-btn">{{item.fieldName}}</el-button>
</template>
</div>
<div class="staffDetails-cell-add">
<template v-for="(item,index) in adminStruct.defineList">
<el-tag class="staffDetails-cell-btn">{{item.name}} <i class="el-icon-circle-close" @click.stop="delField(index,item,adminStruct.defineList)"></i></el-tag>
<el-tag class="staffDetails-cell-btn">{{item.fieldName}} <i class="el-icon-circle-close" @click.stop="delField(index,item,adminStruct.defineList,1)"></i></el-tag>
</template>
<el-button class="el-tag m-l-8 staffDetails-cell-btn" @click.stop="showDialogLayer(1)"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
......@@ -21,12 +21,12 @@
<h2 class="m-b-25">{{storeStruct.name}}</h2>
<div class="staffDetails-cell-fixed">
<template v-for="(item,index) in storeStruct.fixedList">
<el-button disabled class="staffDetails-cell-btn">{{item.name}}</el-button>
<el-button disabled class="staffDetails-cell-btn">{{item.fieldName}}</el-button>
</template>
</div>
<div class="staffDetails-cell-add">
<template v-for="(item,index) in storeStruct.defineList">
<el-tag class="staffDetails-cell-btn">{{item.name}} <i class="el-icon-circle-close" @click.stop="delField(index,item,storeStruct.defineList)"></i></el-tag>
<el-tag class="staffDetails-cell-btn">{{item.fieldName}} <i class="el-icon-circle-close" @click.stop="delField(index,item,storeStruct.defineList,2)"></i></el-tag>
</template>
<el-button class="el-tag m-l-8 staffDetails-cell-btn" @click.stop="showDialogLayer(2)"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
......@@ -35,7 +35,13 @@
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 自定义字段 -->
<staff-detail-field :datailData="datailData" :showCustomDialog="showCustomDialog" @customHandleConfirm="customHandleConfirm"></staff-detail-field>
<staff-detail-field
:detailData="detailData"
:showCustomDialog="showCustomDialog"
:dataType="dataType"
@customHandleConfirm="customHandleConfirm">
</staff-detail-field>
</div>
</template>
<script>
......@@ -72,64 +78,45 @@ export default {
}
],
// 固定的字段
fixData: ['clerkName','clerkPhone','groupName','positionName'],
fixDataStore: ['clerkName','clerkPhone','groupName','positionName','clerkCode'],
// 行政架构
adminStruct: {
name: '行政架构通讯录员工详情字段',
fixedList: [
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
}
// {
// fieldName: "姓名",
// fields: "clerkName"
// },
// {
// fieldName: "手机号",
// fields: "clerkPhone"
// },
// {
// fieldName: "部门",
// fields: "groupName"
// },
// {
// fieldName: "职位",
// fields: "positionName"
// }
],
defineList: [
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
// {
// fieldName: "姓名",
// fields: "clerkName"
// },
// {
// fieldName: "手机号",
// fields: "clerkPhone"
// },
// {
// fieldName: "部门",
// fields: "groupName"
// },
],
},
......@@ -137,37 +124,46 @@ export default {
storeStruct: {
name: '门店架构通讯录员工详情字段',
fixedList: [
{
name: '姓名'
}
// {
// fieldName: "姓名",
// fields: "clerkName"
// },
// {
// fieldName: "手机号",
// fields: "clerkPhone"
// },
// {
// fieldName: "部门",
// fields: "groupName"
// },
// {
// fieldName: "职位",
// fields: "positionName"
// },
// {
// fieldName: "code",
// fields: "clerkCode"
// }
],
defineList: [
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
// {
// fieldName: "姓名",
// fields: "clerkName"
// },
// {
// fieldName: "手机号",
// fields: "clerkPhone"
// },
// {
// fieldName: "部门",
// fields: "groupName"
// },
]
},
showCustomDialog: false, // 自定义弹框显示标志
datailData: [], // '类型：1行政架构，2门店架构'
detailData: [], // 已选数据 '类型：1行政架构，2门店架构'
dataType: null, //'类型：1行政架构，2门店架构'
}
},
computed: {
......@@ -180,49 +176,106 @@ export default {
showDialogLayer(type) {
const that = this
that.showCustomDialog = true;
that.detailType = type;
console.log(1)
that.dataType = type;
if (type === 1) {
that.detailData = that.adminStruct.fixedList.map(item=>item.fields).concat(that.adminStruct.defineList.map(item=>item.fields))
}else {
that.detailData = that.storeStruct.fixedList.map(item=>item.fields).concat(that.storeStruct.defineList.map(item=>item.fields))
}
console.log(type)
},
/**
* 自定义弹框触发事件
*/
customHandleConfirm(val) {
const that = this
const that = this;
that.showCustomDialog = false;
if (!!val) {return false;}
that.getSaveFields(that.dataType);
},
/**
* 删除字段
*/
delField(index,item,list) {
delField(index,item,list,flag) {
const that = this
that.$alert('确定要删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
list.splice(index,1)
that.postDlField(item.fields,flag,list,index)
}).catch(() => {
});
},
/**
* 删除字段---api
*/
postDlField(code,type,list,index) {
const that = this;
const para = {
fields: code,
type: type,// 类型：1行政架构，2门店架构'
}
postRequest('/haoban-manage-web/record/employee-show-field-delete.json',para)
.then((res) => {
// console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功','success')
list.splice(index,1)
return;
}
errMsg.errorMsg(resData)
})
.catch(function (error) {
console.log(error);
that.$message.error({
duration: 1000,
message: error.message
})
});
},
/**
* 获取已经选择的字段
*/
getSaveFields(type) {
const that = this;
if (type === 1) {
that.adminStruct.fixedList = [];
that.adminStruct.defineList = [];
}else {
that.storeStruct.fixedList = [];
that.storeStruct.defineList = [];
}
const para = {
type: type,// 类型：1行政架构，2门店架构'
}
postRequest('/haoban-manage-web/employee-show-field-detail.json',para)
postRequest('/haoban-manage-web/record/employee-show-field-detail.json',para)
.then((res) => {
// console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功','success')
// showMsg.showmsg('操作成功','success')
// console.log(Number.parseInt(type))
resData.result.forEach(function(ele,index){
if (Number.parseInt(type) === 1) {
that.fixData.includes(ele.fields)? that.adminStruct.fixedList.push(ele) : that.adminStruct.defineList.push(ele)
}else {
that.fixDataStore.includes(ele.fields)? that.storeStruct.fixedList.push(ele) : that.storeStruct.defineList.push(ele)
}
})
return;
}
......@@ -231,7 +284,6 @@ export default {
})
.catch(function (error) {
console.log(error);
that.$message.error({
duration: 1000,
message: error.message
......@@ -240,7 +292,8 @@ export default {
}
},
mounted() {
const that = this
Promise.all([that.getSaveFields(1),that.getSaveFields(2)]);
},
components: {
navCrumb,
......@@ -302,6 +355,7 @@ export default {
.staffDetails-cell-btn {
width: 110px;
height: 32px;
padding: 0;
margin: 0 20px 20px 0;
text-align: center;
vertical-align: top;
......
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