504 lines
19 KiB
Vue
504 lines
19 KiB
Vue
<template>
|
||
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
|
||
<template v-for="(val,index) in dataList">
|
||
<div :key="index" class="collapsible-panel-form" v-if="val && val.length > 0">
|
||
<div class="collapsible-panel-form-header">
|
||
<span>{{ index }}</span>
|
||
<div class="retractable-btn" @click="handleChangeRetractable(index)">
|
||
<a-icon type="double-right" :class="retractableFlag[index] ? 'pack-up-btn' : 'unfold-btn'" />
|
||
{{ retractableFlag[index] ? '收起' : '展开' }}
|
||
</div>
|
||
</div>
|
||
<div class="form-flex-box collapsible-panel-form-content" v-show="retractableFlag[index]">
|
||
<template v-for="(item, index) in val">
|
||
<div :key="index"
|
||
class="box-title-text form-flex-item"
|
||
:class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
|
||
v-if="!hiddenFieldList.includes(item.dbFieldName)">
|
||
<div class="title-text">
|
||
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
|
||
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" :prop="item.dbFieldName">
|
||
<!-- 1, 日期单选 -->
|
||
<a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
|
||
class="box-input"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
style="width: 100%" />
|
||
<!-- 2, 单选用户 -->
|
||
<user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:filedName="item.dbFieldName"
|
||
@nameChange="userSelectNameChange"
|
||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||
type="radio"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||
<!-- 3, 单选组织机构 -->
|
||
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:backDepart="true" />
|
||
<!-- 4, 日期多选 -->
|
||
<j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
|
||
class="box-input"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:fieldName="item.dbFieldName"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||
<!-- 5, 多行文本 -->
|
||
<a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
|
||
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:maxLength="500"
|
||
v-model="formInline[item.dbFieldName]" :rows="4" />
|
||
<!-- 6, 标准多选 -->
|
||
<standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
|
||
:source="flag"
|
||
:disabledSourceSearch="true"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
v-model="formInline[item.dbFieldName]" />
|
||
<!-- 7, 多选组织机构 -->
|
||
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:multi="true"
|
||
:backDepart="true"
|
||
:treeOpera="true" />
|
||
<!-- 8, 上传文件 -->
|
||
<a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
|
||
@click="clickButtonToUpload(item)">
|
||
{{
|
||
(formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
|
||
|| formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
|
||
? $t('uploadFile.clickUpload')
|
||
: $t('uploadFile.viewUploadedFiles')
|
||
}}
|
||
</a-button>
|
||
<!-- 9, 文本框 -->
|
||
<a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
|
||
class="box-input"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:maxLength="50"
|
||
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
|
||
<!-- 10, 下拉单选（数据字典） -->
|
||
<j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
|
||
class="box-input"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
:dictCode="item.dictField" />
|
||
<!-- 11, 下拉多选（数据字典） -->
|
||
<j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
|
||
class="box-input"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
:dictCode="item.dictField" />
|
||
<!-- 12, 树选择 -->
|
||
<a-tree-select
|
||
v-else-if="item.fieldShowType === FieldType.TREE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
style="width: 100%"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
tree-checkable
|
||
treeCheckStrictly
|
||
:label-in-value="false"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
<!-- 14, 年份选择 -->
|
||
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
|
||
show-type="year"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:default-value="defaultValue[item.dbFieldName]"
|
||
date-format="YYYY"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
<!-- 15, 树选择（单选） -->
|
||
<a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
style="width: 100%"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
:label-in-value="false"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
</a-form-model-item>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
|
||
</a-form-model>
|
||
</template>
|
||
|
||
<script>
|
||
import UserSelection from './selection/UserSelection.vue'
|
||
import JMultipleDatePicker from './JMultipleDatePicker.vue'
|
||
import StandardSelection from './selection/StandardSelection.vue'
|
||
import JDictSelectTag from './dict/JDictSelectTag.vue'
|
||
import JMultiSelectTag from './dict/JMultiSelectTag.vue'
|
||
import UploadFile from './UploadFile.vue'
|
||
import { FieldType } from '../enums/commonEnums.js'
|
||
import { getAction } from '../api/manage.js'
|
||
import { getFormDictTreeList } from '../api/api.js'
|
||
|
||
export default {
|
||
name: 'CollapsiblePanelForm',
|
||
components: { UserSelection, JMultipleDatePicker, StandardSelection, JDictSelectTag, JMultiSelectTag, UploadFile },
|
||
props: {
|
||
// 获取表单数据的方法
|
||
getFormFunc: {
|
||
type: Function,
|
||
required: false,
|
||
default: () => {
|
||
return function () {
|
||
}
|
||
}
|
||
},
|
||
// 获取详细信息的方法
|
||
getDocumentInfoFunc: {
|
||
type: Function,
|
||
required: false,
|
||
default: () => {
|
||
return function () {
|
||
}
|
||
}
|
||
},
|
||
// 标准模块的区分：1，国内； 2，国外；3，企标
|
||
flag: {
|
||
type: String,
|
||
default: null
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 特殊的placeholder，目前只处理了输入框，有需要再处理别的
|
||
specialPlaceholder: {
|
||
type: Object,
|
||
required: false,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 默认值
|
||
defaultValue: {
|
||
type: Object,
|
||
required: false,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 不可修改值
|
||
disabledFieldList: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
// 需要隐藏的字段
|
||
hiddenFieldList: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
// 是否可收起
|
||
isRetractable: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: true
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
FieldType,
|
||
loading: false,
|
||
formInline: {},
|
||
isFormInline: false,
|
||
rules: {},
|
||
confirmLoading: false,
|
||
type: 2,
|
||
dataList: [],
|
||
ruleList: [],
|
||
uploadName: '',
|
||
optionsData: {}, // 用接口获取到的下拉数据
|
||
retractableFlag: {} // 面板展开收起的标识
|
||
}
|
||
},
|
||
created () {
|
||
if (this.$route.query.id) {
|
||
this.edit()
|
||
} else {
|
||
this.add()
|
||
}
|
||
},
|
||
methods: {
|
||
add () {
|
||
this.formInline = Object.assign({}, this.defaultValue)
|
||
this.$forceUpdate()
|
||
this.getForm()
|
||
},
|
||
edit () {
|
||
this.loading = true
|
||
this.getForm(() => {
|
||
if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
|
||
this.loading = false
|
||
return
|
||
}
|
||
// type标识是新增表单还是详情页
|
||
this.getDocumentInfoFunc({ id: this.$route.query.id.id, type: this.type }).then((res) => {
|
||
if (res.success) {
|
||
// 处理树结构多选回显
|
||
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
|
||
const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
|
||
this.formInline = res.result
|
||
treeMultipleField.forEach(field => {
|
||
const valueArr = []
|
||
if (this.formInline[field.dbFieldName]) {
|
||
const values = this.formInline[field.dbFieldName].split(',')
|
||
for (let i = 0; i < values.length; i++) {
|
||
valueArr[i] = {
|
||
value: values[i]
|
||
}
|
||
}
|
||
this.formInline[field.dbFieldName] = valueArr
|
||
} else {
|
||
this.formInline[field.dbFieldName] = undefined
|
||
}
|
||
})
|
||
const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
|
||
dictField.forEach(field => {
|
||
this.formInline[field.dbFieldName] = this.formInline[field.dbFieldName] || null
|
||
})
|
||
this.loading = false
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 获取表单列表
|
||
getForm (callBack) {
|
||
if (!this.getFormFunc || typeof this.getFormFunc !== 'function') {
|
||
return
|
||
}
|
||
this.confirmLoading = true
|
||
const params = {
|
||
module: this.flag,
|
||
type: this.type
|
||
}
|
||
this.getFormFunc(params).then((res) => {
|
||
if (res.success) {
|
||
this.dataList = res.result
|
||
this.ruleList = res.result
|
||
this.integrateData()
|
||
this.getOptionsData() // 获取下拉数据
|
||
Object.keys(this.dataList).forEach(key => {
|
||
this.retractableFlag[key] = true
|
||
})
|
||
callBack && callBack()
|
||
}
|
||
})
|
||
},
|
||
// 设置表单校验
|
||
integrateData () {
|
||
this.isFormInline = false
|
||
const ruleList = []
|
||
for (const item in this.ruleList) {
|
||
this.ruleList[item].forEach(ol => {
|
||
ruleList.push(ol)
|
||
})
|
||
}
|
||
const rules = {}
|
||
ruleList.forEach((res, index) => {
|
||
const rule = []
|
||
if (res.fieldMustInput === '1') {
|
||
if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value].includes(res.fieldShowType)) {
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'blur'
|
||
})
|
||
} else if (res.fieldShowType === FieldType.DATE_SINGLE.value) {
|
||
// 解决第一次校验不消失的问题
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: ['change', 'blur']
|
||
})
|
||
} else {
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
})
|
||
}
|
||
}
|
||
if (rule.length > 0) {
|
||
rules[res.dbFieldName] = rule
|
||
}
|
||
})
|
||
this.rules = rules
|
||
this.isFormInline = true
|
||
this.confirmLoading = false
|
||
},
|
||
/**
|
||
* 处理需要通过接口获取的下拉数据
|
||
*/
|
||
getOptionsData () {
|
||
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
|
||
formList.forEach(item => {
|
||
if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
|
||
// 展示类型是树选择，且有接口的
|
||
if (item.fieldHref) {
|
||
getAction(item.fieldHref).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
} else if (item.dictId) {
|
||
getFormDictTreeList({ dictId: item.dictId }).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击点击上传按钮
|
||
clickButtonToUpload (item) {
|
||
this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
|
||
this.uploadName = item.dbFieldName
|
||
},
|
||
// 文件上传改变后的回调
|
||
uploadFileChange (data) {
|
||
const attIdList = []
|
||
if (data && data.length > 0) {
|
||
data.map(item => {
|
||
attIdList.push(item.id)
|
||
})
|
||
}
|
||
/** 赋值给当前对应的表单文件 */
|
||
this.formInline[this.uploadName] = attIdList.join(',')
|
||
this.formInline = { ...this.formInline }
|
||
},
|
||
// 标准选择变化
|
||
standardSelectionChange (value, id) {
|
||
// this.formInline[value + '_by'] = id
|
||
this.formInline = { ...this.formInline }
|
||
},
|
||
// 选择用户得到用户名
|
||
userSelectNameChange (value, fieldName) {
|
||
this.formInline[fieldName + '_dictText'] = value
|
||
},
|
||
submit () {
|
||
this.$refs.ruleForm.validate(valid => {
|
||
if (valid) {
|
||
const formInline = JSON.parse(JSON.stringify(this.formInline))
|
||
Object.keys(formInline).forEach(res => {
|
||
if (formInline[res] instanceof Array) {
|
||
if (formInline[res][0] instanceof Object) {
|
||
// 说明是树选择
|
||
formInline[res] = formInline[res].map(item => item.value).join(',')
|
||
} else {
|
||
formInline[res] = formInline[res].join(',')
|
||
}
|
||
}
|
||
})
|
||
this.$emit('submitFormData', formInline)
|
||
} else {
|
||
this.$emit('addFormWarning')
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
clearValidate () {
|
||
this.$refs.ruleForm.clearValidate()
|
||
},
|
||
handleChangeRetractable (key) {
|
||
this.$set(this.retractableFlag, key, !this.retractableFlag[key])
|
||
this.$forceUpdate()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
/deep/ .ant-form-item-children {
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.form-flex-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.form-flex-item-line {
|
||
width: 100%;
|
||
}
|
||
|
||
.collapsible-panel-form {
|
||
margin-top: 20px;
|
||
|
||
&-header {
|
||
height: 56px;
|
||
line-height: 56px;
|
||
background: rgba(245, 245, 245, 0.6);
|
||
border-radius: 8px 8px 0 0;
|
||
border: 1px solid #E5E6EB;
|
||
padding: 0 20px;
|
||
font-size: 16px;
|
||
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
|
||
font-weight: 600;
|
||
color: #1D2129;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.retractable-btn {
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||
color: @primary-color;
|
||
}
|
||
|
||
.anticon {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.pack-up-btn {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.unfold-btn {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
border: 1px solid #E5E6EB;
|
||
border-top: none;
|
||
border-radius: 0 0 8px 8px;
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
.form-flex-item {
|
||
width: calc(100% / 3);
|
||
}
|
||
</style>
|