@bytenew/bn-bus-ui 1.1.463 → 1.1.464

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

@@ -1,321 +0,0 @@
-<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

@@ -1,277 +0,0 @@
-<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>
-