@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnColumnConfig/component/setOption/setOption.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="setOpt">
+    <!-- 顶部操作栏 -->
+    <div class="setOpt-top w-flex-center w-flex-between">
+      <div class="w-flex-center">
+        <div class="setOpt-top-title">选项配置</div>
+        <div class="w-color-orange">
+          （共{{columnData.moduleDefinition.length}}个选项）
+        </div>
+        <div class="w-margin-left8" v-if="filedType != 'DataFields'">
+          <el-button link type="primary" @click="showBatchAdd=!showBatchAdd;addOptionText=''" class="w-padding0">
+            <span class="bnUIcon bnUIcon-batchAdd w-padding-right2 w-font14"></span>
+            批量
+          </el-button>
+          <el-button link type="primary" @click="addOption()" class="w-padding0">
+            <span class="bnUIcon bnUIcon-addFile w-padding-right2 w-font14"></span>添加
+          </el-button>
+        </div>
+      </div>
+      <div class="w-flex-center" v-if="openDataField">
+        <div class="setOpt-filedType">
+          <el-segmented v-model="filedType" :props="{value:'id',label:'title'}" @change="changeFiledType"
+                        :options="[{id:'',title:'选项'},{id:'DataFields',title:'数据字典'}]" />
+        </div>
+      </div>
+    </div>
+    <!-- 批量添加区域 -->
+    <div v-if="showBatchAdd && filedType != 'DataFields'" class="setOpt-batch">
+      <el-input v-model="addOptionText" type="textarea" clearable :rows="4" resize="none"
+                @keydown.enter="addOption('add')"
+                placeholder="支持换行、逗号、空格分隔，自动去重，最多添加100个，手动按回车键自动进行追加操作"></el-input>
+      <div class="w-flex-right w-margin-top8">
+        <el-button link type="warning" @click="showBatchAdd=false;addOptionText=''">收起</el-button>
+        <el-button link type="primary" @click="addOption('add')">追加</el-button>
+        <el-button link type="primary" @click="addOption('cover')">覆盖</el-button>
+      </div>
+    </div>
+    <div v-if="filedType != 'DataFields'">
+      <!-- 选项列表 -->
+      <el-scrollbar max-height="260px" class="setOpt-list" ref="optionList">
+        <draggable v-model="columnData.moduleDefinition" item-key="id"
+                   handle=".setOpt-list-item-drag" ghost-class="ghost-item"
+                   chosen-class="chosen-item" animation="300" tag="div">
+          <template #item="{element, index}">
+            <div class="setOpt-list-item" :class="[componentWidth>400?'two':'one']">
+              <div class="setOpt-list-item-drag w-default-hover">
+                <span class="bnUIcon bnUIcon-move"></span>
+              </div>
+              <el-input v-model.trim="element.title" clearable
+                        :class="{ 'is-new-option': isNewOption(element.title) }"
+                        @focus="oldTitle = element.title" maxlength="100" show-word-limit
+                        @blur="updateOptionTitle(element.title)"></el-input>
+              <el-switch v-model="element.columnStatus" :active-value="1" :inactive-value="0"
+                         class="w-padding-lr6"></el-switch>
+              <span class="bnUIcon bnUIcon-delete" @click="deleteOption(index, element.title)"></span>
+            </div>
+          </template>
+        </draggable>
+      </el-scrollbar>
+      <div class="w-empty" v-if="!columnData.moduleDefinition || columnData.moduleDefinition.length == 0">暂无选项数据</div>
+    </div>
+    <div class="w-margin-top8" v-else>
+      <BnSelect v-model="columnData.insideDataSourceInfo.field" clearable filterable
+                :labelInValue="false" placeholder="请选择你的数据字典"
+                :pathUrl="'/ipaas/web/enum/userList'"
+                :post-data="{
+                  pageSize: 1000,
+                  pageNum: 1,
+                  data: {
+                    type: 1,
+                    }
+                }"
+                :postFunc="postFunc"
+      ></BnSelect>
+    </div>
+  </div>
+</template>
+
+<script>
+import {cloneDeep} from "lodash";
+
+export default {
+  name: "setOption",
+  props: {
+    columnData: {
+      type: Object,
+      default: () => ({}),
+    },
+    openDataField: Boolean, // 是否支持数据字典配置
+    postFunc: Function, // API请求函数
+    extendPost: Object, // 额外的请求参数
+  },
+  data() {
+    return {
+      addOptionText: "",    // 批量添加输入框内容
+      showBatchAdd: false,  // 是否显示批量添加区域
+      newOptions: [],       // 新增选项名称数组（用于橘黄色高亮）
+      oldTitle: "",         // 记录修改前的标题（用于更新newOptions）
+      componentWidth: 0,    // 组件宽度
+      filedType: "",  //是否选择数据字典 option选项  DataFields数据字典
+    };
+  },
+  mounted() {
+    this.filedType = this.columnData.insideDataSourceInfo?.type || ''
+    // 计算组件宽度
+    this.calculateWidth();
+  },
+  methods: {
+    /**
+     * 计算组件宽度
+     */
+    calculateWidth() {
+      this.$nextTick(() => {
+        const el = this.$el;
+        if (el) {
+          this.componentWidth = el.offsetWidth;
+        }
+      });
+    },
+    /**
+     * 切换字典还是选项
+     */
+    changeFiledType() {
+      this.columnData.moduleDefinition=[];
+      this.columnData.defaultInfo={};
+      this.columnData.insideDataSourceInfo = {}
+      if(this.filedType == 'DataFields'){
+        this.columnData.insideDataSourceInfo = { type: "DataFields",table:'',field:''};
+      }
+    },
+    /**
+     * 判断是否为新增选项（用于橘黄色高亮）
+     */
+    isNewOption(title) {
+      return this.newOptions.includes(title);
+    },
+
+    /**
+     * 更新选项标题
+     * 当用户修改输入框内容时，同步更新newOptions数组
+     */
+    updateOptionTitle(newTitle) {
+      if (this.oldTitle === newTitle) return;
+      const index = this.newOptions.indexOf(this.oldTitle);
+      if (index > -1) {
+        this.newOptions.splice(index, 1, newTitle);
+      }
+      this.oldTitle = "";
+    },
+
+    /**
+     * 解析批量输入文本
+     * 支持换行、中英文逗号、空格分隔，自动去重，最多100个
+     */
+    parseBatchText(text) {
+      return text.split(/[\n,，\s]+/)
+          .map(item => item.trim())
+          .filter(Boolean)
+          .slice(0, 100); // 限制最多100个
+    },
+
+    /**
+     * 过滤已存在的选项
+     * 返回需要真正新增的选项列表
+     */
+    filterExistingOptions(optionList) {
+      const existingTitles = this.columnData.moduleDefinition.map(item => item.title);
+      return optionList.filter(title => !existingTitles.includes(title));
+    },
+
+    /**
+     * 构造选项对象
+     */
+    buildOptions(optionList, idList) {
+      const startSeq = this.columnData.moduleDefinition.length + 1;
+      return optionList.map((title, index) => ({
+        sequence: startSeq + index,
+        code: idList[index],
+        columnStatus: 1,
+        id: idList[index],
+        title,
+      }));
+    },
+
+    /**
+     * 滚动到列表底部
+     */
+    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;
+          }
+        }
+      });
+    },
+
+    /**
+     * 添加选项
+     * @param {String} type - 操作类型：'add'追加、'cover'覆盖、undefined单个添加
+     */
+    async addOption(type) {
+      let optionList = [];
+      // 单个添加
+      if (!type) {
+        const sort = this.newOptions.length + 1;
+        const title = `选项${sort}`;
+        optionList = [title];
+        this.newOptions.push(title);
+      }
+      // 批量添加
+      else {
+        // 解析并去重
+        optionList = [...new Set(this.parseBatchText(this.addOptionText))];
+        // 所有新输入的名字都加入newOptions（包括重复的，用于高亮显示）
+        this.newOptions.push(...optionList);
+
+        // 过滤已存在的选项
+        optionList = this.filterExistingOptions(optionList);
+
+        // 如果没有需要新增的选项，直接返回
+        if (optionList.length === 0) return;
+      }
+      // 请求生成唯一ID
+      const appId = this.extendPost?.appId || 'noApp';
+      const res = await this.postFunc(
+          `/v2/projects/customId/${optionList.length}/${appId}`,
+          null,
+          'get'
+      );
+      if (!res.code) {
+        const options = this.buildOptions(optionList, res.data);
+
+        // 覆盖或追加
+        this.columnData.moduleDefinition = type === 'cover'
+            ? cloneDeep(options)
+            : [...this.columnData.moduleDefinition, ...options];
+
+        this.scrollToBottom();
+      }
+    },
+    /**
+     * 删除选项
+     */
+    deleteOption(index, title) {
+      this.columnData.moduleDefinition.splice(index, 1);
+      // 同步删除newOptions中的记录
+      const newOptionIndex = this.newOptions.indexOf(title);
+      if (newOptionIndex > -1) {
+        this.newOptions.splice(newOptionIndex, 1);
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.setOpt {
+  // 顶部操作栏
+  &-top {
+    height: 32px;
+    font-size: 14px;
+
+    &-title {
+      font-weight: 500;
+    }
+  }
+
+  // 批量添加区域
+  &-batch {
+    margin-top: 10px;
+  }
+
+  &-filedType .el-segmented {
+    --el-segmented-item-selected-color: #fff;
+    --el-segmented-item-selected-bg-color: #409EFF;
+    --el-border-radius-base: 16px;
+  }
+
+  // 选项列表
+  &-list {
+    margin-top: 10px;
+    padding-right: 10px;
+    & .el-scrollbar__view > div {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      &.two {
+        width: calc(50% - 5px);
+      }
+
+      &.one {
+        width: 100%;
+      }
+
+      &-drag {
+        padding-right: 8px;
+      }
+
+      // 新增选项橘黄色高亮样式
+      :deep(.is-new-option) {
+        .el-input__wrapper {
+          box-shadow: 0 0 0 1px #ff9800 inset;
+
+          &:hover, &.is-focus {
+            box-shadow: 0 0 0 1px #ff9800 inset !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/BnColumnConfig/component/setRelationOption/ConditionList.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="condition-list">
+    <!-- 空状态提示 -->
+    <div v-if="showEmpty" class="condition-list__empty">
+      &nbsp;&nbsp;没有设置条件，
+      <el-button type="text" @click="handleAdd()">新增条件</el-button>
+    </div>
+    
+    <!-- 提示信息（仅非第一级且未选中父级时显示） -->
+    <div v-if="showTip" class="condition-list__tip">
+      选中父级菜单，才能设置子级选项
+    </div>
+    
+    <!-- 可拖拽的选项列表 -->
+    <draggable
+      v-if="showList"
+      v-model="localOptions"
+      item-key="id"
+      handle=".drag-handle"
+      ghost-class="ghost-item"
+      chosen-class="chosen-item"
+      animation="300"
+      @end="handleDragEnd"
+    >
+      <template #item="{element, index}">
+        <div
+          class="condition-item"
+          :class="{ 'condition-item--active': isActive(element) }"
+          @click="$emit('select', element)"
+        >
+          <!-- 拖拽手柄 -->
+          <div class="condition-item__drag drag-handle">
+            <span class="bnUIcon bnUIcon-move"></span>
+          </div>
+          
+          <!-- 选项名称输入框 -->
+          <div class="condition-item__input">
+            <el-input v-model="element.title" placeholder="设置名称"/>
+          </div>
+          
+          <!-- 操作按钮组 -->
+          <div class="condition-item__actions">
+            <!-- 添加按钮 -->
+            <span
+              class="condition-item__action-icon bnUIcon bnUIcon-add"
+              @click.stop="handleAdd(index)"
+              title="添加"
+            />
+            
+            <!-- 启用/禁用开关 -->
+            <el-switch 
+              v-model="element.columnStatus" 
+              active-value="1" 
+              inactive-value="0"
+              @click.stop
+            />
+            
+            <!-- 删除按钮 -->
+            <span
+              class="condition-item__action-icon bnUIcon bnUIcon-delete"
+              @click.stop="$emit('delete', index)"
+              title="删除"
+            />
+          </div>
+        </div>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+
+/**
+ * 条件列表组件
+ * 用于显示和管理联动选项列表，支持拖拽排序
+ */
+export default {
+  name: 'ConditionList',
+  
+  components: {
+    draggable
+  },
+  
+  props: {
+    // 选项列表数据
+    options: {
+      type: Array,
+      default: () => []
+    },
+    
+    // 当前选中的选项
+    selectedOption: {
+      type: Object,
+      default: null
+    },
+    
+    // 当前级别（0表示第一级）
+    level: {
+      type: Number,
+      required: true
+    },
+    
+    // 是否为第一级
+    isFirstLevel: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 父级是否已选中（仅非第一级需要）
+    hasParentSelected: {
+      type: Boolean,
+      default: true
+    }
+  },
+  
+  emits: ['select', 'add', 'delete', 'update:options'],
+  
+  computed: {
+    // 本地选项列表（用于v-model）
+    localOptions: {
+      get() {
+        return this.options || [];
+      },
+      set(value) {
+        this.$emit('update:options', value);
+      }
+    },
+    
+    // 是否显示提示信息（仅非第一级且未选中父级时显示）
+    showTip() {
+      return !this.isFirstLevel && !this.hasParentSelected;
+    },
+    
+    // 是否显示空状态（有父级选中或是第一级，且列表为空时显示）
+    showEmpty() {
+      return (this.isFirstLevel || this.hasParentSelected) && this.localOptions.length === 0;
+    },
+    
+    // 是否显示列表
+    showList() {
+      return this.localOptions.length > 0;
+    }
+  },
+  
+  methods: {
+    /**
+     * 判断是否为当前选中项
+     */
+    isActive(element) {
+      return this.selectedOption?.id === element.id;
+    },
+    
+    /**
+     * 处理添加操作
+     */
+    handleAdd(index) {
+      this.$emit('add', index !== undefined ? index : -1);
+    },
+    
+    /**
+     * 处理拖拽结束
+     */
+    handleDragEnd() {
+      // 更新序号
+      this.localOptions.forEach((option, index) => {
+        option.sequence = index;
+      });
+      this.$emit('update:options', this.localOptions);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.condition-list {
+  height: 100%;
+  overflow-y: auto;
+  
+  // 空状态
+  &__empty {
+    padding: 10px;
+    font-size: 12px;
+    color: #999;
+    
+    .el-button {
+      font-size: 12px;
+    }
+  }
+  
+  // 提示信息
+  &__tip {
+    padding: 10px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+// 条件项样式
+.condition-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 34px;
+  transition: background-color 0.3s;
+  cursor: pointer;
+  
+  &--active {
+    background-color: #e0ecfe;
+  }
+  
+  &:hover {
+    background-color: #eef5fe;
+  }
+  
+  // 拖拽手柄
+  &__drag {
+    width: 25px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    cursor: move;
+    flex-shrink: 0;
+  }
+  
+  // 输入框
+  &__input {
+    flex: 1;
+    padding: 2px 5px;
+    min-width: 0;
+  }
+  
+  // 操作按钮组
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding-right: 5px;
+    flex-shrink: 0;
+  }
+  
+  // 操作图标
+  &__action-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: opacity 0.3s;
+    
+    &:hover {
+      opacity: 0.6;
+    }
+    
+    &.bnUIcon-add {
+      color: #67c23a;
+    }
+    
+    &.bnUIcon-delete {
+      color: #f56c6c;
+    }
+  }
+}
+
+// 拖拽效果
+.ghost-item {
+  opacity: 0.5;
+  background: #f0f0f0;
+}
+
+.chosen-item {
+  opacity: 0.9;
+}
+</style>
+