66 style =" height : 600px "
77 >
88 <p class =" p-4 font-semibold" >
9- {{ t('storage.table.add') }}
9+ {{ title || t('storage.table.add') }}
1010 </p >
1111 <div class =" scroll flex-1 overflow-auto px-4 pb-4" >
1212 <ui-input
2727 >
2828 {{ t('message.noData') }}
2929 </p >
30- <ul class =" mt-4 space-y-2" >
31- <li
32- v-for =" (column, index) in state.columns"
33- :key =" column.id"
34- class =" flex items-center space-x-2"
35- >
36- <ui-input
37- :model-value =" column.name"
38- :placeholder =" t('workflow.table.column.name')"
39- class =" flex-1"
40- @blur =" updateColumnName(index, $event.target)"
41- />
42- <ui-select
43- v-model =" column.type"
44- class =" flex-1"
45- :placeholder =" t('workflow.table.column.type')"
46- >
47- <option v-for =" type in dataTypes" :key =" type.id" :value =" type.id" >
48- {{ type.name }}
49- </option >
50- </ui-select >
51- <button @click =" deleteColumn(index)" >
52- <v-remixicon name =" riDeleteBin7Line" />
53- </button >
54- </li >
55- </ul >
30+ <draggable
31+ v-model =" state.columns"
32+ tag =" ul"
33+ handle =" .handle"
34+ item-key =" id"
35+ class =" mt-4 space-y-2"
36+ >
37+ <template #item =" { element: column , index } " >
38+ <li class =" flex items-center space-x-2" >
39+ <span class =" handle cursor-move" >
40+ <v-remixicon name =" mdiDrag" />
41+ </span >
42+ <ui-input
43+ :model-value =" column.name"
44+ :placeholder =" t('workflow.table.column.name')"
45+ class =" flex-1"
46+ @blur =" updateColumnName(index, $event.target)"
47+ />
48+ <ui-select
49+ v-model =" column.type"
50+ class =" flex-1"
51+ :placeholder =" t('workflow.table.column.type')"
52+ >
53+ <option
54+ v-for =" type in dataTypes"
55+ :key =" type.id"
56+ :value =" type.id"
57+ >
58+ {{ type.name }}
59+ </option >
60+ </ui-select >
61+ <button @click =" deleteColumn(index)" >
62+ <v-remixicon name =" riDeleteBin7Line" />
63+ </button >
64+ </li >
65+ </template >
66+ </draggable >
5667 </div >
5768 <div class =" p-4 text-right" >
5869 <ui-button class =" mr-4" @click =" clearTempTables(true)" >
7384import { reactive , toRaw , watch } from ' vue' ;
7485import { useI18n } from ' vue-i18n' ;
7586import { nanoid } from ' nanoid' ;
87+ import draggable from ' vuedraggable' ;
7688import cloneDeep from ' lodash.clonedeep' ;
7789import { dataTypes } from ' @/utils/constants/table' ;
7890
@@ -85,6 +97,10 @@ const props = defineProps({
8597 type: String ,
8698 default: ' ' ,
8799 },
100+ title: {
101+ type: String ,
102+ default: ' ' ,
103+ },
88104 columns: {
89105 type: Array ,
90106 default : () => [],
@@ -122,7 +138,10 @@ function updateColumnName(index, target) {
122138 state .columns [index].name = columnName;
123139}
124140function saveTable () {
125- const rawState = toRaw (state);
141+ const rawState = {
142+ ... toRaw (state),
143+ columns: state .columns .map (toRaw),
144+ };
126145
127146 emit (' save' , { ... rawState, changes });
128147}
0 commit comments