优化table

This commit is contained in:
qq787203167
2022-01-24 18:01:16 +08:00
parent f488ab4948
commit 6ff342acc8
4 changed files with 249 additions and 46 deletions
+227 -13
View File
@@ -1,7 +1,159 @@
<template>
<a-spin :spinning="confirmLoading">
<a-form-model :model="formInline" v-if="isFormInline" class="formAdd" :rules="rules" ref="ruleForm">
<a-row :gutter="24">
<a-row :gutter="24" v-if="isDisplayType">
<div v-for="(val,index) in headerText" :key="index">
<div class="header-text">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{val.text}}
</div>
<div v-for="item in val.content" style="overflow: hidden">
<a-col :span="12" v-if="item.type === 'INPUT'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<a-input class="box-input" v-model="formInline[item.attrModel]" :placeholder="item.placeholder"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'CHECKBOX'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<j-multi-select-tag class="box-input" v-model="formInline[item.attrModel]"
:placeholder="$t('selectStatus')" :type="'checkbox'"
:triggerChange="false" dictCode="valid_status"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'DATE'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<a-date-picker class="box-input" v-model="formInline[item.attrModel]"
style="width: 100%"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'NUMBER'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<a-input-number class="box-input" v-model="formInline[item.attrModel]" :min="1" :max="99999999"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'SELECT'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<j-dict-select-tag class="box-input" v-model="formInline[item.attrModel]"
:placeholder="$t('selectStatus')" :type="'select'"
:triggerChange="false" dictCode="valid_status"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'SELECTALL'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<j-multi-select-tag class="box-input" v-model="formInline[item.attrModel]"
:placeholder="$t('selectStatus')" :type="'select'"
:triggerChange="false" dictCode="valid_status"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'RADIO'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<j-dict-select-tag v-model="formInline[item.attrModel]" :placeholder="$t('selectStatus')"
:type="'radio'" :triggerChange="false" dictCode="valid_status"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<a-textarea :placeholder="$t('selectStatus')" v-model="formInline[item.attrModel]" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.type === 'FILE'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<a-button type="primary" style="height: 38px;width: calc(50% - 80px);line-height: 38px"
@click="clickButtonToUpload(item.attrModel)">
{{ (formInline[item.attrModel] === 'null' || formInline[item.attrModel] === '' ||
formInline[item.attrModel] == null) ? '上传文件' : '查看已上传文件'
}}
</a-button>
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<Standardselection :query="item" v-model="formInline[item.attrModel]"/>
</a-form-model-item>
</div>
</a-col>
</div>
</div>
</a-row>
<a-row :gutter="24" v-if="!isDisplayType">
<div v-for="(item,index) in dataList" :key="index">
<a-col :span="12" v-if="item.type === 'INPUT'">
<div class="box-title-text">
@@ -57,6 +209,7 @@
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'SELECT'">
<div class="box-title-text">
<div class="title-text">
@@ -100,6 +253,7 @@
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
@@ -112,6 +266,7 @@
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.type === 'FILE'">
<div class="box-title-text">
<div class="title-text">
@@ -129,6 +284,7 @@
</a-form-model-item>
</div>
</a-col>
<a-col :span="24" v-else-if="item.type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
@@ -141,6 +297,7 @@
</a-form-model-item>
</div>
</a-col>
</div>
</a-row>
@@ -163,6 +320,10 @@
url: {
type: Object,
default: {}
},
isDisplayType: {
type: Boolean,
default: false
}
},
data() {
@@ -189,7 +350,8 @@
name: '名称',
placeholder: '请输入名称',
attrModel: 'name',
enName: 'Name'
enName: 'Name',
text: '基本信息'
},
{
id: 2,
@@ -197,7 +359,8 @@
name: '标题',
placeholder: '请输入标题',
attrModel: 'title',
enName: 'title'
enName: 'title',
text: '基本信息'
},
{
id: 3,
@@ -206,7 +369,8 @@
placeholder: '请输入标题',
enName: 'Single choice',
validStatus: 'valid_status',
attrModel: 'radio'
attrModel: 'radio',
text: '基本信息'
},
{
id: 4,
@@ -215,7 +379,8 @@
enName: 'title',
placeholder: '请输入标题',
attrModel: 'checkbox',
validStatus: 'valid_status'
validStatus: 'valid_status',
text: '基本信息'
},
{
id: 5,
@@ -224,7 +389,8 @@
enName: 'title',
placeholder: '请输入标题',
attrModel: 'radio',
validStatus: 'valid_status'
validStatus: 'valid_status',
text: '基本信息'
},
{
id: 6,
@@ -233,7 +399,8 @@
enName: 'title',
placeholder: '请输入标题',
validStatus: 'valid_status',
attrModel: 'selectAll'
attrModel: 'selectAll',
text: '基本信息'
},
{
id: 7,
@@ -241,7 +408,8 @@
name: '数字输入框',
enName: 'title',
placeholder: '请输入数字输入框',
attrModel: 'number'
attrModel: 'number',
text: '基本信息'
},
{
id: 8,
@@ -249,7 +417,8 @@
name: '文本框',
enName: 'title',
placeholder: '请输入文本框',
attrModel: 'number'
attrModel: 'number',
text: '基本信息'
},
{
id: 9,
@@ -257,7 +426,8 @@
name: '上传文件',
enName: 'UploadFile',
placeholder: '请输入文本框',
attrModel: 'file'
attrModel: 'file',
text: '文本信息'
},
{
id: 10,
@@ -265,17 +435,49 @@
name: '标准选择',
enName: 'standard',
placeholder: '请手动输入或者选择标准',
attrModel: 'standard'
attrModel: 'standard',
text: '关联信息'
}
],
validatorRules: {},
confirmLoading: false,
uploadName: ''
uploadName: '',
headerText: [
{
text: '基本信息',
content: []
},
{
text: '文本信息',
content: []
},
{
text: '关联信息',
content: []
}
]
}
},
mounted() {
this.isFormInline = false
this.isFormInline = true
if (this.isDisplayType) {
this.headerText.forEach((res) => {
res.content = []
this.dataList.forEach(val => {
if (res.text === val.text) {
res.content.push(val)
}
})
})
this.headerText.forEach(res=>{
console.log(res)
res.content.forEach(val=>{
console.log(val)
})
})
console.log(this.headerText)
}
},
methods: {
sumber() {
@@ -302,7 +504,7 @@
/** 赋值给当前对应的表单文件 */
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
},
}
}
}
</script>
@@ -386,4 +588,16 @@
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;
}
</style>
+15 -1
View File
@@ -21,13 +21,19 @@
</template>
<script>
import { getAction } from '@/api/manage'
import eventBUs from '../../common/event.js'
export default {
name: 'index',
props: {
searchList: {
type: Array,
default: []
},
url: {
type: Object,
default: {}
}
},
data() {
@@ -36,7 +42,7 @@
}
},
mounted() {
this.getHeader()
},
methods: {
searchQuery() {
@@ -45,6 +51,14 @@
searchReset() {
this.queryParam = {}
eventBUs.$emit('searchQuery', this.queryParam)
},
getHeader() {
let params = {}
getAction(this.url.searchHeader, params).then((res) => {
if (res.success) {
}
})
}
}
}
+6 -32
View File
@@ -1,7 +1,7 @@
<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<search :searchList="searchList"/>
<search :url="url" :searchList="searchList"/>
</div>
<div class="table-operator">
<a-button @click="handleCompare()" type="primary" icon="plus">{{$t('DataComparison')}}</a-button>
@@ -11,7 +11,7 @@
:OperationList="OperationList"
@editTable="editTable"
@deleteTable="deleteTable"
:url="{}"
:url="url"
/>
</div>
<addForm ref="addFormClick"/>
@@ -57,37 +57,11 @@
}
],
selectedRowKeys: [],
dataSource: [],
loading: false,
columns: [
{
title: this.$t('tableName'),
align: 'center',
dataIndex: 'dataTable',
width: '120'
}, {
title: this.$t('DataID'),
align: 'center',
dataIndex: 'dataId',
width: '120'
}, {
title: this.$t('VersionNumber'),
align: 'center',
dataIndex: 'dataVersion',
width: '50'
}, {
title: this.$t('DataContent'),
align: 'center',
dataIndex: 'dataContent',
width: '150',
scopedSlots: { customRender: 'dataContent' }
}, {
title: this.$t('creator'),
align: 'center',
dataIndex: 'createBy',
width: '100'
}
]
url:{
searchHeader:'document/bussDocumentLibraryEO/getHeader',
queryCondition:'document/bussDocumentLibraryEO/queryCondition',
}
}
},
methods: {
@@ -10,6 +10,7 @@
style="height: 100%;overflow: auto;padding-bottom: 53px;">
<addFormData
ref="addFormDataRef"
isDisplayType
v-if="visible"
:url="url"
/>