添加文档库弹框组件

This commit is contained in:
qq787203167
2022-02-15 17:53:00 +08:00
parent 469c190dc1
commit 12ac3223e1
7 changed files with 863 additions and 294 deletions
+49 -248
View File
@@ -1,197 +1,13 @@
<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 headerText" :key="index">
<div class="header-text">
&nbsp;{{val.text}}
</div>
<a-row :gutter="24" v-if="isDisplayType">
<div v-for="item in val.content">
<a-col :span="12" v-if="item.field_show_type === 'text'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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="'请输入'+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.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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>
<a-col :span="12" v-else-if="item.field_show_type === 'date'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-date-picker class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
style="width: 100%"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'SMULTITIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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"
@change="onChange"></a-range-picker>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'NUMBER'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-input-number class="box-input"
: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 === 'list'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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('selectStatus')" :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 === 'list_multi'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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="'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 === 'RADIO'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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="24" v-else-if="item.field_show_type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-textarea :placeholder="$t('selectStatus')"
:disabled="disabled"
v-model="formInline[item.db_field_name]" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'file'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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.db_field_name)">
{{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
formInline[item.db_field_name] == null) ? '点击上传' : '查看已上传文件'
}}
</a-button>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.field_show_type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<Standardselection :query="item" :disabled="disabled" v-model="formInline[item.db_field_name]"/>
</a-form-model-item>
</div>
</a-col>
</div>
</a-row>
</div>
<a-row :gutter="24" v-if="!isDisplayType">
<a-row :gutter="24">
<div v-for="(item,index) in dataList" :key="index">
<a-col :span="12" v-if="item.field_show_type === 'text'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -205,8 +21,8 @@
<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.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -221,8 +37,8 @@
<a-col :span="12" v-else-if="item.field_show_type === 'date'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -236,8 +52,8 @@
<a-col :span="12" v-else-if="item.field_show_type === 'SMULTITIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -251,8 +67,8 @@
<a-col :span="12" v-else-if="item.field_show_type === 'NUMBER'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -266,8 +82,8 @@
<a-col :span="12" v-else-if="item.field_show_type === 'list'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -282,8 +98,8 @@
<a-col :span="12" v-else-if="item.field_show_type === 'list_multi'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -298,8 +114,8 @@
<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.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -313,8 +129,8 @@
<a-col :span="24" v-else-if="item.field_show_type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -325,15 +141,15 @@
</div>
</a-col>
<a-col :span="24" v-else-if="item.field_show_type === 'file'">
<a-col :span="12" v-else-if="item.field_show_type === 'file'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-button type="primary" style="height: 38px;width: calc(50% - 80px);line-height: 38px"
<a-button type="primary" class="button-text"
@click="clickButtonToUpload(item.db_field_name)">
{{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
formInline[item.db_field_name] == null) ? '点击上传' : '查看已上传文件'
@@ -346,8 +162,8 @@
<a-col :span="24" v-else-if="item.field_show_type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.Required">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
@@ -383,10 +199,6 @@
type: Object,
default: {}
},
isDisplayType: {
type: Boolean,
default: false
},
flag: {
type: String,
default: ''
@@ -410,27 +222,13 @@
sm: { span: 17 }
},
dataList: [],
ruleList: [],
validatorRules: {},
confirmLoading: false,
uploadName: '',
headerText: [
{
text: '基本信息',
content: []
},
{
text: '文本信息',
content: []
},
{
text: '关联信息',
content: []
}
]
uploadName: ''
}
},
mounted() {
this.IntegrateData()
this.getForm()
},
methods: {
@@ -484,46 +282,47 @@
IntegrateData() {
this.isFormInline = false
let rules = {}
this.dataList.forEach((res, index) => {
this.ruleList.forEach((res, index) => {
const rule = []
if (res.Required) {
if (res.field_must_input == 0) {
if (res.field_show_type === 'text') {
rule.push({
required: true,
message: res.name + '不能为空',
message: res.db_field_txt + '不能为空',
trigger: 'blur'
})
} else if (res.field_show_type === 'CHECKBOX' || res.field_show_type === 'list_multi' ||
res.field_show_type === 'date' || res.field_show_type === 'file') {
rule.push({
required: true,
message: res.name + '不能为空',
message: res.db_field_txt + '不能为空',
trigger: 'change'
})
} else if (res.field_show_type === 'NUMBER') {
rule.push({
required: true,
message: res.name + '不能为空',
message: res.db_field_txt + '不能为空',
trigger: 'blur'
})
} else if (res.field_show_type === 'TEXTAREA') {
rule.push({
required: true,
message: res.name + '不能为空',
message: res.db_field_txt + '不能为空',
trigger: 'blur'
})
} else if (res.field_show_type === 'RADIO' || res.field_show_type === 'list') {
rule.push({
required: true,
message: res.name + '不能为空',
message: res.db_field_txt + '不能为空',
trigger: 'change'
})
}
}
if (rule.length > 0) {
rules[res.attrModel] = rule
rules[res.db_field_name] = rule
}
})
console.log(rules)
this.$set(this, 'rules', rules)
this.isFormInline = true
this.confirmLoading = false
@@ -536,19 +335,20 @@
getAction(this.url.getAddForm, params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
this.IntegrateData()
if (this.isDisplayType) {
this.headerText.forEach((res) => {
res.content = []
this.dataList.forEach(val => {
if (res.text === val.area) {
res.content.push(val)
}
})
})
}
}
})
},
edit(item) {
getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
if (res.success) {
this.formInline = res.result[0]
}
})
},
add(){
this.formInline = {}
}
}
}
@@ -655,7 +455,8 @@
.formAdd {
margin-bottom: 40px;
}
.button-text{
.button-text {
height: 38px;
width: calc(100% - 120px);
line-height: 38px;
@@ -0,0 +1,253 @@
<template>
<a-drawer
:title="title"
:maskClosable="true"
:width="drawerWidth"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
style="height: 100%;overflow: auto;padding-bottom: 53px;">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<div v-for="(item,index) in searchList" :key="index" style="line-height: 48px;display: inline-block">
<div class="box-title-text" v-if="item.field_show_type == 'text'">
<div class="title-text" :title="item.db_field_txt">
{{item.db_field_txt}}
</div>
<a-input class="box-input" :placeholder="item.placeholder"
v-model="queryParam[item.db_field_name]"></a-input>
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'list_multi'">
<div class="title-text" :title="item.db_field_txt">
<span>{{item.db_field_txt}}</span>
</div>
<j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
:placeholder="$t('selectStatus')" :type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'date'">
<div class="title-text" :title="item.db_field_txt">
<span>{{item.db_field_txt}}</span>
</div>
<a-date-picker class="box-input" v-model="queryParam[item.db_field_name]"/>
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'list'">
<div class="title-text" :title="item.db_field_txt">
{{item.db_field_txt}}
</div>
<j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
:placeholder="$t('selectStatus')" :type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
</div>
</div>
<span class="table-page-search-submitButtons button">
<a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
<a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
</span>
</a-form>
<div style="height: 100%">
<div class="box">
<a-table
v-if="visible"
class="table"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:pagination="false"
:data-source="dataSource"
:loading="loading"
>
</a-table>
</div>
<div class="page" v-if="dataSource.length > 0">
<a-pagination
:show-total="total => ` ${total} `"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
@change="onChange"
@showSizeChange="SizeChange"
/>
</div>
</div>
<div class="drawer-bootom-button">
<a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
</div>
</a-drawer>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
name: 'index',
props:{
url: {
type: Object,
default: {}
},
},
data() {
return {
title: '调取已入库文件',
drawerWidth: 800,
visible: false,
confirmLoading: false,
queryParam: {},
selectedRowKeys: [],
searchList: [
{
field_show_type: 'text',
db_field_name: 'name',
db_field_txt: '标题'
},
{
field_show_type: 'text',
db_field_name: 'name',
db_field_txt: '标题'
},
{
field_show_type: 'text',
db_field_name: 'name',
db_field_txt: '标题dsfdsfds'
},
{
field_show_type: 'text',
db_field_name: 'name',
db_field_txt: '标题1111'
}
],
columns: [],
dataSource: [],
loading: false,
pageSize: 10,
total: 0,
pageNo: 1
}
},
mounted() {
},
watch:{
visible:function(val) {
if (val){
this.queryParam = {}
this.getData()
this.getTableList()
}
}
},
methods: {
handleCancel() {
this.visible = false
},
handleSubmit() {
},
searchQuery() {
this.getTableList()
},
searchReset() {
this.queryParam = {}
this.getTableList()
},
onSelectChange() {
},
SizeChange(page, pageSize) {
this.pageSize = pageSize
this.getTableList()
},
onChange(page, pageSize) {
this.pageNo = page
this.getTableList()
},
getData() {
let params = {
flag:'1',
}
getAction(this.url.tableHeader, params).then((res) => {
if (res.success) {
var jsonHead = res.result
this.columns = []
jsonHead.forEach(res => {
this.columns.push({
title: res.db_field_txt,
dataIndex: res.db_field_name,
align: 'center'
})
})
}
})
},
getTableList() {
let params = {
...this.queryParam,
pageNo: this.pageNo,
pageSize: this.pageSize
}
this.loading = true
getAction(this.url.tableList, params).then((res) => {
if (res.success) {
this.dataSource = res.result.records
this.total = res.result.total
this.loading = false
}
})
},
}
}
</script>
<style lang="less" scoped>
.box-title-text {
line-height: 1.4;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.title-text {
width: 50px;
display: inline-block;
font-weight: bold;
font-size: 14px;
margin-right: 16px;
margin-top: 3px;
text-align: right;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.box-input {
display: inline-block;
width: 70%;
height: 38px;
margin-top: 2px;
}
.box-button {
height: 38px;
}
.drawer-bootom-button {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
.button {
margin-left: 18px;
}
.page {
text-align: right;
margin-top: 20px;
}
</style>
@@ -0,0 +1,500 @@
<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 headerText" :key="index">
<div class="header-text">
&nbsp;{{val.text}}
</div>
<a-row :gutter="24">
<div v-for="item in val.content">
<a-col :span="12" v-if="item.field_show_type === 'text'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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="'请输入'+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 == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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>
<a-col :span="12" v-else-if="item.field_show_type === 'date'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-date-picker class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
style="width: 100%"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'SMULTITIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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"
@change="onChange"></a-range-picker>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'NUMBER'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-input-number class="box-input"
: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 === 'list'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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('selectStatus')" :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 === 'list_multi'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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="'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 === 'RADIO'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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="24" v-else-if="item.field_show_type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<a-textarea :placeholder="$t('selectStatus')"
:disabled="disabled"
v-model="formInline[item.db_field_name]" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.field_show_type === 'file'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{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.db_field_name)">
{{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
formInline[item.db_field_name] == null) ? '点击上传' : '查看已上传文件'
}}
</a-button>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.field_show_type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
<span class="Required" v-if="item.field_must_input == 0">*</span>
<!-- <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.db_field_name">
<Standardselection :query="item" :disabled="disabled" v-model="formInline[item.db_field_name]"/>
</a-form-model-item>
</div>
</a-col>
</div>
</a-row>
</div>
<uploadFile ref="uploadFile" :disabled="disabled" @uploadSuccess="uploadSuccess"></uploadFile>
</a-form-model>
</a-spin>
</template>
<script>
import uploadFile from '@/components/uploadFile/file'
import Standardselection from '@/components/Standardselection/index'
import { getAction, postAction } from '@/api/manage'
import eventBUs from '../../common/event'
export default {
name: 'index',
components: {
uploadFile,
Standardselection
},
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: '',
headerText: [
{
text: '基本信息',
content: []
},
{
text: '文本信息',
content: []
},
{
text: '关联信息',
content: []
}
]
}
},
mounted() {
this.getForm()
},
methods: {
sumber() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
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.$message.success(res.message)
eventBUs.$emit('searchReset')
this.$emit('addFormClick')
} else {
this.$message.warning(res.message)
}
})
} else {
return false
}
})
},
onChange(date, dateString) {
console.log(date, dateString)
},
clickButtonToUpload(current) {
this.$refs.uploadFile.visible = true
this.uploadName = current
},
/** 上传文件的回调 */
uploadSuccess(data) {
console.log(data)
let attIdList = []
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 rules = {}
this.ruleList.forEach((res, index) => {
const rule = []
if (res.field_must_input == 0) {
if (res.field_show_type === 'text') {
rule.push({
required: true,
message: res.db_field_txt + '不能为空',
trigger: 'blur'
})
} else if (res.field_show_type === 'CHECKBOX' || res.field_show_type === 'list_multi' ||
res.field_show_type === 'date' || res.field_show_type === 'file') {
rule.push({
required: true,
message: res.db_field_txt + '不能为空',
trigger: 'change'
})
} else if (res.field_show_type === 'NUMBER') {
rule.push({
required: true,
message: res.db_field_txt + '不能为空',
trigger: 'blur'
})
} else if (res.field_show_type === 'TEXTAREA') {
rule.push({
required: true,
message: res.db_field_txt + '不能为空',
trigger: 'blur'
})
} else if (res.field_show_type === 'RADIO' || res.field_show_type === 'list') {
rule.push({
required: true,
message: res.db_field_txt + '不能为空',
trigger: 'change'
})
}
}
if (rule.length > 0) {
rules[res.db_field_name] = rule
}
})
this.$set(this, 'rules', rules)
this.isFormInline = true
this.confirmLoading = false
},
getForm() {
this.confirmLoading = true
let params = {
flag: this.flag
}
getAction(this.url.getAddForm, params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
this.IntegrateData()
this.headerText.forEach((res) => {
res.content = []
this.dataList.forEach(val => {
if (res.text === val.area) {
res.content.push(val)
}
})
})
}
})
},
edit(item) {
getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
if (res.success) {
this.formInline = res.result[0]
}
})
},
add(){
this.formInline = {}
}
}
}
</script>
<style>
.formAdd .ant-form-item-label {
width: 130px;
}
.formAdd .ant-form-item-control-wrapper {
display: inline-block;
width: calc(100% - 130px);
}
/*.formAdd .ant-form-item {*/
/* margin-bottom: 20px;*/
/*}*/
.itemModel .ant-form-item-control-wrapper {
width: 100%;
}
.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: bold;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-input {
display: inline-block;
height: 38px;
width: 100%;
}
.itemModel {
width: calc(100% - 130px);
display: inline-block;
margin-top: 2px;
}
.Required {
color: red;
margin-right: 4px;
}
.title-text-text {
margin-top: 11px;
display: inline-block;
}
.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% - 120px);
line-height: 38px;
background: #fff;
border: 1px #00B3BE solid;
color: #00B3BE;
}
</style>
+14 -14
View File
@@ -5,7 +5,7 @@
<template v-if="index < 2">
<div class="box-title-text" v-if="item.field_show_type == 'text'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<a-input class="box-input" :placeholder="item.placeholder"
@@ -13,7 +13,7 @@
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'list_multi'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
@@ -22,14 +22,14 @@
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'date'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<a-date-picker class="box-input" v-model="queryParam[item.db_field_name]"/>
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'list'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
@@ -40,7 +40,7 @@
<template v-if="toggleSearchStatus && index >= 2">
<div class="box-title-text" v-if="item.field_show_type == 'text'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<a-input class="box-input" :placeholder="item.placeholder"
@@ -48,7 +48,7 @@
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'list_multi'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
@@ -57,14 +57,14 @@
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'date'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<a-date-picker class="box-input" v-model="queryParam[item.db_field_name]"/>
</div>
<div class="box-title-text" v-else-if="item.field_show_type == 'list'">
<div class="title-text">
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<!-- <span>{{item.db_field_en_name}}</span><br>-->
<span>{{item.db_field_txt}}</span>
</div>
<j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
@@ -106,8 +106,8 @@
data() {
return {
queryParam: {},
toggleSearchStatus:false,
searchList:[],
toggleSearchStatus: false,
searchList: []
}
},
mounted() {
@@ -131,9 +131,9 @@
}
})
},
handleToggleSearch(){
this.toggleSearchStatus = !this.toggleSearchStatus
},
handleToggleSearch() {
this.toggleSearchStatus = !this.toggleSearchStatus
}
}
}
</script>
@@ -166,6 +166,6 @@
.box-button {
height: 38px;
margin-top: 2px;
/*margin-top: 2px;*/
}
</style>
+15 -13
View File
@@ -46,15 +46,15 @@
type: Array,
default: []
},
//是否显示操作;默认显示
isOperation: {
type: Boolean,
default: true
},
flag: {
type: String,
default: ''
}
},
//是否显示操作;默认不显示
showAction:{
type: Boolean,
default: false
},
},
data() {
return {
@@ -99,12 +99,14 @@
align: 'center'
})
})
this.columns.push({
title: '操作',
align: 'center',
fixed: 'right',
scopedSlots: { customRender: 'operation' }
})
if (this.showAction){
this.columns.push({
title: '操作',
align: 'center',
fixed: 'right',
scopedSlots: { customRender: 'operation' }
})
}
}
})
},
@@ -136,7 +138,7 @@
},
OperationClick(ol, item) {
this.$emit(ol.ClickEvent, item)
}
},
}
}
</script>
@@ -19,6 +19,7 @@
@editTable="editTable"
@deleteTable="deleteTable"
:url="url"
showAction
@Collection="Collection"
@subscribe="subscribe"
/>
@@ -28,6 +29,11 @@
:url="url"
:flag="'1'"
/>
<frameAssembly
:url="url"
ref="frameAssemblyRef"
/>
</a-card>
</template>
@@ -35,14 +41,15 @@
import search from '@/components/search/index'
import tableData from '@/components/tableDate/index'
import addForm from './modules/addForm'
import frameAssembly from '@/components/frameAssembly/index'
export default {
name: 'docLibrary',
components: {
search,
addForm,
tableData
tableData,
frameAssembly
},
data() {
return {
@@ -74,7 +81,7 @@
addInfo:'document/bussDocumentLibraryEO/addInfo', //新增
updateInfo:'document/bussDocumentLibraryEO/updateInfo', //编辑
getDocumentInfo:'document/bussDocumentLibraryEO/getDocumentInfoById', //查看
}
},
}
},
methods: {
@@ -97,6 +104,9 @@
},
handleCompare() {
this.$nextTick(()=>{
this.$refs.frameAssemblyRef.visible = true
})
// this.$refs.addFormRef.add()
},
handleFileImport(){
@@ -104,8 +114,7 @@
},
//编辑按钮
editTable(val) {
this.$refs.addFormRef.edit()
console.log(val)
this.$refs.addFormRef.edit(val)
},
//删除按钮
deleteTable(val){
@@ -12,22 +12,18 @@
ref="addFormDataRef"
@addFormClick="addFormClick"
:flag="'1'"
isDisplayType
v-if="visible"
:url="url"
/>
<div class="drawer-bootom-button">
<a-popconfirm :title="$t('AreYouWantDiscardEditing')" @confirm="handleCancel" :okText="$t('determine')"
:cancelText="$t('cancel')">
<a-button style="margin-right: .8rem">{{$t('cancel')}}</a-button>
</a-popconfirm>
<a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
</div>
</a-drawer>
</template>
<script>
import addFormData from '@/components/addForm/index'
import addFormData from '@/components/libraryAddForm/index'
export default {
name: 'docLibraryAddForm',
@@ -36,15 +32,15 @@
},
data() {
return {
title: '添加',
title: '新增',
drawerWidth: 900,
visible: false,
confirmLoading: false,
isDisplayType:false,
dataList:[]
isDisplayType: false,
dataList: []
}
},
props:{
props: {
flag: {
type: String,
default: ''
@@ -53,7 +49,7 @@
url: {
type: Object,
default: {}
},
}
},
mounted() {
@@ -63,17 +59,25 @@
this.visible = false
},
add() {
this.title = '新增'
this.visible = true
this.$nextTick(() => {
this.$refs.addFormDataRef.add()
})
},
edit() {
edit(item) {
this.title = '编辑'
this.visible = true
this.$nextTick(() => {
this.$refs.addFormDataRef.edit(item)
})
},
handleSubmit() {
this.$refs.addFormDataRef.sumber()
},
addFormClick(){
addFormClick() {
this.visible = false
},
}
}
}
</script>