优化组件

This commit is contained in:
qq787203167
2022-01-25 18:02:07 +08:00
parent 435378ebe7
commit 038bb33e57
4 changed files with 153 additions and 89 deletions
+70 -18
View File
@@ -1,12 +1,13 @@
<template> <template>
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<a-form-model :model="formInline" v-if="isFormInline" class="formAdd" :rules="rules" ref="ruleForm"> <a-form-model :model="formInline" v-if="isFormInline" class="formAdd" :rules="rules" ref="ruleForm">
<a-row :gutter="24" v-if="isDisplayType">
<div v-for="(val,index) in headerText" :key="index"> <div v-for="(val,index) in headerText" :key="index">
<div class="header-text"> <div class="header-text">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{val.text}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{val.text}}
</div> </div>
<div v-for="item in val.content" style="overflow: hidden"> <a-row :gutter="24" v-if="isDisplayType">
<div v-for="item in val.content">
<a-col :span="12" v-if="item.type === 'INPUT'"> <a-col :span="12" v-if="item.type === 'INPUT'">
<div class="box-title-text"> <div class="box-title-text">
<div class="title-text"> <div class="title-text">
@@ -35,7 +36,7 @@
</div> </div>
</a-col> </a-col>
<a-col :span="12" v-else-if="item.type === 'DATE'"> <a-col :span="12" v-else-if="item.type === 'SINGLETIME'">
<div class="box-title-text"> <div class="box-title-text">
<div class="title-text"> <div class="title-text">
<span class="Required">*</span> <span class="Required">*</span>
@@ -49,6 +50,19 @@
</div> </div>
</a-col> </a-col>
<a-col :span="12" v-else-if="item.type === 'SMULTITIME'">
<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-range-picker class="box-input" v-model="formInline[item.attrModel]" @change="onChange"></a-range-picker>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'NUMBER'"> <a-col :span="12" v-else-if="item.type === 'NUMBER'">
<div class="box-title-text"> <div class="box-title-text">
<div class="title-text"> <div class="title-text">
@@ -150,9 +164,10 @@
</div> </div>
</a-col> </a-col>
</div> </div>
</div> </a-row>
</div>
</a-row>
<a-row :gutter="24" v-if="!isDisplayType"> <a-row :gutter="24" v-if="!isDisplayType">
<div v-for="(item,index) in dataList" :key="index"> <div v-for="(item,index) in dataList" :key="index">
<a-col :span="12" v-if="item.type === 'INPUT'"> <a-col :span="12" v-if="item.type === 'INPUT'">
@@ -183,7 +198,7 @@
</div> </div>
</a-col> </a-col>
<a-col :span="12" v-else-if="item.type === 'DATE'"> <a-col :span="12" v-else-if="item.type === 'SINGLETIME'">
<div class="box-title-text"> <div class="box-title-text">
<div class="title-text"> <div class="title-text">
<span class="Required">*</span> <span class="Required">*</span>
@@ -197,6 +212,19 @@
</div> </div>
</a-col> </a-col>
<a-col :span="12" v-else-if="item.type === 'SMULTITIME'">
<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-range-picker v-model="formInline[item.attrModel]" @change="onChange"></a-range-picker>
</a-form-model-item>
</div>
</a-col>
<a-col :span="12" v-else-if="item.type === 'NUMBER'"> <a-col :span="12" v-else-if="item.type === 'NUMBER'">
<div class="box-title-text"> <div class="box-title-text">
<div class="title-text"> <div class="title-text">
@@ -437,6 +465,24 @@
placeholder: '请手动输入或者选择标准', placeholder: '请手动输入或者选择标准',
attrModel: 'standard', attrModel: 'standard',
text: '关联信息' text: '关联信息'
},
{
id: 11,
type: 'SINGLETIME',
name: '单日期选择',
enName: 'standard',
placeholder: '请单日期选择',
attrModel: 'time',
text: '基本信息'
},
{
id: 12,
type: 'SMULTITIME',
name: '多日期选择',
enName: 'standardtime',
placeholder: '请多日期选择',
attrModel: 'timeAll',
text: '基本信息'
} }
], ],
validatorRules: {}, validatorRules: {},
@@ -470,13 +516,6 @@
} }
}) })
}) })
this.headerText.forEach(res=>{
console.log(res)
res.content.forEach(val=>{
console.log(val)
})
})
console.log(this.headerText)
} }
}, },
methods: { methods: {
@@ -490,6 +529,9 @@
} }
}) })
}, },
onChange(date, dateString) {
console.log(date, dateString)
},
clickButtonToUpload(current) { clickButtonToUpload(current) {
this.$refs.uploadFile.visible = true this.$refs.uploadFile.visible = true
this.uploadName = current this.uploadName = current
@@ -543,6 +585,15 @@
margin-top: 6px; 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 { .box-input .ant-input-number-input-wrap {
line-height: 38px; line-height: 38px;
height: 38px; height: 38px;
@@ -597,7 +648,8 @@
height: 30px; height: 30px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.formAdd{
.formAdd {
margin-bottom: 40px; margin-bottom: 40px;
} }
</style> </style>
+44 -10
View File
@@ -2,12 +2,37 @@
<a-form layout="inline" @keyup.enter.native="searchQuery"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="6" :sm="8" v-for="(item,index) in searchList" :key="index" style="line-height: 48px"> <a-col :md="6" :sm="8" v-for="(item,index) in searchList" :key="index" style="line-height: 48px">
<div class="box-title-text"> <div class="box-title-text" v-if="item.field_show_type == 'text'">
<div class="title-text"> <div class="title-text">
<span>{{item.enName}}</span><br> <span>{{item.db_field_en_name}}</span><br>
<span>{{item.name}}</span> <span>{{item.db_field_txt}}</span>
</div> </div>
<a-input class="box-input" :placeholder="item.placeholder" v-model="queryParam[item.attrModel]"></a-input> <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">
<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]"
: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">
<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_txt}}</span>
</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>
</a-col> </a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
@@ -34,6 +59,10 @@
url: { url: {
type: Object, type: Object,
default: {} default: {}
},
flag: {
type: String,
default: ''
} }
}, },
data() { data() {
@@ -42,7 +71,7 @@
} }
}, },
mounted() { mounted() {
this.getHeader() this.getSeach()
}, },
methods: { methods: {
searchQuery() { searchQuery() {
@@ -52,11 +81,13 @@
this.queryParam = {} this.queryParam = {}
eventBUs.$emit('searchQuery', this.queryParam) eventBUs.$emit('searchQuery', this.queryParam)
}, },
getHeader() { getSeach() {
let params = {} let params = {
getAction(this.url.searchHeader, params).then((res) => { flag: this.flag
}
getAction(this.url.seachList, params).then((res) => {
if (res.success) { if (res.success) {
this.searchList = res.result
} }
}) })
} }
@@ -69,9 +100,12 @@
line-height: 1.4; line-height: 1.4;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px;
} }
.title-text { .title-text {
width: 20%;
min-width: 90px;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
@@ -80,7 +114,7 @@
.box-input { .box-input {
display: inline-block; display: inline-block;
width: 80%; width: 70%;
height: 38px; height: 38px;
margin-top: 2px; margin-top: 2px;
} }
+34 -58
View File
@@ -26,7 +26,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="page"> <div class="page" v-if="jsonBody.length > 0">
<a-pagination <a-pagination
:show-total="total => ` ${total} `" :show-total="total => ` ${total} `"
show-quick-jumper show-quick-jumper
@@ -41,6 +41,7 @@
<script> <script>
import eventBUs from '../../common/event' import eventBUs from '../../common/event'
import { getAction } from '@/api/manage'
export default { export default {
name: 'index', name: 'index',
@@ -56,62 +57,19 @@
default: [] default: []
}, },
//是否显示操作;默认显示 //是否显示操作;默认显示
isOperation:{ isOperation: {
type: Boolean, type: Boolean,
default:true, default: true
}, },
flag: {
type: String,
default: ''
}
}, },
data() { data() {
return { return {
pageSize: 20, pageSize: 20,
jsonHead: [ jsonBody: [],
{
'name': '序号',
'enName': 'Swrial number'
},
{
'name': '编号',
'enName': 'Swrial number'
},
{
'name': '标题',
'enName': 'Title'
},
{
'name': '发布日期',
'enName': 'Release data'
},
{
'name': '标准实施日期',
'enName': 'Standard data'
},
{
'name': '状态',
'enName': 'State'
}
],
jsonBody: [
{
// 'col1': '河流1',
id: 1,
'col2': '河流26dsfdsfdsfdsfsfdsfsfsfsfsdfsfsfdsfsfdsfdsfdsfdsfdsf1232132132132131321321321312312321321321312dsf',
'col3': '大羊沟6dsfdsfdsfdsfsfdsfsfsfsfsdfsfsfdsfsfdsfdsfdsfdsfdsf1232132132132131321321321312312321321321312dsf',
'col4': '待审批6dsfdsfdsfdsfsfdsfsfsfsfsdfsfsfdsfsfdsfdsfdsfdsfdsf1232132132132131321321321312312321321321312dsf',
'col5': '待审批6dsfdsfdsfdsfsfdsfsfsfsfsdfsfsfdsfsfdsfdsfdsfdsfdsf1232132132132131321321321312312321321321312dsf',
'col6': '待审批6dsfdsfdsfdsfsfdsfsfsfsfsdfsfsfdsfsfdsfdsfdsfdsfdsf1232132132132131321321321312312321321321312dsf',
'col7': 0.6
},
{
// 'col1': '河流1',
id: 2,
'col2': '河流2',
'col3': '大羊沟',
'col4': '待审批',
'col5': 0.6,
'col6': '0.6dsfdsfdsfdsfsfdsfsfsfsfsdfsfsfdsfsfdsfdsfdsfdsfdsf1232132132132131321321321312312321321321312dsf',
'col7': 0.6
}
],
checkboxList: [], checkboxList: [],
tableAll: false, tableAll: false,
indeterminate: false indeterminate: false
@@ -125,17 +83,25 @@
console.log(target) console.log(target)
}) })
this.getData() this.getData()
this.getTableList()
}, },
methods: { methods: {
getData() { getData() {
var jsonHead = this.jsonHead let params = {
for (var i = 0; i < jsonHead.length; i++) { flag: this.flag
$('#table_thead_tr').append('<th class="box-th">' + jsonHead[i].enName + '</br>' + jsonHead[i].name + '</th>')
}
if (this.isOperation){
let th = '<th class="box-th box-th-po">' + 'Operation ' + '</br>' + '操作' + '</th>'
$('#table_thead_tr').append(th)
} }
getAction(this.url.tableHeader, params).then((res) => {
if (res.success) {
var jsonHead = res.result
for (var i = 0; i < jsonHead.length; i++) {
$('#table_thead_tr').append('<th class="box-th">' + jsonHead[i].db_field_en_name + '</br>' + jsonHead[i].db_field_txt + '</th>')
}
if (this.isOperation) {
let th = '<th class="box-th box-th-po">' + 'Operation ' + '</br>' + '操作' + '</th>'
$('#table_thead_tr').append(th)
}
}
})
}, },
checkboxChange(checkedList) { checkboxChange(checkedList) {
this.indeterminate = !!checkedList.length && checkedList.length < this.jsonBody.length this.indeterminate = !!checkedList.length && checkedList.length < this.jsonBody.length
@@ -150,6 +116,16 @@
}) })
} }
}, },
getTableList() {
let params = {
}
getAction(this.url.tableList, params).then((res) => {
if (res.success) {
}
})
},
onChange() { onChange() {
}, },
+5 -3
View File
@@ -1,13 +1,14 @@
<template> <template>
<a-card :bordered="false"> <a-card :bordered="false">
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<search :url="url" :searchList="searchList"/> <search :flag="'1'" :url="url" :searchList="searchList"/>
</div> </div>
<div class="table-operator"> <div class="table-operator">
<a-button @click="handleCompare()" type="primary" icon="plus">{{$t('DataComparison')}}</a-button> <a-button @click="handleCompare()" type="primary" icon="plus">{{$t('DataComparison')}}</a-button>
</div> </div>
<div> <div>
<tableData <tableData
:flag="'1'"
:OperationList="OperationList" :OperationList="OperationList"
@editTable="editTable" @editTable="editTable"
@deleteTable="deleteTable" @deleteTable="deleteTable"
@@ -59,8 +60,9 @@
selectedRowKeys: [], selectedRowKeys: [],
loading: false, loading: false,
url:{ url:{
searchHeader:'document/bussDocumentLibraryEO/getHeader', tableHeader:'document/bussDocumentLibraryEO/getHeader',
queryCondition:'document/bussDocumentLibraryEO/queryCondition', seachList:'document/bussDocumentLibraryEO/queryCondition',
tableList:'/document/bussDocumentLibraryEO/queryPageInfo',
} }
} }
}, },