gy-ui-plus 1.0.6 → 1.0.7

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 (37) hide show
  1. package/dist/gy-ui-plus.es.js +1764 -1839
  2. package/dist/gy-ui-plus.umd.js +2 -2
  3. package/package.json +12 -11
  4. package/packages/button/src/index.vue +41 -0
  5. package/packages/button/src/type.ts +11 -0
  6. package/packages/index.ts +5 -3
  7. package/packages/layout-page/index.ts +4 -0
  8. package/packages/layout-page/src/index.vue +75 -0
  9. package/packages/layout-page/style/index.ts +1 -0
  10. package/packages/layout-page/style/layout-page.scss +37 -0
  11. package/packages/table/index.ts +5 -0
  12. package/packages/table/src/GyTableColumn.vue +100 -0
  13. package/packages/table/src/index.vue +1073 -0
  14. package/packages/table/src/operator.vue +203 -0
  15. package/packages/table/src/renderCol.vue +20 -0
  16. package/packages/table/src/renderHeader.vue +18 -0
  17. package/packages/table/src/singleEdit.vue +352 -0
  18. package/packages/table/src/singleEditCell.vue +301 -0
  19. package/packages/table/src/tableProps.ts +146 -0
  20. package/packages/{gy-table → table}/src/useExpose.ts +15 -15
  21. package/packages/table/style/index.ts +1 -0
  22. package/packages/table/style/table.scss +348 -0
  23. package/dist/gy-ui-plus.css +0 -1
  24. package/packages/gy-button/src/index.vue +0 -29
  25. package/packages/gy-table/index.ts +0 -8
  26. package/packages/gy-table/src/TTableColumn.vue +0 -140
  27. package/packages/gy-table/src/index.vue +0 -1205
  28. package/packages/gy-table/src/operator.vue +0 -246
  29. package/packages/gy-table/src/renderCol.vue +0 -24
  30. package/packages/gy-table/src/renderHeader.vue +0 -18
  31. package/packages/gy-table/src/singleEdit.vue +0 -406
  32. package/packages/gy-table/src/singleEditCell.vue +0 -337
  33. package/packages/gy-table/src/tableProps.ts +0 -174
  34. package/packages/gy-table/style/table.scss +0 -368
  35. /package/packages/{gy-button → button}/index.ts +0 -0
  36. /package/packages/{gy-table → table}/src/ColumnSet.vue +0 -0
  37. /package/packages/{gy-table → table}/src/useVirtualized.ts +0 -0
@@ -1,337 +0,0 @@
1
- <template>
2
- <component
3
- :is="isShowRules ? 'el-form-item' : 'div'"
4
- :prop="prop"
5
- :rules="configEdit.rules"
6
- :class="[
7
- configEdit.className,
8
- { single_edit_cell_rules: configEdit.rules },
9
- 'single_edit_cell',
10
- ]"
11
- v-bind="$attrs"
12
- >
13
- <!-- 编辑组件自定义插槽 -->
14
- <template v-if="configEdit.editSlotName">
15
- <div :class="[prop, 'slot_edit_name']" @keyup="keyUpHandle">
16
- <slot :name="configEdit.editSlotName" :scope="scope" />
17
- </div>
18
- </template>
19
- <template v-if="configEdit.isSelfCom">
20
- <component
21
- v-if="configEdit.editComponent === 't-select-table'"
22
- :ref="(el:any) => handleRef(el,configEdit)"
23
- :is="configEdit.editComponent"
24
- :placeholder="
25
- configEdit.placeholder || getPlaceholder(configEdit)
26
- "
27
- v-bind="
28
- typeof configEdit.bind == 'function'
29
- ? configEdit.bind(scope)
30
- : {
31
- clearable: true,
32
- filterable: true,
33
- ...configEdit.bind,
34
- }
35
- "
36
- :style="{ width: configEdit.width || '100%' }"
37
- v-on="cEvent(configEdit, 't-select-table')"
38
- />
39
- <component
40
- v-else
41
- :is="configEdit.editComponent"
42
- v-model="childValue"
43
- :placeholder="
44
- configEdit.placeholder || getPlaceholder(configEdit)
45
- "
46
- :ref="(el: any) => getRefs(el, configEdit)"
47
- v-bind="
48
- typeof configEdit.bind == 'function'
49
- ? configEdit.bind(scope)
50
- : {
51
- clearable: true,
52
- filterable: true,
53
- ...configEdit.bind,
54
- }
55
- "
56
- @change="handleEvent(configEdit.event)"
57
- :style="{ width: configEdit.width || '100%' }"
58
- v-on="cEvent(configEdit)"
59
- />
60
- </template>
61
- <component
62
- v-if="!configEdit.editSlotName && !configEdit.isSelfCom"
63
- :is="configEdit.editComponent || 'el-input'"
64
- v-model="childValue"
65
- :type="configEdit.type"
66
- :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
67
- :ref="(el: any) => getRefs(el, configEdit)"
68
- :class="prop"
69
- @change="handleEvent(configEdit.event)"
70
- @keyup="keyUpHandle"
71
- :style="{ width: configEdit.width || '100%' }"
72
- v-on="cEvent(configEdit)"
73
- v-bind="
74
- typeof configEdit.bind == 'function'
75
- ? configEdit.bind(scope)
76
- : { clearable: true, filterable: true, ...configEdit.bind }
77
- "
78
- >
79
- <!-- 前置文本 -->
80
- <template #prepend v-if="configEdit.prepend">{{
81
- configEdit.prepend
82
- }}</template>
83
- <!-- 后置文本 -->
84
- <template #append v-if="configEdit.append">{{
85
- configEdit.append
86
- }}</template>
87
- <!-- 子组件自定义插槽 -->
88
- <!-- <template v-if="configEdit.childSlotName">
89
- <slot />
90
- </template>-->
91
- <template v-if="!configEdit.editComponent.includes('date')">
92
- <component
93
- :is="compChildName(configEdit)"
94
- v-for="(value, key) in selectListType(configEdit)"
95
- :key="key"
96
- :disabled="value.disabled"
97
- :label="compChildLabel(configEdit, value)"
98
- :value="compChildValue(configEdit, value, key)"
99
- >{{ compChildShowLabel(configEdit, value) }}</component
100
- >
101
- </template>
102
- </component>
103
- </component>
104
- </template>
105
-
106
- <script setup lang="ts">
107
- import { computed, ref, watch } from "vue";
108
- defineOptions({
109
- name: "SingleEditCell",
110
- });
111
- const props = defineProps({
112
- /** 编辑配置项说明
113
- * label: '爱好', // placeholder显示
114
- * editComponent: 'el-select', // 组件
115
- * type: 'select-arr', // option显示
116
- * list: 'hobbyList', // 下拉选择数据源
117
- * arrLabel: 'label', // 下拉选择中文显示
118
- * arrKey: 'value' // 下拉选择number显示(最终传后台)
119
- * bind:{} // 组件衍生属性(即第三方组件属性)
120
- */
121
- configEdit: {
122
- type: Object as any,
123
- default: () => ({}),
124
- },
125
- // 下拉选择数据源
126
- listTypeInfo: {
127
- type: Object,
128
- default: () => ({}),
129
- },
130
- scope: {
131
- type: Object,
132
- default: () => ({}),
133
- },
134
- prop: {
135
- type: String,
136
- default: "prop",
137
- },
138
- // 是否走表单验证(表头合并不校验)
139
- isShowRules: {
140
- type: Boolean,
141
- default: true,
142
- },
143
- modelValue: {
144
- type: [String, Number, Array, Boolean, Date, Object],
145
- },
146
- // 列for index
147
- indexColumns: [String, Number],
148
- });
149
- // 抛出事件
150
- const emits = defineEmits([
151
- "handleEvent",
152
- "update:modelValue",
153
- "keyupHandle",
154
- "getRefs",
155
- ]);
156
- // vue3 v-model简写
157
- let childValue: any = computed({
158
- get() {
159
- return props?.modelValue;
160
- },
161
- set(val) {
162
- emits("update:modelValue", val);
163
- },
164
- });
165
- watch(
166
- () => props.modelValue,
167
- (data) => {
168
- childValue.value = data;
169
- }
170
- );
171
- // 绑定的相关事件
172
- const handleEvent = (type: string) => {
173
- setTimeout(() => {
174
- // console.log("组件", type, childValue.value)
175
- emits("handleEvent", { type, val: childValue.value });
176
- }, 0);
177
- };
178
- // 键盘事件
179
- const keyUpHandle = ($event: any) => {
180
- emits("keyupHandle", $event, props.scope.$index, props.prop);
181
- };
182
- // 引用第三方事件
183
- const cEvent: any = computed(() => {
184
- return ({ eventHandle }: any, type = "") => {
185
- let event = { ...eventHandle };
186
- let changeEvent = {} as any;
187
- Object.keys(event).forEach((v) => {
188
- changeEvent[v] = (e: any, ids: any) => {
189
- if (type === "t-select-table") {
190
- const argument = {
191
- row: e,
192
- ids: ids,
193
- prop: props.prop,
194
- scope: props.scope,
195
- };
196
- event[v] && event[v](argument);
197
- } else {
198
- if ((typeof e === "number" && e === 0) || e) {
199
- event[v] &&
200
- event[v]({
201
- val: e,
202
- prop: props.prop,
203
- scope: props.scope,
204
- });
205
- } else {
206
- event[v] &&
207
- event[v]({ prop: props.prop, scope: props.scope });
208
- }
209
- }
210
- };
211
- });
212
- return { ...changeEvent };
213
- };
214
- });
215
-
216
- const selectListType = computed(() => {
217
- return (item: { list: string | number }) => {
218
- if (props.listTypeInfo) {
219
- return props.listTypeInfo[item.list];
220
- } else {
221
- return [];
222
- }
223
- };
224
- });
225
- // 子组件名称
226
- const compChildName = computed(() => {
227
- return (configEdit: { type: any }) => {
228
- switch (configEdit.type) {
229
- case "checkbox":
230
- return "el-checkbox";
231
- case "radio":
232
- return "el-radio";
233
- case "select-arr":
234
- case "select-obj":
235
- return "el-option";
236
- }
237
- };
238
- });
239
- // 子子组件label
240
- const compChildLabel = computed(() => {
241
- return (
242
- configEdit: { type: any; arrLabel: any },
243
- value: { [x: string]: any; value: any }
244
- ) => {
245
- switch (configEdit.type) {
246
- case "radio":
247
- case "checkbox":
248
- return value[configEdit.arrLabel || "label"];
249
- case "el-select-multiple":
250
- case "select-arr":
251
- return value[configEdit.arrLabel || "label"];
252
- case "select-obj":
253
- return value;
254
- }
255
- };
256
- });
257
- // 子子组件value
258
- const compChildValue = computed(() => {
259
- return (
260
- configEdit: { type: any; arrKey: any },
261
- value: { [x: string]: any; value: any },
262
- key: any
263
- ) => {
264
- switch (configEdit.type) {
265
- case "radio":
266
- case "checkbox":
267
- return value[configEdit.arrKey || "key"];
268
- case "el-select-multiple":
269
- case "select-arr":
270
- return value[configEdit.arrKey || "key"];
271
- case "select-obj":
272
- return key;
273
- }
274
- };
275
- });
276
- // 子子组件文字展示
277
- const compChildShowLabel = computed(() => {
278
- return (
279
- configEdit: { type: any; arrLabel: any },
280
- value: { [x: string]: any; label: any }
281
- ) => {
282
- switch (configEdit.type) {
283
- case "radio":
284
- case "checkbox":
285
- return value[configEdit.arrLabel || "label"];
286
- case "el-select-multiple":
287
- case "select-arr":
288
- return value[configEdit.arrLabel || "label"];
289
- case "select-obj":
290
- return value;
291
- }
292
- };
293
- });
294
- // 获取所有ref
295
- const getRefs = (el: any, item: any) => {
296
- emits("getRefs", el, item);
297
- };
298
- // 下拉选择表格组件 ref
299
- const tselecttableref: any = ref({});
300
- // 下拉选择表格组件 动态ref
301
- const handleRef = (el: any, item: any) => {
302
- emits("getRefs", el, item);
303
- if (el) {
304
- tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el;
305
- }
306
- };
307
- // 重置下拉表格
308
- const resetTselectTableFields = () => {
309
- // 获取所有下拉选择表格组件
310
- const refList = Object.keys(tselecttableref.value).filter((item) =>
311
- item.includes("tselecttableref")
312
- );
313
- if (refList.length > 0 && tselecttableref.value) {
314
- refList.map((val) => {
315
- tselecttableref.value[val].clear();
316
- });
317
- }
318
- };
319
- // placeholder的显示
320
- const getPlaceholder = (row: any) => {
321
- if (!row.editComponent || typeof row.editComponent !== "string") {
322
- return row.label;
323
- }
324
- const componentType = row.editComponent.toLowerCase();
325
- if (componentType.includes("input")) {
326
- return "请输入";
327
- } else if (
328
- componentType.includes("select") ||
329
- componentType.includes("date")
330
- ) {
331
- return "请选择";
332
- }
333
- return row.label;
334
- };
335
-
336
- defineExpose({ resetTselectTableFields });
337
- </script>
@@ -1,174 +0,0 @@
1
- import type { PropType, ExtractPropTypes } from "vue";
2
-
3
- export const tableProps = {
4
- // table所需数据
5
- table: {
6
- type: Object,
7
- default: () => {
8
- return {};
9
- },
10
- required: false,
11
- },
12
- paginationData: {
13
- type: Object,
14
- default: () => {
15
- return {
16
- total: 0,
17
- pageNo: 1,
18
- pageSize: 10,
19
- };
20
- },
21
- },
22
- tableData: {
23
- type: Array,
24
- default: () => {
25
- return [];
26
- },
27
- required: true,
28
- },
29
- // 表头数据
30
- columns: {
31
- type: Array,
32
- default: () => {
33
- return [];
34
- },
35
- // required: true
36
- },
37
- isDisabledForm: {
38
- type: Boolean,
39
- default: false,
40
- },
41
- // 按钮权限数据集
42
- btnPermissions: {
43
- type: Array,
44
- default: () => {
45
- return [];
46
- },
47
- },
48
- // 表格标题
49
- title: {
50
- type: String,
51
- },
52
- tableTitle: String,
53
- // table对齐方式
54
- align: {
55
- type: String as PropType<"left" | "center" | "right">,
56
- default: "center",
57
- },
58
- // 是否开启Tree-table
59
- isTree: {
60
- type: Boolean,
61
- default: false,
62
- },
63
- // 是否开启行拖拽
64
- isRowSort: {
65
- type: Boolean,
66
- default: false,
67
- },
68
- // 开启行拖拽,第一列是否显示拖拽图标
69
- isRowSortIcon: {
70
- type: Boolean,
71
- default: false,
72
- },
73
- // 显示拖拽列的配置
74
- rowSortIconBind: {
75
- type: Object,
76
- default: () => {
77
- return {};
78
- },
79
- },
80
- // 是否复制单元格
81
- isCopy: {
82
- type: Boolean,
83
- default: false,
84
- },
85
- // 是否开启点击整行选中单选框
86
- rowClickRadio: {
87
- type: Boolean,
88
- default: true,
89
- },
90
- // 设置默认选中项(单选)defaultRadioCol值必须大于0!
91
- defaultRadioCol: Number,
92
- // 序列号显示是否分页累加
93
- isPaginationCumulative: {
94
- type: Boolean,
95
- default: false,
96
- },
97
- // 是否显示分页
98
- isShowPagination: {
99
- type: Boolean,
100
- default: true,
101
- },
102
- // 是否开启编辑保存按钮
103
- isShowFooterBtn: {
104
- type: Boolean,
105
- default: false,
106
- },
107
- // 是否显示设置(隐藏/显示列)
108
- columnSetting: {
109
- type: Boolean,
110
- default: false,
111
- },
112
- // 是否高亮选中行
113
- highlightCurrentRow: {
114
- type: Boolean,
115
- default: false,
116
- },
117
- // 如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件
118
- sortable: {
119
- type: [Boolean, String],
120
- default: true,
121
- },
122
- // 单元格编辑是否开启键盘事件
123
- isKeyup: {
124
- type: Boolean,
125
- default: false,
126
- },
127
- // TAdaptivePage组件是否使用了Toolbar插槽
128
- isSlotToolbar: Boolean,
129
- // TAdaptivePage组件是否使用了title插槽
130
- isSlotTitle: Boolean,
131
- // 是否开启边框
132
- border: {
133
- type: Boolean,
134
- default: true,
135
- },
136
- // table loading
137
- tableLoading: {
138
- type: Boolean,
139
- default: false,
140
- },
141
- loadingTxt: {
142
- type: String,
143
- default: "加载中...",
144
- },
145
- // 是否开启虚拟列表
146
- useVirtual: Boolean,
147
- // 虚拟列表的渲染行数
148
- virtualShowSize: {
149
- type: Number,
150
- default: 30,
151
- },
152
- footerBtnAlign: {
153
- type: String,
154
- default: "right",
155
- },
156
- /**
157
- * 空数据时表头是否显示校验红点
158
- */
159
- isEmptyDataRequired: {
160
- type: Boolean,
161
- default: false,
162
- },
163
- saveBtnTxt: {
164
- type: String,
165
- default: "保存",
166
- },
167
- /** 表格最大高度 */
168
- maxHeight: {
169
- type: String,
170
- default: "100%",
171
- },
172
- };
173
-
174
- export type TTableProps = ExtractPropTypes<typeof tableProps>;