qimall/addons/SmartForm/backend/views/components/diy/smart-form/style.php

<template id="smart-form-style">
	<div >
		<diy-style-contain :title=" activeItem.funcListItem.formData  ?activeItem.funcListItem.formData.title : '新增名称'" class="fill-border-top">
			<com-pick-link class="node-add-btn" @selected="selectNavUrl" :pick-type="pickType"  :default-tabs="[{name: 'addons',children:['smart_form'] }]">
			    <div class="add-goods-btn">{{activeItem.funcListItem.columns ? '切换' : '新增'}}</div>
			</com-pick-link>

		</diy-style-contain>
		<diy-style-contain title="按钮设置" class="fill-border-top" >
			<div class="order-broadcaset-row" flex="cross:center">
				<div class="leabl">背景色</div>
				<div flex="cross:center">
					<el-color-picker class="color-box" flex="cross:center" @change="styleChange($event, 'brodcastBgColor')" v-model="brodcastBgColor"></el-color-picker>
					<el-input v-model="brodcastBgColor" maxlength="8" @focus="iptSelect($event)" class="diy-text-btn"></el-input>
				</div>
			</div>
			<div flex="cross:center">
			    <div style="width:80px;text-align:center">文字</div>
			    <el-input placeholder="标题栏" v-model="value" :maxlength="8" show-word-limit @input="titleChange">
			    </el-input>
			</div>
			<div class="pick-goods"  style="padding: 10px;background: #fff;">
			    <div class="icon-set-items" flex="cross:center">
			        <div class="icon-set-list-name diy-text-font">链接</div>
			        <div class="icon-set-list-content" flex="cross:center">
			            <com-pick-link @selected="selectedUrl($event)" :default-tabs="['other']">
			                <diy-url :text="selectUrl"></diy-url>
			            </com-pick-link>
			        </div>
			    </div>
			    <!-- <diy-operation-list v-if="selectUrl" v-model="showLineList" @on-change="onChange5"> </diy-operation-list> -->
			</div>
			<diy-color top-name="选择颜色"
			    :color-infos="colorInfos" 
			    :str-color="defColor" 
			    @chang="updateColor"
			></diy-color>
			<diy-size-setting top-name="边距"
			    :size-infos="sizeInfos" 
			    :max-value="50" 
			    @chang="sliderChange($event, 'margin')"
			></diy-size-setting>
			<diy-size-setting top-name="圆角设置" 
			    :size-infos="radiusInfos" 
			    :max-value="20" 
			    @chang="RadiusChange($event, 'radius')"
			></diy-size-setting>
		</diy-style-contain>
	</div>
</template>
<script>
	Vue.component('smart-form-style',{
		template: '#smart-form-style',
		name: "smart-form-style",
		mixins: [basicMixins],
		data(){
			return{
				brodcastBgColor: '#F10009', // 背景色
				selectUrl: "",
				value: "",
				colorInfos: ['底部背景' ,'组件背景', '文字颜色'],
				defColor: ['#fff', '#fff', '#000'],
				sizeInfos: ['上边距', '下边距','左右边距'],
				pickType: ['smart_form'],
				radiusInfos:['上圆角','下园角'],
				formList:[],
				item:{}
			}
		},
		// created(){
		// 	this.reslut = {
		// 		...this.activeItem
		// 	}
		// },
		// watch:{
		// 	activeItem(newVal,oldVal){
		// 		this.reslut = {
		// 			...newVal
		// 		}
		// 	}
		// },
		props: {
		    activeItem: {
		        type: Object,
		        default () {
		            return {}
		        }
		    }
		},
		methods:{
			init() {
			    basicMixins.methods.init.call(this); // 以前的数据调用一下
				if(this.result.data.btnLink){
					this.selectUrl = this.result.data.btnLink[0].open_type
				}
				if(this.result.data.padArr){
					this.sizeInfos = this.result.data.padArr 
				}
				if(this.result.data.colorInfos){
					 this.colorInfos = this.result.data.colorInfos
				}
				if(this.result.data.radiusArr){
					 this.radiusInfos = this.result.data.radiusArr
				}
				if(this.result.data.btnTitle){
					 this.value = this.result.data.btnTitle 
				}
				if(this.result.computedStyle.btnBg){
					this.brodcastBgColor = this.result.computedStyle.btnBg
				}
			    // this.updataInfos()
			},
			styleChange(e, type) {
				if(!this.result.computedStyle.btnBg) this.$set(this.result.funcListItem,'btnBg','');
			    this.result.computedStyle.btnBg = e
			    this.$emit("update", this.result)
			},
			selectNavUrl(e){
				console.log(e,'[[[[[[[[[]]]]]]]]]',typeof e)
				// return
				let that = this
				if(e.length){
					if(!that.result.funcListItem.formData) that.$set(that.result.funcListItem,'formData',{});
					that.result.funcListItem.formData = e[0]
					if(!that.result.funcListItem.columns) that.$set(that.result.funcListItem,'columns',[]);
					if(!that.result.funcListItem.template_id) that.$set(that.result.funcListItem,'template_id','');
					that.result.funcListItem.template_id = e[0].id
					that.result.funcListItem.columns = []
					e[0].columns.forEach(item=>{
						if(item.smart_form_components_code == "single-link-text"){
							that.result.funcListItem.columns.push({
								type:'single-link-text',
								id:item.id,
								title:item.title,
								placeholder:item.placeholder,
								required:item.required,
								tips:item.tips,
								components_id:item.smart_form_components_id,
								is_export:item.is_export,
								content_type:item.content_type,
								value:''
							})
						}
						else if(item.smart_form_components_code == "multi-text"){
							that.result.funcListItem.columns.push({
								type:'multi-text',
								title:item.title,
								id:item.id,
								placeholder:item.placeholder,
								required:item.required,
								tips:item.tips,
								components_id:item.smart_form_components_id,
								value:''
							})
						}
						else if(item.smart_form_components_code == "id-card"){
							that.result.funcListItem.columns.push({
								type:'id-card',
								id:item.id,
								title:item.title,
								required:item.required,
								tips:item.tips,
								components_id:item.smart_form_components_id,
								value:''
							})
						}
						else if(item.smart_form_components_code == "drow-box"){
							let option = []
							item.option.forEach(o=>{
								option.push({
									title:o
								})
							})
							that.result.funcListItem.columns.push({
							type:'drow-box',
							title:item.title,
							id:item.id,
							required:item.required,
							chooseList:option,
							components_id:item.smart_form_components_id,
							value:''
							})
						}
						else if(item.smart_form_components_code == "checked-tool"){
							let option = []
							item.option.forEach(o=>{
								option.push({
									title:o
								})
							})
							that.result.funcListItem.columns.push({
							type:'checked-tool',
							title:item.title,
							id:item.id,
							required:item.required,
							chooseList:option,
							components_id:item.smart_form_components_id,
							value:''
							})
						}
						else if(item.smart_form_components_code == "radio-tool"){
							let option = []
							item.option.forEach(o=>{
								option.push({
									title:o
								})
							})
							that.result.funcListItem.columns.push({
							type:'radio-tool',
							title:item.title,
							id:item.id,
							required:item.required,
							chooseList:option,
							components_id:item.smart_form_components_id,
							value:''
							})
						}
						else if(item.smart_form_components_code == "upload-photo"){
							that.result.funcListItem.columns.push({
							type:'upload-photo',
							title:item.title,
							id:item.id,
							required:item.required,
							total:item.limit,
							value:''
							})
						}
						else if(item.smart_form_components_code == "date-tool"){
							that.result.funcListItem.columns.push({
							type:'date-tool',
							title:item.title,
							id:item.id,
							required:item.required,
							// date:item.show_default,
							date:item.show_default ? (item.show_now_start ?  new Date().getFullYear() + '-' + ((new Date().getMonth()+1) < 10 ? ('0'+(new Date().getMonth()+1)) : (new Date().getMonth()+1) )+'-'+new Date().getDate() : item.default) : '',
							show_now_day:item.show_now_start,
							is_show:item.show_default,
							tips:item.tips,
							components_id:item.smart_form_components_id,
							// value:''
							value:item.show_default ? (item.show_now_start ?  new Date().getFullYear() + '-' + ((new Date().getMonth()+1) < 10 ? ('0'+(new Date().getMonth()+1)) : (new Date().getMonth()+1) )+'-'+new Date().getDate() : item.default) : ''
							})
						}
						else if(item.smart_form_components_code == "date-range"){
							that.result.funcListItem.columns.push({
							type:'date-range',
								title:item.title,
								startTitle: typeof item.tips == 'object'  && item.tips.length  ?  item.tips[0] : '',
								endTitle:typeof item.tips == 'object'  && item.tips.length && item.tips.length == 2 ?  item.tips[1] : '',
								id:item.id,
								required:item.required,
								is_start_show:typeof item.show_default == 'object'  && item.show_default.length  ?  item.show_default[0] : '' ,
								is_end_show:typeof item.show_default == 'object'  && item.show_default.length && item.show_default.length == 2 ?  item.show_default[1] : '',
								show_now_start: typeof item.show_now_start == 'object'  && item.show_now_start.length  ?  item.show_now_start[0] : '' ,
								show_now_end:typeof item.show_now_start == 'object'  && item.show_now_start.length && item.show_now_start.length == 2 ?  item.show_now_start[1] : '',
								start_date: typeof item.default == 'object'  && item.default.length  ?  item.default[0] : '',
								end_date:typeof item.default == 'object'  && item.default.length && item.default.length == 2 ?  item.default[1] : '',
								components_id:item.smart_form_components_id,
								value:''
							})
						}
						else if(item.smart_form_components_code == "time-tool"){
							that.result.funcListItem.columns.push({
							type:'time-tool',
								title:item.title,
								required:item.required,
								time:item.show_default ? (item.show_now_start ?(new Date().getHours() < 10 ? '0'+new Date().getHours() : new Date().getHours() ) +':'+(new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes() ): item.default ) : '',
								// time:item.show_default,
								id:item.id,
								show_now_time:item.show_now_start,
								is_show:item.show_default,
								tips:item.tips,
								components_id:item.smart_form_components_id,
								value:item.show_default ? (item.show_now_start ? (new Date().getHours() < 10 ? '0'+new Date().getHours() : new Date().getHours() ) +':'+(new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes() ) : item.default ) : ''
								// value:''
							})
						}
						else if(item.smart_form_components_code =="time-range"){
							that.result.funcListItem.columns.push({
							type:'time-range',
								title:item.title,
								startTitle: typeof item.tips == 'object'  && item.tips.length  ?  item.tips[0] : '',
								endTitle:typeof item.tips == 'object'  && item.tips.length && item.tips.length == 2 ?  item.tips[1] : '',
								required:item.required,
								id:item.id,
								is_start_show:typeof item.show_default == 'object'  && item.show_default.length  ?  item.show_default[0] : '' ,
								is_end_show:typeof item.show_default == 'object'  && item.show_default.length && item.show_default.length == 2 ?  item.show_default[1] : '',
								show_now_start: typeof item.show_now_start == 'object'  && item.show_now_start.length  ?  item.show_now_start[0] : '' ,
								show_now_end:typeof item.show_now_start == 'object'  && item.show_now_start.length && item.show_now_start.length == 2 ?  item.show_now_start[1] : '',
								start_time:typeof item.default == 'object'  && item.default.length  ?  item.default[0] : '',
								end_time:typeof item.default == 'object'  && item.default.length && item.default.length == 2 ?  item.default[1] : '',
								components_id:item.smart_form_components_id,
								value:''
							})
						}
						else if(item.smart_form_components_code =="city-chose"){
							that.result.funcListItem.columns.push({
							type:'city-chose',
							title:item.title,
							required:item.required,
							id:item.id,
							city_type:item.default,
							components_id:item.smart_form_components_id,
							value:''
							})
						}
					})
					this.$emit("update", this.result)
				}
				

			},
			titleChange() {
				if(!this.result.data.btnTitle) this.$set(this.result.data,'btnTitle','');
			    this.result.data.btnTitle = this.value
			    this.$emit("update", this.result)
			},
			selectedUrl(value) {
				
				if(value.length){
					if(!this.result.data.btnLink) this.$set(this.result.data,'btnLink','');
					this.result.data.btnLink = value
					this.$emit("update", this.result)
					// var item = getObjValue(value[0], ["params"], {})
					this.selectUrl = value[0].open_type
				}
			    // this.showLineList[0].value = 10
			    // this.updateData(Object.assign({
			    //     count: 10
			    // }, item), 'commCate')
			},
			sliderChange(arr, type) { // 上下边距
				if(!this.result.computedStyle.padTop) this.$set(this.result.computedStyle,'padTop',0);
				if(!this.result.computedStyle.padBot) this.$set(this.result.computedStyle,'padBot',0);
				if(!this.result.computedStyle.padLr) this.$set(this.result.computedStyle,'padLr',0);
				if(!this.result.data.padArr) this.$set(this.result.data,'padArr',[]);
				this.result.data.padArr = arr
				this.result.computedStyle.padTop = arr[0].value
				this.result.computedStyle.padBot = arr[1].value
				this.result.computedStyle.padLr = arr[2].value
				this.$emit("update", this.result)
			},
			updateColor(e) { // 选择颜色
			    this.colorInfos = e;
			    // if(this.result.data.colorInfos){
			    //     this.colorInfos = this.result.data.colorInfos;
			    // } else {
			    //     this.result.data.colorInfos = this.colorInfos;
			    // }
				if(!this.result.data.colorInfos) this.$set(this.result.data,'colorInfos',[]);
				this.result.data.colorInfos = this.colorInfos
				if(!this.result.computedStyle.bodyBg) this.$set(this.result.computedStyle,'bodyBg','');
				if(!this.result.computedStyle.tempBg) this.$set(this.result.computedStyle,'tempBg','');
				if(!this.result.computedStyle.textColor) this.$set(this.result.computedStyle,'textColor','');
			    this.result.computedStyle.bodyBg = this.colorInfos[0].color
			    this.result.computedStyle.tempBg = this.colorInfos[1].color
			    this.result.computedStyle.textColor = this.colorInfos[2].color
			    this.$emit("update", this.result)
			},
			RadiusChange(arr,type){
				if(!this.result.computedStyle.radiusTop) this.$set(this.result.computedStyle,'radiusTop',0);
				if(!this.result.computedStyle.radiusBot) this.$set(this.result.computedStyle,'radiusBot',0);
				if(!this.result.data.radiusArr) this.$set(this.result.data,'radiusArr',[]);
				this.result.computedStyle.radiusTop = arr[0].value
				this.result.computedStyle.radiusBot = arr[1].value
				this.result.data.radiusArr = arr
				this.$emit("update", this.result)
			}
		}
	})
</script>
<style>
	.form_style_upload_fm{
		width: 100%;
		height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed rgba(215, 215, 215, 1);
		border-radius: 8px;
		cursor: pointer;
		font-size: 14px;
		color: #a6a6a6;
	}
</style>