Arbitrate-Frontend/src/views/officialSeal/components/editManager.vue

<template>
    <div>
        <el-dialog title="修改模板" :visible="editVisable" v-if="editVisable" @close="cancel" width="600px" center>
            <el-form :model="ruleForm" label-position="left" :rules="rules" ref="ruleForm" label-width="90px"
                class="demo-ruleForm">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="模板类型" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option v-for="dict in dict.type.manager_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模板内容" prop="content">
                    <el-input type="textarea" placeholder="请输入内容" v-model="ruleForm.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
                <el-button type="primary" @click="submitUpload" class="endbutton"><span>确认</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { updateManager } from "@/api/officialSeal/officialSeal"
export default {
    props: ["editVisable", "editData", "queryParams"],
    dicts: ["manager_type"],
    data() {
        return {
            data: [],
            flagBtn: false,
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },
                ]
            }
        };
    },
    watch: {
        editData(val) {
            if (val) {
                this.ruleForm = val;
                this.fileList = [];
                this.ruleForm.type = this.ruleForm.type + '';
            }
        }
    },
    created() {

    },
    methods: {
        cancel() {
            this.$emit("cancelEdit");
        },
        // 修改模板
        updateManagerFn(data) {
            updateManager(data).then(res => {
                this.$message.success('修改成功');
                this.$emit("cancelEdit");
                this.$emit('getList', this.queryParams);
            })
        },
        submitUpload() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.updateManagerFn({
                        name: this.ruleForm.name,
                        content: this.ruleForm.content,
                        type: this.ruleForm.type,
                        id:this.ruleForm.id
                    })
                }
            });
        },
    },
};
</script>
  
<style lang="scss" scoped></style>