mt-fe-group/mt-yd-ui
13
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add CKEditor & update dialog

Browse Source
This commit is contained in:
g7hoo
2022-08-16 14:07:33 +08:00
parent 51022a6e6d
commit 535004719c
5 changed files with 211 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/base-dialog/addOrUpdate/index.vue
View File

@@ -4,7 +4,8 @@
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局 -->
<el-row v-for="n in rows" :key="n" :gutter="20">
<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="getSpan(n, c)">
<!-- <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> -->
<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
<el-form-item
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
@@ -44,9 +45,10 @@
<!-- extra components , like Markdown or RichEdit -->
<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
<!-- <component :is="ec.component" v-model="dataForm[ec.name]"></component> -->
<component :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files"/>
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label" class="extra-components">
<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
<component v-else :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files" />
</el-form-item>
</template>
</el-form>
@@ -244,26 +246,39 @@ export default {
/** 计算默认值 */
function calDefault(type) {
switch (type) {
case 'array':
case 'array':
return []
// more case...
default:
default:
return ''
}
}
/** 检查是否需要额外的组件 */
this.configs.extraComponents &&
this.configs.extraComponents.forEach(item => {
this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
if (Object.hasOwn(this.dataForm, [item.name])) {
console.log('有了!')
return
} else {
console.log('新建！')
this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
}
console.log('component: ', item.component)
})
/** 单独设置 id */
this.$set(this.dataForm, 'id', null)
console.log('mounted: this.dataForm', JSON.stringify(this.dataForm))
})
console.log("mounted: this.dataForm", JSON.stringify(this.dataForm))
},
methods: {
getSpan(n, c) {
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
return opt && opt.span ? opt.span : 24 / COLUMN_PER_ROW
},
getLabel(n, c) {
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
if (opt) {
@@ -327,18 +342,22 @@ export default {
if (this.shouldWait)
this.shouldWait.then(() => {
if (this.tempForm.length) {
console.log("create new, tempform", JSON.stringify(this.tempForm.length))
console.log('create new, tempform', JSON.stringify(this.tempForm.length))
this.tempForm.forEach(item => {
console.log('item data', item.data)
this.dataForm[item.name] = item.data
})
console.log("create new, dataform", JSON.stringify(this.dataForm))
console.log('create new, dataform', JSON.stringify(this.dataForm))
}
})
}
})
},
handleEditorReady(val) {
console.log('editor rready..', val)
},
handleClick(btn) {
/** 提取url */
const urls = {}
@@ -354,6 +373,8 @@ export default {
/** 需要验证表单的操作 */
this.$refs['dataForm'].validate(valid => {
if (valid) {
console.log('before send: ', this.dataForm)
this.$http({
url: this.$http.adornUrl(urls[btn.name].url),
method: btn.name === 'save' ? 'POST' : 'PUT',
@@ -403,7 +424,11 @@ export default {
handleUploadListUpdate(filelist) {
// 此处需要参照‘设备类型’新增的接口，灵活地设置 dataForm
this.$set(this.dataForm, 'fileIds', filelist.map(item => item.id))
this.$set(
this.dataForm,
'fileIds',
filelist.map(item => item.id)
)
console.log('handleUploadListUpdate(): ', this.dataForm)
},