@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnColumnConfig/component/childrenFormSetting/assocTableSearch.vue

@@ -0,0 +1,314 @@
+<template>
+  <el-dialog v-model="visible" title="设置数据筛选" top="20px" :close-on-click-modal="false" width="720"
+             :destroy-on-close="true" append-to-body>
+    <div class="assocTableSearch" v-loading="loading">
+      <div class="w-flex-between w-flex-center">
+        <div class="w-flex-center w-flex-column-gap4">
+          <div class="w-line-height20">设置筛选条件</div>
+          <div class="w-color-gray w-line-height20">
+            （满足以下所有筛选条件时，触发）
+          </div>
+        </div>
+        <div class="w-flex-center w-flex-column-gap10">
+          <el-button link type="primary" @click="addRule">
+            <span class="bnUIcon bnUIcon-add w-padding-right2 w-font14"></span>添加条件
+          </el-button>
+        </div>
+      </div>
+      <div class="w-margin-top10">
+        <template v-for="(item,index) in ruleData.columnRules" :key="index" class="w-margin-top10">
+          <BnCondition v-model="ruleData.columnRules[index]" :columnList="assocTableColumns"
+                       :option-props="{id: 'columnCode',name: 'name',parentCode: 'parentCode',
+                       valueType: 'toColumnType',subType: 'subType',searchType: 'searchType',value: 'value'}"
+                       :other-column-list="otherColumns" allowDel :postFunc="postFunc" allowSelectColumn
+                       @del="ruleData.columnRules.splice(index,1)"/>
+        </template>
+        <div class="w-empty" v-if="ruleData.columnRules.length == 0">
+          请设置筛选条件
+        </div>
+      </div>
+      <div class="w-flex-center w-flex-column-gap4 w-margin-top10">
+        <div class="w-line-height20">筛选结果</div>
+        <div class="w-color-gray w-line-height20">
+          （当筛选出来数据后，如何处理）
+        </div>
+      </div>
+      <div class="w-flex-center w-flex-wrap w-flex-column-gap25 w-margin-top10">
+        <div class=" w-flex-center">
+          <BnCheck v-model="ruleData.subType" label="单条数据时自动填充" :true-data="0" :false-data="1"></BnCheck>
+          <el-tooltip class="item" effect="dark" content="当筛选结果只有一条数据的时候，才进行填充数据到子表单中。"
+                      placement="top">
+            <span class="bnUIcon bnUIcon-question w-color-orange"></span>
+          </el-tooltip>
+        </div>
+        <div class=" w-flex-center">
+          <BnCheck v-model="ruleData.subType" label="多条数据时自动填充" :true-data="1" :false-data="0"></BnCheck>
+          <el-tooltip class="item" effect="dark" content="当筛选结果不止一条数据的时候，才进行填充数据到子表单中。"
+                      placement="top">
+            <span class="bnUIcon bnUIcon-question w-color-orange"></span>
+          </el-tooltip>
+        </div>
+        <div class=" w-flex-center">
+          <BnCheck v-model="ruleData.dataForceFill" label="数据强制填充" :true-data="1" :false-data="0"></BnCheck>
+          <el-tooltip class="item" effect="dark"
+                      content="如果筛选出来数据后，子表单已经有数据存在，则覆盖子表单的原始数据。如果不勾选，则不覆盖。"
+                      placement="top">
+            <span class="bnUIcon bnUIcon-question w-color-orange"></span>
+          </el-tooltip>
+        </div>
+        <div class=" w-flex-center w-margin-top10">
+          <BnCheck v-model="ruleData.dataForceClear" label="筛选结果为空时，清空子表单" :true-data="1"
+                   :false-data="0"></BnCheck>
+          <el-tooltip class="item" effect="dark"
+                      content="如果筛选时没有数据，子表单本身却有数据存在，则清空子表单的原始数据。" placement="top">
+            <span class="bnUIcon bnUIcon-question w-color-orange"></span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="w-flex-right">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="saveRule">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import {cloneDeep} from "lodash";
+import {tidyRuleComponents} from "../../../../utils/index.js";
+
+const ruleBase = {
+  id: '',//规则id
+  type: 13,//规则类型
+  status: 1,//开启
+  ruleSense: '',//组件id
+  subType: 0,// 筛选出单条数据时是否自动填充 1是 0否
+  dataForceFill: 0,// 数据强制填充
+  dataForceClear: 0,//  子表单筛选条件查询无数据清空  1:是 0:否 没有查询到数据，会重置筛选结果
+  columnRules: []
+}
+export default {
+  name: "assocTableSearch",
+  props: {
+    columnData: {
+      type: Object,
+      default: () => ({}),
+    },
+    columnList: {
+      type: Object,
+      default: () => ({}),
+    },
+    postFunc: Function,
+    extendPost: Object,
+  },
+  data() {
+    return {
+      visible: false,
+      rulePost: {
+        appId: '',
+        tableId: '',
+        columnRuleList: [
+          {
+            id: '',//规则id
+            type: 13,//规则类型
+            status: 1,//开启
+            ruleSense: '',//组件id
+            subType: 0,// 筛选出单条数据时是否自动填充 1是 0否
+            dataForceFill: 0,// 数据强制填充
+            dataForceClear: 0,//  子表单筛选条件查询无数据清空  1:是 0:否 没有查询到数据，会重置筛选结果
+            columnRules: []
+          }
+        ]
+      },
+      ruleData: cloneDeep(ruleBase),
+      loading: false,
+      // 关联表的组件列表
+      assocTableColumns: [],
+      // 规则中，选择其他组件时，使用当前子表单所在的表的组件
+      otherColumns: [],
+    }
+  },
+  methods: {
+    async open() {
+      this.ruleData = cloneDeep(ruleBase)
+      this.ruleData.ruleSense = this.columnData.id;
+      this.visible = true;
+      this.loading = true;
+      this.otherColumns = tidyRuleComponents(this.columnList)
+      await this.getRuleData();
+      if (this.assocTableColumns.length == 0) {
+        await this.getComList()
+      }
+      this.loading = false;
+    },
+    /**
+     * 获取表下的组件
+     * */
+    async getComList() {
+      let res = await this.postFunc(`/biztable/definition/table?tableCode=${this.columnData.insideDataSourceInfo.tableCode}&columns=1`, null, 'get')
+      if (!res.code && res.data) {
+        this.assocTableColumns = tidyRuleComponents(res.data.columns, res.data.appId, res.data.tableId)
+      }
+    },
+    /**
+     * 获取规则
+     * */
+    async getRuleData() {
+      let res = await this.postFunc(`/v2/columnRule/getColumnRule`, {
+        appId: this.extendPost.appId,
+        projectId: this.extendPost.tableId,
+        ruleSense: this.columnData.id,
+        type: 13
+      })
+      if (!res.code && res.data && res.data.columnRuleList?.length) {
+        let rule = res.data.columnRuleList[0] || {}
+        this.ruleData = {
+          id: rule.id,//规则id
+          type: 13,//规则类型
+          status: 1,//开启
+          ruleSense: rule.ruleSense,//组件id
+          subType: rule.subType,// 筛选出单条数据时是否自动填充 1是 0否
+          dataForceFill: rule.dataForceFill,// 数据强制填充
+          dataForceClear: rule.dataForceClear,//  子表单筛选条件查询无数据清空  1:是 0:否 没有查询到数据，会重置筛选结果
+          columnRules: rule.columnRules || []
+        }
+      }
+    },
+    /**
+     * 添加规则
+     * */
+    addRule() {
+      if (this.ruleData.columnRules.length >= 10) {
+        this.$message.closeAll()
+        this.$message.warning('最多只能添加十条规则')
+      } else {
+        this.ruleData.columnRules.push({
+          columnCode: '',
+          parentCode: '',
+          id: '', // 组件Id
+          behaviorType: '', // 组件类型
+          searchType: '',//比较类型
+          parentId: '',//当是子表单组件时，这里写子表单的组件id
+          toColumnType: '',//对比组件类型 0自定义填写   1.其他组件    2.当前组件选项
+          value: '', // 匹配值,
+        })
+      }
+    },
+    /**
+     * 保存规则
+     * */
+    saveRule() {
+      this.loading = true;
+
+      // 定义不需要值校验的 searchType（为空、不为空、有数据、无数据等）
+      const SEARCH_TYPES_NO_VALUE_REQUIRED = ['9', '10', '14', '15'];
+      // 定义自定义填写类型
+      const TO_COLUMN_TYPE_CUSTOM = '0';
+      // 定义附件类型
+      const BEHAVIOR_TYPE_ATTACHMENT = 10;
+
+      /**
+       * 检查是否需要值校验
+       */
+      const needValueValidation = (searchType) => {
+        return !SEARCH_TYPES_NO_VALUE_REQUIRED.includes(searchType);
+      };
+
+      /**
+       * 检查值是否为空
+       */
+      const isValueEmpty = (value) => {
+        if (!value) return true;
+        if (typeof value === 'string' && (value === '{}' || value === '[]')) return true;
+        return false;
+      };
+
+      /**
+       * 标准化值为字符串
+       */
+      const normalizeValue = (option) => {
+        const {toColumnType, searchType, behaviorType, value} = option;
+
+        // 附件类型需要转换
+        if (behaviorType === BEHAVIOR_TYPE_ATTACHMENT) {
+          return typeof value === 'object' ? JSON.stringify(value) : value;
+        }
+
+        // 不需要值校验的类型，不需要转换
+        if (!needValueValidation(searchType)) {
+          return value;
+        }
+
+        // 非自定义填写类型需要转换
+        if (toColumnType !== TO_COLUMN_TYPE_CUSTOM) {
+          return typeof value === 'object' ? JSON.stringify(value) : value;
+        }
+
+        // 其他情况，确保是字符串
+        return typeof value === 'object' ? JSON.stringify(value) : value;
+      };
+
+      let errorMsg = '';
+      let autoMemoRule = [];
+      let ruleList = cloneDeep(this.ruleData.columnRules);
+
+      for (let i = 0; i < ruleList.length; i++) {
+        let option = ruleList[i];
+        let ruleIndex = i + 1;
+        // 1. 校验必填字段
+        if (!option.id || !option.searchType || !option.toColumnType) {
+          errorMsg = `请设置第${ruleIndex}个条件选项不能为空`;
+          break;
+        }
+
+        // 2. 校验值不能为空（仅针对需要值的 searchType）
+        if (needValueValidation(option.searchType)) {
+          if (isValueEmpty(option.value)) {
+            errorMsg = `请设置${option.name || '第' + ruleIndex + '个条件'}组件的值`;
+            break;
+          }
+        }
+
+        // 3. 标准化值为字符串
+        option.value = normalizeValue(option);
+
+        autoMemoRule.push(option);
+      }
+
+      if (errorMsg) {
+        this.$message.warning(errorMsg);
+        this.loading = false;
+        return false;
+      }
+      let postData = {
+        "projectId": this.extendPost.tableId,   // 工作表ID
+        "appId": this.extendPost.appId,     // 小程序ID
+        columnRuleList: JSON.stringify([{
+          ...this.ruleData,
+          columnRules: JSON.stringify(autoMemoRule),
+        }])
+      }
+      this.postFunc('/v2/columnRule/operationColumnRule', postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          // 小程序历史字段，不设置无法填充
+          this.columnData.extraInfo.subSearchColumns = [];
+          //更新当前组件数据是否强制填充
+          this.columnData.extraInfo.dataForceFill = this.ruleData.dataForceFill;
+          this.columnData.extraInfo.dataForceClear = this.ruleData.dataForceClear;
+          this.$message.success('保存成功');
+          this.visible = false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.assocTableSearch {
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+</style>

package/packages/BnColumnConfig/component/childrenFormSetting/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="childrenSetOpt">
+    <columnConfigDialog ref="columnConfigDialog" v-bind="$props" @saveOver="editChildColumn"
+                        is-children></columnConfigDialog>
+    <!--    <assocTable ref="assocTable" v-bind="$props"></assocTable>-->
+    <assocTableSearch ref="assocTableSearch" v-bind="$props"></assocTableSearch>
+    <!-- 顶部操作栏 -->
+    <div class="childrenSetOpt-top w-flex-center w-flex-between">
+      <div class="w-flex-center ">
+        <div class="childrenSetOpt-top-title">子组件设置</div>
+        <div class="w-color-orange">
+          （共{{columnData.moduleDefinition.length}}个子组件）
+        </div>
+      </div>
+      <div class="w-flex-center w-flex-column-gap5">
+        <div v-if="!hideFiled.includes('moduleDefinition')">
+          <el-button link type="primary" @click="$refs.columnConfigDialog.open()">
+            <span class="bnUIcon bnUIcon-addFile w-padding-right2 w-font14"></span>添加
+          </el-button>
+        </div>
+        <!--        <div>-->
+        <!--          <el-button link type="primary" @click="$refs.assocTable.open()">-->
+        <!--            <span class="bnUIcon bnUIcon-linkTable w-padding-right2"></span>关联表数据-->
+        <!--          </el-button>-->
+        <!--        </div>-->
+        <div v-if="columnData.insideDataSourceInfo?.type == 'group'">
+          <el-button link type="primary" @click="$refs.assocTableSearch.open()">
+            <span class="bnUIcon bnUIcon-search w-padding-right2 "></span>
+            设置数据筛选
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 选项列表 -->
+    <el-scrollbar max-height="380px" class="childrenSetOpt-list" ref="optionList">
+      <draggable v-model="columnData.moduleDefinition" item-key="id"
+                 handle=".childrenSetOpt-list-item-drag" ghost-class="ghost-item"
+                 chosen-class="chosen-item" animation="300" tag="div">
+        <template #item="{element, index}">
+          <div class="childrenSetOpt-list-item" :class="[componentWidth>400?'two':'one']">
+            <div class="w-flex-between w-flex-center childrenSetOpt-list-item-content">
+              <div class="childrenSetOpt-list-item-drag w-default-hover">
+                <span class="bnUIcon bnUIcon-move"></span>
+              </div>
+              <div class="w-font14 w-color-black6 childrenSetOpt-list-item-text w-text-over-two" :title="element.name">
+                <el-tooltip content="来自关联表组件" placement="top"
+                            v-if="element.insideDataSourceInfo?.type == 'group'">
+                  <span class="bnUIcon bnUIcon-linkTable w-color-violet" title=""></span>
+                </el-tooltip>
+                {{ element.name }}
+              </div>
+            </div>
+            <div class="w-flex-center">
+              <div class="w-color-purple childrenSetOpt-list-item-memo">
+                {{ columnTypeMap[element.behaviorType] }}
+                <span class="w-margin-left4" v-if="!isEmpty(element.defaultInfo)">已配默认值</span>
+                <span class="w-margin-left4" v-if="element.extraInfo.exprId">已配函数表达式</span>
+              </div>
+            </div>
+            <div class="w-flex-right w-flex-center w-flex-column-gap8">
+              <span class="bnUIcon bnUIcon-setting w-color-orange"
+                    @click="$refs.columnConfigDialog.open(element)"></span>
+              <span class="bnUIcon bnUIcon-delete w-color-orange" v-if="!hideFiled.includes('moduleDefinition')"
+                    @click="deleteOption(index, element.name)"></span>
+            </div>
+          </div>
+        </template>
+      </draggable>
+    </el-scrollbar>
+    <div class="w-empty" v-if="!columnData.moduleDefinition || columnData.moduleDefinition.length == 0">没有子组件
+    </div>
+  </div>
+</template>
+
+<script>
+import {cloneDeep, isEmpty} from "lodash";
+import {columnTypeMap} from "../../data.js";
+import {defineAsyncComponent} from "vue";
+
+export default {
+  name: "childrenFormSetting",
+  components: {
+    columnConfigDialog: defineAsyncComponent(() => import("../../columnConfigDialog.vue")),
+    assocTableSearch: defineAsyncComponent(() => import("./assocTableSearch.vue")),
+    // assocTable: defineAsyncComponent(() => import("./assocTable.vue")),
+  },
+  props: {
+    columnData: {
+      type: Object,
+      default: () => ({}),
+    },
+    postFunc: Function, // API请求函数
+    extendPost: Object, // 额外的请求参数
+    // 以下是从父组件传入的 props
+    row: {
+      type: Number,
+      default: 1
+    },
+    hideFiled: {
+      type: Array,
+      default: () => []
+    },
+    columnList: {
+      type: Array,
+      default: () => []
+    },
+    disabled: Boolean,
+  },
+  data() {
+    return {
+      columnTypeMap,
+      componentWidth: 0,    // 组件宽度
+    };
+  },
+  mounted() {
+    // 计算组件宽度
+    this.calculateWidth();
+  },
+  methods: {
+    isEmpty,
+    /**
+     * 计算组件宽度
+     */
+    calculateWidth() {
+      this.$nextTick(() => {
+        const el = this.$el;
+        if (el) {
+          this.componentWidth = el.offsetWidth;
+        }
+      });
+    },
+    /**
+     * 滚动到列表底部
+     */
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const scrollbar = this.$refs.optionList;
+        if (scrollbar && scrollbar.$el) {
+          const wrap = scrollbar.$el.querySelector('.el-scrollbar__wrap');
+          if (wrap) {
+            wrap.scrollTop = wrap.scrollHeight;
+          }
+        }
+      });
+    },
+
+    /**
+     * 编辑或者新增组件
+     */
+    async editChildColumn(column) {
+      if (column.columnCode) {
+        for (let i in this.columnData.moduleDefinition) {
+          if (this.columnData.moduleDefinition[i].columnCode == column.columnCode) {
+            this.columnData.moduleDefinition[i] = cloneDeep(column)
+          }
+        }
+      } else {
+        const appId = this.extendPost?.appId || 'noApp';
+        const res = await this.postFunc(`/v2/projects/customId/1/${appId}`, null, 'get');
+        if (!res.code) {
+          this.columnData.moduleDefinition.push(
+              {...column, columnCode: `cc_${res.data[0]}`}
+          )
+          this.scrollToBottom();
+        }
+      }
+    },
+    /**
+     * 删除选项
+     */
+    deleteOption(index) {
+      this.columnData.moduleDefinition.splice(index, 1);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.childrenSetOpt {
+  // 顶部操作栏
+  &-top {
+    height: 32px;
+    font-size: 14px;
+
+    &-title {
+      font-weight: 500;
+    }
+  }
+
+  // 选项列表
+  &-list {
+    margin-top: 10px;
+    padding-right: 10px;
+
+    & .el-scrollbar__view > div {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    &-item {
+      position: relative;
+      cursor: pointer;
+      background: #ebeef5;
+      border-radius: 6px;
+      padding: 10px;
+
+      &.two {
+        width: calc(50% - 5px);
+      }
+
+      &.one {
+        width: 100%;
+      }
+
+      &:hover {
+        background: #E4E7ED;
+        box-shadow: 0px 0px 6px rgba(0, 0, 0, .12);;
+      }
+
+      &-content {
+        flex: 1;
+        min-width: 0; // 重要：使弹性子项能够缩小
+        overflow: hidden;
+      }
+
+      &-text {
+        flex: 1;
+        min-width: 0;
+      }
+
+      &-memo {
+        font-size: 12px;
+        padding: 12px 0 4px 22px;
+      }
+
+      &-drag {
+        padding-right: 8px;
+        flex-shrink: 0; // 防止拖动图标被压缩
+      }
+    }
+  }
+}
+</style>

package/packages/BnColumnConfig/component/defaultSet/defaultSet.vue

@@ -0,0 +1,114 @@
+<template>
+<div class="defaultSet">
+  <div class="w-default-wrap" v-if="!columnInfo.behaviorType">
+    <el-input v-model="columnInfo.defaultInfo" placeholder="设置组件默认值" clearable :disabled="disabled"/>
+  </div>
+  <div class="w-default-wrap" v-if="columnInfo.behaviorType == 1">
+    <stringDefault v-model="columnInfo" :disabled="disabled" :columnList="columnList"></stringDefault>
+  </div>
+
+  <div class="w-default-wrap" v-if="columnInfo.behaviorType == 2">
+    <BnInpNum v-model="columnInfo.defaultInfo" :disabled="disabled" :precision="columnInfo.extraInfo?.valueType"></BnInpNum>
+  </div>
+  <div class="w-default-wrap" v-if="[3,4,5].includes(columnInfo.behaviorType)">
+    <BnSelect v-model="columnInfo.defaultInfo" :options="columnInfo.moduleDefinition" :multiple="columnInfo.behaviorType == 5"
+              :disabled="disabled" :optionProps="{value:'code',label:'title'}" :pageProps="{pageNum: 'pageNo',pageSize: 'pageSize',}"
+              :pathUrl="columnInfo.pathUrl" :postData="columnInfo.postData" :postFunc="postFunc"
+              :placeholder="'请选择'" clearable filterable>
+    </BnSelect>
+  </div>
+  <div class="w-default-wrap" v-if="columnInfo.behaviorType == 6 || columnInfo.behaviorType == 20">
+    <BnCascader v-model="columnInfo.defaultInfo"
+                :postFunc="postFunc" :path-url="columnInfo.pathUrl" collapseTags
+                :post-data="columnInfo.postData" remote-mode="tree"
+                :optionProps="{value:'code',label:'title'}" :label-in-value="columnInfo.behaviorType == 6"
+                :options="filteredOptions" hide-check-to-last
+                :multiple="columnInfo.behaviorType == 20" clearable/>
+  </div>
+  <div class="w-default-wrap" v-if="columnInfo.behaviorType == 7">
+    <el-date-picker style="width: 100%" :disabled="disabled" v-model="columnInfo.defaultInfo" type="datetime" placement="bottom-start"
+                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+  </div>
+  <div class="w-default-wrap" v-if="columnInfo.behaviorType == 8">
+    <BnDatePicker v-model="columnInfo.defaultInfo" type="datetimerange" :disabled="disabled"></BnDatePicker>
+
+  </div>
+</div>
+</template>
+<script>
+import stringDefault from "./stringDefault.vue";
+import {cloneDeep} from "lodash";
+export default {
+  name: "defaultSet",
+  components:{stringDefault},
+  props: {
+    //最终选中的value
+    modelValue: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 组件列表
+    columnList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 是否禁用
+    disabled: Boolean,
+    postFunc: Function,
+    extendPost: Object,
+  },
+  methods: {},
+  computed: {
+    columnInfo: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+    /**
+     * 过滤后的选项列表，只保留columnStatus等于1的项
+     */
+    filteredOptions() {
+      if (!this.columnInfo.moduleDefinition || !this.columnInfo.moduleDefinition.optionList) {
+        return [];
+      }
+
+      // 递归过滤树形结构
+      const filterTree = (nodes) => {
+        if (!Array.isArray(nodes)) return [];
+
+        return nodes.filter(node => {
+          // 检查当前节点的columnStatus
+          if (node.columnStatus != 1) {
+            return false;
+          }
+
+          // 如果有子节点，递归过滤子节点
+          if (node.children && Array.isArray(node.children)) {
+            node.children = filterTree(node.children);
+          }
+
+          return true;
+        });
+      };
+      let options = cloneDeep(this.columnInfo.moduleDefinition.optionList)
+      return filterTree(options);
+    },
+  },
+}
+</script>
+
+
+
+<style scoped lang="scss">
+.defaultSet{
+  position: relative;
+  width: 100%;
+}
+</style>