|
|
@@ -318,6 +318,13 @@ import ProductSkuEditor from './components/ProductSkuEditor.vue'
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
import '@wangeditor/editor/dist/css/style.css'
|
|
|
|
|
|
+function resolveUploadedUrl(res) {
|
|
|
+ const url = res && res.data && res.data.url ? res.data.url : (res && res.data)
|
|
|
+ if (!url) return ''
|
|
|
+ if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) return url
|
|
|
+ return (process.env.VUE_APP_BASE_API || '') + url
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
name: 'ProductEdit',
|
|
|
components: { DimensionWeightPicker, ProductSkuEditor, Editor, Toolbar },
|
|
|
@@ -389,14 +396,161 @@ export default {
|
|
|
},
|
|
|
customInsert(res, insertFn) {
|
|
|
if (res.code === 200) {
|
|
|
- const baseURL = process.env.VUE_APP_BASE_API || ''
|
|
|
- const url = res.data && res.data.url ? res.data.url : res.data
|
|
|
- insertFn(baseURL + url)
|
|
|
+ insertFn(resolveUploadedUrl(res))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadVideo: {
|
|
|
+ server: '',
|
|
|
+ headers: {},
|
|
|
+ maxNumberOfFiles: 1,
|
|
|
+ maxFileSize: 50 * 1024 * 1024,
|
|
|
+ fieldName: 'file',
|
|
|
+ timeout: 5 * 60 * 1000,
|
|
|
+ allowedFileTypes: ['video/*'],
|
|
|
+ customAlert: (msg, type) => {
|
|
|
+ this.$message && this.$message({ message: msg, type: type || 'error' })
|
|
|
+ },
|
|
|
+ onError: (file, err, res) => {
|
|
|
+ const msg = (file && file.name || '视频') + ' 上传失败,视频不能超过 50MB'
|
|
|
+ this.$message && this.$message({ message: msg, type: 'error' })
|
|
|
+ },
|
|
|
+ customInsert(res, insertFn) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ insertFn(resolveUploadedUrl(res))
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addBundleItem() {
|
|
|
+
|
|
|
+Let me re-read the structure more carefully.
|
|
|
+
|
|
|
+```javascript
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: { ... },
|
|
|
+ ...
|
|
|
+ editorConfig: {
|
|
|
+ MENU_CONF: {
|
|
|
+ uploadImage: { ... }
|
|
|
+} // closes MENU_CONF
|
|
|
+ }, // closes editorConfig
|
|
|
+ addBundleItem() { // THIS IS STILL IN THE RETURN OBJECT OF data()
|
|
|
+ ...
|
|
|
},
|
|
|
+ ...
|
|
|
+ async loadBundleItems(productId) { ... },
|
|
|
+ toolbarConfig: {},
|
|
|
+ editorInstance: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+```
|
|
|
+
|
|
|
+So addBundleItem through loadBundleItems are incorrectly placed inside data() as function properties. Then toolbarConfig and editorInstance are also in data(). Then computed starts.
|
|
|
+
|
|
|
+If I replace ending with `}, toolbarConfig, editorInstance, then close data, then computed` - I would DUPLICATE computed and lose addBundleItem.
|
|
|
+
|
|
|
+I need a more surgical replace: only add uploadVideo inside MENU_CONF, don't close data().
|
|
|
+
|
|
|
+Correct replacement:
|
|
|
+
|
|
|
+FROM:
|
|
|
+```
|
|
|
+ customInsert(res, insertFn) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ insertFn(resolveUploadedUrl(res))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadVideo: {
|
|
|
+ server: '',
|
|
|
+ headers: {},
|
|
|
+ maxNumberOfFiles: 1,
|
|
|
+ maxFileSize: 50 * 1024 * 1024,
|
|
|
+ fieldName: 'file',
|
|
|
+ timeout: 5 * 60 * 1000,
|
|
|
+ allowedFileTypes: ['video/*'],
|
|
|
+ customAlert: (msg, type) => {
|
|
|
+ this.$message && this.$message({ message: msg, type: type || 'error' })
|
|
|
+ },
|
|
|
+ onError: (file, err, res) => {
|
|
|
+ const msg = (file && file.name || '视频') + ' 上传失败,视频不能超过 50MB'
|
|
|
+ this.$message && this.$message({ message: msg, type: 'error' })
|
|
|
+ },
|
|
|
+ customInsert(res, insertFn) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ insertFn(resolveUploadedUrl(res))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addBundleItem() {
|
|
|
+```
|
|
|
+
|
|
|
+TO:
|
|
|
+```
|
|
|
+ customInsert(res, insertFn) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ insertFn(resolveUploadedUrl(res))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadVideo: {
|
|
|
+ server: '',
|
|
|
+ headers: {},
|
|
|
+ maxNumberOfFiles: 1,
|
|
|
+ maxFileSize: 50 * 1024 * 1024,
|
|
|
+ fieldName: 'file',
|
|
|
+ timeout: 5 * 60 * 1000,
|
|
|
+ allowedFileTypes: ['video/*'],
|
|
|
+ customAlert: (msg, type) => {
|
|
|
+ this.$message && this.$message({ message: msg, type: type || 'error' })
|
|
|
+ },
|
|
|
+ onError: (file, err, res) => {
|
|
|
+ const msg = (file && file.name || '视频') + ' 上传失败,视频不能超过 50MB'
|
|
|
+ this.$message && this.$message({ message: msg, type: 'error' })
|
|
|
+ },
|
|
|
+ customInsert(res, insertFn) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ insertFn(resolveUploadedUrl(res))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addBundleItem() {
|
|
|
+```
|
|
|
+
|
|
|
+Wait, originally:
|
|
|
+```
|
|
|
+ } // uploadImage
|
|
|
+} // MENU_CONF
|
|
|
+ }, // editorConfig
|
|
|
+ addBundleItem() {
|
|
|
+```
|
|
|
+
|
|
|
+After my change:
|
|
|
+```
|
|
|
+ }, // uploadImage
|
|
|
+ uploadVideo: { ... }
|
|
|
+ } // MENU_CONF
|
|
|
+ }, // editorConfig
|
|
|
+ addBundleItem() {
|
|
|
+```
|
|
|
+
|
|
|
+That's correct.
|
|
|
+
|
|
|
+And I need a resolveUploadedUrl function. I'll add it at the top of the script after imports, before export default.
|
|
|
+
|
|
|
+Also add computed uploadVideoActionUrl and created() assignments.
|
|
|
+
|
|
|
+Let me also NOT add toolbarConfig/editorInstance since they already exist later.
|
|
|
+
|
|
|
+The first StrReplace on ProductEdit might have already been attempted... looking at the function call, it was in the same batch. If it succeeded, I may have broken the file. Let me check.
|
|
|
addBundleItem() {
|
|
|
this.bundleItems.push({
|
|
|
childProductId: null,
|
|
|
@@ -479,6 +633,10 @@ export default {
|
|
|
const baseURL = process.env.VUE_APP_BASE_API || ''
|
|
|
return baseURL + '/api/admin/articles/upload/image'
|
|
|
},
|
|
|
+ uploadVideoActionUrl() {
|
|
|
+ const baseURL = process.env.VUE_APP_BASE_API || ''
|
|
|
+ return baseURL + '/api/admin/articles/upload/video'
|
|
|
+ },
|
|
|
uploadHeaders() {
|
|
|
const token = localStorage.getItem('token')
|
|
|
return { Authorization: 'Bearer ' + token }
|
|
|
@@ -503,6 +661,8 @@ export default {
|
|
|
this.loadApprovedGuides()
|
|
|
this.editorConfig.MENU_CONF.uploadImage.server = this.uploadActionUrl
|
|
|
this.editorConfig.MENU_CONF.uploadImage.headers = this.uploadHeaders
|
|
|
+ this.editorConfig.MENU_CONF.uploadVideo.server = this.uploadVideoActionUrl
|
|
|
+ this.editorConfig.MENU_CONF.uploadVideo.headers = this.uploadHeaders
|
|
|
},
|
|
|
mounted() {
|
|
|
this.loadSupplySystems()
|