mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update quill editor

Browse Source
This commit is contained in:
lb 2023-02-08 11:03:26 +08:00
parent 64274e0743
commit 5f84d1da6f
7 changed files with 149 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -32,6 +32,7 @@
"vue": "^2.6.11",
"vue-cron": "^1.0.9",
"vue-i18n": "^8.18.2",
"vue-quill-editor": "^3.0.6",
"vue-router": "3.0.7",
"vuex": "^3.5.1"
},

70
src/components/DialogJustForm.vue
View File

@ -56,6 +56,15 @@
v-bind="col.elparams"
/>
<quillEditor
v-if="col.richInput"
ref="quill-editor"
v-model="dataForm[col.prop]"
:options="col.quillConfig ?? defaultQuillConfig"
style="margin-top: 42px"
:disabled="detailMode"
/>
<div class="" v-if="col.component" style="margin: 42px 0 0">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本 -->
<component
@ -89,6 +98,12 @@ import { pick as __pick } from "@/utils/filters";
import Cookies from "js-cookie";
import uploadBtn from "@/components/uploadBtn";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
function reConstructTreeData(listObj) {
const entry = [];
Object.keys(listObj).map((key) => {
@ -110,7 +125,7 @@ function reConstructTreeData(listObj) {
export default {
name: "DialogJustForm",
components: { uploadBtn },
components: { uploadBtn, quillEditor },
props: {
configs: {
type: Object,
@ -127,10 +142,17 @@ export default {
inject: ["urls"],
data() {
const dataForm = {};
const uploadComponentsList = []; // 保存当前窗口里的上传组件的配置信息的引用
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
if (col.upload) dataForm[col.prop] = col.default ?? [];
else dataForm[col.prop] = col.default ?? null;
// if (col.upload) dataForm[col.prop] = col.default ?? [];
// else dataForm[col.prop] = col.default ?? null;
dataForm[col.prop] = col.default ?? null;
if (col.upload) {
uploadComponentsList.push(col);
}
if (col.fetchData)
col.fetchData().then(({ data: res }) => {
@ -173,8 +195,31 @@ export default {
loadingStatus: false,
dataForm,
detailMode: false,
uploadComponentsList,
baseDialogConfig: null,
defaultQuillConfig: {
modules: {
toolbar: [
[{ font: [] }],
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
["bold", "italic", "underline", "strike"], // toggled buttons
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
// [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
// [{ 'direction': 'rtl' }], // text direction
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
// [{ 'align': [] }],
// ['clean'] // remove formatting button
],
},
theme: "snow",
readOnly: false,
placeholder: "在这里输入描述信息...",
scrollingContainer: null,
},
};
},
created() {
@ -241,6 +286,8 @@ export default {
if (this.dataForm.id) {
// 如果是编辑
this.loadingStatus = true;
// 获取基本信息
this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
@ -252,6 +299,21 @@ export default {
}
this.loadingStatus = false;
});
// 获取文件信息
this.uploadComponentsList.forEach((col) => {
this.$http
.get(col.fetchUrl, {
params: {
limit: 999,
page: 1,
[col.paramName]: this.dataForm.id,
},
})
.then(({ data: res }) => {
console.log("fetch filelist:", res);
});
});
} else {
// 如果不是编辑
}

54
src/components/DialogWithMenu.vue
View File

@ -89,6 +89,25 @@
:disabled="disableCondition(col.prop)"
v-bind="col.elparams"
/>
<quillEditor
v-if="col.richInput"
ref="quill-editor"
v-model="dataForm[col.prop]"
:options="col.quillConfig ?? defaultQuillConfig"
style="margin-top: 42px"
:disabled="disableCondition(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>
</el-col>
@ -131,6 +150,12 @@ import { pick as __pick } from "@/utils/filters";
import SmallDialog from "@/components/SmallDialog.vue";
import BaseListTable from "@/components/BaseListTable.vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
function reConstructTreeData(listObj) {
const entry = [];
Object.keys(listObj).map((key) => {
@ -152,7 +177,7 @@ function reConstructTreeData(listObj) {
export default {
name: "DialogWithMenu",
components: { SmallDialog, BaseListTable },
components: { SmallDialog, BaseListTable, quillEditor },
props: {
configs: {
type: Object,
@ -241,6 +266,29 @@ export default {
subList: [],
showSubDialog: false,
disableXXX: false,
defaultQuillConfig: {
modules: {
toolbar: [
[{ font: [] }],
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
["bold", "italic", "underline", "strike"], // toggled buttons
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
// [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
// [{ 'direction': 'rtl' }], // text direction
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
// [{ 'align': [] }],
// ['clean'] // remove formatting button
],
},
theme: "snow",
readOnly: false,
placeholder: "在这里输入描述信息...",
scrollingContainer: null,
},
};
},
computed: {
@ -371,6 +419,10 @@ export default {
// 出发 upload 界面
},
handleComponentModelUpdate(propName, { subject, payload: { data } }) {
this.dataForm[propName] = JSON.stringify(data);
console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
},
handleSelectChange(col, eventValue) {
console.log("[dialog] select change: ", col, eventValue);
},

12
src/components/noTemplateComponents/richInput.js
View File

@ -10,7 +10,8 @@ export default {
ReadOnlyMode: false,
Placeholder: '在这里输入描述信息...',
ScrollingContainer: null,
editor: null
editor: null,
content: ''
}
},
watch: {
@ -34,11 +35,15 @@ export default {
// 只在 mode 不为 create 的时候，才加载数据
if (val && this.mode !== 'create') {
// this.mode 会比 modelValue 先获得值
this.editor && this.editor.setContents(JSON.parse(val), "user")
this.content = JSON.parse(val)
this.editor && this.editor.setContents(this.content, "user")
} else if (val === null || val === undefined) {
// 当 modelValue 传入空时，清空内容
this.editor && this.editor.setContents('\n', "user")
}
},
content(val) {
this.$emit('update:modelValue', { subject: 'richInput', payload: { data: val } })
}
},
mounted() {
@ -71,7 +76,8 @@ export default {
})
this.editor.on('text-change', (delta, oldDelta, source) => {
this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
this.content = this.editor.getContents()
// this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
})
},
methods: {

7
src/views/modules/pms/car/config.js
View File

@ -9,7 +9,7 @@ export default function () {
{ prop: "name", label: "窑车号" },
{ prop: "code", label: "编码" },
// { prop: "typeDictValue", label: "过渡车", filter: val => ['否', '是'][val] },
{ prop: "status", label: "状态", subcomponent: switchBtn }, // subcomponent
{ prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
// { prop: "currentQty", label: "载量" },
// { prop: "currentPos", label: "当前位置" },
// { prop: "description", label: "描述" },
@ -78,7 +78,10 @@ export default function () {
elparams: { placeholder: "请输入料仓编码" },
},
],
[{ component: QuillRichInput, label: "描述信息", prop: "description" }],
// [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
[{
richInput: true, label: "描述信息", prop: "description"
}],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],
operations: [

6
src/views/modules/pms/equipment/config.js
View File

@ -2,7 +2,7 @@ import TableOperaionComponent from '@/components/noTemplateComponents/operationC
import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
import switchBtn from '@/components/noTemplateComponents/switchBtn'
import { timeFilter } from '@/utils/filters'
import QuillRichInput from "@/components/noTemplateComponents/richInput";
export default function () {
@ -72,6 +72,10 @@ export default function () {
elparams: { placeholder: '选择一个设备类型' }
},
],
[{
richInput: true, label: "描述信息", prop: "description"
}],
// [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
[{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
],
operations: [

11
src/views/modules/pms/equipmentType/config.js
View File

@ -95,7 +95,16 @@ export default function () {
],
// [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
[{ upload: true, actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType', label: "上传资料", fileList: [], prop: "upload", elparams: null }],
[{
upload: true,
actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType',
fetchUrl: '/pms/equipmentTypeFile/page',
label: "上传资料",
fileList: [],
prop: "upload",
paramName: 'equipmentTypeId',
elparams: null
}],
],
operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false },