Skip to content

O
office-web
Commit 7fce21a7 by 无尘
Options

add: 增加员工详情自定义字段

parent 7030a38a
Showing with 661 additions and 2 deletions
src/components/index/customDialog.vue
<template> <template>
<div class="custom-dialog-wrap"> <div class="custom-dialog-wrap">
<el-dialog title="选择卡券" :visible.sync="customDialog" width="761px" :before-close="handleCardClose"> <el-dialog title="自定义展示指标" :visible.sync="customDialog" width="761px" :before-close="handleCardClose">
<div class="custom-dialog__title"> <div class="custom-dialog__title">
<p class="custom-dialog__p">请选择您想在首页展示的快捷操作，最多勾选8，已经勾选了<span>{{checkList.length}}</span>个</p> <p class="custom-dialog__p">请选择您想在首页展示的快捷操作，最多勾选8，已经勾选了<span>{{checkList.length}}</span>个</p>
</div> </div>
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
&__checkbox { &__checkbox {
width: 100%; width: 100%;
height: 245px; height: 300px;
padding-top: 10px; padding-top: 10px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -232,6 +232,11 @@ ...@@ -232,6 +232,11 @@
width: 22%; width: 22%;
margin-left: 16px; margin-left: 16px;
line-height: 62px; line-height: 62px;
&.is-checked {
/deep/ .el-checkbox__label{
color: #1890ff;
}
}
} }
} }
} }
......
src/components/set/staff-detail-field.vue 0 → 100644
<template>
<div class="custom-dialog-wrap">
<el-dialog title="员工个人详情页展示字段设置" :visible.sync="customDialog" width="761px" :before-close="handleCardClose">
<div class="custom-dialog__title">
<p class="custom-dialog__p">tips：添加后的字段将在员工个人详情页展示出来，个人敏感信息不建议添加</p>
</div>
<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-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-group>
</div>
</div>
</template>
</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 { getRequest, postRequest, postJsonRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import qs from 'qs';
export default {
name: 'staff-detail-field',
props: {
showCustomDialog: {
type: Boolean,
default: false
}
},
data () {
return {
repProjectName: 'gic-web', // 项目名
customDialog: false, // 弹框显示
// 复选框数据
customData: [
{
id: 1,
name: "基本信息",
checkList: [],
childList: [
{
id: 'name',
name: '姓名'
},
{
id: 'depart',
name: '部门'
},
{
id: 'phone',
name: '手机号'
},
{
id: 'email',
name: '邮箱'
},
{
id: 'profession',
name: '职业'
},
{
id: 'hiredate',
name: '入职时间'
},
]
},
{
id: 2,
name: "工作信息",
checkList: [],
childList: [
{
id: 'name',
name: '姓名'
},
{
id: 'depart',
name: '部门'
}
]
},
{
id: 3,
name: "个人信息",
checkList: [],
childList: [
{
id: 'name',
name: '姓名'
},
{
id: 'depart',
name: '部门'
},
]
},
{
id: 4,
name: "学历信息",
checkList: [],
childList: [
{
id: 'name',
name: '姓名'
},
{
id: 'depart',
name: '部门'
},
]
},
],
checkList: [], //已选数据
// 获取 location origin
baseUrl: '',
}
},
beforeMount() {
const that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
},
methods:{
/**
* 关闭
*/
handleCardClose() {
const that = this;
that.customCancel();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.customDialog = false
that.$emit('customHandleConfirm')
},
/**
* 确定
*/
customConfirm() {
const that = this;
// console.log(that.customData)
that.$emit('customHandleConfirm')
},
/**
* 复选框选择事件
*/
customChange(value) {
const that = this
console.log(value)
},
/**
* 获取已经勾选
*/
getCardList() {
const that = this
var para = {
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-plug/get-coupon-list',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
formatDate(time,flag) {
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
}
},
watch: {
showCustomDialog: function(newData,oldData){
const that = this;
console.log("新数据:",newData,oldData)
that.customDialog = newData
},
},
/* 接收数据 */
mounted(){
console.log("传递的参数对象:",this.showCustomDialog)
const that = this;
that.customDialog = that.showCustomDialog
},
}
</script>
<style lang="scss" scoped>
.custom-dialog {
&-body {
width: 100%;
height: 410px;
padding: 5px 0 22px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
}
&-wrap {
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* display */
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
/* 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-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.detail-field {
&-cell {
width: 100%;
margin-top: 24px;
.el-checkbox {
min-width: 25%;
margin-bottom: 24px;
&+.el-checkbox {
margin-left: 0;
}
&.is-checked {
/deep/ .el-checkbox__label{
color: #1890ff;
}
}
}
}
&-left {
width: 100px;
padding-top: 4px;
}
&-right {
width: calc(100% - 100px);
.el-checkbox-group {
width: 100%;
}
}
}
}
&__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%;
height: 410px;
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;
}
}
}
</style>
src/views/setting/staffDetails.vue
<template> <template>
<div class="staffDetails-wrap common-set-wrap"> <div class="staffDetails-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<div class="staffDetails-cell">
<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>
</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>
</template>
<el-button class="el-tag m-l-8 staffDetails-cell-btn" @click.stop="showDialogLayer('admin')"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
</div>
<div class="staffDetails-cell">
<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>
</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>
</template>
<el-button class="el-tag m-l-8 staffDetails-cell-btn" @click.stop="showDialogLayer('store')"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 自定义字段 -->
<staff-detail-field :showCustomDialog="showCustomDialog" @customHandleConfirm="customHandleConfirm"></staff-detail-field>
</div> </div>
</template> </template>
<script> <script>
import navCrumb from '@/components/nav/nav.vue';
import staffDetailField from '@/components/set/staff-detail-field.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default { export default {
name: "staffDetails", name: "staffDetails",
data() { data() {
return { return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index',
relocation: true
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '通讯录信息',
path: '/staffDetails'
},
{
name: '员工详细字段',
path: ''
}
],
// 行政架构
adminStruct: {
name: '行政架构通讯录员工详情字段',
fixedList: [
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
}
],
defineList: [
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
],
},
// 门店架构'
storeStruct: {
name: '门店架构通讯录员工详情字段',
fixedList: [
{
name: '姓名'
}
],
defineList: [
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
{
name: '姓名'
},
]
},
showCustomDialog: false, // 自定义弹框显示标志
} }
}, },
computed: { computed: {
}, },
methods: { methods: {
/**
* 自定义弹窗显示事件
*/
showDialogLayer() {
const that = this
that.showCustomDialog = true;
console.log(1)
},
/**
* 自定义弹框触发事件
*/
customHandleConfirm(val) {
const that = this
that.showCustomDialog = false;
},
/**
* 删除字段
*/
delField(index,item,list) {
const that = this
that.$alert('确定要删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
list.splice(index,1)
}).catch(() => {
});
}
}, },
mounted() { mounted() {
}, },
components: {
navCrumb,
staffDetailField
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
h2 {
font-size: 16px;
color: #303133;
}
.m-l-8 {
margin-left: 8px;
}
.m-r-20 {
margin-left: 20px;
}
.m-b-25 {
margin-bottom: 25px;
}
.staffDetails-cell {
&+.staffDetails-cell {
margin-top: 14px;
padding-top: 36px;
border-top: 1px solid #E4E7ED;
}
}
.el-tag {
position: relative;
cursor: pointer;
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
}
}
.staffDetails-cell-btn {
width: 110px;
height: 32px;
margin: 0 20px 20px 0;
text-align: center;
vertical-align: top;
}
}
}
</style> </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