拆分详情

This commit is contained in:
caoyang
2022-03-28 23:07:01 +08:00
parent 5998710e10
commit 9d55e0466f
8 changed files with 1065 additions and 194 deletions
@@ -14,47 +14,268 @@
<a-form-model
class="split-content"
:model="form"
:rules="validatorRules"
:rules="rules"
ref="splitEditForm"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-row :gutter="24">
<div v-for="(item,index) in dataList" :key="index">
<a-col :span="12" v-if="item.field_show_type === '1' || item.field_show_type === '11'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-input class="box-input"
:disabled="disabled"
v-model="formInline[item.db_field_name]"
:placeholder="$t('PleaseEnter')+item.db_field_txt"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '2'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-input-number class="box-input"
:placeholder="$t('PleaseEnter')+item.db_field_txt"
:disabled="disabled"
v-model="formInline[item.db_field_name]" :min="1" :max="99999999"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '3'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<j-dict-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
@input="handleInput(item.db_field_name)"
:placeholder="$t('PleaseSelect')+item.db_field_txt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '4'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
:placeholder="$t('PleaseSelect')+item.db_field_txt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '5'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-date-picker class="box-input"
:placeholder="$t('PleaseSelect')+item.db_field_txt"
@change="dateChange(item)"
format="YYYY-MM-DD"
v-model="formInline[item.db_field_name]"
:disabled="disabled"
style="width: 100%"/>
<!-- :disabledDate="disabledDate"-->
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '6'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-range-picker class="box-input" v-model="formInline[item.db_field_name]"
:placeholder="$t('PleaseSelect')+item.db_field_txt"
:disabled="disabled"
@change="onChange(item.db_field_name)"></a-range-picker>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '7'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-button type="primary" class="button-text"
@click="clickButtonToUpload(item)">
{{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
formInline[item.db_field_name] == null) ? $t('clickUpload') : $t('viewUploadedFiles')
}}
</a-button>
<!-- <span class="button-text-text" v-if="formInline[item.db_field_name]">-->
<!-- {{formInline[item.db_field_name].split(',').length}}-->
<!-- </span>-->
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.field_show_type === '8'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-textarea
:placeholder="$t('PleaseEnter')+item.db_field_txt"
:disabled="disabled"
v-model="formInline[item.db_field_name]" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.field_show_type === '9' || item.field_show_type == 'sel_user'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<PersonnelSelection :query="item"
:personneQuery="formInline"
@change="PersonnelSelectionChange"
:disabled="disabled"
v-model="formInline[item.db_field_name]"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.field_show_type === '10'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<Standardselection :query="item"
@change="StandardselectionChange"
:disabled="disabled"
:standard="formInline"
v-model="formInline[item.db_field_name]"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'RADIO'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<j-dict-select-tag v-model="formInline[item.db_field_name]"
:disabled="disabled"
@input="handleInput(item.db_field_name)"
:placeholder="$t('selectStatus')"
:type="'radio'" :triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === '0'">
<div class="box-title-text" :title="item.db_field_txt">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-tree-select
v-model="formInline[item.db_field_name]"
:maxTagCount="1"
style="width: 100%"
:tree-data="item.tree"
tree-checkable
:placeholder="$t('PleaseSelect')+item.db_field_txt"
/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'CHECKBOX'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
:placeholder="$t('selectStatus')" :type="'checkbox'"
:triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
</a-col>
</div>
</a-row>
<uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFile>
<!-- 条款号-->
<a-row :gutter="24">
<a-col :span="12">
<a-form-model-item :label="$t('clauseNo')" prop="number">
<a-input v-model="form.number" :placeholder="$t('pleaseEnter')+$t('clauseNo')" />
</a-form-model-item>
</a-col>
<!-- 条款名称-->
<a-col :span="12">
<a-form-model-item :label="$t('clauseName')" prop="name">
<a-input v-model="form.name" :placeholder="$t('pleaseEnter')+$t('clauseName')" />
</a-form-model-item>
</a-col>
</a-row>
<!-- 功能领域-->
<a-row :gutter="24">
<a-col :span="12">
<a-form-model-item :label="$t('functionalAreas')" prop="funArea">
<j-dict-select-tag type="list" v-model="form.funArea" dictCode="function_territory" :placeholder="$t('pleaseSelect')+$t('functionalAreas')" />
</a-form-model-item>
</a-col>
<!-- 技术领域-->
<a-col :span="12">
<a-form-model-item :label="$t('technicalField')" prop="tecArea">
<j-dict-select-tag type="list" v-model="form.tecArea" dictCode="technology_territory" :placeholder="$t('pleaseSelect')+$t('technicalField')" />
</a-form-model-item>
</a-col>
</a-row>
<!-- 信息类别-->
<a-row :gutter="24">
<a-col :span="12">
<a-form-model-item :label="$t('informationCategory')" prop="infoType">
<j-dict-select-tag type="list" v-model="form.infoType" dictCode="xxx" :placeholder="$t('pleaseSelect')+$t('informationCategory')" />
</a-form-model-item>
</a-col>
</a-row>
<!-- <a-row :gutter="24">-->
<!-- <a-col :span="12">-->
<!-- <a-form-model-item :label="$t('clauseNo')" prop="number">-->
<!-- <a-input v-model="form.number" :placeholder="$t('pleaseEnter')+$t('clauseNo')" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!--&lt;!&ndash; 条款名称&ndash;&gt;-->
<!-- <a-col :span="12">-->
<!-- <a-form-model-item :label="$t('clauseName')" prop="name">-->
<!-- <a-input v-model="form.name" :placeholder="$t('pleaseEnter')+$t('clauseName')" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!--&lt;!&ndash; 功能领域&ndash;&gt;-->
<!-- <a-row :gutter="24">-->
<!-- <a-col :span="12">-->
<!-- <a-form-model-item :label="$t('functionalAreas')" prop="funArea">-->
<!-- <j-dict-select-tag type="list" v-model="form.funArea" dictCode="function_territory" :placeholder="$t('pleaseSelect')+$t('functionalAreas')" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!--&lt;!&ndash; 技术领域&ndash;&gt;-->
<!-- <a-col :span="12">-->
<!-- <a-form-model-item :label="$t('technicalField')" prop="tecArea">-->
<!-- <j-dict-select-tag type="list" v-model="form.tecArea" dictCode="technology_territory" :placeholder="$t('pleaseSelect')+$t('technicalField')" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!--&lt;!&ndash; 信息类别&ndash;&gt;-->
<!-- <a-row :gutter="24">-->
<!-- <a-col :span="12">-->
<!-- <a-form-model-item :label="$t('informationCategory')" prop="infoType">-->
<!-- <j-dict-select-tag type="list" v-model="form.infoType" dictCode="xxx" :placeholder="$t('pleaseSelect')+$t('informationCategory')" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!-- 内容简介-->
<span class="con-divider">{{$t('contentValidity')}}</span>
<a-divider dashed />
@@ -130,10 +351,10 @@
>
<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
<a-form-item :label="$t('numberRows')">
<a-input-number v-model="rowCount" :min="1" :placeholder="$t('pleaseEnter')+$t('numberRows')" :formatter="limitNumber" :parser="limitNumber" />
<a-input-number v-model="rowCount" :min="1" :max="99999" :placeholder="$t('pleaseEnter')+$t('numberRows')" :formatter="limitNumber" :parser="limitNumber" />
</a-form-item>
<a-form-item :label="$t('numberColumns')">
<a-input-number v-model="colCount" :min="1" :placeholder="$t('pleaseEnter')+$t('numberColumns')" :formatter="limitNumber" :parser="limitNumber" />
<a-input-number v-model="colCount" :min="1" :max="99999" :placeholder="$t('pleaseEnter')+$t('numberColumns')" :formatter="limitNumber" :parser="limitNumber" />
</a-form-item>
</a-form>
</a-modal>
@@ -156,11 +377,20 @@
<script>
import Vue from 'vue'
import uploadFile from '@/components/uploadFile/file'
import Standardselection from '@/components/Standardselection/index'
import PersonnelSelection from '@/components/PersonnelSelection/index'
import SplitUpload from '@/components/SplitUpload/index'
import UEditor from '@/components/ueditor/index'
import moment from 'moment'
import { getAction, postAction } from '@/api/manage'
// import eventBUs from '../../common/event'
export default {
name: 'splitAddForm',
components:{
uploadFile,
Standardselection,
PersonnelSelection,
SplitUpload,
UEditor
},
@@ -188,27 +418,19 @@
textNumber:1,
Title:this.$t('add'),
confirmLoading: false,
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
visible:false,
addConVisible:false,
form:{},
validatorRules:{
number:[
{ required:true,message: this.$t('pleaseEnter')+this.$t('clauseNo'),trigger: 'blur' },
{ min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' }
],
name:[
{ required:true,message: this.$t('pleaseEnter')+this.$t('clauseName'),trigger: 'blur' },
{ min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' }
]
},
// validatorRules:{
// number:[
// { required:true,message: this.$t('pleaseEnter')+this.$t('clauseNo'),trigger: 'blur' },
// { min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' }
// ],
// name:[
// { required:true,message: this.$t('pleaseEnter')+this.$t('clauseName'),trigger: 'blur' },
// { min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' }
// ]
// },
addIndex:'',
addImgVisible:false, //上传图片弹框
titleImg:this.$t('uploadPictures'),
@@ -321,11 +543,42 @@
tableColVisible:false,
colCount:'', //列数
rowCount:'', //行数
formInline: {},
isFormInline: false,
rules: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 }
},
dataList: [],
ruleList: [],
rules: {},
confirmLoading: false,
uploadName: '',
type: 'add',
}
},
props:{
addVisible:Boolean,
formTitle:String,
addVisible: {
type:Boolean,
default:false
},
formTitle:{
type:String,
default:''
},
url: {
type: Object,
default: {}
},
flag: {
type: String,
default: ''
},
},
watch:{
selected(val){
@@ -363,6 +616,7 @@
},
//保存
splitSave(){
console.log('formInline',this.formInline)
this.$refs.splitEditForm.validate(valid=>{
if(valid){
@@ -398,7 +652,7 @@
this.tableColVisible=true
}
console.log('conteend',this.contentList)
// console.log('conteend',this.contentList)
},
handleCancel(){
this.addConVisible=false
@@ -487,7 +741,152 @@
this.$refs.ueditor.setContent(this.ueContent)
})
}
console.log('cont1111',this.addIndex,this.contentList)
// console.log('cont1111',this.addIndex,this.contentList)
},
dateChange(item) {
this.formInline[item.db_field_name] = this.formInline[item.db_field_name] ? moment(this.formInline[item.db_field_name]).format('YYYY-MM-DD') : ''
},
onChange(item) {
let dateOne = moment(this.formInline[item][0]).format('YYYY-MM-DD')
let dateTwo = moment(this.formInline[item][1]).format('YYYY-MM-DD')
this.formInline[item] = dateOne ? [dateOne, dateTwo] : []
},
clickButtonToUpload(item) {
this.$refs.uploadFile.perentHandleFunc()
this.$refs.uploadFile.state = item.flag
this.$refs.uploadFile.visible = true
this.uploadName = item.db_field_name
getAction('sys/common/getFileInfos', { id: this.formInline[item.db_field_name] }).then((res) => {
if (res.success) {
this.$refs.uploadFile.perentHandleFunc(res.result)
} else {
this.$refs.uploadFile.perentHandleFunc()
}
})
},
/** 上传文件的回调 */
uploadSuccess(data) {
let attIdList = []
if (data && data.length > 0) {
data.map(item => {
attIdList.push(item.id || data.name)
})
}
/** 赋值给当前对应的表单文件 */
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
},
handleInput(value) {
this.$nextTick(() => {
this.formInline = { ...this.formInline }
this.$refs.splitEditForm.validateField([value])
})
},
IntegrateData() {
this.isFormInline = false
let ruleList = []
// this.ruleList.forEach(res => {
// Object.keys(res).forEach(val => {
// res[val].forEach(ol => {
// ruleList.push(ol)
// })
// })
// })
let rules = {}
this.ruleList.forEach((res, index) => {
const rule = []
if (res.field_must_input == 1) {
if (res.field_show_type === '1') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.field_show_type === '4' || res.field_show_type === '6' ||
res.field_show_type === '5' || res.field_show_type === '7'
) {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'change'
})
} else if (res.field_show_type === '2') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.field_show_type === '8' || res.field_show_type === '9' || res.field_show_type === '10' || res.field_show_type === '11') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.field_show_type === '3') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'change'
})
}
}
if (res.field_show_type === '1' || res.field_show_type === '2' ||
res.field_show_type === '8' || res.field_show_type === '9' || res.field_show_type === '10'
|| res.field_show_type === '11') {
rule.push({
max: res.db_length,
message: res.db_field_txt + '不能超出' + res.db_length + '个字符',
trigger: 'blur'
})
}
if (rule.length > 0) {
rules[res.db_field_name] = rule
}
})
this.$set(this, 'rules', rules)
console.log(this.rules)
this.isFormInline = true
this.confirmLoading = false
},
getForm(callBack) {
this.confirmLoading = true
let params = {
flag: this.flag,
type: this.type
}
getAction(this.url.getAddForm, params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
// console.log('res',this.dataList)
this.IntegrateData()
callBack && callBack()
}
})
},
edit(item) {
this.type = 'edit'
this.getForm(() => {
getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
if (res.success) {
this.formInline = res.result[0]
}
})
})
},
add() {
this.formInline = {}
this.type = 'add'
this.getForm()
},
StandardselectionChange(value, id) {
this.formInline[value + '_id'] = id
this.formInline = { ...this.formInline }
},
PersonnelSelectionChange(value, id) {
this.formInline[value + '_id'] = id
this.formInline = { ...this.formInline }
},
//正则替换小数点
limitNumber(value) {
@@ -511,6 +910,38 @@
}
.split-table-drawer{
.split-content{
.box-title-text {
line-height: 1.4;
display: flex;
.title-text {
width: 114px;
text-align: right;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 42px;
line-height: 42px;
.Required {
color: red;
margin-right: 4px;
}
.title-text-text {
margin-top: 9px;
}
}
.itemModel {
width: calc(100% - 130px);
display: inline-block;
margin-top: 2px;
}
}
.con-divider{
font-size: 16px;
font-weight: 500;