@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnSmartForm/chooseAssocTable/chooseChildGood.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-dialog v-model="show" :title="`请选择${columnData.name}`" top="18px" width="70%" destroy-on-close
+			 style="margin-bottom: 0">
+	<div class="chooseChildGood">
+	  <div class="chooseChildGood-main w-margin-bottom10">
+		<div class="w-margin-bottom5 w-color-gray"> 主商品信息</div>
+		<vxe-table border size="small" :data="orderList" class="chooseChildGood-out"
+				   :row-config="{isCurrent: true, isHover: true}"
+				   min-height="50" :expand-config="{expandAll: true}" :column-config="{resizable: true}">
+		  <template v-for="(column,index) in orderColumns">
+			<vxe-column v-if="column.behaviorType != 10" :key="index" :title="column.name" :field="column.columnCode"
+						min-width="160"
+						show-header-overflow="title" show-overflow="title" show-footer-overflow></vxe-column>
+			<vxe-column v-if="column.behaviorType == 10" :key="index" :title="column.name" min-width="160">
+			  <template #default="scope">
+				<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>
+		  <template #empty>
+			<span>暂无数据</span>
+		  </template>
+		</vxe-table>
+	  </div>
+	  <div class="w-margin-bottom5 w-color-blue"> 子商品列表</div>
+	  <vxe-table ref="childGoodTable" border size="small" :data="childOrderList" class="chooseChildGood-out"
+				 v-loading="loading"
+				 :row-config="{keyField: 'id',isCurrent: true, isHover: true}"
+				 :max-height="380" 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"
+				 @checkbox-all="checkAllTask">
+		<vxe-column type="checkbox" width="32" fixed="left"></vxe-column>
+		<template v-for="(column,index) in headerColumns">
+		  <vxe-column v-if="column.behaviorType != 10" :key="index" :title="column.name" :field="column.columnCode"
+					  min-width="160"
+					  show-header-overflow="title" show-overflow="title" show-footer-overflow></vxe-column>
+		  <vxe-column v-if="column.behaviorType == 10" :key="index" :title="column.name" min-width="160">
+			<template #default="scope">
+			  <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>
+		<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 }}/{{
+			childOrderList.length
+		  }}）条</span>
+		<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";
+  
+  export default {
+	name: 'chooseChildGood',
+	data() {
+	  return {
+		show: false,
+		// loading
+		loading: false,
+		// 子表单信息
+		columnData: {},
+		// 主商品表头
+		orderColumns: [],
+		// 子商品表头
+		headerColumns: [],
+		// 最大高度
+		tableMaxHeight: 400,
+		// 选中数据
+		selectData: [],
+		// 主商品数据
+		orderList: [],
+		// 子商品数据
+		childOrderList: [],
+	  }
+	},
+	methods: {
+	  /**
+	   * 处理子商品数据格式
+	   * */
+	  processChildGoodsData(row) {
+		let keyMap = {
+		  goods_no: 'son_goods_no', //商品编码
+		  goods_name: 'son_goods_name', //商品名称
+		  sku_name: 'son_sku_name', //sku名称
+		  sku_no: 'son_sku_no', //sku编码
+		  goods_pic_url: 'son_goods_pic_url', //商品图片
+		  goods_price: 'son_price',  //单价
+		}
+		let insideSourceKeyMap = {
+		  goods_no: '', //商品编码
+		  goods_name: '', //商品名称
+		  sku_name: '', //sku名称
+		  sku_no: '', //sku编码
+		  goods_pic_url: '', //商品图片
+		  goods_price: '',  //单价
+		}
+		this.headerColumns.forEach(column => {
+		  // 当前表的组件code
+		  const columnCode = column.columnCode;
+		  // 映射表的组件code
+		  const insideFiled = column.insideDataSourceInfo?.fieldCode;
+		  if (insideSourceKeyMap.hasOwnProperty(columnCode)) {
+			// 如果 inside 中有这个字段，使用原值
+			insideSourceKeyMap[columnCode] = insideFiled;
+		  }
+		});
+		let data = cloneDeep(row.spec_list);
+		return data.map((i, index) => {
+		  let item = {...i, inside: {}};
+		  let inside = row.insideCopy.spec_list[index];
+		  for (let key in keyMap) {
+			item[key] = i[keyMap[key]]
+			item.inside[insideSourceKeyMap[key]] = inside[keyMap[key]]
+		  }
+		  return item
+		});
+	  },
+	  /**
+	   * 打开选择弹框，处理数据回显
+	   * */
+	  open(row, columnData) {
+		this.columnData = cloneDeep(columnData);
+		// 主商品数据
+		this.orderList = [row]
+		// 主商品表头
+		this.orderColumns = columnData.moduleDefinition;
+		this.headerColumns = columnData.moduleDefinition.filter(i => [
+		  'goods_no', //商品编码
+		  'goods_name', //商品名称
+		  'sku_name', //sku名称
+		  'sku_no', //sku编码
+		  'goods_pic_url', //商品图片
+		  'goods_price'  //单价
+		].includes(i.columnCode));
+		//子商品数据 - 处理成指定格式
+		this.childOrderList = this.processChildGoodsData(row)
+		this.show = true;
+	  },
+	  /**
+	   * 选中
+	   * */
+	  checkChange({checked, row}) {
+		this.$refs.childGoodTable.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 = []
+		}
+	  },
+	  /**
+	   * 确认
+	   * */
+	  sure(type) {
+		let orders = this.childOrderList.reduce((acc, i) => {
+		  if (this.selectData.includes(i.id)) {
+			acc.push(i.inside);
+		  }
+		  return acc
+		}, []);
+		this.$emit('setChildGood', orders, type)
+		this.show = false;
+	  },
+	}
+  }
+</script>
+
+<style scoped lang="scss">
+  .chooseChildGood {
+	height: 100%;
+	overflow: hidden;
+	
+	&-main {
+	
+	}
+	
+	&-out {
+	  :deep(.vxe-table--header) {
+		.vxe-header--row {
+		  background-color: #ecf5ff;
+		}
+	  }
+	}
+  }
+</style>

package/packages/BnSmartForm/chooseAssocTable/tableCellCopy.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="worksheetCopy" :style="style" v-show="visiable || isMouseIn" @mouseover="onMouseEvent"
+	   @mouseleave="onMouseEvent" @click.stop="copyText">复制
+  </div>
+</template>
+
+<script>
+  export default {
+	name: "WorksheetCopy",
+	data() {
+	  return {
+		isMouseIn: false,
+		visiable: false,
+		params: {},
+		style: {},
+	  };
+	},
+	methods: {
+	  /**
+	   * 鼠标移入移出
+	   * @param {Event} e 事件对象
+	   */
+	  onMouseEvent(e) {
+		this.isMouseIn = e.type === "mouseleave" ? false : true;
+	  },
+	  /**
+	   * 初始化
+	   * @param {Object} params {column:组件信息,row:行数据}
+	   */
+	  onShow(target, params) {
+		try {
+		  const {right, top} = target.getBoundingClientRect();
+		  this.style = {
+			left: `${right - 34}px`,
+			top: `${top}px`,
+		  };
+		  this.params = params;
+		  this.visiable = true;
+		}catch (e){
+		  console.log('显示复制按钮失败')
+		}
+	  },
+	  onHide() {
+		this.visiable = false;
+	  },
+	  /**
+	   * 复制文本
+	   */
+	  copyText() {
+		const {column, row} = this.params;
+		let copyValue = row[column.columnCode] || "";
+		if(copyValue) {
+		  const textarea = document.createElement('textarea');
+		  textarea.value = copyValue;
+		  document.body.appendChild(textarea);
+		  textarea.select();
+		  document.execCommand('copy');
+		  document.body.removeChild(textarea);
+		  this.$message.success('复制成功');
+		} else {
+		  this.$message.warning('无内容可复制');
+		}
+	  },
+	},
+  };
+</script>
+<style lang='scss' scoped>
+  .worksheetCopy {
+	position: fixed;
+	width: 34px;
+	height: 22px;
+	line-height: 22px;
+	text-align: center;
+	background-color: rgba(51, 51, 51, 0.3);
+	color: #fff;
+	font-size: 12px;
+	z-index: 999999;
+	
+	&:hover {
+	  background-color: #65acff;
+	  cursor: pointer;
+	}
+  }
+</style>

package/packages/BnSmartForm/chooseChildOrder/chooseChildOrder.vue

@@ -0,0 +1,158 @@
+<!--多包裹下的子单，选择完包裹再选择包裹下的子商品。一般这种有层级的选择结构都用这种-->
+<template>
+  <el-dialog v-model="show" title="请选择" top="18px" width="860" destroy-on-close style="margin-bottom: 0">
+    <div class="chooseChildOrder">
+      <vxe-table ref="packageTable" border size="small" :data="childOrders" class="chooseChildOrder-out"
+                 :row-config="{keyField: dataBack.orderKey,isCurrent: true, isHover: true}"
+                 :max-height="tableMaxHeight" min-height="50"
+                 :expand-config="{expandAll: true}"
+                 :column-config="{resizable: true}"
+                 :checkbox-config="{ checkRowKeys: selectData}"
+                 @checkbox-change="checkChange"
+                 @checkbox-all="checkAllTask">
+        <vxe-column type="checkbox" width="32" fixed="left"></vxe-column>
+        <template v-for="(column,index) in columns" :key="index">
+          <vxe-column :title="column.name" min-width="120" show-header-overflow="title" show-overflow="title"
+                      show-footer-overflow>
+            <template #default="scope">
+              <span v-if="column.behaviorType != 10">{{ getTitle(column, scope.row[column.columnCode]) }}</span>
+              <BnFileView v-if="column.behaviorType == 10 && scope.row[column.columnCode]"
+                          :file-list="scope.row[column.columnCode]" :is-mini="true" :no-warp="true"></BnFileView>
+            </template>
+          </vxe-column>
+        </template>
+        <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 }}/{{
+        childOrders.length
+      }}）条</span>
+        <el-button @click="show = false">取消</el-button>
+        <el-button type="primary" @click="sure">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {getColumnValText} from "../BnSmartFormUtil.js";
+
+export default {
+  name: 'chooseChildOrder',
+  props: {
+    childOrders: Array,
+    componentList: Array,
+    dataBack: Object,
+  },
+  data() {
+    return {
+      show: false,
+      // 表头
+      columns: [],
+      // 最大高度
+      tableMaxHeight: 400,
+      // 选中数据
+      selectData: [],
+    }
+  },
+  methods: {
+    /**
+     * 打开选择包裹弹框，处理数据回显
+     * */
+    open(column) {
+      this.columns = column.moduleDefinition;
+      this.tableMaxHeight = window.innerHeight - 151
+      this.selectData = []
+      if (column.value) {
+        this.selectData = column.value.map(i => i[this.dataBack.orderKey])
+      }
+      this.show = true;
+    },
+    /**
+     * 选中任务
+     * */
+    checkChange({checked, row}) {
+      this.$refs.packageTable.setCheckboxRow(row, checked);
+      if (checked) {
+        if (!this.selectData.includes(row[this.dataBack.orderKey])) {
+          this.selectData.push(row[this.dataBack.orderKey]);
+        }
+      } else {
+        if (this.selectData.includes(row[this.dataBack.orderKey])) {
+          this.selectData.splice(this.selectData.indexOf(row[this.dataBack.orderKey]), 1);
+        }
+      }
+    },
+    /**
+     * 全选任务
+     * */
+    checkAllTask({records}) {
+      if (records.length != 0) {
+        records.map((task) => {
+          if (!this.selectData.includes(task[this.dataBack.orderKey])) {
+            this.selectData.push(task[this.dataBack.orderKey]);
+          }
+        });
+      } else {
+        this.selectData = []
+      }
+    },
+    /**
+     * 转义title
+     * */
+    getTitle(column, value) {
+      let text = getColumnValText(column, true, value);
+      return text;
+    },
+    /**
+     * 确认包裹
+     * */
+    sure() {
+      let orders = this.childOrders.filter(i => this.selectData.includes(i[this.dataBack.orderKey]));
+      this.$emit('setChildrenForm', orders, 'cover', this.dataBack.order)
+      this.show = false;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chooseChildOrder {
+  height: 100%;
+  overflow: hidden;
+
+  &-out {
+    :deep(.vxe-table--header) {
+      .vxe-header--row {
+        background-color: #ecf5ff;
+      }
+    }
+
+    :deep(.vxe-table--body) {
+      .vxe-body--row {
+        background-color: #f5f7fa;
+      }
+    }
+  }
+
+  &-inner {
+    padding: 10px 20px 10px 32px;
+
+    :deep(.vxe-table--header) {
+      .vxe-header--row {
+        background-color: #fff;
+      }
+    }
+
+    :deep(.vxe-table--body) {
+      .vxe-body--row {
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>