@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnSmartForm/BnBatchForm.vue

@@ -1,334 +0,0 @@
-<!--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>