@bytenew/bn-bus-ui 1.1.461 → 1.1.463

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

@@ -0,0 +1,210 @@
+<template>
+  <div class="w-default-wrap">
+    <!-- 默认值输入框，支持手动输入和组件关联 -->
+    <el-input 
+      v-model="columnInfo.defaultInfo" 
+      placeholder="点击右侧可选择组件关联" 
+      ref="defaultContentString"  
+      @change="handleDefaultValueChange"
+    >
+      <template #append>
+        <!-- 组件关联下拉选择器 -->
+        <BnDrop :options="columnList.filter(i=>i.id !== columnInfo.id && ![10, 11, 12, 13, 17,18].includes(i.behaviorType))"
+          :optionProps="{value:'columnCode',label:'name'}" 
+          :placement="'bottom-end'"
+          @checkItem="handleColumnSelect" 
+          noValue
+        >
+          <div>
+            <el-tooltip 
+              class="box-item" 
+              effect="dark" :show-after="600"
+              content="关联组件将会把组件的值，映射到当前组件的默认值中" 
+              placement="top"
+            >
+              <span class="bnUIcon bnUIcon-linkFiled w-color-purple w-cursor-pointer"></span>
+            </el-tooltip>
+          </div>
+        </BnDrop>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "defaultSet",
+  props: {
+    // 最终选中的value
+    modelValue: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 组件列表
+    columnList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 是否禁用
+    disabled: Boolean,
+    postFunc: Function,
+    extendPost: Object,
+  },
+  
+  computed: {
+    columnInfo: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+  
+  methods: {
+    /**
+     * 在光标位置插入文本
+     * @param {HTMLElement} dom - 目标输入框DOM元素
+     * @param {string} value - 要插入的文本
+     * @returns {string} 插入后的完整文本
+     */
+    insertTextAtCursor(dom, value) {
+      // IE浏览器支持
+      if (document.selection) {
+        dom.focus();
+        const selectRange = document.selection.createRange();
+        selectRange.text = value;
+        dom.focus();
+      } 
+      // 现代浏览器支持
+      else if (dom.selectionStart || dom.selectionStart === 0) {
+        const startPos = dom.selectionStart;
+        const endPos = dom.selectionEnd;
+        const scrollTop = dom.scrollTop;
+        
+        // 在光标位置插入文本
+        dom.value = dom.value.substring(0, startPos) + value + dom.value.substring(endPos);
+        
+        // 设置光标位置到插入文本之后
+        dom.focus();
+        dom.selectionStart = startPos + value.length;
+        dom.selectionEnd = startPos + value.length;
+        dom.scrollTop = scrollTop;
+      } 
+      // 其他情况直接追加到末尾
+      else {
+        dom.value += value;
+        dom.focus();
+      }
+      
+      return dom.value;
+    },
+
+    /**
+     * 将默认值中的组件名称转换为对应的code和id
+     * 格式：$组件名$ -> $组件code$ 或 $组件id$
+     */
+    updateDefaultInfoWithCodeAndId() {
+      let defaultInfoWithCode = this.columnInfo.defaultInfo;
+      let defaultInfoWithId = this.columnInfo.defaultInfo;
+      
+      // 遍历所有组件列表，进行字符串替换
+      this.columnList.forEach(col => {
+        const placeholder = `$${col.name}$`;
+        const codePlaceholder = `$${col.columnCode}$`;
+        const idPlaceholder = `$${col.id}$`;
+        
+        // 全局替换组件名为code和id
+        defaultInfoWithCode = defaultInfoWithCode.split(placeholder).join(codePlaceholder);
+        defaultInfoWithId = defaultInfoWithId.split(placeholder).join(idPlaceholder);
+      });
+      
+      // 更新到组件配置中
+      this.columnInfo.extraInfo.defaultInfoWithCode = defaultInfoWithCode;
+      this.columnInfo.extraInfo.defaultInfoWithId = defaultInfoWithId;
+    },
+
+    /**
+     * 处理选择关联组件事件
+     * @param {Object} column - 被选中的组件对象
+     */
+    handleColumnSelect(column) {
+      // 限制最多关联10个组件
+      if (this.columnInfo.extraInfo.defaultInfoRuleCols?.length >= 10) {
+        this.$message.warning('最多可设置10个组件', 2.5);
+        return;
+      }
+      
+      // 在光标位置插入组件占位符：$组件名$
+      const inputEl = this.$refs.defaultContentString?.input;
+      const placeholder = `$${column.name}$`;
+      const newValue = this.insertTextAtCursor(inputEl, placeholder);
+      
+      // 更新默认值
+      this.columnInfo.defaultInfo = newValue;
+      
+      // 转换为code和id格式
+      this.updateDefaultInfoWithCodeAndId();
+      
+      // 检查是否已存在相同组件，避免重复添加
+      const isDuplicate = this.columnInfo.extraInfo.defaultInfoRuleCols?.some(
+        col => col.id === column.id && col.name === column.name
+      );
+      
+      // 添加到已选组件列表
+      if (!isDuplicate) {
+        this.columnInfo.extraInfo.defaultInfoRuleCols = this.columnInfo.extraInfo.defaultInfoRuleCols || [];
+        this.columnInfo.extraInfo.defaultInfoRuleCols.push({
+          name: column.name,
+          columnCode: column.columnCode,
+          behaviorType: column.behaviorType
+        });
+      }
+    },
+
+    /**
+     * 处理默认值输入框内容变化
+     * @param {string} val - 当前输入框的值
+     */
+    handleDefaultValueChange(val) {
+      // 如果清空了输入框，则清空所有关联组件信息
+      if (!val) {
+        this.columnInfo.extraInfo.defaultInfoRuleCols = [];
+        this.columnInfo.extraInfo.defaultInfoWithCode = '';
+        this.columnInfo.extraInfo.defaultInfoWithId = '';
+        return;
+      }
+      
+      // 过滤掉已被删除的组件占位符
+      // 如果默认值中不再包含某个组件的占位符，则从已选列表中移除
+      this.columnInfo.extraInfo.defaultInfoRuleCols = 
+        this.columnInfo.extraInfo.defaultInfoRuleCols?.filter(col => {
+          const placeholder = `$${col.name}$`;
+          return val.includes(placeholder);
+        }) || [];
+      
+      // 如果还有关联组件，更新code和id格式
+      if (this.columnInfo.extraInfo.defaultInfoRuleCols?.length) {
+        this.updateDefaultInfoWithCodeAndId();
+      } else {
+        // 没有关联组件时清空
+        this.columnInfo.extraInfo.defaultInfoWithCode = '';
+        this.columnInfo.extraInfo.defaultInfoWithId = '';
+      }
+    },
+  },
+}
+</script>
+
+
+<style scoped lang="scss">
+.defaultSet {
+  position: relative;
+  width: 100%;
+}
+</style>

package/packages/BnColumnConfig/component/funcExprDialog/funcExprDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+      v-model="visible"
+      title="编辑函数" top="5vh" :close-on-click-modal="false"
+      width="900" :destroy-on-close="true" append-to-body
+  >
+    <BnFunExpr v-if="visible" :id="columnInfo.extraInfo.exprId"
+        :column-list="columnList" ref="bnFunExpr" :post-func="postFunc"></BnFunExpr>
+    <template #footer>
+      <div class="dialog-footer">
+        <div>
+          <el-link type="primary" href="https://banniu.yuque.com/staff-dmhmqa/zn9sih/mgcoi8ogkyvew7gt?singleDoc# "
+                   target="_blank">使用手册
+          </el-link>
+        </div>
+        <div>
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" :loading="loading" @click="submitForm">确认</el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: "funcExprDialog",
+  props: {
+    //最终选中的value
+    modelValue: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    componentList: Array,
+    tableCode: String,
+    postFunc: Function,
+    extendPost: Object,
+  },
+  computed: {
+    columnInfo: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+    columnList() {
+      let children = [];
+      this.componentList.forEach((item) => {
+        let data = {"id": item.id, "behaviorType": item.behaviorType, "name": item.name};
+        if (item.behaviorType === 13) {
+          const moduleDefinition = item.moduleDefinition.map((mod) => {
+            return {
+              "id": mod.id,
+              "behaviorType": mod.behaviorType,
+              "name": `${item.name}-${mod.name}`,
+              parentId: item.id,
+              parentName: item.name
+            };
+          })
+          children.push(...moduleDefinition);
+        } else {
+          children.push(data);
+        }
+      });
+      return [
+        {
+          "name": "工作表组件",
+          children
+        }
+      ]
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+    }
+  },
+  methods: {
+    open() {
+      this.loading = false;
+      this.visible = true;
+    },
+    submitForm() {
+      this.loading = true;
+      const params = this.$refs.bnFunExpr.saveRule();
+      // 清空操作
+      if(!params.exprDisplay){
+        this.columnInfo.extraInfo.exprId = '';
+        this.columnInfo.extraInfo.exprExec = '';
+        this.$emit("saveOver",'')
+        this.visible = false;
+        return;
+      }
+      this.postFunc('/expr/create',
+          {...params, ...this.extendPost}).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.$emit("saveOver",params.exprDisplay)
+          this.columnInfo.extraInfo.exprId = res.data.id;
+          this.columnInfo.extraInfo.exprExec = res.data.exprExec;
+          if(this.columnInfo.id == 6 || this.columnInfo.columnCode == 'task_title'){
+            this.columnInfo.extraInfo.isAutoTitle = '1'
+            this.columnInfo.extraInfo.autoTitleRule = ''
+          }
+          this.visible = false;
+        }
+      })
+    },
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+  <div class="packageFilter" v-loading="!lazyLoad">
+    <!-- 顶部操作栏 -->
+    <div class="packageFilter-top w-flex-center">
+      <div class="packageFilter-top-title">数据过滤</div>
+      <div class="w-margin-left8">
+        <span class="w-font12 w-color-orange">（选择包裹时，不会展示符合下方条件的ERP单据）</span>
+      </div>
+    </div>
+    <!-- 选项列表 -->
+    <div class="packageFilter-list" ref="optionList" v-if="lazyLoad">
+      <div class="packageFilter-list-item" v-for="element in filterColumns"
+           :class="[componentWidth>400?'two':'one']">
+        <div class="w-font14 w-color-black6 w-text-over w-margin-bottom4" :title="element.name">{{ element.name }}</div>
+        <div class="w-flex-center">
+          <BnSelect v-model="dataFilterByPackage[element.columnCode]" clearable filterable
+                    :labelInValue="false" @change="changeDataFilter"
+                    :optionProps="{value:'code',label:'title'}"
+                    :multiple="true"
+                    :options="element.moduleDefinition"
+                    :pathUrl="element.pathUrl"
+                    :post-data="element.postData"
+                    :postFunc="postFunc"
+          ></BnSelect>
+        </div>
+      </div>
+    </div>
+    <div v-else class="w-empty">
+      数据加载中...
+    </div>
+  </div>
+</template>
+
+<script>
+import {cloneDeep, isEmpty} from "lodash";
+
+export default {
+  name: "packageFilter",
+  computed: {
+    filterColumns() {
+      return this.columnList.filter(item => this.columnData.extraInfo.filterColumn.includes(item.columnCode))
+    }
+  },
+  props: {
+    columnData: {
+      type: Object,
+      default: () => ({}),
+    },
+    postFunc: Function, // API请求函数
+    extendPost: Object, // 额外的请求参数
+    columnList: {
+      type: Array,
+      default: () => []
+    },
+    disabled: Boolean,
+  },
+  data() {
+    return {
+      dataFilterByPackage: {},
+      lazyLoad:false,//因为下拉菜单多的时候可能会影响加载速度，这里做个延迟加载
+      componentWidth: 0,    // 组件宽度
+    };
+  },
+  mounted() {
+    this.dataFilterByPackage = this.columnData.extraInfo?.dataFilterByPackage ? JSON.parse(this.columnData.extraInfo?.dataFilterByPackage) : {}
+    // 计算组件宽度
+    this.calculateWidth();
+    if(this.filterColumns.length>4){
+      setTimeout(()=>{
+        this.lazyLoad = true;
+      },200)
+    }else{
+      this.lazyLoad = true;
+    }
+  },
+  methods: {
+    isEmpty,
+    /**
+     * 计算组件宽度
+     */
+    calculateWidth() {
+      this.$nextTick(() => {
+        const el = this.$el;
+        if (el) {
+          this.componentWidth = el.offsetWidth;
+        }
+      });
+    },
+    /**
+     * 滚动到列表底部
+     */
+    changeDataFilter() {
+      this.columnData.extraInfo.dataFilterByPackage = JSON.stringify(this.dataFilterByPackage)
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.packageFilter {
+  // 顶部操作栏
+  &-top {
+    height: 32px;
+    font-size: 14px;
+
+    &-title {
+      font-weight: 500;
+    }
+  }
+
+  // 选项列表
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+    max-height: 300px;
+    overflow-y: auto;
+
+    &-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);;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="paraExplainSet">
+    <el-input type="textarea" resize="none" :rows="3"
+              v-model="columnData.extraInfo.paraExplain" placeholder="填写说明" clearable
+              :disabled="disabled" :maxlength="800" show-word-limit></el-input>
+    <div class="w-flex-left w-flex-wrap w-flex-gap8 w-margin-top10">
+      <el-upload class="paraExplainSet-upload" ref="uploadInput"
+                 :action="uploadUrl" :show-file-list="false" :disabled="disabled"
+                 :before-upload="beforeUpload" multiple :on-success="fileSuccess">
+        <div class="paraExplainSet-upload-btn w-flex-center w-flex-lrCenter">
+          <span class="bnUIcon bnUIcon-upImg w-font24 w-color-blue"></span>
+        </div>
+      </el-upload>
+      <div v-for="(url,index) in columnData.extraInfo.operationPictures" :key="index" class="paraExplainSet-image-wrapper">
+        <el-image preview-teleported style="width: 40px; height: 40px" :src="url"
+            :preview-src-list="columnData.extraInfo.operationPictures"
+            show-progress
+            :initial-index="index"
+            fit="cover"
+        />
+        <div v-if="!disabled" class="paraExplainSet-image-delete" @click="deleteImage(index)">
+          <span class="bnUIcon bnUIcon-clear w-color-white"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getApiBaseUrl } from "../../../../utils/config.js";
+
+export default {
+  name: "paraExplainSet",
+  props: {
+    columnData: {
+      type: Object,
+      default: () => ({}),
+    },
+    disabled: Boolean,
+    postFunc: Function, // API请求函数
+    extendPost: Object, // 额外的请求参数
+  },
+  data() {
+    return {
+      fileType:['png', 'jpg', 'jpeg', 'gif']
+    };
+  },
+  mounted() {
+    if(!this.columnData.extraInfo.operationPictures){
+      this.columnData.extraInfo.operationPictures = []
+    }
+  },
+  computed: {
+    uploadUrl() {
+      return `${getApiBaseUrl()}/v2/attachment/upload/remarkOperation`
+    },
+  },
+  methods: {
+    /**
+     * 上传成功
+     * */
+    fileSuccess(res) {
+      if (!res.code) {
+        if (this.columnData.extraInfo.operationPictures?.length < 15) {
+          this.columnData.extraInfo.operationPictures?.length
+          this.columnData.extraInfo.operationPictures.push(res.data.url);
+        } else {
+          this.$message.warning('上传文件个数不能超过15个')
+        }
+      } else {
+        this.$message.warning(res.msg);
+      }
+    },
+    /**
+     * 附件上传前
+     * */
+    beforeUpload(file) {
+      if (this.columnData.extraInfo.operationPictures?.length >= 15) {
+        this.$message.warning('上传文件个数不能超过15个')
+        return false;
+      }
+      const maxSize = 50;
+      const maxSizeBytes = 1048576 * maxSize;
+      if (file.size > maxSizeBytes) {
+        this.$message.warning(`上传文件大小不能超出${maxSize}MB`);
+        return false;
+      }
+      const fileExt = file.name.split(".").pop().toLowerCase();
+      if (!this.fileType.includes(fileExt)) {
+        this.$message.warning('仅支持上传图片');
+        return false;
+      }
+      return true;
+    },
+    /**
+     * 删除图片
+     * */
+    deleteImage(index) {
+      this.columnData.extraInfo.operationPictures.splice(index, 1);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.paraExplainSet {
+  width: 100%;
+  &-upload{
+    width: 40px;
+    height: 40px;
+    &-btn{
+      width: 40px;
+      height: 40px;
+      border: 1px solid rgba(0, 0, 0, .12);
+      box-shadow:  0px 0px 12px rgba(0, 0, 0, .12);
+    }
+  }
+  
+  &-image-wrapper {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    
+    &:hover {
+      .paraExplainSet-image-delete {
+        opacity: 1;
+      }
+    }
+  }
+  
+  &-image-delete {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 10;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+    
+    .el-icon-close {
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+}
+</style>