hz_crm_web/src/views/system_manage/components/logSetDialog.vue

<template>
    <el-dialog
        :visible.sync="isLogSetShow"
        :close-on-click-modal="false"
        :modal-append-to-body='false'
        title="添加日志"
        @close="closeDia"
        width="820px"
        v-dialogDrag
        center
    >
        <div class="log-set-wrap">
            <el-form :model="formData" :rules="rules" inline label-width="80px" ref="logForm">
                <el-form-item label="版本号" prop="Version">
                    <el-input v-model="formData.Version" placeholder="请输入版本号" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="更新内容" prop="Content" class="update-text">
                    <div class="rich-editor-wrap">
                        <froala :id="`log-editor`"
                            :ref="`logEditor`" 
                            :tag="'textarea'" 
                            :config="richEditorConfig" v-model="formData.Content">
                        </froala>
                    </div>
                </el-form-item>
                <el-form-item label="更新日期" prop="UpdateDate">
                    <el-date-picker
                        v-model="formData.UpdateDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
                <el-button type="primary" plain style="width:200px;" @click="closeDia">取消</el-button>
                <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveLog">保存</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props:{
        isLogSetShow:{
            type:Boolean,
            default:false
        },
        logInfo:{
            type:Object,
            default:()=>{ return {}}
        }
        
    },
    watch:{
        isLogSetShow(newVal){
            if(newVal){
                this.logInfo.Version?(this.formData = _.cloneDeep(this.logInfo)):(this.formData = {Content:''})
            }
        }
    },
    data() {
        return {
            value1:'',
            formData:{},
            rules:{
                Version:[{ required: true, message: '请输入版本号', trigger: 'blur' }],
                Content:[{ required: true, message: '请输入更新内容', trigger: 'blur' }],
                UpdateDate:[{ required: true, message: '请选择更新日期', trigger: 'blur' }]
            },
            richEditorConfig:{
                toolbarButtons:[
                    'textColor',
                    'bold',
                    'italic',
                    'underline',
                    'fontFamily',
                    'fontSize',
                    'align',
                    'outdent',
                    'indent',
                    'specialCharacters',
                    'insertHR',
                    'selectAll',
                    'clearFormatting',
                    'undo',
                    'redo',
                ],
                height:220,
                fontSizeDefaultSelection: "16",
                quickInsertEnabled: false,
                pasteAllowedStyleProps: ['font-family', 'font-size', 'color'],
                language: "zh_cn",
                placeholderText:'请输入更新内容',
                wordPasteKeepFormatting:false,
                pastePlain:true,
                wordPasteModal:false,
                pluginsEnabled:['colors'],//定义可用插件
            },//富文本编辑器配置项
        };
    },
    methods: {
        closeDia(){
            this.$emit('close')
        },
        saveLog(){
            this.$emit('saveLog',this.formData)
        }
    },
};
</script>

<style lang="scss">
.log-set-wrap{
    .el-form{
        .el-form-item.update-text{
            display: flex;
            .el-form-item__content{
                flex:1;
            }
        }
    }
}
</style>
<style scoped lang="scss">

</style>