exhibition_service_admin/src/views/preRegManage/edit.vue

<script lang="ts">
import Vue from 'vue'
import guide from '@/views/guide/index'
import draggable from 'vuedraggable'
import countryCode from '@/lib/countryCode.json'
import {
  pcTextArr,
  pcaTextArr
} from "element-china-area-data"

export default Vue.extend({
  name: 'Edit',
  components: {
    draggable,
    guide
  },
  data() {
    return {
      compList: [
        {
          type: 'tips',
          label: '将我拖拽至右边试试吧',
          width: 6,
          required: false
        },
        {
          type: 'input',
          label: '请在下方输入内容',
          value: '',
          width: 6,
          placeholder: '请输入',
          pattern: '^[\\s\\S]*$',
          required: false
        },
        {
          type: 'phone',
          label: '请在下方输入手机号码',
          value: '',
          country: 'CN',
          width: 6,
          placeholder: '请输入手机号',
          required: false
        },
        {
          type: 'email',
          label: '请在下方输入邮箱',
          value: '',
          width: 6,
          placeholder: '请输入邮箱',
          codePlaceholder: '请输入验证码',
          required: false
        },
        {
          type: 'select',
          label: '请在下方选择内容',
          value: '',
          width: 6,
          options: [
            { label: '东坡肉', value: '东坡肉' },
            { label: '酱肘子', value: '酱肘子' },
            { label: '白切鸡', value: '白切鸡' }
          ],
          placeholder: '请选择',
          required: false
        },
        {
          type: 'checkbox',
          label: '请选择一至多项内容',
          value: '',
          width: 6,
          options: [
            { label: '东坡肉', value: '东坡肉' },
            { label: '酱肘子', value: '酱肘子' },
            { label: '白切鸡', value: '白切鸡' }
          ],
          required: false
        },
        {
          type: 'radio',
          label: '请选择一项内容',
          value: '',
          width: 6,
          options: [
            { label: '东坡肉', value: '东坡肉' },
            { label: '酱肘子', value: '酱肘子' },
            { label: '白切鸡', value: '白切鸡' }
          ],
          required: false
        },
        {
          type: 'number',
          label: '请在下方输入数字',
          max: 10,
          min: 0,
          step: 1,
          value: 0,
          width: 6,
          required: false
        },
        {
          type: 'slider',
          label: '请在下方滑动',
          max: 10,
          min: 0,
          step: 1,
          value: 0,
          width: 6,
          required: false
        },
        {
          type: 'textarea',
          label: '请在下方输入内容',
          value: '',
          maxRows: 4,
          minRows: 2,
          width: 6,
          placeholder: '请输入',
          required: false,
          pattern: '^[\\s\\S]*$'
        },
        {
          type: 'region',
          label: '请在下方选择位置',
          range: 2,
          width: 6,
          value: [],
          placeholder: '请选择所在区域',
          required: false
        },
        {
          type: 'time',
          label: '请在下方选择时间',
          value: '',
          width: 6,
          placeholder: '请选择时间',
          required: false
        },
        {
          type: 'timeRange',
          label: '请在下方选择时间范围',
          value: '',
          width: 6,
          rangeSeparator: '至',
          placeholder: '开始时间',
          endPlaceholder: '结束时间',
          required: false
        },
        {
          type: 'date',
          label: '请在下方选择日期',
          value: '',
          width: 6,
          placeholder: '请选择日期',
          required: false
        },
        {
          type: 'dateRange',
          label: '请在下方选择日期范围',
          value: '',
          width: 6,
          rangeSeparator: '至',
          placeholder: '开始日期',
          endPlaceholder: '结束日期',
          required: false
        }
      ],
      formData: [],
      trashData: [],
      formInfo: {
        name: '未命名表单',
        desc: '从右侧拖动组件到表单区域'
      },
      isDrag: false,
      currentKey: '',
      currentData: {},
      hoverKey: '',
      selectInput: '',
      pcTextArr,
      pcaTextArr,
      countryCode
    }
  },
  methods: {
    choseComp(element) {
      this.currentKey = element.key
      this.currentData = element
    },
    removeComp(element) {
      this.$confirm('确定删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            let index = this.getIndexByKey(element.key)
            this.formData.splice(index, 1)
            this.currentKey = ''
          }
        }
      })
    },
    addSelectItem() {
      if (this.selectInput.length === 0) { return }
      this.currentData.options.push({
        label: this.selectInput,
        value: this.selectInput
      })
      this.selectInput = ''
    },
    removeSelectItem(index) {
      this.currentData.options.splice(index, 1)
    },
    cloneItem(item) {
      const newItem = JSON.parse(JSON.stringify(item))
      newItem.key = newItem.type + new Date().getTime()
      return newItem
    },
    removeTrash(element){
      let index = this.getIndexByKey(element.key)
      this.trashData.splice(index,1)
    },
    hover(element) {
      if (this.isDrag) return
      this.hoverKey = element.key
    },
    blur(element) {
      this.hoverKey = ''
    },
    getIndexByKey(key) {
      return this.formData.indexOf(this.formData.find(item => item.key === key))
    },
    handleStart() {
      this.isDrag = true
      this.formData.forEach(item => {
        item.hover = false
      })
    },
    handleEnd() {
      this.isDrag = false
    }
  }
})
</script>

<template>
  <div class="main-box">
    <div class="comp-lib">
      <div class="title">
        组件库
      </div>
      <div class="list">
        <draggable v-model="compList" :options="{sort:false}" :group="{name:'form',put:false,pull:'clone'}" :clone="cloneItem" class="drag-list">
          <transition-group class="drag-cont">
            <div v-for="(element) in compList" :key="element.type">
              <div v-if="element.type==='tips'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
              </div>
              <div v-if="element.type==='input'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-input :value="element.value" :placeholder="element.placeholder" />
              </div>
              <div v-if="element.type==='email'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <div>
                  <el-input v-model="element.value" :placeholder="element.placeholder" />
                </div>
                <div class="code-input">
                  <el-input v-model="element.value" :placeholder="element.codePlaceholder" />
                  <el-button>获取验证码</el-button>
                </div>
              </div>
              <div v-if="element.type==='phone'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <div class="phone-input">
                  <el-select v-model="element.country" :placeholder="element.placeholder">
                    <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.country_code" />
                  </el-select>
                  <el-input v-model="element.value" :placeholder="element.placeholder" />
                </div>
              </div>
              <div v-if="element.type==='select'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-select :value="element.value" :placeholder="element.placeholder">
                  <el-option v-for="item in element.options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div v-if="element.type==='checkbox'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-checkbox-group :value="element.value">
                  <el-checkbox v-for="item in element.options" :key="item.value" :label="item.label" />
                </el-checkbox-group>
              </div>
              <div v-if="element.type==='radio'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-radio-group :value="element.value">
                  <el-radio v-for="item in element.options" :key="item.value" :label="item.label" />
                </el-radio-group>
              </div>
              <div v-if="element.type==='number'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-input-number :value="element.value" :max="element.max" :min="element.min" :step="element.step" prefix-icon="el-icon-user" :placeholder="element.placeholder" />
              </div>
              <div v-if="element.type==='slider'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-slider :value="element.value" :max="element.max" :min="element.min" :step="element.step" prefix-icon="el-icon-user" :placeholder="element.placeholder" />
              </div>
              <div v-if="element.type==='textarea'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-input :value="element.value" type="textarea" :placeholder="element.placeholder" :autosize="{ minRows: element.minRows, maxRows: element.maxRows}" />
              </div>
              <div v-if="element.type==='region'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-cascader
                  :placeholder="element.placeholder"
                  size="large"
                  :options="element.range===2?pcTextArr:pcaTextArr"
                  value="element.value">
                </el-cascader>
              </div>
              <div v-if="element.type==='time'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-time-picker :value="element.value" :placeholder="element.placeholder" />
              </div>
              <div v-if="element.type==='timeRange'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-time-picker is-range :value="element.value" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
              </div>
              <div v-if="element.type==='date'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-date-picker :value="element.value" :placeholder="element.placeholder" />
              </div>
              <div v-if="element.type==='dateRange'" :class="[element.type,'form-item']">
                <div class="tips">{{ element.label }}</div>
                <el-date-picker :value="element.value" type="daterange" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
    <div class="form-view">
      <div class="scroll-view">
        <div class="form-cont">
          <div :class="['form-head',getIndexByKey(currentKey) === -1?'active':'']" @click="currentKey=''">
            <div class="title">{{ formInfo.name }}</div>
            <div class="tips">{{ formInfo.desc }}</div>
          </div>
          <draggable v-model="formData" :group="{name:'form'}" :options="{sort:true,animation:300}" class="form-body" @start="handleStart" @end="handleEnd">
            <transition-group class="drag-cont">
              <div v-for="element in formData" :key="element.key" :style="{gridColumn:'span '+element.width}" :class="[element.required?'required':'']" @click="choseComp(element)" @mouseenter="hover(element)" @mouseleave="blur(element)">
                <div v-if="element.type==='tips'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                </div>
                <div v-if="element.type==='input'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-input :value="element.value" :placeholder="element.placeholder" />
                </div>
                <div v-if="element.type==='email'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <div>
                    <el-input v-model="element.value" :placeholder="element.placeholder" />
                  </div>
                  <div class="code-input">
                    <el-input v-model="element.value" :placeholder="element.codePlaceholder" />
                    <el-button>获取验证码</el-button>
                  </div>
                </div>
                <div v-if="element.type==='phone'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <div class="phone-input">
                    <el-select v-model="element.country" :placeholder="element.placeholder">
                      <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.country_code" />
                    </el-select>
                    <el-input v-model="element.value" :placeholder="element.placeholder" />
                  </div>
                </div>
                <div v-if="element.type==='select'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-select :value="element.value" :placeholder="element.placeholder">
                    <el-option v-for="item in element.options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div v-if="element.type==='checkbox'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-checkbox-group :value="element.value">
                    <el-checkbox v-for="item in element.options" :key="item.value" :label="item.label" />
                  </el-checkbox-group>
                </div>
                <div v-if="element.type==='radio'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-radio-group :value="element.value">
                    <el-radio v-for="item in element.options" :key="item.value" :label="item.label" />
                  </el-radio-group>
                </div>
                <div v-if="element.type==='number'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-input-number :value="element.value" :max="element.max" :min="element.min" :step="element.step" prefix-icon="el-icon-user" :placeholder="element.placeholder" />
                </div>
                <div v-if="element.type==='slider'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-slider :value="element.value" :max="element.max" :min="element.min" :step="element.step" prefix-icon="el-icon-user" :placeholder="element.placeholder" />
                </div>
                <div v-if="element.type==='textarea'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-input :value="element.value" type="textarea" :placeholder="element.placeholder" :autosize="{ minRows: element.minRows, maxRows: element.maxRows}" />
                </div>
                <div v-if="element.type==='region'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-cascader
                    :placeholder="element.placeholder"
                    size="large"
                    :options="element.range===2?pcTextArr:pcaTextArr"
                    value="element.value">
                  </el-cascader>
                </div>
                <div v-if="element.type==='time'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-time-picker :value="element.value" :placeholder="element.placeholder" />
                </div>
                <div v-if="element.type==='timeRange'" :class="[element.type,'view','form-item',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-time-picker is-range :value="element.value" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
                </div>
                <div v-if="element.type==='date'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-date-picker :value="element.value" :placeholder="element.placeholder" />
                </div>
                <div v-if="element.type==='dateRange'" :class="[element.type,'form-item','view',{'active':element.key===hoverKey||element.key===currentKey}]">
                  <div class="tips">{{ element.label }}</div>
                  <el-date-picker :value="element.value" type="daterange" :start-placeholder="element.placeholder" :end-placeholder="element.endPlaceholder" :range-separator="element.rangeSeparator" />
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
      </div>
    </div>
    <div class="comp-edit">
      <template v-if="getIndexByKey(currentKey) === -1">
        <div class="button">
          <el-button type="primary">保存表单</el-button>
        </div>
        <div class="title">表单设定</div>
        <div class="body">
          <div class="tips">表单名称</div>
          <el-input v-model="formInfo.name" placeholder="请输入表单名称" />
          <div class="tips">表单介绍</div>
          <el-input type="textarea" v-model="formInfo.desc" placeholder="请输入表单介绍" />
        </div>
      </template>
      <template v-else>
        <div></div>
        <div class="title">
          <span class="el-icon-arrow-left icon" @click="currentKey=''" />
          组件设定
        </div>
        <div class="body">

          <div class="tips">
            表单项介绍
            <guide
              video="/static/guide/表单项介绍.jpg"
              title="表单项介绍"
              text="展示在输入框上方的大段文本，用于介绍和提示该处应输入的内容。"
            ></guide>
          </div>
          <el-input v-model="currentData.label" type="textarea" placeholder="请输入表单项介绍"></el-input>

          <template>
            <div class="tips">是否必填</div>
            <el-switch v-model="currentData.required" />
          </template>

          <template v-if="['input','select','textarea','time','date','region','email','phone'].includes(currentData.type)">
            <div class="tips">
              提示文字
              <guide
                video="/static/guide/提示文字.jpg"
                title="提示文字"
                text="用户输入内容前，展示在输入框中的简短文本，用于提示该处应输入的内容。"
              ></guide>
            </div>
            <el-input v-model="currentData.placeholder" placeholder="请输入提示文字"></el-input>
          </template>

          <template v-if="['input','textarea'].includes(currentData.type)">
            <div class="tips">验证规则</div>
            <el-input v-model="currentData.pattern" :rows="3" type="textarea" placeholder="规则正则表达式"></el-input>
            <el-select class="pattern-select" @change="currentData.pattern=$event" placeholder="选择预设规则">
              <el-option label="不做判断" value="^[\s\S]*$"></el-option>
              <el-option label="国内手机号" value="^1\d{10}$"></el-option>
              <el-option label="国内身份证号码" value="^[1-9]\d{5}(19\d{2}|20\d{2})((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))\d{3}(\d|X|x)$"></el-option>
              <el-option label="电子邮箱" value="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$"></el-option>
            </el-select>
          </template>

          <template v-if="currentData.type==='region'">
            <div class="tips">
              地区范围
            </div>
            <el-radio-group size="small" v-model="currentData.range">
              <el-radio-button :label="2">省/市</el-radio-button>
              <el-radio-button :label="3">省/市/县</el-radio-button>
            </el-radio-group>
          </template>

          <template v-if="['timeRange','dateRange'].includes(currentData.type)">
            <div class="tips">
              起始提示文字
              <guide
                video="/static/guide/起始提示文字.jpg"
                title="起始提示文字"
                text="时间与日期类型组件输入内容前，显示在开始时间输入框中，用于提示的文字内容"
              ></guide>
            </div>
            <el-input v-model="currentData.placeholder" placeholder="请输入起始提示文字"></el-input>
            <div class="tips">
              结束提示文字
              <guide
                video="/static/guide/结束提示文字.jpg"
                title="结束提示文字"
                text="时间与日期类型组件输入内容前，显示在结束时间输入框中，用于提示的文字内容"
              ></guide>
            </div>
            <el-input v-model="currentData.endPlaceholder" placeholder="请输入结束提示文字"></el-input>
            <div class="tips">
              范围分隔符
              <guide
                video="/static/guide/范围分隔符.jpg"
                title="范围分隔符"
                text="时间与日期类型组件中，开始与结束提示文字中间的分隔文字。"
              ></guide>
            </div>
            <el-input v-model="currentData.rangeSeparator" placeholder="请输入范围分隔符"></el-input>
          </template>

          <template v-if="['select','radio','checkbox'].includes(currentData.type)">
            <div class="tips">
              选项设定
              <guide
                video="/static/guide/选项设定.mp4"
                title="选项设定"
                text="在单选、多选、选择器组件中，编辑可供用户选择的选择项目。"
              ></guide>
            </div>
            <div class="select-list">
              <div class="item">
                <draggable :options="{sort:true,animation:300}" v-model="currentData.options">
                  <transition-group class="select-inner">
                    <el-input v-for="(item,index) in currentData.options" :key="item.value" :value="item.label" disabled>
                      <div slot="prefix" class="handel">⠿</div>
                      <el-button type="danger" @click="removeSelectItem(index)" slot="append" icon="el-icon-delete"></el-button>
                    </el-input>
                  </transition-group>
                </draggable>
                <el-input v-model="selectInput" @keyup.enter.native="addSelectItem" placeholder="请输入选项">
                  <el-button @click="addSelectItem" slot="append" icon="el-icon-plus"></el-button>
                </el-input>
              </div>
            </div>
          </template>

          <template v-if="['number','slider'].includes(currentData.type)">
            <div class="tips">
              最小值
              <guide
                video="/static/guide/最小值.jpg"
                title="最小值"
                text="数字输入类型的组件中，限制可以输入的最小数字。"
              ></guide>
            </div>
            <el-input v-model="currentData.min" @change="currentData.value=$event-0"/>
            <div class="tips">
              最大值
              <guide
                video="/static/guide/最大值.jpg"
                title="最大值"
                text="数字输入类型的组件中，限制可以输入的最大数字。"
              ></guide>
            </div>
            <el-input v-model="currentData.max"/>
            <div class="tips">
              步进值
              <guide
                video="/static/guide/步进值.mp4"
                title="步进值"
                text="数字输入类型的组件中，限制输入的数字为多少的倍数。"
              ></guide>
            </div>
            <el-input v-model="currentData.step"/>
          </template>

          <div class="tips">
            组件宽度
            <guide
              video="/static/guide/组件宽度.mp4"
              title="组件宽度"
              text="设置所选定组件的宽度，有1/3、1/2、2/3、占据全部宽度，总共四种尺寸供选择。"
            ></guide>
          </div>
          <el-radio-group size="small" v-model="currentData.width">
            <el-radio-button :label="2">窄</el-radio-button>
            <el-radio-button :label="3">中</el-radio-button>
            <el-radio-button :label="4">宽</el-radio-button>
            <el-radio-button :label="6">长</el-radio-button>
          </el-radio-group>

        </div>
        <div class="button">
          <el-button @click="removeComp(currentData)" type="danger">删除组件</el-button>
        </div>
      </template>
    </div>
    <div :class="['trash-bin',isDrag?'':'hide']">
      <div class="trash-inner">
        <draggable v-model="trashData" :group="{name:'form'}" :options="{sort:false,animation:300}" :class="['trash-cont',trashData.length?'':'hide']">
          <transition-group class="drag-cont">
            <div v-for="element in trashData" :key="element.key" class="form-item view">
              <div class="tips">{{element.label}}</div>
              <div @click="removeTrash(element)" class="del el-icon-delete"></div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="text">回收站</div>
    </div>
  </div>
</template>

<style scoped>
  .main-box{
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    grid-template-rows: 1fr;
    .form-item{
      cursor: grab;
      background: white;
      margin-bottom: -1px;
      border-top: 1px solid lightgrey;
      border-bottom: 1px solid lightgrey;
      padding: 24px;
      .tips{
        font-size: 15px;
        color: #989898;
        margin-bottom: 8px;
      }
      &.email{
        .code-input{
          display: flex;
          grid-gap: 8px;
          margin-top: 8px;
        }
      }
      &.phone{
        .phone-input{
          display: flex;
          grid-gap: 8px;
        }
      }
      &.select{
        .el-select{
          width: 100%;
        }
      }
      &.number{
        .el-input-number{
          width: 100%;
        }
      }
      &.time,&.timeRange{
        .el-date-editor{
          width: 100%;
        }
      }
      &.date,&.dateRange{
        .el-date-editor{
          width: 100%;
        }
      }
      &.region{
        .el-cascader{
          width: 100%;
        }
      }
      &.view{
        transition-duration: 300ms;
        border-radius: 8px;
        border: 3px solid #2563EB00;
        padding: 12px 12px;
        margin-bottom: 0;
        &.tips{
          padding: 12px 12px;
        }
        &.active{
          border: 3px solid #2563EB;
        }
      }
    }
    .trash-bin{
      box-shadow: -4px 8px 12px 0 #00000044;
      padding: 8px;
      position: absolute;
      border-radius: 32px 32px 0 0;
      z-index: 3;
      right: 200px;
      bottom: 0;
      width: 360px;
      height: 150px;
      background: lightgrey;
      transition-duration: 300ms;
      .trash-inner{
        position: relative;
        outline: #e4e4e4 5px solid;
        border-radius: 24px;
        width: 100%;
        height: 60px;
        background-image: linear-gradient( #b3b3b3, #2b2b2b);
        .trash-cont{
          overflow: hidden;
          border-radius: 24px;
          position: absolute;
          width: 100%;
          height: 200%;
          left: 0;
          bottom: 0;
          &.hide{
            height: 100%;
          }
          .drag-cont{
            padding: 6px 12px 0;
            overflow: hidden;
            overflow-y: scroll;
            display: block;
            width: calc(100% + 20px);
            height: 100%;
            .form-item{
              position: sticky;
              left: 0;
              top: 0;
              border-bottom-right-radius: 0;
              border-bottom-left-radius: 0;
               border: 1px solid lightgrey;
              height: 100%;
              .del{
                position: absolute;
                right: 16px;
                top: 16px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .text{
        width: 100%;
        text-align: center;
        margin-top: 16px;
        font-size: 36px;
        font-weight: bold;
        color: gray;
        text-shadow: 4px 4px 4px 4px #ffffff;
      }
      &.hide{
        bottom: -160px;
      }
      &:hover{
        bottom: -60px;
      }
    }
    .comp-lib{
      z-index: 1;
      position: relative;
      display: grid;
      grid-template-rows: auto 1fr;
      box-shadow: 0 1px 4px 0 #00000022;
      .title{
        padding: 24px;
      }
      .list{
        position: relative;
        .drag-list{
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          overflow: hidden;
          overflow-y: auto;
          .drag-cont{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
    .form-view{
      position: relative;
      background: #F9FAFB;
      .scroll-view{
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        .form-cont{
          padding: 12px;
          border-radius: 16px;
          margin: 24px;
          background: white;
          width: calc(100% - 48px);
          box-shadow: 0 1px 4px 0 #00000022;
          .form-head{
            padding: 12px;
            border-radius: 8px;
            transition-duration: 300ms;
            border: 3px solid #2563EB00;
            &:hover,&.active{
              border: 3px solid #2563EB;
            }
            .title{
              font-size: 36px;
              font-weight: bold;
            }
            .tips{
              font-size: 20px;
              color: #989898;
              margin-bottom: 6px;
            }
          }
          .form-body{
            .drag-cont{
              display: grid;
              grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
              width: 100%;
              min-height: 300px;
              align-content: start;
              .form-item{
                height: fit-content;
              }
              .required{
                .tips{
                  &::after{
                    margin-left: 4px;
                    content: '*';
                    color: red;
                  }
                }
              }
            }
          }
        }
      }
    }
    .comp-edit{
      z-index: 1;
      position: relative;
      box-shadow: 0 1px 4px 0 #00000022;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      .body{
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .tips{
          width: 100%;
          font-size: 16px;
          color: #505050;
          margin-bottom: 6px;
          margin-top: 12px;
        }
        .pattern-select{
          margin-top: 6px;
          width: 100%;
        }
        .select-list{
          width: 100%;
          .handel{
            height: 100%;
            display: flex;
            align-items: center;
          }
          .select-inner{
            .el-input__inner{
              cursor: grab;
            }
          }
        }
      }
      .button{
        display: flex;
        justify-content: flex-end;
        padding: 16px;
      }
      .title{
        padding: 16px;
        display: flex;
        align-items: center;
        .icon{
          margin-left: -4px;
          margin-top: -4px;
          margin-right: 8px;
          font-size: 24px;
          cursor: pointer;
          padding: 4px;
          border-radius: 8px;
          transition-duration: 300ms;
          &:hover{
            color: #2563EB;
            background: #ececec;
          }
        }
      }
    }
  }
</style>