sun-form-v3 1.0.69 → 1.0.71

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sun-form-v3",
3
3
  "private": false,
4
- "version": "1.0.69",
4
+ "version": "1.0.71",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "src"
@@ -27,8 +27,8 @@
27
27
  "sass": "^1.77.2",
28
28
  "tailwindcss": "^3.4.3",
29
29
  "vue": "^3.4.21",
30
- "vuedraggable": "^4.1.0",
31
- "xe-utils": "^3.5.26"
30
+ "xe-utils": "^3.5.28",
31
+ "vuedraggable": "^4.1.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@vitejs/plugin-vue": "^5.0.4",
package/src/http.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import axios from 'axios'
2
2
  // import qs from 'qs'
3
- import XEUtils from 'xe-utils'
3
+ import XEUtils from 'xe-utils/index'
4
4
  import {
5
5
  ElNotification
6
6
  } from 'element-plus'
@@ -1,342 +0,0 @@
1
- import XEUtils from "xe-utils"
2
- import Http from './http'
3
- import {
4
- ElNotification
5
- } from 'element-plus'
6
- import {
7
- reactive,
8
- ref,
9
- watch
10
- } from 'vue'
11
- /**
12
- * 设计器类,用于管理组件配置和交互
13
- * @class Designer
14
- * @param {Object} options 初始化选项,包含组件配置
15
- */
16
- class Designer {
17
- constructor({
18
- widgetConfig,
19
- showMode = false
20
- }) {
21
- /**
22
- * 渲染器模式
23
- */
24
- this.showMode = ref(showMode)
25
- /**
26
- * 反向响应式的组件配置对象
27
- */
28
- this.widgetConfig = reactive(widgetConfig);
29
- /**
30
- * XEUtils 工具库实例
31
- */
32
- this.$utils = XEUtils;
33
- /**
34
- * 组件映射表,用于快速查找组件
35
- */
36
- this.widgetMap = new Map();
37
- /**
38
- * Vue 实例映射表,用于快速查找 Vue 实例
39
- */
40
- this.vueInstanceMap = new Map();
41
- /**
42
- * 组件ID列表
43
- */
44
- this.widgetIds = [];
45
- /**
46
- * 当前选中的组件引用
47
- */
48
- this.chosenWidget = ref(null);
49
- /**
50
- * 操作历史列表
51
- */
52
- this.historyList = [];
53
- /**
54
- * 操作历史索引
55
- */
56
- this.historyIndex = ref(0);
57
- /**
58
- * 标记是否在操作历史中
59
- */
60
- this.isHistory = false;
61
- /**
62
- * Http服务实例,用于发起请求
63
- */
64
- this.$http = new Http({
65
- baseUrl: "/api"
66
- });
67
- /**
68
- * 根据组件配置构建组件映射表
69
- */
70
- this.buildWidgetMap(this.widgetConfig);
71
- /**
72
- * 监听组件配置的变化,重建组件映射表,并更新选中组件
73
- */
74
- watch(() => this.widgetConfig, (val) => {
75
- this.rebuildWidgetMap();
76
- this.chosenWidget.value = this.getWidgetById(this.widgetConfig.chosenId);
77
- }, {
78
- deep: true,
79
- immediate: true
80
- });
81
- /**
82
- * 监听组件列表的变化,记录操作历史
83
- */
84
- watch(() => this.widgetConfig.widgetList, (val) => {
85
- if (!this.isHistory) {
86
- this.historyList.push({
87
- widgetConfig: this.$utils.clone(this.widgetConfig, true),
88
- time: this.$utils.toDateString(new Date(), 'HH:mm:ss'),
89
- index: this.historyList.length
90
- });
91
- this.historyIndex.value = this.historyList.length - 1;
92
- } else {
93
- this.isHistory = false;
94
- }
95
- }, {
96
- deep: true,
97
- immediate: true
98
- });
99
- }
100
- eventHandle({
101
- value = null,
102
- eventType,
103
- widget,
104
- tableItemData
105
- }) {
106
- if (!this.showMode) return;
107
- if (widget.props[eventType]) {
108
- let funcstr = widget.props[eventType]
109
- let func = new Function('value', 'widget','self','app', funcstr);
110
- func(value, widget, this.getVueInstance(widget.id), this)
111
- }
112
- }
113
- /**
114
- * 设置vue实例
115
- */
116
- setVueIncetance(id, vueInstance) {
117
- this.vueInstanceMap.set(id, vueInstance);
118
- }
119
- /**
120
- * 获取vue实例
121
- */
122
- getVueInstance(id) {
123
- return this.vueInstanceMap.get(id);
124
- }
125
- /**
126
- * 设置当前选中的组件
127
- * @param {Object} chosenWidget 选中的组件对象
128
- */
129
- setChosenWidget(chosenWidget) {
130
- this.chosenWidget.value = chosenWidget;
131
- }
132
- /**
133
- * 根据组件的apiSet配置发起请求
134
- * @param {Object} widget 当前组件对象
135
- */
136
- requestByApisetConfig(widget) {
137
- let apiSet = widget.props.apiSet;
138
- if (!apiSet || !apiSet.apiurl) {
139
- return;
140
- }
141
- let params = {};
142
- let headers = {};
143
- let method = apiSet.method;
144
- if (apiSet.contentType == "FormData") {
145
- if (method == "post" || method == "put" || method == "patch") {
146
- method += "FormData";
147
- }
148
- }
149
- if (apiSet.params.length) {
150
- apiSet.params.forEach(e => {
151
- params[e.label] = e.value;
152
- });
153
- }
154
- if (apiSet.headers.length) {
155
- apiSet.headers.forEach(e => {
156
- headers[e.label] = e.value;
157
- });
158
- }
159
- if (apiSet.paramsFormat) {
160
- let fun = new Function("params", "widget", "app", apiSet.paramsFormat);
161
- let paramData = this.$utils.clone(params, true);
162
- var funcData = fun(paramData, widget, this);
163
- if (funcData && typeof this.$utils.isPlainObject(funcData)) {
164
- params = funcData;
165
- }
166
- }
167
- if (apiSet.headersFormat) {
168
- let fun = new Function("headers", "widget", "app", apiSet.headersFormat);
169
- let headerData = this.$utils.clone(headers, true);
170
- var funcData = fun(headerData, widget, this);
171
- if (funcData && typeof this.$utils.isPlainObject(funcData)) {
172
- headers = funcData;
173
- }
174
- }
175
- this.$http[method](apiSet.apiurl, params, headers)
176
- .then(res => {
177
- if (apiSet.successFormat) {
178
- let fun = new Function("res", "widget", "app", apiSet.successFormat);
179
- fun(res, widget, this);
180
- }
181
- })
182
- .catch(err => {
183
- if (apiSet.errorFormat) {
184
- let fun = new Function("error", "widget", "app", apiSet.errorFormat);
185
- fun(err, widget, this);
186
- }
187
- });
188
- }
189
- /**
190
- * 根据ID获取组件
191
- * @param {String} id 组件ID
192
- * @returns {Object|null} 组件对象或null(如果未找到)
193
- */
194
- getWidgetById(id) {
195
- return this.widgetMap.get(id);
196
- }
197
- /**
198
- * 根据历史索引更新组件配置
199
- * @param {Object} updates 更新的对象
200
- */
201
- updateByHistory(updates) {
202
- this.isHistory = true;
203
- this.$utils.destructuring(this.widgetConfig, updates);
204
- }
205
- /**
206
- * 更新组件的属性
207
- * @param {String} id 组件ID
208
- * @param {Object} updates 更新的对象
209
- * @param {Boolean} force 是否强制更新,即使存在相同的ID
210
- */
211
- updateWidget(id, updates, force) {
212
- const widget = this.getWidgetById(id);
213
- if (widget) {
214
- console.log('widget', widget);
215
- console.log('updates', updates);
216
- if (widget.id !== updates.id) {
217
- if (this.widgetIds.includes(updates.id) && !force) {
218
- ElNotification.warning('已经存在相同的id的组件,组件id不允许重复');
219
- return;
220
- }
221
- }
222
- if (id === 'homepage') {
223
- if (updates.id !== id) {
224
- ElNotification.warning('主页面的id不允许修改');
225
- }
226
- updates.id = updates.type = 'homepage';
227
- }
228
- this.$utils.destructuring(widget, updates);
229
- } else {
230
- console.warn(`Widget with id ${id} not found.`);
231
- }
232
- }
233
- /**
234
- * 重建组件映射表
235
- */
236
- rebuildWidgetMap() {
237
- this.widgetMap.clear();
238
- this.widgetIds = [];
239
- this.buildWidgetMap(this.widgetConfig);
240
- }
241
- /**
242
- * 递归构建组件映射表
243
- * @param {Object} widget 当前组件对象
244
- */
245
- buildWidgetMap(widget) {
246
- this.widgetMap.set(widget.id, widget);
247
- this.widgetIds.push(widget.id);
248
- if (widget.widgetList && widget.widgetList.length) {
249
- widget.widgetList.forEach(widget => {
250
- this.buildWidgetMap(widget);
251
- });
252
- }
253
- }
254
- /**
255
- * 设置当前选中的组件ID
256
- * @param {String} id 组件ID
257
- */
258
- setChosenId(id) {
259
- this.widgetConfig.chosenId = id;
260
- }
261
- /**
262
- * 获取当前选中的组件ID
263
- * @returns {String} 当前选中的组件ID
264
- */
265
- getChosenId() {
266
- return this.widgetConfig.chosenId;
267
- }
268
- /**
269
- * 获取初始化的数据对象
270
- * @param {Object} obj 初始数据对象
271
- * @returns {Object} 处理后的初始数据对象
272
- */
273
- getChosenInitData(obj) {
274
- obj = this.$utils.clone(obj, true);
275
- obj.id = this.getUniqueId(obj.type);
276
- this.setChosenId(obj.id);
277
- let delkeyArr = ['isForm', 'canAddDataTableQuery', 'canAddDataTableList', 'addToPanel', 'active'];
278
- let delkey = (key) => {
279
- delete obj[key];
280
- }
281
- delkeyArr.forEach(e => {
282
- delkey(e);
283
- });
284
- return obj;
285
- }
286
- /**
287
- * 生成唯一的ID
288
- * @param {String} prefix ID前缀
289
- * @returns {String} 唯一的ID
290
- */
291
- getUniqueId(prefix) {
292
- return prefix + '_' + Math.floor(new Date().getTime() % 100000) + "" + this.$utils.uniqueId();
293
- }
294
- /**
295
- * 获取组件列表
296
- * @returns {Array} 组件列表
297
- */
298
- getWidgetList() {
299
- return this.widgetConfig.widgetList;
300
- }
301
- /**
302
- * 获取组件配置
303
- * @returns {Object} 组件配置对象
304
- */
305
- getWidgetConfig() {
306
- return this.widgetConfig;
307
- }
308
- /**
309
- * 更新组件配置
310
- * @param {Object} config 新的组件配置
311
- */
312
- updateWidgetConfig(config) {
313
- this.widgetConfig = config;
314
- }
315
- /**
316
- * 根据组件ID查找其父组件
317
- * @param {String} id 组件ID
318
- * @returns {Object|null} 父组件对象或null(如果未找到)
319
- */
320
- getParentWidgetById(id) {
321
- function recurse(items) {
322
- for (const item of items) {
323
- if (item.id === id) {
324
- let index = items.findIndex(e => e.id === id);
325
- return {
326
- widgetList: items,
327
- index: index
328
- };
329
- }
330
- if (item.widgetList && item.widgetList.length > 0) {
331
- const activeItem = recurse(item.widgetList);
332
- if (activeItem) {
333
- return activeItem;
334
- }
335
- }
336
- }
337
- return null;
338
- }
339
- return recurse(this.widgetConfig.widgetList);
340
- }
341
- }
342
- export default Designer;
@@ -1,292 +0,0 @@
1
- import axios from 'axios'
2
- import qs from 'qs'
3
- import {
4
- ElNotification
5
- } from 'element-plus'
6
- /**
7
- * Http类用于封装HTTP请求
8
- * 提供了多种请求方法,如GET、POST、PUT、DELETE等
9
- * 支持设置基础URL、请求头、超时时间等选项
10
- * 可以自定义请求成功和失败的处理函数
11
- */
12
- class Http {
13
- /**
14
- * 构造函数初始化Http对象
15
- * @param {Object} options 配置选项,包括baseUrl、headers、timeout、httpSuccessHandle、httpErrorHandle、httpBeforeSendHandle
16
- */
17
- constructor({
18
- baseUrl = "",
19
- headers = {},
20
- timeout = 1000000,
21
- httpSuccessHandle = null,
22
- httpErrorHandle = null,
23
- httpBeforeSendHandle = null
24
- }) {
25
- this.options = {
26
- baseUrl,
27
- headers,
28
- timeout,
29
- httpSuccessHandle,
30
- httpErrorHandle,
31
- httpBeforeSendHandle
32
- }
33
- // 定义不同Content-Type的headers
34
- this.formDataHeader = {
35
- 'Content-Type': 'application/x-www-form-urlencoded'
36
- }
37
- this.formFileHeader = {
38
- 'Content-Type': 'multipart/form-data'
39
- }
40
- this.jsonHeader = {
41
- 'Content-Type': 'application/json'
42
- }
43
- }
44
-
45
- /**
46
- * 处理请求参数
47
- * @param {any} data 请求参数
48
- * @returns 处理后的请求参数
49
- */
50
- paramHandle(data) {
51
- // 如果data是数组,直接返回
52
- if (data instanceof Array) {
53
- return data;
54
- }
55
- // 如果data不是对象,直接返回
56
- if (typeof data !== 'object') {
57
- return data
58
- }
59
- // 如果data存在,返回合并后的对象
60
- if (data) {
61
- return Object.assign({}, this.httpBeforeSendHandle ? this.httpBeforeSendHandle() || {} : {}, data)
62
- } else {
63
- // 如果data不存在,仅返回httpBeforeSendHandle处理的结果
64
- return this.httpBeforeSendHandle()
65
- }
66
- }
67
-
68
- /**
69
- * 发送请求
70
- * @param {Object} config 请求配置,包括url、method、params、data、headers等
71
- * @returns 返回axios发送请求的Promise
72
- */
73
- send(config) {
74
- // 创建axios实例
75
- const api = axios.create({
76
- baseURL: this.options.baseUrl,
77
- timeout: this.options.timeout,
78
- responseType: 'json'
79
- })
80
- // 请求拦截器,设置请求头
81
- api.interceptors.request.use(
82
- request => {
83
- if (this.options.headers) {
84
- for (var key in this.options.headers) {
85
- request.headers[key] = headers[key]
86
- }
87
- }
88
- return request
89
- }
90
- )
91
- // 响应拦截器,处理请求成功和失败的情况
92
- api.interceptors.response.use(
93
- response => {
94
- if (this.options.httpSuccessHandle) {
95
- this.options.httpSuccessHandle(response.data)
96
- }
97
- return Promise.resolve(response.data)
98
- },
99
- error => {
100
- if (this.options.httpErrorHandle) {
101
- this.options.httpErrorHandle(error)
102
- }
103
- ElNotification({
104
- title: '消息',
105
- message: '数据请求失败',
106
- type: 'error'
107
- })
108
- return Promise.reject(error)
109
- }
110
- )
111
- // 发送请求
112
- return api(config)
113
- }
114
-
115
- /**
116
- * 发送GET请求
117
- * @param {string} url 请求URL
118
- * @param {any} data 请求参数
119
- * @param {Object} headers 请求头
120
- * @returns 返回发送GET请求的Promise
121
- */
122
- get(url, data, headers) { //get请求
123
- return this.send({
124
- url: url,
125
- method: 'get',
126
- params: this.paramHandle(data),
127
- headers: headers
128
- })
129
- }
130
-
131
- /**
132
- * 发送GET请求,返回Blob类型数据
133
- * @param {string} url 请求URL
134
- * @param {any} data 请求参数
135
- * @param {Object} headers 请求头
136
- * @returns 返回发送GET请求的Promise
137
- */
138
- getBlob(url, data, headers) { //get请求
139
- return this.send({
140
- url: url,
141
- method: 'get',
142
- responseType: 'blob',
143
- params: this.paramHandle(data),
144
- headers: headers
145
- })
146
- }
147
-
148
- /**
149
- * 发送POST请求
150
- * @param {string} url 请求URL
151
- * @param {any} data 请求参数
152
- * @param {Object} headers 请求头
153
- * @returns 返回发送POST请求的Promise
154
- */
155
- post(url, data, headers = {}) { //post请求
156
- return this.send({
157
- url: url,
158
- method: 'post',
159
- data: this.paramHandle(data),
160
- headers: {
161
- ...headers,
162
- ...this.jsonHeader
163
- }
164
- })
165
- }
166
-
167
- /**
168
- * 发送PUT请求
169
- * @param {string} url 请求URL
170
- * @param {any} data 请求参数
171
- * @param {Object} headers 请求头
172
- * @returns 返回发送PUT请求的Promise
173
- */
174
- put(url, data, headers) { //put请求
175
- return this.send({
176
- url: url,
177
- method: 'put',
178
- data: this.paramHandle(data),
179
- headers: headers
180
- })
181
- }
182
-
183
- /**
184
- * 发送PATCH请求
185
- * @param {string} url 请求URL
186
- * @param {any} data 请求参数
187
- * @param {Object} headers 请求头
188
- * @returns 返回发送PATCH请求的Promise
189
- */
190
- patch(url, data, headers) { //patch请求
191
- return this.send({
192
- url: url,
193
- method: 'patch',
194
- data: this.paramHandle(data),
195
- headers: headers
196
- })
197
- }
198
-
199
- /**
200
- * 发送DELETE请求
201
- * @param {string} url 请求URL
202
- * @param {any} data 请求参数
203
- * @param {Object} headers 请求头
204
- * @returns 返回发送DELETE请求的Promise
205
- */
206
- delete(url, data, headers) { //delete请求
207
- return this.send({
208
- url: url,
209
- method: 'delete',
210
- params: this.paramHandle(data),
211
- headers: headers
212
- })
213
- }
214
-
215
- /**
216
- * 发送使用FormData的POST请求
217
- * @param {string} url 请求URL
218
- * @param {any} data 请求参数
219
- * @param {Object} headers 请求头
220
- * @returns 返回发送POST请求的Promise
221
- */
222
- postFormData(url, data, headers) { //formdata的post请求
223
- return this.send({
224
- url: url,
225
- method: 'post',
226
- data: qs.stringify(this.paramHandle(data)),
227
- headers: {
228
- ...this.formDataHeader,
229
- ...headers
230
- }
231
- })
232
- }
233
-
234
- /**
235
- * 发送上传文件的POST请求
236
- * @param {string} url 请求URL
237
- * @param {any} data 请求参数
238
- * @param {Object} headers 请求头
239
- * @returns 返回发送POST请求的Promise
240
- */
241
- postFile(url, data, headers) { //formdata的post请求
242
- return this.send({
243
- url: url,
244
- method: 'post',
245
- data: data,
246
- headers: {
247
- ...this.formDataHeader,
248
- ...headers
249
- }
250
- })
251
- }
252
-
253
- /**
254
- * 发送使用FormData的PUT请求
255
- * @param {string} url 请求URL
256
- * @param {any} data 请求参数
257
- * @param {Object} headers 请求头
258
- * @returns 返回发送PUT请求的Promise
259
- */
260
- putFormData(url, data, headers) { //formdata的put请求
261
- return this.send({
262
- url: url,
263
- method: 'put',
264
- data: qs.stringify(this.paramHandle(data)),
265
- headers: {
266
- ...this.formDataHeader,
267
- ...headers
268
- }
269
- })
270
- }
271
-
272
- /**
273
- * 发送使用FormData的PATCH请求
274
- * @param {string} url 请求URL
275
- * @param {any} data 请求参数
276
- * @param {Object} headers 请求头
277
- * @returns 返回发送PATCH请求的Promise
278
- */
279
- patchFormData(url, data, headers) { //formdata的patch请求
280
- return this.send({
281
- url: url,
282
- method: 'patch',
283
- data: qs.stringify(this.paramHandle(data)),
284
- headers: {
285
- ...this.formDataHeader,
286
- ...headers
287
- }
288
- })
289
- }
290
-
291
- }
292
- export default Http