645 lines
24 KiB
Java
645 lines
24 KiB
Java
<template>
|
||
<a-spin :spinning="confirmLoading">
|
||
<a-form-model :model="formInline" v-if="isFormInline" class="formAdd" :rules="rules" ref="ruleForm">
|
||
|
||
<div v-for="(val,index) in dataList" :key="index">
|
||
<div v-for="(ol,indexOne) in Object.keys(val)">
|
||
<div class="header-text">
|
||
{{ol}}
|
||
</div>
|
||
<a-row :gutter="24">
|
||
<div v-for="item in val[ol]">
|
||
<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"
|
||
@input="replaceLikeVal($event,item.db_field_name)"
|
||
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-multi" :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)"
|
||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||
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]"
|
||
:disabled="disabled"
|
||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||
@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' || item.field_show_type === 'text'">
|
||
<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-text" :prop="item.db_field_name">
|
||
<a-textarea
|
||
@input="replaceLikeVal($event,item.db_field_name)"
|
||
: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"
|
||
v-if="isFormInline"
|
||
: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"
|
||
: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
|
||
tree-node-filter-prop="title"
|
||
v-model="formInline[item.db_field_name]"
|
||
:maxTagCount="1"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
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-multi" :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>
|
||
</div>
|
||
|
||
</div>
|
||
<uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFile>
|
||
</a-form-model>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script>
|
||
import uploadFile from '@/components/uploadFile/file'
|
||
import Standardselection from '@/components/Standardselection/index'
|
||
import PersonnelSelection from '@/components/PersonnelSelection/index'
|
||
import { getAction, postAction } from '@/api/manage'
|
||
import eventBUs from '../../common/event'
|
||
import moment from 'moment'
|
||
|
||
export default {
|
||
name: 'index',
|
||
components: {
|
||
uploadFile,
|
||
Standardselection,
|
||
PersonnelSelection
|
||
},
|
||
props: {
|
||
url: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
flag: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
formInline: {},
|
||
isFormInline: false,
|
||
rules: {},
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 6 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 17 }
|
||
},
|
||
dataList: [],
|
||
ruleList: [],
|
||
validatorRules: {},
|
||
confirmLoading: false,
|
||
uploadName: '',
|
||
type: 'add',
|
||
headerText: [
|
||
{
|
||
text: this.$t('essentialInformation'),
|
||
content: []
|
||
},
|
||
{
|
||
text: this.$t('textInformation'),
|
||
content: []
|
||
},
|
||
{
|
||
text: this.$t('relatedInformation'),
|
||
content: []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
disabledDate(current) {
|
||
return current && current < moment().subtract(1, 'day')
|
||
},
|
||
replaceLikeVal(comp, item) {
|
||
if (comp.target.value.indexOf('\'') != -1 || comp.target.value.indexOf('"') != -1) {
|
||
comp.target.value = comp.target.value.replace(/\'/g, '’').replace(/\"/g, '“')
|
||
}
|
||
this.formInline[item] = comp.target.value
|
||
this.formInline = { ...this.formInline }
|
||
},
|
||
sumber() {
|
||
this.$refs.ruleForm.validate(valid => {
|
||
if (valid) {
|
||
this.confirmLoading = true
|
||
let url = ''
|
||
if (this.formInline.id) {
|
||
url = this.url.updateInfo
|
||
} else {
|
||
url = this.url.addInfo
|
||
}
|
||
let formInline = JSON.parse(JSON.stringify(this.formInline))
|
||
Object.keys(formInline).forEach(res => {
|
||
if (formInline[res] instanceof Array) {
|
||
formInline[res] = formInline[res].join(',')
|
||
}
|
||
})
|
||
postAction(url, formInline).then((res) => {
|
||
if (res.success) {
|
||
this.confirmLoading = false
|
||
this.$message.success(this.$t('OperationSuccessful'))
|
||
if (this.formInline.id) {
|
||
eventBUs.$emit('searchGetData')
|
||
} else {
|
||
eventBUs.$emit('searchGetData')
|
||
}
|
||
|
||
this.$emit('addFormClick')
|
||
} else {
|
||
this.confirmLoading = false
|
||
this.$emit('addFormWarning')
|
||
if (res.message.indexOf('发布日期不能大于') >= 0) {
|
||
this.$message.warning(res.message)
|
||
} else if (res.message.indexOf('编号已存在') >= 0) {
|
||
this.$message.warning(this.$t('theNumberAgain'))
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
this.$emit('addFormWarning')
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
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.ruleForm.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 = {}
|
||
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 === '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 + this.$t('cannotExceed') + res.db_length + this.$t('Characters'),
|
||
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
|
||
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 }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.formAdd .ant-form-item-label {
|
||
width: 130px;
|
||
}
|
||
|
||
.formAdd .ant-form-item-control-wrapper {
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
|
||
/*.formAdd .ant-form-item {*/
|
||
/* margin-bottom: 20px;*/
|
||
/*}*/
|
||
|
||
.itemModel .ant-form-item-control-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
.itemModel-text .ant-form-item-control-wrapper {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.box-input .ant-select-selection--single {
|
||
height: 38px;
|
||
}
|
||
|
||
.box-input .ant-select-selection--multiple {
|
||
height: 38px;
|
||
}
|
||
|
||
.box-input .ant-select-selection__rendered {
|
||
line-height: 38px;
|
||
height: 38px;
|
||
}
|
||
|
||
.box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.box-input .ant-calendar-picker {
|
||
line-height: 38px;
|
||
height: 38px;
|
||
}
|
||
|
||
.box-input .ant-calendar-picker-input {
|
||
height: 38px;
|
||
}
|
||
|
||
.box-input .ant-input-number-input-wrap {
|
||
line-height: 38px;
|
||
height: 38px;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.box-title-text {
|
||
line-height: 1.4;
|
||
display: flex;
|
||
/*align-items: center;*/
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.box-input {
|
||
display: inline-block;
|
||
height: 38px;
|
||
width: 100%;
|
||
}
|
||
|
||
.itemModel {
|
||
width: calc(100% - 130px);
|
||
display: inline-block;
|
||
margin-top: 2px;
|
||
height: 40px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.itemModel-text {
|
||
width: calc(100% - 130px);
|
||
display: inline-block;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.Required {
|
||
color: red;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.title-text-text {
|
||
margin-top: 9px;
|
||
}
|
||
|
||
.header-text {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-left: 15px;
|
||
/*border-bottom: 1px #d9d9d9 dashed;*/
|
||
height: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.formAdd {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.button-text {
|
||
height: 38px;
|
||
width: calc(100% - 100px);
|
||
line-height: 38px;
|
||
background: #fff;
|
||
border: 1px #00B3BE solid;
|
||
color: #00B3BE;
|
||
}
|
||
|
||
.button-text-text {
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -21px;
|
||
display: inline-block;
|
||
padding: 6px;
|
||
border-radius: 50%;
|
||
background: red;
|
||
text-align: center;
|
||
line-height: 6px;
|
||
color: #fff;
|
||
}
|
||
</style> |