@tmagic/form 1.3.0-alpha.17 → 1.3.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/tmagic-form.js +248 -251
  2. package/dist/tmagic-form.js.map +1 -1
  3. package/dist/tmagic-form.umd.cjs +248 -251
  4. package/dist/tmagic-form.umd.cjs.map +1 -1
  5. package/package.json +3 -3
  6. package/src/containers/Table.vue +148 -150
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.0-alpha.17",
2
+ "version": "1.3.0-alpha.19",
3
3
  "name": "@tmagic/form",
4
4
  "type": "module",
5
5
  "sideEffects": [
@@ -36,8 +36,8 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@element-plus/icons-vue": "^2.0.9",
39
- "@tmagic/design": "1.3.0-alpha.17",
40
- "@tmagic/utils": "1.3.0-alpha.17",
39
+ "@tmagic/design": "1.3.0-alpha.19",
40
+ "@tmagic/utils": "1.3.0-alpha.19",
41
41
  "lodash-es": "^4.17.21",
42
42
  "sortablejs": "^1.14.0",
43
43
  "vue": "^3.3.4"
package/src/containers/Table.vue CHANGED
@@ -1,162 +1,160 @@
1
1
  <template>
2
2
  <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
3
3
  <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
4
- <div class="el-form-item__content">
5
- <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
6
- <TMagicTable
7
- v-if="model[modelName]"
8
- ref="tMagicTable"
9
- style="width: 100%"
10
- :row-key="config.rowKey || 'id'"
11
- :data="data"
12
- :lastData="lastData"
13
- :border="config.border"
14
- :max-height="config.maxHeight"
15
- :default-expand-all="true"
16
- :key="updateKey"
17
- @select="selectHandle"
18
- @sort-change="sortChange"
4
+ <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
5
+ <TMagicTable
6
+ v-if="model[modelName]"
7
+ ref="tMagicTable"
8
+ style="width: 100%"
9
+ :row-key="config.rowKey || 'id'"
10
+ :data="data"
11
+ :lastData="lastData"
12
+ :border="config.border"
13
+ :max-height="config.maxHeight"
14
+ :default-expand-all="true"
15
+ :key="updateKey"
16
+ @select="selectHandle"
17
+ @sort-change="sortChange"
18
+ >
19
+ <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
20
+ <template v-slot="scope">
21
+ <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
22
+ </template>
23
+ </TMagicTableColumn>
24
+
25
+ <TMagicTableColumn
26
+ label="操作"
27
+ :width="config.operateColWidth || 55"
28
+ align="center"
29
+ :fixed="config.fixed === false ? undefined : 'left'"
19
30
  >
20
- <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
21
- <template v-slot="scope">
22
- <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
23
- </template>
24
- </TMagicTableColumn>
31
+ <template v-slot="scope">
32
+ <slot name="operateCol" :scope="scope"></slot>
33
+ <TMagicIcon
34
+ v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
35
+ class="m-table-delete-icon"
36
+ @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
37
+ ><Delete
38
+ /></TMagicIcon>
39
+ </template>
40
+ </TMagicTableColumn>
41
+
42
+ <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
43
+ <template v-slot="scope">
44
+ <TMagicTooltip
45
+ v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
46
+ content="点击上移，双击置顶"
47
+ placement="top"
48
+ >
49
+ <TMagicButton
50
+ plain
51
+ size="small"
52
+ type="primary"
53
+ :icon="ArrowUp"
54
+ :disabled="disabled"
55
+ text
56
+ @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
57
+ @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
58
+ ></TMagicButton>
59
+ </TMagicTooltip>
60
+ <TMagicTooltip
61
+ v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
62
+ content="点击下移，双击置底"
63
+ placement="top"
64
+ >
65
+ <TMagicButton
66
+ plain
67
+ size="small"
68
+ type="primary"
69
+ :icon="ArrowDown"
70
+ :disabled="disabled"
71
+ text
72
+ @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
73
+ @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
74
+ ></TMagicButton>
75
+ </TMagicTooltip>
76
+ </template>
77
+ </TMagicTableColumn>
25
78
 
26
- <TMagicTableColumn
27
- label="操作"
28
- :width="config.operateColWidth || 55"
29
- align="center"
30
- :fixed="config.fixed === false ? undefined : 'left'"
31
- >
32
- <template v-slot="scope">
33
- <slot name="operateCol" :scope="scope"></slot>
34
- <TMagicIcon
35
- v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
36
- class="m-table-delete-icon"
37
- @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
38
- ><Delete
39
- /></TMagicIcon>
40
- </template>
41
- </TMagicTableColumn>
79
+ <TMagicTableColumn
80
+ v-if="selection"
81
+ align="center"
82
+ header-align="center"
83
+ type="selection"
84
+ width="45"
85
+ ></TMagicTableColumn>
42
86
 
43
- <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
44
- <template v-slot="scope">
45
- <TMagicTooltip
46
- v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
47
- content="点击上移，双击置顶"
48
- placement="top"
49
- >
50
- <TMagicButton
51
- plain
52
- size="small"
53
- type="primary"
54
- :icon="ArrowUp"
55
- :disabled="disabled"
56
- text
57
- @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
58
- @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
59
- ></TMagicButton>
60
- </TMagicTooltip>
61
- <TMagicTooltip
62
- v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
63
- content="点击下移，双击置底"
64
- placement="top"
65
- >
66
- <TMagicButton
67
- plain
68
- size="small"
69
- type="primary"
70
- :icon="ArrowDown"
71
- :disabled="disabled"
72
- text
73
- @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
74
- @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
75
- ></TMagicButton>
76
- </TMagicTooltip>
77
- </template>
78
- </TMagicTableColumn>
87
+ <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
88
+ <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
89
+ </TMagicTableColumn>
79
90
 
91
+ <template v-for="(column, index) in config.items">
80
92
  <TMagicTableColumn
81
- v-if="selection"
82
- align="center"
83
- header-align="center"
84
- type="selection"
85
- width="45"
86
- ></TMagicTableColumn>
87
-
88
- <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
89
- <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
93
+ v-if="column.type !== 'hidden' && display(column.display)"
94
+ :prop="column.name"
95
+ :width="column.width"
96
+ :label="column.label"
97
+ :sortable="column.sortable"
98
+ :sort-orders="['ascending', 'descending']"
99
+ :key="column[mForm?.keyProp || '__key'] ?? index"
100
+ :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
101
+ >
102
+ <template #default="scope">
103
+ <Container
104
+ v-if="scope.$index > -1"
105
+ labelWidth="0"
106
+ :disabled="disabled"
107
+ :prop="getProp(scope.$index)"
108
+ :rules="column.rules"
109
+ :config="makeConfig(column, scope.row)"
110
+ :model="scope.row"
111
+ :lastValues="lastData[scope.$index]"
112
+ :is-compare="isCompare"
113
+ :size="size"
114
+ @change="$emit('change', model[modelName])"
115
+ @addDiffCount="onAddDiffCount()"
116
+ ></Container>
117
+ </template>
90
118
  </TMagicTableColumn>
91
-
92
- <template v-for="(column, index) in config.items">
93
- <TMagicTableColumn
94
- v-if="column.type !== 'hidden' && display(column.display)"
95
- :prop="column.name"
96
- :width="column.width"
97
- :label="column.label"
98
- :sortable="column.sortable"
99
- :sort-orders="['ascending', 'descending']"
100
- :key="column[mForm?.keyProp || '__key'] ?? index"
101
- :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
102
- >
103
- <template #default="scope">
104
- <Container
105
- v-if="scope.$index > -1"
106
- labelWidth="0"
107
- :disabled="disabled"
108
- :prop="getProp(scope.$index)"
109
- :rules="column.rules"
110
- :config="makeConfig(column, scope.row)"
111
- :model="scope.row"
112
- :lastValues="lastData[scope.$index]"
113
- :is-compare="isCompare"
114
- :size="size"
115
- @change="$emit('change', model[modelName])"
116
- @addDiffCount="onAddDiffCount()"
117
- ></Container>
118
- </template>
119
- </TMagicTableColumn>
120
- </template>
121
- </TMagicTable>
122
- </TMagicTooltip>
123
- <slot></slot>
124
- <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
125
- >新增一行</TMagicButton
126
- >
127
- &nbsp;
128
- <TMagicButton
129
- :icon="Grid"
130
- size="small"
131
- type="primary"
132
- @click="toggleMode"
133
- v-if="enableToggleMode && !isFullscreen"
134
- >展开配置</TMagicButton
135
- >
136
- <TMagicButton
137
- :icon="FullScreen"
138
- size="small"
139
- type="primary"
140
- @click="toggleFullscreen"
141
- v-if="config.enableFullscreen !== false"
142
- >
143
- {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
144
- </TMagicButton>
145
- <TMagicUpload
146
- v-if="importable"
147
- style="display: inline-block"
148
- ref="excelBtn"
149
- action="/noop"
150
- :disabled="disabled"
151
- :on-change="excelHandler"
152
- :auto-upload="false"
153
- >
154
- <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
155
- >&nbsp;
156
- <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
157
- >清空</TMagicButton
158
- >
159
- </div>
119
+ </template>
120
+ </TMagicTable>
121
+ </TMagicTooltip>
122
+ <slot></slot>
123
+ <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
124
+ >新增一行</TMagicButton
125
+ >
126
+ &nbsp;
127
+ <TMagicButton
128
+ :icon="Grid"
129
+ size="small"
130
+ type="primary"
131
+ @click="toggleMode"
132
+ v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
133
+ >展开配置</TMagicButton
134
+ >
135
+ <TMagicButton
136
+ :icon="FullScreen"
137
+ size="small"
138
+ type="primary"
139
+ @click="toggleFullscreen"
140
+ v-if="config.enableFullscreen !== false"
141
+ >
142
+ {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
143
+ </TMagicButton>
144
+ <TMagicUpload
145
+ v-if="importable"
146
+ style="display: inline-block"
147
+ ref="excelBtn"
148
+ action="/noop"
149
+ :disabled="disabled"
150
+ :on-change="excelHandler"
151
+ :auto-upload="false"
152
+ >
153
+ <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
154
+ >&nbsp;
155
+ <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
156
+ >清空</TMagicButton
157
+ >
160
158
 
161
159
  <div class="bottom" style="text-align: right" v-if="config.pagination">
162
160
  <TMagicPagination