From dd6942743fa3936a1bbcbe6f4102c028d8021d5c Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期一, 05 六月 2023 16:56:35 +0800
Subject: [PATCH] 完善高级查询组件
---
Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue | 277 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 192 insertions(+), 85 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue b/Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue
index 517c823..d9e17d9 100644
--- a/Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue
+++ b/Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue
@@ -1,73 +1,88 @@
+<!-- 楂樼骇鏌ヨ瀵硅瘽妗嗙粍浠�
+ 1銆佹墦寮�涓庡叧闂笌el-dialog鐢ㄦ硶涓�鑷达紱
+ 2銆佺敤鎴风紪杈戝ソ鐨勬煡璇㈡潯浠堕�氳繃@echoContion浜嬩欢缁戝畾鐩稿簲鐨勫嚱鏁帮紝瀹炵幇瀛愮粍浠跺�间紶閫掑洖鐖剁粍浠讹紱
+ 3銆佺敤鎴疯緭鍏ョ殑鍊间細浠onditionMap[field]鐨勬牸寮忔嫾鎺ュソ杩涜鍥炰紶锛岀劧鍚庡氨闇�瑕佷娇鐢ㄧ殑鍦版柟鑷杩涜鏌ヨ鐨勮皟鐢紱
+ -->
<template>
<el-dialog
title="楂樼骇鏌ヨ"
append-to-body
width="55vw"
- style="height: 115vh; overflow: hidden"
+ style="height: 115vh; margin-top: -10vh; overflow: hidden"
:visible.sync="isShowDialog"
@close="recoverPage"
destroy-on-close>
<div class="search-total">
- <el-row>
- <div class="grid-content">
- <el-button
- type="primary"
- size="small"
- icon="el-icon-search"
- @click="searchSubmit">
- 鏌ヨ
- </el-button>
- <el-button
- type="warning"
- size="small"
- icon="el-icon-refresh"
- @click="resetInput">
- 閲嶇疆
- </el-button>
- </div>
- </el-row>
- <el-row
- v-for="(item,index) in initOptions.column"
- :key="item.value"
- class="search-content"
- :span="24">
- <el-col :span="4">
- <div class="grid-content">
- <el-select placeholder="璇烽�夋嫨">
- <el-option
- v-for="feildName in item.searchfeildName"
- :key="feildName.value"
- :label="feildName.label"
- :value="feildName.value">
+ <!-- 澶撮儴鎸夐挳鍖哄煙 -->
+ <div class="dialog-search-button">
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-search"
+ @click="searchSubmit">
+ 鏌ヨ
+ </el-button>
+ <el-button
+ type="warning"
+ size="small"
+ icon="el-icon-refresh"
+ @click="resetInput">
+ 閲嶇疆
+ </el-button>
+ </div>
+ <!-- 椤甸潰涓讳綋鍐呭鍖哄煙 -->
+ <div class="search-content">
+ <el-row
+ v-for="(item,index) in initOptions"
+ :key="item.queryField"
+ v-show="!item.hidden"
+ :span="24">
+ <el-col :span="5">
+ <div class="grid-content">
+ <el-select placeholder="璇烽�夋嫨" v-model="searchFormArrays[index].queryField">
+ <el-option
+ v-for="feildName in initOptions"
+ :key="feildName.queryField"
+ :label="feildName.title"
+ :value="feildName.queryField">
</el-option>
- </el-select>
- </div>
- </el-col>
- <el-col :span="4">
- <div class="grid-content">
- <el-select placeholder="璇烽�夋嫨">
- <el-option
- v-for="condition in item.searchCondition"
- :key="condition.value"
- :label="condition.label"
- :value="condition.value">
- </el-option>
- </el-select>
- </div>
- </el-col>
- <el-col :span="13">
- <div class="grid-content">
- <div class="el-input">
- <input type="text" placeholder="璇疯緭鍏�" autocomplete="off" class="el-input__inner" :value="value">
+ </el-select>
</div>
- </div>
- </el-col>
- <el-col :span="2">
- <div class="grid-content">
- <i class="el-icon-close" @click="removeInput(index)"></i>
- </div>
- </el-col>
- </el-row>
+ </el-col>
+ <el-col :span="4">
+ <div class="grid-content">
+ <el-select placeholder="璇烽�夋嫨" v-model="searchFormArrays[index].condition">
+ <el-option
+ v-for="condition in item.fieldType=='text' ? searchConditions:switchSearchConditions"
+ :key="condition.value"
+
+ :label="condition.label"
+ :value="condition.value">
+ </el-option>
+ </el-select>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="grid-content">
+ <el-input v-show="item.fieldType==='text' || item.fieldType===''" v-model="searchFormArrays[index].fieldValue" type="text" placeholder="璇疯緭鍏�"></el-input>
+ <el-select v-show="item.fieldType==='combox'" v-model="searchFormArrays[index].fieldValue" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="option in item.data"
+ :key="option.value"
+ :label="option.key"
+ :value="option.value">
+ </el-option>
+ </el-select>
+ <el-switch v-show="item.fieldType==='truefalse'" v-model="searchFormArrays[index].fieldValue"></el-switch>
+ </div>
+ </el-col>
+ <el-col :span="2">
+ <div class="grid-content">
+ <i class="el-icon-close" @click="removeInput(index)"></i>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
</div>
</el-dialog>
</template>
@@ -86,81 +101,166 @@
type: "Object",
default: {},
},
- // 椤甸潰鏁版嵁娓叉煋閰嶇疆
- searchForm: {
+ conditionMapParams: {
type: "Object",
default: {},
},
- value:{
- type: "String",
- }
},
data() {
return {
// 瀵硅瘽妗嗘樉绀烘帶鍒�
isShowDialog: this.visible,
- initOptions: {},
- searchForm: {},
+ initOptions: [],
+ // 瀛楁鏄緭鍏ユ绫诲瀷鐨勬潯浠舵暟缁�
+ searchConditions: [
+ {
+ value: "=",
+ label: "绛変簬",
+ },{
+ value: "like",
+ label: "鍖呭惈",
+ },{
+ value: "!=",
+ label: "涓嶇瓑浜�",
+ },{
+ value: ">",
+ label: "澶т簬",
+ },{
+ value: "<",
+ label: "灏忎簬",
+ },
+ ],
+ // 瀛楁鏄崟閫夋垨涓嬫媺妗嗙被鍨嬬殑鏉′欢鏁扮粍
+ switchSearchConditions: [
+ {
+ value: "=",
+ label: "绛変簬",
+ },{
+ value: "!=",
+ label: "涓嶇瓑浜�",
+ },
+ ],
+ searchFormArrays: [],
}
},
watch: {
// 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙ｆ樉绀洪殣钘忕殑鍊�
visible (){
this.isShowDialog = this.visible;
+ },
+ // 瀵硅瘽妗嗗唴瀹规覆鏌撻厤缃�
+ options(){
+ // 灏唎ptions閰嶇疆璧嬪�煎埌data涓殑option涓紝閬垮厤娣辨祬鎷疯礉鐨勯棶棰樻墍浠ラ渶瑕佽浆json涔嬪悗鍐嶈祴鍊�
+ const data = JSON.stringify(this.options);
+ this.initOptions = JSON.parse(data);
+ // console.log(this.initOptions);
+ this.initOptions.forEach((item,index) => {
+ let add = {
+ queryField: String(item.queryField),
+ condition: item.fieldType=='text' ? String("like"):String("="),
+ fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''),
+ }
+ this.searchFormArrays.push(add)
+ });
+ //console.log(this.searchFormArrays);
}
},
created () {
- // 灏唎ptions閰嶇疆璧嬪�煎埌data涓殑option涓紝閬垮厤娣辨祬鎷疯礉鐨勯棶棰樻墍浠ラ渶瑕佽浆json涔嬪悗鍐嶈祴鍊�
- const data = JSON.stringify(this.options);
- this.initOptions = JSON.parse(data);
- console.log(this.searchForm);
+
},
methods: {
// 绉婚櫎鎼滅储妗�
removeInput(index){
- //console.log(this.options.column);
- this.$delete(this.initOptions.column,index);
+ //console.log(this.initOptions);
+ this.$delete(this.initOptions,index);
+ this.$delete(this.searchFormArrays,index);
},
// 閲嶇疆褰撳墠鐣岄潰鐨勮緭鍏ユ
resetInput(){
const data = JSON.stringify(this.options);
this.initOptions = JSON.parse(data);
+ let array = [];
+ this.initOptions.forEach((item,index) => {
+ let add = {
+ queryField: String(item.queryField),
+ condition:item.fieldType=='text' ? String("like"):String("="),
+ fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''),
+ }
+ array.push(add)
+ });
+ this.searchFormArrays = array;
+ //console.log(this.initOptions);
+ //console.log(this.searchFormArrays);
},
// 鎭㈠椤甸潰
recoverPage(){
this.resetInput();
this.$emit('update:visible', false);
},
- // 鎻愪氦褰撳墠椤甸潰鐨勮緭鍏�
+ // 鎻愪氦褰撳墠椤甸潰鐨勮緭鍏ョ殑鏌ヨ鏉′欢骞跺仛瀵瑰簲鐨勮繃婊や笌妫�鏌�
searchSubmit(){
- console.log(11);
+ let condtionParam = {};
+ const searchConditions = this.searchFormArrays;
+ for(let index = 0; index < searchConditions.length; index++) {
+ //console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']+'' == 'undefined');
+ if(searchConditions[index].fieldValue != '' || searchConditions[index].fieldValue+''==='false') {
+ // 瀛樺湪鐩稿悓鐨勬煡璇㈡潯浠�
+ if(condtionParam['conditionMap['+searchConditions[index].queryField+']']+''.trim() != 'undefined' ) {
+ this.$message.warning("瀛樺湪閲嶅鏌ヨ鏉′欢锛岃浠旂粏鏍稿!");
+ return false;
+ }
+ condtionParam['conditionMap['+searchConditions[index].queryField+']'] = searchConditions[index].fieldValue;
+ }
+ }
+ //鏌ヨ鏉′欢娌℃湁鍑虹幇閲嶅灞炴�э紝骞朵笖杩囨护鎺変簡绌哄�硷紝浼犻�掔粰鐖剁粍浠�
+ //console.log(condtionParam);
+ // if(){
+
+ // }
+ this.$emit('echoContion',condtionParam)
},
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.search-total {
border-radius: 4px;
- min-height: 36px;
+ min-height: 70vh;
// margin-left: 35px;
- margin-top: -20px;
+ margin-top: -8px;
+ overflow-y: auto;
+ height: 70vh;
}
- .search-total > .el-row{
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
+ .dialog-search-button {
+ border-top: 1px solid #E9E7E7;
+ border-bottom: 1px solid #E9E7E7;
+ padding: 10px 10px 10px;
+ position: fixed;
+ display: block;
+ background-color: #fff;
+ top: 90px;
+ width: 50%;
+ z-index: 1000;
}
- .search-total > .el-col {
+ // .search-total > .search-content > .el-row{
+ // margin-bottom: 5px;
+ // &:last-child {
+ // margin-bottom: 0;
+ // }
+ // }
+ .search-total > .search-content {
+ margin-top: 40px;
+ }
+ .search-total > .search-content > .el-row > .el-col {
border-radius: 4px;
}
- .search-total > .el-col > .grid-content {
+ .search-total > .search-content > .el-row > .el-col > .grid-content {
border-radius: 4px;
min-height: 36px;
}
- .search-content > .el-col {
+ .search-total > .search-content > .el-row > .el-col {
margin-right: 6px;
&:last-child {
margin-right: 0;
@@ -175,6 +275,13 @@
font-size: 38px;
color: rgb(219, 52, 6);
}
+ .grid-content > .el-select {
+ width: 100%;
+ }
+ .grid-content > .el-switch {
+ line-height: 40px;
+ height: 40px;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3