<template>
|
<a-modal
|
title="用户增加"
|
:width="900"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleSubmit"
|
@cancel="handleCancel"
|
>
|
<a-spin :spinning="confirmLoading">
|
<a-divider orientation="left">基本信息</a-divider>
|
<a-row :gutter="24">
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="账号"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入账号" v-decorator="['account', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
|
</a-form-item>
|
</a-form>
|
</a-col>
|
<a-col :md="12" :sm="24" >
|
<a-form :form="form">
|
<a-form-item
|
label="姓名"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入姓名" v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
|
</a-form-item>
|
</a-form>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="密码"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input
|
placeholder="请输入密码"
|
type="password"
|
v-decorator="['password', {rules: [{required: true, min: 5, message: '请输入至少五个字符的密码！'},{
|
validator: validateToNextPassword,
|
},]}]" />
|
</a-form-item>
|
</a-form>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="重复密码"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input
|
placeholder="请再次输入密码"
|
type="password"
|
v-decorator="['confirm', {rules: [{required: true, message: '请再次输入密码！'},
|
{
|
validator: compareToFirstPassword,
|
}]}]" />
|
</a-form-item>
|
</a-form>
|
</a-col>
|
</a-row>
|
|
<a-divider orientation="left">员工信息</a-divider>
|
<a-row :gutter="24">
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="机构"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-tree-select
|
v-decorator="['sysEmpParam.orgId', {rules: [{ required: true, message: '请选择机构！' }]}]"
|
style="width: 100%"
|
:dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
|
:treeData="orgTree"
|
placeholder="请选择机构"
|
treeDefaultExpandAll
|
@change="e => initrOrgName(e)"
|
>
|
<span slot="title" slot-scope="{ id }">{{ id }}</span>
|
</a-tree-select>
|
</a-form-item>
|
<a-form-item v-show="false">
|
<a-input v-decorator="['sysEmpParam.orgName']" />
|
</a-form-item>
|
</a-form>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="工号"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入工号" v-decorator="['sysEmpParam.jobNum']" />
|
</a-form-item>
|
</a-form>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :md="24" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="职位信息"
|
:labelCol="labelCol_JG"
|
:wrapperCol="wrapperCol_JG"
|
has-feedback
|
>
|
<a-select
|
mode="multiple"
|
style="width: 100%"
|
placeholder="请选择职位信息"
|
v-decorator="['sysEmpParam.posIdList', {rules: [{ required: true, message: '请选择职位信息！' }]}]"
|
>
|
<a-select-option v-for="(item,index) in posList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-form>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="所属车间"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-select
|
style="width: 100%"
|
placeholder="请选择所属车间"
|
v-decorator="['workShopType', {rules: [{ required: true, message: '请选择所属车间！' }]}]"
|
>
|
<a-select-option v-for="(item,index) in selectOptions.workShopTypes" :key="index" :value="item.code">{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-form>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form :form="form">
|
<a-form-item
|
label="所属产线"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-select
|
style="width: 100%"
|
placeholder="请选择所属产线"
|
>
|
<a-select-option v-for="(item,index) in selectOptions.lines" :key="index" :value="item.id">{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-form>
|
</a-col>
|
</a-row>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import { sysUserAdd,sysUserGetLines } from '@/api/modular/system/userManage'
|
import { getOrgTree, getOrgList } from '@/api/modular/system/orgManage'
|
import { sysPosList } from '@/api/modular/system/posManage'
|
import moment from 'moment'
|
export default {
|
data () {
|
return {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
// 机构行样式
|
labelCol_JG: {
|
xs: { span: 24 },
|
sm: { span: 3 }
|
},
|
wrapperCol_JG: {
|
xs: { span: 24 },
|
sm: { span: 20 }
|
},
|
visible: false,
|
confirmLoading: false,
|
orgTree: [],
|
orgList: [],
|
posList: [],
|
form: this.$form.createForm(this),
|
selectOptions:{
|
workShopTypes:[],
|
lines:[]
|
}
|
}
|
},
|
created(){
|
this.selectOptions.workShopTypes = this.$options.filters['dictData']('les_workshop_type')
|
},
|
methods: {
|
// 初始化方法
|
add () {
|
this.visible = true
|
this.getOrgDate()
|
this.getPosList()
|
this.getLinesList()
|
},
|
/**
|
* 获取机构树，并加载于表单中
|
*/
|
getOrgDate () {
|
getOrgTree().then((res) => {
|
this.orgTree = res.data
|
})
|
getOrgList().then((res) => {
|
this.orgList = res.data
|
})
|
},
|
/**
|
* 获取所属产线list列表
|
*/
|
getLinesList () {
|
if (this.selectOptions.lines!==0) {
|
sysUserGetLines().then((res) => {
|
this.selectOptions.lines = res.data
|
})
|
}
|
},
|
/**
|
* 获取职位list列表
|
*/
|
getPosList () {
|
sysPosList().then((res) => {
|
this.posList = res.data
|
})
|
},
|
compareToFirstPassword (rule, value, callback) {
|
const form = this.form
|
if (value && value !== form.getFieldValue('password')) {
|
// eslint-disable-next-line standard/no-callback-literal
|
callback('请确认两次输入密码的一致性！')
|
} else {
|
callback()
|
}
|
},
|
validateToNextPassword (rule, value, callback) {
|
const form = this.form
|
if (value && this.confirmDirty) {
|
form.validateFields(['confirm'], { force: true })
|
}
|
callback()
|
},
|
/**
|
* 选择树机构，初始化机构名称于表单中
|
*/
|
initrOrgName (value) {
|
this.form.getFieldDecorator('sysEmpParam.orgName', { initialValue: this.orgList.find(item => value === item.id).name })
|
},
|
handleSubmit () {
|
const { form: { validateFields } } = this
|
this.confirmLoading = true
|
validateFields((errors, values) => {
|
if (!errors) {
|
sysUserAdd(values).then((res) => {
|
if (res.success) {
|
this.$message.success('新增成功')
|
this.confirmLoading = false
|
this.$emit('ok', values)
|
this.handleCancel()
|
} else {
|
this.$message.error('新增失败：' + JSON.stringify(res.message))
|
}
|
}).finally((res) => {
|
this.confirmLoading = false
|
})
|
} else {
|
this.confirmLoading = false
|
}
|
})
|
},
|
handleCancel () {
|
this.form.resetFields()
|
this.visible = false
|
}
|
}
|
}
|
</script>
|
