123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <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>
|