查询窗口增加查询搜索框和表格操作列

examples/App.vue

@@ -54,6 +54,9 @@
           <li>
             <router-link :to="{ path: '/desktop/search-widget-example'}">搜索框控件</router-link>
           </li>
+          <li>
+            <router-link :to="{ path: '/desktop/search-input-example'}">搜索输入框控件</router-link>
+          </li>
           <li>
             <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>
           </li>

examples/main.js

@@ -3,8 +3,9 @@ import {createRouter, createWebHashHistory} from 'vue-router';
 import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs.js';
 import VTooltip from 'v-tooltip';
 import mRouter from './route/index.js';
+import Antd from 'ant-design-vue';
 import App from './App.vue';
-
+import 'ant-design-vue/dist/antd.css';
 import zh from '@/i18n/zh-CN.js';
 import en from '@/i18n/en-US.js';
 
@@ -34,6 +35,7 @@ const router = createRouter({
 
 let app = createApp(App);
 app.use(i18n);
+app.use(Antd);
 app.use(router);
 app.use(VTooltip);
 app.mount('#app');

examples/route/index.js

@@ -26,6 +26,7 @@ const ProcessReport = () => import(/* webpackChunkName: "process-report" */ '../
 const InfoWindowExample = () => import(/* webpackChunkName: "info-window" */ '../../examples/info/InfoWindowExample.vue');
 const DocGeneratorSelected = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/DocGeneratorSelected.vue');
 const SearchInput = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/SearchInput.vue');
+const SearchInputExample = () => import(/* webpackChunkName: "doc-generator-selected" */ '../search-input/SearchInputExample.vue');
 
 export default {
   routes: [
@@ -104,7 +105,9 @@ export default {
 
         /** 查询窗口 */
         { path: 'doc-generator-selected', component: DocGeneratorSelected },
+        // 搜寻筛选输入选择框
         { path: 'searchInput', component: SearchInput },
+        { path: 'search-input-example', component: SearchInputExample },
       ],
 
     },

examples/search-input/SearchInputExample.vue

@@ -0,0 +1,36 @@
+<template>
+  <h1>搜索输入框</h1>
+  <SearchInput
+    v-model:value="filterFiled.condition"
+    :api-url="filterFiled.apiUrl"
+    :api-response-data-text-filed-name="
+      filterFiled.apiResponseDataTextFiledName
+    "
+  />
+</template>
+
+<script>
+import SearchInput from '../../packages/info/src/SearchInput.vue';
+export default {
+  components: { SearchInput },
+  data() {
+    return {
+      filterFiled: {
+        condition: '',
+        apiUrl: 'SqlApiResource/execute/20221206_114403',
+        apiResponseDataTextFiledName: 'datas->assetInventoryId',
+      },
+    };
+  },
+  watch:{
+    'filterFiled.condition':{
+      handler(newValue){
+        console.log(newValue,'condition-----');
+      },
+    },
+  },
+};
+</script>
+
+<style>
+</style>

package.json

@@ -40,6 +40,7 @@
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
+    "ant-design-vue": "^3.2.15",
     "v-tooltip": "^4.0.0-beta.17",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
@@ -49,8 +50,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "http://wuzhixin.vip:4873/"
-  },
-  "dependencies": {
-    "ant-design-vue": "^4.0.7"
   }
 }

packages/common/JsUtil.js

@@ -21,8 +21,28 @@ let dynamicLoadJsModule = function(jsUrl){
   eval(command);
   return promise;
 };
+/**
+ * 动态加载js模块中的方法
+ * @param {*} jsUrl js文件的路径
+ * @param {*} functionName js方法中的名称
+ * @return promise对象
+ */
+let dynamicLoadJsFunction = function(jsUrl, functionName){
+  let promise0 = dynamicLoadJsModule(jsUrl);
 
+  let promise1 = new Promise((resolve, reject) => {
+    promise0.then(remoteComponent => {
+      let targetFunction = remoteComponent[functionName];
+      resolve(targetFunction);
+    }, errorData => {
+      reject.error(errorData);
+    });
+  });
+  
+  return promise1;
+};
 
 export default {
   dynamicLoadJsModule,
+  dynamicLoadJsFunction,
 };

packages/info/src/Context.js

@@ -0,0 +1,196 @@
+
+/**
+ * 
+ * @param {*} modelData 当前绑定的数据模型
+ * @param {*} actions 操作集合
+ * @returns 
+ */
+export default function(modelData, actions){
+    
+  this.modelData = modelData;
+
+  /**
+     * 获取数据记录的Id
+     */
+  this.getRecordId = function(){
+    return this.modelData.id;
+  },
+
+  /**
+     * 获取字段(文本、数字类型)的值
+     * @param {string} fieldName 字段名称
+     */
+  this.getFieldValue = function(fieldName){
+    return this.modelData.data[fieldName];
+  };
+    
+  /**
+     * 设置字段(文本、数字类型)的值
+     * @param {string} fieldName 字段名称
+     * @param { com.leanwo.prodog.restful.base.model.FieldValue } fieldValue 字段值
+     */
+  this.setFieldValue = function(fieldName, fieldValue){
+    this.modelData.data[fieldName] = fieldValue;
+  };
+
+  /**
+     * 获取字段（搜索框、下拉框类型)的id
+     * @param {string} fieldName 字段名称
+     */
+  this.getFieldValueId = function(fieldName){
+    return this.modelData.data[fieldName].id;
+  };
+
+  /**
+     * 设置字段（搜索框、下拉框类型)的id
+     * @param {string} fieldName 字段名称
+     * @param {long} id 
+     */
+  this.setFieldValueId = function(filedName, id){
+    this.modelData.data[filedName].id = id;
+  };
+
+  /**
+     * 获取显示的值,返回数组
+     * @param {string} fieldName 字段名称
+     */
+  this.getDispalyValue = function(fieldName){
+    return this.modelData.data[fieldName].displayValue;
+  };
+
+  /**
+     * 设置显示的值(数组)
+     * @param {string} fieldName 字段名称
+     * @param {*} displayValue 数组
+     */
+  this.setDispalyValue = function(fieldName, displayValue){
+    this.modelData.data[fieldName].displayValue = displayValue;
+  };
+
+  /**
+     * 获取显示的第一个值
+     * @param {string} fieldName 字段名称
+     */
+  this.getDispalyValue0 = function(fieldName){
+    return this.modelData.data[fieldName].displayValue[0];
+  };
+
+  /**
+     * 设置显示的第一个值
+     * @param {string} fieldName 字段名称
+     * @param {string} displayValue0 显示的值
+     */
+  this.setDispalyValue0 = function(fieldName, displayValue0){
+    this.modelData.data[fieldName].displayValue[0] = displayValue0;
+  };
+
+  /**
+     * 设置自定义的属性
+     * @param {string} propertyName 属性名称
+     * @param {object} propertyValue 属性值
+     */
+  this.setCustomerProperty = function(propertyName, propertyValue){
+    if(this.calloutProperty ==  null){
+      this.calloutProperty = {};
+    }
+    this.calloutProperty[propertyName] = propertyValue;
+  };
+
+  /**
+     * 获取自定义的属性
+     * @param {string} propertyName 属性名称
+     */
+  this.getCustomerProperty = function(propertyName){
+    if(this.calloutProperty ==  null){
+      this.calloutProperty = {};
+    }
+    return this.calloutProperty[propertyName];
+  };
+
+  /**
+     * 获取API的地址
+     * @param {string} apiName 
+     * @returns 
+     */
+  this.getApiURL = function(apiName){
+    //获取当前网址，如： http://localhost:8083/myproj/view/my.jsp
+    var curWwwPath = window.document.location.href;
+    //获取主机地址之后的目录，如： myproj/view/my.jsp
+    var pathName = window.document.location.pathname;
+    var pos = curWwwPath.indexOf(pathName);
+    //获取主机地址，如： http://localhost:8083
+    var localhostPath = curWwwPath.substring(0, pos);
+    return localhostPath + '/api/' + apiName;
+  };
+
+  /**
+     * AJAX 请求头添加token
+     * @param {object} request 请求 
+     */
+  this.addTokenToRequest = function(request){
+    request.setRequestHeader('token', localStorage.getItem('#token'));
+  };
+
+  /**
+     * 获取子页签的数据
+     * @param {int} tabIndex 子页签的序号
+     */
+  this.getSubTabModelDatas = function(tabIndex){
+    if(actions === undefined || actions === null){
+      console.error('操作集合 actions 为空，不能获取子页签的数据。');
+      return;
+    }
+
+    const subTabsRef = actions.subTabsRef;
+    if(subTabsRef === undefined || subTabsRef === null){
+      console.error('操作集合 action.subTabsRef 为空，不能获取子页签的数据。');
+      return;
+    }
+        
+    return subTabsRef[tabIndex].modelDatas;
+  };
+
+  /**
+     * 子页签增加数据
+     * @param {int} tabIndex 子页签的序号
+     * @param {com.leanwo.prodog.restful.base.model.ModelData} subTabNewModelData 子页签新增的数据
+     */
+  this.addSubTabModelData = function(tabIndex, subTabNewModelData){
+    return this.subTabsRef[tabIndex].addModelData(subTabNewModelData);
+  };
+
+  /**
+     * 修改父页签的数据
+	 * @param { String } fieldName 字段名称
+	 * @param { com.leanwo.prodog.restful.base.model.FieldValue } fieldValue 字段的值
+	 * @author YangZhiJie 20211012
+     */
+  this.changeParentModelData = function(fieldName, fieldValue){
+    if(actions === undefined || actions === null){
+      console.error('操作集合 actions 为空，不能修改父页签的数据。');
+      return;
+    }
+
+    const changeParentModelData = actions.changeParentModelData;
+    if(changeParentModelData === undefined || changeParentModelData === null){
+      console.error('操作集合 action.changeParentModelData 为空，不能修改父页签的数据。');
+      return;
+    }
+
+    changeParentModelData(fieldName, fieldValue);
+  };
+
+  /**
+     * 获取本页签的表格数据
+     */
+  this.getModelDatas = function(){
+    if(actions === undefined || actions === null){
+      console.error('操作集合 actions 为空，不能获取本页签的表格数据。');
+      return;
+    }
+    return actions.modelDatas;
+  };
+
+
+  return this;
+};

packages/info/src/InfoWindowUtil.js

@@ -63,6 +63,8 @@ export default {
         'value2': infoFilterField.value.value2,
       },
       'keyValues':infoFilterField.keyValues,
+      'apiUrl':infoFilterField.apiUrl,
+      'apiResponseDataTextFiledName':infoFilterField.apiResponseDataTextFiledName,
     };
 
 

packages/info/src/QueryConditionComplex.vue

@@ -21,13 +21,13 @@
             class="form-inline-div"
             @keyup.enter="complexSearch()"
           >
-            <input
-              v-if="item.displayType =='TextEditor'"
-              :id="item.id"
-              v-model="item.value.value1"
-              autocomplete="off"
-              type="text"
-              :placeholder="$t('lang.QueryConditionComplex.pleaseInputTheContent')"
+            <SearchInput
+              v-if="item.displayType =='TextEditor' && item.apiUrl != null && item.apiUrl.length >0"
+              v-model:value="item.value.value1"
+              :api-url="item.apiUrl"
+              :api-response-data-text-filed-name="
+                item.apiResponseDataTextFiledName
+              "
               class="form-control form-control-complex form-input"
             />
             <input
@@ -119,13 +119,13 @@
             v-if="item.index == 2"
             class="form-inline-div"
           >
-            <input
-              v-if="item.displayType =='TextEditor'"
-              :id="item.id"
-              v-model="item.value.value2"
-              autocomplete="off"
-              type="text"
-              :placeholder="$t('lang.QueryConditionComplex.pleaseInputTheContent')"
+            <SearchInput
+              v-if="item.displayType =='TextEditor' && item.apiUrl != null && item.apiUrl.length >0"
+              v-model:value="item.value.value1"
+              :api-url="item.apiUrl"
+              :api-response-data-text-filed-name="
+                item.apiResponseDataTextFiledName
+              "
               class="form-control form-control-complex form-input"
               @keyup.enter="complexSearch()"
             />
@@ -260,6 +260,7 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 
+import SearchInput from './SearchInput.vue';
 import EnumSelectWidgetInfo from './EnumSelectWidgetInfo.vue';
 import DateTime from '../../datetime/src/DateTime.vue';
 import YearPicker from '../../year-picker/src/YearPicker.vue';
@@ -281,6 +282,7 @@ export default {
     DateWidget,
     VueMonthlyPicker,
     YearPicker,
+    SearchInput,
   },
 
   props: {

packages/info/src/SearchInput.vue

@@ -5,6 +5,7 @@
     style="width: 200px"
     :allow-clear="true"
     :not-found-content="fetching ? undefined : null"
+    :placeholder="$t('lang.QueryConditionComplex.pleaseInputTheContent')"
     :options="options"
     @search="searchDatas"
     @change="selectChanged"
@@ -17,25 +18,20 @@
     
 <script>
 import Common from '../../common/Common';
-import { message, Select } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 // 防抖处理(避免重复请求)
 const debounce = (fn, delay) => {
   let timer = null;
-  return function () {
+  return function (...args) {
     if (timer) {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      fn.apply(this, arguments);
+      fn.apply(this, args);
     }, delay);
   };
 };
-
-let _self = null;
 export default {
-  components: {
-    'a-select': Select,
-  },
   props: {
     value: {
       type: String,
@@ -45,23 +41,34 @@ export default {
       type: String,
       default: null,
     },
+    apiResponseDataTextFiledName: {
+      type: String,
+      default: null,
+    },
   },
   emits: ['update:value'],
   data() {
     return {
-      selectValue: '',
+      selectValue: null,
       fetching: false,
       options: [{ value: '请输入查询内容', label: '请输入查询内容' }],
     };
   },
-  mounted() {
-    _self = this;
+  watch: {
+    apiResponseDataTextFiledName: {
+      handler(newValue) {
+        console.log(newValue, 'apiResponseDataTextFiledName');
+      },
+      immediate: true,
+    },
   },
+
   methods: {
     // 搜索事件
-    searchDatas: debounce(value => {
-      _self.getDatas(value);
-    }, 500),
+    searchDatas:debounce(function(value){
+      this.getDatas(value);
+      this.$emit('update:value', value);
+    },600),
 
     // 选择后更新值
     selectChanged(value) {
@@ -71,12 +78,21 @@ export default {
 
     // 请求获取搜索数据
     getDatas(value) {
-      _self.fetching = true;
-      _self.options = [];
+      const that = this;
+      if (!value) {
+        return;
+      }
+      that.options = [];
+      console.log(this.apiResponseDataTextFiledName, 'apiResponseDataTextFiledName');
+      that.fetching = true;
+      let filedName;
       const params = { start: 0, length: 99999, condition: value };
+      if (that.apiResponseDataTextFiledName.includes('->')) {
+        filedName = that.apiResponseDataTextFiledName.split('->')[1];
+      }
       $.ajax({
         type: 'get',
-        url: Common.getApiURL(_self.apiUrl),
+        url: Common.getApiURL(that.apiUrl),
         data: params,
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
@@ -84,19 +100,25 @@ export default {
         success: function ({ errorCode, errorMessage, datas }) {
           if (errorCode == 0) {
             if (datas && datas.length) {
-              // 数据结构待处理（value，label）
-              this.options = datas;
-            } else {
-              this.options.splice(0, datas.length);
+              // 数据处理（value，label）
+              datas.forEach(item => {
+                if (filedName) {
+                  item.value = item[filedName];
+                  item.label = item[filedName];
+                  that.options.push(item);
+                } else {
+                  that.options.push({ value: item, label: item });
+                }
+              });
             }
           } else {
             message.warning(errorMessage);
           }
-          _self.fetching = false;
+          that.fetching = false;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
-          _self.fetching = false;
+          that.fetching = false;
         },
       });
     },

webpack.dev.js

@@ -21,6 +21,13 @@ module.exports = WebpackMerge.merge(baseConfig, {
           ws: true, // 是否启用websockets
           //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
           changOrigin: true,
+      },
+      '/content': {
+          //要访问的跨域的域名
+          target: 'http://192.168.1.129:10022/',
+          ws: true, // 是否启用websockets
+          //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
+          changOrigin: true,
       }
     }
   },

webpack.lib.js

@@ -104,5 +104,6 @@ module.exports = WebpackMerge.merge(baseConfig,{
     'v-tooltip': 'v-tooltip',
     'vuedraggable': 'vuedraggable',
     'lowcode': 'lowcode',
+    'ant-design-vue': 'ant-design-vue',
   },
 });