From d02571d59633367ac76b7f58ab38584698b1aa1b Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期四, 17 十月 2024 09:55:37 +0800
Subject: [PATCH] 高级查询中增加范围查询功能
---
Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue | 561 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 397 insertions(+), 164 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..a7309cb 100644
--- a/Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue
+++ b/Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue
@@ -1,180 +1,413 @@
+<!-- 楂樼骇鏌ヨ瀵硅瘽妗嗙粍浠�
+ 1銆佹墦寮�涓庡叧闂笌el-dialog鐢ㄦ硶涓�鑷达紱
+ 2銆佺敤鎴风紪杈戝ソ鐨勬煡璇㈡潯浠堕�氳繃@echoContion浜嬩欢缁戝畾鐩稿簲鐨勫嚱鏁帮紝瀹炵幇瀛愮粍浠跺�间紶閫掑洖鐖剁粍浠讹紱
+ 3銆佺敤鎴疯緭鍏ョ殑鍊间細浠onditionMap[field]鐨勬牸寮忔嫾鎺ュソ杩涜鍥炰紶锛岀劧鍚庡氨闇�瑕佷娇鐢ㄧ殑鍦版柟鑷杩涜鏌ヨ鐨勮皟鐢紱
+ -->
<template>
- <el-dialog
- title="楂樼骇鏌ヨ"
- append-to-body
- width="55vw"
- style="height: 115vh; 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">
- </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">
- </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>
- </div>
- </el-dialog>
+ <el-dialog
+ v-dialogDrag
+ :visible.sync="isShowDialog"
+ append-to-body
+ class="avue-dialog avue-dialog--top"
+ destroy-on-close
+ lock-scroll
+ style="height: 100vh;overflow: hidden"
+ title="楂樼骇鏌ヨ"
+ top="-3%"
+ width="46vw"
+ @close="recoverPage">
+ <div class="search-total">
+ <!-- 澶撮儴鎸夐挳鍖哄煙 -->
+ <div slot="title" class="dialog-search-button">
+ <el-button
+ icon="el-icon-search"
+ size="small"
+ type="primary"
+ @click="searchSubmit">
+ 鏌ヨ
+ </el-button>
+ <el-button
+ icon="el-icon-refresh"
+ size="small"
+ type="warning"
+ @click="resetInput">
+ 閲嶇疆
+ </el-button>
+ </div>
+ <!-- 椤甸潰涓讳綋鍐呭鍖哄煙 -->
+ <div class="search-content">
+ <el-row
+ v-for="(item,index) in initOptions"
+ :key="item.queryField"
+ :span="24">
+ <el-col :span="6">
+ <div class="grid-content">
+ <el-select v-model="searchFormArrays[index].queryField" disabled placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="feildName in options"
+ :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 v-model="searchFormArrays[index].condition" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="condition in item.conditions"
+ :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-if="item.fieldType==='text' || item.fieldType===''"
+ v-model="searchFormArrays[index].fieldValue" placeholder="璇疯緭鍏�" type="text"></el-input>
+ <el-select v-else-if="item.fieldType==='combox'" v-model="searchFormArrays[index].fieldValue"
+ placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="option in item.data"
+ :key="option.itemValue || option.value"
+ :label="option.itemName || option.label"
+ :value="option.itemValue || option.value">
+ </el-option>
+ </el-select>
+ <el-switch v-else-if="item.fieldType==='truefalse'"
+ v-model="searchFormArrays[index].fieldValue"></el-switch>
+ <el-date-picker v-else-if="item.fieldType==='datetime'"
+ v-model="searchFormArrays[index].fieldValue"
+ placeholder="閫夋嫨鏃ユ湡"
+ type="date">
+ </el-date-picker>
+ <vci-web-refer
+ v-else-if="item.fieldType==='refer'"
+ :display="!item.hidden"
+ :referConfig="item.referConfigData || {}"
+ :text="item.showField"
+ :value="searchFormArrays[index].fieldValue"
+ @setReferValue="val=>setReferValue(val,index)">
+ </vci-web-refer>
+ </div>
+ </el-col>
+ <el-col :span="1">
+ <div class="grid-content">
+ <i class="el-icon-close" @click="removeInput(index)"></i>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-dialog>
</template>
<script>
+import {getDictionary} from "@/api/omd/enum";
+import moment from 'moment';
+import vciWebRefer from '../refer/vciWebRefer.vue';
+
export default {
- name: "advancedQuery",
- props: {
- // 瀵硅瘽妗嗘樉绀洪殣钘忔帶鍒�
- visible: {
- type: "Boolean",
- default: false,
- },
- // 椤甸潰鏄剧ず閰嶇疆
- options: {
- type: "Object",
- default: {},
- },
- // 椤甸潰鏁版嵁娓叉煋閰嶇疆
- searchForm: {
- type: "Object",
- default: {},
- },
- value:{
- type: "String",
+ components: {vciWebRefer},
+ name: "advancedQuery",
+ props: {
+ // 瀵硅瘽妗嗘樉绀洪殣钘忔帶鍒�
+ visible: {
+ type: "Boolean",
+ default: false,
+ },
+ // 椤甸潰鏄剧ず閰嶇疆
+ options: {
+ type: "Object",
+ default: {},
+ },
+ },
+ data() {
+ return {
+ // 瀵硅瘽妗嗘樉绀烘帶鍒�
+ isShowDialog: this.visible,
+ initOptions: [],
+ // 瀛楁绫诲瀷鏄緭鍏ユ绫诲瀷鐨勬潯浠舵暟缁�
+ searchConditions: [
+ {
+ value: "_equal",
+ label: "绛変簬",
+ }, {
+ value: "_notequal",
+ label: "涓嶇瓑浜�",
+ }, {
+ value: "_like",
+ label: "鍖呭惈",
+ }, {
+ value: "_notlike",
+ label: "涓嶅寘鍚�",
+ },{
+ value: "_in",
+ label: "鑼冨洿(,闂撮殧)",
}
- },
- data() {
- return {
- // 瀵硅瘽妗嗘樉绀烘帶鍒�
- isShowDialog: this.visible,
- initOptions: {},
- searchForm: {},
+ ],
+ // 瀛楁绫诲瀷鏄崟閫夋垨涓嬫媺妗嗙被鍨嬬殑鏉′欢鏁扮粍
+ switchSearchConditions: [
+ {
+ value: "_equal",
+ label: "绛変簬",
+ }, {
+ value: "_notequal",
+ label: "涓嶇瓑浜�",
}
- },
- watch: {
- // 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙ｆ樉绀洪殣钘忕殑鍊�
- visible (){
- this.isShowDialog = this.visible;
+ ],
+ // 鍙傜収绫诲瀷鐨勬潯浠舵暟缁�
+ referSearchConditions: [
+ {
+ value: "_equal",
+ label: "绛変簬",
+ }, {
+ value: "_notequal",
+ label: "涓嶇瓑浜�",
+ }, {
+ value: "_like",
+ label: "鍖呭惈",
+ }, {
+ value: "_notlike",
+ label: "涓嶅寘鍚�",
}
- },
- 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);
+ ],
+ // 瀛楁绫诲瀷鏄棩鏈�
+ dateConditions: [
+ {
+ value: "_equal",
+ label: "绛変簬",
+ }, {
+ value: "_notequal",
+ label: "涓嶇瓑浜�",
+ }, {
+ value: "_ge", //澶т簬锛岄粯璁や负澶т簬绛変簬
+ label: "澶т簬",
+ }, {
+ value: "_le", //灏忎簬锛岄粯璁や负灏忎簬绛変簬
+ label: "灏忎簬",
},
- // 閲嶇疆褰撳墠鐣岄潰鐨勮緭鍏ユ
- resetInput(){
- const data = JSON.stringify(this.options);
- this.initOptions = JSON.parse(data);
- },
- // 鎭㈠椤甸潰
- recoverPage(){
- this.resetInput();
- this.$emit('update:visible', false);
- },
- // 鎻愪氦褰撳墠椤甸潰鐨勮緭鍏�
- searchSubmit(){
- console.log(11);
- },
+ ],
+ searchFormArrays: [],
+ fieldValue: '',
}
+ },
+ watch: {
+ // 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙ｆ樉绀洪殣钘忕殑鍊�
+ visible() {
+ this.isShowDialog = this.visible;
+ },
+ // 瀵硅瘽妗嗗唴瀹规覆鏌撻厤缃�
+ options() {
+ this.initData();
+ }
+ },
+ created() {
+ this.resetInput()
+ },
+ methods: {
+
+ initData() {
+ // 灏唎ptions閰嶇疆璧嬪�煎埌data涓殑option涓紝閬垮厤娣辨祬鎷疯礉鐨勯棶棰樻墍浠ラ渶瑕佽浆json涔嬪悗鍐嶈祴鍊�
+ const data = JSON.stringify(this.options);
+ this.initOptions = JSON.parse(data);
+ //console.log(this.initOptions);
+ if (this.initOptions.length > 0) {
+ let array = [];
+ this.initOptions.forEach((item, index) => {
+ if (item.fieldType === 'combox') {
+ let enumCach = item.data || JSON.parse(localStorage.getItem(item.comboxKey));
+ if (enumCach != null && enumCach.length > 0) {
+ item.data = enumCach;
+ } else {
+ getDictionary({code: item.comboxKey}).then(res => {
+ item.data = res.data.data;
+ localStorage.setItem(item.comboxKey, JSON.stringify(res.data.data));
+ })
+ }
+ } else if (item.fieldType === 'refer') {
+ this.$set(item, "referConfigData", {
+ title: item.title,
+ showField: item.showField || item.field,
+ field: item.field,
+ placeholder: item.inputTip || '',
+ options: Object.assign(item.referConfig, {width: "80%"}),
+ })
+ //console.log(item.referConfigData.options);
+ //console.log(item);
+ }
+ let conditions = [];
+ if (item.fieldType === 'text') {
+ conditions = this.searchConditions;
+ } else if (item.fieldType === 'combox' || item.fieldType === 'truefalse') {
+ conditions = this.switchSearchConditions;
+ } else if (item.fieldType === 'datetime' || item.fieldType === 'date') {
+ conditions = this.dateConditions;
+ } else {
+ conditions = this.referSearchConditions;
+ }
+ // console.log(conditions);
+ this.$set(item, "conditions", conditions)
+
+ let add = {
+ queryField: String(item.queryField),
+ condition: item.fieldType === 'text' ? String("_like") : String("_equal"),
+ fieldValue: item.fieldType === 'truefalse' ? Boolean(false) : String(''),
+ }
+ array.push(add)
+ });
+ this.searchFormArrays = array;
+ }
+ //console.log(this.initOptions);
+ //console.log(this.searchFormArrays);
+ },
+ /** 涓哄弬鐓х被鍨嬫椂鍊奸�夋嫨涔嬪悗鐨勫鐞� */
+ setReferValue(data, index) {
+ if (data.field) {
+ this.searchFormArrays[index][data.fieldValue] = data.value || '';
+ this.initOptions[index][data.showField] = data.text || '';
+ }
+ },
+
+ // 灞炴�у垏鎹㈡椂鏌ヨ鏉′欢鍜屾煡璇㈠�间篃闇�瑕佸杈撳叆妗嗚繘琛屽垏鎹�
+ // changeField(index) {
+ // //console.log(option,this.searchFormArrays[index],index);
+ // // 鎵惧埌鏁扮粍涓搴旂殑瑕佸垏鎹负鐨勯偅涓璞�
+ // let changeItem = this.options.filter((item)=>{
+ // return item.queryField == this.searchFormArrays[index].queryField;
+ // })[0]
+ // // 濡傛灉鏄痗ombox绫诲瀷鐨勮繕闇�瑕佸鏋氫妇绫诲瀷杩涜璇锋眰
+ // if(changeItem.fieldType==='combox' && changeItem.comboxKey != '') {
+ // changeItem.data = JSON.parse(localStorage.getItem(changeItem.comboxKey));
+ // }
+ // //console.log(changeItem.fieldType);
+ // // 灏嗗綋鍓嶅垏鎹㈢殑閰嶇疆椤硅祴鍊煎埌option鐨勫搴旂殑閭ｄ釜瀵硅薄杩涜瑕嗙洊
+ // this.initOptions[index] = changeItem;
+ // // 瑕嗙洊v-model鐨勫璞�
+ // this.searchFormArrays[index] = {
+ // queryField: String(changeItem.queryField),
+ // condition: changeItem.fieldType==='text' ? String("_like"):String("_equal"),
+ // fieldValue: changeItem.fieldType==='truefalse' ? Boolean(false):String(""),
+ // };
+ // //console.log(this.initOptions);
+ // //console.log(this.searchFormArrays);
+ // },
+
+ // 绉婚櫎鎼滅储妗�
+
+ removeInput(index) {
+ //console.log(this.initOptions);
+ this.$delete(this.initOptions, index);
+ this.$delete(this.searchFormArrays, index);
+ },
+ // 閲嶇疆褰撳墠鐣岄潰鐨勮緭鍏ユ
+ resetInput() {
+ this.initData();
+ },
+ // 鎭㈠椤甸潰
+ recoverPage() {
+ this.resetInput();
+ this.$emit('update:visible', false);
+ },
+ // 鎻愪氦褰撳墠椤甸潰鐨勮緭鍏ョ殑鏌ヨ鏉′欢骞跺仛瀵瑰簲鐨勮繃婊や笌妫�鏌�
+ searchSubmit() {
+ 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 + ']'] + '' != 'undefined') {
+ this.$message.warning("瀛樺湪閲嶅鏌ヨ鏉′欢锛岃浠旂粏鏍稿!");
+ //console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']);
+ return false;
+ }
+ let fieldType = this.initOptions[index].fieldType;
+ // 褰撳嚭鐜版煡璇㈡棩鏈熺殑鏍煎紡鏃�,闇�瑕佸鏃ユ湡鏍煎紡杩涜澶勭悊
+ if (fieldType === 'datetime' || fieldType === 'date') {
+ // 灏嗘椂闂磋浆鎹负鏈湴鏃堕棿
+ let localTime = moment.utc(searchConditions[index].fieldValue).local();
+ // 鏍煎紡鍖栨椂闂翠负鎮ㄦ兂瑕佺殑鏍煎紡
+ let formattedTime = localTime.format('YYYY-MM-DD HH:mm:ss');
+ condtionParam['conditionMap[' + searchConditions[index].queryField + searchConditions[index].condition + ']'] = formattedTime;
+ //console.log(formattedTime);
+ } else {
+ //鎷兼帴鎴恗ap瀵硅薄锛屽皢鏌ヨ瀵硅薄鍜宑ondition鎷兼帴鍦ㄤ竴璧凤紝缁勬垚楂樼骇鏌ヨmap鐨刱ey
+ condtionParam['conditionMap[' + searchConditions[index].queryField + searchConditions[index].condition + ']'] = searchConditions[index].fieldValue;
+ }
+ }
+ }
+ // 鏌ヨ鏉′欢娌℃湁鍑虹幇閲嶅灞炴�э紝骞朵笖杩囨护鎺変簡绌哄�硷紝灏变紶閫掔粰鐖剁粍浠�
+ //console.log(condtionParam);
+ this.$emit('echoContion', condtionParam)
+ this.isShowDialog = false;
+ },
+ }
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
+.search-total {
+ border-radius: 4px;
+ margin-top: -10px;
+}
- .search-total {
- border-radius: 4px;
- min-height: 36px;
- // margin-left: 35px;
- margin-top: -20px;
- }
- .search-total > .el-row{
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- .search-total > .el-col {
- border-radius: 4px;
- }
- .search-total > .el-col > .grid-content {
- border-radius: 4px;
- min-height: 36px;
- }
- .search-content > .el-col {
- margin-right: 6px;
- &:last-child {
- margin-right: 0;
- }
- }
- .grid-content > .el-icon-close {
- font-size: 35px;
- cursor: pointer;
- color: rgb(222, 130, 105);
- }
- .grid-content > .el-icon-close:hover{
- font-size: 38px;
- color: rgb(219, 52, 6);
- }
+.dialog-search-button {
+ margin-bottom: 15px;
+}
+// .search-total > .search-content > .el-row{
+// margin-bottom: 5px;
+// &:last-child {
+// margin-bottom: 0;
+// }
+// }
+.search-total > .search-content {
+}
-</style>
\ No newline at end of file
+.search-total > .search-content > .el-row > .el-col {
+ border-radius: 4px;
+}
+
+.search-total > .search-content > .el-row > .el-col > .grid-content {
+ border-radius: 4px;
+ min-height: 36px;
+}
+
+.search-total > .search-content > .el-row > .el-col {
+ margin-right: 6px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
+
+.grid-content > .el-icon-close {
+ font-size: 30px;
+ line-height: 40px;
+ cursor: pointer;
+ color: rgb(222, 130, 105);
+}
+
+.grid-content > .el-icon-close:hover {
+ font-size: 30px;
+ color: rgb(219, 52, 6);
+}
+
+.grid-content > .el-select {
+ width: 100%;
+}
+
+.grid-content > .el-switch {
+ line-height: 40px;
+ height: 40px;
+}
+
+.grid-content > .el-date-editor.el-input, .el-date-editor.el-input__inner {
+ width: 100%;
+}
+
+</style>
--
Gitblit v1.9.3