230 lines
6.6 KiB
Vue
230 lines
6.6 KiB
Vue
<template>
|
|
<el-dialog :title="title" :visible.sync="visible" width="50%" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-form-item label="用户" prop="uid">
|
|
<user-select
|
|
v-model="form.uid"
|
|
placeholder="请选择用户"
|
|
user-type="1"
|
|
dialog-title="选择用户"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
<el-form-item label="电话" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入电话" />
|
|
</el-form-item>
|
|
<el-form-item label="地址" prop="address">
|
|
<el-input v-model="form.address" placeholder="请输入地址" />
|
|
</el-form-item>
|
|
<el-form-item label="身份证号码" prop="cardNo">
|
|
<el-input v-model="form.cardNo" placeholder="请输入身份证号码" />
|
|
</el-form-item>
|
|
<el-form-item label="技能ID" prop="skillId">
|
|
<el-input v-model="form.skillId" type="textarea" placeholder="请输入内容" />
|
|
</el-form-item>
|
|
<el-form-item label="电子照片" prop="image">
|
|
<image-upload v-model="form.image" :limit="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="技能证书" prop="skill">
|
|
<image-upload v-model="form.skill" :limit="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="无犯罪证明" prop="criminal">
|
|
<image-upload v-model="form.criminal" :limit="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="健康证" prop="health">
|
|
<image-upload v-model="form.health" :limit="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="学历证书" prop="education">
|
|
<image-upload v-model="form.education" :limit="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="驾照" prop="drive">
|
|
<image-upload v-model="form.drive" :limit="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status">
|
|
<el-radio-group v-model="form.status">
|
|
<el-radio
|
|
v-for="dict in dict.type.worker_apply_status"
|
|
:key="dict.value"
|
|
:label="parseInt(dict.value)"
|
|
>{{dict.label}}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remarks">
|
|
<el-input v-model="form.remarks" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
<el-form-item label="接单地区" prop="cityIds">
|
|
<el-select
|
|
v-model="selectedAreas"
|
|
multiple
|
|
filterable
|
|
clearable
|
|
placeholder="请选择接单地区"
|
|
@change="handleAreaChange"
|
|
>
|
|
<el-option
|
|
v-for="item in areaOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
name: "WorkerApplyEdit",
|
|
dicts: ['worker_apply_status'],
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
id: undefined,
|
|
uid: undefined,
|
|
name: undefined,
|
|
phone: undefined,
|
|
address: undefined,
|
|
cardNo: undefined,
|
|
skillId: undefined,
|
|
image: undefined,
|
|
skill: undefined,
|
|
criminal: undefined,
|
|
health: undefined,
|
|
education: undefined,
|
|
drive: undefined,
|
|
status: 0,
|
|
remarks: undefined,
|
|
cityPid: undefined,
|
|
cityIds: undefined
|
|
},
|
|
rules: {
|
|
uid: [
|
|
{ required: true, message: "用户不能为空", trigger: "blur" }
|
|
],
|
|
name: [
|
|
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
|
],
|
|
phone: [
|
|
{ required: true, message: "电话不能为空", trigger: "blur" }
|
|
],
|
|
address: [
|
|
{ required: true, message: "地址不能为空", trigger: "blur" }
|
|
],
|
|
cardNo: [
|
|
{ required: true, message: "身份证号码不能为空", trigger: "blur" }
|
|
],
|
|
status: [
|
|
{ required: true, message: "状态不能为空", trigger: "change" }
|
|
],
|
|
cityIds: [
|
|
{ required: true, message: "接单地区不能为空", trigger: "change" }
|
|
]
|
|
},
|
|
|
|
areaOptions: [
|
|
{ id: 1, name: '未央区' },
|
|
{ id: 2, name: '莲湖区' },
|
|
{ id: 3, name: '新城区' },
|
|
{ id: 4, name: '碑林区' },
|
|
{ id: 5, name: '雁塔区' },
|
|
{ id: 6, name: '灞桥区' },
|
|
{ id: 7, name: '长安区' },
|
|
{ id: 8, name: '高新区' },
|
|
{ id: 9, name: '临潼区' },
|
|
{ id: 10, name: '阎良区' }
|
|
], // 地区选项数据
|
|
selectedAreas: [] // 已选择的地区
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.form = { ...val }
|
|
// 如果有已选择的地区数据,转换为数组格式
|
|
if (this.form.cityIds) {
|
|
this.selectedAreas = this.form.cityIds.split(',').map(Number)
|
|
}
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 处理地区选择变化
|
|
handleAreaChange(value) {
|
|
if (value && value.length > 0) {
|
|
this.form.cityIds = value.join(',')
|
|
this.form.cityPid = value[0] // 第一个选择的作为主要城市
|
|
} else {
|
|
this.form.cityIds = undefined
|
|
this.form.cityPid = undefined
|
|
}
|
|
},
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
this.$emit('confirm', this.form)
|
|
}
|
|
})
|
|
},
|
|
cancel() {
|
|
this.reset()
|
|
this.$emit('update:visible', false)
|
|
},
|
|
reset() {
|
|
this.form = {
|
|
id: undefined,
|
|
uid: undefined,
|
|
name: undefined,
|
|
phone: undefined,
|
|
address: undefined,
|
|
cardNo: undefined,
|
|
skillId: undefined,
|
|
image: undefined,
|
|
skill: undefined,
|
|
criminal: undefined,
|
|
health: undefined,
|
|
education: undefined,
|
|
drive: undefined,
|
|
status: 0,
|
|
remarks: undefined,
|
|
cityPid: undefined,
|
|
cityIds: undefined
|
|
}
|
|
this.selectedAreas = []
|
|
this.resetForm("form")
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
</style> |