@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnSmartForm/index.vue

@@ -0,0 +1,1201 @@
+<!--Created by xinba on 2024/10/30.-->
+<!--
+BnSmartForm组件
+-->
+<template>
+  <div class="BnSmartForm">
+    <chooseAssocTable ref="chooseAssocTable" :componentList="componentList" :postFunc="postFunc"
+                      :extendPost="extendPost" @setChildrenForm="setChildrenForm"></chooseAssocTable>
+    <chooseIPaasData ref="chooseIPaasData" :componentList="componentList" :postFunc="postFunc"
+                     :extendPost="extendPost" @setChildrenForm="setChildrenForm"></chooseIPaasData>
+    <choosePackage v-if="dataBack && dataBack.order" ref="choosePackage" :orderList="orderList"
+                   @checkedPackage="checkedPackage" :componentList="componentList" :dataBack="dataBack"></choosePackage>
+    <chooseChildOrder v-if="dataBack" ref="chooseChildOrder" :childOrders="childOrders"
+                      @setChildrenForm="setChildrenForm" :componentList="componentList"
+                      :dataBack="dataBack"></chooseChildOrder>
+    <div class="BnSmartForm-head" v-if="loading">
+      <el-progress :percentage="70" :indeterminate="true" :show-text="false" striped/>
+    </div>
+    <div class="BnSmartForm-body">
+      <!--      <div class="BnSmartForm-elf-tip" @click="showElf=true"-->
+      <!--           :class="{'BnSmartForm-elf-tip-show':!showElf&&formLogs.length>0}">-->
+      <!--        <img src="https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_a3e8db53df86fa2143e8d5238fc5dac0.png" alt="" title="hi~~,点击唤起建单助手">-->
+      <!--      </div>-->
+      <el-scrollbar ref="formScroll" height="100%" style="background: #fff">
+        <template v-for="(column, j) in componentList">
+          <div class="BnSmartForm-body-item" :class="column.className||''" v-if="isShow(column)" :key="j"
+               :id="'col_'+column.columnCode">
+            <component :is="componentView(column)" :column="column" :postFunc="postFunc" :taskId="id"
+                       :extraInfo="initExtraInfo" :defaultLink="defaultLink" :componentList="componentList"
+                       :dataBack="dataBack" :disabled="isDisabled(column)" @operate="operate" @onChange="comChange"
+                       @onInput="comInput" @blur="comBlur"/>
+          </div>
+        </template>
+      </el-scrollbar>
+    </div>
+    <!--班牛智能工单助手，精灵-->
+    <div class="BnSmartForm-elf" v-if="showElf">
+      <BnSmartElf :logs="formLogs" @close="showElf = false"></BnSmartElf>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  checkChildrenFormValue,
+  FORM_TYPES,
+  isValueEqual,
+  FORM_EVENT,
+  initFormData,
+  initDefaultLinkVal, initAccTableSearchVal,
+  toMappingValue, getTriggerCode, getEmptyVal
+} from "./BnSmartFormUtil";
+import {defineAsyncComponent} from "vue";
+import {cloneDeep, isEmpty, debounce} from "lodash";
+import BnSmartElf from "./BnSmartElf/index.vue";
+import choosePackage from "./choosePackage/choosePackage.vue";
+import chooseChildOrder from "./chooseChildOrder/chooseChildOrder.vue";
+import chooseAssocTable from "./chooseAssocTable/chooseAssocTable.vue";
+import {psychicComponentGetIds} from "./BnSmartFormPsychic.js";
+
+const componentMap = {
+  stringForm: defineAsyncComponent(() => import('./stringForm/index.vue')),
+  numberForm: defineAsyncComponent(() => import('./numberForm/index.vue')),
+  selectForm: defineAsyncComponent(() => import('./selectForm/index.vue')),
+  radioForm: defineAsyncComponent(() => import('./radioForm/index.vue')),
+  checkboxForm: defineAsyncComponent(() => import('./checkboxForm/index.vue')),
+  dateForm: defineAsyncComponent(() => import('./dateForm/index.vue')),
+  dateDualForm: defineAsyncComponent(() => import('./dateDualForm/index.vue')),
+  fileForm: defineAsyncComponent(() => import('./fileForm/index.vue')),
+  childrenForm: defineAsyncComponent(() => import('./childrenForm/index.vue')),
+  addressForm: defineAsyncComponent(() => import('./addressForm/index.vue')),
+  receiveForm: defineAsyncComponent(() => import('./receiveForm/index.vue')),
+  relationForm: defineAsyncComponent(() => import('./relationForm/index.vue')),
+  scoreForm: defineAsyncComponent(() => import('./scoreForm/index.vue')),
+};
+export default {
+  name: "BnSmartForm",
+  components: {
+    BnSmartElf, choosePackage, chooseChildOrder, chooseAssocTable,
+    chooseIPaasData: defineAsyncComponent(() => import('./chooseIPaasData/chooseIPaasData.vue'))
+  },
+  props: {
+    // 表单id 涉及编辑表单
+    id: [String, Number],
+    // 扩展参数
+    extendPost: Object,
+    // 扩展信息  isAutoAssign：自动分配, isCheckRepeat：重复工单是否查看详情
+    extraInfo: Object,
+    // 组件列表
+    components: Array,
+    //编辑类型  新建/编辑/复制copy
+    editType: String,
+    // 接口请求外部转发
+    postFunc: Function,
+    // 数据回填规则：{key:主键组件code，order：子表单组件code，orderKey：子表单主键code}
+    dataBack: Object
+  },
+  data() {
+    return {
+      // 是否展示精灵助手
+      showElf: false,
+      // 触发事件查询时显示进度条
+      loading: false,
+      // 日志：记录用户操作过程中表单发生的变化
+      formLogs: [],
+      // 订单列表、包裹列表
+      orderList: [],
+      // 子订单列表
+      childOrders: [],
+      // 组件显隐规则列表
+      psychicRules: [],
+      // 被组件显隐隐藏的组件
+      hiddenCodes: [],
+      // 会触发组件显隐的组件
+      psychicConditionCodes: [],
+      // 会触发提交校验的组件id
+      checkedConditionId: [],
+      // 会触发关联子表单，关联筛选的组件Code
+      assocTableSearchCodes: [],
+      // 触发关联子表单筛选后，需要填充的子表单的组件id
+      assocTableSearchColumnId: [],
+      // 默认值关联规则
+      defaultLink: cloneDeep(FORM_EVENT.defaultLink),
+      // 组件映射规则
+      columnMapping: cloneDeep(FORM_EVENT.columnMapping),
+      // 级联组件关联组件查询选项
+      relationColumns: cloneDeep(FORM_EVENT.relationColumns),
+      // 是否有组件开启函数表达式
+      hasExprExec: false,
+      // 后置事件触发每触发一次记录一次组件code，当后续触发时校验code是否在记录中，如果在就是有死循环，当立即跳出
+      afterEventCodes: []
+    }
+  },
+  created() {
+    this.init();
+    this._elfKeyHandler = (e) => {
+      if (e.ctrlKey && e.shiftKey && e.code === 'KeyB') {
+        e.preventDefault();
+        this.showElf = true;
+      }
+    };
+    document.addEventListener('keydown', this._elfKeyHandler);
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this._elfKeyHandler);
+  },
+  methods: {
+    /**
+     * 初始化表单数据、初始话表单规则
+     * */
+    init() {
+      // 初始化表单数据，以及梳理部分高级功能的规则
+      let {defaultLink, columnMapping, hasExprExec, relationColumns} = initFormData(this.componentList);
+      // 默认值关联能力
+      this.defaultLink = cloneDeep(defaultLink)
+      // 组件映射
+      this.columnMapping = cloneDeep(columnMapping)
+      // 级联组件关联组件查询选项
+      this.relationColumns = cloneDeep(relationColumns)
+      // 是否有组件配置了函数表达式
+      this.hasExprExec = hasExprExec
+      if (this.hasExprExec && !this.id) {
+        this.exprExecCalc(null, '新建初始化')
+      }
+      // 获取组件显隐规则
+      this.getPsychicRules();
+      // 获取关联子表单，筛选条件规则
+      this.getAssocTableRules();
+      // 获取提交校验规则
+      this.getCheckedRules();
+    },
+    /**
+     * 获取组件显隐规则
+     * */
+    getPsychicRules() {
+      this.psychicRules = [];
+      this.hiddenCodes = [];
+      this.psychicConditionCodes = [];
+      this.postFunc('/v2/columnRule/getColumnRule', {...this.extendPost, type: 2, dataFormatFlag: true}).then(res => {
+        if (!res.code && res.data.columnRuleList) {
+          this.psychicRules = res.data.columnRuleList;
+          let {conditionIds, hiddenIds} = psychicComponentGetIds(this.componentList, this.psychicRules, this.id);
+          this.hiddenCodes = hiddenIds;
+          this.psychicConditionCodes = conditionIds;
+        }
+      })
+    },
+    /**
+     * 获取组件显隐规则
+     * */
+    getAssocTableRules() {
+      this.assocTableSearchCodes = []
+      this.assocTableSearchColumnId = []
+      this.postFunc('/v2/columnRule/getColumnRule', {...this.extendPost, type: 13, dataFormatFlag: true}).then(res => {
+        if (!res.code && res.data.columnRuleList) {
+          res.data.columnRuleList.forEach(i => {
+            if (i.columnRules) {
+              this.assocTableSearchColumnId.push(i.ruleSense)
+              i.columnRules.forEach(c => {
+                if (c.toColumnType == 1) {
+                  this.assocTableSearchCodes.push(c.value.columnCode)
+                  if (c.value.parentCode) {
+                    this.assocTableSearchCodes.push(c.value.parentCode)
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+    },
+    /**
+     * 获取提交校验规则
+     * */
+    getCheckedRules() {
+      this.checkedConditionId = [];
+      this.postFunc(`/v2/columnRule/getSubmitCheckRule/${this.extendPost.appId}/${this.extendPost.projectId}`, null, 'get').then(res => {
+        if (!res.code && res.data && res.data.status == 1) {
+          let codeList = res.data.rules.reduce((codes, item) => {
+            if (item.type == 19 && (
+                // 新建时校验
+                (item.columnRules.senses.includes(0) && !this.id) ||
+                // 编辑时校验
+                (item.columnRules.senses.includes(1) && this.id)
+            )) {
+              let rules = item.columnRules?.columnRules || []
+              codes = [...codes, ...rules.map(i => i.parentId ? i.parentId : i.id)]
+            }
+            return codes
+          }, [])
+          this.checkedConditionId = codeList
+        }
+      })
+    },
+    /**
+     * 生成整张表单的valueData，供保存使用
+     * @param {Object} components: 组件data
+     *
+     * */
+    getFormContent() {
+      let response = {
+        contents: [],
+      };
+      try {
+        for (let i in this.componentList) {
+          let component = cloneDeep(this.componentList[i]);
+          let content = {
+            columnCode: component.columnCode,
+          };
+          switch (component.behaviorType) {
+            case 1://文本
+            case 2://数值
+            case 9://评分
+            case 7://日期
+            case 11://富文本
+            {
+              content.value = component.value;
+              break;
+            }
+            case 3://单选
+            case 4://下拉
+            case 5://多选
+            case 6://单选联动
+            case 20://多选联动
+            case 8://区间
+            case 10://附件
+            case 12://标签
+            case 13://子表单
+            case 14://地址
+            case 15://收寄信息
+            {
+              content.value = component.value ? JSON.stringify(component.value) : '';
+              break;
+            }
+          }
+          // 没有权限的组件，不进行处理
+          if (!this.isShow(this.componentList[i])) {
+            // 组件显隐隐藏的也要打上标记，传进去
+            if (this.hiddenCodes.includes(component.columnCode)) {
+              content.hide = true;
+            } else {
+              continue;
+            }
+          }
+          response.contents.push(content)
+        }
+      } catch (e) {
+        console.log("getFormContentErr:" + e)
+      }
+      return response;
+    },
+    /**
+     * 表单校验，根据组件规则校验表单填写的正确性
+     * */
+    checkFormContent() {
+      if (this.loading) {
+        this.$message.warning('还有数据没有加载完毕，请稍后再保存');
+        return {checked: false}
+      }
+      let check = {
+        column: null,
+        checked: true
+      };
+      for (let i in this.componentList) {
+        if (!this.isShow(this.componentList[i])) {
+          continue;
+        }
+        let component = {...this.componentList[i]};
+        let content = {
+          columnCode: component.columnCode,
+        };
+        switch (component.behaviorType) {
+          case 1://文本
+          case 2://数值
+          {
+            //  文本校验是否必填
+            if (component.extraInfo.valueEmptyCheck == 1 && component.behaviorType == 1 && isEmpty(component.value)) {
+              this.componentList[i].error = component.name + "的值不能为空";
+            }
+            //  数值校验是否必填
+            if (component.extraInfo.valueEmptyCheck == 1 && component.behaviorType == 2 && (component.value === undefined || component.value === null || component.value === '')) {
+              this.componentList[i].error = component.name + "的值不能为空";
+            }
+            // 正则校验
+            if (component.extraInfo.regular) {
+              //获取校验规则，转化为正则表达式
+              let rule = new RegExp(component.extraInfo.regular);
+              if (!rule.test(component.value)) {
+                this.componentList[i].error = component.extraInfo.paraExplain || '请输入符合要求的' + component.name;
+              }
+            }
+            break;
+          }
+          case 3://单选
+          case 4://下拉
+          case 5://多选
+          case 6://联动
+          case 20://多选联动
+          case 8://区间
+          case 10://附件
+          case 12://标签
+          case 9://评分
+          case 7://日期
+          case 11://富文本
+          {
+            //  校验是否必填
+            if (component.extraInfo.valueEmptyCheck == 1 && isEmpty(component.value)) {
+              this.componentList[i].error = component.name + "的值不能为空";
+            }
+            break;
+          }
+          case 13://子表单
+          {
+            if (component.extraInfo.valueEmptyCheck == 1) {
+              if (isEmpty(component.value)) {
+                this.componentList[i].error = component.name + '至少要有一条内容';
+              } else {
+                let msg = checkChildrenFormValue(component, this.id)
+                if (msg) {
+                  this.componentList[i].error = msg;
+                }
+              }
+            }
+            break;
+          }
+          case 14://地址
+          case 15://收寄信息
+          {
+            if (component.extraInfo.valueEmptyCheck == 1) {
+              for (let key in component.value) {
+                if (isEmpty(component.value[key])) {
+                  this.componentList[i].error = `请输入完整的${component.name}`;
+                  break;
+                }
+              }
+            }
+            break;
+          }
+        }
+        if (this.componentList[i].error) {
+          check.column = this.componentList[i];
+          check.checked = false;
+          this.getHere(content, true);
+          break;
+        }
+      }
+      return check;
+    },
+    /**
+     * 锚点滚动条滚动后，组件列表跟随滚动到指定位置
+     * */
+    getHere(item) {
+      const targetElement = document.getElementById("col_" + item.columnCode);
+      if (targetElement && this.$refs.formScroll) {
+        // 使用 el-scrollbar 的 scrollTo 方法
+        this.$refs.formScroll.scrollTo({top: targetElement.offsetTop, behavior: 'smooth'});
+      }
+    },
+    /**
+     * 根据权限、组件显隐判断是否限制组件
+     * */
+    isShow(column) {
+      let flag = true && !this.hiddenCodes.includes(column.columnCode);
+      // 处理新建时可见、编辑时可见
+      if (!this.id && column.extraInfo.isAddable != 1) {
+        flag = false;
+      } else if (this.id && column.extraInfo.isEditable != 1) {
+        flag = false;
+      }
+      return flag;
+    },
+    /**
+     * 根据权限判断是否禁用组件
+     * */
+    isDisabled(column) {
+      let flag = false;
+      // 处理新建时禁用、编辑时禁用
+      if (!this.id && column.extraInfo.valueAddable == 1) {
+        flag = true;
+      } else if (this.id && column.extraInfo.valueEditable == 1) {
+        flag = true;
+      }
+      return flag;
+    },
+    /**
+     * 判断返回是哪一类型的组件
+     * */
+    componentView(column) {
+      //评价情感特殊处理 下拉显示单选
+      if (column.behaviorType == 4 && ['rate_polarity', 'bn_rate_polarity', 'bn_addition_polarity'].includes(column.columnCode)) {
+        return componentMap[FORM_TYPES[3]]
+      }
+      // 多选下拉
+      if (column.behaviorType == 5 && column.extraInfo?.valueType == 'select') {
+        return componentMap[FORM_TYPES[4]]
+      }
+      return componentMap[FORM_TYPES[column.behaviorType]] || null;
+    },
+    /**
+     * 组件值发生改变，在数据确定变化结束才会返回这个事件。需要注意input事件也会触发change，只不过做了防抖
+     * @param {Object}  column :组件信息
+     * @param {Object}  params :子表单子组件信息
+     * */
+    comChange(column, params) {
+      this.afterEventCodes = [];
+      /**
+       * 默认值关联事件，会根据触发组件修改对应组件的值，值变动
+       * */
+      if (this.defaultLink.column.includes(column.columnCode) && ![1, 2].includes(column.behaviorType)) {
+        // 根据变化的组件，给整张表单赋值
+        this.defaultLinkEvent(column, '值修改')
+      }
+      /**
+       * 组件映射事件，根据下拉单选值变化映射其他单选下拉组件选项，值变动
+       * */
+      if (this.columnMapping.column.includes(column.columnCode) && [3, 4, 6].includes(column.behaviorType)) {
+        // 根据变化的组件，给整张表单赋值
+        this.columnMappingEvent(column, '值修改')
+      }
+      /**
+       * 关联其他表数据的子表单，如果设置了筛选条件填充值，根据条件组件值变动触发拉取，值变动
+       * */
+      if (this.assocTableSearchCodes.includes(column.columnCode) && !params ||
+          (params && params.childColumn && this.assocTableSearchCodes.includes(params.childColumn.columnCode))
+      ) {
+        // 根据变化的组件，给整张表单赋值
+        this.assocTableSearchEvent(column, '值修改')
+      }
+      /**
+       * 主键触发电商数据拉取，文本、下拉都可能触发电商拉取，对整个表单都会值变更
+       * */
+      if (column.extraInfo.searchKey == 2 && column.value) {
+        this.queryOrder(column, '值修改');
+      }
+      /**
+       * 触发函数表达式，值变动
+       * */
+      if (this.hasExprExec) {
+        this.exprExecCalc(column, '值修改');
+      }
+      // 级联组件关联组件查询选项
+      if (this.relationColumns[column.columnCode]) {
+        this.changeRelationOptions(column, '值修改')
+      }
+      /**
+       * 重复值提醒，不会改变值
+       * */
+      if (column.extraInfo.isShowWarning == 1 && column.value) {
+        this.checkRepeat(column, '值修改');
+      }
+      /**
+       * 组件显隐，不会改变值
+       * */
+      if (this.psychicConditionCodes.includes(column.columnCode)) {
+        this.getHiddenCodes(column, '值修改');
+      }
+      /**
+       * 提交校验，不会改变值
+       * */
+      if (this.checkedConditionId.includes(column.id)) {
+        this.getCheckedCodes(column, '值修改');
+      }
+      this.$emit('change', column, params)
+    },
+    /**
+     * 组件值发生改变，在数据确定变化结束才会返回这个事件。需要注意input事件
+     * @param {Object}  column :组件信息
+     * @param {Object}  params :子表单子组件信息
+     * */
+    comInput(column, params) {
+      this.afterEventCodes = [];
+      /**
+       * 组件change是否触发默认值关联事件，值变动
+       * */
+      if (this.defaultLink.column.includes(column.columnCode)) {
+        // 根据变化的组件，给整张表单赋值
+        this.defaultLinkEvent(column, '值修改')
+      }
+      /**
+       * 触发函数表达式，值变动
+       * */
+      if (this.hasExprExec) {
+        this.exprExecCalc(column, '值修改');
+      }
+      this.$emit('input', column, params)
+    },
+    /**
+     * 组件输入框失去焦点
+     * @param {Object}  column :组件信息
+     * @param {Object}  params :子表单子组件等更多信息
+     * */
+    comBlur(column, params) {
+      this.afterEventCodes = [];
+      // 判断是否是需要获取电商数据
+      if (column.extraInfo.searchKey == 2 && column.value) {
+        this.queryOrder(column, '失去焦点');
+      }
+      // 触发重复值提醒
+      if (column.extraInfo.isShowWarning == 1 && column.value) {
+        this.checkRepeat(column, '失去焦点');
+      }
+      // 提交校验
+      if (this.checkedConditionId.includes(column.id)) {
+        this.getCheckedCodes(column, '失去焦点');
+      }
+      this.$emit('blur', column, params)
+    },
+    /**
+     * 后置触发表单事件，在辅助回填、组件映射三个事件触发之后，再次触发事件
+     * 后置事件仅支持：默认值映射、组件映射、组件显隐
+     * */
+    afterEventForm(column, type) {
+      if (this.afterEventCodes.includes(column.columnCode + type)) {
+        this.insetLog({content: `【${column.name}】已经触发过-${type},不再重复执行`})
+        // 有组件重复触发，跳出事件链路
+        this.afterEventCodes = [];
+        return;
+      } else {
+        this.afterEventCodes.push(column.columnCode + type)
+      }
+      /**
+       * 默认值关联事件，会根据触发组件修改对应组件的值，值变动
+       * */
+      if (this.defaultLink.column.includes(column.columnCode) && ![1, 2].includes(column.behaviorType)) {
+        // 根据变化的组件，给整张表单赋值
+        this.defaultLinkEvent(column, type)
+      }
+      /**
+       * 关联其他表数据的子表单，如果设置了筛选条件填充值，根据条件组件值变动触发拉取，值变动
+       * */
+      if (this.assocTableSearchCodes.includes(column.columnCode)) {
+        // 根据变化的组件，给整张表单赋值
+        this.assocTableSearchEvent(column, type)
+      }
+      /**
+       * 组件映射事件，根据下拉单选值变化映射其他单选下拉组件选项，值变动
+       * */
+      if (this.columnMapping.column.includes(column.columnCode) && [3, 4, 6].includes(column.behaviorType)) {
+        // 根据变化的组件，给整张表单赋值
+        this.columnMappingEvent(column, type)
+      }
+      /**
+       * 触发函数表达式，值变动
+       * */
+      if (this.hasExprExec) {
+        this.exprExecCalc(column, type);
+      }
+      /**
+       * 组件显隐，不会改变值
+       * */
+      if (this.psychicConditionCodes.includes(column.columnCode)) {
+        this.getHiddenCodes(column, type);
+      }
+    },
+    /**
+     * 表单操作
+     * @param column {Object}
+     * @param type {String}
+     * */
+    operate(column, type) {
+      switch (type) {
+          // 选择包裹
+        case 'choosePackage': {
+          this.$refs.choosePackage.open(column)
+          break;
+        }
+          // 选择ERP子单：多包裹情况下选择完包裹，合并后产生子单列表
+        case 'chooseChildOrder': {
+          this.$refs.chooseChildOrder.open(column)
+          break;
+        }
+          // 选择关联表
+        case 'chooseAssocTable': {
+          this.$refs.chooseAssocTable.open(column)
+          break;
+        }
+          // IPaas关联接口查询
+        case 'chooseIPaasData': {
+          this.$refs.chooseIPaasData.open(column, this.getFormContent().contents)
+          break;
+        }
+          // 选择相同工单
+        case 'chooseRepeat': {
+          let postData = {
+            tableCode: this.extendPost.tableCode,
+            pageSize: 200,
+            pageNum: 1,
+            conditions: [
+              {
+                behaviorType: column.behaviorType,
+                columnCode: column.columnCode,
+                searchType: '1',
+                value: ['string', 'number', 'boolean'].includes(typeof column.value) ? column.value : JSON.stringify(column.value)
+              }
+            ]
+          };
+          this.$emit('operate', column, type, postData, this.id);
+          break;
+        }
+      }
+    },
+    /**
+     * 包裹确认选中
+     * orderData 合并后的订单信息
+     * childOrders 合并后的子订单列表
+     * */
+    checkedPackage(orderData, childOrders) {
+      this.childOrders = cloneDeep(childOrders)
+      let content = `你选择包裹`
+      // 通过订单号给表单赋值
+      let setColum = this.setColumnsValue(orderData, 2)
+      if (setColum.length > 0) {
+        content += "后，修改了" + setColum.join(',') + "的值"
+      } else {
+        content += "，但没有获取到需要修改的组件。"
+      }
+      this.insetLog({content})
+    },
+    /**
+     * 选择子订单
+     * @param selectData {Array}
+     * @param type {String}
+     * @param columnCode {String}
+     * */
+    setChildrenForm(selectData, type, columnCode) {
+      let name = '';
+      let values = selectData;
+      for (let i in this.componentList) {
+        let item = this.componentList[i];
+        if (item.columnCode == columnCode) {
+          name = item.name;
+          if (type == 'add') {
+            values = [...item.value, ...values]
+          }
+          this.componentList[i].error = ''
+          this.componentList[i].value = cloneDeep(values)
+          this.afterEventForm(this.componentList[i], '子表单填充')
+          break;
+        }
+      }
+      let content = `你选中${selectData.length}条数据，修改了${name}的值`
+      this.insetLog({content})
+    },
+    /**
+     * 防抖触发组件显隐
+     */
+    getHiddenCodes: debounce(function (column, type) {
+      let content = `【${column.name}】${type}触发组件显隐`
+      let {hiddenIds} = psychicComponentGetIds(this.componentList, this.psychicRules, this.id);
+      this.hiddenCodes = hiddenIds;
+      if (this.hiddenCodes.length > 0) {
+        content += "，共隐藏" + this.hiddenCodes.length + "个组件"
+      } else {
+        content += "，没有要隐藏的组件。"
+      }
+      this.insetLog({content})
+    }, 300),
+    /**
+     * 防抖触发提交校验
+     */
+    getCheckedCodes: debounce(function (column, type) {
+      let content = `【${column.name}】${type}触发提交校验`
+      let postData = {
+        tableCode: this.extendPost.tableCode,
+        contents: this.getFormContent().contents
+      }
+      if (this.id) {
+        postData.id = this.id
+      }
+      this.loading = true;
+      this.postFunc('/biztable/content/submitCheck', postData).then(res => {
+        this.loading = false;
+        if (!res.code && res.data) {
+          content += `：${res.data.info}`
+          this.$message.warning(content);
+        }
+        this.insetLog({content})
+      })
+    }, 400),
+    /**
+     * 防抖处理的queryOrder方法
+     */
+    queryOrder: debounce(function (column, type) {
+      let content = `【${column.name}】${type}触发数据拉取`
+      let postData = {
+        ...this.extendPost,
+        triggerField: column.columnCode,
+        [column.columnCode]: column.value,
+      };
+      try {
+        // 组装一些固定数据
+        this.componentList.forEach(i => {
+          if (i.outDataSourceInfo[0]?.field == 'tid') {
+            postData.tid = i.value;
+          } else if (i.insideDataSourceInfo?.type == 'seller') {
+            postData[i.columnCode] = i.value.code;
+          }
+        })
+      } catch (e) {
+        console.log(e)
+      }
+      this.loading = true;
+      this.orderList = [];
+      this.postFunc('/v2/ods/getOdsInfoV3', postData).then(res => {
+        this.loading = false;
+        if (!res.code && res.data?.length > 0) {
+          this.orderList = res.data;
+          // 如果设置了多包裹主键，那就需要用这个组件的配置来判断是否需要回填。否则就用触发拉取的主键来判断是否回填
+          let columnInfo = this.dataBack?.key ? this.componentList.filter(i => i.columnCode == this.dataBack.key)[0] : column
+          // 组装需要进行回填的数据，默认取第一个（如果是订单拉电商数据，res.data最多只会有一条。包裹可能有多条）
+          let setOrder = res.data[0];
+          //根据 columnInfo.extraInfo.multiplePackagesType 判断回填逻辑
+          //1:回填第一个   2:回填全部（一般是erp，这时候要走一下 choosePackage 的 mergeOrders 包裹合并方法）  3:不回填  没值或没设置就默认回填第一个
+          if (columnInfo.extraInfo.multiplePackagesType == 3) {
+            content += "，根据组件设置默认不进行回填，请您手动选择。"
+            this.insetLog({content})
+            return;
+          } else if (columnInfo.extraInfo.multiplePackagesType == 2) {
+            // 合并包裹前必须先梳理包裹组件，从这里拿合并配置
+            this.$refs.choosePackage.initPackageColumns(setOrder)
+            setOrder = this.$refs.choosePackage.mergeOrders(res.data)
+          }
+          // 根据主键取包裹子订单列表
+          if (this.dataBack && this.dataBack.order) {
+            this.childOrders = setOrder[this.dataBack.order] || []
+          }
+          // 通过订单号给表单赋值
+          let setColum = this.setColumnsValue(setOrder, 1)
+          if (setColum.length > 0) {
+            content += "后，修改了" + setColum.join(',') + "的值"
+          } else {
+            content += "，但没有获取到需要修改的组件。"
+          }
+          this.insetLog({content})
+          this.$emit('queryOrder', res)
+        } else if (res.code == 1) {
+          content += `,未拉取到数据`
+          this.insetLog({content})
+        } else {
+          this.$message.warning('未拉取到数据');
+          content += `失败：${res.msg}`
+          this.insetLog({content})
+        }
+      })
+    }, 400),
+    /**
+     * 关联其他表数据的子表单，设置筛选条件触发数据拉取填充
+     */
+    assocTableSearchEvent: debounce(function (column, type) {
+      let content = `【${column.name}】${type}触发子表单关联筛选条件`
+      let contents = this.getFormContent().contents;
+      let postData = {
+        tableCode: this.extendPost.tableCode,
+        conditions: '{}',
+        taskContents: JSON.stringify(contents.filter(i => this.assocTableSearchCodes.includes(i.columnCode)))
+      };
+      this.loading = true;
+      this.postFunc('/biztable/content/relation/query', postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          if (res.data.inside) {
+            let data = res.data.inside;
+            let set = []
+            let clear = []
+            this.componentList.forEach(item => {
+              if (item.behaviorType == 13 && this.assocTableSearchColumnId.includes(item.id)) {
+                if (data[item.columnCode]) {
+                  // 值为1，强制填充,或者子表单的value为空才填充
+                  if (item.extraInfo.dataForceFill || item.value?.length == 0) {
+                    item.value = initAccTableSearchVal(item, data[item.columnCode]);
+                    this.afterEventForm(item, '关联筛选赋值')
+                    set.push(item.name)
+                  }
+                } else {
+                  if (item.extraInfo.dataForceClear || item.value.length > 0) {
+                    item.value = [];
+                    clear.push(item.name)
+                  }
+                }
+              }
+            })
+            if (set.length > 0) {
+              content += `后，修改了 ${set.join(',')} 的值`
+            }
+            if (clear.length > 0) {
+              content += `，清空了 ${clear.join(',')} 的值`
+            }
+          } else {
+            content += `,未拉取到数据`
+          }
+          this.insetLog({content})
+        } else if (res.code == 1) {
+          content += `,未拉取到数据`
+          this.insetLog({content})
+        } else {
+          this.$message.warning(res.msg);
+          content += `,失败：${res.msg}`
+          this.insetLog({content})
+        }
+      })
+    }, 400),
+    /**
+     * 防抖处理的检查重复
+     */
+    checkRepeat: debounce(function (column, type) {
+      let content = `【${column.name}】${type}触发重复值校验`
+      let postData = {
+        tableCode: this.extendPost.tableCode,
+        pageSize: 200,
+        pageNum: 1,
+        conditions: [
+          {
+            behaviorType: column.behaviorType,
+            columnCode: column.columnCode,
+            searchType: '1',
+            value: ['string', 'number', 'boolean'].includes(typeof column.value) ? column.value : JSON.stringify(column.value)
+          }
+        ]
+      };
+      this.loading = true;
+      this.postFunc('/biztable/content/query', postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          let total = parseInt(res.data.total);
+          if (total > 0 && this.id) {
+            // 编辑的时候去除当前编辑的任务id
+            let findId = res.data.results.find(i => i.view.id == this.id);
+            total = findId ? total - 1 : total;
+          }
+          if (total > 0) {
+            content += "，当前工作表查到" + total + "条相同的任务。"
+            column.warning = `当前工作表内容有${total}条「${column.name}」相同的任务。`;
+          } else {
+            content += "，当前工作没有查到相同的任务。"
+          }
+          this.insetLog({content})
+        } else if (res.code == 1) {
+          content += `,未拉取到数据`
+          this.insetLog({content})
+        } else {
+          this.$message.warning(res.msg);
+          content += `,失败：${res.msg}`
+          this.insetLog({content})
+        }
+      })
+    }, 400),
+    /**
+     * 防抖处理的函数表达式计算
+     */
+    exprExecCalc: debounce(function (column, type) {
+      let content = column ? `【${column.name}】${type}触发函数计算` : `${type}触发函数计算`
+      let postData = {
+        ...this.extendPost,
+        ...this.getFormContent()
+      };
+      this.loading = true;
+      this.postFunc('/biztable/content/exprCalculation', postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          let calcColumn = []
+          let data = res.data?.length > 0 ? res.data : []
+          data.forEach(item => {
+            for (let i in this.componentList) {
+              if (this.componentList[i].columnCode == item.columnCode && !isValueEqual(this.componentList[i].value, item.value, this.componentList[i].behaviorType)) {
+                calcColumn.push(this.componentList[i].name)
+                this.componentList[i].value = item.value || getEmptyVal(this.componentList[i].value);
+                this.afterEventForm(this.componentList[i], '函数表达式计算')
+                break;
+              }
+            }
+          })
+          if (calcColumn.length > 0) {
+            content += "后，修改了" + calcColumn.join(',') + "的值";
+          } else {
+            content += "，但没有获取到需要修改的组件。"
+          }
+          this.insetLog({content})
+        } else if (res.code == 1) {
+          content += `,未拉取到数据`
+          this.insetLog({content})
+        } else {
+          this.$message.warning(res.msg);
+          content += `,失败：${res.msg}`
+          this.insetLog({content})
+        }
+      })
+    }, 400),
+    /**
+     * 选项型的组件，通过其他组件的value变化，拉取新的选项列表。关联组件过滤选项列表
+     */
+    changeRelationOptions: debounce(function (column, type) {
+      let content = `【${column.name}】${type}触发级联选项查询`
+      this.insetLog({content})
+      for (let i in this.componentList) {
+        if (this.relationColumns[column.columnCode].includes(this.componentList[i].columnCode)) {
+          try {
+            let extCondition = this.componentList[i].postData.extCondition ? JSON.parse(this.componentList[i].postData.extCondition) : {}
+            // 目前只会关联下拉，以后有其他类型再迭代
+            extCondition[column.columnCode] = column.value.code || column.value;
+            this.componentList[i].postData.extCondition = JSON.stringify(extCondition)
+            this.componentList[i].value = []
+          } catch (e) {
+            console.log(column)
+            console.log(this.componentList[i])
+            console.log('关联组件查询选项，extCondition组装失败')
+          }
+        }
+      }
+    }, 400),
+    /**
+     * 触发单选下拉组件选项映射事件处理
+     * @param {Object} column 触发事件的组件对象
+     * @param {String} type 触发事件的事件类型
+     * */
+    columnMappingEvent(column, type) {
+      try {
+        let content = `【${column.name}】${type}触发组件映射`
+        let setColum = []
+        let triggerCode = getTriggerCode(column);
+        this.componentList.forEach(item => {
+          if ([3, 4, 6].includes(item.behaviorType) &&
+              this.columnMapping.setColumn[column.columnCode][item.columnCode]) {
+            let mappings = this.columnMapping.setColumn[column.columnCode][item.columnCode];
+            let val = mappings.find(i => String(i.fromValue.code || i.fromValue.id) == String(triggerCode));
+            if (val) {
+              setColum.push(item.name)
+              item.value = toMappingValue(item, val.toValue);
+              this.afterEventForm(item, '组件映射')
+            }
+          }
+        })
+        if (setColum.length > 0) {
+          content += "后，修改了" + setColum.join(',') + "的值"
+        } else {
+          content += "，没有找到符合映射规则的组件"
+        }
+        this.insetLog({content})
+      } catch (e) {
+        console.log("columnMappingEventErr：" + e)
+      }
+    },
+    /**
+     * 触发单行文本默认值关联映射事件处理
+     * @param {Object} column 触发事件的组件对象
+     * @param {String} type 触发事件的事件类型
+     * @param {Object} params 是否是子表单，子表单将会返回params
+     * */
+    defaultLinkEvent(column, type) {
+      try {
+        let content = `【${column.name}】${type}触发默认值映射`
+        let setColum = []
+        this.componentList.forEach(item => {
+          // 单行文本，并且该单行文本有默认值关联规则，并且关联规则中的组件包含了目前change的组件id
+          if (item.behaviorType == 1 && this.defaultLink.setColumn[item.columnCode] && this.defaultLink.setColumn[item.columnCode].includes(`##${column.columnCode}`)) {
+            setColum.push(item.name)
+            item.value = initDefaultLinkVal(this.componentList, this.defaultLink.setColumn[item.columnCode]);
+          }
+          // 子表单，并且子表单的value是有值的，并且子表单内有子组件有默认值关联规则，并且默认值关联规则中的组件包含了目前change的组件id
+          if (item.behaviorType == 13 && item.value.length > 0 && this.defaultLink.setColumn[item.columnCode] && this.defaultLink.setColumn[item.columnCode].includes(column.columnCode)) {
+            item.value.forEach(val => {
+              // 子表单的value是多条数组结构，必须进行遍历，确保每一条数据都根据映射结果变化
+              for (let i in val) {
+                // 子表单的规则的key 是 父组件id。子组件id 拼接的，其他判断和正常组件一样
+                if (this.defaultLink.setColumn[`${item.columnCode}.${i}`] &&
+                    this.defaultLink.setColumn[`${item.columnCode}.${i}`].includes(`##${column.columnCode}`)) {
+                  setColum.push(item.name)
+                  val[i] = initDefaultLinkVal(this.componentList, this.defaultLink.setColumn[`${item.columnCode}.${i}`]);
+                }
+              }
+            })
+          }
+        })
+        content += "后，修改了" + setColum.join(',') + "的值"
+        this.insetLog({content})
+      } catch (e) {
+        console.log("defaultLinkEventErr：" + e)
+      }
+    },
+    /**
+     * 判断组件是否需要回填数据
+     * @param item 组件信息
+     * @param type 回填类型 1:第一次数据回填 2:选择包裹
+     * @returns {boolean} 是否需要回填
+     */
+    shouldFillData(item, type) {
+      // type == 1 第一次数据回填触发接口，所有组件都受是否回填设置的影响
+      // type == 2 选择包裹了，只有子表单受回填设置的影响
+      if (type !== 1 && (type !== 2 || item.behaviorType !== 13)) {
+        return true; // 不受回填设置影响的情况
+      }
+
+      const {multiplePackagesType} = item.extraInfo || {};
+
+      // 子表单的特殊逻辑
+      if (item.behaviorType === 13) {
+        // 不回填的情况
+        if (multiplePackagesType === 3) {
+          return false;
+        }
+        // 其他情况都回填（1:只回填第一条, 2:回填全部, 未设置:回填全部）
+        return true;
+      }
+
+      // 非子表单，只有回填或者不回填
+      // 没有设置multiplePackagesType或设置的不是3，都回填
+      return !multiplePackagesType || multiplePackagesType !== 3;
+    },
+    /**
+     * 获取回填后的新值
+     * @param item 组件信息
+     * @param data 数据源
+     * @param columnCode 列代码
+     * @returns 处理后的新值
+     */
+    getFillValue(item, data, columnCode) {
+      const {multiplePackagesType} = item.extraInfo || {};
+
+      // 子表单的特殊处理
+      if (item.behaviorType === 13) {
+        if (multiplePackagesType === 1) {
+          // 只回填第一条
+          return [data[columnCode][0]];
+        }
+        // 回填全部（包括未设置和设置为2的情况）
+        return data[columnCode];
+      }
+      // 处理店铺经过订单号拉取没有code的情况
+      else if (item.behaviorType === 4) {
+        if (!data[columnCode].code && data[columnCode].id) {
+          return {...data[columnCode], code: data[columnCode].id}
+        }
+      }
+      // 非子表单直接返回原值
+      return data[columnCode];
+    },
+    /**
+     * 【辅助回填专用】通过其他地方拉取到的数据，来给表单内的组件重新赋值
+     * @param data {columnCode:value,columnCode:value}
+     * @param type 1:只影响请求接口后默认第一次回填，这里要判断组件是否设置默认不回填，
+     * @param type 2:手动选择包裹，选择包裹后对子子商品的合并数据，是否要回填进行处理。这里就只处理子表单，不再处理其他类型的组件了
+     * extraInfo.multiplePackagesType 1:回填第一个（子表单）   2:回填全部（子表单）  3:不回填（全部组件）  没设置就全部回填
+     * 客户手动在弹框里选择拉取的数据时，不受这个配置影响，必须回填
+     * */
+    setColumnsValue(data, type) {
+      let setColum = []
+      this.componentList.forEach(item => {
+        if (data[item.columnCode]) {
+          // 判断是否需要回填
+          if (!this.shouldFillData(item, type)) {
+            return; // 跳过不回填的情况
+          }
+          // 获取回填后的新值
+          let newValue = this.getFillValue(item, data, item.columnCode);
+
+          // 比较新旧值，不相等才赋值
+          if (!isValueEqual(item.value, newValue, item.behaviorType)) {
+            item.value = cloneDeep(newValue)
+            // 触发后置事件
+            this.afterEventForm(item, '辅助回填');
+            setColum.push(`【${item.name}】`)
+          }
+        }
+      })
+      return setColum;
+    },
+    /**
+     * 记录日志
+     * */
+    insetLog({content}) {
+      const now = new Date();
+      const hours = now.getHours(); // 获取小时
+      const minutes = now.getMinutes(); // 获取分钟
+      const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+      this.formLogs.push({
+        time: formattedTime,
+        content: content,
+      })
+    }
+  },
+  computed: {
+    // 组件列表
+    componentList: {
+      get() {
+        return this.components;
+      },
+      set(val) {
+        this.$emit("update:components", val);
+      }
+    },
+    // 组装初始化扩展信息
+    initExtraInfo() {
+      const extraInfo = {
+        isAutoAssign: 0
+      }
+      return {...extraInfo, ...this.extraInfo}
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+@import "../font/iconfont.css";
+
+.BnSmartForm {
+  position: relative;
+  background: #fff;
+  padding-top: 8px;
+  width: 100%;
+  height: 100%;
+
+  &-head {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 8px;
+  }
+
+  &-body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &-item {
+      position: relative;
+      padding: 10px 20px;
+    }
+  }
+
+  &-elf {
+    position: absolute;
+    top: 0;
+    left: calc(100% + 10px);
+    background: #fff;
+    width: 340px;
+    height: calc(80%);
+    box-shadow: 0 0 12px rgba(0, 0, 0, .12);;
+    border-radius: 4px;
+    border: 1px solid #e4e7ed;
+    overflow: hidden;
+
+    &-tip {
+      position: absolute;
+      top: 60px;
+      right: 30px;
+      width: 50px;
+      cursor: pointer;
+
+      img {
+        width: 60px;
+        transform: rotate(40deg); /* 旋转 90 度 */
+        transform-origin: center; /* 设置旋转中心为图片中心 */
+      }
+
+      transition: right 0.5s ease-in-out;
+
+      &-show {
+        right: -20px;
+      }
+    }
+  }
+}
+</style>
+