update richInput.js & done 窑车表
This commit is contained in:
parent
bb4f5a45e2
commit
65ee2fe0d7
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<el-dialog class="dialog-just-form" :visible.sync="selfVisible" @closed="resetForm" :distory-on-close="true" :close-on-click-modal="configs.clickModalToClose ?? true">
|
||||
<el-dialog
|
||||
class="dialog-just-form"
|
||||
:visible.sync="selfVisible"
|
||||
@closed="resetForm"
|
||||
:distory-on-close="true"
|
||||
:close-on-click-modal="configs.clickModalToClose ?? true"
|
||||
>
|
||||
<!-- title -->
|
||||
<div slot="title" class="dialog-title">
|
||||
<h1 class="">
|
||||
@ -33,8 +39,15 @@
|
||||
:disabled="detailMode"
|
||||
/>
|
||||
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
|
||||
<div class="" v-if="col.component" style="margin: 42px 0 0;">
|
||||
<component :is="col.component" :key="'component_' + col.prop" />
|
||||
<div class="" v-if="col.component" style="margin: 42px 0 0">
|
||||
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本 -->
|
||||
<component
|
||||
:is="col.component"
|
||||
:key="'component_' + col.prop"
|
||||
@update:modelValue="handleComponentModelUpdate(col.prop, $event)"
|
||||
:modelValue="dataForm[col.prop]"
|
||||
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create' "
|
||||
/>
|
||||
</div>
|
||||
<!-- add more... -->
|
||||
</el-form-item>
|
||||
@ -67,9 +80,9 @@ export default {
|
||||
configs: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
clickModalToClose: true,
|
||||
forms: null
|
||||
}),
|
||||
clickModalToClose: true,
|
||||
forms: null,
|
||||
}),
|
||||
},
|
||||
},
|
||||
inject: ["urls"],
|
||||
@ -143,6 +156,7 @@ export default {
|
||||
if (excludeId && key === "id") return;
|
||||
this.dataForm[key] = null;
|
||||
});
|
||||
console.log("[Dialog Just Form] cleared form...", this.dataForm);
|
||||
this.$refs.dataForm.clearValidate();
|
||||
},
|
||||
immediate ? 0 : 100
|
||||
@ -189,9 +203,16 @@ export default {
|
||||
// console.log("[dialog] select change: ", col, eventValue);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
handleSwitchChange(val) {
|
||||
console.log("[dialog] switch change: ", val, this.dataForm);
|
||||
},
|
||||
|
||||
handleComponentModelUpdate(propName, { subject, payload: { data } }) {
|
||||
this.dataForm[propName] = JSON.stringify(data);
|
||||
console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
|
||||
},
|
||||
|
||||
handleBtnClick(payload) {
|
||||
console.log("btn click payload: ", payload);
|
||||
|
||||
|
||||
@ -4,13 +4,13 @@ import 'quill/dist/quill.snow.css'
|
||||
// 富文本组件
|
||||
export default {
|
||||
name: 'QuillRichInput',
|
||||
props: ['readonly', 'placeholder', 'scroll']
|
||||
,
|
||||
props: ['readonly', 'placeholder', 'scroll', 'modelValue', 'mode'],
|
||||
data() {
|
||||
return {
|
||||
ReadOnlyMode: false,
|
||||
Placeholder: '',
|
||||
ScrollingContainer: null
|
||||
Placeholder: '在这里输入描述信息...',
|
||||
ScrollingContainer: null,
|
||||
editor: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -18,14 +18,30 @@ export default {
|
||||
this.ReadOnlyMode = val
|
||||
},
|
||||
placeholder(val) {
|
||||
this.Placeholder = val
|
||||
if (val) this.Placeholder = val
|
||||
},
|
||||
scroll(val) {
|
||||
this.ScrollingContainer = val
|
||||
},
|
||||
// modelValue(val) {
|
||||
// // 这样不行，会导致编辑时富文本内容是反过来的...
|
||||
// console.log('[modelValue] val is: ', val)
|
||||
// this.editor && this.editor.setContents(JSON.parse(val), "user")
|
||||
// }
|
||||
modelValue(val) {
|
||||
// 如果 mode 是 detail 就不允许编辑
|
||||
if (this.mode === 'detail') this.editor && this.editor.enable(false)
|
||||
// 只在 mode 不为 create 的时候，才加载数据
|
||||
if (val && this.mode !== 'create') {
|
||||
// this.mode 会比 modelValue 先获得值
|
||||
this.editor && this.editor.setContents(JSON.parse(val), "user")
|
||||
} else if (val === null || val === undefined) {
|
||||
// 当 modelValue 传入空时，清空内容
|
||||
this.editor && this.editor.setContents('\n', "user")
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('[Quill Editor] ref:', this.$refs['quill-editor'])
|
||||
/** https://blog.csdn.net/qq_36947168/article/details/119486710 */
|
||||
/** https://quilljs.com/docs/modules/toolbar/ */
|
||||
const toolbarOptions = [
|
||||
@ -35,16 +51,16 @@ export default {
|
||||
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
|
||||
['blockquote', 'code-block'],
|
||||
[{ 'header': 1 }, { 'header': 2 }], // custom button values
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
||||
// [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
|
||||
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
|
||||
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
|
||||
[{ 'direction': 'rtl' }], // text direction
|
||||
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ 'align': [] }],
|
||||
// ['clean'] // remove formatting button
|
||||
];
|
||||
// const editor = new Quill(this.$refs['quill-editor'], this.defaultConfig)
|
||||
const editor = new Quill(this.$refs['quill-editor'], {
|
||||
|
||||
this.editor = new Quill(this.$refs['quill-editor'], {
|
||||
modules: {
|
||||
toolbar: toolbarOptions
|
||||
},
|
||||
@ -53,8 +69,13 @@ export default {
|
||||
placeholder: this.Placeholder,
|
||||
scrollingContainer: this.ScrollingContainer
|
||||
})
|
||||
|
||||
this.editor.on('text-change', (delta, oldDelta, source) => {
|
||||
this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
methods: {},
|
||||
render: function (h) {
|
||||
return h('div', { ref: 'quill-editor', domProps: { id: 'quill-editor' } })
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export default function () {
|
||||
{ prop: "status", label: "状态", subcomponent: switchBtn }, // subcomponent
|
||||
// { prop: "currentQty", label: "载量" },
|
||||
// { prop: "currentPos", label: "当前位置" },
|
||||
{ prop: "description", label: "描述" },
|
||||
// { prop: "description", label: "描述" },
|
||||
{ prop: "remark", label: "备注" },
|
||||
{
|
||||
prop: "operations",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user