@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnSmartForm/chooseIPaasData/chooseIPaasData.vue

@@ -0,0 +1,307 @@
+<template>
+  <el-dialog v-model="show" :title="`请选择${columnData.name}`" top="18px" width="70%" destroy-on-close
+             style="margin-bottom: 0">
+    <tableCellCopy ref="childTableCopy"></tableCellCopy>
+    <div class="chooseIPaasData">
+      <div class="chooseIPaasData-search w-margin-bottom10">
+        <template v-for="(item,index) in searchPost.conditions" :key="index">
+          <div class="chooseIPaasData-search-item">
+            <BnAdvancedFilter v-model="searchPost.conditions[index]" :columnList="searchColumns" @valueChange="search()"
+                             :allowSearchType="false" 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="conditions" multiple
+                  :optionProps="{value:'columnCode',label:'name'}">
+            <el-button type="primary" link> + 添加筛选条件</el-button>
+          </BnDrop>
+        </div>
+        <div class="w-flex-center">
+          <el-button type="primary" @click="search">筛选</el-button>
+        </div>
+      </div>
+      <vxe-table ref="assocTable" border size="small" :data="orderList" class="chooseIPaasData-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"
+                 @checkbox-all="checkAllTask">
+        <vxe-column type="checkbox" width="32" fixed="left"></vxe-column>
+        <vxe-column :visible="column.extraInfo.isAddable == 1" :title="column.name" :field="column.columnCode"
+                    min-width="160"
+                    v-for="(column,index) in columnData.moduleDefinition" :key="index"
+                    show-header-overflow="title" show-overflow="title" show-footer-overflow>
+          <template #default="scope">
+            <span>{{ getTitle(column, scope.row[column.columnCode]) }}</span>
+          </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 {getSearchComponents, searchValueToJson} from "../../../utils/index.js";
+import tableCellCopy from "./tableCellCopy.vue";
+import {getColumnValText} from "../BnSmartFormUtil.js";
+
+export default {
+  name: 'chooseIPaasData',
+  components: {tableCellCopy},
+  props: {
+    // 接口请求外部转发
+    postFunc: Function,
+    // 扩展参数
+    extendPost: Object,
+  },
+  data() {
+    return {
+      show: false,
+      loading: false,
+      // 子表单信息
+      columnData: {},
+      // 支持筛选的组件
+      searchColumns: [],
+      // 对筛选组件进行处理，尽量少的传一些字段
+      conditions: [],
+      // 最大高度
+      tableMaxHeight: 400,
+      // 选中数据
+      selectData: [],
+      // 高级筛选
+      searchPost: {
+        pageSize: 20,
+        pageNum: 1,
+        total: 0,
+        conditions: [],
+        taskContent:''
+      },
+      // 表格数据
+      orderList: [],
+      // 快捷筛选项
+      searchList: []
+    }
+  },
+  methods: {
+    /**
+     * 打开选择弹框，处理数据回显
+     * */
+    open(column,contents) {
+      this.columnData = cloneDeep(column);
+      this.orderList = []
+      this.searchPost.pageNum = 1;
+      this.searchPost.taskContent = JSON.stringify(contents);
+      this.searchColumns = []
+      try {
+        // 整理筛选条件
+        let conditions = []
+        column.moduleDefinition.forEach(i => {
+          let outData = i.outDataSourceInfo[0] || {}
+          let extend = outData.extend ? JSON.parse(outData.extend) : {}
+          if (outData.platform == 'relation_ipaas' && extend.io == 'in') {
+            conditions.push(i)
+          }
+        })
+        this.searchColumns = getSearchComponents(conditions, this.extendPost.appId, this.extendPost.projectId)
+        // 简化筛选的字段
+        this.conditions = this.searchColumns.map(i => {
+          return {
+            id: i.id,
+            name: i.name,
+            behaviorType: i.behaviorType,
+            columnCode: i.columnCode,
+            searchType: i.searchType,
+            value: i.value
+          }
+        })
+      } catch (e) {
+        console.log('格式化关联表筛选组件' + e)
+      }
+      this.tableMaxHeight = window.innerHeight - 360;
+      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 = []
+      }
+    },
+    /**
+     * 筛选数据
+     * */
+    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,
+        conditions: JSON.stringify(this.searchPost.conditions),
+        originId:this.extendPost.projectId,
+        subFormId:this.columnData.id
+      }
+      this.selectData = []
+      this.$refs.assocTable?.clearCheckboxRow()
+      this.loading = true;
+      this.postFunc('/biztable/content/queryChildTask', post).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.orderList = res.data.results
+          this.searchPost.total = parseInt(res.data.total);
+          this.searchPost.pageNum = res.data.pageNum;
+        } 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)
+        }
+      }
+    },
+    /**
+     * 转义title
+     * */
+    getTitle(column, value) {
+      let text = getColumnValText(column, true, value);
+      return text;
+    },
+    /**
+     * 确认
+     * */
+    sure(type) {
+      let orders = this.orderList.reduce((acc, i) => {
+        if (this.selectData.includes(i.id)) {
+          acc.push(i);
+        }
+        return acc
+      }, []);
+      setTimeout(() => {
+        this.$emit('setChildrenForm', orders, type, this.columnData.columnCode)
+      }, 200)
+      this.show = false;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chooseIPaasData {
+  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>

package/packages/BnSmartForm/chooseIPaasData/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>