@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnWorkSettingDrop/advancedOptions.js

@@ -0,0 +1,112 @@
+/**
+ * 工单高级设置项配置
+ *
+ * 与开放平台 editBusTable.advancedOptions 及接口返回的 tableInfo.advanced 字段对应。
+ *
+ * 后台配置 -> 接口 advanced 字段映射：
+ * | 后台 advancedOptions.type | tableInfo.advanced 字段        | 说明                          |
+ * |--------------------------|-------------------------------|-------------------------------|
+ * | orderRemark              | automaticRemark.enable        | 订单备注                      |
+ * | notice                   | notice.enable                 | 消息通知                      |
+ * | tb/jxz/flyPigeon/...     | buyerNotice.enable + platforms| 买家通知（前端合并为一项）     |
+ * | autoDistribute           | autoDistribute.enable         | 自动分配                      |
+ * | columnPsychic            | columnPsychic.enable          | 组件显隐                      |
+ * | submitCheck              | submitCheck.enable            | 提交校验                      |
+ * | shareConfig              | shareConfig.enable            | 分享配置                      |
+ * | benBenAIOrder            | benBenAIOrder.enable          | 犇犇AI建单                    |
+ * | dataSynchronization      | dataSynchronization.enable    | 数据同步                      |
+ */
+
+/** 买家通知支持的平台类型，对应 buyerNotice.platforms 数组元素 */
+export const BUYER_NOTICE_PLATFORMS = ['tb', 'jxz', 'flyPigeon', 'jdPop', 'jdSelf', 'pdd', 'ks'];
+
+/**
+ * 高级设置菜单项完整配置
+ *
+ * @typedef {Object} AdvancedSettingOption
+ * @property {string} type         - 设置项唯一标识，也作为 iframe 路由 type（除非指定 routeType）
+ * @property {string} title       - 下拉菜单展示文案
+ * @property {string} icon          - bnUIcon 图标类名
+ * @property {string} advancedKey   - 对应 tableInfo.advanced 下的字段名，通过 enable 控制显隐
+ * @property {string} [routeType]   - iframe 路由 type，当与 type 不一致时使用（如数据同步）
+ * @property {string} [iconClass]   - 图标附加样式类
+ */
+export const ADVANCED_SETTING_OPTIONS = [
+  {
+    type: 'benBenAIOrder',
+    title: '犇犇AI建单',
+    icon: 'bnUIcon-benAi',
+    advancedKey: 'benBenAIOrder',
+    iconClass: 'w-color-red w-font-weight600 w-font17',
+  },
+  {
+    type: 'buyerNotice',
+    title: '买家通知',
+    icon: 'bnUIcon-bell',
+    advancedKey: 'buyerNotice',
+    iconClass: 'w-color-orange',
+  },
+  {
+    type: 'notice',
+    title: '消息通知',
+    icon: 'bnUIcon-message',
+    advancedKey: 'notice',
+    iconClass: 'w-color-orange',
+  },
+  {
+    type: 'automaticRemark',
+    title: '订单备注',
+    icon: 'bnUIcon-remarks',
+    advancedKey: 'automaticRemark',
+    iconClass: 'w-color-orange',
+  },
+  {
+    type: 'autoDistribute',
+    title: '自动分配',
+    icon: 'bnUIcon-robot',
+    advancedKey: 'autoDistribute',
+    iconClass: 'w-color-orange',
+  },
+  {
+    type: 'columnPsychic',
+    title: '组件显隐',
+    icon: 'bnUIcon-psychic',
+    advancedKey: 'columnPsychic',
+    iconClass: 'w-color-orange w-font17',
+  },
+  {
+    type: 'submitCheck',
+    title: '提交校验',
+    icon: 'bnUIcon-submitCheck',
+    advancedKey: 'submitCheck',
+    iconClass: 'w-color-orange w-font17',
+  },
+  {
+    type: 'shareConfig',
+    title: '分享配置',
+    icon: 'bnUIcon-share',
+    advancedKey: 'shareConfig',
+    iconClass: 'w-color-orange',
+  },
+  {
+    type: 'dataSynchronization',
+    title: '数据同步',
+    icon: 'bnUIcon-linkage',
+    advancedKey: 'dataSynchronization',
+    // 后台字段为 dataSynchronization，iframe 路由为 simpleDataSynchronization
+    routeType: 'simpleDataSynchronization',
+    iconClass: 'w-color-orange',
+  },
+];
+
+/**
+ * 根据 tableInfo.advanced 获取当前表可见的高级设置菜单项
+ * @param {Object} advanced - tableInfo.advanced 对象
+ * @returns {AdvancedSettingOption[]}
+ */
+export function getVisibleAdvancedOptions(advanced) {
+  if (!advanced) return [];
+  return ADVANCED_SETTING_OPTIONS.filter(
+    (option) => advanced[option.advancedKey]?.enable === true,
+  );
+}

package/packages/BnWorkSettingDrop/benBenAIUtil.js

@@ -0,0 +1,89 @@
+/**
+ * 犇犇AI建单 & 普通高级设置 iframe URL 构建工具
+ *
+ * 普通设置页走 app.html#/simpleOrderFun/{appId}/{tableId}/{type}
+ * 犇犇AI建单走 agent.html#/settingCenter/aiCreateOrder/{tabName}
+ */
+
+/** 犇犇AI建单全屏面板 Tab 配置 */
+export const BENBEN_AI_TABS = [
+  { label: '建单配置', name: 'editConfig' },
+  { label: '数据分析', name: 'dataAnalyze' },
+  { label: '调优中心', name: 'tuningCenter' },
+];
+
+/**
+ * 各 Tab 对应的 defaultGetBaseUrl 入参 type
+ * dataAnalyze 使用 agent 域名但路由不同，type 传 undefined 走默认 agent 逻辑
+ */
+export const SETTING_TAB_BASE_TYPE = {
+  editConfig: 'benBenAIOrder',
+  dataAnalyze: undefined,
+  tuningCenter: 'benBenAIOrder',
+};
+
+/**
+ * 根据当前环境和设置项类型，获取 iframe 基础 URL
+ *
+ * 本地开发：
+ *   - benBenAIOrder -> http://localhost:5177（agent 项目）
+ *   - 其他         -> http://localhost:8088（app 项目）
+ * 生产环境：
+ *   - benBenAIOrder -> /agent.html
+ *   - 其他         -> /app.html
+ *
+ * @param {string} type    - 设置项 type，如 benBenAIOrder、buyerNotice
+ * @param {string} baseUrl - 普通设置默认基础路径，默认 /app.html
+ * @returns {string}
+ */
+export function defaultGetBaseUrl(type, baseUrl = '/app.html') {
+  const host = window.location.host;
+  if (host.includes('localhost')) {
+    return type === 'benBenAIOrder' ? 'http://localhost:5177' : 'http://localhost:8088';
+  }
+  return type === 'benBenAIOrder' ? '/agent.html' : baseUrl;
+}
+
+/**
+ * 将基础 URL 补全为带 .html 的路径
+ * @param {string} base      - 如 http://localhost:8088 或 /app.html
+ * @param {string} fallback  - 缺省 html 文件名，如 app.html
+ */
+function resolveHtmlBase(base, fallback) {
+  if (base.endsWith('.html')) return base;
+  if (base.startsWith('http')) return `${base}/${fallback}`;
+  return `/${fallback}`;
+}
+
+/**
+ * 构建普通高级设置 iframe 地址
+ * 示例：/app.html#/simpleOrderFun/50802/1744458/buyerNotice?tableCode=anw_install
+ *
+ * @param {string} base      - defaultGetBaseUrl 返回值
+ * @param {Object} tableInfo - 含 appId、tableId、tableCode
+ * @param {string} type      - iframe 路由 type
+ */
+export function buildSimpleOrderFunUrl(base, tableInfo, type) {
+  const { appId, tableId, tableCode } = tableInfo;
+  const prefix = resolveHtmlBase(base, 'app.html');
+  return `${prefix}#/simpleOrderFun/${appId}/${tableId}/${type}?tableCode=${tableCode}`;
+}
+
+/**
+ * 构建犇犇AI建单配置页 iframe 地址
+ * 示例：/agent.html#/settingCenter/aiCreateOrder/editConfig?tableId=...&full=true&tableMode=true
+ */
+export function buildBenBenSettingUrl(base, tableInfo, tabName) {
+  const { appId, tableId, tableCode, name } = tableInfo;
+  const prefix = base.endsWith('.html') || base.startsWith('http') ? base : '/agent.html';
+  return `${prefix}#/settingCenter/aiCreateOrder/${tabName}?tableId=${tableId}&appId=${appId}&tableCode=${tableCode}&tableName=${encodeURIComponent(name || '')}&full=true&tableMode=true`;
+}
+
+/**
+ * 构建犇犇AI建单「数据分析」Tab iframe 地址
+ * 示例：/agent.html#/simpleBrain/268625922244?tableId=...&tableName=...
+ */
+export function buildBenBenAnalyzeUrl(base, tableInfo, brainId) {
+  const prefix = base.endsWith('.html') || base.startsWith('http') ? base : '/agent.html';
+  return `${prefix}#/simpleBrain/${brainId}?tableId=${tableInfo.tableId}&tableName=${encodeURIComponent(tableInfo.name || '')}`;
+}

package/packages/BnWorkSettingDrop/index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="BnWorkSettingDrop">
+    <!-- 有可用高级设置项时展示下拉菜单 -->
+    <el-dropdown v-if="visibleOptions.length" trigger="click">
+      <div class="BnWorkSettingDrop-title w-flex-center w-cursor-pointer">
+        <slot>{{ tableInfo.name }}</slot>
+        <span class="bnUIcon bnUIcon-setting w-margin-left3 w-color-gray"></span>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="item in visibleOptions"
+            :key="item.type"
+            @click="openSetting(item.type)"
+          >
+            <span
+              :class="['bnUIcon', item.icon, 'w-margin-right5', item.iconClass]"
+            ></span>{{ item.title }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <!-- 无可用设置项时仅展示表名 -->
+    <div v-else class="BnWorkSettingDrop-title w-flex-center">
+      <slot>{{ tableInfo.name }}</slot>
+    </div>
+
+    <!-- 全屏设置面板：普通项走 simpleOrderFun 路由，犇犇AI建单走 agent 独立页 -->
+    <div class="BnWorkSettingDrop-panel" v-if="show">
+      <div class="BnWorkSettingDrop-panel-header">
+        <div class="BnWorkSettingDrop-panel-header-left">
+          <el-page-header :icon="ArrowLeft" @back="closeSetting">
+            <template #content>
+              <span class="text-large font-600 mr-3">{{ tableInfo.name }}</span>
+            </template>
+          </el-page-header>
+          <!-- 犇犇AI建单专属 Tab：建单配置 / 数据分析 / 调优中心 -->
+          <el-tabs
+            v-if="isBenBenAIOrder"
+            v-model="activeTab"
+            class="BnWorkSettingDrop-tabs"
+            @tab-change="handleBenBenTabChange"
+          >
+            <el-tab-pane
+              v-for="tab in benBenTabs"
+              :key="tab.name"
+              :label="tab.label"
+              :name="tab.name"
+            />
+          </el-tabs>
+        </div>
+        <!-- 建单配置 Tab 下的 AI 建单开关，需 postFunc 拉取配置后才展示 -->
+        <el-switch
+          v-if="isBenBenAIOrder && activeTab === 'editConfig' && isShowSwitch"
+          v-model="optStatus"
+          :active-value="1"
+          :inactive-value="0"
+          @change="handleBenBenAIOrderChange"
+        />
+      </div>
+      <iframe
+        class="BnWorkSettingDrop-panel-main"
+        ref="iframe"
+        allow="clipboard-write"
+        :key="url"
+        sandbox="allow-scripts allow-same-origin allow-downloads allow-forms allow-popups allow-top-navigation allow-pointer-lock allow-modals allow-presentation allow-popups-to-escape-sandbox allow-orientation-lock allow-top-navigation-by-user-activation"
+        :src="url"
+      ></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 工单高级设置下拉菜单 + 全屏 iframe 配置面板
+ *
+ * 使用方式：
+ * <BnWorkSettingDrop :tableInfo="tableInfo" :postFunc="post" @close="queryTableInfo" />
+ *
+ * tableInfo 需包含：name、appId、tableId、tableCode、advanced
+ * advanced 各字段 enable 控制菜单项显隐，配置来源见 advancedOptions.js
+ */
+import { ArrowLeft } from '@element-plus/icons-vue';
+import { getVisibleAdvancedOptions, ADVANCED_SETTING_OPTIONS } from './advancedOptions.js';
+import {
+  BENBEN_AI_TABS,
+  SETTING_TAB_BASE_TYPE,
+  defaultGetBaseUrl,
+  buildSimpleOrderFunUrl,
+  buildBenBenSettingUrl,
+  buildBenBenAnalyzeUrl,
+} from './benBenAIUtil.js';
+
+/** 犇犇AI建单「数据分析」Tab 默认大脑 ID，可被 advanced.benBenAIOrder.brainId 覆盖 */
+const DEFAULT_BRAIN_ID = '268625922244';
+
+export default {
+  name: 'BnWorkSettingDrop',
+  props: {
+    /** 表完整信息，至少含 name、appId、tableId、tableCode、advanced */
+    tableInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    /** 项目统一请求方法，用于犇犇AI建单开关的 get / edit 接口 */
+    postFunc: {
+      type: Function,
+      default: null,
+    },
+  },
+  emits: ['close'],
+  data() {
+    return {
+      ArrowLeft,
+      /** 是否展示全屏设置面板 */
+      show: false,
+      /** 当前 iframe 地址 */
+      url: '',
+      /** 当前 iframe 基础域名（app.html 或 agent.html） */
+      localUrl: '',
+      /** 当前是否为犇犇AI建单模式（决定 header 是否展示 Tab 和开关） */
+      isBenBenAIOrder: false,
+      /** 犇犇AI建单当前 Tab */
+      activeTab: 'editConfig',
+      benBenTabs: BENBEN_AI_TABS,
+      /** AI 建单开关状态：0 关闭 / 1 开启 */
+      optStatus: 0,
+      /** 是否展示 AI 建单开关（接口返回有效配置后才为 true） */
+      isShowSwitch: false,
+      /** 犇犇AI建单配置缓存，含 id、open_status 等 */
+      benbenAIOrderConfig: {},
+    };
+  },
+  computed: {
+    /** 根据 tableInfo.advanced 各 enable 字段过滤出可见菜单项 */
+    visibleOptions() {
+      return getVisibleAdvancedOptions(this.tableInfo?.advanced);
+    },
+    /** 数据分析 Tab 使用的大脑 ID */
+    brainId() {
+      return this.tableInfo?.advanced?.benBenAIOrder?.brainId || DEFAULT_BRAIN_ID;
+    },
+  },
+  methods: {
+    /**
+     * 打开指定高级设置项
+     * @param {string} type 设置项类型，如 buyerNotice、benBenAIOrder，见 advancedOptions.js
+     */
+    openSetting(type) {
+      const option = ADVANCED_SETTING_OPTIONS.find((item) => item.type === type);
+      // routeType 用于 advanced 字段名与 iframe 路由不一致的场景，如 dataSynchronization -> simpleDataSynchronization
+      const routeType = option?.routeType || type;
+      this.localUrl = defaultGetBaseUrl(type);
+      if (type === 'benBenAIOrder') {
+        this.isBenBenAIOrder = true;
+        this.activeTab = 'editConfig';
+        this.url = buildBenBenSettingUrl(this.localUrl, this.tableInfo, 'editConfig');
+        this.loadBenBenAIOrderConfig();
+      } else {
+        this.isBenBenAIOrder = false;
+        this.url = buildSimpleOrderFunUrl(this.localUrl, this.tableInfo, routeType);
+      }
+      this.$nextTick(() => {
+        this.show = true;
+      });
+    },
+    /** 供外部 ref 编程式调用，如 $refs.setting.open('notice') */
+    open(type) {
+      this.openSetting(type);
+    },
+    /** 犇犇AI建单 Tab 切换，各 Tab 对应不同 iframe 地址 */
+    handleBenBenTabChange(tabName) {
+      if (!this.isBenBenAIOrder) return;
+
+      this.localUrl = defaultGetBaseUrl(SETTING_TAB_BASE_TYPE[tabName]);
+      if (tabName === 'dataAnalyze') {
+        this.url = buildBenBenAnalyzeUrl(this.localUrl, this.tableInfo, this.brainId);
+      } else {
+        if (tabName === 'editConfig') {
+          this.loadBenBenAIOrderConfig();
+        }
+        this.url = buildBenBenSettingUrl(this.localUrl, this.tableInfo, tabName);
+      }
+    },
+    /** 获取犇犇AI建单配置，决定是否展示开关及当前开关状态 */
+    loadBenBenAIOrderConfig() {
+      if (!this.postFunc) {
+        this.benbenAIOrderConfig = {};
+        this.isShowSwitch = false;
+        this.optStatus = 0;
+        return;
+      }
+      this.postFunc('/agent/config/table/get', { table_id: this.tableInfo.tableId })
+        .then((res) => {
+          if (res?.code === 0 && res.data) {
+            this.benbenAIOrderConfig = res.data;
+            this.optStatus = res.data.open_status;
+            this.isShowSwitch = true;
+          } else {
+            this.benbenAIOrderConfig = {};
+            this.isShowSwitch = false;
+            this.optStatus = 0;
+          }
+        })
+        .catch(() => {
+          this.benbenAIOrderConfig = {};
+          this.isShowSwitch = false;
+          this.optStatus = 0;
+        });
+    },
+    /** 切换犇犇AI建单开关，失败时回滚 optStatus */
+    handleBenBenAIOrderChange() {
+      if (!this.postFunc) return;
+      this.postFunc('/agent/config/table/edit_open_status', {
+        id: this.benbenAIOrderConfig.id,
+        open_status: this.optStatus,
+      }).then((res) => {
+        if (res?.code !== 0) {
+          this.optStatus = this.optStatus === 1 ? 0 : 1;
+        }
+      }).catch(() => {
+        this.optStatus = this.optStatus === 1 ? 0 : 1;
+      });
+    },
+    /** 关闭全屏面板并重置状态，触发 close 事件供父组件刷新 tableInfo */
+    closeSetting() {
+      this.show = false;
+      this.url = '';
+      this.localUrl = '';
+      this.isBenBenAIOrder = false;
+      this.activeTab = 'editConfig';
+      this.isShowSwitch = false;
+      this.optStatus = 0;
+      this.benbenAIOrderConfig = {};
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.BnWorkSettingDrop {
+  &-title {
+    margin-bottom: 16px;
+    padding-right: 20px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &-panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: auto;
+    z-index: 100;
+    background: #fff;
+
+    &-header {
+      height: 42px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #e5e5e5;
+
+      &-left {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+    }
+
+    &-main {
+      width: 100%;
+      height: calc(100% - 47px);
+      border: none;
+    }
+  }
+
+  &-tabs {
+    :deep(.el-tabs__header) {
+      margin-bottom: 0;
+    }
+
+    :deep(.el-tabs__nav-wrap::after) {
+      display: none;
+    }
+  }
+}
+</style>