@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnSmartForm/childrenForm/searchInventory.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="inventory" v-loading="loading">
+    <vxe-table ref="assocTable" border size="small" :data="inventoryData"
+               v-loading="loading"
+               :row-config="{keyField: 'id',isCurrent: true, isHover: true}"
+               :max-height="360" min-height="50"
+               :expand-config="{expandAll: true}"
+               :column-config="{resizable: true}"
+               :scroll-x="{ enabled: true, gt: 8 }"
+               :scroll-y="{ enabled: true, gt: 15 }" >
+        <vxe-column :title="column" :field="column" min-width="100" v-for="(column,index) in headData" :key="index"
+                    show-header-overflow="title" show-overflow="title" show-footer-overflow></vxe-column>
+      <template #empty>
+        <span>未查到库存数据</span>
+      </template>
+    </vxe-table>
+  </div>
+</template>
+<script>
+import {debounce} from "lodash";
+
+export default {
+  name: "searchInventory",
+  props: {
+    row:{},
+    column: {},
+    postFunc: Function
+  },
+  data() {
+    return {
+      loading: false,
+      // 关联查库存的字段的值
+      stockSearch:'',
+      headData:[],
+      inventoryData:[]
+    }
+  },
+  beforeCreate() {
+    this.searchData = debounce(function (post) {
+      if(this.loading){return}
+      this.headData = []
+      this.inventoryData = []
+      this.loading = true;
+      this.postFunc('/v2/elcStock/getStockInfoV2', post).then(res => {
+        this.loading = false;
+        if(!res.code && res.data){
+          this.headData = res.data.arrayData[0];
+          this.inventoryData = res.data.data;
+          // let tableData = []
+          //     res.data.arrayData.map((item,index)=>{
+          //   if(index>0){
+          //     let d = {};
+          //     this.headData.forEach((o,i)=>{
+          //       d[o] = item[i]
+          //     })
+          //     tableData.push(d);
+          //   }
+          // })
+          // this.inventoryData = tableData;
+          // // 计算总库存并广播给父组件
+          const totalStock = this.calculateTotalStock(this.inventoryData);
+          this.row[this.column.columnCode] = totalStock;
+        }else{
+          this.row[this.column.columnCode] = '';
+        }
+      })
+    }, 500)
+  },
+  watch:{
+    // 只监听用于查询的特定字段，避免被自己修改的总库存字段触发
+    row:{
+      handler(newVal,) {
+        const searchColumnCode = this.column.extraInfo?.stockSearchColumnCode;
+        if(!searchColumnCode) return;
+        const newSearchValue = newVal[searchColumnCode];
+        // 只有当查询字段发生变化时才触发
+        if(this.stockSearch !== newSearchValue){
+          this.stockSearch = newSearchValue;
+          let post = {
+            [searchColumnCode]: this.stockSearch
+          }
+          this.searchData(post);
+        }
+      },
+      deep: true,
+      immediate:true
+    },
+  },
+  methods: {
+    /**
+     * 遍历数组并计算可发库存总和的方法
+     * @param {Array} arr - 要遍历的数组，格式如：[{可发库存：10.0000}, {可发库存:10.00}]
+     * @returns {Number} 总和
+     */
+    calculateTotalStock(arr) {
+      if (!arr || !Array.isArray(arr) || arr.length === 0) {
+        return 0;
+      }
+      return arr.reduce((sum, item) => {
+        // 获取可发库存的值，转换为数字
+        const stock = parseFloat(item['可发库存'] || 0);
+        return sum + (isNaN(stock) ? 0 : stock);
+      }, 0);
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.inventory {
+  min-height: 46px;
+  padding: 10px;
+  border: 1px solid #eee;
+}
+</style>

package/packages/BnSmartForm/chooseAssocTable/chooseAssocTable.vue

@@ -0,0 +1,451 @@
+<template>
+  <el-dialog v-model="show" :title="`请选择${columnData.name}`" top="18px" width="70%" destroy-on-close
+             style="margin-bottom: 0">
+    <tableCellCopy ref="childTableCopy"></tableCellCopy>
+    <chooseChildGood ref="chooseChildGood" @setChildGood="setChildGood"></chooseChildGood>
+    <div class="chooseAssocTable">
+      <div class="chooseAssocTable-search w-margin-bottom10">
+        <template v-for="(item,index) in searchPost.conditions" :key="index">
+          <div class="chooseAssocTable-search-item">
+            <BnAdvancedFilter v-model="searchPost.conditions[index]" :column-data="item" @valueChange="search()"
+                              allowDel @del="searchPost.conditions.splice(index,1)"
+                              :postFunc="postFunc" :pathUrl="item.pathUrl" :postData="item.postData"/>
+          </div>
+        </template>
+      </div>
+      <div class="w-flex-between w-margin-bottom10">
+        <div class="w-flex-center">
+          <BnDrop v-model="searchPost.conditions" :options="searchColumns" multiple
+                  :optionProps="{value:'columnCode',label:'name'}">
+            <el-button type="primary" link> + 添加筛选条件</el-button>
+          </BnDrop>
+          <el-tag v-for="(item,index) in searchList" closable type="success" @click="chooseSearch(item)"
+                  @close="delSearch(item,index)" class="w-margin-left8 w-cursor-pointer">
+            {{ item.key }}
+          </el-tag>
+        </div>
+        <div class="w-flex-center">
+          <el-button @click="saveSearch">另存为常用查询</el-button>
+          <el-button type="primary" @click="search">筛选</el-button>
+        </div>
+      </div>
+      <vxe-table ref="assocTable" border size="small" :data="orderList" class="chooseAssocTable-out"
+                 v-loading="loading" :tooltip-config="{}"
+                 :row-config="{keyField: 'id',isCurrent: true, isHover: true}"
+                 :max-height="tableMaxHeight" min-height="50"
+                 :expand-config="{expandAll: true}"
+                 :column-config="{resizable: true}"
+                 :checkbox-config="{ checkRowKeys: selectData}"
+                 :scroll-x="{ enabled: true, gt: 8 }"
+                 :scroll-y="{ enabled: true, gt: 15 }"
+                 @checkbox-change="checkChange"
+                 @cell-mouseenter="onMouseEvent"
+                 @cell-mouseleave="onMouseEvent"
+                 @cell-click="rowClick"
+                 @checkbox-all="checkAllTask">
+        <vxe-column type="checkbox" width="32" fixed="left"></vxe-column>
+        <vxe-column width="30" fixed="left">
+          <template #default="scope">
+			  <span class="w-flex-center">
+				 <el-tooltip v-if="scope.row.combine == '是'"
+                     content="当确定是组合装(combine)，允许点击该行选择子商品（spec_list）" placement="top"
+                     effect="light">
+					<span class="w-color-blue w-cursor-pointer">
+					  <span class="bnUIcon bnUIcon-childGood"></span>
+					</span>
+				 </el-tooltip>
+				 <span v-else></span>
+			  </span>
+          </template>
+        </vxe-column>
+        <vxe-column :visible="column.extraInfo.isAddable == 1" :title="column.name" :field="column.columnCode" min-width="160"
+                    v-for="(column,index) in headerColumns" :key="index"
+                    show-header-overflow="title" show-overflow="title" show-footer-overflow>
+          <template #default="scope" v-if="column.behaviorType == 10 && column.extraInfo.isAddable == 1">
+            <BnFileView v-if="scope.row.inside[column.columnCode]" :file-list="scope.row.inside[column.columnCode]"
+                        :is-mini="true" :no-warp="true"></BnFileView>
+          </template>
+        </vxe-column>
+        <template #empty>
+          <span>暂无数据</span>
+        </template>
+      </vxe-table>
+    </div>
+    <template #footer>
+      <div class="w-flex-right w-flex-center">
+		<span class="w-font13 w-color-gray w-margin-right8">已选择（{{ selectData.length }}/{{
+        orderList.length
+      }}）条</span>
+        <el-pagination class="w-margin-right8"
+                       background
+                       v-model:current-page="searchPost.pageNum"
+                       v-model:page-size="searchPost.pageSize"
+                       layout="prev, pager, next" @current-change="search"
+                       :total="searchPost.total">
+        </el-pagination>
+        <el-button @click="show = false">取消</el-button>
+        <el-popover placement="top-start" :width="298" trigger="hover">
+          <div class="BnSmartForm-title-tip">在原有的子表单值的基础上追加选中的数据</div>
+          <template #reference>
+            <el-button type="primary" @click="sure('add')" :disabled="selectData.length == 0">确认追加</el-button>
+          </template>
+        </el-popover>
+        <el-popover placement="top-start" :width="290" trigger="hover">
+          <div class="BnSmartForm-title-tip">用选中的数据直接覆盖子表单的原有的值</div>
+          <template #reference>
+            <el-button type="primary" @click="sure('cover')" :disabled="selectData.length == 0">确认覆盖</el-button>
+          </template>
+        </el-popover>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {cloneDeep} from "lodash";
+import chooseChildGood from './chooseChildGood.vue'
+import tableCellCopy from "./tableCellCopy.vue";
+import {getSearchComponents,searchValueToJson} from "../../../utils/index.js";
+
+export default {
+  name: 'chooseAssocTable',
+  components: {chooseChildGood, tableCellCopy},
+  props: {
+    // 接口请求外部转发
+    postFunc: Function,
+    // 扩展参数
+    extendPost: Object,
+  },
+  data() {
+    return {
+      show: false,
+      loading: false,
+      // 子表单信息
+      columnData: {},
+      // 支持筛选的组件
+      searchColumns: [],
+      // 表头
+      headerColumns: [],
+      // 最大高度
+      tableMaxHeight: 400,
+      // 选中数据
+      selectData: [],
+      // 高级筛选
+      searchPost: {
+        tableCode: "",
+        pageSize: 20,
+        pageNum: 1,
+        total: 0,
+        // 排序 ASC 正序  DESC 倒序 {"columnCode":"sku_id","sort":"ASC"}
+        sorts: [],
+        conditions: []
+      },
+      // 表格数据
+      orderList: [],
+      // 表格全量数据
+      allOrderList: [],
+      // 快捷筛选项
+      searchList: []
+    }
+  },
+  methods: {
+    /**
+     * 打开选择弹框，处理数据回显
+     * */
+    open(column) {
+      this.columnData = cloneDeep(column);
+      this.orderList = []
+      this.allOrderList = []
+      this.selectData = []
+      this.$refs.assocTable?.clearCheckboxRow()
+      this.searchPost.tableCode = column.insideDataSourceInfo.tableCode;
+      this.searchPost.pageNum = 1;
+      // 处理高级筛选的筛选条件组件
+      this.searchColumns = []
+      try {
+        let assocTableColumns = []
+        column.moduleDefinition.forEach(i => {
+          if (i.insideDataSourceInfo?.fieldCode) {
+            assocTableColumns.push({...i, columnCode: i.insideDataSourceInfo?.fieldCode})
+          }
+        })
+        this.searchColumns = getSearchComponents(assocTableColumns,this.extendPost.appId,this.extendPost.projectId)
+      } catch (e) {
+        console.log('格式化关联表筛选组件' + e)
+      }
+      // 为上面回填的时候不使用默认值，所以这里处理表头的时候，把默认值清空:有这三种情况 [] {} ''
+      this.headerColumns = cloneDeep(column.moduleDefinition)
+      this.tableMaxHeight = window.innerHeight - 360;
+      this.querySearch();
+      this.postFunc(`/v2/client/cache/get/${this.extendPost.projectId}_${this.columnData.id}_${this.extendPost.userId || ''}_assocTable`, {}, 'get')
+          .then(res => {
+            if (!res.code && res.data) {
+              const c = JSON.parse(res.data)
+              if (c.conditions) {
+                this.searchPost.conditions = c.conditions;
+              } else if (this.searchColumns.length > 0) {
+                this.searchPost.conditions = [cloneDeep(this.searchColumns[0])]
+              }
+            }
+            this.search();
+          })
+      this.show = true;
+    },
+    /**
+     * 选中任务
+     * */
+    checkChange({checked, row}) {
+      this.$refs.assocTable.setCheckboxRow(row, checked);
+      if (checked) {
+        if (!this.selectData.includes(row.id)) {
+          this.selectData.push(row.id);
+        }
+      } else {
+        if (this.selectData.includes(row.id)) {
+          this.selectData.splice(this.selectData.indexOf(row.id), 1);
+        }
+      }
+    },
+    /**
+     * 全选任务
+     * */
+    checkAllTask({records}) {
+      if (records.length != 0) {
+        records.map((task) => {
+          if (!this.selectData.includes(task.id)) {
+            this.selectData.push(task.id);
+          }
+        });
+      } else {
+        this.selectData = []
+      }
+    },
+    /**
+     * 另存为常用筛选
+     * */
+    saveSearch() {
+      if (this.searchPost.conditions.length == 0) {
+        this.$message.warning('没有可保存的筛选条件');
+        return;
+      }
+      if (this.searchList.length >= 8) {
+        this.$message.warning('最多保存8个筛选项');
+        return;
+      }
+      this.$msgBox.prompt('设置你的常用筛选项名称（10个字以内）', '保存为常用筛选项', {
+        confirmButtonText: '保存',
+        cancelButtonText: '取消',
+        inputPattern: /^.{1,10}$/,
+        inputErrorMessage: '请输入1到10个字符',
+      }).then(({value}) => {
+        this.postFunc('/biztable/content/setUserQueryCondition', {
+          name: value,
+          isCommon: false,
+          appId: this.extendPost.appId,
+          tableId: this.extendPost.projectId,
+          relationTableId: this.columnData.insideDataSourceInfo.table,
+          value: JSON.stringify(this.searchPost)
+        }).then(res => {
+          if (!res.code) {
+            this.querySearch()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    /**
+     * 查询筛选项
+     * */
+    querySearch() {
+      this.postFunc('/biztable/content/getUserQueryCondition', {
+        isCommon: false,
+        appId: this.extendPost.appId,
+        tableId: this.extendPost.projectId,
+        relationTableId: this.columnData.insideDataSourceInfo.table
+      }).then(res => {
+        if (!res.code) {
+          this.searchList = cloneDeep(res.data)
+        }
+      })
+    },
+    /**
+     * 选中筛选项
+     * */
+    chooseSearch(item) {
+      let data = JSON.parse(item.value);
+      this.searchPost.conditions = data.conditions;
+      this.search();
+    },
+    /**
+     * 删除筛选项
+     * */
+    delSearch(item, index) {
+      this.$msgBox.confirm(
+          '删除后将不再显示该筛选项?',
+          '确定要删除么？',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(() => {
+        this.postFunc(`/biztable/content/delUserQueryCondition/${item.id}`, {}, 'post').then(res => {
+          if (!res.code) {
+            this.searchList.splice(index, 1)
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    /**
+     * 筛选数据
+     * */
+    search(postData) {
+      this.searchPost = {...this.searchPost, ...postData}
+      this.postFunc('/v2/client/cache/save', {
+        key: `${this.extendPost.projectId}_${this.columnData.id}_${this.extendPost.userId || ''}_assocTable`,
+        value: this.searchPost
+      })
+      let post = {
+        ...this.searchPost,
+        // 高级筛选要进行最后组装：tab也有筛选条件，带入一起搜索
+        conditions: searchValueToJson([...this.searchPost.conditions])
+      }
+      this.loading = true;
+      this.postFunc('/biztable/content/query', post).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.orderList = res.data.results.map(i => {
+            // 根据 headerColumns 过滤和处理 inside 数据
+            const filteredInside = {};
+            const view = {}
+            this.headerColumns.forEach(column => {
+              // 当前表的组件 code
+              const columnCode = column.columnCode;
+              // 映射表的组件 code
+              const insideFiled = column.insideDataSourceInfo?.fieldCode;
+              if (i.inside && i.inside.hasOwnProperty(insideFiled)) {
+                // 如果 inside 中有这个字段，使用原值
+                filteredInside[columnCode] = i.inside[insideFiled];
+                view[columnCode] = i.view[insideFiled];
+              } else {
+                // 如果 inside 中没有这个字段，使用 headerColumns 中的默认值
+                filteredInside[columnCode] = column.value || '';
+              }
+            });
+            return {...i.view, ...view, insideCopy: i.inside, inside: filteredInside, id: parseInt(i.view.id)};
+          });
+          this.searchPost.total = parseInt(res.data.total);
+          this.searchPost.pageNum = res.data.pageNum;
+          // 翻页后重新勾选选中的数据
+          this.$nextTick(() => {
+            this.orderList.forEach(row => {
+              if (this.selectData.includes(row.id)) {
+                this.$refs.assocTable?.setCheckboxRow(row, true);
+              }
+            });
+          });
+          // 合并数组并通过 id 去重
+          const idSet = new Set(this.allOrderList.map(item => item.id));
+          this.orderList.forEach(item => {
+            if (!idSet.has(item.id)) {
+              this.allOrderList.push(item);
+            }
+          });
+        } else {
+          this.orderList = [];
+          this.searchPost.total = 0;
+          this.searchPost.pageNum = 1;
+        }
+      })
+    },
+    /**
+     * 鼠标移入移出单元格，展示隐藏复制按钮
+     * @param {Event} e 事件对象
+     */
+    onMouseEvent(scope) {
+      // 当鼠标悬浮到单元格时，再加复制按钮
+      let e = scope.$event;
+      // 鼠标离开
+      if (e.type === "mouseleave") {
+        this.$refs.childTableCopy?.onHide()
+      } else {
+        let data = {
+          column: {columnCode: this.headerColumns[scope.columnIndex - 2]?.columnCode},
+          row: scope.row
+        }
+        // 有值再显示
+        if (data.row[data.column.columnCode]) {
+          this.$refs.childTableCopy?.onShow(scope.cell, data)
+        }
+      }
+    },
+    /**
+     * 点击行,判断是否可以选择子商品
+     * @param {Object} row 当前行
+     * @param {Object} column 当前列
+     * @param {Boolean} triggerCheckbox 是否操作复选框
+     */
+    rowClick({row}) {
+      if (row.combine == '是') {
+        if (row.spec_list && row.spec_list.length > 0) {
+          this.$refs.chooseChildGood.open(row, this.columnData)
+        } else {
+          this.$message.warning("该商品没有子商品，无法选择")
+        }
+      }
+    },
+    /**
+     * 确认
+     * */
+    setChildGood(orders, type) {
+      setTimeout(() => {
+        this.$emit('setChildrenForm', orders, type, this.columnData.columnCode)
+      }, 200)
+      this.show = false;
+    },
+    /**
+     * 确认
+     * */
+    sure(type) {
+      let orders = this.allOrderList.reduce((acc, i) => {
+        if (this.selectData.includes(i.id)) {
+          acc.push(i.inside);
+        }
+        return acc
+      }, []);
+      setTimeout(() => {
+        this.$emit('setChildrenForm', orders, type, this.columnData.columnCode)
+      }, 200)
+      this.show = false;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chooseAssocTable {
+  height: 100%;
+  overflow: hidden;
+
+  &-search {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 142px;
+    overflow-y: auto;
+    gap: 10px 18px;
+
+    &-item {
+      width: calc(33.33% - 18px);
+      flex-grow: 0;
+    }
+  }
+
+  &-out {
+    :deep(.vxe-table--header) {
+      .vxe-header--row {
+        background-color: #ecf5ff;
+      }
+    }
+  }
+}
+</style>