批次字段增加

YangYuGang

2025-03-11 7462fd192326d7cf3418b6185ca437b2667cbeab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
  <div>
    <div v-if="['Grid'].includes(formConfig.currentItem!.component)">
      <div v-for="(item, index) of formConfig.currentItem!['columns']" :key="index">
        <div class="options-box">
          <Input v-model:value="item.span" class="options-value" />
          <a class="options-delete" @click="deleteGridOptions(index)">
            <Icon icon="ant-design:delete-outlined" />
          </a>
        </div>
      </div>
      <a @click="addGridOptions">
        <Icon icon="ant-design:file-add-outlined" />
        添加栅格
      </a>
    </div>
    <div v-else>
      <div v-for="(item, index) of formConfig.currentItem!.componentProps![key]" :key="index">
        <div class="options-box">
          <Input v-model:value="item.label" />
          <Input v-model:value="item.value" class="options-value" />
          <a class="options-delete" @click="deleteOptions(index)">
            <Icon icon="ant-design:delete-outlined" />
          </a>
        </div>
      </div>
      <a @click="addOptions">
        <Icon icon="ant-design:file-add-outlined" />
        添加选项
      </a>
    </div>
  </div>
</template>
 
<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { remove } from '../../../utils';
  import message from '../../../utils/message';
  import { Input } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
 
  export default defineComponent({
    name: 'FormOptions',
    components: { Input, Icon },
    // props: {},
    setup() {
      const state = reactive({});
      const { formConfig } = useFormDesignState();
      const key = formConfig.value.currentItem?.component === 'TreeSelect' ? 'treeData' : 'options';
      const addOptions = () => {
        if (!formConfig.value.currentItem?.componentProps?.[key])
          formConfig.value.currentItem!.componentProps![key] = [];
        const len = formConfig.value.currentItem?.componentProps?.[key].length + 1;
        formConfig.value.currentItem!.componentProps![key].push({
          label: `选项${len}`,
          value: '' + len,
        });
      };
      const deleteOptions = (index: number) => {
        remove(formConfig.value.currentItem?.componentProps?.[key], index);
      };
 
      const addGridOptions = () => {
        formConfig.value.currentItem?.['columns']?.push({
          span: 12,
          children: [],
        });
      };
      const deleteGridOptions = (index: number) => {
        if (index === 0) return message.warning('请至少保留一个栅格');
 
        remove(formConfig.value.currentItem!['columns']!, index);
      };
      return {
        ...toRefs(state),
        formConfig,
        addOptions,
        deleteOptions,
        key,
        deleteGridOptions,
        addGridOptions,
      };
    },
  });
</script>
 
<style lang="less" scoped>
  .options-box {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
 
    .options-value {
      margin: 0 8px;
    }
 
    .options-delete {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #f5f5f5;
      color: #666;
      line-height: 30px;
      text-align: center;
 
      &:hover {
        background: #ff4d4f;
      }
    }
  }
</style>