@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnSmartForm/childrenForm/childFormFile.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="childFormFile">
+	<div class="">
+	  <el-upload class="childFormFile-upload" ref="uploadInput" drag
+				 :action="column.pathUrl || uploadAction"
+				 :show-file-list="false"
+				 :before-upload="beforeUpload" multiple
+				 :data="uploadData" :on-progress="handleUploadProgress"
+				 :on-success="fileSuccess">
+		<div class="childFormFile-btn">
+		  <span class="bnUIcon bnUIcon-upload"></span> 选择或拖拽上传文件
+		</div>
+	  </el-upload>
+	  <!-- 视频附件不支持，其他情况支持 -->
+	  <el-input v-model="pasteValue"
+		ref="fileUploadInput"
+		placeholder="复制粘贴上传截图"
+		class="childFormFile-input"/>
+	  <span class="childFormFile-tip">最多可上传{{ uploadFileNumber }}个文件，单个文件不超过{{ showLimit }}M</span>
+	</div>
+	<el-progress
+	  style="width: 100%; max-width: 444px"
+	  :percentage="uploadProgress"
+	  v-show="uploadProgress > 0"
+	  class="childFormFile-progress"
+	></el-progress>
+	<div v-if="value">
+	  <BnFileView :file-list="value" :isDel="true" :is-mini="true"></BnFileView>
+	</div>
+  </div>
+</template>
+
+<script>
+  import {pasteImg} from "../BnSmartFormUtil.js";
+  import {fileType} from "./../fileForm/fileFormData.js";
+  
+  export default {
+	name: "childFormFile",
+	props: {
+	  column: {
+		type: Object,
+		default: () => ({}),
+	  },
+	  value:{
+		type: Array,
+		default: () => [],
+	  },
+	},
+	data() {
+	  return {
+		fileType: this.column.fileType || fileType,
+		pasteValue: "",
+		pasteImgList: [], //用来存放粘贴的图片
+		// 上传进度
+		uploadProgress: 0,
+		uploadFileCount: 0, //记录上传次数，限制最多上传5个
+		uploadFileNumber: 10, //可上传附件那个数
+		showLimit: 15, //单文件最大M数
+		uploadAction: "/v2/attachment/upload",
+		uploadData: {source: "task"},
+	  };
+	},
+	methods: {
+	  /**
+	   * 上传成功
+	   * */
+	  fileSuccess(res) {
+		this.column.error = "";
+		this.uploadProgress = 0;
+		
+		if (!res.code) {
+		  const fileData = {
+			title: res.data.fileName,
+			id: res.data.id,
+			code: res.data.id,
+			size: res.data.fileSize,
+			type: res.data.suffix,
+			url: res.data.url,
+		  };
+		  
+		  if (this.value.length < this.uploadFileNumber) {
+			this.value.push(fileData);
+			this.$emit('onChange', this.column);
+		  } else {
+			this.$message({
+			  message: `上传文件个数不能超过${this.uploadFileNumber}个`,
+			  type: 'warning'
+			});
+		  }
+		  this.uploadFileCount = this.value.length;
+		} else {
+		  this.$message({
+			message: res.msg,
+			type: 'warning'
+		  });
+		}
+	  },
+	  /**
+	   * 附件上传前
+	   * */
+	  beforeUpload(file) {
+		if (this.value.length >= this.uploadFileNumber) {
+		  this.$message({
+			message: `上传文件个数不能超过${this.uploadFileNumber}个`,
+			type: 'warning'
+		  });
+		  return false;
+		}
+		const maxSize = 50;
+		const maxSizeBytes = 1048576 * maxSize;
+		if (file.size > maxSizeBytes) {
+		  this.$message({
+			message: `上传文件大小不能超出${maxSize}MB`,
+			type: 'warning'
+		  });
+		  return false;
+		}
+		const fileExt = file.name.split(".").pop().toLowerCase();
+		if (!this.fileType.includes(fileExt)) {
+		  this.$message({
+			message: "上传的文件格式不支持",
+			type: 'warning'
+		  });
+		  return false;
+		}
+		this.uploadFileCount++;
+		return true;
+	  },
+	  handleUploadProgress(event) {
+		this.uploadProgress = Math.round(event.percent);
+	  },
+	  //粘贴图片到编辑器，事件处理方法，主要用于事件销毁
+	  pasteEvent(evt) {
+		if (this.value.length >= this.uploadFileNumber) {
+		  this.$message({
+			message: `上传文件个数不能超过${this.uploadFileNumber}个`,
+			type: 'warning'
+		  });
+		  return false;
+		}
+		this.column.error = "";
+		this.pasteImgList.push(evt);
+		pasteImg(evt, this.column.pathUrl || this.uploadAction).then((res) => {
+		  if (!res.code) {
+			const fileData = {
+			  title: res.data.fileName,
+			  id: res.data.id,
+			  code: res.data.id,
+			  size: res.data.fileSize,
+			  type: res.data.suffix,
+			  url: res.data.url,
+			};
+			
+			this.value.push(fileData);
+			this.$emit('onChange', this.column);
+			if (this.value.length >= this.uploadFileNumber) {
+			  this.pasteImgList = [];
+			}
+		  } else {
+			this.$message({
+			  message: res.msg,
+			  type: 'warning'
+			});
+		  }
+		});
+	  },
+	},
+	mounted() {
+	  if (this.$refs.fileUploadInput && this.$refs.fileUploadInput.$el) {
+		this.$refs.fileUploadInput.$el.addEventListener("paste", this.pasteEvent);
+	  }
+	},
+	//实例销毁前
+	beforeDestroy() {
+	  if (this.$refs.fileUploadInput && this.$refs.fileUploadInput.$el) {
+		this.$refs.fileUploadInput.$el.removeEventListener(
+		  "paste",
+		  this.pasteEvent
+		);
+	  }
+	},
+  };
+</script>
+<style scoped lang="scss">
+  .childFormFile {
+	&-btn {
+	  width: 257px;
+	  height: 20px;
+	  padding: 5px 16px;
+	  border: 1px solid rgba(0, 0, 0, 0.15);
+	  box-sizing: content-box;
+	  border-radius: 2px;
+	  color: #666;
+	}
+	
+	:deep(.childFormFile-upload) {
+	  .el-upload {
+		display: inline-block;
+	  }
+	  
+	  .el-upload-dragger {
+		border: none;
+		width: auto;
+		height: auto;
+		border-radius: 0;
+		padding: 0;
+	  }
+	}
+	
+	&-list {
+	  position: relative;
+	}
+	
+	:deep(.childFormFile-input) {
+	  width: 145px;
+	  display: inline-block;
+	  
+	  .el-input__wrapper {
+		border: 1px dashed rgba(0, 0, 0, 0.15);
+	  }
+	}
+	
+	&-tip {
+	  margin-left: 8px;
+	  display: inline-block;
+	  font-size: 12px;
+	  line-height: 32px;
+	  color: rgba(0, 0, 0, 0.25);
+	}
+	
+	&-progress {
+	  width: 100%;
+	  max-width: 444px;
+	  margin-top: 8px;
+	}
+  }
+</style>

package/packages/BnSmartForm/childrenForm/childrenFormBody.vue

@@ -0,0 +1,260 @@
+<!-- 子表单支持 1，2，3，4，5，7，10 这七个组件 -->
+<template>
+  <div class="w-default-wrap">
+    <vxe-table border size="small" :data="sourceData.value" :max-height="360">
+      <vxe-column type="seq" width="50"></vxe-column>
+      <template v-for="(column,index) in sourceData.moduleDefinition" :key="index">
+        <vxe-column :title="column.name" :params="column.extraInfo || {}" :min-width="240" show-header-overflow="title"
+                    v-if="isShow(column)">
+          <template #header="scope">
+            <div class="w-flex-center">
+              <!--必填标识-->
+              <span v-if="scope.column.params.valueEmptyCheck == 1"
+                    class="w-color-red w-margin-right4">*</span>
+              <span>{{ scope.column.title }}</span>
+            </div>
+          </template>
+          <template #default="scope">
+            <div class="w-flex-left">
+              <div class="childFormBody-td" v-if="column.behaviorType == 1">
+                <el-input type="textarea" resize="none" :rows="1" placeholder="请输入"
+                          :disabled="disabled || isDisabled(column)"
+                          @input="onInput($event,scope,column)" @focus="onFocus($event,scope,column)"
+                          @blur="onBlur($event,scope,column)" :maxlength="200000"
+                          v-model.trim="scope.row[column.columnCode]"/>
+              </div>
+              <div class="childFormBody-td" v-if="column.behaviorType == 2">
+                <BnInpNum @input="onInput($event,scope,column)" :disabled="disabled || isDisabled(column)"
+                          @focus="onFocus($event,scope,column)" @blur="onBlur($event,scope,column)"
+                          :precision="column.extraInfo?.valueType"
+                          v-model="scope.row[column.columnCode]"
+                          placeholder="请输入有效数值"></BnInpNum>
+              </div>
+              <div class="childFormBody-td" v-if="[3,4,5].includes(column.behaviorType)">
+                <BnSelect v-model="scope.row[column.columnCode]" clearable filterable
+                          :multiple="column.behaviorType == 5" :optionProps="{value:'code',label:'title'}"
+                          :options="column.moduleDefinition" :disabled="disabled || isDisabled(column)"
+                          :pathUrl="column.pathUrl" :postData="column.postData" :postFunc="postFunc"
+                          @change="onChange('change',scope,column)"></BnSelect>
+              </div>
+              <div class="childFormBody-td" v-if="[6,20].includes(column.behaviorType)">
+                <BnCascader @change="onChange('change',scope,column)"
+                            v-model="scope.row[column.columnCode]"
+                            :postFunc="postFunc" :path-url="column.pathUrl"
+                            :post-data="column.postData" remote-mode="tree"
+                            :optionProps="{value:'code',label:'title'}" :label-in-value="false"
+                            :options="column.moduleDefinition.optionList" hide-check-to-last
+                            :multiple="column.behaviorType == 20" :disabled="disabled || isDisabled(column)"
+                            clearable/>
+<!--                <BnRelation @change="onChange('change',scope,column)" :options="column.moduleDefinition.optionList"-->
+<!--                            :props="{checkStrictly:true,value:'code',label:'title'}"-->
+<!--                            v-model="scope.row[column.columnCode]"-->
+<!--                            :multiple="column.behaviorType == 20" filterable-->
+<!--                            :disabled="disabled || isDisabled(column)"></BnRelation>-->
+              </div>
+              <div class="childFormBody-td" v-if="column.behaviorType == 7">
+                <el-date-picker @change="onChange('change',scope,column)" :disabled="disabled || isDisabled(column)"
+                                v-model="scope.row[column.columnCode]" type="datetime"
+                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
+              </div>
+              <div v-if="column.behaviorType == 10" class="childFormBody-file">
+                <el-popover placement="top" title="附件上传" :width="400" trigger="click">
+                  <child-form-file :column="column" :value="scope.row[column.columnCode]"
+                                   @change="onChange('change',scope,column)"></child-form-file>
+                  <template #reference>
+                    <span class="bnUIcon bnUIcon-addFile childFormBody-file-icon"></span>
+                  </template>
+                </el-popover>
+                <div class="childFormBody-file-view" v-if="scope.row[column.columnCode]">
+                  <BnFileView :file-list="scope.row[column.columnCode]" :is-mini="true"
+                              :isDel="true"
+                              :no-warp="true" @delFile="onChange('change',scope,column)"></BnFileView>
+                </div>
+              </div>
+              <div class="childFormBody-operate">
+                <el-popover placement="bottom" v-if="column.extraInfo?.stockSearchColumnCode" width="480">
+                  <searchInventory :key="scope.row._X_ROW_KEY" :postFunc="postFunc" :column="column" :row="scope.row"/>
+                  <template #reference>
+                     <span class="bnUIcon bnUIcon-inventory w-color-orange w-default-hover w-margin-left4"
+                           title="点击查库存"/>
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+          </template>
+        </vxe-column>
+      </template>
+      <template #empty>
+		<span>暂无数据
+		  <span class="w-color-blue w-cursor-pointer" v-if="!disabled" @click="addDefault(0)">点击添加</span>
+		</span>
+      </template>
+      <vxe-column fixed="right" width="52" v-if="!disabled">
+        <template #header="{ column }">
+          <div class="w-flex-center">
+           <span class="bnUIcon bnUIcon-clear w-color-red w-font-max w-cursor-pointer" title="点击清空子表单" v-if="sourceData.value.length > 0"
+                 @click="sourceData.value=[]"></span>
+          </div>
+        </template>
+        <template #default="scope">
+		  <span class="bnUIcon bnUIcon-add w-color-blue w-cursor-pointer w-font-max w-margin-right5"
+            @click="addDefault(scope.rowIndex+1)"></span>
+          <span class="bnUIcon bnUIcon-delete w-color-red w-font-max w-cursor-pointer"
+                @click="delItem(scope.rowIndex)"></span>
+        </template>
+      </vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script>
+import {debounce} from "lodash";
+import childFormFile from "./childFormFile.vue";
+import searchInventory from "./searchInventory.vue";
+// 处理默认值映射相关逻辑
+import {initDefaultLinkVal} from "../BnSmartFormUtil.js";
+
+export default {
+  name: "editLabel",
+  components: {childFormFile, searchInventory},
+  props: {
+    sourceData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 默认值映射相关规则
+    defaultLink: Object,
+    componentList: Array,
+    taskId: [String, Number],
+    disabled: Boolean,
+    postFunc: Function
+  },
+  methods: {
+    /**
+     * 根据权限判断是否限制组件
+     * */
+    isShow(column) {
+      let flag = true;
+      // 处理新建时可见、编辑时可见
+      if (!this.taskId && column.extraInfo.isAddable != 1) {
+        flag = false;
+      } else if (this.taskId && column.extraInfo.isEditable != 1) {
+        flag = false;
+      }
+      return flag;
+    },
+    /**
+     * 根据权限判断是否禁用组件
+     * */
+    isDisabled(column) {
+      let flag = false;
+      // 处理新建时可见、编辑时可见
+      if (!this.taskId && column.extraInfo.valueAddable == 1) {
+        flag = true;
+      } else if (this.taskId && column.extraInfo.valueEditable == 1) {
+        flag = true;
+      }
+      return flag;
+    },
+    /**
+     * 向表格内插入数据
+     * */
+    addDefault(index) {
+      //超出最大条数，提示不能再增加保存了
+      if (this.sourceData.value.length >= 30) {
+        this.$message.warning("最多支持30条");
+        return false;
+      }
+      //遍历子表单的组件列表，整理value
+      let value = {};
+      this.sourceData.moduleDefinition.forEach(component => {
+        // 子表单的规则的key 是 父组件id。子组件id 拼接的，其他判断和正常组件一样
+        if (component.behaviorType == 1 && this.defaultLink?.setColumn[`${this.sourceData.columnCode}.${component.columnCode}`]) {
+          value[component.columnCode] = initDefaultLinkVal(this.componentList, this.defaultLink.setColumn[`${this.sourceData.columnCode}.${component.columnCode}`]);
+        } else {
+          value[component.columnCode] = component.value;
+        }
+      });
+      let data = JSON.parse(JSON.stringify(value))
+      if (index) {
+        this.sourceData.value.splice(index, 0, data)
+      } else {
+        this.sourceData.value.push(data);
+      }
+      // 触发change事件，整行添加
+      this.onChange('addRow', {row: data}, null)
+    },
+    /**
+     * 删除数据
+     * */
+    delItem(index) {
+      this.sourceData.value.splice(index, 1);
+      this.onChange('delRow', {delIndx: index}, null)
+    },
+    /**
+     * 输入框Change事件
+     * @param {String} type 是否是其他事件类型
+     * @param {Object} params 扩展参数
+     * */
+    onChange: debounce(function (type, params, column) {
+      this.sourceData.error = '';
+      this.sourceData.warning = '';
+      // 当值不为空
+      this.$emit('onChange', this.sourceData, {type: type, tableScope: params, childColumn: column})
+    }, 500),
+    /**
+     * 输入框输入事件
+     * @param {Object} params 扩展参数
+     * */
+    onInput(e, params, column) {
+      this.$emit('input', this.sourceData, {tableScope: params, childColumn: column})
+      this.onChange('input', params, column)
+    },
+    /**
+     * 输入框onFocus事件
+     * @param {Object} params 表格组件行数据
+     * @param {Object} column 子组件
+     * */
+    onFocus(e, params, column) {
+      this.$emit('focus', this.sourceData, {tableScope: params, childColumn: column})
+    },
+    /**
+     * 输入框失去焦点事件
+     * @param {Object} params 扩展参数
+     * */
+    onBlur(e, params, column) {
+      this.$emit('blur', this.sourceData, {tableScope: params, childColumn: column})
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+.childFormBody {
+  &-file {
+    order: 1;
+    display: flex;
+    align-items: center;
+
+    &-icon {
+      font-size: 22px;
+    }
+
+    &-view {
+      width: calc(100% - 20px);
+      overflow: hidden
+    }
+  }
+
+  &-td {
+    flex-grow: 1;
+
+  }
+
+  &-operate {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/packages/BnSmartForm/childrenForm/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="w-default-wrap childrenForm">
+    <formItemTop :column="column"/>
+    <div class="childrenForm-behavior">
+      <div class="w-flex-center w-margin-bottom6">
+        <!--多包裹下的子单-->
+        <template v-if="dataBack && dataBack.order == column.columnCode">
+          <el-popover placement="top-start" :width="400" trigger="hover" :show-arrow="false">
+            <div class="BnSmartForm-title-tip">
+              <span class="w-color-blue">标准ERP子组件</span>，会将选中包裹的子表合并然后在这里列举
+            </div>
+            <template #reference>
+              <el-button link type="primary" style="padding-left: 0"
+                         @click="$emit('operate', this.column,'chooseChildOrder')">
+                <span class="bnUIcon bnUIcon-split"></span> 请选择
+              </el-button>
+            </template>
+          </el-popover>
+        </template>
+        <!--子表单关联表，查询数据-->
+        <template v-if="column.insideDataSourceInfo?.tableCode">
+          <el-popover placement="top-start" :width="440" trigger="hover" :show-arrow="false">
+            <div class="BnSmartForm-title-tip">
+              <span class="w-color-blue">关联表组件</span>，可以通过筛选条件，筛选外部表数据进行选择回填
+            </div>
+            <template #reference>
+              <el-button link type="primary" style="padding-left: 0"
+                         @click="$emit('operate', this.column,'chooseAssocTable')">
+                <span class="bnUIcon bnUIcon-linkTable"></span>筛选{{ column.name }}
+              </el-button>
+            </template>
+          </el-popover>
+        </template>
+        <!--ipaas数据关联查询-->
+        <template v-if="column.outDataSourceInfo[0]?.platform == 'relation_ipaas'">
+          <el-popover placement="top-start" :width="440" trigger="hover" :show-arrow="false">
+            <div class="BnSmartForm-title-tip">
+              <span class="w-color-blue">关联ipaas查询数据</span>，可以通过班牛ipaas接口筛选外部数据，进行选择回填
+            </div>
+            <template #reference>
+              <el-button link type="primary" style="padding-left: 0"
+                         @click="$emit('operate', this.column,'chooseIPaasData')">
+                <span class="bnUIcon bnUIcon-api"></span>查询{{ column.name }}
+              </el-button>
+            </template>
+          </el-popover>
+        </template>
+      </div>
+      <childrenFormBody :sourceData="column" ref="childrenFormBody" :disabled="disabled" :taskId="taskId"
+                        :defaultLink="defaultLink" :componentList="componentList" :postFunc="postFunc"
+                        @input="onInput" @onChange="onChange" @focus="onFocus" @blur="onBlur"></childrenFormBody>
+    </div>
+    <formItemFooter :column="column"/>
+  </div>
+</template>
+
+<script>
+//引入子表单组件
+import childrenFormBody from './childrenFormBody.vue'
+import formItemTop from "../formItemTop/formItemTop.vue";
+import formItemFooter from "../formItemFooter/formItemFooter.vue";
+import {debounce} from "lodash";
+
+export default {
+  name: "childrenForm",
+  components: {formItemFooter, formItemTop, childrenFormBody,},
+  props: {
+    column: {
+      type: Object, default() {
+        return {}
+      }
+    },
+    dataBack: Object,
+    // 默认值映射相关规则
+    defaultLink: Object,
+    componentList: Array,
+    disabled: Boolean,
+    taskId: [String, Number],
+    postFunc: Function
+  },
+  methods: {
+    /**
+     * Change事件
+     * params:子表单需要增加更多参数，用来表示是自己那个子组件，发生的什么变化
+     * */
+    onChange: debounce(function (column, params) {
+      this.$emit('onChange', this.column, params)
+    }, 500),
+    /**
+     * 输入框输入事件
+     * */
+    onInput(e, params) {
+      this.$emit('input', this.column, params)
+    },
+    /**
+     * 输入框onFocus事件
+     * */
+    onFocus(e, params) {
+      this.$emit('focus', this.column, params)
+    },
+    /**
+     * 输入框失去焦点事件
+     * */
+    onBlur(e, params) {
+      this.$emit('blur', this.column, params)
+    },
+  },
+}
+</script>
+