123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <template>
- <div class="form-drawing-table" :class="{'is-active':isActive}">
- <i class="el-icon-rank show-focus handle-icon move-icon"/>
- <span class="right-top item-field-key">{{fieldKey}}</span>
- <div class="right-bottom show-focus">
- <i class="el-icon-document-copy handle-icon" @click.stop="copyItem"></i>
- <i class="el-icon-delete handle-icon" @click.stop="deleteItem"></i>
- </div>
- <div>
- <table-design :config="tableConfig" :hide-delete="true">
- <vue-draggable :model-value="list"
- @update:modelValue="updateOptions"
- :group="{name: 'components',put: judgePut}"
- handle=".move-icon"
- ghost-class="table-ghost"
- @add="addOptions"
- :animation="200"
- item-key="id"
- :component-data="{ class:'form-table-options', style: {height: '100%',border:'1px dashed #ddd',width: '100%',display: 'flex',boxSizing:'border-box'}}">
- <template #item="{element, index}">
- <form-drawing-item :field-key="element.key"
- :style="itemStyle(element)"
- :selectId="selectId"
- :is-active="selectId === element.id"
- :config="element.config"
- :show-copy="false"
- @click.stop="selectOption(element)"
- @onDelete="deleteOption(index)"></form-drawing-item>
- </template>
- </vue-draggable>
- </table-design>
- </div>
- </div>
- </template>
- <script>
- import { computed, ref } from 'vue'
- import FormDrawingItem from './form-drawing-item'
- import TableDesign from './form-drawing-table/design'
- import { handleFormConfig } from './handle-config'
- import { getCopyRow } from '../util'
- import VueDraggable from 'vuedraggable'
- import { getNextItem } from '@cip/utils/util'
- import './form-drawing-table/index.less'
- export default {
- name: 'FormDrawingTable',
- components: {
- VueDraggable, FormDrawingItem, TableDesign
- },
- props: {
- isActive: Boolean,
- fieldKey: String,
- config: Object,
- selectId: [String, Number]
- },
- emits: ['onDelete', 'onCopy', 'onSelectItem', 'update:config'],
- setup (props, { emit }) {
- const computedConfig = computed(() => {
- return handleFormConfig(props.config, [], {
- }, { })
- })
- const tableConfig = computed(() => {
- // 表格中的组件全部变为可读
- return list.value?.map(i => {
- i.config.writable = false
- i.config.readable = true
- return i
- })
- })
- const list = computed(() => {
- return props.config.list || []
- })
- // 列表布局样式
- const itemStyle = computed(() => {
- return row => {
- if (row.config.width) {
- return { flexShrink: 0, flexBasis: row.config.width }
- } else {
- return { flexShrink: 0, flexGrow: 1 }
- }
- }
- })
- const deleteItem = () => {
- emit('onDelete')
- }
- const copyItem = () => {
- emit('onCopy')
- }
- const updateConfig = (val) => {
- emit('update:config', val)
- }
- const selectItem = (element) => {
- emit('onSelectItem', element)
- }
- const unique = (array) => {
- const result = []; const sign = {}
- // eslint-disable-next-line
- for (const i of array) {
- if (!sign[i.key]) {
- result.push(i)
- sign[i.key] = i
- }
- }
- return result
- }
- // 修改list配置
- const updateOptions = (list) => {
- const config = ref(props.config || {})
- list = unique(list)
- config.value.list = list.map(option => {
- const width = option.config.width !== undefined ? option.config.width : '200px'
- return {
- ...option,
- config: {
- ...option.config,
- width,
- writable: true
- }
- }
- }
- )
- updateConfig(config.value)
- }
- // 添加一个字段
- const addOptions = ({ newIndex }) => {
- const newItem = list.value[newIndex]
- if (newItem) {
- emit('onSelectItem', newItem)
- }
- }
- const selectOption = (element) => {
- emit('onSelectItem', element)
- }
- const deleteOption = (index) => {
- const config = props.config
- const nextItem = getNextItem(config.list, index)
- if (nextItem) selectOption(nextItem)
- config.list.splice(index, 1)
- updateConfig(config)
- }
- const copyOption = (index) => {
- const config = props.config
- const newRow = getCopyRow(config.list[index])
- config.list.splice(index + 1, 0, newRow)
- updateConfig(config)
- selectOption(newRow)
- }
- const judgePut = (...val) => {
- const dom = val?.[2] ?? {}
- return !dom.classList.contains('disabled-table')
- }
- return {
- list,
- tableConfig,
- computedConfig,
- deleteItem,
- copyItem,
- updateConfig,
- selectItem,
- updateOptions,
- addOptions,
- selectOption,
- deleteOption,
- copyOption,
- judgePut,
- itemStyle
- }
- }
- }
- </script>
|