@bytenew/bn-bus-ui 1.1.463 → 1.1.464

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

@@ -1,642 +0,0 @@
-<template>
-  <el-dialog v-model="show" title="联动组件选项配置" top="5vh"
-             :width="dialogWidth" :close-on-click-modal="false" :destroy-on-close="true" :fullscreen="fullscreen"
-             append-to-body>
-    <!-- 主内容区域 -->
-    <div class="setRelationOpt" v-if="moduleDefinition?.header">
-      <!-- 空状态提示与批量添加 -->
-      <div class="setRelationOpt-header" v-if="!showBatch">
-        <el-button type="text" @click="addLevel(0)" v-if="!hasLevels">添加选项</el-button>
-        <el-button type="text" @click="showBatch=true">批量添加</el-button>
-      </div>
-      <div v-else class="w-flex-between">
-        <!-- 输入框 -->
-        <div style="width: calc(100% - 330px)">
-          <el-input type="textarea" :rows="5" resize="none" v-model="batchAddContent"
-                    placeholder="示例：&#10;质量问题+上衣&#10;服务问题+处理速度&#10;质量问题+上衣+褪色&#10;服务问题+态度+恶劣"/>
-        </div>
-        <!-- 使用说明 -->
-        <div class="setRelationOpt-tip">
-          <div class="w-margin-bottom4"><span class="w-font-weight w-font16 w-color-blue">1. </span>每行代表一条选项，每一级通过+分隔
-          </div>
-          <div class="w-margin-bottom4"><span class="w-font-weight w-font16 w-color-blue">2. </span>选项名称中请不要使用"+
-            - , "诸如此类特殊符号
-          </div>
-          <div class="w-margin-bottom4"><span class="w-font-weight w-font16 w-color-blue">3. </span>对于重复的名字我们将帮您去重合并
-          </div>
-          <div class="w-margin-bottom4"><span class="w-font-weight w-font16 w-color-blue">4. </span>
-            <span class="w-color-orange">请注意</span>，批量操作每次最多添加2000行，超出自动忽略
-          </div>
-          <div >
-            <el-button type="text" @click="showBatch = false">收起</el-button>
-            <el-button type="text" :loading="loading" :disabled="loading" @click="handleBatchAdd">确定</el-button>
-          </div>
-        </div>
-
-      </div>
-      <!-- 联动级别列表 -->
-      <div class="setRelationOpt-levels">
-        <div v-for="(header, index) in moduleDefinition.header" :key="header.id" class="setRelationOpt-levels-column">
-          <!-- 级别头部 -->
-          <level-header :title="header.title" :level="header.level" :can-add-next="canAddNextLevel(header)"
-                        :can-delete="isLastLevel(header)"
-                        @update:title="header.title = $event" @add-level="addLevel(header.level)"
-                        @delete-level="deleteLevel(index)"/>
-          <!-- 选项列表 -->
-          <condition-list
-              :options="getOptions(index)"
-              :selected-option="selectedConditions[index]"
-              :level="index"
-              :is-first-level="index === 0"
-              :has-parent-selected="index === 0 || !!selectedConditions[index - 1]"
-              @update:options="updateOptions(index, $event)"
-              @select="item => selectCondition(item, index)"
-              @add="insertIndex => addCondition(index, insertIndex)"
-              @delete="itemIndex => deleteCondition(index, itemIndex)"
-          />
-        </div>
-      </div>
-      <div class="w-empty" v-if="!moduleDefinition.header || moduleDefinition.header.length == 0">还未设置选项</div>
-    </div>
-    <!-- 底部按钮 -->
-    <template #footer>
-      <div class="w-flex-right">
-        <el-button @click="show = false">取消</el-button>
-<!--        <el-button @click="fullscreen = !fullscreen">全屏</el-button>-->
-        <el-button type="primary" @click="handleConfirm">确认</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-import {cloneDeep} from "lodash";
-import ConditionList from './ConditionList.vue';
-import LevelHeader from './LevelHeader.vue';
-
-/**
- * 联动选项配置组件
- * 用于配置多级联动选项（最多5级）
- */
-export default {
-  name: "SetRelationOption",
-
-  components: {
-    ConditionList,
-    LevelHeader
-  },
-
-  props: {
-    // API请求函数
-    postFunc: {
-      type: Function,
-      required: true
-    },
-
-    // 额外的请求参数
-    extendPost: {
-      type: Object,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      show: false,
-      showBatch: false,
-      fullscreen: false,
-      columnInfo: {},
-      maxLevel: 5,                    // 最多5级联动
-      loading: false,                 // 加载状态
-      selectedConditions: [],         // 各级选中的条件
-      batchAddContent: '',            // 批量添加内容
-      batchIds: [],                   // 批量添加的ID列表
-      batchIdIndex: 0                 // 批量添加ID的索引
-    };
-  },
-
-  computed: {
-    // 模块定义
-    moduleDefinition() {
-      return this.columnInfo.moduleDefinition || {};
-    },
-
-    // 是否有级别
-    hasLevels() {
-      return this.moduleDefinition.header?.length > 0;
-    },
-
-    // 选项列表
-    optionList() {
-      return this.moduleDefinition.optionList || [];
-    },
-
-    /**
-     * 计算对话框宽度
-     * 根据级别数量动态调整：基础宽度 + (级别数 × (列宽 + 间距))
-     */
-    dialogWidth() {
-      const levelCount = this.moduleDefinition.header?.length || 0;
-
-      // 没有级别时使用最小宽度
-      if (levelCount <= 3) {
-        return '860px';
-      }
-
-      // 每个级别列宽240px + 间距12px = 252px
-      // 基础边距左右各20px = 40px
-      const baseWidth = 40;
-      const columnWidth = 240;
-      const gapWidth = 12;
-      const perLevelWidth = columnWidth + gapWidth;
-
-      // 计算总宽度：基础宽度 + (级别数 × 每级宽度) - 最后一个间距
-      const calculatedWidth = baseWidth + (levelCount * perLevelWidth) - gapWidth;
-
-      // 设置最小宽度600px，最大宽度1400px（支持最多5级）
-      const minWidth = 600;
-      const maxWidth = 1400;
-      const finalWidth = Math.min(Math.max(calculatedWidth, minWidth), maxWidth);
-
-      return `${finalWidth}px`;
-    }
-  },
-
-  methods: {
-    /**
-     * 打开对话框
-     */
-    open(column) {
-      this.columnInfo = cloneDeep(column);
-      this.show = true;
-      this.fullscreen = false;
-      this.selectedConditions = [];
-
-      // 默认选中第一级的第一个选项
-      if (this.optionList.length > 0) {
-        this.selectCondition(this.optionList[0], 0);
-      }
-    },
-
-    /**
-     * 判断是否可以添加下一级
-     */
-    canAddNextLevel(header) {
-      return header.level < this.maxLevel &&
-          header.level === this.moduleDefinition.header.length;
-    },
-
-    /**
-     * 判断是否为最后一级
-     */
-    isLastLevel(header) {
-      return header.level === this.moduleDefinition.header.length;
-    },
-
-    /**
-     * 获取指定级别的选项列表
-     */
-    getOptions(levelIndex) {
-      if (levelIndex === 0) {
-        return this.optionList;
-      }
-      return this.selectedConditions[levelIndex - 1]?.children || [];
-    },
-
-    /**
-     * 更新选项列表
-     */
-    updateOptions(levelIndex, newOptions) {
-      if (levelIndex === 0) {
-        this.moduleDefinition.optionList = newOptions;
-      } else if (this.selectedConditions[levelIndex - 1]) {
-        this.selectedConditions[levelIndex - 1].children = newOptions;
-      }
-    },
-
-    /**
-     * 选中条件
-     */
-    selectCondition(item, levelIndex) {
-      // 设置当前级别的选中项
-      this.selectedConditions.splice(levelIndex, this.maxLevel, item);
-
-      // 自动选中子级的第一个
-      this.autoSelectChildren(item, levelIndex);
-    },
-
-    /**
-     * 自动选中子级的第一个选项
-     */
-    autoSelectChildren(item, levelIndex) {
-      if (item?.children?.length > 0) {
-        this.selectedConditions.splice(levelIndex + 1, 1, item.children[0]);
-        this.autoSelectChildren(item.children[0], levelIndex + 1);
-      }
-    },
-
-    /**
-     * 添加级别
-     */
-    async addLevel(currentLevel) {
-      if (this.loading) return;
-
-      this.loading = true;
-      try {
-        const ids = await this.fetchIds(1);
-        if (!ids?.length) return;
-
-        this.moduleDefinition.header.push({
-          id: ids[0],
-          code: ids[0]+'',
-          title: `${currentLevel + 1}级选项`,
-          level: currentLevel + 1,
-          parentId: -1,
-          parentCode: '-1',
-          sequence: 0,
-          color: "#666666",
-          columnStatus: "1"
-        });
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    /**
-     * 删除级别
-     */
-    async deleteLevel(levelIndex) {
-      const idsToDelete = this.collectLevelIds(levelIndex);
-
-      // 如果是新组件或没有数据，直接删除
-      if (!this.columnInfo.id) {
-        this.removeLevelData(levelIndex);
-        return;
-      }
-
-      // 检查是否可以删除
-      try {
-        const canDelete = await this.checkCanDelete(idsToDelete);
-        if (canDelete) {
-          this.removeLevelData(levelIndex);
-        } else {
-          this.$message.warning("有选项已关联工单数据，无法删除");
-        }
-      } catch (error) {
-        console.error('删除级别失败:', error);
-      }
-    },
-
-    /**
-     * 移除级别数据
-     */
-    removeLevelData(levelIndex) {
-      this.moduleDefinition.header.splice(levelIndex, 1);
-
-      if (levelIndex === 0) {
-        this.moduleDefinition.optionList = [];
-      } else {
-        this.removeChildrenAtLevel(this.optionList, 1, levelIndex);
-      }
-
-      this.selectedConditions = [];
-    },
-
-    /**
-     * 收集指定级别的所有选项ID
-     */
-    collectLevelIds(levelIndex) {
-      const ids = [];
-
-      if (levelIndex === 0) {
-        this.optionList.forEach(opt => ids.push(opt.id));
-      } else {
-        const collect = (options, level) => {
-          options.forEach(opt => {
-            if (level === levelIndex && opt.children) {
-              opt.children.forEach(child => ids.push(child.id));
-            } else if (opt.children) {
-              collect(opt.children, level + 1);
-            }
-          });
-        };
-        collect(this.optionList, 1);
-      }
-
-      return ids;
-    },
-
-    /**
-     * 递归移除指定级别的子选项
-     */
-    removeChildrenAtLevel(options, currentLevel, targetLevel) {
-      options.forEach(opt => {
-        if (currentLevel === targetLevel) {
-          opt.children = [];
-        } else if (opt.children) {
-          this.removeChildrenAtLevel(opt.children, currentLevel + 1, targetLevel);
-        }
-      });
-    },
-
-    /**
-     * 添加条件
-     */
-    async addCondition(levelIndex, insertIndex) {
-      if (this.loading) return;
-
-      this.loading = true;
-      try {
-        const ids = await this.fetchIds(1);
-        if (!ids?.length) return;
-
-        const isFirstLevel = levelIndex === 0;
-        const targetArray = isFirstLevel
-            ? this.optionList
-            : this.selectedConditions[levelIndex - 1]?.children;
-
-        if (!targetArray) return;
-
-        const newOption = {
-          id: ids[0],
-          code: ids[0]+'',
-          title: `选项${targetArray.length + 1}`,
-          level: levelIndex + 1,
-          parentId: isFirstLevel ? 0 : this.selectedConditions[levelIndex - 1].id,
-          parentCode: (isFirstLevel ? 0 : this.selectedConditions[levelIndex - 1].id)+'',
-          sequence: insertIndex + 1,
-          color: "#666666",
-          columnStatus: "1",
-          children: []
-        };
-
-        targetArray.splice(insertIndex + 1, 0, newOption);
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    /**
-     * 删除条件
-     */
-    async deleteCondition(levelIndex, itemIndex) {
-      const targetArray = this.getOptions(levelIndex);
-      const option = targetArray[itemIndex];
-
-      // 如果是新组件，直接删除
-      if (!this.columnInfo.id) {
-        targetArray.splice(itemIndex, 1);
-        return;
-      }
-      console.log(option)
-
-      // 检查是否可以删除
-      try {
-        const canDelete = await this.checkCanDelete([option.id]);
-        if (canDelete) {
-          targetArray.splice(itemIndex, 1);
-        } else {
-          this.$message.warning("该选项已关联工单数据，无法删除");
-        }
-      } catch (error) {
-        console.error('删除条件失败:', error);
-      }
-    },
-
-    /**
-     * 批量添加
-     */
-    async handleBatchAdd() {
-      if (this.loading || !this.batchAddContent) return;
-      this.loading = true;
-      try {
-        // 解析输入内容
-        const parsedData = this.parseBatchContent(this.batchAddContent);
-        if (!parsedData.conditions.length) {
-          this.$message.warning('没有有效的选项数据');
-          return;
-        }
-
-        // 获取所需的ID
-        const ids = await this.fetchIds(parsedData.totalCount);
-        if (!ids) return;
-
-        this.batchIds = ids;
-        this.batchIdIndex = 0;
-
-        // 添加需要的级别
-        this.addLevelsIfNeeded(parsedData.maxLevel);
-
-        // 插入选项数据
-        parsedData.conditions.forEach(conditionArray => {
-          this.insertBatchCondition(conditionArray, this.optionList);
-        });
-
-        // this.batchAddContent = '';
-        this.$message.success('批量添加成功');
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    /**
-     * 解析批量添加的内容
-     */
-    parseBatchContent(content) {
-      const lines = content.split("\n").map(line => line.trim()).filter(line => line).slice(0, 2000);
-
-      const conditions = [];
-      let maxLevel = 0;
-      let totalCount = 0;
-
-      lines.forEach(line => {
-        const items = line.split("+")
-            .map(item => item.trim())
-            .filter(item => item)
-            .slice(0, this.maxLevel);
-
-        if (items.length > 0) {
-          conditions.push(items);
-          maxLevel = Math.max(maxLevel, items.length);
-          totalCount += items.length;
-        }
-      });
-
-      // 计算需要添加的级别数
-      const currentLevelCount = this.moduleDefinition.header.length;
-      const newLevelCount = Math.max(0, maxLevel - currentLevelCount);
-
-      return {
-        conditions,
-        maxLevel,
-        totalCount: totalCount + newLevelCount
-      };
-    },
-
-    /**
-     * 添加需要的级别
-     */
-    addLevelsIfNeeded(targetLevel) {
-      const currentLevel = this.moduleDefinition.header.length;
-
-      for (let i = currentLevel; i < targetLevel; i++) {
-        this.moduleDefinition.header.push({
-          id: this.batchIds[this.batchIdIndex++],
-          title: `选项${i + 1}级标题`,
-          level: i + 1,
-          parentId: -1,
-          sequence: 0,
-          color: "#666666",
-          columnStatus: "1"
-        });
-      }
-    },
-
-    /**
-     * 递归插入批量条件
-     */
-    insertBatchCondition(titles, optionList, level = 0, parentId = 0) {
-      if (titles.length === 0) return optionList;
-
-      const title = titles[0];
-      const existingIndex = optionList.findIndex(opt => opt.title === title);
-
-      if (existingIndex > -1) {
-        // 已存在，继续处理子级
-        this.insertBatchCondition(
-            titles.slice(1),
-            optionList[existingIndex].children,
-            level + 1,
-            optionList[existingIndex].id
-        );
-      } else {
-        // 不存在，创建新选项
-        const newOption = this.createBatchOption(titles, level, parentId, optionList.length);
-        if (newOption) {
-          optionList.push(newOption);
-        }
-      }
-
-      return optionList;
-    },
-
-    /**
-     * 创建批量选项（含子级）
-     */
-    createBatchOption(titles, level, parentId, sequence) {
-      if (titles.length === 0 || this.batchIdIndex >= this.batchIds.length) {
-        return null;
-      }
-
-      const id = this.batchIds[this.batchIdIndex++];
-      const option = {
-        id,
-        code: id + '',
-        parentId,
-        parentCode:parentId+'',
-        title: titles[0],
-        level: level + 1,
-        color: "#666666",
-        columnStatus: "1",
-        sequence,
-        children: []
-      };
-
-      // 递归创建子级
-      if (titles.length > 1) {
-        const child = this.createBatchOption(titles.slice(1), level + 1, option.id, 0);
-        if (child) {
-          option.children.push(child);
-        }
-      }
-
-      return option;
-    },
-
-    /**
-     * 获取新ID
-     */
-    async fetchIds(count) {
-      try {
-        const res = await this.postFunc(
-            `/v2/projects/customId/${count}/${this.extendPost.appId}`,
-            null,
-            'get'
-        );
-
-        if (res.code === 0 && res.data) {
-          return res.data;
-        }
-
-        this.$message.error('获取ID失败');
-        return null;
-      } catch (error) {
-        console.error('获取ID失败:', error);
-        this.$message.error('获取ID失败');
-        return null;
-      }
-    },
-
-    /**
-     * 检查是否可以删除
-     */
-    async checkCanDelete(optionIds) {
-      try {
-        const res = await this.postFunc('/v2/project/column/canDelRelationOption', {
-          projectId: this.extendPost.tableId,
-          columnId: this.columnInfo.id,
-          optionId: optionIds.join(','),
-        });
-        return res.code === 0 && res.data;
-      } catch (error) {
-        console.error('检查删除权限失败:', error);
-        return false;
-      }
-    },
-    /**
-     * 确认保存
-     */
-    handleConfirm() {
-      this.$emit('confirm', this.columnInfo);
-      this.show = false;
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.setRelationOpt {
-  min-height: 280px;
-  // 头部区域
-  &-header {
-    display: flex;
-    align-items: center;
-  }
-
-  &-tip {
-    width: 330px;
-    color: #888;
-    font-size: 12px;
-    padding-left: 8px;
-  }
-
-  // 级别列表容器
-  &-levels {
-    display: flex;
-    gap: 12px;
-    padding-bottom: 10px;
-
-    // 级别列
-    &-column {
-      flex-shrink: 0;
-      width: 240px;
-      height: 360px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-</style>