fix:初始化修改

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-   
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --mode test",
     "build:test": "vue-cli-service build --mode test",
@@ -14,6 +13,7 @@
     "test": "vue-cli-service inspect"
   },
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@tinymce/tinymce-vue": "2.1.0",
     "@vant/area-data": "^1.3.1",
     "@zxing/library": "^0.19.1",

src/api/request.js

-import Vue from "vue";
+
 import axios from "axios";
-import qs from "qs";
-import { Message, MessageBox, Loading } from "element-ui";
-import store from "@/store";
-import router from "@/router";
 
 // 超时时间
 axios.defaults.timeout = 300000;

src/assets/global.css

@@ -41,4 +41,5 @@ body{
 .card-page-box{
     background: #fff;
     height: 100vh;
+    padding: 10px;
 }
\ No newline at end of file

src/views/common/form/FormRender.vue

@@ -50,7 +50,6 @@
         v-for="(item, index) in forms"
         :key="item.name + index"
       >
-
         <form-item
           v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
           :model="_value"
@@ -367,12 +366,14 @@ export default {
         case "TextInput":
         case "TextareaInput":
         case "SelectInput":
-        case "RadioGroup":
         case "Location":
-        case "SelectInputApi":
         case "Provinces":
           compareType = "strCompare";
           break;
+        case "RadioGroup":
+        case "SelectInputApi":
+          compareType = "customSelectCompare";
+          break;
         case "MultipleSelect":
           compareType = "strArrCompare";
           break;
@@ -387,6 +388,15 @@ export default {
           compareType = "orgCompare";
           break;
       }
+      console.log(
+        "ckkk.",
+        CompareFuncs[compareType][condition.compare](
+          source,
+          condition.fixed
+            ? condition.compareVal
+            : this._value[condition.compareVal[0]]
+        )
+      );
       return CompareFuncs[compareType][condition.compare](
         source,
         condition.fixed

src/views/common/form/components/compare/CompareOptions.js

@@ -2,97 +2,107 @@
 import moment from "moment";
 
 const strCompareOptions = [
-  {name: '等于', symbol: 'EQ', compare: (a, b) => a == b[0]},
-  {name: '不等于', symbol: 'NEQ', compare: (a, b) => a != b[0]},
-  {name: '为其之一', symbol: 'IN', compare: (a, b) => (b || []).includes(a)},
-  {name: '不为其之一', symbol: 'NIN', compare: (a, b) => !(b || []).includes(a)},
-  {name: '含有', symbol: 'LIKE', compare: (a, b) => (b || '').includes(a)},
+    { name: '等于', symbol: 'EQ', compare: (a, b) => a == b[0] },
+    { name: '不等于', symbol: 'NEQ', compare: (a, b) => a != b[0] },
+    { name: '为其之一', symbol: 'IN', compare: (a, b) => (b || []).includes(a) },
+    { name: '不为其之一', symbol: 'NIN', compare: (a, b) => !(b || []).includes(a) },
+    { name: '含有', symbol: 'LIKE', compare: (a, b) => (b || '').includes(a) },
+]
+const customSelectCompareOptions = [
+    {
+        name: '等于', symbol: 'EQ', compare: (a, b) => {
+            return (a?.id || a) == (b[0].id || b[0])
+        }
+    },
 ]
 
 const strArrCompareOptions = [
-  {name: '包含', symbol: 'HS', compare: (a, b) => checkElementsExistInArray(b, a)},
-  {name: '不包含', symbol: 'NHS', compare: (a, b) => !checkElementsExistInArray(b, a)},
+    { name: '包含', symbol: 'HS', compare: (a, b) => checkElementsExistInArray(b, a) },
+    { name: '不包含', symbol: 'NHS', compare: (a, b) => !checkElementsExistInArray(b, a) },
 ]
 
 const numCompareOptions = [
-  {name: '大于', symbol: 'GT', compare: (a, b) =>  a > b},
-  {name: '小于', symbol: 'LT', compare: (a, b) =>  a < b},
-  {name: '等于', symbol: 'EQ', compare: (a, b) =>  a == b},
-  {name: '不等于', symbol: 'NEQ', compare: (a, b) => a != b},
-  {name: '大于等于', symbol: 'GT_EQ', compare: (a, b) =>  a >= b},
-  {name: '小于等于', symbol: 'LT_EQ', compare: (a, b) =>  a <= b},
-  {name: '在内或相等', symbol: 'IN_EQ', compare: (a, b) =>  a >= b[0] && a <= b[1]},
-  {name: '在内或不等', symbol: 'IN_NEQ', compare: (a, b) =>  a == b},
-  {name: '为其之一', symbol: 'IN', compare: (a, b) => (b || []).includes(a)},
-  {name: '不为其之一', symbol: 'NIN', compare: (a, b) => !(b || []).includes(a)},
+    { name: '大于', symbol: 'GT', compare: (a, b) => a > b },
+    { name: '小于', symbol: 'LT', compare: (a, b) => a < b },
+    { name: '等于', symbol: 'EQ', compare: (a, b) => a == b },
+    { name: '不等于', symbol: 'NEQ', compare: (a, b) => a != b },
+    { name: '大于等于', symbol: 'GT_EQ', compare: (a, b) => a >= b },
+    { name: '小于等于', symbol: 'LT_EQ', compare: (a, b) => a <= b },
+    { name: '在内或相等', symbol: 'IN_EQ', compare: (a, b) => a >= b[0] && a <= b[1] },
+    { name: '在内或不等', symbol: 'IN_NEQ', compare: (a, b) => a == b },
+    { name: '为其之一', symbol: 'IN', compare: (a, b) => (b || []).includes(a) },
+    { name: '不为其之一', symbol: 'NIN', compare: (a, b) => !(b || []).includes(a) },
 ]
 
 const orgCompareOptions = [
-  {name: '是', symbol: 'EQ', compare: (a, b) => a[0].id == b[0].id},
-  {name: '不是', symbol: 'NEQ', compare: (a, b) => a[0].id != b[0].id},
-  {name: '为其之一', symbol: 'IN', compare: (a, b) => checkElementsExistInArray(a, b, 'id')},
-  {name: '含有', symbol: 'HS', compare: (a, b) => checkElementsExistInArray(b, a, 'id')},
-  {name: '不含有', symbol: 'NHS', compare: (a, b) => !checkElementsExistInArray(b, a, 'id')},
+    { name: '是', symbol: 'EQ', compare: (a, b) => a[0].id == b[0].id },
+    { name: '不是', symbol: 'NEQ', compare: (a, b) => a[0].id != b[0].id },
+    { name: '为其之一', symbol: 'IN', compare: (a, b) => checkElementsExistInArray(a, b, 'id') },
+    { name: '含有', symbol: 'HS', compare: (a, b) => checkElementsExistInArray(b, a, 'id') },
+    { name: '不含有', symbol: 'NHS', compare: (a, b) => !checkElementsExistInArray(b, a, 'id') },
 ]
 
 const timeCompareOptions = [
-  {name: '在之前', symbol: 'LT', compare: (a, b) => moment(a).isBefore(moment(b[0]))},
-  {name: '在之后', symbol: 'GT', compare: (a, b)  => moment(a).isAfter(moment(b[0]))},
-  {name: '在其中', symbol: 'IN', compare: (a, b) => moment(b[0]).isBefore(moment(a)) && moment(b[1]).isAfter(moment(a))},
+    { name: '在之前', symbol: 'LT', compare: (a, b) => moment(a).isBefore(moment(b[0])) },
+    { name: '在之后', symbol: 'GT', compare: (a, b) => moment(a).isAfter(moment(b[0])) },
+    { name: '在其中', symbol: 'IN', compare: (a, b) => moment(b[0]).isBefore(moment(a)) && moment(b[1]).isAfter(moment(a)) },
 ]
 
 const timeArrCompareOptions = [
-  {name: '包含', symbol: 'LT', compare: (a, b) => moment(a[0]).isBefore(moment(b[0])) && moment(a[1]).isAfter(moment(b[0]))},
-  {name: '不包含', symbol: 'GT', compare: (a, b)  => moment(b[0]).isBefore(moment(a[0])) || moment(b[0]).isAfter(moment(a[1]))},
+    { name: '包含', symbol: 'LT', compare: (a, b) => moment(a[0]).isBefore(moment(b[0])) && moment(a[1]).isAfter(moment(b[0])) },
+    { name: '不包含', symbol: 'GT', compare: (a, b) => moment(b[0]).isBefore(moment(a[0])) || moment(b[0]).isAfter(moment(a[1])) },
 ]
 
 //加载比较函数对象
-function getCompareFucs(){
-  let cpFuncs = {
-    strCompare:{},
-    strArrCompare:{},
-    numCompare:{},
-    orgCompare:{},
-    timeCompare:{},
-    timeArrCompare:{}
-  }
-  strCompareOptions.forEach(v => cpFuncs.strCompare[v.symbol] = v.compare)
-  strArrCompareOptions.forEach(v => cpFuncs.strArrCompare[v.symbol] = v.compare)
-  numCompareOptions.forEach(v => cpFuncs.numCompare[v.symbol] = v.compare)
-  orgCompareOptions.forEach(v => cpFuncs.orgCompare[v.symbol] = v.compare)
-  timeCompareOptions.forEach(v => cpFuncs.timeCompare[v.symbol] = v.compare)
-  timeArrCompareOptions.forEach(v => cpFuncs.timeArrCompare[v.symbol] = v.compare)
-  return cpFuncs
+function getCompareFucs() {
+    let cpFuncs = {
+        strCompare: {},
+        customSelectCompare: {},
+        strArrCompare: {},
+        numCompare: {},
+        orgCompare: {},
+        timeCompare: {},
+        timeArrCompare: {}
+    }
+
+    strCompareOptions.forEach(v => cpFuncs.strCompare[v.symbol] = v.compare)
+    customSelectCompareOptions.forEach(v => cpFuncs.customSelectCompare[v.symbol] = v.compare)
+    strArrCompareOptions.forEach(v => cpFuncs.strArrCompare[v.symbol] = v.compare)
+    numCompareOptions.forEach(v => cpFuncs.numCompare[v.symbol] = v.compare)
+    orgCompareOptions.forEach(v => cpFuncs.orgCompare[v.symbol] = v.compare)
+    timeCompareOptions.forEach(v => cpFuncs.timeCompare[v.symbol] = v.compare)
+    timeArrCompareOptions.forEach(v => cpFuncs.timeArrCompare[v.symbol] = v.compare)
+    return cpFuncs
 }
 
 //校验数组A是否包含在B内
 function checkElementsExistInArray(A, B, key) {
-  for (let i = 0; i < A.length; i++) {
-    let found = false;
-    for (let j = 0; j < B.length; j++) {
-      if (key){
-        if (A[i][key] == B[j][key]) {
-          found = true;
-          break;
+    for (let i = 0; i < A.length; i++) {
+        let found = false;
+        for (let j = 0; j < B.length; j++) {
+            if (key) {
+                if (A[i][key] == B[j][key]) {
+                    found = true;
+                    break;
+                }
+            } else {
+                if (A[i] == B[j]) {
+                    found = true;
+                    break;
+                }
+            }
         }
-      }else {
-        if (A[i] == B[j]) {
-          found = true;
-          break;
+        if (!found) {
+            return false;
         }
-      }
-    }
-    if (!found) {
-      return false;
     }
-  }
-  return true;
+    return true;
 }
 
 export const CompareFuncs = getCompareFucs()
 
 export default {
-  strCompareOptions, strArrCompareOptions,
-  numCompareOptions, orgCompareOptions,
-  timeCompareOptions, timeArrCompareOptions
+    strCompareOptions, strArrCompareOptions,
+    numCompareOptions, orgCompareOptions,
+    timeCompareOptions, timeArrCompareOptions, customSelectCompareOptions
 }

src/views/common/form/components/compare/CustomSelectCompare.vue

+<template>
+  <component
+    :is="context.fieldType"
+    :readonly="false"
+    mode="PC"
+    v-model="context.compareVal[0]"
+    v-bind="context.config.props"
+  />
+</template>
+<script>
+let SelectInputApi = () => import("../../components/SelectInputApi.vue");
+let RadioGroup = () => import("../../components/RadioGroup.vue");
+export default {
+  name: "CustomSelectCompare",
+  components: { SelectInputApi, RadioGroup },
+  props: {
+    context: {
+      require: true,
+      type: Object,
+    },
+  },
+};
+</script>

src/views/common/form/config/subs/ConditionItem.vue

 <template>
-  <div>
+  <div style="display: flex">
     <el-select
       style="width: 150px; margin: 5px"
       @change="fieldChange"
@@ -15,42 +15,48 @@
       ></el-option>
     </el-select>
     <template v-if="_value.field">
-      <el-select
-        style="width: 110px; margin: 5px"
-        v-model="_value.compare"
-        placeholder="选择比较关系"
-      >
-        <el-option
-          :key="cp.symbol"
-          v-for="cp in condition.options"
-          :value="cp.symbol"
-          :label="cp.name"
+      <div style="display: flex">
+        <el-select
+          style="width: 110px; margin: 5px"
+          v-model="_value.compare"
+          placeholder="选择比较关系"
+        >
+          <el-option
+            :key="cp.symbol"
+            v-for="cp in condition.options"
+            :value="cp.symbol"
+            :label="cp.name"
+          />
+        </el-select>
+        <el-radio-group
+          style="margin: 5px"
+          v-model="_value.fixed"
+          @change="_value.compareVal = []"
+        >
+          <el-radio-button :label="true">固定</el-radio-button>
+          <el-radio-button :label="false">动态</el-radio-button>
+        </el-radio-group>
+        <component
+          v-if="_value.fixed"
+          style="margin: 5px"
+          :is="condition.name"
+          :context="_value"
         />
-      </el-select>
-      <el-radio-group v-model="_value.fixed" @change="_value.compareVal = []">
-        <el-radio-button :label="true">固定</el-radio-button>
-        <el-radio-button :label="false">动态</el-radio-button>
-      </el-radio-group>
-      <component
-        style="width: calc(100% - 410px); margin-left: 5px"
-        v-if="_value.fixed"
-        :is="condition.name"
-        :context="_value"
-      />
-      <el-select
-        v-else
-        style="width: 150px; margin: 5px"
-        value-key="id"
-        v-model="_value.compareVal[0]"
-        placeholder="选择表单字段"
-      >
-        <el-option
-          :key="item.id"
-          v-for="item in _formItems"
-          :value="item.id"
-          :label="item.title"
-        ></el-option>
-      </el-select>
+        <el-select
+          v-else
+          style="width: 150px; margin: 5px"
+          value-key="id"
+          v-model="_value.compareVal[0]"
+          placeholder="选择表单字段"
+        >
+          <el-option
+            :key="item.id"
+            v-for="item in _formItems"
+            :value="item.id"
+            :label="item.title"
+          ></el-option>
+        </el-select>
+      </div>
     </template>
   </div>
 </template>
@@ -62,6 +68,8 @@ export default {
   name: "ConditionItem",
   components: {
     StrCompare: () => import("../../components/compare/StrCompare.vue"),
+    CustomSelectCompare: () =>
+      import("../../components/compare/CustomSelectCompare.vue"),
     NumCompare: () => import("../../components/compare/NumCompare.vue"),
     OrgCompare: () => import("../../components/compare/OrgCompare.vue"),
     StrArrCompare: () => import("../../components/compare/StrArrCompare.vue"),
@@ -136,12 +144,17 @@ export default {
         case "TextInput":
         case "TextareaInput":
         case "SelectInput":
-        case "RadioGroup":
-        case "SelectInputApi":
           return {
             name: "strCompare",
             options: compareOptions.strCompareOptions,
           };
+
+        case "RadioGroup":
+        case "SelectInputApi":
+          return {
+            name: "customSelectCompare",
+            options: compareOptions.customSelectCompareOptions,
+          };
         case "MultipleSelect":
           return {
             name: "strArrCompare",
@@ -178,6 +191,9 @@ export default {
       this._value.compare = null;
       this._value.compareVal = [];
       this._value.fieldType = this.formItemMap.get(this._value.field).name;
+      this._value.config = this._formItems.find((item) => {
+        return this._value.field == item.id;
+      });
     },
   },
 };