lw-cdp-ui 1.0.39 → 1.0.41

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 (9) hide show
  1. package/dist/components/lwEditor/index.vue +40 -116
  2. package/dist/components/lwForm/index.vue +168 -59
  3. package/dist/components/lwUpload/index.vue +2 -2
  4. package/dist/lw-cdp-ui.esm.js +1867 -1697
  5. package/dist/lw-cdp-ui.esm.js.map +1 -1
  6. package/dist/lw-cdp-ui.umd.js +9 -9
  7. package/dist/lw-cdp-ui.umd.js.map +1 -1
  8. package/dist/style.css +1 -1
  9. package/package.json +5 -5
package/dist/components/lwEditor/index.vue CHANGED
@@ -1,134 +1,58 @@
1
-
2
1
  <template>
3
- <div class="sceditor">
4
- <Editor v-model="contentValue"
5
- :init="init"
6
- :disabled="disabled"
7
- :placeholder="placeholder"
8
- @onClick="onClick" />
9
- </div>
2
+ <div ref="divRef"
3
+ class="lw-editor-body"
4
+ :style="{height: height}"></div>
10
5
  </template>
11
6
 
12
7
  <script>
13
- import Editor from '@tinymce/tinymce-vue'
14
- import tinymce from 'tinymce/tinymce'
15
- import 'tinymce/themes/silver'
16
- import 'tinymce/icons/default'
17
- import 'tinymce/models/dom'
18
-
19
- // 引入编辑器插件
20
- import 'tinymce/plugins/code' //编辑源码
21
- import 'tinymce/plugins/image' //插入编辑图片
22
- import 'tinymce/plugins/media' //插入视频
23
- import 'tinymce/plugins/link' //超链接
24
- import 'tinymce/plugins/preview'//预览
25
- import 'tinymce/plugins/template'//模板
26
- import 'tinymce/plugins/table' //表格
27
- import 'tinymce/plugins/pagebreak' //分页
28
- import 'tinymce/plugins/lists' //列
29
- import 'tinymce/plugins/advlist' //列
30
- import 'tinymce/plugins/quickbars' //快速工具条
31
- import 'tinymce/plugins/fullscreen' //全屏
32
-
8
+ import { AiEditor } from "aieditor";
9
+ import "aieditor/dist/style.css";
33
10
  export default {
34
- components: {
35
- Editor
11
+ name: 'lwEditor',
12
+ data() {
13
+ return {
14
+ defaultValue: ''
15
+ }
36
16
  },
37
17
  props: {
38
18
  modelValue: {
19
+ type: Object,
20
+ required: true,
21
+ },
22
+ height: {
39
23
  type: String,
40
- default: ""
24
+ default: '300px'
41
25
  },
42
26
  placeholder: {
43
27
  type: String,
44
- default: ""
45
- },
46
- height: {
47
- type: Number,
48
- default: 300,
49
- },
50
- disabled: {
51
- type: Boolean,
52
- default: false
53
- },
54
- plugins: {
55
- type: [String, Array],
56
- default: 'code image media link preview table quickbars template pagebreak lists advlist fullscreen'
57
- },
58
- toolbar: {
59
- type: [String, Array],
60
- default: 'fullscreen undo redo | forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
61
- alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
62
- image media table template preview | code selectall'
63
- },
64
- templates: {
65
- type: Array,
66
- default: () => []
28
+ default: '点击输入内容...'
67
29
  }
68
30
  },
69
- data() {
70
- return {
71
- init: {
72
- language_url: 'tinymce/langs/zh_CN.js',
73
- language: 'zh_CN',
74
- skin_url: 'tinymce/skins/ui/oxide',
75
- content_css: "tinymce/skins/content/default/content.css",
76
- menubar: false,
77
- statusbar: true,
78
- plugins: this.plugins,
79
- toolbar: this.toolbar,
80
- font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
81
- height: this.height,
82
- placeholder: this.placeholder,
83
- branding: false,
84
- resize: true,
85
- elementpath: true,
86
- content_style: "",
87
- templates: this.templates,
88
- quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
89
- quickbars_image_toolbar: 'alignleft aligncenter alignright',
90
- quickbars_insert_toolbar: false,
91
- image_caption: true,
92
- image_advtab: true,
93
- images_upload_handler: function (blobInfo) {
94
- return new Promise((resolve, reject) => {
95
- const data = new FormData();
96
- data.append("file", blobInfo.blob(), blobInfo.filename());
97
- this.$api.auth.upload(data).then((res) => {
98
- resolve(`${res.data.loca}${res.data.path}`)
99
- }).catch(() => {
100
- reject("Image upload failed")
101
- })
102
- })
31
+ mounted() {
32
+ let _this = this;
33
+ new AiEditor({
34
+ element: this.$refs.divRef,
35
+ content: _this.modelValue,
36
+ placeholder: _this.placeholder,
37
+ ai: {
38
+ models: {
39
+ spark: {
40
+ appId: "a58e8b6b",
41
+ apiKey: "3259c84cd549457ffd751aa0ae4479ed",
42
+ apiSecret: "YmU2YzdhMTI1MjYxZjY3M2MyN2ZlZjZh",
43
+ version: "v3.5" //支持 v2.1 v3.1 v3.5
44
+ }
103
45
  },
104
- setup: function (editor) {
105
- editor.on('init', function () {
106
- this.getBody().style.fontSize = '14px';
107
- })
108
-
109
- }
110
46
  },
111
- contentValue: this.modelValue
112
- }
113
- },
114
- watch: {
115
- modelValue(val) {
116
- this.contentValue = val
117
- },
118
- contentValue(val) {
119
- this.$emit('update:modelValue', val);
120
- }
121
- },
122
- mounted() {
123
- tinymce.init({})
47
+ onChange: (aiEditor) => {
48
+ _this.$emit("update:modelValue", aiEditor.getHtml())
49
+ },
50
+ });
124
51
  },
125
- methods: {
126
- onClick(e) {
127
- this.$emit('onClick', e, tinymce)
128
- }
129
- }
130
- }
52
+ };
131
53
  </script>
132
-
133
- <style>
134
- </style>
54
+ <style lang="scss" scoped>
55
+ .lw-editor-body {
56
+ height: 300px;
57
+ }
58
+ </style>
package/dist/components/lwForm/index.vue CHANGED
@@ -25,22 +25,42 @@
25
25
  </template>
26
26
  <!-- input -->
27
27
  <template v-if="item.component=='input'">
28
- <el-input v-model="form[item.name]"
29
- :placeholder="item.options.placeholder"
30
- clearable
31
- :type="item.options.type"
32
- :disabled="item.options.disabled"
33
- :maxlength="item.options.maxlength"
34
- show-word-limit></el-input>
28
+ <template v-if="item?.options?.name">
29
+ <el-input v-model="form[item.name][item.options.name]"
30
+ :placeholder="item.options.placeholder"
31
+ clearable
32
+ :type="item.options.type"
33
+ :disabled="item.options.disabled"
34
+ :maxlength="item.options.maxlength"
35
+ show-word-limit></el-input>
36
+ </template>
37
+ <template v-else>
38
+ <el-input v-model="form[item.name]"
39
+ :placeholder="item.options.placeholder"
40
+ clearable
41
+ :type="item.options.type"
42
+ :disabled="item.options.disabled"
43
+ :maxlength="item.options.maxlength"
44
+ show-word-limit></el-input>
45
+ </template>
35
46
  </template>
36
47
  <!-- upload -->
37
48
  <template v-else-if="item.component=='upload'">
38
49
  <el-col v-for="(_item, _index) in item.options.items"
39
50
  :key="_index">
40
- <el-form-item :prop="_item.name">
41
- <lw-upload v-model="form[_item.name]"
42
- :title="_item.label"></lw-upload>
43
- </el-form-item>
51
+ <template v-if="item.name">
52
+ <el-form-item :prop="_item.name">
53
+ <lw-upload v-model="form[item.name][_item.name]"
54
+ :title="_item.label"></lw-upload>
55
+ </el-form-item>
56
+ </template>
57
+ <template v-else>
58
+ <el-form-item :prop="_item.name">
59
+ <lw-upload v-model="form[_item.name]"
60
+ :title="_item.label"></lw-upload>
61
+ </el-form-item>
62
+ </template>
63
+
44
64
  </el-col>
45
65
  </template>
46
66
  <!-- checkbox -->
@@ -66,83 +86,163 @@
66
86
  :label="_item.value">{{_item.label}}</el-checkbox>
67
87
  </el-checkbox-group>
68
88
  </template>
69
- <!-- upload -->
70
- <template v-else-if="item.component=='upload'">
71
- <el-col v-for="(_item, _index) in item.options.items"
72
- :key="_index">
73
- <el-form-item :prop="_item.name">
74
- <sc-upload v-model="form[_item.name]"
75
- :title="_item.label"></sc-upload>
76
- </el-form-item>
77
- </el-col>
78
- </template>
89
+
79
90
  <!-- switch -->
80
91
  <template v-else-if="item.component=='switch'">
81
- <el-switch v-model="form[item.name]" />
92
+ <template v-if="item?.options?.name">
93
+ <el-switch v-model="form[item.name][item.options.name]" />
94
+ </template>
95
+ <template v-else>
96
+ <el-switch v-model="form[item.name]" />
97
+ </template>
82
98
  </template>
83
99
  <!-- select -->
84
100
  <template v-else-if="item.component=='select'">
85
- <el-select v-model="form[item.name]"
86
- :multiple="item.options.multiple"
87
- :placeholder="item.options.placeholder"
88
- clearable
89
- filterable
90
- style="width: 100%;">
91
- <el-option v-for="option in item.options.items"
92
- :key="option.value"
93
- :label="option.label"
94
- :value="option.value"></el-option>
95
- </el-select>
101
+ <template v-if="item?.options?.name">
102
+ <el-select v-model="form[item.name][item.options.name]"
103
+ :multiple="item.options?.multiple"
104
+ :allow-create="item.options?.allowCreate"
105
+ default-first-option
106
+ :placeholder="item.options?.placeholder || ''"
107
+ clearable
108
+ filterable
109
+ style="width: 100%;">
110
+ <el-option v-for="option in item.options.items"
111
+ :key="option.value"
112
+ :label="option.label"
113
+ :value="option.value"></el-option>
114
+ </el-select>
115
+ </template>
116
+ <template v-else>
117
+ <el-select v-model="form[item.name]"
118
+ :multiple="item.options?.multiple"
119
+ :allow-create="item.options?.allowCreate"
120
+ default-first-option
121
+ :placeholder="item.options?.placeholder || ''"
122
+ clearable
123
+ filterable
124
+ style="width: 100%;">
125
+ <el-option v-for="option in item.options.items"
126
+ :key="option.value"
127
+ :label="option.label"
128
+ :value="option.value"></el-option>
129
+ </el-select>
130
+ </template>
131
+
96
132
  </template>
97
133
  <!-- cascader -->
98
134
  <template v-else-if="item.component=='cascader'">
99
- <el-cascader v-model="form[item.name]"
100
- :options="item.options.items"
101
- clearable></el-cascader>
135
+ <template v-if="item?.options?.name">
136
+ <el-cascader v-model="form[item.name][item.options.name]"
137
+ :options="item.options.items"
138
+ clearable></el-cascader>
139
+ </template>
140
+ <template v-else>
141
+ <el-cascader v-model="form[item.name]"
142
+ :options="item.options.items"
143
+ clearable></el-cascader>
144
+ </template>
145
+
102
146
  </template>
103
147
  <!-- date -->
104
148
  <template v-else-if="item.component=='date'">
105
- <el-date-picker v-model="form[item.name]"
106
- style="width: 100%;"
107
- :type="item.options.type"
108
- :start-placeholder="item.options.startPlaceholder"
109
- :end-placeholder="item.options.endPlaceholder"
110
- :shortcuts="item.options.shortcuts"
111
- :default-time="item.options.defaultTime"
112
- :value-format="item.options.valueFormat"
113
- :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
149
+ <template v-if="item?.options?.name">
150
+ <el-date-picker v-model="form[item.name][item.options.name]"
151
+ style="width: 100%;"
152
+ :type="item.options.type"
153
+ :start-placeholder="item.options.startPlaceholder"
154
+ :end-placeholder="item.options.endPlaceholder"
155
+ :shortcuts="item.options.shortcuts"
156
+ :default-time="item.options.defaultTime"
157
+ :value-format="item.options.valueFormat"
158
+ :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
159
+ </template>
160
+ <template v-else>
161
+ <el-date-picker v-model="form[item.name]"
162
+ style="width: 100%;"
163
+ :type="item.options.type"
164
+ :start-placeholder="item.options.startPlaceholder"
165
+ :end-placeholder="item.options.endPlaceholder"
166
+ :shortcuts="item.options.shortcuts"
167
+ :default-time="item.options.defaultTime"
168
+ :value-format="item.options.valueFormat"
169
+ :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
170
+ </template>
171
+
114
172
  </template>
115
173
  <!-- number -->
116
174
  <template v-else-if="item.component=='number'">
117
- <el-input-number v-model="form[item.name]"
118
- v-bind="{
175
+ <template v-if="item?.options?.name">
176
+ <el-input-number v-model="form[item.name][item.options.name]"
177
+ v-bind="{
119
178
  min: item?.options?.min !== undefined ? item.options.min : null,
120
179
  max: item?.options?.max !== undefined ? item.options.max : null,
121
180
  placeholder: item?.options?.placeholder || ''
122
181
  }"
123
- controls-position="right"></el-input-number>
182
+ controls-position="right"></el-input-number>
183
+ </template>
184
+ <template v-else>
185
+ <el-input-number v-model="form[item.name]"
186
+ v-bind="{
187
+ min: item?.options?.min !== undefined ? item.options.min : null,
188
+ max: item?.options?.max !== undefined ? item.options.max : null,
189
+ placeholder: item?.options?.placeholder || ''
190
+ }"
191
+ controls-position="right"></el-input-number>
192
+ </template>
193
+
124
194
  </template>
125
195
  <!-- radio -->
126
196
  <template v-else-if="item.component=='radio'">
127
- <el-radio-group v-model="form[item.name]">
128
- <el-radio v-for="_item in item.options.items"
129
- :key="_item.value"
130
- :label="_item.value">{{_item.label}}</el-radio>
131
- </el-radio-group>
197
+ <template v-if="item?.options?.name">
198
+ <el-radio-group v-model="form[item.name][item.options.name]">
199
+ <el-radio v-for="_item in item.options.items"
200
+ :key="_item.value"
201
+ :label="_item.value">{{_item.label}}</el-radio>
202
+ </el-radio-group>
203
+ </template>
204
+ <template v-else>
205
+ <el-radio-group v-model="form[item.name]">
206
+ <el-radio v-for="_item in item.options.items"
207
+ :key="_item.value"
208
+ :label="_item.value">{{_item.label}}</el-radio>
209
+ </el-radio-group>
210
+ </template>
211
+
132
212
  </template>
133
213
  <!-- color -->
134
214
  <template v-else-if="item.component=='color'">
135
- <el-color-picker v-model="form[item.name]" />
215
+ <template v-if="item?.options?.name">
216
+ <el-color-picker v-model="form[item.name][item.options.name]" />
217
+ </template>
218
+ <template v-else>
219
+ <el-color-picker v-model="form[item.name]" />
220
+ </template>
221
+
136
222
  </template>
137
223
  <!-- rate -->
138
224
  <template v-else-if="item.component=='rate'">
139
- <el-rate style="margin-top: 6px;"
225
+ <template v-if="item?.options?.name">
226
+ <el-rate style="margin-top: 6px;"
227
+ v-model="form[item.name][item.options.name]"></el-rate>
228
+ </template>
229
+ <template v-else>
230
+ <el-rate style="margin-top: 6px;"
140
231
  v-model="form[item.name]"></el-rate>
232
+ </template>
233
+
141
234
  </template>
142
235
  <!-- slider -->
143
236
  <template v-else-if="item.component=='slider'">
144
- <el-slider v-model="form[item.name]"
237
+ <template v-if="item?.options?.name">
238
+ <el-slider v-model="form[item.name][item.options.name]"
145
239
  :marks="item.options.marks"></el-slider>
240
+ </template>
241
+ <template v-else>
242
+ <el-slider v-model="form[item.name]"
243
+ :marks="item.options.marks"></el-slider>
244
+ </template>
245
+
146
246
  </template>
147
247
  <!-- 没有组件是component值 就是插槽名称 -->
148
248
  <template v-else>
@@ -207,10 +307,19 @@ export default {
207
307
  },
208
308
  hasValue() {
209
309
  return Object.keys(this.modelValue).length > 0
310
+ },
311
+ computedModelValue: {
312
+ get() {
313
+ return item.name2 ? this.form[item.name][item.name2] : this.form[item.name];
314
+ },
315
+ set(value) {
316
+ if (item.name2) {
317
+ this.$set(this.form[item.name], item.name2, value);
318
+ } else {
319
+ this.$set(this.form, item.name, value);
320
+ }
321
+ }
210
322
  }
211
- },
212
- created() {
213
-
214
323
  },
215
324
  mounted() {
216
325
  if (this.hasConfig) {
package/dist/components/lwUpload/index.vue CHANGED
@@ -37,7 +37,7 @@
37
37
  <el-upload v-if="!file"
38
38
  class="uploader"
39
39
  ref="uploader"
40
- :auto-upload="cropper?false:autoUpload"
40
+ :auto-upload="autoUpload"
41
41
  :disabled="disabled"
42
42
  :show-file-list="showFileList"
43
43
  :action="action"
@@ -142,7 +142,7 @@ export default {
142
142
  if (files.length > 1) {
143
143
  files.splice(0, 1)
144
144
  }
145
- if (this.cropper && file.status == 'ready') {
145
+ if (file.status == 'ready') {
146
146
  const acceptIncludes = ["image/gif", "image/jpeg", "image/png"].includes(file.raw.type)
147
147
  if (!acceptIncludes) {
148
148
  this.$notify.warning({