@bytenew/bn-bus-ui 1.1.461 → 1.1.463

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

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