qimall/addons/SmartForm/backend/views/components/formDiy/form-diy-tool.php

<?php

	use common\helpers\ComponentHelper;
	use common\helpers\AddonHelper;
	ComponentHelper::loadComponentView('single-link-text-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/single-link-text');
	ComponentHelper::loadComponentView('multi-text-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/multi-text');
	ComponentHelper::loadComponentView('id-card-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/id-card');
	ComponentHelper::loadComponentView('drow-box-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/drow-box');
	ComponentHelper::loadComponentView('checked-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/checked-tool');
	ComponentHelper::loadComponentView('radio-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/radio-tool');
	ComponentHelper::loadComponentView('upload-photo-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/upload-photo');
	ComponentHelper::loadComponentView('date-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/date-tool');
	ComponentHelper::loadComponentView('date-range-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/date-range');
	ComponentHelper::loadComponentView('time-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/time-tool');
	ComponentHelper::loadComponentView('time-range-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/time-range');
	ComponentHelper::loadComponentView('city-chose-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/city-chose');
?>
<template id="form-diy-tool">
	<div class="diy_tool_phone_box">
		<draggable  :list="list" group="componentsGroup" :animation="300" @end="grangEnd">
			<div class="drag_tool_box" v-for="(r,ri) in list" :key="ri" :class="[ri == toolIndex ? 'drag_tool_box_border': '',ri == moveIndex ? 'diy_chose_box_border' : '']" @click="changeIndex(ri)" @mouseenter="onEnterTd(ri)" @mouseleave="onLeaveTd(ri)">
				<components :is="getName(r)" :active-item="r" style-type="renovation"></components>
				<div class="drag_item_tool" v-if="ri == toolIndex">
					<i class="el-icon-copy-document i_icon_form" @click="copyTool(r,ri)"></i>
					<el-popover
					  width="160"
					  v-model="isDel">
					  <p >确定要删除吗</p>
					  <div style="text-align: right; margin: 0">
					    <el-button size="mini" type="text" @click="isDel = false">取消</el-button>
					    <el-button type="primary" size="mini" @click="delTool(ri)">确定</el-button>
					  </div>
					  <i class="el-icon-delete i_icon_form"  slot="reference"></i>
					</el-popover>
					
				</div>
			</div>
		</draggable>
	</div>
</template>
<script src="/resources/js/Sortable.min.js"></script>
<!-- 更改了v-if => v-show -->
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
	Vue.component('form-diy-tool',{
		template:'#form-diy-tool',
		props:{
			toolList:{
				type:Array,
				default:[]
			},
			toolIndex:{
				type:Number,
				default: -1
			}
		},
		data(){
			return{
				components: [],
				list:[],
				isDel:true,
				moveIndex:-1
			}
		},
		watch:{
			toolList(newVal,oldVal){
				this.list = newVal
			},
			toolIndex(newVal,oldVal){
				if(newVal == this.moveIndex){
					this.moveIndex = -1
				}
			}
		},
		methods:{
			onEnterTd(index){
				if(this.toolIndex != index){
					this.moveIndex = index
				}
			},
			onLeaveTd(index){
				this.moveIndex = -1
			},
			grangEnd(e){
				this.$emit('change',{
				type:'change-index',
				index: e.newIndex,
				list:this.list
				})
			},
			copyTool(item,index){
				this.$emit('change',{
					type:'copy',
					item,
					index
				})
			},
			changeIndex(index){
				this.$emit('change',{
					type:'change-index',
					index,
				})
			},
			delTool(index){
				this.isDel = false
				this.$emit('change',{
					type:'delete',
					index,
				})
			},
			getName(target) {
			    try {
			        return target.type + "-preview"
			    } catch (e) {
			        console.log(e);
			        return ""
			    }
			},
		}
	})
</script>
<style scoped>
	.diy_chose_box_border{
		
		border: 1px dashed #F10009;
	}
	.diy_tool_phone_box{
		width: 100%;
		background: #ffffff;
		padding: 20px 20px;
		box-sizing: border-box;
	}
	.drag_tool_box{
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
		box-sizing: border-box;
		
	}
	.drag_tool_box_border{
		background: #f7f7f7;
	}

	.drag_item_tool{
		width: 47px;
		padding: 5px 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: nowrap;
		background: red;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	.i_icon_form{
		font-size: 14px;
		color: #fff;
		cursor: pointer;
	}
</style>