265 lines
8.6 KiB
Vue
265 lines
8.6 KiB
Vue
<template>
|
|
<!-- 工程管理 新增、编辑 表单组件 -->
|
|
<div>
|
|
<el-form
|
|
label-width="100px"
|
|
size="medium"
|
|
ref="projectParamsRef"
|
|
:model="projectParams"
|
|
:rules="projectParamsRules"
|
|
>
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名" prop="relName">
|
|
<el-input :maxlength="50" v-model="projectParams.relName" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="身份证号" prop="idCard">
|
|
<el-input v-model="projectParams.idCard" :maxlength="18" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="性别" prop="sex">
|
|
<el-select
|
|
v-model="projectParams.sex"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in sexRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="手机号" prop="relPhone">
|
|
<el-input v-model="projectParams.relPhone" :maxlength="11" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="岗位工种" prop="postCode">
|
|
<el-select
|
|
v-model="projectParams.postCode"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in jobRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item>
|
|
<el-button type="success" @click="onSubmit">确认</el-button>
|
|
<el-button
|
|
@click="
|
|
() => {
|
|
this.$emit('closeDialog')
|
|
}
|
|
"
|
|
>取消</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
addPersonApi,
|
|
editPersonApi,
|
|
queryInfoApi
|
|
} from '@/api/base/person'
|
|
import { call } from 'runjs/lib/script'
|
|
export default {
|
|
name: 'FormPerson',
|
|
props: {
|
|
editParams: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
},
|
|
components: { },
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
if (this.editParams) {
|
|
Object.assign(this.projectParams, this.editParams)
|
|
// 查询未脱敏数据
|
|
/* queryInfoApi(this.editParams.id).then(res => {
|
|
this.projectParams.idCard = res.data.idCard
|
|
this.projectParams.relPhone = res.data.relPhone
|
|
}).catch(err => {}) */
|
|
this.subSort = 2
|
|
} else {
|
|
this.subSort = 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
subSort: '', // 提交类型：新增 1 / 修改 2
|
|
projectParams: {
|
|
relName: undefined, //姓名
|
|
idCard: undefined, //身份证号
|
|
sex: undefined, // 性别
|
|
relPhone: undefined, // 手机号
|
|
postCode: undefined, //岗位工种
|
|
},
|
|
// 校验规则
|
|
projectParamsRules: {
|
|
relName: [
|
|
{
|
|
required: true,
|
|
message: '请输入姓名',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
idCard: [
|
|
{
|
|
required: true,
|
|
message: '身份证号格式不正确',
|
|
validator: this.validateIdCard,
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
sex: [
|
|
{
|
|
required: true,
|
|
message: '请选择性别',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
relPhone: [
|
|
{
|
|
required: true,
|
|
message: '手机号格式不正确',
|
|
validator: this.validatePhone,
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
postCode: [
|
|
{
|
|
required: true,
|
|
message: '请选择岗位工种',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
// 各类下拉
|
|
sexRange: [
|
|
{ label: '男', value: 1 },
|
|
{ label: '女', value: 0 },
|
|
],
|
|
jobRange: [
|
|
{ label: '班组负责人', value: '0900101' },
|
|
{ label: '班组安全员', value: '0900102' },
|
|
{ label: '班组技术员', value: '0900103' },
|
|
{ label: '特种作业人员', value: '0900106' },
|
|
],
|
|
// 正则
|
|
phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
|
idCardReg: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
|
|
}
|
|
},
|
|
methods: {
|
|
/** 获取各类下拉框 */
|
|
async getRanges() {
|
|
// 获取省份下拉选
|
|
let provinceRes = await queryProvincesApi()
|
|
this.provinceRange = provinceRes.data.map(item => {
|
|
return {
|
|
label: item.areaName,
|
|
value: item.areaId
|
|
}
|
|
})
|
|
},
|
|
/** 校验手机号 */
|
|
validatePhone(rule, value, callback) {
|
|
if(!this.phoneReg.test(value)) {
|
|
callback(new Error('手机号格式不正确'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
/** 校验身份证 */
|
|
validateIdCard(rule, value, callback) {
|
|
if(!this.idCardReg.test(value)) {
|
|
callback(new Error('身份证号格式不正确'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
/** 改变树结构 */
|
|
changeTree(leaf) {
|
|
leaf.map(item => {
|
|
item.value = item.id
|
|
if(item.children) {
|
|
this.changeTree(item.children)
|
|
}
|
|
})
|
|
return leaf
|
|
},
|
|
/** 级联选择器改变 */
|
|
handleCas(e) {
|
|
this.projectParams.impUnit = e[e.length - 1]
|
|
},
|
|
/** 确认按钮 */
|
|
onSubmit() {
|
|
this.$refs.projectParamsRef.validate(valid => {
|
|
if (valid) {
|
|
/* if(this.projectParams.relPhone !== undefined && this.projectParams.relPhone !== "" && this.projectParams.relPhone !== null) {
|
|
if(!this.phoneReg.test(this.projectParams.headUserPhone)) {
|
|
this.$modal.msgError('请填写正确的联系方式')
|
|
return false
|
|
}
|
|
} */
|
|
console.log('校验通过', this.projectParams, this.subSort)
|
|
// 1. 表单校验通过后调后台 Api
|
|
if(this.subSort === 1) {
|
|
addPersonApi(this.projectParams).then(res => {
|
|
this.$modal.msgSuccess('操作成功')
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog', true)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
} else if(this.subSort === 2) {
|
|
editPersonApi(this.projectParams).then(res => {
|
|
this.$modal.msgSuccess('操作成功')
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog', true)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-form-item__label{
|
|
font-weight: normal;
|
|
}
|
|
</style>
|