@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnSmartForm/BnBatchForm.vue

@@ -0,0 +1,334 @@
+<!--Created by xinba on 2024/10/30.-->
+<!--
+联动组件、
+"https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_26e18a1f306bad541a1713b86e6d1030.png" 1
+"https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_34d142cdae778fe5751269e3ebb078be.png" 2
+"https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_a3e8db53df86fa2143e8d5238fc5dac0.png" 3
+子表单组件、
+附件预览
+-->
+<template>
+  <div class="BnBatchForm">
+	<div class="BnBatchForm-body" :val="value">
+	  <el-scrollbar ref="formScroll" height="100%" style="background: #fff">
+		<template v-for="(column, j) in componentList" :key="j">
+		  <div class="BnBatchForm-body-item" :id="'col_'+column.columnCode">
+			<div class="BnBatchForm-body-item-del" @click="componentList.splice(j,1)">
+			  <span class="bnUIcon bnUIcon-delete"></span>
+			</div>
+			<component :is="componentView(column)" :column="column" :postFunc="postFunc" @onChange="comChange"/>
+		  </div>
+		</template>
+	  </el-scrollbar>
+	</div>
+  </div>
+</template>
+<script>
+  import {checkChildrenFormValue, FORM_TYPES,} from "./BnSmartFormUtil";
+  import {defineAsyncComponent} from "vue";
+  import {cloneDeep, isEmpty, debounce} from "lodash";
+  export default {
+	name: "BnBatchForm",
+	props: {
+	  // 表单id 涉及编辑表单
+	  id: [String, Number],
+	  // 表单value
+	  modelValue: Object,
+	  // 扩展参数
+	  extendPost: Object,
+	  // 组件列表
+	  components: Array,
+	  // 接口请求外部转发
+	  postFunc: Function,
+	},
+	methods: {
+	  /**
+	   * 生成整张表单的valueData，供保存使用
+	   * @param {Object} components: 组件data
+	   *
+	   * */
+	  getFormContent() {
+		let response = {
+		  contents: [],
+		};
+		try {
+		  for (let i in this.componentList) {
+			let component = cloneDeep(this.componentList[i]);
+			let content = {
+			  columnCode: component.columnCode,
+			};
+			switch (component.behaviorType) {
+			  case 1://文本
+			  case 2://数值
+			  case 9://评分
+			  case 7://日期
+			  case 11://富文本
+			  {
+				content.value = component.value;
+				break;
+			  }
+			  case 3://单选
+			  case 4://下拉
+			  case 5://多选
+			  case 6://联动
+			  case 20://多选联动
+			  case 8://区间
+			  case 10://附件
+			  case 12://标签
+			  case 13://子表单
+			  case 14://地址
+			  case 15://收寄信息
+			  {
+				content.value = component.value?JSON.stringify(component.value):'';
+				break;
+			  }
+			}
+			response.contents.push(content)
+		  }
+		} catch (e) {
+		  console.log("getFormContentErr:" + e)
+		}
+		return response;
+	  },
+	  /**
+	   * 表单校验，根据组件规则校验表单填写的正确性
+	   * */
+	  checkFormContent() {
+		let check = {
+		  column: null,
+		  checked: true
+		};
+		for (let i in this.componentList) {
+		  let component = {...this.componentList[i]};
+		  let content = {
+			columnCode: component.columnCode,
+		  };
+		  switch (component.behaviorType) {
+			case 1://文本
+			case 2://数值
+			{
+			  //  文本校验是否必填
+			  if (component.extraInfo.valueEmptyCheck == 1 && component.behaviorType == 1 && isEmpty(component.value)) {
+				this.componentList[i].error = component.name + "的值不能为空";
+			  }
+			  //  数值校验是否必填
+			  if (component.extraInfo.valueEmptyCheck == 1 && component.behaviorType == 2 && (component.value === undefined || component.value === null || component.value === '')) {
+				this.componentList[i].error = component.name + "的值不能为空";
+			  }
+			  // 正则校验
+			  if (component.extraInfo.regular) {
+				//获取校验规则，转化为正则表达式
+				let rule = new RegExp(component.extraInfo.regular);
+				if (!rule.test(component.value)) {
+				  this.componentList[i].error = component.extraInfo.paraExplain || '请输入符合要求的' + component.name;
+				}
+			  }
+			  break;
+			}
+			case 3://单选
+			case 4://下拉
+			case 5://多选
+			case 6://联动
+			case 20://多选联动
+			case 8://区间
+			case 10://附件
+			case 12://标签
+			case 9://评分
+			case 7://日期
+			case 11://富文本
+			{
+			  //  校验是否必填
+			  if (component.extraInfo.valueEmptyCheck == 1 && isEmpty(component.value)) {
+				this.componentList[i].error = component.name + "的值不能为空";
+			  }
+			  break;
+			}
+			case 13://子表单
+			{
+			  if (component.extraInfo.valueEmptyCheck == 1) {
+				if(isEmpty(component.value)){
+				  this.componentList[i].error = component.name + '至少要有一条内容';
+				}else{
+				  let msg = checkChildrenFormValue(component,this.id)
+				  if(msg){
+					this.componentList[i].error = msg;
+				  }
+				}
+			  }
+			  break;
+			}
+			case 14://地址
+			case 15://收寄信息
+			{
+			  if (component.extraInfo.valueEmptyCheck == 1) {
+				for(let key in component.value){
+				  if(isEmpty(component.value[key])){
+					this.componentList[i].error = `请输入完整的${component.name}`;
+					break;
+				  }
+				}
+			  }
+			  break;
+			}
+		  }
+		  if (this.componentList[i].error) {
+			check.column = this.componentList[i];
+			check.checked = false;
+			this.getHere(content, true);
+			break;
+		  }
+		}
+		return check;
+	  },
+	  /**
+	   * 锚点滚动条滚动后，组件列表跟随滚动到指定位置
+	   * */
+	  getHere(item) {
+		const targetElement = document.getElementById("col_" + item.columnCode);
+		if (targetElement && this.$refs.formScroll) {
+		  // 使用 el-scrollbar 的 scrollTo 方法
+		  this.$refs.formScroll.scrollTo({top: targetElement.offsetTop, behavior: 'smooth'});
+		}
+	  },
+	  /**
+	   * 保存任务，返回校验完毕，组装完成后的数据
+	   * */
+	  saveTask() {
+		if (this.checkFormContent()) {
+		  let params = this.getFormContent();
+		  return {check: true, taskStatus: {}, carryUser: {}, ...params}
+		} else {
+		  return {check: false}
+		}
+	  },
+	  /**
+	   * 判断返回是哪一类型的组件
+	   * */
+	  componentView(column) {
+		const components = {
+		  stringForm: defineAsyncComponent(() => import('./stringForm/index.vue')),
+		  numberForm: defineAsyncComponent(() => import('./numberForm/index.vue')),
+		  selectForm: defineAsyncComponent(() => import('./selectForm/index.vue')),
+		  radioForm: defineAsyncComponent(() => import('./radioForm/index.vue')),
+		  checkboxForm: defineAsyncComponent(() => import('./checkboxForm/index.vue')),
+		  dateForm: defineAsyncComponent(() => import('./dateForm/index.vue')),
+		  dateDualForm: defineAsyncComponent(() => import('./dateDualForm/index.vue')),
+		  fileForm: defineAsyncComponent(() => import('./fileForm/index.vue')),
+		  childrenForm: defineAsyncComponent(() => import('./childrenForm/index.vue')),
+		  addressForm: defineAsyncComponent(() => import('./addressForm/index.vue')),
+		  receiveForm: defineAsyncComponent(() => import('./receiveForm/index.vue')),
+		  relationForm: defineAsyncComponent(() => import('./relationForm/index.vue')),
+		  // showValForm: defineAsyncComponent(() => import('./showValForm/index.vue')),
+		}
+		// 根据常量获取不同组件类型，进行渲染
+		let componentName = FORM_TYPES[column.behaviorType] || null;
+		try {
+		  //  当组件是编辑时禁用，或者是流程的冻结组件时，展示一个预览样式 autoNumber:自动编码
+		  // if (this.id && column.purviewArr.includes('edit') && column.extraInfo.valueEditable == '1') {
+		  // return 'showValForm'
+		  // }
+		} catch (e) {
+		  console.log('BnBatchFormComponentViewErr:' + e)
+		}
+		return components[componentName]
+	  },
+	  /**
+	   * 组件值发生改变，在数据确定变化结束才会返回这个事件。需要注意input事件也会触发change，只不过做了防抖
+	   * @param {Object} params :子表单事件透出，需要提供更多组件信息,只有子表单才有这个参数！！
+	   * */
+	  comChange() {
+		this.$emit('change', this.value)
+	  },
+	},
+	computed: {
+	  // 组件列表
+	  componentList: {
+		get() {
+		  return this.components;
+		},
+		set(val) {
+		  this.$emit("update:components", val);
+		}
+	  },
+	  value() {
+		const content = this.getFormContent();
+		this.$emit("update:modelValue", content);
+		return content;
+	  },
+	},
+  }
+</script>
+<style>
+  @import "../font/iconfont.css";
+</style>
+<style scoped lang="scss">
+  .BnBatchForm {
+	position: relative;
+	background: #fff;
+	width: 100%;
+	height: 100%;
+	
+	&-head {
+	  position: absolute;
+	  top: 0;
+	  width: 100%;
+	  height: 8px;
+	}
+	
+	&-body {
+	  position: relative;
+	  width: 100%;
+	  height: 100%;
+	  
+	  &-item {
+		position: relative;
+		padding: 10px 20px;
+		&-del{
+		  position: absolute;
+		  right: 20px;
+		  top: 10px;
+		  color: #FF5F5F;
+		  cursor: pointer;
+		  z-index: 1;
+		}
+		&:first-child{
+		  padding-top: 0;
+		}
+	  }
+	}
+	
+	&-elf {
+	  position: absolute;
+	  top: 0;
+	  left: calc(100% + 10px);
+	  background: #fff;
+	  width: 340px;
+	  height: calc(80%);
+	  box-shadow: 0 0 12px rgba(0, 0, 0, .12);;
+	  border-radius: 4px;
+	  border: 1px solid #e4e7ed;
+	  overflow: hidden;
+	  
+	  &-tip {
+		position: absolute;
+		top: 60px;
+		right: 30px;
+		width: 50px;
+		cursor: pointer;
+		z-index: -1;
+		
+		img {
+		  width: 60px;
+		  transform: rotate(40deg); /* 旋转 90 度 */
+		  transform-origin: center; /* 设置旋转中心为图片中心 */
+		}
+		
+		transition: right 0.5s ease-in-out;
+		
+		&-show {
+		  right: -20px;
+		}
+	  }
+	}
+  }
+</style>