107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<el-dialog v-model="addShow" :title="title" width="1200px" draggable :close-on-click-modal="false" >
|
||
|
|
<el-form :model="form" ref="ruleFormRef" label-width="88px" :rules="formRules" style="padding: 0 80px 0px 0;">
|
||
|
|
<el-form-item label="标题：" prop="title">
|
||
|
|
<el-input v-model.trim="form.title" placeholder="请输入标题" clearable maxlength="30" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="分类" prop="category">
|
||
|
|
<el-select v-model="form.category" placeholder="Select" clearable filterable>
|
||
|
|
<el-option v-for="item in categoryList.list" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<editorWang ref="editorWangRef"></editorWang>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="cancelFn">取消</el-button>
|
||
|
|
<el-button type="primary" @click="publishFn">
|
||
|
|
确认发布
|
||
|
|
</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import editorWang from "components/com/editorWang.vue"
|
||
|
|
const emits = defineEmits(['send'])
|
||
|
|
const addShow = ref(false)
|
||
|
|
let title = ref("新增")
|
||
|
|
const editorWangRef = ref()
|
||
|
|
|
||
|
|
const ruleFormRef: any = ref()
|
||
|
|
const form = reactive({
|
||
|
|
title: '',
|
||
|
|
category: '',
|
||
|
|
editorText: ''
|
||
|
|
})
|
||
|
|
const categoryList = reactive({
|
||
|
|
list: [{
|
||
|
|
|
||
|
|
value: 'Option1',
|
||
|
|
label: 'Option1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'Option2',
|
||
|
|
label: 'Option2',
|
||
|
|
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
|
||
|
|
const formRules = reactive<FormRules<any>>({
|
||
|
|
title: [
|
||
|
|
{ required: true, message: '请输入标题', trigger: 'blur' },
|
||
|
|
],
|
||
|
|
category: [
|
||
|
|
{ required: true, message: '请选择分类', trigger: 'change' },
|
||
|
|
]
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
const publishFn = () => {
|
||
|
|
if (!ruleFormRef) return
|
||
|
|
ruleFormRef.value.validate((valid: any) => {
|
||
|
|
if (valid) {
|
||
|
|
const editVal= editorWangRef.value.getHtmlByFather()
|
||
|
|
console.log("editVal",editVal)
|
||
|
|
|
||
|
|
console.log('submit!')
|
||
|
|
} else {
|
||
|
|
console.log('error submit!')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const cancelFn = (formEl: FormInstance | undefined) => {
|
||
|
|
if (!ruleFormRef) return
|
||
|
|
ruleFormRef.value.resetFields()
|
||
|
|
editorWangRef.value.editorClear()
|
||
|
|
addShow.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const open = (val: any) => {
|
||
|
|
title.value = "新增"
|
||
|
|
addShow.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const edit = () => {
|
||
|
|
title.value = "编辑"
|
||
|
|
addShow.value = true
|
||
|
|
editorWangRef.value.setHtmlByFather("<p>head</p><p>hello <strong>word</strong></p>")
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
open,
|
||
|
|
edit
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|