初始化
This commit is contained in:
aixianling
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<section class="apply-form">
|
||||
<ai-card title="表单信息">
|
||||
<template #content>
|
||||
<el-form label-suffix="：" label-width="180px" ref="applyForm" :rules="rules" :model="form">
|
||||
<el-form-item label="表单类型" prop="id">
|
||||
<el-select placeholder="请选择" size="small" v-model="form.id" @change="onChange" clearable style="width: 100%;">
|
||||
<el-option
|
||||
v-for="(item,i) in formList" :key="i"
|
||||
:label="item.tableName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="border-wrap">
|
||||
<template v-for="(item,index) in tablelist" :ke="index">
|
||||
<ai-title :title="item.groupName"></ai-title>
|
||||
<el-form-item :label="[e.fieldName,e.fieldNameSuffix].join('')" v-for="(e,j) in item.value"
|
||||
:key="Math.random()">
|
||||
<el-input size="small" v-model="form.checkbox" :disabled="true" clearable placeholder="请输入"
|
||||
style="width: 100%;" v-if="['0','1','6'].includes(e.fieldDataType)"/>
|
||||
|
||||
<el-radio-group style="width: 100%;" v-if="e.fieldDataType==4" disabled>
|
||||
<el-radio :label="k.dictValue" v-for="(k,m) in dict.getDict(e.dictionaryCode)" :key="Math.random()">
|
||||
{{ k.dictName }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-checkbox-group style="width: 100%;" v-if="e.fieldDataType==5" disabled>
|
||||
<el-checkbox :label="p.dictName" v-for="(p,i) in dict.getDict(e.dictionaryCode)"
|
||||
:key="Math.random()"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<el-select placeholder="请选择" disabled size="small" clearable style="width: 100%;"
|
||||
v-if="e.fieldDataType==9" v-model="e.fieldDataValue">
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict(e.fieldDbName)" :key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
v-model="form.picker"
|
||||
v-if="['2','3','7','8'].includes(e.fieldDataType)"
|
||||
:disabled="true"
|
||||
type="date"
|
||||
size="small"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="tablelist.length==0">
|
||||
<div class="no-data"></div>
|
||||
</template>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "applyForm",
|
||||
inject: ["config"],
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
approvalSteps: "",
|
||||
id: "",
|
||||
},
|
||||
formList: [],
|
||||
tablelist: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
id: [{required: true, message: '请选择表单类型', trigger: 'change'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleApplyForm() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['applyForm'].validate(valid => {
|
||||
if (valid) {
|
||||
resolve(this.form)
|
||||
} else {
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 根据表单类型查询列表
|
||||
* */
|
||||
onChange(id) {
|
||||
if (id) {
|
||||
let dictionaryCodeArr = []
|
||||
this.instance.post(`/app/zwsptablelist/queryDetailById?id=${id}`).then(res => {
|
||||
if (res && res.data) {
|
||||
let arr = []
|
||||
this.form.approvalSteps = res.data.approvalSteps
|
||||
res.data.tableFieldInfos.map((item, index) => {
|
||||
if (item.fieldType == 0) {
|
||||
if(item.dictionaryCode && dictionaryCodeArr.indexOf(item.dictionaryCode)==-1){
|
||||
dictionaryCodeArr.push(item.dictionaryCode)
|
||||
}
|
||||
let {groupIndex, groupName} = item
|
||||
if (!arr[groupIndex]) {
|
||||
arr[groupIndex] = {
|
||||
groupName,
|
||||
value: []
|
||||
}
|
||||
}
|
||||
arr[groupIndex].value.push({...item})
|
||||
}
|
||||
})
|
||||
if(dictionaryCodeArr.length){
|
||||
this.$dict.load(dictionaryCodeArr).then(()=>{
|
||||
this.tablelist = arr.filter(e => e)
|
||||
})
|
||||
}else {
|
||||
this.tablelist = arr.filter(e => e)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.tablelist = []
|
||||
this.form.approvalSteps = ""
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取表单类型列表
|
||||
* */
|
||||
getFormList() {
|
||||
this.instance.post(`/app/zwsptablelist/list`, null, {
|
||||
current: 1,
|
||||
size: 9999,
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.formList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getFormList()
|
||||
if (this.config.detailObj?.id) {
|
||||
this.form = JSON.parse(JSON.stringify(this.config.detailObj?.tableInfo))
|
||||
this.onChange(this.form.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.apply-form {
|
||||
.border-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid #6FAFFF;
|
||||
|
||||
.no-data {
|
||||
background-size: 120px 120px;
|
||||
height: 160px;
|
||||
margin: 48px auto 10px;
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small-input {
|
||||
width: 48px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
::v-deep .family-info {
|
||||
margin-left: 24px;
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
margin-left: 24px !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-radio{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user