cip-components/cip-table-design/form-drawing/form-drawing-item.vue

<template>
    <div class="form-drawing-item" :class="{'is-active':isActive,'is-layout': config.type === 'grid'}">
      <div class="form-drawing-item__handle">
        <i class="el-icon-rank show-focus handle-icon move-icon"/>
        <span class="right-top item-field-key">{{fieldKey}}
          <template v-if="twoValueComponentList.includes(config.type)">
            -{{config.otherKey}}
          </template>
        </span>
        <div class="right-bottom show-focus">
          <i class="el-icon-document-copy handle-icon" v-if="showCopy" @click.stop="copyItem"></i>
          <i class="el-icon-delete handle-icon" @click.stop="deleteItem"></i>
        </div>
      </div>
      <cip-form-item :field-key="fieldKey" :config="computedConfig" :show-template="true" :model="model"></cip-form-item>
    </div>
</template>
<script>
import { computed, watch, ref } from 'vue'
import CipFormItem from '@cip/components/cip-form-item'
import { handleFormConfig } from './handle-config'
import { twoValueComponentList } from '../util'
export default {
  name: 'FormDrawingItem',
  components: {
    CipFormItem
  },
  props: {
    isActive: Boolean,
    fieldKey: String,
    config: Object,
    showCopy: {
      type: Boolean,
      default: true
    }
  },
  emits: ['onDelete', 'onCopy'],
  setup (props, context) {
    const model = ref({})
    const computedConfig = computed(() => {
      return handleFormConfig(props.config, [], {
        table: 'basic-table-design'
      }, { })
    })
    watch(() => computedConfig.value.defaultValue, (val) => {
      model.value[props.fieldKey] = val
    })
    const deleteItem = () => {
      context.emit('onDelete')
    }
    const copyItem = () => {
      context.emit('onCopy')
    }
    return {
      twoValueComponentList,
      computedConfig,
      deleteItem,
      copyItem,
      model
    }
  }
}
</script>
<style lang="less">
.form-drawing-item{
  user-select: none;
  position: relative;
  background-color: rgba(236,245,255,.3);
  border: 1px dashed #999;
  margin: 4px 2px;
  &.is-active{
    .form-drawing-item__handle{
      border: 1px solid @primary;
      outline: 2px solid @primary;
    }
    .show-focus{
      visibility: visible;
    }
    .handle-icon{
      padding: 4px;
      color: #fff;
      background-color: @primary;
    }
  }
  .show-focus{
    visibility: hidden;
  }
  &__handle{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    .handle-icon{
      cursor: pointer;
    }
    .move-icon{
      cursor: move;
    }
    .item-field-key{
      color: @success;
      font-size: 12px;
    }
    .right-top{
      position: absolute;
      right: 0;
      top: 0;
    }
    .right-bottom{
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>