2023-5-15

src/api/system/baseForm.js

@@ -1,10 +1,25 @@
 import request from "@/utils/request";
-import qs from "qs";
+function customParamsSerializer(params) {
+  let result = '';
+  for (let key in params) {
+    if (params.hasOwnProperty(key)) {
+      if (Array.isArray(params[key])) {
+        params[key].forEach((item,index) => {
+          result += `${key}[${index}][key]=${item.key}&${key}[${index}][op]=${item.op}&${key}[${index}][value]=${item.value}&`;
+        });
+      } else {
+        result += `${key}=${params[key]}&`;
+      }
+    }
+  }
+  return result.slice(0, -1);
+}
 export function index(params,isLoading = false) {
   return request({
     method: "get",
     url: "/api/admin/base-form/index",
     params,
+    paramsSerializer: customParamsSerializer,
     isLoading
   })
 }

src/views/component/form.vue

@@ -15,7 +15,25 @@
                   <Select v-model="select.filter[0].op" style="width: 100px;margin-left: 10px;" placeholder="搜索条件">
                     <Option v-for="item in op" :key="item.value" :value="item.value">{{ item.label }}</Option>
                   </Select>
-                  <Input v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
+                  <template v-if="select.filter[0].op !== 'range' && !columnArrTest(select.filter[0].key)">
+                    <Input v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
+                  </template>
+                  <template v-else-if="select.filter[0].op !== 'range' && columnArrTest(select.filter[0].key)">
+                    <Select v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请选择关键词">
+                      <Option v-for="item in getColumnParams(select.filter[0].key)" :key="item.id" :value="item.id">{{ item.value }}</Option>
+                    </Select>
+                  </template>
+                  <template v-else>
+                    <Input :value="select.filter[0].value.split(',')[0]"
+                           style="width: 150px;margin-left: 10px;"
+                           placeholder="范围开始关键词"
+                           @input="(e)=>inputStartHandler(e,select.filter[0])"/>
+                    <span style="margin-left: 10px;display: flex;align-items: center;">至</span>
+                    <Input :value="select.filter[0].value.split(',')[1]"
+                           style="width: 150px;margin-left: 10px;"
+                           placeholder="范围结束关键词"
+                           @input="(e)=>inputEndHandler(e,select.filter[0])"/>
+                  </template>
                   <Button
                     style="margin-left: 10px"
                     type="primary"
@@ -38,7 +56,25 @@
                           <Select v-model="item.op" style="width: 100px;margin-left: 10px;" placeholder="搜索条件">
                             <Option v-for="item in op" :key="item.value" :value="item.value">{{ item.label }}</Option>
                           </Select>
-                          <Input v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
+                          <template v-if="item.op !== 'range' && !columnArrTest(item.key)">
+                            <Input v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
+                          </template>
+                          <template v-else-if="item.op !== 'range' && columnArrTest(item.key)">
+                            <Select v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请选择关键词">
+                              <Option v-for="item in getColumnParams(item.key)" :key="item.id" :value="item.id">{{ item.value }}</Option>
+                            </Select>
+                          </template>
+                          <template v-else>
+                            <Input :value="item.value.split(',')[0]"
+                                   style="width: 150px;margin-left: 10px;"
+                                   placeholder="范围开始关键词"
+                                   @input="(e)=>inputStartHandler(e,item)"/>
+                            <span style="margin-left: 10px;">至</span>
+                            <Input :value="item.value.split(',')[1]"
+                                   style="width: 150px;margin-left: 10px;"
+                                   placeholder="范围结束关键词"
+                                   @input="(e)=>inputEndHandler(e,item)"/>
+                          </template>
                           <el-button v-if="index !== 0" size="small" type="danger" icon="el-icon-delete" circle style="margin-left: 10px;" @click="select.filter.splice(index,1)"></el-button>
                         </div>
                       </div>
@@ -126,6 +162,16 @@ export default {
     reset() {
     },
 
+    //target要为内存地址引用类型
+    inputStartHandler(e,target) {
+      let temp = target?.value.split(',')[1]
+      target.value = `${e},${temp ? temp : ""}`
+    },
+    inputEndHandler(e,target) {
+      let temp = target?.value.split(',')[0]
+      target.value = `${temp ? temp : ""},${e}`
+    },
+
     async getField() {
       if(this.$route.meta.params?.custom_form) {
         let decode = decodeURIComponent(this.$route.meta.params?.custom_form)
@@ -154,7 +200,18 @@ export default {
       })
     }
   },
-  computed: {},
+  computed: {
+    columnArrTest() {
+      return function (field) {
+        return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).search_input === 'checkbox' : false
+      }
+    },
+    getColumnParams() {
+      return function (field) {
+        return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).paramters : []
+      }
+    },
+  },
   created() {
     this.getField()
 
@@ -182,6 +239,7 @@ export default {
   justify-content: center;
   align-items: center;
 
+  margin-top: 10px;
   & > span {
 
     padding: 0 10px;

src/views/system/menu.vue

@@ -395,21 +395,23 @@ export default {
         var result = Object.assign(this.form, obj);
         this.form = result;
 
-        let queryString = this.form.path.split("?")[1];
-        // 将参数字符串按照“&”符号分割成数组
-        let paramsArray = queryString.split("&");
-        // 定义一个空对象用于存储参数名和参数值
-        let params = {};
-        // 遍历参数数组，将每个参数名和参数值存储在params对象中
-        for (let i = 0; i < paramsArray.length; i++) {
-          let param = paramsArray[i].split("=");
-          let paramName = param[0];
-          let paramValue = param[1];
-          params[paramName] = paramValue;
+        if(this.form.path.includes('?')) {
+          let queryString = this.form.path.split("?")[1];
+          // 将参数字符串按照“&”符号分割成数组
+          let paramsArray = queryString.split("&");
+          // 定义一个空对象用于存储参数名和参数值
+          let params = {};
+          // 遍历参数数组，将每个参数名和参数值存储在params对象中
+          for (let i = 0; i < paramsArray.length; i++) {
+            let param = paramsArray[i].split("=");
+            let paramName = param[0];
+            let paramValue = param[1];
+            params[paramName] = paramValue;
+          }
+          // 获取custom_form_id参数的值
+          let customForm = params["custom_form"] ? JSON.parse(decodeURIComponent(params["custom_form"])) : {}
+          this.selectCustomForm = this.customForms.find(i => i.id === customForm?.custom_form_id)
         }
-        // 获取custom_form_id参数的值
-        let customForm = params["custom_form"] ? JSON.parse(decodeURIComponent(params["custom_form"])) : {}
-        this.selectCustomForm = this.customForms.find(i => i.id === customForm?.custom_form_id)
       }
       this.dialogFormVisible = true;
     },