@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnSmartForm/BnBatchFormDialog.vue

@@ -0,0 +1,423 @@
+<template>
+  <div v-if="show" id="batchEditForm" class="bn-batch-form-dialog">
+    <div class="bn-batch-form-dialog-main">
+      <div class="bn-batch-form-dialog-main-top">
+        <slot name="top" :select-count="selectCount">
+          <span>
+            批量编辑
+            <span class="w-color-gray w-font12">
+              已选择 <span class="w-color-blue">{{ selectCount }}</span> 条工单
+            </span>
+          </span>
+        </slot>
+        <span class="sIcon sIcon-close" @click="handleClose"></span>
+      </div>
+      <div class="w-padding20">
+        <slot name="tip">
+          <div class="w-tip bn-batch-form-dialog-tip">
+            <div>
+              <span class="bn-batch-form-dialog-tip-num">1.</span>
+              <span class="w-color-orange">批量编辑不支持组件触发拉取，</span>
+              <span class="w-color-gray">例如：订单号、ERP订单号、物流单号、运单号等组件不允许批量修改。</span>
+            </div>
+            <div>
+              <span class="bn-batch-form-dialog-tip-num">2.</span>
+              <span class="w-color-gray">不可编辑的工单组件不支持批量修改。</span>
+            </div>
+            <div>
+              <span class="bn-batch-form-dialog-tip-num">3.</span>
+              <span class="w-color-gray">手动添加需要修改的组件，注意：如添加的组件最后保存时值为空，则会清空工单组件数据。</span>
+            </div>
+            <slot name="tip-extra"></slot>
+          </div>
+        </slot>
+        <div class="bn-batch-form-dialog-component-row">
+          <BnDrop v-model="formComponent" :options="editComponents" :option-props="{ value: 'columnCode', label: 'name' }" multiple>
+            <span class="w-color-blue w-font13 w-cursor-pointer">请选择组件</span>
+          </BnDrop>
+          <el-popconfirm
+            v-if="formComponent.length > 0"
+            title="确定要清空所有已选组件吗？"
+            confirm-button-text="确定"
+            cancel-button-text="取消"
+            @confirm="clearAllComponents"
+          >
+            <template #reference>
+              <span class="bn-batch-form-dialog-clear-all">
+                <span class="sIcon sIcon-delete"></span>
+                一键清空组件
+              </span>
+            </template>
+          </el-popconfirm>
+        </div>
+      </div>
+      <div v-if="formComponent.length > 0" v-loading="loading" class="bn-batch-form-dialog-main-body">
+        <slot name="form" :form-component="formComponent" :form-val="formVal" :loading="loading">
+          <BnBatchForm
+            ref="smartForm"
+            v-model="formVal"
+            :components="formComponent"
+            :extend-post="mergedExtendPost"
+            :post-func="postFunc"
+          ></BnBatchForm>
+        </slot>
+      </div>
+      <div v-if="formComponent.length == 0" class="bn-batch-form-dialog-empty">
+        <slot name="empty">
+          <BnEmptyTip tip="请先选择要修改的组件" />
+        </slot>
+      </div>
+      <div class="bn-batch-form-dialog-main-bottom">
+        <slot
+          name="footer"
+          :loading="loading"
+          :submit="submitTask"
+          :remember-components="rememberComponents"
+          :select-count="selectCount"
+        >
+          <el-checkbox v-model="rememberComponents" @change="saveRememberFlag">记住本次编辑组件，下次默认加载</el-checkbox>
+          <el-button
+            type="primary"
+            :loading="loading"
+            @click="submitTask"
+          >
+            提交
+          </el-button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { cloneDeep } from 'lodash';
+import BnBatchForm from './BnBatchForm.vue';
+
+const DEFAULT_SUBMIT_URL = '/biztable/content/updateBatch';
+
+export default {
+  name: 'BnBatchFormDialog',
+  components: { BnBatchForm },
+  props: {
+    // 表信息 { tableCode, appId, tableId }，appId/projectId 从中提取传给 BnBatchForm
+    tableInfo: {
+      type: Object,
+      required: true,
+    },
+    // 工作表组件列表，组件内部会筛选可批量编辑的子集
+    componentList: {
+      type: Array,
+      required: true,
+    },
+    // 已选工单 id 列表，用于展示数量及提交
+    selectData: {
+      type: Array,
+      required: true,
+    },
+    // 系统来源标识，区分调用方系统，会作为扩展参数传入 BnBatchForm, 例如 费用（finance_center）、安维（anwei）
+    source: {
+      type: String,
+      required: true,
+    },
+    // 接口请求函数，由外部传入，传给 BnBatchForm 子组件及内部提交请求共用
+    // 调用方式：postFunc(url, data)，默认 POST 请求
+    postFunc: {
+      type: Function,
+      required: true,
+    },
+    // 用户 ID，用于记住本次编辑组件，可选
+    userId: [String, Number],
+    // 是否启用组件内部提交请求，false 时由业务层通过 submit 事件自行处理
+    useInnerRequest: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['submitSuccess', 'submit', 'close'],
+  data() {
+    return {
+      show: false,
+      loading: false,
+      formComponent: [],
+      editComponents: [],
+      formVal: {},
+      rememberComponents: false,
+    };
+  },
+  computed: {
+    mergedExtendPost() {
+      const base = {
+        appId: this.tableInfo?.appId,
+        projectId: this.tableInfo?.tableId,
+        source: this.source,
+      };
+      // userId 缺失时不写入 undefined
+      if (this.userId != null) base.userId = this.userId;
+      return base;
+    },
+    selectCount() {
+      return this.selectData.length || 0;
+    },
+  },
+  methods: {
+    getColumnCode(item) {
+      if (item == null) return null;
+      return typeof item === 'object' ? item.columnCode : item;
+    },
+    extractColumnCodes(components = []) {
+      return components.map(item => this.getColumnCode(item)).filter(code => code != null && code !== '');
+    },
+    restoreFormComponents(columnCodes = []) {
+      const normalizedCodes = this.extractColumnCodes(columnCodes);
+      if (!normalizedCodes.length || !this.editComponents.length) return;
+      const components = normalizedCodes.map(code => this.editComponents.find(item => item.columnCode === code)).filter(Boolean);
+      if (components.length) {
+        this.formComponent = components;
+      }
+    },
+    getStorageKey() {
+      const tableId = this.tableInfo?.tableId;
+      return this.userId && tableId ? `batchEditForm_components_v1_${this.userId}_${tableId}` : null;
+    },
+    getStoredState() {
+      const key = this.getStorageKey();
+      if (!key) return null;
+      try {
+        return JSON.parse(localStorage.getItem(key) || '{}');
+      } catch {
+        return {};
+      }
+    },
+    // 提交成功时调用：持久化 remember 标记 + 当前组件列表
+    saveStoredState() {
+      const key = this.getStorageKey();
+      if (!key) return;
+      localStorage.setItem(
+        key,
+        JSON.stringify({
+          remember: this.rememberComponents,
+          columnCodes: this.rememberComponents ? this.extractColumnCodes(this.formComponent) : [],
+        })
+      );
+    },
+    // checkbox 变更时调用：仅持久化 remember 标记；取消勾选时同步清空已记忆的组件列表
+    saveRememberFlag() {
+      const key = this.getStorageKey();
+      if (!key) return;
+      const stored = this.getStoredState() || {};
+      localStorage.setItem(
+        key,
+        JSON.stringify({
+          ...stored,
+          remember: this.rememberComponents,
+          columnCodes: this.rememberComponents ? stored.columnCodes || [] : [],
+        })
+      );
+    },
+    // 读取并应用缓存状态：还原 rememberComponents 标记及已记忆的组件列表
+    // 返回原始 stored 对象，供调用方做二次还原（如 nextTick 兜底）
+    loadStoredState() {
+      const stored = this.getStoredState();
+      if (!stored || !Object.keys(stored).length) return stored;
+      // 兼容旧版仅缓存 columnCodes 的数据
+      if (stored.remember === undefined && stored.columnCodes?.length) {
+        this.rememberComponents = true;
+      } else {
+        this.rememberComponents = !!stored.remember;
+      }
+      if (this.rememberComponents && stored.columnCodes?.length) {
+        this.restoreFormComponents(stored.columnCodes);
+      }
+      return stored;
+    },
+    handleClose() {
+      this.show = false;
+      this.$emit('close');
+    },
+    clearAllComponents() {
+      this.formComponent = [];
+      this.formVal = {};
+    },
+    open() {
+      // 筛选可批量编辑的组件：
+      // - searchKey=2 为触发拉取类组件（订单号、运单号等），不支持批量修改
+      // - valueEditable=1 为值不可编辑组件，不允许批量修改
+      // - isEditable=1 为可编辑组件，仅保留此类
+      this.editComponents = cloneDeep(
+        (this.componentList || []).filter(i => {
+          const extra = i.extraInfo || {};
+          if (extra.searchKey == 2) return false;
+          if (extra.valueEditable == 1) return false;
+          return extra.isEditable == 1;
+        })
+      );
+      this.formComponent = [];
+      this.formVal = {};
+      this.rememberComponents = false;
+      // 先读取缓存再开窗，避免重复读取 localStorage
+      const stored = this.loadStoredState();
+      this.show = true;
+      // 弹窗挂载后再补一次还原，避免 v-if 重建子组件时序问题
+      if (stored?.columnCodes?.length) {
+        this.$nextTick(() => {
+          if (this.rememberComponents && !this.formComponent.length) {
+            this.restoreFormComponents(stored.columnCodes);
+          }
+        });
+      }
+    },
+    buildPostData() {
+      return {
+        tableCode: this.tableInfo?.tableCode,
+        contents: this.formVal.contents,
+        ids: this.selectData || [],
+      };
+    },
+    internalBatchEditTask(data) {
+      return this.postFunc(DEFAULT_SUBMIT_URL, data);
+    },
+    handleSubmitSuccess(res, postData) {
+      this.saveStoredState();
+      this.show = false;
+      this.$emit('submitSuccess', res, postData);
+    },
+    submitTask() {
+      // 校验表单：内置 BnBatchForm 走 checkFormContent；自定义 #form slot 时无 ref 则跳过，由业务层自行校验
+      if (!this.validateForm()) return;
+      const postData = this.buildPostData();
+      if (!this.useInnerRequest) {
+        this.saveStoredState();
+        this.$emit('submit', postData);
+        return;
+      }
+      this.loading = true;
+      this.internalBatchEditTask(postData)
+        .then(res => {
+          this.loading = false;
+          if (!res.code) {
+            this.handleSubmitSuccess(res, postData);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 校验表单内容，返回 true 表示通过
+    validateForm() {
+      if (!this.$refs.smartForm) return true;
+      const check = this.$refs.smartForm.checkFormContent?.();
+      return !!check?.checked;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bn-batch-form-dialog {
+  position: fixed;
+  top: 40px;
+  left: var(--menu-width, 258px);
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+
+  &-tip {
+    font-size: 12px;
+    color: #999;
+    margin-bottom: 10px;
+    // 给 tip 区限定最大高度，内容过多时内部滚动，避免挤压底部
+    max-height: 132px;
+    overflow: auto;
+
+    div {
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &-num {
+      font-size: 14px;
+      font-weight: bold;
+      color: #409eff;
+      margin-right: 6px;
+    }
+  }
+
+  &-empty {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // main 保持原有高度不变，改为纵向 flex，子元素按内容自适应
+  &-main {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin: 20px auto;
+    height: calc(100% - 50px);
+    width: 68%;
+    background: #fff;
+
+    &-top {
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      height: 42px;
+      border-bottom: 1px solid #eee;
+      color: #666;
+
+      .sIcon-close {
+        cursor: pointer;
+      }
+    }
+
+    // body 占据剩余空间，高度自适应，内容溢出时内部滚动
+    &-body {
+      position: relative;
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      width: 100%;
+    }
+
+    &-bottom {
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      height: 60px;
+      border-top: 1px solid #eee;
+    }
+  }
+
+  &-component-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &-clear-all {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 12px;
+    font-size: 13px;
+    color: #409eff;
+    cursor: pointer;
+
+    .sIcon {
+      margin-right: 4px;
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/packages/BnSmartForm/BnSmartElf/elfLog/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="elfLog">
+	<div class="elfLog-top">
+	  <img src="https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_26e18a1f306bad541a1713b86e6d1030.png">
+	</div>
+	<div class="elfLog-content">
+	  <div class="elfLog-content-time">{{ log.time }}</div>
+	  <div class="elfLog-content-warp">
+		<span>{{log.content}}</span>
+	  </div>
+	</div>
+  </div>
+</template>
+
+<script>
+  export default {
+	name: "index",
+	props: {
+	  log: Object,
+	  animation:Boolean
+	},
+  }
+</script>
+
+<style scoped lang="scss">
+  .elfLog {
+	position: relative;
+	display: flex;
+	width: 100%;
+	
+	&-top {
+	  img {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+	  }
+	}
+	
+	&-content {
+	  margin-left: 8px;
+	  
+	  &-time {
+		font-size: 12px;
+		color: #888;
+		margin-bottom: 2px;
+	  }
+	  &-warp{
+		padding: 4px;
+		border-radius: 4px;
+		background: #ffdc83;
+		color: #000;
+		font-size: 12px;
+		font-family: 'Courier New', monospace;
+	  }
+	}
+  }
+</style>

package/packages/BnSmartForm/BnSmartElf/index.vue

@@ -0,0 +1,95 @@
+<!--
+表单操作动作日志，点击保存的时候传给后端，定时每个月清除。就用类似gpt的风格
+-->
+<template>
+  <div class="BnSmartElf">
+	<div class="BnSmartElf-head">
+	  <span>建单助手</span>
+	</div>
+	<div class="BnSmartElf-logs">
+	  <el-scrollbar height="100%" ref="scrollbarRef">
+		<div class="BnSmartElf-logs-item" v-for="(item,index) in logs" :key="index">
+		  <elfLog :log="item"></elfLog>
+		</div>
+	  </el-scrollbar>
+	</div>
+	<div class="BnSmartElf-bac" @mouseenter="close = true" @mouseleave="close = false" @click="$emit('close')">
+	  <img src="https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_34d142cdae778fe5751269e3ebb078be.png" v-show="!close">
+	  <el-tooltip content="点我关闭" placement="top" :hide-after="0" :show-arrow="false">
+		<img src="https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_a3e8db53df86fa2143e8d5238fc5dac0.png" v-show="close">
+	  </el-tooltip>
+	</div>
+  </div>
+</template>
+<script>
+  import elfLog from "./elfLog/index.vue";
+  
+  export default {
+	name: "index",
+	components: {elfLog},
+	props: {logs: Array},
+	data() {
+	  return {
+		close: false,
+		scrollbarRef: null
+	  }
+	},
+	mounted() {
+	  this.scrollbarRef = this.$refs.scrollbarRef;
+	  this.scrollbarRef.scrollTo({top: 99999, behavior: "smooth"})
+	},
+	watch: {
+	  logs: {
+		handler() {
+		  if (this.scrollbarRef) {
+			this.scrollbarRef.scrollTo({top: 99999, behavior: "smooth"})
+		  }
+		},
+		deep: true,
+		immediate: true,
+	  }
+	},
+  }
+</script>
+<style scoped lang="scss">
+  .BnSmartElf {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding-bottom: 16px;
+	
+	&-head {
+	  height: 36px;
+	  padding: 0 10px;
+	  font-size: 14px;
+	  line-height: 36px;
+	  color: #777;
+	}
+	
+	&-logs {
+	  position: relative;
+	  height: calc(100% - 20px);
+	  
+	  &-item {
+		padding: 0 10px;
+		margin-bottom: 8px;
+		
+		&:last-child {
+		  margin-bottom: 200px;
+		}
+	  }
+	}
+	
+	&-bac {
+	  position: absolute;
+	  bottom: 10px;
+	  right: 10px;
+	  cursor: pointer;
+	  
+	  img {
+		width: 70px;
+		opacity: .7;
+	  }
+	}
+  }
+</style>