@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnCascader/cascaderDisplay.js

@@ -0,0 +1,102 @@
+import { isEmpty } from 'lodash';
+
+const DEFAULT_OPTION_PROPS = {
+  value: 'id',
+  label: 'title',
+  children: 'children'
+};
+
+function mergeOptionProps(optionProps = {}) {
+  return { ...DEFAULT_OPTION_PROPS, ...optionProps };
+}
+
+/** 根据 value 路径在 options 树中解析各级 label（labelInValue=false 时用于回显） */
+export function resolvePathLabelsFromTree(pathValues, rootOptions, optionProps = {}) {
+  if (!Array.isArray(pathValues) || !pathValues.length) {
+    return [];
+  }
+
+  const merged = mergeOptionProps(optionProps);
+  const labels = [];
+  let currentOptions = rootOptions || [];
+
+  for (const value of pathValues) {
+    const node = currentOptions.find(item => item?.[merged.value] === value);
+    if (!node) {
+      labels.push(String(value ?? ''));
+      break;
+    }
+    const label = node[merged.label] ?? node.title ?? node.label;
+    labels.push(label != null && label !== '' ? label : String(value ?? ''));
+    currentOptions = node[merged.children] || [];
+  }
+
+  return labels;
+}
+
+/** 将各级 label 拼接为展示文本 */
+export function joinPathLabels(labels, {
+  separator = ' / ',
+  showAllLevels = true
+} = {}) {
+  const filtered = (labels || []).filter(label => label != null && label !== '');
+  if (!filtered.length) {
+    return '';
+  }
+  const sep = ` ${String(separator).trim()} `;
+  return showAllLevels ? filtered.join(sep) : filtered[filtered.length - 1];
+}
+
+/** 格式化单条路径为展示文本 */
+export function formatPathDisplay(path, {
+  labelInValue = true,
+  optionProps = {},
+  options,
+  separator = ' / ',
+  showAllLevels = true
+} = {}) {
+  if (isEmpty(path) || !Array.isArray(path) || !path.length) {
+    return '';
+  }
+
+  const merged = mergeOptionProps(optionProps);
+  let labels;
+
+  if (labelInValue) {
+    labels = path.map(item => {
+      if (item && typeof item === 'object') {
+        return item[merged.label] ?? item.title ?? item.label ?? '';
+      }
+      return String(item ?? '');
+    });
+  } else if (options?.length) {
+    labels = resolvePathLabelsFromTree(path, options, optionProps);
+  } else {
+    labels = path.map(item => String(item ?? ''));
+  }
+
+  return joinPathLabels(labels, { separator, showAllLevels });
+}
+
+/** 多选：解析为带 label 的 tag 列表 */
+export function getMultipleDisplayTags(modelValue, options = {}) {
+  if (!Array.isArray(modelValue) || !modelValue.length) {
+    return [];
+  }
+
+  return modelValue.map((path, index) => ({
+    index,
+    label: formatPathDisplay(path, options)
+  })).filter(item => item.label);
+}
+
+/** 是否为空值 */
+export function isEmptyValue(modelValue, { multiple, labelInValue } = {}) {
+  if (multiple) {
+    return !Array.isArray(modelValue) || modelValue.length === 0;
+  }
+  if (labelInValue) {
+    return isEmpty(modelValue);
+  }
+  return !Array.isArray(modelValue) || modelValue.length === 0;
+}

package/packages/BnCheck/BnCheck.vue

@@ -0,0 +1,253 @@
+<!--
+  @Auther:辛巴
+  @Date:2023/02/22
+  @Description:复选框组件
+  @VERSION:1.0-->
+<template>
+  <div class="bnChecked" :class="{'disabled': disabled}" @click="handleClick">
+    <span class="bnChecked-status" :class="{'checked': isCheck}">
+      <span class="bnChecked-status-inner"></span>
+    </span>
+    <slot>
+      <span class="bnChecked-label" v-if="title" :style="labelStyle" :title="title">{{ title }}</span>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BnCheck",
+  props: {
+    modelValue: [Boolean, String, Number, Array],
+    trueData: { type: [Boolean, String, Number, Object], default: true },
+    falseData: { type: [Boolean, String, Number], default: false },
+    // option基础结构
+    optionProps: {
+      default() {
+        return {
+          value: 'id',
+          label: 'title'
+        };
+      }
+    },
+    isChecked: Function,
+    onClick: Function,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    stop: {
+      type: Boolean,
+      default: false
+    },
+    label: String,
+    labelStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    title() {
+      let label = this.label||'';
+      if (typeof this.trueData == 'object' && !this.label) {
+        label = this.trueData[this.optionProps.label]
+      }
+      return label;
+    },
+    isCheck() {
+      if (this.isChecked) {
+        const result = this.isChecked({
+          value: this.modelValue,
+          trueData: this.trueData,
+          falseData: this.falseData
+        });
+        return typeof result === "boolean" ? result : result > -1;
+      } else {
+        return this.check();
+      }
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      }
+    }
+  },
+  methods: {
+    /**
+     * 组件默认判断
+     * */
+    check() {
+      if (typeof this.trueData == 'object') {
+        if (Array.isArray(this.modelValue)) {
+          let getItem = this.modelValue.filter(i => i[this.optionProps.value] == this.trueData[this.optionProps.value])
+          return getItem.length > 0
+        } else if (this.trueData) {
+          return this.modelValue[this.optionProps.value] == this.trueData[this.optionProps.value]
+        } else {
+          return Boolean(this.modelValue);
+        }
+      } else {
+        if (Array.isArray(this.modelValue)) {
+          return this.modelValue.includes(this.trueData);
+        } else if (this.trueData !== undefined) {
+          return this.modelValue === this.trueData;
+        } else {
+          return Boolean(this.modelValue);
+        }
+      }
+    },
+    /**
+     * 点击事件
+     * */
+    handleClick() {
+      if (this.stop || this.disabled) {
+        this.emitClick();
+        return;
+      }
+      if (this.isCheck) {
+        if (Array.isArray(this.modelValue)) {
+          let index;
+          if (this.isChecked) {
+            index = this.isChecked({
+              value: this.modelValue,
+              trueData: this.trueData,
+              falseData: this.falseData
+            })
+          } else {
+            if (typeof this.trueData == 'object') {
+              let ids = this.value.map(i => i[this.optionProps.value])
+              index = ids.indexOf(this.trueData[this.optionProps.value])
+            } else {
+              index = this.value.indexOf(this.trueData)
+            }
+          }
+          this.value.splice(index, 1);
+        } else {
+          this.value = this.falseData;
+        }
+      } else {
+        if (Array.isArray(this.modelValue)) {
+          this.value.push(this.trueData);
+        } else {
+          this.value = this.trueData;
+        }
+      }
+      this.$emit("change", {
+        value: this.modelValue,
+        trueData: this.trueData,
+        falseData: this.falseData
+      });
+      this.emitClick();
+    },
+    /**
+     * 点击事件透出
+     * */
+    emitClick() {
+      if (this.onClick) {
+        this.onClick({
+          value: this.modelValue,
+          trueData: this.trueData,
+          falseData: this.falseData
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.bnChecked {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  cursor: pointer;
+}
+
+.bnChecked.disabled {
+  cursor: not-allowed;
+}
+
+.bnChecked.disabled > :nth-child(2) {
+  opacity: 0.2;
+}
+
+.bnChecked-status {
+  box-sizing: content-box !important;
+  position: relative;
+  display: block;
+  width: 14px;
+  height: 14px;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+
+.bnChecked-status.checked {
+  border-color: #1890ff;
+  background-color: #1890ff;
+}
+
+.disabled .bnChecked-status {
+  background-color: #f0f0f0 !important;
+  border-color: #ccc !important;
+}
+
+.disabled .bnChecked-status-inner {
+  background-color: #f0f0f0 !important;
+}
+
+.disabled .checked .bnChecked-status-inner::after {
+  border-color: #ccc !important;
+}
+
+.bnChecked-status-inner {
+  position: relative;
+  display: block;
+  width: 14px;
+  height: 14px;
+  background-color: #fff;
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+
+.bnChecked-status-inner::after {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 3px);
+  width: 5px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(45deg) scale(0) translate(-50%, -50%);
+  opacity: 0;
+  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+  content: "";
+}
+
+.checked .bnChecked-status-inner {
+  background-color: #1890ff;
+}
+
+.checked .bnChecked-status-inner::after {
+  transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  opacity: 1;
+  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+
+.bnChecked-label {
+  box-sizing: content-box !important;
+  max-width: calc(100% - 22px);
+  padding: 0 8px;
+  font-size: 14px;
+  color: #444;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/packages/BnColumnConfig/columnConfigDialog.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-dialog v-model="visible" :title="dialogTitle" top="20px" :close-on-click-modal="false" width="900"
+             class="columnConfigDialog" :destroy-on-close="true" append-to-body>
+    <el-scrollbar max-height="calc(100vh - 150px)">
+      <BnColumnConfig ref="BnColumnConfig" v-model="componentData" v-bind="$props"></BnColumnConfig>
+    </el-scrollbar>
+    <template #footer>
+      <div class="w-flex-right">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="saveColumn">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import {cloneDeep} from "lodash";
+import {columnData} from "./data.js";
+
+export default {
+  name: "FuncExprDialog",
+  props: {
+    componentList: Array,
+    // 列数
+    row: {
+      type: Number,
+      default: 1
+    },
+    // 需要隐藏的配置根据字段来
+    hideFiled: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 组件列表
+    columnList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 是否禁用
+    disabled: Boolean,
+    openDataField: Boolean,
+    postFunc: Function,
+    extendPost: Object,
+    // 多包裹数据回填
+    dataBack: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 是否是子表单配置子组件
+    isChildren: Boolean
+  },
+  computed: {
+    dialogTitle() {
+      const {name, columnCode} = this.componentData;
+      if (columnCode && name.length > 12) {
+        return `组件设置-【${name.substring(0, 12)}...】`;
+      } else if (!columnCode) {
+        return `新增组件`;
+      }
+      return `组件设置-【${name}】`;
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      componentData: cloneDeep(columnData),
+    }
+  },
+  methods: {
+    open(data) {
+      const cloneData = data ? cloneDeep(data) : cloneDeep(columnData)
+      // 兼容历史脏数据：valueEmptyCheck 字段需统一为字符串 '1'/'0'
+      const valueEmptyCheck = cloneData.extraInfo?.valueEmptyCheck;
+      if (valueEmptyCheck === 1 || valueEmptyCheck === 0) {
+        cloneData.extraInfo.valueEmptyCheck = String(valueEmptyCheck);
+      }
+      this.componentData = cloneData;
+      this.visible = true;
+    },
+    saveColumn() {
+      if (!this.componentData.behaviorType) {
+        this.$message.warning('请选择组件类型再保存')
+        return;
+      } else if (!this.componentData.name) {
+        this.$message.warning('请设置组件名称再保存')
+        return;
+      }
+      // 子表单不需要保存，直接将对象返回给父级
+      if (this.isChildren) {
+        this.$emit('saveOver', this.componentData);
+        this.visible = false;
+        return;
+      }
+      this.loading = true;
+      const params = {
+        tableCode: this.extendPost.tableCode,
+        defaultInfo: this.componentData.defaultInfo || '',
+        behaviorType: this.componentData.behaviorType,
+        name: this.componentData.name,
+        extraInfo: JSON.stringify(this.componentData.extraInfo),
+        moduleDefinition: this.componentData.moduleDefinition ? JSON.stringify(this.componentData.moduleDefinition) : '[]',
+        insideDataSourceInfo: this.componentData.insideDataSourceInfo ? JSON.stringify(this.componentData.insideDataSourceInfo) : '{}'
+      }
+      if (this.componentData.defaultInfo && typeof this.componentData.defaultInfo == 'object') {
+        params.defaultInfo = JSON.stringify(this.componentData.defaultInfo)
+      }
+      if (this.componentData.columnCode) {
+        params.columnCode = this.componentData.columnCode
+      }
+      let url = params.columnCode ? '/biztable/definition/updateColumn' : '/biztable/definition/addColumn'
+      this.postFunc(url, params).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.$message.success('操作成功');
+          this.visible = false;
+          this.$emit('saveOver', this.componentData);
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.columnConfigDialog.el-dialog {
+  margin-bottom: 0 !important;
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <el-dialog v-model="visible" title="关联其他工作表组件" top="20px" :close-on-click-modal="false" width="600"
+             :destroy-on-close="true" append-to-body>
+    <div class="assocTable">
+      <el-form :model="assocTableData" label-width="auto" v-loading="loading">
+        <el-form-item label="选择关联表">
+          <BnSelect v-model="assocTableData.tableCode" :option-props="{value:'tableCode',label:'tableName'}"
+                    :labelInValue="false" :options="tableList"></BnSelect>
+        </el-form-item>
+        <el-form-item label="关联表内组件">
+          <el-select v-model="assocTableData.tableColumns" placeholder="please select your zone">
+            <el-option label="Zone one" value="shanghai"/>
+            <el-option label="Zone two" value="beijing"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="w-flex-right">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="saveColumn">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import {cloneDeep} from "lodash";
+
+export default {
+  name: "assocTable",
+  props: {
+    columnData: {
+      type: Object,
+      default: () => ({}),
+    },
+    postFunc: Function,
+    extendPost: Object,
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      assocTableData: {
+        table: "",
+        tableColumns: []
+      },
+      tableList: [],
+      componentData: {},
+    }
+  },
+  methods: {
+    async open(data) {
+      this.assocTableData = {
+        table: "",
+        tableCode: "",
+        tableColumns: []
+      }
+      this.visible = true;
+      this.loading = true;
+      if (this.tableList.length == 0) {
+        await this.getTableList()
+      }
+      if (this.columnData.insideDataSourceInfo.type == 'group') {
+        this.assocTableData.table = this.columnData.insideDataSourceInfo.table;
+        this.assocTableData.tableCode = this.columnData.insideDataSourceInfo.tableCode;
+        await this.getComList()
+        this.columnData.moduleDefinition.forEach(c => {
+          if (c.insideDataSourceInfo?.fieldCode) {
+            this.assocTableData.tableColumns.push(c.insideDataSourceInfo.fieldCode)
+          }
+        })
+        console.log(this.assocTableData.tableColumns)
+      }
+      this.componentData = data ? cloneDeep(data) : cloneDeep({})
+      this.loading = false;
+    },
+    /**
+     * 获取应用下的表
+     * */
+    async getTableList() {
+      let res = await this.postFunc(`/biztable/instance/app?appCode=${this.extendPost.appCode || ''}&tables=1`, null, 'get')
+      if (!res.code && res.data) {
+        this.tableList = res.data.tables;
+      }
+    },
+    /**
+     * 获取表下的组件
+     * */
+    async getComList() {
+      let res = await this.postFunc(`/biztable/definition/table?tableCode=${this.assocTableData.tableCode}&columns=1`, null, 'get')
+      if (!res.code && res.data) {
+        console.log(res)
+      }
+    },
+    saveColumn() {
+      if (!this.componentData.behaviorType) {
+        this.$message.warning('请选择组件类型再保存')
+        return;
+      } else if (!this.componentData.name) {
+        this.$message.warning('请设置组件名称再保存')
+        return;
+      }
+      // 子表单不需要保存，直接将对象返回给父级
+      if (this.isChildren) {
+        this.$emit('saveOver', this.componentData);
+        this.visible = false;
+        return;
+      }
+      this.loading = true;
+      const params = {
+        tableCode: this.extendPost.tableCode,
+        defaultInfo: this.componentData.defaultInfo || '',
+        behaviorType: this.componentData.behaviorType,
+        name: this.componentData.name,
+        extraInfo: JSON.stringify(this.componentData.extraInfo),
+        moduleDefinition: this.componentData.moduleDefinition ? JSON.stringify(this.componentData.moduleDefinition) : '[]',
+        insideDataSourceInfo: this.componentData.insideDataSourceInfo ? JSON.stringify(this.componentData.insideDataSourceInfo) : '{}'
+      }
+      if (this.componentData.defaultInfo && typeof this.componentData.defaultInfo == 'object') {
+        params.defaultInfo = JSON.stringify(this.componentData.defaultInfo)
+      }
+      if (this.componentData.columnCode) {
+        params.columnCode = this.componentData.columnCode
+      }
+      let url = params.columnCode ? '/biztable/definition/updateColumn' : '/biztable/definition/addColumn'
+      this.postFunc(url, params).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.$message.success('操作成功');
+          this.visible = false;
+          this.$emit('saveOver', this.componentData);
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.assocTable {
+  max-height: calc(100vh - 200px);
+}
+</style>