@@ -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" | |||
}, | |||
@@ -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 { | |||
// 如果不是编辑 | |||
} | |||
@@ -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); | |||
}, | |||
@@ -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: { | |||
@@ -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: [ | |||
@@ -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: [ | |||
@@ -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 }, | |||