<template>
|
<GlobalWindow
|
:title="title"
|
width="50%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="老师姓名" prop="name">
|
<el-input v-model="form.name" placeholder="请输入姓名" v-trim/>
|
</el-form-item>
|
<el-form-item label="老师工号" prop="code">
|
<el-input v-model="form.code" placeholder="请输入工号" v-trim/>
|
</el-form-item>
|
<el-form-item label="职业照" prop="imgurl">
|
<!-- <UploadAvatarImage
|
:file="{ imgurlfull: form.fullImgurl, imgurl: form.imgurl }"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess"
|
/>
|
<p class="tip-warn">
|
建议尺寸：750px X 750px，上限6张
|
支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情,
|
</p>-->
|
<div class="upload_wrap">
|
<UploadFaceImg :file="{ imgurlfull: form.fullImgurl, imgurl: form.imgurl }" :uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false" @uploadBegin="isUploading = true" />
|
<div class="content">
|
<div>1、建议尺寸：750px X 750px 。</div>
|
<div>2、支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情。</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="性别" prop="sex">
|
<el-radio-group v-model="form.sex" style="margin-bottom: 20px;">
|
<el-radio-button :label="0">男</el-radio-button>
|
<el-radio-button :label="1">女</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="岗位" prop="positon">
|
<el-input v-model="form.positon" placeholder="请输入岗位" v-trim/>
|
</el-form-item>
|
<el-form-item label="从业年份" prop="jobYear">
|
<el-input type="number" v-model="form.jobYear" placeholder="请输入从业年份" v-trim><template slot="append">年</template></el-input>
|
</el-form-item>
|
<el-form-item label="服务战区" prop="zhanquIdList">
|
<el-select v-model="form.zhanquIdList" placeholder="请选择服务战区" filterable multiple clearable >
|
<el-option
|
v-for="item in cateList.filter(item=>{return item.type==0})"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="商业化类型" prop="bustypeIdList">
|
<el-select v-model="form.bustypeIdList" placeholder="请选择商业化类型" filterable multiple clearable >
|
<el-option
|
v-for="item in cateList.filter(item=>{return item.type==1})"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="老师等级" prop="levelId">
|
<el-select v-model="form.levelId" placeholder="请选择老师等级" filterable clearable >
|
<el-option
|
v-for="item in cateList.filter(item=>{return item.type==3})"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="擅长领域" prop="fieldIdList">
|
<el-select v-model="form.fieldIdList" placeholder="请选择擅长领域" filterable multiple clearable >
|
<el-option
|
v-for="item in cateList.filter(item=>{return item.type==2})"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="费用标准" prop="fee">
|
<el-input type="number" v-model="form.fee" placeholder="请输入费用标准" v-trim><template slot="append">元/周</template></el-input>
|
</el-form-item>
|
<el-form-item label="服务商场" prop="serveNum">
|
<el-input type="number" v-model="form.serveNum" placeholder="请输入服务商场" v-trim><template slot="append">个</template></el-input>
|
</el-form-item>
|
<el-form-item label="老师简介" prop="content">
|
<el-input type="textarea" v-model="form.content" placeholder="请输入老师简介" v-trim/>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status" style="margin-bottom: 20px;">
|
<el-radio-button :label="0">启用</el-radio-button>
|
<el-radio-button :label="1">禁用</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { findAll as cateList } from '@/api/business/category'
|
import UploadFaceImg from '@/components/common/UploadFaceImg'
|
export default {
|
name: 'OperaMemberWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow ,UploadFaceImg},
|
data () {
|
return {
|
// 表单数据
|
isUploading: false,
|
cateList: [],
|
uploadData: {
|
folder: 'dianjiang/member'
|
},
|
form: {
|
id: null,
|
imgurl: '',
|
fullImgurl: '',
|
name: '',
|
code: '',
|
sex: 0,
|
jobYear: '',
|
positon: '',
|
zhanquIdList: [],
|
bustypeIdList: [],
|
fieldIdList: [],
|
levelId: '',
|
fee: '',
|
status: 0,
|
content: 0,
|
serveNum: '',
|
type: 0
|
},
|
// 验证规则
|
rules: {
|
name: [{ required: true, message: '请输入姓名' }],
|
code: [{ required: true, message: '请输入工号' }],
|
imgurl: [{ required: true, message: '请上传职业照' }],
|
sex: [{ required: true, message: '请选择性别' }],
|
jobYear: [{ required: true, message: '请选择从业年份' }],
|
zhanquIdList: [{ required: true, message: '请选择服务战区' }],
|
bustypeIdList: [{ required: true, message: '请选择商业化类型' }],
|
levelId: [{ required: true, message: '请选择老师等级' }],
|
fieldIdList: [{ required: true, message: '请选择擅长领域' }],
|
content: [{ required: true, message: '请输入老师简介' }]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/member',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
loadCateList () {
|
cateList({
|
}).then(res => {
|
this.cateList = res
|
})
|
},
|
uploadAvatarSuccess (file) {
|
this.$set(this.form, 'imgurl', file.imgurl)
|
this.$set(this.form, 'fullImgurl', file.imgurlfull)
|
},
|
open (title, target, type) {
|
this.title = title
|
this.visible = true
|
this.loadCateList()
|
this.form.fullImgurl = null
|
this.form.imgurl = null
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
console.log(target.jobYear)
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.upload_wrap {
|
display: flex;
|
align-items: center;
|
|
.avatar-uploader {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
::v-deep .avatar {
|
max-width: 90px;
|
max-height: 90px;
|
}
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-size: 12px;
|
color: #999999;
|
margin-left: 12px;
|
line-height: 24px;
|
}
|
}
|
</style>
|
