优化查询组件。

examples/info/SearchWidgetExample.vue

@@ -37,17 +37,53 @@
   >
     {{ item }}
   </span>
+
+  
+  <h2>3. 用户多选</h2>
+
+  <MultiSearchWidget
+    info-window-no="050408"
+    :field-value="fieldValue3"
+    :where-clause-source="whereClauseSource3"
+    title-name="用户"
+    display-name="name"
+    @value-changed="fieldValue3Changed"
+  />
+
+  <div>
+    您选择的用户姓名是:
+    <span
+      v-for="item, index in fieldValue3.displayValue"
+      :key="'displayValue' + index"
+    >
+      {{ item }} <span v-if="index > 0">,</span>
+    </span>
+  </div>
+  
+  <div>
+    您选择的用户id是:
+    <span
+      v-for="item, index in fieldValue3.ids"
+      :key="'id' + index"
+    >
+      {{ item }} <span v-if="index > 0">,</span>
+    </span>
+  </div>
 </template>
 
 <script>
 
 import SearchWidget from '@/info/search-widget.js';
+import MultiSearchWidget from '@/info/multi-search-widget.js';
+
+
 
 
 export default {
 
   components: {
     SearchWidget,
+    MultiSearchWidget,
   },
   data: function () {
     return {
@@ -71,6 +107,22 @@ export default {
         }],
       },
 
+
+      fieldValue3: {
+        id: null,
+        ids: [],
+        displayValue: [],
+        fieldType: 'Key',
+      },
+
+      whereClauseSource3: {
+        customerDataDimensions:[{
+          fieldName: 'client.id',
+          dataDimensionTypeNo: '202201191757',
+          defaultDataDimensionTypeValueNo: '1',
+        }],
+      },
+
     };
   },
 
@@ -83,6 +135,13 @@ export default {
     fieldValue2Changed: function(newFieldValue){
       this.fieldValue2 = newFieldValue;
     },
+
+    fieldValue3Changed: function(newFieldValue){
+      console.log(newFieldValue);
+      this.fieldValue3 = newFieldValue;
+    },
+
+
   },
 };
 </script>

packages/info/multi-search-widget.js

@@ -0,0 +1,8 @@
+
+import MultiSearchWidget from './src/MultiSearchWidget.vue';
+
+MultiSearchWidget.install = function(Vue) {
+  Vue.component(MultiSearchWidget.name, MultiSearchWidget);
+};
+
+export default MultiSearchWidget;

packages/info/src/InfoMultiSearchWidget.vue → packages/info/src/MultiSearchWidget.vue

@@ -36,6 +36,7 @@
           :field-value="fieldValue"
           :where-clause-source="whereClauseSource"
           :is-search-widget="true"
+          :model-data="modelData"
           :info-window-no="infoWindowNo"
           @data-selected="dataSelected"
           @delete-selected="deleteSelected"
@@ -49,36 +50,63 @@
 import { defineAsyncComponent } from 'vue';
 
 var Modal = require('../../modal/src/Modal.vue').default;
-// var InfoWindow = require('./InfoWindow.vue').default;
 var Loading = require('../../loading/src/Loading.vue').default;
 
 export default {
 
   components: {
     Modal, 
-    // InfoWindow, 
     InfoWindow: defineAsyncComponent(() =>
       import('./InfoWindow.vue'),
     ),
     Loading,
   },
   props: {
+    /**
+     * 查询窗口编号
+     */
     'infoWindowNo':{
       type: String,
       default: null,
     }, 
+    /**
+     * 显示的值
+     * fieldValue:{
+     *    ids: [],
+     *    displayValue: ['Jack'],
+     *    fieldType: 'Key',
+     *    id: 1
+     * }
+     */
     'fieldValue': {
       type: Object,
       default: null,
     },
+    /**
+     * 约束条件来源
+     */
     'whereClauseSource': {
       type: Object,
       default: null,
     }, 
+    /**
+     * 文本框中显示的字段
+     */
     'displayName': {
       type: String,
       default: null,
     }, 
+    /**
+     * 弹出窗口的标题
+     */
+    'titleName':{
+      type: String,
+      default: null,
+    },
+    'modelData': {
+      type: Object,
+      default: null,
+    },
   },
 
   emits: ['valueChanged'],
@@ -137,25 +165,30 @@ export default {
 
       console.log('已经选择了数据:' + data.id);
 
-      var newIds = [];
-      if (_self.fieldValue.ids != undefined) {
-        for (var i = 0; i < _self.fieldValue.ids.length; i++) {
-          newIds.push(_self.fieldValue.ids[i]);
+      let newIds = [];
+      let existIds = _self.fieldValue.ids;
+      if (existIds != undefined) {
+        for (let i = 0; i < existIds.length; i++) {
+          newIds.push(existIds[i]);
         }
       }
 
-      if (newIds.indexOf(data.id) < 0) {
-        newIds.push(data.id);
+      let displayValue = [];
+      let existDisplayValue = _self.fieldValue.displayValue;
+      if (existDisplayValue != undefined) {
+        for (let i = 0; i < existDisplayValue.length; i++) {
+          displayValue.push(existDisplayValue[i]);
+        }
+      }
+      
+      let fieldName = _self.displayName;
+      let text = '';
+      if (fieldName != undefined && data.data[fieldName] != null && data.data[fieldName].displayValue != null) {
+        text = data.data[fieldName].displayValue[0];
       }
 
-      var displayValue = _self.fieldValue.displayValue;
-      if (_self.displayName != undefined && _self.displayName != '') {
-        var arr = _self.displayName.split(',');
-        var text = '';
-        arr.forEach(function (item) {
-          console.log('选择的text:' + data.data[item].displayValue[0]);
-          text += data.data[item].displayValue[0];
-        });
+      if (newIds.indexOf(data.id) < 0) {
+        newIds.push(data.id);
         displayValue.push(text);
       }
 
@@ -164,7 +197,9 @@ export default {
         fieldType: 'MultiSearchBoxEditor',
         ids: newIds,
       };
+
       _self.$emit('valueChanged', newFieldValue);
+
     },
 
     // 值改变
@@ -174,10 +209,10 @@ export default {
     },
 
     /**
-         * 重新计算显示值
-         * @package [fieldValue]
-         * @return {[type]}
-         */
+     * 重新计算显示值
+     * @package [fieldValue]
+     * @return {[type]}
+     */
     reComputeSearchText: function (fieldValue) {
       var arr = [];
       var ids = fieldValue.ids;

packages/info/src/QueryConditionComplex.vue

@@ -103,10 +103,11 @@
             />
 
             <!-- 多选搜索框 number类型-->
-            <InfoMultiSearchWidget
+            <MultiSearchWidget
               v-if="item.displayType =='MultiSearchBoxEditor'"
               :where-clause-source="{'infoFilterField': {'infoWindowNo': infoWindowNo, 'fieldName' : item.fieldValue}}"
               :info-window-no="item.infoWindowNo"
+              :title-name="item.name"
               :field-value="item.fieldValue"
               :display-name="item.listFieldNames"
               class="m-form-input"
@@ -253,11 +254,10 @@
 
 
 <script>
+import { defineAsyncComponent } from 'vue';
 
 var EnumSelectWidgetInfo = require('./EnumSelectWidgetInfo.vue').default;
 var DateTimeV2 = require('../../datetime-v2/src/DateTimeV2.vue').default;
-var SearchWidget = require('./SearchWidget.vue').default;
-var InfoMultiSearchWidget = require('./InfoMultiSearchWidget.vue').default;
 var YearPicker = require('../../year-picker/src/YearPicker.vue').default;
 var DateWidget = require('../../date/src/Date.vue').default;
 var VueMonthlyPicker = require('../../vue-monthly-picker/src/VueMonthlyPicker.vue').default;
@@ -268,8 +268,12 @@ export default {
   components: {
     EnumSelectWidgetInfo,
     DateTimeV2,
-    SearchWidget,
-    InfoMultiSearchWidget,
+    SearchWidget : defineAsyncComponent(() =>
+      import('./SearchWidget.vue'),
+    ),
+    MultiSearchWidget : defineAsyncComponent(() =>
+      import('./MultiSearchWidget.vue'),
+    ),
     DateWidget,
     VueMonthlyPicker,
     YearPicker,

packages/info/src/SearchAutoCompleteWidget.vue

@@ -105,11 +105,11 @@ export default {
     },
 
     /**
-             * 距离左侧的距离
-             * @param  {[type]} currentValue [description]
-             * @param  {[type]} oldValue     [description]
-             * @return {[type]}              [description]
-             */
+     * 距离左侧的距离
+     * @param  {[type]} currentValue [description]
+     * @param  {[type]} oldValue     [description]
+     * @return {[type]}              [description]
+     */
     leftPosition: function (currentValue, oldValue) {
       var _self = this;
       console.log('initialLeft changed: ' + currentValue);

packages/process/src/MultiSearchWidget.vue

@@ -1,492 +0,0 @@
-<template>
-  <div class="content">
-    <div class="form-group">
-      <!-- <label v-show="isVisible[0]" class="col-xs-5 col-sm-4 col-md-3 col-lg-2 control-label">
-				<span class="required-mark" v-if="field.mandatory">*</span>{{labelNames[0]}}
-			</label> -->
-      <div
-        v-show="isVisible[0]"
-        style="position:relative; padding-left: 0px;"
-        class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
-      >
-        <div class="input-group">
-          <!-- <input :aria-describedby="'addon' + field.id" type="text" class="form-control" v-model="searchText" @input="textChange($event)" :readonly="readonly"/> -->
-          <!-- <span @click="showSearchDialog" class="input-group-addon" :id="'addon' + field.id" :disabled="readonly">
-							<span class="glyphicon glyphicon-search"></span>
-						</span> -->
-
-          <div
-            class="box"
-            :class="{'div-readonly':readonly}"
-          >
-            <span
-              v-for="(item) in selectDatas"
-              :key="item.id"
-              class="selected-tag"
-            >
-              {{ item.text }}
-              <button
-                v-if="!readonly"
-                type="button"
-                class="close"
-                aria-label="Remove option"
-                @click="deleteRecord(item)"
-              >
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </span>
-            <span
-              class="glyphicon glyphicon-search search-icon"
-              @click="showSearchDialog"
-            />
-          </div>
-
-          <Modal
-            v-model:show="modal"
-            :full="true"
-            @ok="searchDialogOk"
-            @cancel="searchDialogCancel"
-          >
-            <template #default>
-              <InfoWindow
-                ref="infoWindow"
-                :info-window-no="infoWindowNo"
-                @data-selected="dataSelected"
-              />
-            </template>
-
-            <template #header>
-              <div>
-                {{ field.name }}
-              </div>
-            </template>
-          </Modal>
-        </div>
-        <div
-          v-show="isShowAuto"
-          class="div-autoComplete"
-        >
-          <table class="table-bordered table-hover">
-            <thead>
-              <tr>
-                <td
-                  v-for="item in infoWindowDto.infoGridFields"
-                  :key="'td-' + item.fieldName"
-                  align="center"
-                  width="100px"
-                >
-                  {{ item.name }}
-                </td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="item1 in infoWindowData.dataList"
-                :key="'row-data-' + item1.id"
-                height="40px"
-                @click="selectNode(item1)"
-              >
-                <td
-                  v-for="item2 in infoWindowDto.infoGridFields"
-                  :key="'row-column-data-' + item1.id + '-' + item2.fieldName"
-                  align="center"
-                >
-                  {{ item1.data[item2.fieldName].displayValue[0] }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <div
-      v-for="(titleName, index) in titleNames"
-      v-show="isVisible[index]"
-      :key="titleName + '-' + index"
-      :class="{'form-group' : index > 0}"
-    >
-      <label
-        v-if="index > 0"
-        class="col-xs-5 col-sm-4 col-md-3 col-lg-2 control-label"
-      >
-        <span
-          v-if="field.mandatory"
-          class="required-mark"
-        >*</span>{{ titleName }}
-      </label>
-      <div
-        v-if="index > 0"
-        class="col-xs-7 col-sm-8 col-md-9 col-lg-10"
-      >
-        <input
-          type="text"
-          class="form-control"
-          :value="getFieldStringValue(index)"
-          disabled
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { defineAsyncComponent } from 'vue';
-var Modal = require('../../modal/src/Modal.vue').default;
-// var InfoWindow = require('../../info/src/InfoWindow.vue').default;
-var Common = require('../../common/Common.js').default;
-
-export default {
-
-  components: {
-    Modal, 
-    // InfoWindow,
-    InfoWindow: defineAsyncComponent(() =>
-      import('../../info/src/InfoWindow.vue'),
-    ),
-  },
-  props: {
-    'infoWindowNo':{
-      type: String,
-      default: null,
-    }, 
-    'field':{
-      type: Object,
-      default: null,
-    }, 
-    'fieldValue':{
-      type: Object,
-      default: null,
-    }, 
-    'readonly':{
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: [ 'getData', 'valueChanged'],
-
-  data: function () {
-    return {
-      isVisible: [],
-      infoWindowDto: {},
-      infoWindowData: {},
-      isShowAuto: false,
-      searchText: '',
-      selectDatas: [],
-      modal: false,
-    };
-  },
-
-  computed: {
-    titleNames: function () {
-      if (this.field == null && this.field.displayName == null) {
-        return '';
-      } else {
-        let labelNames = this.field.displayName.split(',');
-        return labelNames;
-      }
-    },
-  },
-
-  watch: {
-    infoWindowData: function (val) {
-      var _self = this;
-      if (val.dataList != undefined && val.dataList.length > 0) {
-        _self.isShowAuto = true;
-      } else {
-        _self.isShowAuto = false;
-      }
-    },
-  },
-
-  mounted: function () {
-    this.getInfoWindowDto();
-  },
-
-  methods: {
-    // 显示搜索对话框
-    showSearchDialog: function () {
-      var _self = this;
-      if (this.readonly) {
-        return;
-      }
-      _self.modal=true;
-    },
-
-    searchDialogOk: function () {
-
-    },
-
-    searchDialogCancel: function () {
-
-    },
-
-    // 输入的文本发生改变
-    textChange: function (e) {
-      var _self = this;
-      var text = _self.searchText;
-
-      // if(text == undefined || text.length == 0){
-      // 	var newFieldValue = {
-      // 		id : {},
-      // 		displayValue: [],
-      // 		fieldType: 'Key'
-      // 	}
-      // 	this.$emit("valueChanged", newFieldValue);
-      // }
-
-      if (text.trim() != '') {
-        _self.getInfoWindowData(text);
-      } else {
-        _self.isShowAuto = false;
-      }
-    },
-
-    /**
-     * 查询InfoWindowDto
-     * @return {void} 
-     */
-    getInfoWindowDto: function () {
-      var _self = this;
-      $.ajax({
-        url: Common.getApiURL('InfoWindowResource/uniqueByNo'),
-        type: 'GET',
-        dataType: 'json',
-        data: { 'infoWindowNo': _self.infoWindowNo },
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        success: function (data) {
-          _self.infoWindowDto = data;
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
-    },
-
-
-    /**
-     * 查询infoWindowData
-     * @return {void} 
-     */
-    getInfoWindowData: function (text) {
-      var _self = this;
-
-      var infoQueryParam = {
-        infoWindowNo: _self.infoWindowNo,
-        start: 0,
-        length: 5,
-        sortClause: '',
-        condition: text,
-      };
-
-      $.ajax({
-        url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataSimple'),
-        type: 'post',
-        dataType: 'json',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        contentType: 'application/json',
-        data: JSON.stringify(infoQueryParam),
-        success: function (data) {
-          _self.infoWindowData = data;
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
-    },
-
-    /**
-     * 选择数据(自动提示框)
-     * @return {void} 
-     */
-    selectNode: function (data) {
-      var _self = this;
-      _self.isShowAuto = false;
-      _self.dataSelected(data);
-
-    },
-
-    deleteRecord: function (selectData) {
-      var _self = this;
-      var index = _self.selectDatas.indexOf(selectData);
-      if (index > -1) {
-        _self.selectDatas.splice(index, 1);
-        _self.getSelectDataIds();
-      }
-
-    },
-
-    // 数据已经选择
-    dataSelected: function (data) {
-      var _self = this;
-
-      var index = _self.selectDatas.indexOf(data);
-
-      if (index > -1) {
-        return;
-      }
-
-      this.modal=false;
-
-      var text = [];
-
-      var listDisplayFieldNames = this.field.listDisplayFieldNames;
-      var displayValues = listDisplayFieldNames.split(',');
-      for (var i = 0; i < displayValues.length; i++) {
-        var fieldValue = data.data[displayValues[i]];
-        if (fieldValue != undefined && fieldValue.displayValue != undefined) {
-          text[i] = fieldValue.displayValue[0];
-        } else {
-          text[i] = '';
-        }
-      }
-
-      data.text = text[0];
-
-      _self.selectDatas.push(data);
-
-
-      /*var selectDataIds = [];
-        _self.selectDatas.forEach(function(item){
-            selectDataIds.push(item.id);
-        })
-
-        var newFieldValue = {
-            displayValue: selectDataIds,
-            fieldType: 'MultiSearchBoxEditor'
-        }
-        this.$emit("valueChanged", newFieldValue);*/
-
-      _self.getSelectDataIds();
-      this.$emit('getData', data);
-    },
-
-    getSelectDataIds: function () {
-      var _self = this;
-      var selectDataIds = [];
-      _self.selectDatas.forEach(function (item) {
-        selectDataIds.push(item.id);
-      });
-
-      var newFieldValue = {
-        displayValue: selectDataIds,
-        fieldType: 'MultiSearchBoxEditor',
-      };
-      this.$emit('valueChanged', newFieldValue);
-    },
-
-    // 获取String字符串
-    getFieldStringValue: function (index) {
-      if (this.fieldValue == undefined || this.fieldValue.displayValue == undefined || this.fieldValue.displayValue.length < index) {
-        return '';
-      } else {
-        return this.fieldValue.displayValue[index];
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.required-mark {
-    color: red;
-    margin-right: 10px;
-}
-.div-autoComplete {
-    position: absolute;
-    z-index: 99;
-    background-color: #fff;
-    border: 1px #e5e5e5 solid;
-    padding: 0px 15px 15px 15px;
-    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-}
-.box {
-    width: 200px;
-    min-height: 34px;
-    border: 1px solid rgba(60, 60, 60, 0.26);
-    border-radius: 4px;
-    white-space: normal;
-    transition: border-radius 0.25s;
-    background-color: #ffffff;
-    position: relative;
-}
-.div-readonly {
-    background-color: #eee !important;
-}
-.close {
-    float: none;
-    margin-right: 0;
-    font-size: 20px;
-    appearance: none;
-    padding: 0;
-    cursor: pointer;
-    background: 0 0;
-    border: 0;
-    font-weight: 700;
-    line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: 0.2;
-}
-.selected-tag {
-    color: #333;
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    height: 26px;
-    margin: 4px 1px 0px 3px;
-    padding: 3px 0.25em;
-    line-height: 34px;
-}
-.search-icon {
-    position: absolute;
-    top: 9px;
-    right: 7px;
-}
-.content {
-    display: inline-block !important;
-}
-/*.img-box {
-		width: 60px;
-		float: left;
-		text-align: center;
-		margin-right: 20px;
-	}
-	.img-box div img{
-		width: 60px;
-		height: 60px;
-	}
-	.add-box {
-		width: 60px;
-		height: 60px;
-		float: left;
-		border-radius: 30px;
-		border: 1px #999 dashed;
-		text-align: center;
-		margin-top: 20px;
-	}
-	.add-box:hover {
-		cursor: pointer;
-		background-color: #ccc;
-	}
-	.add-icon {
-		width: 60px;
-		height: 60px;
-		color: #aaa;
-		font-size: 40px;
-		line-height: 60px;
-		position: relative;
-		top: -1px;
-	}
-	.remove-icon {
-		color: red;
-		position: relative;
-		top: 10px;
-		right: -30px;
-		cursor: pointer;
-	}*/
-</style>

packages/process/src/ProcessReportDynamic.vue

@@ -139,12 +139,12 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue';
 
 var Common = require('../../common/Common.js').default;
 
 var Navbar = require('../../navbar/src/Navbar.vue').default;
 var DateTime = require('../../datetime/src/DateTime.vue').default;
-var MultiSearchWidget = require('./MultiSearchWidget.vue').default;
 var Loading = require('../../loading/src/Loading.vue').default;
 var ProcessReportResultPreview = require('./ProcessReportResultPreview.vue').default;
 var SearchWidget = require('../../info/src/SearchWidget.vue').default;
@@ -156,7 +156,9 @@ export default {
 
   components: {
     DateTime,
-    MultiSearchWidget,
+    MultiSearchWidget : defineAsyncComponent(() =>
+      import('../../info/src/MultiSearchWidget.vue'),
+    ),
     Loading,
     ProcessReportResultPreview,
     SearchWidget,

packages/process/src/ProcessReportStatic.vue

@@ -146,10 +146,11 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue';
+
 var Common = require('../../common/Common.js').default;
 var DateTime = require('../../datetime/src/DateTime.vue').default;
 var YearPicker = require('../../year-picker/src/YearPicker.vue').default;
-var MultiSearchWidget = require('./MultiSearchWidget.vue').default;
 var Loading = require('../../loading/src/Loading.vue').default;
 var ProcessReportResultPreview = require('./ProcessReportResultPreview.vue').default;
 var SearchWidget = require('../../info/src/SearchWidget.vue').default;
@@ -164,7 +165,9 @@ export default {
 
   components: {
     DateTime,
-    MultiSearchWidget,
+    MultiSearchWidget : defineAsyncComponent(() =>
+      import('../../info/src/MultiSearchWidget.vue'),
+    ),
     Loading,
     ProcessReportResultPreview,
     SearchWidget,