jufubao-forms 1.0.0-beta1

package/src/components/JfbFormsDynamicForm/JfbFormsDynamicFormLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-forms-dynamic-form {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: var(--preview-z-index);
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-forms-dynamic-form {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbFormsDynamicForm/JfbFormsDynamicFormMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-forms-dynamic-form'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbFormsDynamicForm/Mock.js

@@ -0,0 +1,194 @@
+"use strict";
+
+module.exports = {
+  getDynamicForm: {
+    form_name: "普益调查",
+    list: [
+      {
+        field_id: 1,
+        field_value: "field_1",
+        form_id: 2,
+        field_name: "姓名",
+        field_type: "text",
+        explain: "昵称",
+        required: true,
+        options: [],
+        default: "",
+        placeholder: "请输入姓名",
+        validate_type: "all",
+        validate_rules:
+          '{"rule":{"label":"\\u4e0d\\u9650\\u5236","limit":["length_range","default_value","placeholder"],"value":"all","RegExp":"^.*$"},"limit":{"max":"5","min":"1","placeholder":"\\u8bf7\\u8f93\\u5165\\u59d3\\u540d"}}',
+        sort: 0,
+        created_time: 1721789997,
+        updated_time: 1721879197
+      },
+      {
+        field_id: 5,
+        field_value: "field_5",
+        form_id: 2,
+        field_name: "预约日期",
+        field_type: "date",
+        explain: "",
+        required: true,
+        options: [],
+        default: "",
+        placeholder: "请选择预约日期",
+        validate_type: "datetime",
+        validate_rules: '{"date_range":"after"}',
+        sort: 0,
+        created_time: 1721877747,
+        updated_time: 1722246228
+      },
+      {
+        field_id: 9,
+        field_value: "field_9",
+        form_id: 2,
+        field_name: "邮箱",
+        field_type: "text",
+        explain: "",
+        required: false,
+        options: [],
+        default: "jufubao@163.com",
+        placeholder: "邮箱",
+        validate_type: "email",
+        validate_rules:
+          '{"rule":{"label":"\\u90ae\\u7bb1","limit":["default_value"],"value":"email","RegExp":"\\\\w+([-+.]\\\\w+)*@\\\\w+([-.]\\\\w+)*\\\\.\\\\w+([-.]\\\\w+)*"},"limit":{"defaultValue":"jufubao@163.com"}}',
+        sort: 0,
+        created_time: 1722224238,
+        updated_time: 1722224971
+      },
+      {
+        field_id: 14,
+        field_value: "field_14",
+        form_id: 2,
+        field_name: "出生日期",
+        field_type: "datepicker",
+        explain: "",
+        required: false,
+        options: [],
+        default: "",
+        placeholder: "",
+        validate_type: "day",
+        validate_rules: "null",
+        sort: 0,
+        created_time: 1722242079,
+        updated_time: 1722243046
+      },
+      {
+        field_id: 8,
+        field_value: "field_8",
+        form_id: 2,
+        field_name: "手机号",
+        field_type: "text",
+        explain: "手机号注重个人隐私",
+        required: true,
+        options: [],
+        default: "",
+        placeholder: "请输入手机号",
+        validate_type: "phone",
+        validate_rules:
+          '{"rule":{"label":"\\u624b\\u673a\\u53f7","limit":[],"value":"phone","RegExp":"^1[3-9][0-9]{9}$"},"limit":[]}',
+        sort: 5,
+        created_time: 1722220289,
+        updated_time: 1722246042
+      }
+    ],
+    request_id: "054e1fa215fd98a6"
+  },
+
+  getSaasDynamicForm: {
+    form_name: "普益调查",
+    list: [
+      {
+        field_id: 1,
+        field_value: "field_1",
+        form_id: 2,
+        field_name: "姓名",
+        field_type: "text",
+        explain: "昵称",
+        required: true,
+        options: [],
+        default: "",
+        placeholder: "请输入姓名",
+        validate_type: "all",
+        validate_rules:
+          '{"rule":{"label":"\\u4e0d\\u9650\\u5236","limit":["length_range","default_value","placeholder"],"value":"all","RegExp":"^.*$"},"limit":{"max":"5","min":"1","placeholder":"\\u8bf7\\u8f93\\u5165\\u59d3\\u540d"}}',
+        sort: 0,
+        created_time: 1721789997,
+        updated_time: 1721879197
+      },
+      {
+        field_id: 5,
+        field_value: "field_5",
+        form_id: 2,
+        field_name: "预约日期",
+        field_type: "date",
+        explain: "",
+        required: true,
+        options: [],
+        default: "",
+        placeholder: "请选择预约日期",
+        validate_type: "datetime",
+        validate_rules: '{"date_range":"after"}',
+        sort: 0,
+        created_time: 1721877747,
+        updated_time: 1722246228
+      },
+      {
+        field_id: 9,
+        field_value: "field_9",
+        form_id: 2,
+        field_name: "邮箱",
+        field_type: "text",
+        explain: "",
+        required: false,
+        options: [],
+        default: "jufubao@163.com",
+        placeholder: "邮箱",
+        validate_type: "email",
+        validate_rules:
+          '{"rule":{"label":"\\u90ae\\u7bb1","limit":["default_value"],"value":"email","RegExp":"\\\\w+([-+.]\\\\w+)*@\\\\w+([-.]\\\\w+)*\\\\.\\\\w+([-.]\\\\w+)*"},"limit":{"defaultValue":"jufubao@163.com"}}',
+        sort: 0,
+        created_time: 1722224238,
+        updated_time: 1722224971
+      },
+      {
+        field_id: 14,
+        field_value: "field_14",
+        form_id: 2,
+        field_name: "出生日期",
+        field_type: "datepicker",
+        explain: "",
+        required: false,
+        options: [],
+        default: "",
+        placeholder: "",
+        validate_type: "day",
+        validate_rules: "null",
+        sort: 0,
+        created_time: 1722242079,
+        updated_time: 1722243046
+      },
+      {
+        field_id: 8,
+        field_value: "field_8",
+        form_id: 2,
+        field_name: "手机号",
+        field_type: "text",
+        explain: "手机号注重个人隐私",
+        required: true,
+        options: [],
+        default: "",
+        placeholder: "请输入手机号",
+        validate_type: "phone",
+        validate_rules:
+          '{"rule":{"label":"\\u624b\\u673a\\u53f7","limit":[],"value":"phone","RegExp":"^1[3-9][0-9]{9}$"},"limit":[]}',
+        sort: 5,
+        created_time: 1722220289,
+        updated_time: 1722246042
+      }
+    ],
+    request_id: "054e1fa215fd98a6"
+  },
+
+};

package/src/components/JfbFormsDynamicForm/XdFormDate.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="xd-form-date">
+    <view @click="handleShowDate" class="form-column">
+      <slot></slot>
+      <xd-font-icon icon="iconriqi" :size="32" :color="'#666666'"></xd-font-icon>
+    </view>
+    <xd-down-drawer :show.sync="showDate">
+      <xd-date
+        :main-color="'#FF5733'"
+        :start-date="start_date"
+        :end-date="end_date"
+        :selected="dateSelected"
+        @change="handleChange"
+      ></xd-date>
+    </xd-down-drawer>
+  </view>
+</template>
+<script>
+  import XdDate from "@/components/XdDate/XdDate"
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer"
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
+  
+  export default {
+    name: "XdFormDate",
+    components: {
+      XdDate,
+      XdDownDrawer,
+      XdFontIcon,
+    },
+    props: {},
+    data() {
+      return {
+        showDate: false,
+        start_date: "",
+        end_date: "",
+        dateSelected: [],
+        chose_date: "",
+      }
+    },
+    methods: {
+      handleChange(e){
+        this.chose_date = e.fulldate;
+        this.$emit("input", e.fulldate);
+        this.$emit("change", e.fulldate);
+        this.showDate = false;
+      },
+      handleShowDate(){
+        this.showDate = true;
+      }
+    }
+
+  }
+</script>
+
+<style lang="less" scoped>
+  .xd-form-date{
+    height: 80rpx;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: #666666;
+    font-size: 28rpx;
+    .form-column{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20rpx;
+    }
+  }
+</style>

package/src/components/JfbFormsDynamicForm/ld-select/ld-select.vue

@@ -0,0 +1,329 @@
+<template>
+	<view class="main">
+		<view class="input" :style="disabled?'background-color:#f5f7fa':''">
+			<view @click="showModal" class="content" :style="{'color': disabled || (!showVal && placeholder)? '#c0c4cc': ''}">{{showVal || placeholder}}</view>
+			<text v-if="clearable&&!disabled&&showVal" @click="empty" class="selectIcon iconcross"></text>
+		</view>
+		<view class="select-modal" :class="isShowModal?'show':''" @tap="hideModal">
+			<view class="select-dialog" @tap.stop="" :style="{backgroundColor:bgColor}">
+				<view class="select-bar bg-white">
+					<view class="action text-blue" @tap="cancelClick">{{cancelText}}</view>
+					<view class="action text-green" @tap="confirmClick">{{confirmText}}</view>
+				</view>
+				<view class="select-content">
+					<view class="select-item" v-for="(item,index) in list" :key="index"
+					:style="valueIndexOf(item)?'color:'+selectColor+';background-color:'+selectBgColor+';':'color:'+color+';'"
+					 @click="select(item)">
+						<view class="title">{{getLabelKeyValue(item)}}</view>
+						<text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		
+		props: {
+			value:{
+				type:[Number,String,Array,Object],
+				default:null
+			},
+			placeholder:{ // 占位符
+				default: "",
+				type: String
+			},
+			multiple:{ // 是否多选
+				default: false,
+				type: Boolean
+			},
+			list: {
+				default: () => [],
+				type: Array
+			},
+			valueKey:{ // 指定list中valueKey的值作为下拉框绑定内容
+				default: 'value',
+				type: String
+			},
+			labelKey:{ // 指定list中labelKey的值作为下拉框显示内容
+				default: 'label',
+				type: String
+			},
+			disabled: {
+				default: false,
+				type: Boolean
+			},
+			clearable:{
+				default: false,
+				type: Boolean
+			},
+			cancelText:{
+				default: "取消",
+				type: String
+			},
+			confirmText:{
+				default: "确定",
+				type: String
+			},
+			color:{
+				default: "#000000",
+				type: String
+			},
+			selectColor:{
+				default: "#0081ff",
+				type: String
+			},
+			bgColor:{
+				default: "#F1F1F1",
+				type: String
+			},
+			selectBgColor:{
+				default: "#FFFFFF",
+				type: String
+			}
+		},
+    data() {
+			return {
+				isShowModal:false,
+        uiValue: ""
+			};
+		},
+    watch: {
+      value: {
+        handler(val) {
+          console.log("watch value", val);
+          // this.$emit('input', val);
+        },
+        deep: true
+      }
+    },
+		computed: {
+			showVal(){
+        if(Array.isArray(this.uiValue)){
+          return this.uiValue.join(",")
+        }
+        return this.uiValue
+      }
+		},
+		created() {
+      if(this.multiple){
+        if(Array.isArray(this.value)){
+          this.uiValue = this.value;
+        } else {
+          if(typeof this.value === 'string'){
+            this.uiValue = this.value.split(",")
+          } else {
+            this.uiValue = []
+          }
+        }
+      }else{
+        this.uiValue = this.value;
+      }
+      
+		},
+		methods: {
+			select(item){ // 点击选项
+				let val = this.getValueKeyValue(item);
+				if(this.multiple){
+					let _value = this.uiValue || [];
+          if(!Array.isArray(_value)){
+            _value = _value.split(",")
+          }
+
+					let index = _value.indexOf(val);
+					if(index!=-1){
+						_value.splice(index,1)
+						this.setInput(_value);
+					} else {
+						_value.push(val)
+						this.setInput(_value);
+					}
+				} else {
+					this.setInput(val);
+					this.hideModal()
+				}
+			},
+			valueIndexOf(item){
+				let val = this.getValueKeyValue(item);
+				if(Array.isArray(this.uiValue)){
+					return this.uiValue.indexOf(val)!=-1
+				} else {
+					return this.uiValue === val
+				}
+			},
+			getLabelKeyValue(item){ // 获取label
+				return item[this.labelKey]
+				// if(item){
+				// 	return item[this.labelKey]
+				// } else {
+				// 	return item
+				// }
+			},
+			getValueKeyValue(item){ // 获取value
+				return item[this.valueKey]
+			},
+			empty(){ // 清空
+				if(this.multiple){
+					this.setInput([]);
+				} else {
+					this.setInput('');
+				}
+			},
+			setInput(val){
+        console.log("setInput", val)
+        this.uiValue = val;
+				this.$emit('change', val)
+				this.$emit('input', val)
+			},
+			cancelClick(){ // 点击取消
+				this.$emit('cancel', this.value)
+				this.hideModal()
+			},
+			confirmClick(){ // 点击确定
+				this.$emit('confirm', this.value)
+				this.hideModal()
+			},
+			showModal(){ // 显示model
+				if(!this.disabled){
+					this.isShowModal = true
+				}
+			},
+			hideModal(){ // 隐藏model
+				this.isShowModal = false
+			}
+		}
+	}
+</script>
+<style>	
+	@font-face {font-family: "selectIcon";
+	  src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208'); /* IE9 */
+	  src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABvQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFCATYCJAMMCwgABCAFhQUHNRsfBsg+QCa3uoO0oAJTMwhxVu965keqWBy1hkbwtfzWb2Z279/shRhJisKF6FApKLI7oyBbpAaHo3w24k+ca9EUJbDmjaeznUdZ/FOUlkWdJ33rizZY/Pw6J5Xw0qKYxHTMesePHVT6EFpaC4zV70sKi2bYgNPc1w0WHnDVC/e/UnNTgyP+4Jq6BBpIHoisgypLaIAFEtU0wgeaIG8Yu4nAIZwnUK1QgFfOT6nUUoBpgXjj2lqplTMpiuXtCW3N2iK+aPTS2/Qdnzny8d+5IEiaDMy99exklra//FrKnX48pChmgrq5QcYRQCEe17ruqgqLAKv8WntwqwhpLms/nB5yW/iHRxJEC0QOgT3NnfgF01NBKvOuIzNoZdh5gJuAeGrsozE8vOJ7u5D832oz55039W5G+S52K0H+zNf1TJz07k26kqoQybRfwVFV4rjDS/K8EXUyuF1cXnT3weKS9Rvdm/xe7h8oA1hLwOR18R+Y4n4zwpr4z5SU089Vc+cpfWL+mn5APmT3Z39jeOs/GbWjK+DnmsuL/u6ehMX4j4yedSVkAUUuPh3TY022MtKZUEOtPqCb8Bkvnr5XT6imU0gGrEJW7aAL/gw0OhegVV2F6pC7uTOppirKIA4MFQhTrpCM+AbZlDu64L/QmAkQWlMhQXU75D07O9Gtl0PUYjTBLyAzOLNQYtypIEEjvsXtBLQTooV2nrQrGEau2gKmZlR4L8gwnGtBJbUn1diCOOQUnEkTkRAOeci9KHOQxvFro+tx3ZcGAaeljstCSBNDJuArgIyBYyy6OdZxAhHIELu1IC9AtgShCVtLltEKrSff1XoHJo3RC33hM63o3j6pSNkmqmIWEAtxFHB2OwoRBAfyeqE3r2ogHeF42dBhs7gvf7CukH5MmlUGOCpHihxFfs6TehDyKCqVAA==') format('woff2'),
+	  url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.woff?t=1590375117208') format('woff'),
+	  url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.ttf?t=1590375117208') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+	  url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.svg?t=1590375117208#selectIcon') format('svg'); /* iOS 4.1- */
+	}
+	
+	.selectIcon {
+	  position: absolute;
+	  right: 16rpx;
+	  font-family: "selectIcon" !important;
+	  font-size: 16px;
+	  font-style: normal;
+	  -webkit-font-smoothing: antialiased;
+	  -moz-osx-font-smoothing: grayscale;
+	}
+	
+	.icongou:before {
+	  content: "\e61c";
+	}
+	
+	.iconcross:before {
+	  content: "\e61a";
+	}
+
+</style>
+<style lang="scss" scoped>
+	.main{
+		font-size: 28rpx;
+	}
+	.bg-white{
+		background-color: #FFFFFF;
+	}
+	.text-blue{
+		color: #0081ff;
+	}
+	.text-green{
+		color: #39b54a;
+	}
+	.input {
+		display: flex;
+		align-items:center;
+		font-size: 28rpx;
+		height: 60rpx;
+		padding: 10rpx 20rpx;
+		border-radius: 10rpx;
+    // border: 1rpx solid rgba(0, 0, 0, 0.1);
+		.content{
+			display: flex;
+			align-items:center;
+			height:100%;
+			width: 100%;
+		}
+	}
+	.select-modal {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 9999;
+		opacity: 0;
+		outline: 0;
+		text-align: center;
+		-ms-transform: scale(1.185);
+		transform: scale(1.185);
+		backface-visibility: hidden;
+		perspective: 2000rpx;
+		background: rgba(0, 0, 0, 0.6);
+		transition: all 0.3s ease-in-out 0s;
+		pointer-events: none;
+		margin-bottom: -1000rpx;
+		&::before {
+			content: "\200B";
+			display: inline-block;
+			height: 100%;
+			vertical-align: bottom;
+		}
+		.select-dialog {
+			position: relative;
+			display: inline-block;
+			margin-left: auto;
+			margin-right: auto;
+			background-color: #f8f8f8;
+			overflow: hidden;
+			width: 100%;
+			border-radius: 0;
+			.select-content{
+				// background-color: #F1F1F1;
+				max-height: 420rpx;
+				overflow:auto;
+				.select-item{
+					position: relative;
+					padding: 20rpx;
+					display: flex;
+					.title{
+						flex: 1;
+					}
+				}
+			}
+		}
+	}
+	.select-modal.show {
+		opacity: 1;
+		transition-duration: 0.3s;
+		-ms-transform: scale(1);
+		transform: scale(1);
+		overflow-x: hidden;
+		overflow-y: auto;
+		pointer-events: auto;
+		margin-bottom: calc(env(safe-area-inset-bottom) + 2px);
+	}
+	.select-bar {
+		padding: 0 20rpx;
+		display: flex;
+		position: relative;
+		align-items: center;
+		min-height: 80rpx;
+		justify-content: space-between;
+		.action {
+			display: flex;
+			align-items: center;
+			height: 100%;
+			justify-content: center;
+			max-width: 100%;
+		}
+	}
+</style>