@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnSmartForm/fileForm/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="fileForm">
+	<formItemTop v-if="!hiddenTop" :column="column"/>
+	<div class="">
+	  <el-upload class="fileForm-upload" ref="uploadInput" drag
+				 :action="column.pathUrl || uploadAction"
+				 :show-file-list="false" :disabled="disabled"
+				 :before-upload="beforeUpload" multiple
+				 :data="uploadData" :on-progress="handleUploadProgress"
+				 :on-success="fileSuccess">
+		<div class="fileForm-btn">
+		  <span class="bnUIcon bnUIcon-upload"></span> 选择或拖拽上传文件
+		</div>
+	  </el-upload>
+	  <!-- 视频附件不支持，其他情况支持 -->
+	  <el-input
+		v-model="pasteValue"
+		ref="pasteImgInput"
+		placeholder="复制粘贴上传截图"
+		class="fileForm-input" :disabled="disabled"
+	  />
+	  <span class="fileForm-tip">最多可上传{{ uploadFileNumber }}个文件，单个文件不超过{{ showLimit }}M</span>
+	</div>
+	<el-progress
+	  style="width: 100%; max-width: 444px"
+	  :percentage="uploadProgress"
+	  v-show="uploadProgress > 0"
+	  class="fileForm-progress"
+	></el-progress>
+	<div>
+	  <BnFileView :file-list="column.value" :isDel="!disabled" row="2"></BnFileView>
+	</div>
+	<formItemFooter :column="column"/>
+  </div>
+</template>
+
+<script>
+  import formItemTop from "../formItemTop/formItemTop.vue";
+  import formItemFooter from "../formItemFooter/formItemFooter.vue";
+  import {pasteImg} from "../BnSmartFormUtil.js";
+  import {fileType} from "./fileFormData.js";
+  
+  export default {
+	name: "FileForm",
+	components: {formItemFooter, formItemTop},
+	props: {
+	  column: {type: Object, default: () => ({}),},
+	  disabled:Boolean,
+	  // 隐藏头部
+	  hiddenTop:Boolean
+	},
+	data() {
+	  return {
+		fileType: this.column.fileType || fileType,
+		pasteValue: "",
+		pasteImgList: [], //用来存放粘贴的图片
+		// 上传进度
+		uploadProgress: 0,
+		uploadFileCount: 0, //记录上传次数，限制最多上传5个
+		uploadFileNumber: this.column.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.column.value.length < this.uploadFileNumber) {
+			this.column.value.push(fileData);
+			this.$emit('onChange', this.column);
+		  } else {
+			this.$message({
+			  message: `上传文件个数不能超过${this.uploadFileNumber}个`,
+			  type: 'warning'
+			});
+		  }
+		  this.uploadFileCount = this.column.value.length;
+		} else {
+		  this.$message({
+			message: res.msg,
+			type: 'warning'
+		  });
+		}
+	  },
+	  /**
+	   * 附件上传前
+	   * */
+	  beforeUpload(file) {
+		if (this.column.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.column.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.column.value.push(fileData);
+			this.$emit('onChange', this.column);
+			if (this.column.value.length >= this.uploadFileNumber) {
+			  this.pasteImgList = [];
+			}
+		  } else {
+			this.$message({
+			  message: res.msg,
+			  type: 'warning'
+			});
+		  }
+		});
+	  },
+	},
+	mounted() {
+	  if (this.$refs.pasteImgInput && this.$refs.pasteImgInput.$el) {
+		this.$refs.pasteImgInput.$el.addEventListener("paste", this.pasteEvent);
+	  }
+	},
+	//实例销毁前
+	beforeDestroy() {
+	  if (this.$refs.pasteImgInput && this.$refs.pasteImgInput.$el) {
+		this.$refs.pasteImgInput.$el.removeEventListener(
+		  "paste",
+		  this.pasteEvent
+		);
+	  }
+	},
+  };
+</script>
+<style scoped lang="scss">
+  .fileForm {
+	&-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(.fileForm-upload) {
+	  .el-upload {
+		display: inline-block;
+	  }
+	  
+	  .el-upload-dragger {
+		border: none;
+		width: auto;
+		height: auto;
+		border-radius: 0;
+		padding: 0;
+	  }
+	}
+	
+	&-list {
+	  position: relative;
+	}
+	
+	:deep(.fileForm-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/formItemFooter/formItemFooter.vue

@@ -0,0 +1,38 @@
+<!--表单组件底部-->
+<template>
+  <div class="w-default-wrap">
+    <!--  组件错误，组件警告提示相关-->
+    <div class="w-default-wrap BnSmartForm-tips">
+      <span class="w-font-min w-color-red" v-show="column.error">{{ column.error }}</span>
+      <span class="w-font-min w-color-orange" v-show="column.warning && !column.error">{{ column.warning }}</span>
+      <span class="w-font-min w-color-blue w-cursor-pointer" v-if="extraInfo && extraInfo.isCheckRepeat && column.warning && column.warning.includes('相同')" @click="$emit('operate', this.column,'chooseRepeat')">查看</span>
+    </div>
+    <div class="w-default-wrap BnSmartForm-explain" v-if="column.extraInfo?.paraExplain">
+      {{ column.extraInfo.paraExplain }}
+    </div>
+    <div class="w-default-wrap w-margin-top8 w-flex-wrap w-flex-gap8" v-if="column.extraInfo?.operationPictures?.length>0">
+      <el-image v-for="(url,index) in column.extraInfo.operationPictures" preview-teleported
+          style="width: 46px; height: 46px" :src="url"
+          :preview-src-list="column.extraInfo.operationPictures"
+          show-progress
+          :initial-index="index"
+          fit="cover"
+      />
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: "formItemFooter",
+    props: {
+      //组件对象
+      column: {type: Object},
+      extraInfo: Object,
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @use "../smartFormsCommon";
+</style>

package/packages/BnSmartForm/formItemTop/formItemTop.vue

@@ -0,0 +1,42 @@
+<!--表单组件头部-->
+<template>
+	<div class="w-default-wrap BnSmartForm-title" :class="{'w-color-red':column.error}">
+	  <span class="w-color-red w-font-more" v-show="column.extraInfo.valueEmptyCheck == 1">*</span>
+	  {{ column.name }}
+	  <template v-if="column.extraInfo.searchKey == 2">
+		<el-popover placement="top-start" :width="400" trigger="hover" :show-arrow="false">
+		  <div class="BnSmartForm-title-tip">
+			拥有该标识的组件，会在手动修改值或输入框失去焦点后，触发第三方数据拉取，并将结果回填到对应的组件上。
+		  </div>
+		  <template #reference>
+			<span class="bnUIcon bnUIcon-fast w-color-orange w-font-weight w-cursor-pointer"></span>
+		  </template>
+		</el-popover>
+	  </template>
+	  <template	v-if="dataBack && dataBack.key == column.columnCode">
+		<el-popover placement="top-start" :width="400" trigger="hover" :show-arrow="false">
+		  <div class="BnSmartForm-title-tip">
+			<span class="w-color-blue">多层级数据</span>，通过拥有 <span class="bnUIcon bnUIcon-fast w-color-orange"></span> 标识的组件拉取到完整第三方数据后，以该组件为主键进行拆分，选择数据后，我们会整合回填到表单的其他字段中。
+			<span class="w-color-orange">例如：</span>通过订单号拉取到多个包裹，在这里选择包裹后，会自动将多笔包裹数据合并回填整个表单得到完整数据
+		  </div>
+		  <template #reference>
+			<span class="bnUIcon bnUIcon-split w-color-blue w-font16 w-font-weight w-cursor-pointer"></span>
+		  </template>
+		</el-popover>
+	  </template>
+	</div>
+</template>
+<script>
+  export default {
+	name: "formItemTop",
+	props: {
+	  //组件对象
+	  column: {type: Object},
+	  dataBack: {type: Object},
+	},
+  }
+</script>
+
+<style scoped lang="scss">
+  @use "../smartFormsCommon";
+</style>