修复客户端公告图片展示问题

dev
ZR20090193-陈敬勇 1 year ago
parent aba2c3956e
commit 79a99ebe8f

@ -19,40 +19,41 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import type { Editor, RawEditorSettings } from 'tinymce'; import type { Editor, RawEditorSettings } from 'tinymce'
import tinymce from 'tinymce/tinymce'; import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'; import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'; import 'tinymce/icons/default/icons'
import 'tinymce/plugins/advlist'; import 'tinymce/plugins/advlist'
import 'tinymce/plugins/anchor'; import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autolink'; import 'tinymce/plugins/autolink'
import 'tinymce/plugins/autosave'; import 'tinymce/plugins/autosave'
import 'tinymce/plugins/code'; import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'; import 'tinymce/plugins/codesample'
import 'tinymce/plugins/directionality'; import 'tinymce/plugins/directionality'
import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/hr'; import 'tinymce/plugins/hr'
import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/link'; import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'; import 'tinymce/plugins/lists'
import 'tinymce/plugins/media'; import 'tinymce/plugins/media'
import 'tinymce/plugins/nonbreaking'; import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/noneditable'; import 'tinymce/plugins/noneditable'
import 'tinymce/plugins/pagebreak'; import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/paste'; import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'; import 'tinymce/plugins/preview'
import 'tinymce/plugins/print'; import 'tinymce/plugins/print'
import 'tinymce/plugins/save'; import 'tinymce/plugins/save'
import 'tinymce/plugins/searchreplace'; import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/spellchecker'; import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/tabfocus'; import 'tinymce/plugins/tabfocus'
// import 'tinymce/plugins/table'; // import 'tinymce/plugins/table';
import 'tinymce/plugins/template'; import 'tinymce/plugins/template'
import 'tinymce/plugins/textpattern'; import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/visualblocks'; import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'; import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/wordcount'; import 'tinymce/plugins/wordcount'
import { useGlobSetting } from '/@/hooks/setting'
const { viewUrl } = useGlobSetting()
import { import {
defineComponent, defineComponent,
computed, computed,
@ -62,16 +63,16 @@
watch, watch,
onDeactivated, onDeactivated,
onBeforeUnmount, onBeforeUnmount,
} from 'vue'; } from 'vue'
import ImgUpload from './ImgUpload.vue'; import ImgUpload from './ImgUpload.vue'
import { toolbar, plugins } from './tinymce'; import { toolbar, plugins } from './tinymce'
import { buildShortUUID } from '/@/utils/uuid'; import { buildShortUUID } from '/@/utils/uuid'
import { bindHandlers } from './helper'; import { bindHandlers } from './helper'
import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'; import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign'
import { isNumber } from '/@/utils/is'; import { isNumber } from '/@/utils/is'
import { useLocale } from '/@/locales/useLocale'; import { useLocale } from '/@/locales/useLocale'
import { useAppStore } from '/@/store/modules/app'; import { useAppStore } from '/@/store/modules/app'
const tinymceProps = { const tinymceProps = {
options: { options: {
@ -107,7 +108,7 @@
type: Boolean, type: Boolean,
default: true, default: true,
}, },
}; }
export default defineComponent({ export default defineComponent({
name: 'Tinymce', name: 'Tinymce',
@ -116,37 +117,37 @@
props: tinymceProps, props: tinymceProps,
emits: ['change', 'update:modelValue', 'inited', 'init-error'], emits: ['change', 'update:modelValue', 'inited', 'init-error'],
setup(props, { emit, attrs }) { setup(props, { emit, attrs }) {
const editorRef = ref<Nullable<Editor>>(null); const editorRef = ref<Nullable<Editor>>(null)
const fullscreen = ref(false); const fullscreen = ref(false)
const tinymceId = ref<string>(buildShortUUID('tiny-vue')); const tinymceId = ref<string>(buildShortUUID('tiny-vue'))
const elRef = ref<Nullable<HTMLElement>>(null); const elRef = ref<Nullable<HTMLElement>>(null)
const { prefixCls } = useDesign('tinymce-container'); const { prefixCls } = useDesign('tinymce-container')
const appStore = useAppStore(); const appStore = useAppStore()
const tinymceContent = computed(() => props.modelValue); const tinymceContent = computed(() => props.modelValue)
const containerWidth = computed(() => { const containerWidth = computed(() => {
const width = props.width; const width = props.width
if (isNumber(width)) { if (isNumber(width)) {
return `${width}px`; return `${width}px`
} }
return width; return width
}); })
const skinName = computed(() => { const skinName = computed(() => {
return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark'; return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark'
}); })
const langName = computed(() => { const langName = computed(() => {
const lang = useLocale().getLocale.value; const lang = useLocale().getLocale.value
return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN'; return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN'
}); })
const initOptions = computed((): RawEditorSettings => { const initOptions = computed((): RawEditorSettings => {
const { height, options, toolbar, plugins } = props; const { height, options, toolbar, plugins } = props
const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/'; const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/'
return { return {
selector: `#${unref(tinymceId)}`, selector: `#${unref(tinymceId)}`,
height, height,
@ -166,83 +167,83 @@
publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css', publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
...options, ...options,
setup: (editor: Editor) => { setup: (editor: Editor) => {
editorRef.value = editor; editorRef.value = editor
editor.on('init', (e) => initSetup(e)); editor.on('init', (e) => initSetup(e))
}, },
}; }
}); })
const disabled = computed(() => { const disabled = computed(() => {
const { options } = props; const { options } = props
const getdDisabled = options && Reflect.get(options, 'readonly'); const getdDisabled = options && Reflect.get(options, 'readonly')
const editor = unref(editorRef); const editor = unref(editorRef)
if (editor) { if (editor) {
editor.setMode(getdDisabled ? 'readonly' : 'design'); editor.setMode(getdDisabled ? 'readonly' : 'design')
} }
return getdDisabled ?? false; return getdDisabled ?? false
}); })
watch( watch(
() => attrs.disabled, () => attrs.disabled,
() => { () => {
const editor = unref(editorRef); const editor = unref(editorRef)
if (!editor) { if (!editor) {
return; return
} }
editor.setMode(attrs.disabled ? 'readonly' : 'design'); editor.setMode(attrs.disabled ? 'readonly' : 'design')
}, },
); )
onMountedOrActivated(() => { onMountedOrActivated(() => {
if (!initOptions.value.inline) { if (!initOptions.value.inline) {
tinymceId.value = buildShortUUID('tiny-vue'); tinymceId.value = buildShortUUID('tiny-vue')
} }
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
initEditor(); initEditor()
}, 30); }, 30)
}); })
}); })
onBeforeUnmount(() => { onBeforeUnmount(() => {
destory(); destory()
}); })
onDeactivated(() => { onDeactivated(() => {
destory(); destory()
}); })
function destory() { function destory() {
if (tinymce !== null) { if (tinymce !== null) {
tinymce?.remove?.(unref(initOptions).selector!); tinymce?.remove?.(unref(initOptions).selector!)
} }
} }
function initEditor() { function initEditor() {
const el = unref(elRef); const el = unref(elRef)
if (el) { if (el) {
el.style.visibility = ''; el.style.visibility = ''
} }
tinymce tinymce
.init(unref(initOptions)) .init(unref(initOptions))
.then((editor) => { .then((editor) => {
emit('inited', editor); emit('inited', editor)
}) })
.catch((err) => { .catch((err) => {
emit('init-error', err); emit('init-error', err)
}); })
} }
function initSetup(e) { function initSetup(e) {
const editor = unref(editorRef); const editor = unref(editorRef)
if (!editor) { if (!editor) {
return; return
} }
const value = props.modelValue || ''; const value = props.modelValue || ''
editor.setContent(value); editor.setContent(value)
bindModelHandlers(editor); bindModelHandlers(editor)
bindHandlers(e, attrs, unref(editorRef)); bindHandlers(e, attrs, unref(editorRef))
} }
function setValue(editor: Recordable, val: string, prevVal?: string) { function setValue(editor: Recordable, val: string, prevVal?: string) {
@ -252,64 +253,65 @@
val !== prevVal && val !== prevVal &&
val !== editor.getContent({ format: attrs.outputFormat }) val !== editor.getContent({ format: attrs.outputFormat })
) { ) {
editor.setContent(val); editor.setContent(val)
} }
} }
function bindModelHandlers(editor: any) { function bindModelHandlers(editor: any) {
const modelEvents = attrs.modelEvents ? attrs.modelEvents : null; const modelEvents = attrs.modelEvents ? attrs.modelEvents : null
const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents; const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents
watch( watch(
() => props.modelValue, () => props.modelValue,
(val: string, prevVal: string) => { (val: string, prevVal: string) => {
setValue(editor, val, prevVal); setValue(editor, val, prevVal)
}, },
); )
watch( watch(
() => props.value, () => props.value,
(val: string, prevVal: string) => { (val: string, prevVal: string) => {
setValue(editor, val, prevVal); setValue(editor, val, prevVal)
}, },
{ {
immediate: true, immediate: true,
}, },
); )
editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => { editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
const content = editor.getContent({ format: attrs.outputFormat }); const content = editor.getContent({ format: attrs.outputFormat })
emit('update:modelValue', content); emit('update:modelValue', content)
emit('change', content); emit('change', content)
}); })
editor.on('FullscreenStateChanged', (e) => { editor.on('FullscreenStateChanged', (e) => {
fullscreen.value = e.state; fullscreen.value = e.state
}); })
} }
function handleImageUploading(name: string) { function handleImageUploading(name: string) {
const editor = unref(editorRef); const editor = unref(editorRef)
if (!editor) { if (!editor) {
return; return
} }
editor.execCommand('mceInsertContent', false, getUploadingImgName(name)); editor.execCommand('mceInsertContent', false, getUploadingImgName(name))
const content = editor?.getContent() ?? ''; const content = editor?.getContent() ?? ''
setValue(editor, content); setValue(editor, content)
} }
function handleDone(name: string, url: string) { function handleDone(name: string, url: string) {
const editor = unref(editorRef); const editor = unref(editorRef)
if (!editor) { if (!editor) {
return; return
} }
const content = editor?.getContent() ?? ''; const content = editor?.getContent() ?? ''
const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? ''; const val =
setValue(editor, val); content?.replace(getUploadingImgName(name), `<img src="${viewUrl + url}"/>`) ?? ''
setValue(editor, val)
} }
function getUploadingImgName(name: string) { function getUploadingImgName(name: string) {
return `[uploading:${name}]`; return `[uploading:${name}]`
} }
return { return {
@ -324,9 +326,9 @@
editorRef, editorRef,
fullscreen, fullscreen,
disabled, disabled,
}; }
}, },
}); })
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>

@ -5697,3 +5697,10 @@
2023-07-27 12:00:04.5230 Info Shutdown() called. Logger closing... 2023-07-27 12:00:04.5230 Info Shutdown() called. Logger closing...
2023-07-27 12:00:04.5230 Info Closing old configuration. 2023-07-27 12:00:04.5230 Info Closing old configuration.
2023-07-27 12:00:04.5926 Info Logger has been closed down. 2023-07-27 12:00:04.5926 Info Logger has been closed down.
2023-08-22 16:14:36.3831 Info Message Template Auto Format enabled
2023-08-22 16:14:36.4206 Info Loading assembly: NLog.Web.AspNetCore
2023-08-22 16:14:36.7045 Info Adding target FileTarget(Name=allfile)
2023-08-22 16:14:36.7201 Info Adding target FileTarget(Name=ownFile-web)
2023-08-22 16:14:36.7594 Info Adding target ColoredConsoleTarget(Name=console)
2023-08-22 16:14:36.8619 Info Validating config: TargetNames=console, ownFile-web, ConfigItems=54, FilePath=D:\Code\DS\sdgslk-wms-solution\gslk-wmsapi-service-client\DS.WMS.WebApi\bin\Debug\net6.0\nlog.config
2023-08-22 16:14:36.8846 Warn Unused target detected. Add a rule for this target to the configuration. TargetName: allfile

@ -283,6 +283,20 @@
<param name="id"></param> <param name="id"></param>
<returns></returns> <returns></returns>
</member> </member>
<member name="M:DS.WMS.WebApi.Controllers.CommonController.GetTruckRecord(System.String)">
<summary>
获取进出场记录
</summary>
<param name="id"></param>
<returns></returns>
</member>
<member name="M:DS.WMS.WebApi.Controllers.CommonController.EditTruckRecord(DS.WMS.Core.System.Dtos.TruckRecordInput)">
<summary>
编辑进出记录
</summary>
<param name="model"></param>
<returns></returns>
</member>
<member name="M:DS.WMS.WebApi.Controllers.CompanyController.#ctor(DS.WMS.Core.System.Interface.ICompanyService)"> <member name="M:DS.WMS.WebApi.Controllers.CompanyController.#ctor(DS.WMS.Core.System.Interface.ICompanyService)">
<summary> <summary>
构造函数 构造函数
@ -1177,6 +1191,13 @@
<param name="id"></param> <param name="id"></param>
<returns></returns> <returns></returns>
</member> </member>
<member name="M:DS.WMS.WebApi.Controllers.WmsClearanceController.EditWmsClearanceTrunckInfo(DS.WMS.Core.WmsModule.Dtos.WmsClearanceInput)">
<summary>
维护清关车辆信息
</summary>
<param name="model"></param>
<returns></returns>
</member>
<member name="T:DS.WMS.WebApi.Controllers.WmsFeeController"> <member name="T:DS.WMS.WebApi.Controllers.WmsFeeController">
<summary> <summary>
费用模块 费用模块

@ -9009,3 +9009,10 @@
2023-08-22 14:41:11.7447 Info Adding target ColoredConsoleTarget(Name=console) 2023-08-22 14:41:11.7447 Info Adding target ColoredConsoleTarget(Name=console)
2023-08-22 14:41:11.9806 Info Validating config: TargetNames=console, ownFile-web, ConfigItems=54, FilePath=D:\Code\DS\sdgslk-wms-solution\gslk-wmsapi-service-server\DS.WMS.WebApi\bin\Debug\net6.0\nlog.config 2023-08-22 14:41:11.9806 Info Validating config: TargetNames=console, ownFile-web, ConfigItems=54, FilePath=D:\Code\DS\sdgslk-wms-solution\gslk-wmsapi-service-server\DS.WMS.WebApi\bin\Debug\net6.0\nlog.config
2023-08-22 14:41:12.0164 Warn Unused target detected. Add a rule for this target to the configuration. TargetName: allfile 2023-08-22 14:41:12.0164 Warn Unused target detected. Add a rule for this target to the configuration. TargetName: allfile
2023-08-22 16:20:17.6334 Info Message Template Auto Format enabled
2023-08-22 16:20:17.6648 Info Loading assembly: NLog.Web.AspNetCore
2023-08-22 16:20:17.8204 Info Adding target FileTarget(Name=allfile)
2023-08-22 16:20:17.8356 Info Adding target FileTarget(Name=ownFile-web)
2023-08-22 16:20:17.8619 Info Adding target ColoredConsoleTarget(Name=console)
2023-08-22 16:20:17.9722 Info Validating config: TargetNames=console, ownFile-web, ConfigItems=54, FilePath=D:\Code\DS\sdgslk-wms-solution\gslk-wmsapi-service-server\DS.WMS.WebApi\bin\Debug\net6.0\nlog.config
2023-08-22 16:20:17.9857 Warn Unused target detected. Add a rule for this target to the configuration. TargetName: allfile

Loading…
Cancel
Save