109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="8" v-for="(item, index) in config" :key="index">
|
||
|
|
<el-form-item :label="item.label" v-if="item.type == 0" :prop="item.isRequired ? item.value : ''">
|
||
|
|
<el-input v-model="formData[item.value]" clearable :placeholder="'请输入' + item.label" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="item.label" v-if="item.type == 1" :prop="item.isRequired ? item.value : ''">
|
||
|
|
<el-date-picker class="flex-1 !flex" v-model="formData[item.value]" clearable type="date"
|
||
|
|
value-format="YYYY-MM-DD" :placeholder="'请选择' + item.label">
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="item.label" v-if="item.type == 2" :prop="item.isRequired ? item.value : ''">
|
||
|
|
<el-select v-model="formData[item.value]" :placeholder="'请选择' + item.label" class="flex-1">
|
||
|
|
<el-option :label="item.name" :value="item.id" v-for="item in deptList">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="item.label" v-if="item.type == 3" :prop="item.isRequired ? item.value : ''">
|
||
|
|
<el-input v-model="formData[item.value + '_name']" readonly :placeholder="'点击选择' + item.label"
|
||
|
|
@click="userclick(item.value)" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="item.label" v-if="item.type == 4" :prop="item.isRequired ? item.value : ''">
|
||
|
|
<el-input v-model="formData[item.value]" clearable type="textarea" :placeholder="'请输入' + item.label" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="item.label" v-if="item.type == 5" :prop="item.isRequired ? item.value : ''">
|
||
|
|
<uploadAnnex :form-data="formData"></uploadAnnex>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
<div v-if="showPerDialog">
|
||
|
|
<personnelselector ref="personnel" @confirm="submituser" type="1">
|
||
|
|
</personnelselector>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup >
|
||
|
|
import uploadAnnex from './../uploadAnnex/index.vue'
|
||
|
|
import { ref, reactive } from 'vue'
|
||
|
|
import { deptLists } from "@/api/org/department";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
config: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
const deptList = ref([])
|
||
|
|
const getDeptList = async () => {
|
||
|
|
const res = await deptLists()
|
||
|
|
deptList.value = res.lists
|
||
|
|
}
|
||
|
|
getDeptList()
|
||
|
|
const formData = reactive({})
|
||
|
|
|
||
|
|
// 表单验证
|
||
|
|
const formRules = reactive({
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
const setRules = () => {
|
||
|
|
props.config.forEach(item => {
|
||
|
|
if (item.isRequired) {
|
||
|
|
formRules[item.value] = [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入" + item.label,
|
||
|
|
trigger: ["blur"],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
setRules()
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const showPerDialog = ref(false)
|
||
|
|
const personnel = ref(null)
|
||
|
|
|
||
|
|
let value
|
||
|
|
const userclick = async (val) => {
|
||
|
|
showPerDialog.value = true
|
||
|
|
value = val
|
||
|
|
await nextTick()
|
||
|
|
personnel.value.open()
|
||
|
|
}
|
||
|
|
const submituser = (e) => {
|
||
|
|
formData[value + '_name'] = e.name
|
||
|
|
formData[value] = e.id
|
||
|
|
showPerDialog.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|