|
|
|
@ -1,14 +1,16 @@ |
|
|
|
<template> |
|
|
|
<div class="preview-content right-preview"> |
|
|
|
<el-row :gutter="4"> |
|
|
|
<el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" label-width="100px"> |
|
|
|
<el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" label-width="120px"> |
|
|
|
<draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDisabled" @update="datadragEnd"> |
|
|
|
<el-col v-for="(item,index) in formPreviewData" :key="index" class="drag-item" :span="item.isLine ? 24 : 12"> |
|
|
|
<el-form-item :label="item.fieldCnName" :prop="item.fieldName"> |
|
|
|
<!-- select --> |
|
|
|
<!-- :load-options="loadOptions" --> |
|
|
|
<treeselect |
|
|
|
v-if="item.isInputClass === 'select'" |
|
|
|
v-model="addOrUpdateForm[item.fieldName]" |
|
|
|
:load-options="loadOptions" |
|
|
|
:options="item.options" |
|
|
|
:normalizer="normalizer" |
|
|
|
placeholder="" |
|
|
|
@ -74,10 +76,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import formData from './data.json' |
|
|
|
// import formPreviewData from './data.json' |
|
|
|
// import CRUD from '@crud/crud' |
|
|
|
import draggable from 'vuedraggable' |
|
|
|
import Treeselect from '@riophae/vue-treeselect' |
|
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|
|
|
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|
|
|
import { FetchFindAllSubsetById } from '@/api/archivesConfig/dictDetail' |
|
|
|
export default { |
|
|
|
name: 'PreviewForm', |
|
|
|
@ -86,16 +90,20 @@ export default { |
|
|
|
isDisabled: { |
|
|
|
type: Boolean, |
|
|
|
required: true |
|
|
|
}, |
|
|
|
formPreviewData: { |
|
|
|
type: Array, |
|
|
|
required: true |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formPreviewData: [], |
|
|
|
// formPreviewData: [], |
|
|
|
formData: [], |
|
|
|
addOrUpdateForm: {}, |
|
|
|
rules: {}, |
|
|
|
tableData: [], |
|
|
|
popoverVisible: false, |
|
|
|
options: [], |
|
|
|
normalizer(node) { |
|
|
|
if (node.childMenus == null || node.childMenus === 'null') { |
|
|
|
delete node.childMenus |
|
|
|
@ -108,17 +116,25 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.formPreviewData = formData.data |
|
|
|
watch: { |
|
|
|
formPreviewData: function(newValue, oldValue) { |
|
|
|
// console.log(newValue) |
|
|
|
// this.formData = newValue |
|
|
|
if (newValue) { |
|
|
|
this.editFormRow() |
|
|
|
this.getAllSubset() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取对应字典子集数据 |
|
|
|
getAllSubset() { |
|
|
|
this.formPreviewData.map(item => { |
|
|
|
if (item.sysDictionaryId) { |
|
|
|
FetchFindAllSubsetById({ id: item.sysDictionaryId }).then(res => { |
|
|
|
if (item.dictionaryConfigId) { |
|
|
|
// item.options = [] |
|
|
|
FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => { |
|
|
|
if (item.isInputClass === 'select') { |
|
|
|
item.options = res |
|
|
|
} else if (item.isInputClass === 'popover') { |
|
|
|
@ -128,6 +144,26 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取弹窗内部门数据 |
|
|
|
loadOptions({ action, parentNode, callback }) { |
|
|
|
if (action === LOAD_CHILDREN_OPTIONS) { |
|
|
|
this.formPreviewData.map(item => { |
|
|
|
if (item.dictionaryConfigId) { |
|
|
|
FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => { |
|
|
|
parentNode.children = res.content.map(function(obj) { |
|
|
|
if (obj.hasChildren) { |
|
|
|
obj.children = null |
|
|
|
} |
|
|
|
return obj |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
callback() |
|
|
|
}, 100) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
// popover - table 单选 |
|
|
|
clickRowHandler(row) { |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
@ -150,7 +186,7 @@ export default { |
|
|
|
this.formPreviewData.map(item => { |
|
|
|
this.rules[item.fieldName] = [ |
|
|
|
{ |
|
|
|
required: item.isRequired === 1, |
|
|
|
required: !!item.isRequired, |
|
|
|
message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName, |
|
|
|
trigger: item.isInputClass === 'text' ? 'blur' : 'change' |
|
|
|
} |
|
|
|
@ -188,7 +224,7 @@ export default { |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.preview-content{ |
|
|
|
width: 630px !important; |
|
|
|
width: 840px !important; |
|
|
|
min-height: calc(100vh - 312px); |
|
|
|
padding: 20px 15px 20px 0 !important; |
|
|
|
margin-top: 0 !important; |
|
|
|
|
