346 lines
7.9 KiB
Vue
346 lines
7.9 KiB
Vue
<template>
|
|
<view class="content" v-if="!loging">
|
|
<!-- 基础信息 -->
|
|
<view class="info-card">
|
|
<view class="cover">
|
|
<view class="cover-add vertical" @click="updCover">
|
|
<block v-if="cover.showpath != ''">
|
|
<image :src="cover.showpath" mode="aspectFill"></image>
|
|
</block>
|
|
<block v-else>
|
|
<image class="cover-default" src="@/static/icons/add-icon.png" mode="widthFix"></image>
|
|
<view>员工寸照</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="info-text">
|
|
<view class="info-inputs">
|
|
<input type="text" v-model="name" placeholder="姓名"/>
|
|
</view>
|
|
<view class="info-inputs">
|
|
<input type="number" v-model="phone" placeholder="手机号码"/>
|
|
</view>
|
|
<view class="info-inputs">
|
|
<input type="text" v-model="job" placeholder="职业"/>
|
|
</view>
|
|
<view class="info-inputs">
|
|
<picker :range="section" range-key="name" :value="sectionIndex" @change="pickerChange">
|
|
<view class="picker-text nowrap">
|
|
{{section[sectionIndex].name}}
|
|
<uni-icons class="icon" type="arrowdown" color="#555"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="jurisdiction switch">
|
|
<view class="item">
|
|
<label>
|
|
<view class="item-title">设为推荐</view>
|
|
<view class="item-info">设为推荐员工将在企业自媒体中优先展示</view>
|
|
<switch class="item-switch" :checked="isPosition" color="#8b64fd" @change="switchChange" />
|
|
</label>
|
|
</view>
|
|
</view>
|
|
<!-- 权限设置 -->
|
|
<view class="title">权限设置</view>
|
|
<view class="jurisdiction">
|
|
<checkbox-group @change="permissionChange">
|
|
<view class="item" v-for="(item, index) in permissions" :key="index">
|
|
<label>
|
|
<view class="item-title">{{item.title}}</view>
|
|
<view class="item-info">{{item.description}}</view>
|
|
<checkbox class="item-checkbox" :checked="item.check" color="#8b64fd" :value="String(item.permission_id)"/>
|
|
</label>
|
|
</view>
|
|
</checkbox-group>
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view class="basisc-btn">
|
|
<button class="btn" size="default" @click="onAddEmployees">{{type === 'PUT' ? '修改': '添加'}}</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { employeesConfig, addEmployees, employeesInfo, employeesPut } from '@/apis/interfaces/employees'
|
|
import { uploads } from '@/apis/interfaces/uploading'
|
|
export default {
|
|
data() {
|
|
return {
|
|
type : '',
|
|
loging : true,
|
|
section : [],
|
|
permissions : [],
|
|
permissionIds: [],
|
|
sectionIndex : 0,
|
|
cover : {
|
|
showpath : '',
|
|
path : ''
|
|
},
|
|
name : '',
|
|
phone : '',
|
|
job : '',
|
|
isPosition : false
|
|
};
|
|
},
|
|
created() {
|
|
if(this.$Route.query.type === 'PUT'){
|
|
this.type = 'PUT'
|
|
uni.setNavigationBarTitle({
|
|
title: '编辑员工'
|
|
})
|
|
}
|
|
employeesConfig().then(res => {
|
|
this.section = res.store
|
|
|
|
console.log(res)
|
|
|
|
if(this.$Route.query.type === 'PUT'){
|
|
|
|
console.log(111)
|
|
|
|
employeesInfo(this.$Route.query.id).then(res => {
|
|
console.log(11111)
|
|
console.log(res)
|
|
let permissionIds = []
|
|
for(let val of res.permission){
|
|
if(val.check){
|
|
permissionIds.push(val.permission_id)
|
|
}
|
|
}
|
|
this.permissions = res.permission
|
|
this.sectionIndex = this.section.findIndex(val => val.store_id == res.store.store_id)
|
|
this.permissionIds= permissionIds
|
|
this.name = res.name
|
|
this.phone = res.mobile
|
|
this.job = res.job
|
|
this.cover = res.cover
|
|
this.isPosition = res.is_position
|
|
this.loging = false
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}else{
|
|
this.permissions = res.permissions
|
|
this.loging = false
|
|
}
|
|
})
|
|
},
|
|
methods:{
|
|
// 设为推荐
|
|
switchChange(e){
|
|
this.isPosition = e.detail.value
|
|
},
|
|
// 选择部门
|
|
pickerChange(e){
|
|
this.sectionIndex = e.detail.value
|
|
},
|
|
// 权限选择
|
|
permissionChange(e){
|
|
this.permissionIds = e.detail.value
|
|
},
|
|
// 上传照片
|
|
updCover(){
|
|
uni.chooseImage({
|
|
crop: {width: 229, height: 320},
|
|
success: path=> {
|
|
uploads([{
|
|
uri : path.tempFilePaths[0]
|
|
}]).then(res => {
|
|
this.cover = {
|
|
showpath: res.url[0],
|
|
path : res.path[0]
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 添加员工
|
|
onAddEmployees(){
|
|
let data = {
|
|
name : this.name,
|
|
mobileNo : this.phone,
|
|
job : this.job,
|
|
cover : this.cover.path,
|
|
position : this.isPosition ? 1: 0,
|
|
order : 0,
|
|
store_id : this.section[this.sectionIndex].store_id,
|
|
permission : this.permissionIds
|
|
}
|
|
let submitAdd = this.type == 'PUT' ? employeesPut(this.$Route.query.id, data) : addEmployees(data)
|
|
|
|
submitAdd.then(res => {
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : res,
|
|
showCancel : false,
|
|
success : () => {
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 按钮组
|
|
.basisc-btn{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: $padding;
|
|
background: white;
|
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
|
.btn {
|
|
background: $mian-color;
|
|
color: white;
|
|
border-radius: 0;
|
|
font-size: $title-size-lg;
|
|
line-height: 88rpx;
|
|
height: 88rpx;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
&[disabled] {
|
|
background: rgba($color: $mian-color, $alpha: .6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.content{
|
|
// min-height: 100vh;
|
|
padding-bottom: ($padding*3) + 90;
|
|
@extend .ios-bottom;
|
|
.title{
|
|
padding: ($padding/2) $padding;
|
|
color: $text-gray;
|
|
}
|
|
.jurisdiction{
|
|
background: white;
|
|
&.switch{
|
|
margin-top: $margin;
|
|
}
|
|
.item{
|
|
position: relative;
|
|
padding: $padding 150rpx $padding $padding;
|
|
&::after{
|
|
position: absolute;
|
|
left: $padding;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1rpx;
|
|
content: " ";
|
|
background: $border-color;
|
|
}
|
|
&:last-child::after{
|
|
display: none;
|
|
}
|
|
.item-checkbox{
|
|
position: absolute;
|
|
right: $padding;
|
|
top: 50%;
|
|
height: 40rpx;
|
|
margin-top: -27rpx;
|
|
}
|
|
.item-switch{
|
|
position: absolute;
|
|
right: $padding;
|
|
top: 50%;
|
|
height: 40rpx;
|
|
margin-top: -27rpx;
|
|
}
|
|
.item-title{
|
|
font-size: $title-size;
|
|
padding-bottom: $margin/3;
|
|
}
|
|
.item-info{
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
}
|
|
// 基础信息
|
|
.info-card{
|
|
background: white;
|
|
padding: $padding;
|
|
position: relative;
|
|
min-height: 238rpx;
|
|
.cover{
|
|
position: absolute;
|
|
top: $padding;
|
|
left: $padding;
|
|
background: #f8f8f8;
|
|
width: 229rpx;
|
|
height: 320rpx;
|
|
.cover-add{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
image{
|
|
width: 229rpx;
|
|
height: 320rpx;
|
|
}
|
|
image.cover-default{
|
|
width: 128rpx;
|
|
}
|
|
color: $text-gray-m;
|
|
font-size: $title-size-m;
|
|
}
|
|
}
|
|
.info-text{
|
|
padding-left: $padding + 229;
|
|
.info-inputs{
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-bottom: solid 1rpx $border-color;
|
|
input{
|
|
height: 80rpx;
|
|
}
|
|
.picker-text{
|
|
position: relative;
|
|
padding-right: 80rpx;
|
|
.icon{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 添加按钮
|
|
.add-btns{
|
|
padding: $padding;
|
|
button[size='default']{
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: $text-price;
|
|
font-size: $title-size;
|
|
font-weight: bold;
|
|
color: white;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|