askbot-dragon 0.6.15 → 0.6.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 (5) hide show
  1. package/package.json +3 -1
  2. package/src/components/ConversationContainer.vue +79 -5
  3. package/src/components/formTemplate.vue +370 -351
  4. package/src/components/utils/ckeditor.js +124 -0
  5. package/src/main.js +2 -1
package/package.json CHANGED
@@ -1,12 +1,14 @@
1
1
  {
2
2
  "name": "askbot-dragon",
3
- "version": "0.6.15",
3
+ "version": "0.6.19",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
7
7
  "lint": "vue-cli-service lint"
8
8
  },
9
9
  "dependencies": {
10
+ "@ckeditor/ckeditor5-build-classic": "^29.2.0",
11
+ "@ckeditor/ckeditor5-vue": "^1.0.3",
10
12
  "ali-oss": "^6.2.1",
11
13
  "core-js": "^3.6.5",
12
14
  "element-ui": "^2.13.2",
package/src/components/ConversationContainer.vue CHANGED
@@ -891,6 +891,46 @@ export default {
891
891
  required: true,
892
892
  value: null,
893
893
  },
894
+ {
895
+ display: true,
896
+ fieldId: "workorder_description",
897
+ formField: {
898
+ createTime: null,
899
+ updateTime: "2020-12-10T16:12:33.544",
900
+ id: "5fd1d87127d6601a879b49bbcccc",
901
+ name: "工单描述",
902
+ description: "",
903
+ type: "TEXTAREA",
904
+ operatorId: "12",
905
+ mainId: "6cdfcac6a7d611eabdcd506b4b2f3acccc",
906
+ searchable: true,
907
+ extInfo:null
908
+ },
909
+ width: 0,
910
+ required: true,
911
+ value: null,
912
+ },
913
+ {
914
+ display: true,
915
+ fieldId: "workorder_clientId",
916
+ formField: {
917
+ createTime: null,
918
+ updateTime: "2020-12-10T16:12:33.544",
919
+ id: "5fd1d87127d6601a879b49bbccccd'd",
920
+ name: "客户",
921
+ description: "",
922
+ type: "SELECT",
923
+ operatorId: "12",
924
+ mainId: "6cdfcac6a7d611eabdcd506b4b2f3acccc",
925
+ searchable: true,
926
+ extInfo:{
927
+ options:[]
928
+ }
929
+ },
930
+ width: 0,
931
+ required: true,
932
+ value: null,
933
+ },
894
934
  {
895
935
  display: true,
896
936
  fieldId: "5fd1d87127d6601a879b49bbccc",
@@ -929,6 +969,7 @@ export default {
929
969
  label: "飒飒"
930
970
  },
931
971
  ],
972
+ placeholder:'请选择级联'
932
973
 
933
974
  },
934
975
  },
@@ -990,6 +1031,7 @@ export default {
990
1031
  { value: "chifan", label: "吃饭", _default: "false" },
991
1032
  { value: "shuijiao", label: "睡觉", _default: "true" },
992
1033
  ],
1034
+ placeholder:'请选择下拉'
993
1035
  },
994
1036
  },
995
1037
  width: 0,
@@ -1092,7 +1134,7 @@ export default {
1092
1134
  extInfo:{
1093
1135
  isDelete:true,
1094
1136
  visibleWithoutPermission:false,
1095
- url:""
1137
+ url:"https://www.runoob.com/tags/html-colorpicker.html"
1096
1138
  },
1097
1139
  name:'"说明文字"',
1098
1140
  type:'EXPLAIN'
@@ -1220,7 +1262,8 @@ export default {
1220
1262
  extInfo:{
1221
1263
  isDelete:true,
1222
1264
  visibleWithoutPermission:false,
1223
- mold:'DATA'
1265
+ mold:'DATA',
1266
+ placeholder:'请选择时间日期'
1224
1267
  },
1225
1268
  name:'时间日期',
1226
1269
  type:'TIME_PICKER'
@@ -1236,7 +1279,8 @@ export default {
1236
1279
  extInfo:{
1237
1280
  isDelete:true,
1238
1281
  visibleWithoutPermission:false,
1239
- mold:'DATA_TIME'
1282
+ mold:'DATA_TIME',
1283
+ placeholder:'请选择'
1240
1284
  },
1241
1285
  name:'时间日期',
1242
1286
  type:'TIME_PICKER'
@@ -1255,8 +1299,38 @@ export default {
1255
1299
  paramName:"name",
1256
1300
  required:true,
1257
1301
  value:''
1258
- }
1259
-
1302
+ },
1303
+ {
1304
+ display:true,
1305
+ fieldId: "ef91e955bf894886b9edc56eb2c3755S333",
1306
+ formField:{
1307
+ extInfo:{
1308
+ isDelete:true,
1309
+ visibleWithoutPermission:false,
1310
+ maxNum:"3"
1311
+ },
1312
+ name:'单行输入框',
1313
+ type:'INPUT'
1314
+ },
1315
+ paramName:"fieldValue.1adcfd3d0c494dcaba5c469ee8252e3f3333",
1316
+ required:false,
1317
+ value:''
1318
+ },
1319
+ {
1320
+ display:true,
1321
+ fieldId: "ef91e955bf894886b9edc56eb2c3755S444",
1322
+ formField:{
1323
+ extInfo:{
1324
+ isDelete:true,
1325
+ visibleWithoutPermission:false,
1326
+ },
1327
+ name:'多行输入框',
1328
+ type:'TEXTAREA'
1329
+ },
1330
+ paramName:"fieldValue.1adcfd3d0c494dcaba5c469ee8252e3f3444",
1331
+ required:false,
1332
+ value:''
1333
+ },
1260
1334
 
1261
1335
  ],
1262
1336
  },
package/src/components/formTemplate.vue CHANGED
@@ -1,197 +1,161 @@
1
1
  <template>
2
2
  <div class="media-body">
3
- <div class="formClass" :class="{remPhoneClassForm:isPhone,remCompanyClassForm:isCompany}" v-if="formShow.form">
3
+ <div class="formClass" :class="isPhone?'remPhoneClassForm':'remCompanyClassForm'" v-if="formShow.form">
4
4
  <div class="titleName" >
5
5
  {{formShow.form.name}}
6
6
  </div>
7
- <div class="pcFormClass" v-if="isCompany===true" style="width: 300px;margin: 0 auto;">
8
- <div v-for="(item) in formShow.form.formFieldRelation" :key="item.formField.id" :class="{notClick:disableds === true}" >
9
- <div v-if="item.formField.type==='INPUT'&& item.display===true&&item.fieldId!=='workorder_name'" style="border-bottom: 1px solid #ebebeb">
10
- <div style="display: flex;padding: 4px 0">
11
- <div style="flex: 0.25;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
12
- <div style="flex: 0.75;display:flex;align-items: center;">
13
- <el-input v-model=item.value placeholder="请输入内容"></el-input>
14
- </div>
15
- </div>
16
- </div>
17
- <div v-if="item.formField.type==='EXPLANATION'" style="border-bottom: 1px solid #ebebeb">
18
- <div style="display: flex;padding: 4px 0">
19
- <p style="color: #4C61E1;font-size: 14px;margin: 16px 4px">
20
- <span class="el-icon-info"></span>
21
- {{item.formField.extInfo.descriptionText}}
22
- </p>
7
+ <div class="pcFormClass" v-if="isCompany===true">
8
+ <div v-for="(item) in formShow.form.formFieldRelation"
9
+ :key="item.formField.id"
10
+ :class="{notClick:disableds === true}"
11
+ >
12
+ <div v-if="item.formField.type!=='CHAT_RECORD'&&item.formField.type!=='CHANNEL'&&item.display&&item.fieldId!=='workorder_name'" class="field-item">
13
+ <div v-if="item.display&&item.fieldId!=='workorder_name'&&item.formField.type!=='EXPLANATION'&&item.formField.type!=='EXPLAIN'" class="field-item-name">
14
+ <span style="color: red" v-if="item.required===true">*</span>
15
+ <span v-if="item.fieldId!=='workorder_description'&&item.fieldId!=='workorder_clientId'">{{item.formField.name}}</span>
16
+ <span v-if="item.fieldId==='workorder_description'">问题描述</span>
17
+ <span v-if="item.fieldId==='workorder_clientId'">报单人</span>
23
18
  </div>
24
- </div>
25
- <div v-if="item.formField.type==='EXPLAIN'" style="border-bottom: 1px solid #ebebeb">
26
- <div style="display: flex;padding: 4px 0">
27
- <p style="color: #4C61E1;font-size: 14px;margin: 16px 4px">
28
- <span class="el-icon-info"></span>
29
- <span v-if="item.formField.extInfo.url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
30
- <span>{{item.value}}</span>
31
- </p>
32
- </div>
33
- </div>
34
- <!--<div v-if="item.formField.type==='CHAT_RECORD'" style="border-bottom: 1px solid #ebebeb">
35
- <div style="display: flex;padding: 4px 0;justify-content: center">
36
- <p style="color: #4C61E1;font-size: 14px;margin: 16px 4px">
37
- 查看报单人与机器人聊天记录
38
- </p>
19
+ <el-input v-model=item.value
20
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
21
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
22
+ v-if="item.formField.type==='INPUT'&&item.fieldId!=='workorder_name'"
23
+ ></el-input>
24
+ <div v-if="item.formField.type==='EXPLANATION'">
25
+ <div style="display: flex;padding: 4px 0">
26
+ <p style="color: #4C61E1;font-size: 14px;margin: 10px 4px">
27
+ <span class="el-icon-info"></span>
28
+ {{item.formField.extInfo.descriptionText}}
29
+ </p>
30
+ </div>
39
31
  </div>
40
- </div>-->
41
- <div v-if="item.formField.type==='TEXTAREA'&& item.display===true" style="border-bottom: 1px solid #ebebeb">
42
- <div style="display: flex;padding: 4px 0">
43
- <div style="flex: 0.25;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
44
- <div style="flex: 0.75;display:flex;align-items: center;">
45
- <el-input type="textarea" :rows="2" v-model=item.value placeholder="请输入内容"></el-input>
32
+ <div v-if="item.formField.type==='EXPLAIN'">
33
+ <div style="display: flex;padding: 4px 0">
34
+ <p style="color: #4C61E1;font-size: 14px;margin: 10px 4px">
35
+ <span class="el-icon-info"></span>
36
+ <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
37
+ <span v-else>{{item.value}}</span>
38
+ </p>
46
39
  </div>
47
-
48
40
  </div>
49
- </div>
50
- <div v-if="item.formField.type==='DATE_PICKER'&& item.display===true" style="border-bottom: 1px solid #ebebeb">
51
-
52
- <div style="display: flex;padding: 4px 0">
53
- <div style="flex: 0.25;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
54
- <div style="flex: 0.75;display:flex;align-items: center;">
55
- <el-date-picker
41
+ <el-input type="textarea" :rows="2" v-model=item.value
42
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
43
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
44
+ v-if="item.formField.type==='TEXTAREA'&& item.display&&item.fieldId!=='workorder_description'"
45
+ ></el-input>
46
+ <ckeditor
47
+ :editor="ckeditor.editor"
48
+ v-model="item.value"
49
+ :config="ckeditor.editorConfig"
50
+ v-else-if="item.display&&item.fieldId==='workorder_description'"
51
+ ></ckeditor>
52
+ <el-date-picker
56
53
  v-model=item.value
57
54
  type="date"
58
- placeholder="选择日期"
55
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
59
56
  style="width: 100%"
60
- >
61
- </el-date-picker>
62
- </div>
63
- </div>
64
-
65
- </div>
66
- <div v-if="item.formField.type==='TIME_PICKER' && item.display===true" style="border-bottom: 1px solid #ebebeb">
67
- <div style="display: flex;padding: 4px 0">
68
- <div style="flex: 0.25;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red;" v-if="item.required===true">*</span>{{item.formField.name}}</div>
69
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="!item.formField.extInfo.mold">
70
- <el-time-picker
57
+ v-if="item.formField.type==='DATE_PICKER'"
58
+ >
59
+ </el-date-picker>
60
+ <el-time-picker
71
61
  v-model=item.value
72
- placeholder="选择时间"
62
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
73
63
  style="width: 100%"
74
- >
75
- </el-time-picker>
76
- </div>
77
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="item.formField.extInfo.mold==='DATA'">
78
- <el-date-picker
79
- v-model=item.value
80
- type="date"
81
- placeholder="请选择日期"
82
- >
83
- </el-date-picker>
84
- </div>
85
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="item.formField.extInfo.mold==='DATA_TIME'">
86
- <el-date-picker
87
- v-model=item.value
88
- placeholder="请选择日期时间"
89
- clearable
90
- type="datetime"
91
- >
92
- </el-date-picker>
93
- </div>
64
+ v-if="item.formField.type==='TIME_PICKER' && !item.formField.extInfo.mold"
65
+ >
66
+ </el-time-picker>
67
+ <el-date-picker
68
+ v-model=item.value
69
+ type="date"
70
+ style="width: 100%"
71
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
72
+ v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA'"
73
+ >
74
+ </el-date-picker>
75
+ <el-date-picker
76
+ v-model=item.value
77
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期时间'"
78
+ clearable
79
+ style="width: 100%"
80
+ type="datetime"
81
+ v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA_TIME'"
82
+ >
83
+ </el-date-picker>
84
+ <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.options">
85
+ <el-radio-group v-model=item.value style="text-align:left">
86
+ <el-radio v-for="(items,index) in item.formField.extInfo.options" :label=items.value :key="index">{{items.label}}</el-radio>
87
+ </el-radio-group>
94
88
  </div>
95
- </div>
96
- <div v-if="item.formField.type==='RADIO' && item.display===true" style="border-bottom: 1px solid #ebebeb">
97
- <div style="display: flex;padding: 4px 0">
98
- <div style="flex: 0.25 ;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
99
- <div style="flex: 0.75;display:flex;align-items: center" v-if="item.formField.extInfo.option">
100
- <el-radio-group v-model=item.value style="text-align:left">
101
- <el-radio v-for="(items,index) in item.formField.extInfo.option" :label=items.value :key="index">{{items.label}}</el-radio>
102
- </el-radio-group>
103
- </div>
104
- <div style="flex: 0.75;display:flex;align-items: center" v-if="item.formField.extInfo.options">
105
- <el-radio-group v-model=item.value style="text-align:left">
106
- <el-radio v-for="(items,index) in item.formField.extInfo.options" :label=items.value :key="index">{{items.label}}</el-radio>
107
- </el-radio-group>
108
- </div>
89
+ <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.option">
90
+ <el-radio-group v-model=item.value style="text-align:left">
91
+ <el-radio v-for="(items,index) in item.formField.extInfo.option" :label=items.value :key="index">{{items.label}}</el-radio>
92
+ </el-radio-group>
109
93
  </div>
110
-
111
-
112
- </div>
113
- <div v-if="item.formField.type==='CHECKBOX' && item.display===true" style="border-bottom: 1px solid #ebebeb">
114
- <div style="display: flex;padding: 4px 0">
115
- <div style="flex: 0.25 ;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
116
- <div style="flex: 0.75;display:flex;align-items: center" v-if="item.formField.extInfo.option">
117
- <el-checkbox-group v-model=item.value style="text-align:left">
118
- <el-checkbox
119
- v-for="(items,index) in item.formField.extInfo.option"
120
- :label=items.value
121
- :key="index"
122
- >{{items.label}}</el-checkbox>
123
- </el-checkbox-group>
124
- </div>
125
- <div style="flex: 0.75;display:flex;align-items: center" v-if="item.formField.extInfo.options">
126
- <el-checkbox-group v-model=item.value style="text-align:left">
127
- <el-checkbox
128
- v-for="(items,index) in item.formField.extInfo.options"
129
- :label=items.value
130
- :key="index"
131
- >{{items.label}}</el-checkbox>
132
- </el-checkbox-group>
133
- </div>
94
+ <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.option">
95
+ <el-checkbox-group v-model=item.value style="text-align:left">
96
+ <el-checkbox
97
+ v-for="(items,index) in item.formField.extInfo.option"
98
+ :label=items.value
99
+ :key="index"
100
+ >{{items.label}}</el-checkbox>
101
+ </el-checkbox-group>
134
102
  </div>
135
-
136
- </div>
137
- <div v-if="item.formField.type==='SELECT' && item.display===true" style="border-bottom: 1px solid #ebebeb">
138
- <div style="display: flex;padding:4px 0">
139
- <div style="flex: 0.25 ;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
140
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="item.formField.extInfo.option">
141
- <el-select
142
- v-model=item.value
143
- placeholder="请选择"
144
- style="width: 100%"
145
- filterable
146
- >
147
- <el-option
148
- v-for="(items,index) in item.formField.extInfo.option"
149
- :key="index"
150
- :label="items.label"
151
- :value="items.value">
152
- </el-option>
153
- </el-select>
154
- </div>
155
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="item.formField.extInfo.options">
156
- <el-select
157
- v-model=item.value
158
- placeholder="请选择"
159
- style="width: 100%"
160
- filterable
161
- >
162
- <el-option
163
- v-for="(items,index) in item.formField.extInfo.options"
164
- :key="index"
165
- :label="items.label"
166
- :value="items.value">
167
- </el-option>
168
- </el-select>
169
- </div>
103
+ <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.options">
104
+ <el-checkbox-group v-model=item.value style="text-align:left">
105
+ <el-checkbox
106
+ v-for="(items,index) in item.formField.extInfo.options"
107
+ :label=items.value
108
+ :key="index"
109
+ >{{items.label}}</el-checkbox>
110
+ </el-checkbox-group>
170
111
  </div>
171
-
172
- </div>
173
- <div v-if="item.formField.type==='CASCADER' && item.display===true" style="border-bottom: 1px solid #ebebeb">
174
- <div style="display: flex;padding: 4px 0">
175
- <div style="flex: 0.25 ;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
176
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="item.formField.extInfo.cascade">
177
- <el-cascader
178
- v-model=item.value
179
- :options=item.formField.extInfo.cascade
180
- style="width: 100%;"
181
- ></el-cascader>
182
- </div>
183
- <div style="flex: 0.75;display:flex;align-items: center;" v-if="item.formField.extInfo.cascadeDown">
184
- <el-cascader
185
- v-model=item.value
186
- :options=item.formField.extInfo.cascadeDown[0].options
187
- style="width: 100%;"
188
- ></el-cascader>
189
- </div>
112
+ <div v-if="item.formField.type==='SELECT'">
113
+ <el-select
114
+ v-model=item.value
115
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
116
+ style="width: 100%"
117
+ filterable
118
+ v-if="item.formField.extInfo.option"
119
+ >
120
+ <el-option
121
+ v-for="(items,index) in item.formField.extInfo.option"
122
+ :key="index"
123
+ :label="items.label"
124
+ :value="items.value">
125
+ </el-option>
126
+ </el-select>
127
+ <el-select
128
+ v-model=item.value
129
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
130
+ style="width: 100%"
131
+ filterable
132
+ v-else-if="item.formField.extInfo.options"
133
+ >
134
+ <el-option
135
+ v-for="(items,index) in item.formField.extInfo.options"
136
+ :key="index"
137
+ :label="items.label"
138
+ :value="items.value">
139
+ </el-option>
140
+ </el-select>
190
141
  </div>
191
- </div>
192
- <div v-if="item.formField.type==='FILE' && item.display===true" style="border-bottom: 1px solid #ebebeb">
193
- <div style="display: flex;padding: 4px 0">
194
- <div style="flex: 0.25 ;display:flex;align-items: center;height: 40px;text-align: left"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
142
+ <div v-if="item.formField.type==='CASCADER'">
143
+ <el-cascader
144
+ v-model=item.value
145
+ :options=item.formField.extInfo.cascade
146
+ style="width: 100%;"
147
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
148
+ v-if="item.formField.extInfo.cascade"
149
+ ></el-cascader>
150
+ <el-cascader
151
+ v-model=item.value
152
+ :options=item.formField.extInfo.cascadeDown[0].options
153
+ style="width: 100%;"
154
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
155
+ v-else-if="item.formField.extInfo.cascadeDown"
156
+ ></el-cascader>
157
+ </div>
158
+ <div v-if="item.formField.type==='FILE'">
195
159
  <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" @mouseover="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" style="flex: 0.75;display:flex;align-items: center;">
196
160
  <el-upload
197
161
  class="upload-demo"
@@ -213,74 +177,80 @@
213
177
  <i class="el-icon-plus"></i>
214
178
  </el-upload>
215
179
  </div>
216
-
217
180
  </div>
218
181
  </div>
219
182
  </div>
220
- <div style="padding: 10px 0;text-align: center">
221
- <el-button style="border-color: #4C61E1;color: white;background-color: #4C61E1" round class="submitClass" size="small" @click="submitClick" :disabled="disableds">{{submitValue}}</el-button>
222
- </div>
223
-
183
+ <div style="padding: 10px 0;text-align: center">
184
+ <el-button style="border-color: #4C61E1;color: white;background-color: #4C61E1" round class="submitClass" size="small" @click="submitClick" :disabled="disableds">{{submitValue}}</el-button>
185
+ </div>
224
186
  </div>
225
- <div class="mobileFormClass" v-if="isPhone===true" style="padding: 10px 0;" :class="{notClick:disableds === true}">
226
- <div v-for="(item,index) in formShow.form.formFieldRelation" :key="item.formField.id" >
227
- <div v-if="item.formField.type==='INPUT'&&item.display === true&&item.fieldId!=='workorder_name'" style="border-bottom: 1px solid #ebebeb">
228
- <van-field v-model=item.value :label=item.formField.name :required="item.required===true" :disabled="disableds" placeholder="请输入内容"/>
187
+ <div class="mobileFormClass" v-else style="padding: 10px 0;" :class="{notClick:disableds === true}">
188
+ <div v-for="(item,index) in formFieldRelation"
189
+ :key="item.formField.id"
190
+ class="form-field-item"
191
+ >
192
+ <div v-if="item.formField.type==='INPUT'" class="form-field-item-value">
193
+ <van-field v-model=item.value
194
+ :label=item.formField.name
195
+ :required="item.required===true"
196
+ :disabled="disableds"
197
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
198
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
199
+ />
229
200
  </div>
230
- <div v-if="item.formField.type==='EXPLANATION'" style="border-bottom: 1px solid #ebebeb">
231
- <div style="display: flex;padding: 4px 0">
232
- <p style="color: #4C61E1;font-size: 14px;margin: 16px 4px">
201
+ <div v-else-if="item.formField.type==='EXPLANATION'||item.formField.type==='EXPLAIN'" class="explan-ation">
202
+ <div class="explan-ation-div">
203
+ <p class="explan-ation-p" v-if="item.formField.type==='EXPLANATION'">
233
204
  <span class="el-icon-info"></span>
234
205
  {{item.formField.extInfo.descriptionText}}
235
206
  </p>
236
- </div>
237
- </div>
238
- <div v-if="item.formField.type==='EXPLAIN'" style="border-bottom: 1px solid #ebebeb">
239
- <div style="display: flex;padding: 4px 0">
240
- <p style="color: #4C61E1;font-size: 14px;margin: 16px 4px">
207
+ <p v-else class="explan-ation-p">
241
208
  <span class="el-icon-info"></span>
242
- {{item.value}}
209
+ <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
210
+ <span v-else>{{item.value}}</span>
243
211
  </p>
244
212
  </div>
245
213
  </div>
246
- <!-- <div v-if="item.formField.type==='CHAT_RECORD'" style="border-bottom: 1px solid #ebebeb">
247
- <div style="display: flex;padding: 4px 0;align-items: center;justify-content: center">
248
- <p style="color: #4C61E1;font-size: 14px;margin: 16px 4px">
249
- 查看报单人与机器人聊天记录
250
- </p>
214
+ <div v-else-if="item.formField.type==='TEXTAREA'" class="form-field-item-value">
215
+ <van-field v-model=item.value
216
+ :label=item.formField.name
217
+ :required="item.required===true"
218
+ type="textarea"
219
+ :disabled="disableds"
220
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
221
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
222
+ v-if="item.fieldId!=='workorder_description'"
223
+ />
224
+ <div v-if="item.fieldId==='workorder_description'" class="workorder_description">
225
+ <div class="field-name" :class="item.required?'required-name':''">
226
+ <span v-if="item.required" style="color: red">*</span>
227
+ {{item.formField.name}}
228
+ </div>
229
+ <ckeditor
230
+ :editor="ckeditor.editor"
231
+ v-model="item.value"
232
+ :config="ckeditor.editorConfig"
233
+ ></ckeditor>
251
234
  </div>
252
- </div>-->
253
- <div v-if="item.formField.type==='TEXTAREA'&&item.display === true" style="border-bottom: 1px solid #ebebeb">
254
- <van-field v-model=item.value :label=item.formField.name :required="item.required===true" type="textarea" :disabled="disableds" placeholder="请输入内容"/>
255
235
  </div>
256
-
257
- <div v-if="item.formField.type==='DATE_PICKER'&&item.display === true" style="display: flex;border-bottom: 1px solid #ebebeb">
258
-
236
+ <div v-else-if="item.formField.type==='DATE_PICKER'" class="form-field-item-value">
259
237
  <van-field
260
238
  readonly
261
239
  clickable
262
240
  name="calendar"
263
241
  :value=dateValue[item.fieldId]
264
242
  :label=item.formField.name
265
- placeholder="点击选择日期"
243
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
266
244
  :required="item.required===true"
267
245
  @click="dateClick(item.fieldId)"
268
246
  :disabled="disableds"
269
247
  />
270
-
271
248
  <van-calendar
272
249
  v-model="showCalendar"
273
250
  @confirm="onConfirmCalendar($event,dateId)"
274
251
  />
275
- <!-- <div style="display: flex;justify-content: space-between">-->
276
-
277
- <!-- <van-cell :title=item.name :value=item.value @click="dateClick(item.id)"/>-->
278
- <!-- <van-calendar v-model="showCalendar" @confirm="onConfirmCalendar($event,dateId)" />-->
279
- <!-- <i class="van-icon van-icon-arrow van-cell__right-icon" style="line-height: 44px"></i>-->
280
- <!-- </div>-->
281
-
282
252
  </div>
283
- <div v-if="item.formField.type==='TIME_PICKER'&&item.display === true&&(!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME')" style="display: flex;border-bottom: 1px solid #ebebeb">
253
+ <div v-else-if="item.formField.type==='TIME_PICKER'&&(!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME')" class="form-field-item-value">
284
254
  <van-field
285
255
  readonly
286
256
  clickable
@@ -288,7 +258,7 @@
288
258
  :required="item.required===true"
289
259
  :value=timeValue[item.fieldId]
290
260
  :label=item.formField.name
291
- placeholder="点击选择时间"
261
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
292
262
  @click="timeClick(item.fieldId,item)"
293
263
  :disabled="disableds"
294
264
 
@@ -305,79 +275,22 @@
305
275
  />
306
276
  </van-popup>
307
277
  </div>
308
- <div v-if="item.formField.type==='TIME_PICKER'&&item.display === true&&item.formField.extInfo.mold==='DATA'" style="display: flex;border-bottom: 1px solid #ebebeb">
309
- <van-field
310
- readonly
311
- clickable
312
- name="datetimePicker"
313
- :required="item.required===true"
314
- :value=timeValue[item.fieldId]
315
- :label=item.formField.name
316
- placeholder="点击选择日期"
317
- @click="timeClick(item.fieldId,item)"
318
- :disabled="disableds"
319
-
320
- />
321
- <van-calendar v-model="showTimePickerd" :show-confirm="false" @confirm="onConfirm($event,timeId,item)" @cancel="showTimePickerd = false"/>
322
- </div>
323
- <!-- <div v-if="item.formField.type==='DATETIME_RANGE'">
278
+ <div v-else-if="item.formField.type==='TIME_PICKER'&&item.formField.extInfo.mold==='DATA'" class="form-field-item-value">
324
279
  <van-field
325
280
  readonly
326
281
  clickable
327
282
  name="datetimePicker"
328
- :value=dateTimeValue[item.formField.id]
283
+ :required="item.required===true"
284
+ :value=timeValue[item.fieldId]
329
285
  :label=item.formField.name
330
- placeholder="点击选择开始日期时间"
331
- @click="dateTimeClick(item.formField.id)"
332
- />
333
- <van-popup v-model="showDateTimePicker" position="bottom">
334
- <van-datetime-picker
335
- v-model="currentDate"
336
- type="datetime"
337
- title="选择开始日期时间"
338
- @confirm="onConfirmDateTime($event,dateTimeId)"
339
- @cancel="showDateTimePicker = false"
340
- :min-date="minDate"
341
- :formatter="formatter"
342
- />
343
- </van-popup>
344
- <van-field
345
- readonly
346
- clickable
347
- name="datetimePicker"
348
- :value=dateTimeValue1[item.formField.id]
349
- label=" "
350
- placeholder="点击选择结束日期时间"
351
- @click="dateTimeClick1(item.formField.id)"
352
- />
353
- <van-popup v-model="showDateTimePicker1" position="bottom">
354
- <van-datetime-picker
355
- v-model="currentDate"
356
- type="datetime"
357
- title="选择结束日期时间"
358
- @confirm="onConfirmDateTime1($event,dateTimeId)"
359
- @cancel="showDateTimePicker1 = false"
360
- :min-date="minDate"
361
- :formatter="formatter"
362
- />
363
- </van-popup>
364
-
365
- &lt;!&ndash; <van-calendar
366
- v-model="showDateTimePicker"
367
- type="range"
368
- @confirm="onConfirmDateTime($event,dateTimeId)"
369
-
370
- />&ndash;&gt;
371
-
286
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
287
+ @click="timeClick(item.fieldId,item)"
288
+ :disabled="disableds"
372
289
 
373
- &lt;!&ndash; <van-datetime-picker
374
- v-model="showDateTimePicker"
375
- type="datetime"
376
- @confirm="onConfirmDateTime($event,dateTimeId)"
377
- :formatter="formatter"
378
- />&ndash;&gt;
379
- </div>-->
380
- <div v-if="item.formField.type==='RADIO'&&item.display === true" style="display: flex;border-bottom: 1px solid #ebebeb">
290
+ />
291
+ <van-calendar v-model="showTimePickerd" :show-confirm="false" @confirm="onConfirm($event,timeId,item)" @cancel="showTimePickerd = false"/>
292
+ </div>
293
+ <div v-else-if="item.formField.type==='RADIO'" class="form-field-item-other">
381
294
  <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
382
295
  <template #input style="display: flex;align-items: center">
383
296
  <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
@@ -393,7 +306,7 @@
393
306
  </template>
394
307
  </van-field>
395
308
  </div>
396
- <div v-if="item.formField.type==='CHECKBOX'&&item.display === true" style="display: flex;border-bottom: 1px solid #ebebeb" >
309
+ <div v-else-if="item.formField.type==='CHECKBOX'" class="form-field-item-other">
397
310
  <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
398
311
  <template #input style="display: flex;align-items: center" >
399
312
  <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
@@ -411,30 +324,43 @@
411
324
  <template #input style="display: flex;align-items: center" >
412
325
  <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
413
326
  <van-checkbox
414
- v-for="(items,index) in item.formField.extInfo.options"
415
- shape="square"
416
- :key="index"
417
- :name=items.value>
327
+ v-for="(items,index) in item.formField.extInfo.options"
328
+ shape="square"
329
+ :key="index"
330
+ :name=items.value>
418
331
  {{items.label}}
419
332
  </van-checkbox>
420
333
  </van-checkbox-group>
421
334
  </template>
422
335
  </van-field>
423
336
  </div>
424
- <div v-if="item.formField.type==='SELECT'&&item.display === true" style="display: flex;border-bottom: 1px solid #ebebeb">
425
-
337
+ <div v-else-if="item.formField.type==='SELECT'" class="form-field-item-value">
426
338
  <van-field
427
339
  readonly
428
340
  clickable
429
341
  name="picker"
430
342
  :value=selectValues[item.fieldId]
431
343
  :label=item.formField.name
432
- placeholder="点击选择"
344
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
433
345
  @click="selectClick(item.fieldId)"
434
346
  :required="item.required===true"
435
347
  :disabled="disableds"
348
+ v-if="item.fieldId!=='workorder_clientId'"
349
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
350
+ />
351
+ <van-field
352
+ readonly
353
+ clickable
354
+ name="picker"
355
+ :value=selectValues[item.fieldId]
356
+ label='报单人'
357
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
358
+ @click="selectClick(item.fieldId)"
359
+ :required="item.required===true"
360
+ :disabled="disableds"
361
+ v-if="item.fieldId==='workorder_clientId'"
362
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
436
363
  />
437
-
438
364
  <van-popup v-model="showPicker" position="bottom">
439
365
  <van-picker
440
366
  show-toolbar
@@ -444,28 +370,20 @@
444
370
  :key="selectKey"
445
371
 
446
372
  />
447
- <!-- <van-action-sheet
448
- v-model="showPicker"
449
- :actions="item.formField.extInfo.option"
450
- cancel-text="取消"
451
- @select="onConfirmSelect($event,item.fieldId)"
452
- duration="0.5"
453
- />-->
454
373
  </van-popup>
455
- <span style="padding: 0 8px 0 0;display: flex;align-items: center"> <i class="van-icon van-icon-arrow van-cell__right-icon"></i></span>
456
-
457
374
  </div>
458
- <div v-if="item.formField.type==='CASCADER'&&item.display === true" style="display: flex;border-bottom: 1px solid #ebebeb">
375
+ <div v-else-if="item.formField.type==='CASCADER'" class="form-field-item-value">
459
376
  <van-field
460
377
  readonly
461
378
  clickable
462
379
  name="area"
463
380
  :value=cascadeValue[item.fieldId]
464
381
  :label=item.formField.name
465
- placeholder="点击选择"
382
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
466
383
  @click="pickerClick(item.fieldId)"
467
384
  :required="item.required===true"
468
385
  :disabled="disableds"
386
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
469
387
  />
470
388
 
471
389
  <van-popup v-model="showArea" position="bottom">
@@ -479,29 +397,27 @@
479
397
  :key="keyValue"
480
398
  />
481
399
  </van-popup>
482
- <span style="padding: 0 8px 0 0;display: flex;align-items: center"> <i class="van-icon van-icon-arrow van-cell__right-icon"></i></span>
483
-
484
400
  </div>
485
- <div v-if="item.formField.type === 'FILE'&&item.display === true" style="display: flex;border-bottom: 1px solid #ebebeb;padding: 10px 8px">
486
- <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)">
487
- <div class="fileName"><span style="color: red" v-if="item.required===true">*</span>{{item.formField.name}}</div>
488
- <van-uploader
489
- v-model="fileListList[item.fieldId]"
490
- :before-read="beforeRead"
491
- :max-count='item.formField.extInfo.limitNum!==undefined?item.formField.extInfo.limitNum:1'
492
- :after-read="afterRead"
493
- accept="image/*"
494
- :multiple=false
495
- >
496
- <div class="vant-upload--picture-card">
497
- <i class="el-icon-plus"></i>
498
- </div>
499
-
500
- </van-uploader>
501
- </div>
401
+ <div v-else-if="item.formField.type === 'FILE'" class="form-field-item-value">
402
+ <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" class="form-field-item-file">
403
+ <div class="fileName"><span style="color: red" v-if="item.required">*</span>{{item.formField.name}}</div>
404
+ <van-uploader
405
+ v-model="fileListList[item.fieldId]"
406
+ :before-read="beforeRead"
407
+ :max-count='item.formField.extInfo.limitNum!==undefined?item.formField.extInfo.limitNum:1'
408
+ :after-read="afterRead"
409
+ accept="image/*"
410
+ :multiple=false
411
+ >
412
+ <div class="vant-upload--picture-card">
413
+ <i class="el-icon-plus"></i>
414
+ </div>
415
+
416
+ </van-uploader>
417
+ </div>
502
418
  </div>
503
419
  </div>
504
- <div style="padding: 14px 16px 0 16px;text-align: center">
420
+ <div class="form-submit-btn">
505
421
  <van-button round type="info" class="submitClass" @click="submitClick" :disabled="disableds">{{submitValue}}</van-button>
506
422
  </div>
507
423
  <van-popup v-model="fileUpload" :close-on-click-overlay="false">
@@ -510,7 +426,7 @@
510
426
  </div>
511
427
  </van-popup>
512
428
  </div>
513
- </div>
429
+ </div>
514
430
  <el-dialog :visible.sync="dialogVisible">
515
431
  <img width="100%" :src="dialogImageUrl" alt="">
516
432
  </el-dialog>
@@ -521,6 +437,9 @@
521
437
  <script>
522
438
  let that
523
439
  import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
440
+ import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
441
+ import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
442
+
524
443
  export default {
525
444
  name: "formTemplate",
526
445
  data() {
@@ -602,7 +521,16 @@ export default {
602
521
  bucket: "guoranopen-zjk",
603
522
  },
604
523
  hideUploadEdit:false,
605
- limitNum:1
524
+ limitNum:1,
525
+ ckeditor: {
526
+ editor: ClassicEditor,
527
+ editorConfig: {
528
+ extraPlugins: [MyCustomUploadAdapterPlugin],
529
+ toolbar: [
530
+ 'imageUpload'
531
+ ]
532
+ },
533
+ },
606
534
 
607
535
  }
608
536
  },
@@ -644,7 +572,18 @@ export default {
644
572
  computed:{
645
573
  acceptType:function () {
646
574
  return '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF'
575
+ },
576
+ formFieldRelation:function (){
577
+ console.log('this.formShow.form.formFieldRelation',this.formShow.form.formFieldRelation)
578
+ let arr = [];
579
+ this.formShow.form.formFieldRelation.forEach(item=> {
580
+ if (item.fieldId!=='workorder_name'&&item.display) {
581
+ arr.push(item);
582
+ }
583
+ })
584
+ return arr;
647
585
  }
586
+
648
587
  },
649
588
  mounted() {
650
589
  console.log(this.formList)
@@ -1687,12 +1626,47 @@ export default {
1687
1626
  .notClick {
1688
1627
  pointer-events: none;
1689
1628
  }
1690
- .mobileFormClass,.pcFormClass{
1629
+ .formClass{
1691
1630
  /* border: 1px solid #ebebeb;*/
1692
1631
  font-family: "Avenir", Helvetica, Arial, sans-serif;
1693
1632
  border-radius: 15px;
1633
+ .explain-url{
1634
+ a{
1635
+ color:#4C61E1 ;
1636
+ }
1637
+ }
1638
+ .titleName{
1639
+ font-size: 1em;
1640
+ text-align: center;
1641
+ padding: 10px 0;
1642
+ display: flex;
1643
+ align-items: center;
1644
+ justify-content: center;
1645
+ border-bottom: 1px solid #EEEEEE;
1646
+ }
1647
+ .form-submit-btn{
1648
+ padding: 14px 16px 0 16px;
1649
+ text-align: center;
1650
+ border-top: 1px solid #EEEEEE;
1651
+ }
1652
+ /deep/.ck.ck-toolbar{
1653
+ border-color:#E0E6F7;
1654
+ }
1655
+ /deep/.ck.ck-editor__editable_inline{
1656
+ border-color:#E0E6F7;
1657
+ min-height: 120px!important;
1658
+ }
1694
1659
  }
1695
1660
  .pcFormClass{
1661
+ width: 300px;
1662
+ margin: 0 auto;
1663
+ .field-item{
1664
+ padding: 8px 0;
1665
+ .field-item-name{
1666
+ padding-bottom: 8px;
1667
+ color: #A9B3C6;
1668
+ }
1669
+ }
1696
1670
  /deep/.el-upload--picture-card{
1697
1671
  background-color: #fbfdff;
1698
1672
  border: 1px dashed #c0ccda;
@@ -1733,7 +1707,7 @@ export default {
1733
1707
  /deep/.vant-upload--picture-card{
1734
1708
  background-color: #fbfdff;
1735
1709
  border: 1px dashed #c0ccda;
1736
- border-radius: 6px;
1710
+ border-radius: 10px;
1737
1711
  width: 74px;
1738
1712
  height: 74px;
1739
1713
  vertical-align: top;
@@ -1749,17 +1723,68 @@ export default {
1749
1723
  border-radius: 5px;
1750
1724
  }
1751
1725
  .remPhoneClassForm{
1752
- .titleName{
1753
- text-align: center;
1754
- padding-bottom: 4px;
1755
- }
1756
1726
  .mobileFormClass{
1757
- width: 80vw;
1758
- .fileName{
1759
- padding-bottom: 6px;
1727
+ width: 80vw;
1728
+ .form-field-item{
1729
+ /* border-bottom: 1px solid #ebebeb;*/
1730
+ .form-field-item-value{
1731
+ /deep/.van-cell{
1732
+ flex-direction: column;
1733
+ padding: 8px 16px;
1734
+ }
1735
+ /deep/.van-cell__value{
1736
+ border: 1px solid #E0E6F7;
1737
+ border-radius: 9px;
1738
+ min-height: 40px;
1739
+ padding: 0 10px;
1740
+ }
1741
+ /deep/.van-cell__right-icon{
1742
+ color: #999999!important;
1743
+ }
1744
+ .form-field-item-file{
1745
+ padding: 8px 16px;
1746
+ .fileName{
1747
+ padding-bottom: 8px;
1748
+ color: #A9B3C6;
1749
+ }
1750
+ }
1751
+ .workorder_description{
1752
+ padding: 8px 16px;
1753
+ /*font-size: 14px;*/
1754
+ .field-name{
1755
+ width: 100%;
1756
+ text-align: left;
1757
+ color: #A9B3C6;
1758
+ line-height: 1;
1759
+ padding-bottom: 8px;
1760
+ }
1761
+ .required-name{
1762
+ margin-left: -6px;
1763
+ }
1764
+
1765
+ /* /deep/.ck-content .image img{
1766
+ max-width: 200px!important;
1767
+ }*/
1768
+ }
1769
+ }
1770
+ .form-field-item-other{
1771
+ /deep/.van-cell{
1772
+ flex-direction: column;
1773
+ }
1774
+ /deep/.van-cell__value{
1775
+ min-height: 40px;
1776
+ }
1777
+ }
1778
+ .explan-ation{
1779
+ .explan-ation-div{
1780
+ display: flex;
1781
+ padding: 4px 16px;
1782
+ }
1783
+ .explan-ation-p{
1784
+ color: #4C61E1;font-size: 14px;margin: 16px 4px;
1785
+ }
1786
+ }
1760
1787
  }
1761
- }
1762
- .mobileFormClass{
1763
1788
  .upload-phone-demo{
1764
1789
  /deep/.el-upload--picture-card{
1765
1790
  background-color: #fbfdff;
@@ -1781,8 +1806,9 @@ export default {
1781
1806
  width: 76px;
1782
1807
  }
1783
1808
  }
1784
-
1785
-
1809
+ /deep/.van-image__img{
1810
+ border-radius: 10px;
1811
+ }
1786
1812
  }
1787
1813
  .submitClass{
1788
1814
  width: 120px;
@@ -1794,17 +1820,18 @@ export default {
1794
1820
  border:1px solid #4C61E1;
1795
1821
  }
1796
1822
  /deep/.van-field__label{
1797
- width: 5em!important;
1823
+ width: 100%;
1798
1824
  text-align: left;
1799
- color: #000000!important;
1825
+ color: #A9B3C6!important;
1800
1826
  display: flex;
1801
1827
  align-items: center;
1802
- line-height: 2;
1828
+ line-height: 1;
1829
+ padding-bottom: 8px;
1830
+ font-size: 1em;
1803
1831
  }
1804
1832
 
1805
1833
  /deep/.van-field__control{
1806
- min-height: 36px;
1807
- border-radius: 5px;
1834
+ min-height: 40px;
1808
1835
  }
1809
1836
  /deep/.van-checkbox--horizontal{
1810
1837
  padding: 0.2rem 0;
@@ -1817,7 +1844,7 @@ export default {
1817
1844
  }
1818
1845
 
1819
1846
  /deep/.van-overlay{
1820
- background-color: rgba(0,0,0,.7);
1847
+ background-color: rgba(0,0,0,.4);
1821
1848
  }
1822
1849
 
1823
1850
 
@@ -1831,9 +1858,6 @@ export default {
1831
1858
  .remCompanyClassForm{
1832
1859
  width: 100%;
1833
1860
  font-size: 1em;
1834
- .pcFormClass{
1835
- width: 100%;
1836
- }
1837
1861
  .submitClass{
1838
1862
  width: 120px;
1839
1863
  color: white!important;
@@ -1846,11 +1870,6 @@ export default {
1846
1870
  .el-radio{
1847
1871
  padding: 4px 0;
1848
1872
  }
1849
- .titleName{
1850
- font-size: 1em;
1851
- text-align: center;
1852
- padding: 8px 0;
1853
- }
1854
1873
  /deep/.el-radio__input.is-checked+.el-radio__label{
1855
1874
  color: #4C61E1!important;
1856
1875
  }
package/src/components/utils/ckeditor.js ADDED
@@ -0,0 +1,124 @@
1
+ import {multipartUpload, ossFileUrl} from "./AliyunIssUtil";
2
+ const ossConfig={
3
+ region: "oss-cn-zhangjiakou",
4
+ //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
5
+ accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
6
+ accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
7
+ // stsToken: '<Your securityToken(STS)>',
8
+ bucket: "guoranopen-zjk",
9
+ }
10
+ class MyUploadAdapter {
11
+ constructor( loader ) {
12
+ // 要在上载期间使用的文件加载器实例
13
+ this.loader = loader;
14
+ }
15
+
16
+ // 启动上载过程
17
+ upload() {
18
+ return this.loader.file
19
+ .then( file => new Promise( ( resolve ) => {
20
+ /* this._initRequest();
21
+ this._initListeners( resolve, reject, file );
22
+ this._sendRequest( file );*/
23
+ this.uploadFile(file,resolve)
24
+ } ) );
25
+ }
26
+
27
+ // 中止上载过程
28
+ abort() {
29
+ if ( this.xhr ) {
30
+ this.xhr.abort();
31
+ }
32
+ }
33
+ uploadFile(file,resolve){
34
+ let imgInfo = {
35
+ url:'',
36
+ }
37
+ let res = multipartUpload(
38
+ ossConfig,
39
+ file,
40
+ null,
41
+ imgInfo
42
+ );
43
+ res.then(resp=>{
44
+ imgInfo.url = ossFileUrl(ossConfig, resp.name)
45
+ console.log(imgInfo)
46
+ resolve({
47
+ default:imgInfo.url
48
+ })
49
+ })
50
+ }
51
+ // 使用传递给构造函数的URL初始化XMLHttpRequest对象.
52
+ _initRequest() {
53
+ const xhr = this.xhr = new XMLHttpRequest();
54
+ console.log(xhr)
55
+ xhr.open( 'POST', '/open-api/oss/public?token=8c98087dfd2d48f856d8c95c09115def', true );
56
+ xhr.responseType = '';
57
+ }
58
+
59
+ // 初始化 XMLHttpRequest 监听.
60
+ _initListeners( resolve, reject, file ) {
61
+ const xhr = this.xhr;
62
+ const loader = this.loader;
63
+ console.log(this.loader)
64
+ const genericErrorText = `无法上传文件: ${ file.name }.`;
65
+
66
+ xhr.addEventListener( 'error', () => reject( genericErrorText ) );
67
+ xhr.addEventListener( 'abort', () => reject() );
68
+ xhr.addEventListener( 'load', () => {
69
+ const response = xhr.response;
70
+ // 当code＝＝200说明上传成功，可以增加弹框提示；
71
+ // 当上传失败时，必须调用reject()函数。
72
+
73
+ console.log('response', xhr)
74
+
75
+ if ( !response || response.error ) {
76
+ return reject( response && response.error ? response.error.message : genericErrorText );
77
+ }
78
+ //上传成功，从后台获取图片的url地址
79
+ resolve( {
80
+ default: response
81
+ } );
82
+ } );
83
+
84
+ // 支持时上传进度。文件加载器有#uploadTotal和#upload属性，用于在编辑器用户界面中显示上载进度栏。
85
+ if ( xhr.upload ) {
86
+ xhr.upload.addEventListener( 'progress', evt => {
87
+ if ( evt.lengthComputable ) {
88
+ loader.uploadTotal = evt.total;
89
+ loader.uploaded = evt.loaded;
90
+ }
91
+ } );
92
+ }
93
+ }
94
+
95
+ // 准备数据并发送请求
96
+ _sendRequest( file ) {
97
+ //通过FormData构造函数创建一个空对象
98
+ const data = new FormData();
99
+ //通过append()方法在末尾追加key为files值为file的数据
100
+
101
+ console.log('file',file)
102
+ data.append( 'file', file );//上传的参数data
103
+ // data.append( 'memberId', "666" );
104
+ /**
105
+ * 重要提示:这是实现诸如身份验证和CSRF保护等安全机制的正确位置。
106
+ * 例如，可以使用XMLHttpRequest.setRequestHeader()设置包含应用程序先前生成的CSRF令牌的请求头。
107
+ */
108
+ this.xhr.send( data );
109
+ }
110
+ }
111
+
112
+ function MyCustomUploadAdapterPlugin( editor ) {
113
+ editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
114
+ console.log('loader',loader)
115
+
116
+ // 在这里将URL配置为后端上载脚本
117
+ return new MyUploadAdapter( loader );
118
+ };
119
+ }
120
+
121
+ export {
122
+ MyUploadAdapter,
123
+ MyCustomUploadAdapterPlugin
124
+ }
package/src/main.js CHANGED
@@ -10,7 +10,8 @@ import 'video.js/dist/video-js.css'
10
10
  import Vant from 'vant';
11
11
  import 'vant/lib/index.css';
12
12
 
13
-
13
+ import CKEditor from '@ckeditor/ckeditor5-vue';
14
+ Vue.use(CKEditor);
14
15
  /*import VConsole from 'vconsole'
15
16
  const vConsole = new VConsole();
16
17
  Vue.use(vConsole);*/