feat:补充提交

zkqy-ui/src/views/tablelist/commonTable/queryfrom.vue

@@ -16,132 +16,65 @@
       <!--   不加载初始数据   -->
       <div v-show="showSearch" class="btn-wrap">
         <!--      条件循环-->
-        <span v-for="(item, index) in formVals" :key="index">
+        <span v-if="!(formVals.length&&queryParams.queryMap)"/>
+        <span v-else v-for="(item, index) in formVals" :key="index">
           <!--      input框循环-->
-          <span
-            v-if="item.conditionType == 'input'"
-            style="width: 500px; height: 500px">
-            <el-form-item
-              :label="item.conditionName"
-            >
+          <span v-if="item.conditionType == 'input'">
+            <el-form-item :label="item.conditionName">
               <!-- :label-width="calculateLabelWidth(item.conditionName)"-->
-              <el-input
-                v-model="queryParams.queryMap[item.conditionField]"
-                :placeholder="
-                  item.conditionNotes == null ? '请输入' : item.conditionNotes
-                "
-                @keyup.enter.native="handleQuery"
-                clearable
-              />
+              <el-input v-model="queryParams.queryMap[item.conditionField]" @keyup.enter.native="handleQuery" clearable
+                        :placeholder=" item.conditionNotes == null ? '请输入' : item.conditionNotes"/>
             </el-form-item>
           </span>
           <!--      button按钮循环-->
           <span v-if="item.conditionType == 'button'">
-            <el-form-item :label="item.conditionName">
-              <!--              {{-->
-              <!--                (queryParams.queryMap[item.conditionField] =-->
-              <!--                  item.conditionDefaultValue)-->
-              <!--              }}-->
-              <el-button
-                :size="item.componentSize"
-                :type="item.componentType"
-                @keyup.enter.native="btnClick"
-                @click="
-                  btnClick(item.conditionField, item.conditionDefaultValue)
-                ">
+            <el-form-item>
+              <el-button :size="item.componentSize" :type="item.componentType" @keyup.enter.native="btnClick"
+                         @click=" btnClick(item.conditionField, item.conditionDefaultValue)">
                 <span>
-                  <svg-icon
-                    v-if="item.componentIcon"
-                    class="pre-icon"
-                    slot="prefix"
-                    :icon-class="item.componentIcon"
-                  />{{
+                  <svg-icon v-if="item.componentIcon" class="pre-icon" slot="prefix" :icon-class="item.componentIcon"/>
+                  {{
                     item.conditionName == null ? "按钮" : item.conditionName
                   }}
                 </span>
               </el-button>
             </el-form-item>
-            <div style="clear: both"/>
           </span>
-          <div style="clear: both"/>
           <!--      select下拉框循环-->
-          <span
-            v-if="item.conditionType == 'select'"
-            style="width: 500px; height: 500px">
-            <el-form-item
-              :label="item.conditionName">
-              <el-select
-                v-model="queryParams.queryMap[item.conditionField]"
-                :placeholder="
-                  item.conditionNotes == null ? '请选择' : item.conditionNotes
-                " clearable filterable>
-                <el-option
-                  v-for="(i, index) in item.dropDownList"
-                  :key="index"
-                  :label="i.label"
-                  :value="i.value"
-                ></el-option>
+          <span v-if="item.conditionType == 'select'">
+            <el-form-item :label="item.conditionName">
+              <el-select v-model="queryParams.queryMap[item.conditionField]"
+                         :placeholder=" item.conditionNotes == null ? '请选择' : item.conditionNotes" clearable
+                         filterable>
+                <el-option v-for="(i, index) in item.dropDownList" :key="index" :label="i.label"
+                           :value="i.value"></el-option>
               </el-select>
-
-              <!-- <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option> -->
             </el-form-item>
           </span>
           <!--      radio单选框循环-->
-          <span
-            v-if="item.conditionType == 'radio'"
-            style="width: 500px; height: 500px"
-          >
+          <span v-if="item.conditionType == 'radio'">
             <el-form-item>
-              <el-button
-                :type="item.componentType"
-                :icon="item.componentIcon"
-                :size="item.componentSize"
-                @click="buttonClick(item)"
-              >
-                {{ item.conditionName }}</el-button
-              >
+              <el-button :type="item.componentType" :icon="item.componentIcon" :size="item.componentSize"
+                         @click="buttonClick(item)">{{ item.conditionName }}</el-button>
             </el-form-item>
           </span>
           <!--      time时间范围  -->
           <span
-            v-if="item.conditionType == 'datetimerange'"
-            style="width: 500px; height: 500px"
-          >
-            <el-form-item
-              :label="item.conditionName"
-            >
+            v-if="item.conditionType == 'datetimerange'">
+            <el-form-item :label="item.conditionName">
               <!--  item.componentType 使用某种组件
         year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange-->
-
-                                <el-date-picker
-                                  v-model="queryParams.queryMap[item.conditionField]"
-                                  :type="item.conditionType"
-                                  :picker-options="pickerOptions"
-                                  range-separator="至"
-                                  start-placeholder="开始日期"
-                                  end-placeholder="结束日期"
-                                  value-format="yyyy-MM-DD HH:mm:ss"
-                                  align="right">
-                              </el-date-picker>
-
-              <!--              <el-date-picker-->
-              <!--                v-model="queryParams.queryMap[item.conditionField]"-->
-              <!--                :type="item.componentType"-->
-              <!--                :picker-options="pickerOptions"-->
-              <!--                range-separator="至"-->
-              <!--                start-placeholder="开始日期"-->
-              <!--                end-placeholder="结束日期"-->
-              <!--                value-format="yyyy-MM-DD HH:mm:ss"-->
-              <!--                :default-time="['12:00:00']"-->
-              <!--              >-->
-              <!--              </el-date-picker>-->
+          <el-date-picker v-model="queryParams.queryMap.timehorizon[item.conditionField]"
+                          :type="item.conditionType" :picker-options="pickerOptions"
+                          range-separator="至" start-placeholder="开始日期"
+                          end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
+                          align="right"/>
             </el-form-item>
           </span>
+          <!--            <span v-if="index==3">-->
+          <!--            <div>换行</div>-->
+          <!--          </span>-->
+          <!-- <span>当前循环下标：{{ index }}</span> -->
         </span>
       </div>
     </el-form>
@@ -171,8 +104,6 @@ export default {
   components: {cardcountpanel},
   data() {
     return {
-      // 时间范围临时存储
-      dateRange: [],
       // 共通查询参数
       queryParams: {
         // pageNum: 1,                  // 第几页
@@ -185,6 +116,8 @@ export default {
         },
         // 当前表字段筛选参数
         queryMap: {
+          // 时间范围查询条件对象
+          timehorizon: {},
           // 当前查询基本参数
           // ... key : value         当前页面的筛选条件
           // 超级查询的唯一值
@@ -227,44 +160,33 @@ export default {
           }
         }]
       },
-      // card
     };
   },
-  watch: {
-    formVals: {
-      handler: function (val) {
-        console.log("formVals", val);
-        return;
-        // console.log(this.formVals);
-        this.formVals.forEach((item) => {
-          // console.log(item.conditionType);
-          if (item.conditionType == "input") {
-            this.inputs.push(item);
-          } else if (item.conditionType == "between") {
-            // 判断使用某种时间范围组件  YYYY 表示年范围之间的组件 MM 表示月等。。。
-            // // console.log(item.componentType);
-            this.betweens.push(item);
-          } else if (item.conditionType == "select") {
-            this.selects.push(item);
-          } else if (item.conditionType == "radio") {
-            this.radios.push(item);
-          }
-        });
-      },
-    },
-  },
   created() {
-    console.log("formVals", this.queryParams);
-    this.$emit("getList", this.queryParams);
-    // console.log("showCount", this.showCount)
-    // console.log("showSearch", this.showSearch)
-    // console.log("statisticList", this.statisticList)
+    // 优化渲染调用逻辑（Don't fucking change it）
+    // this.handlerFormVals();
+    // this.$emit("getList", this.queryParams);
   },
   methods: {
+    handlerFormVals() {
+      console.log("监听调用")
+      // 处理当前需要渲染的查询条件 // 删除超级查询、默认查询得到实际需要渲染查询条件数组
+      this.formVals.forEach((item, index) => {
+        if (item.conditionType == "DefaultQuery" || item.conditionType == "SuperQuery") {
+          this.formVals.splice(index, 1)
+        }
+      });
+      // 排序
+      this.formVals.sort((a, b) => {
+        if (a.sort < b.sort) return -1;
+        if (a.sort > b.sort) return 1;
+        return 0;// 如果sort相等，保持原相对顺序（稳定排序）
+      });
+    },
     // 计算form宽度-label
     calculateLabelWidth(font) {
       // 一个汉字为20px宽度
-      console.log("当前form中label宽度：", 20 * font.length, font);
+      // console.log("当前form中label宽度：", 20 * font.length, font);
       return 20 * font.length;
     },
     // radio 点击事件调用getList
@@ -272,19 +194,85 @@ export default {
       // 调用父组件中的getlist    待处理
       // 当前按钮绑定的默认值以及列
       this.queryParams.queryMap[tem.conditionField] = tem.conditionDefaultValue;
-      // console.log(this.queryParams);
       // 处理完成后调用getlist
       this.handleQuery();
     },
     /** 搜索按钮操作 */
     handleQuery() {
+      // 拷贝查询参数对象
+      let tempQueryParams = Object.assign({}, JSON.parse(JSON.stringify(this.queryParams)));
       // 调用组件中的getList
       this.queryParams.pageNum = 1;
-      console.log(this.queryParams);
+      if (tempQueryParams.queryMap.timehorizon && typeof (tempQueryParams.queryMap.timehorizon) != "undefined") {
+        // 处理时间查询参数 this.queryParams.queryMap.timehorizon
+        // 得到当前查询所需时间范围
+        let timehorizon = Object.assign({}, JSON.parse(JSON.stringify(tempQueryParams.queryMap.timehorizon)));
+        tempQueryParams.queryMap.timehorizon = {};
+        // 得到所有时间范围查询条件参数
+        let keys = Object.keys(timehorizon);
+        if (keys.length != 0) {
+          // 循环处理时间范围
+          keys.forEach(item => {
+            let times = timehorizon[item];
+            times = Array.isArray(times) ? times : [];
+            if (times.length >= 2) { // 确保times数组至少有两个元素
+              let parms = {
+                'beginTime': times[0],
+                'endTime': times[1]
+              };
+              tempQueryParams.queryMap.timehorizon[item] = parms
+            }
+          });
+        }
+      }
+      this.$emit("getList", tempQueryParams)
+
+      // 以下注释勿动！！！⚠️⚠️⚠️
+      // // 处理时间查询参数 this.queryParams.queryMap.timehorizon
+      // if (keys.length != 0) {
+      //   // 得到当前查询所需时间范围
+      //   let timehorizon = Object.assign({}, JSON.parse(JSON.stringify(tempQueryParams.queryMap.timehorizon)));
+      //
+      //   tempQueryParams.queryMap.timehorizon = {};
+      //
+      //   // 得到所有时间范围查询条件参数
+      //   let keys = Object.keys(timehorizon);
+      //
+      //
+      //
+      //   // 循环处理时间范围
+      //   keys.forEach(item => {
+      //     let times = timehorizon[item];
+      //     times = Array.isArray(times) ? times : [];
+      //
+      //     if (times.length >= 2) { // 确保times数组至少有两个元素
+      //
+      //       let parms = {
+      //         'beginTime': times[0],
+      //         'endTime': times[1]
+      //       };
+      //       // 序列化处理完成后的时间条件
+      //       // tempQueryParams.queryMap.timehorizon = {
+      //       //   ...tempQueryParams.queryMap.timehorizon,
+      //       //   parms
+      //       // }
+      //       tempQueryParams.queryMap.timehorizon[item] = parms
+      //       // 在将parms赋值回原对象之前，先删除原来的值
+      //       // delete this.queryParams.queryMap.timehorizon[item];
+      //
+      //       // 将parms对象赋值回原对象
+      //       // this.queryParams.queryMap.timehorizon[item] = parms;
+      //
+      //       // 时间范围转换字符串
+      //       // tempQueryParams.queryMap.timehorizon = JSON.stringify(tempQueryParams.queryMap.timehorizon);
+      //
+      //     }
+      //   });
+      //
+      //   // // 重新为时间范围组件赋值
+      //   // this.queryParams.queryMap.timehorizon = timehorizon;
+      // }
       // 调用父组件中的查询函数
-      let tempQueryParams = JSON.parse(JSON.stringify(this.queryParams));
-      console.log(tempQueryParams);
-      this.$emit("getList", tempQueryParams);
     },
     btnClick(field, val) {
       this.queryParams.queryMap[field] = val;
@@ -300,12 +288,27 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      // 时间范围滞空
-      this.dateRange = [];
+      debugger;
       // 查询表单清空
       this.resetForm("queryForm");
       // 清空查询条件
-      this.queryParams.queryMap = {};
+      this.queryParams.queryMap = {
+        // 时间范围查询条件对象
+        timehorizon: {},
+        // 超级查询的唯一值
+        queryCriteriaValue: "",
+      }
+      //   {
+      //   isAsc: this.sortState ? "DESC" : "ASC", // desc（降序）或 asc（升序）
+      //   // 基本查询参数
+      //   basicMap: {
+      //     tableName: "drag_form",
+      //   },
+      //   queryMap: {
+      //     timehorizon: {},
+      //     queryCriteriaValue: "",
+      //   },
+      // };
       // 调用查询
       this.handleQuery();
     },
@@ -365,7 +368,7 @@ export default {
 }
 
 .btn-wrap {
-  display: flex;
+  //display: flex;
   //flex-direction: row-reverse;
 }
 </style>