eta_front/src/views/chartRelevance_manage/relevance/components/modifyClassifyDialog.vue

<template>
    <div class="Dialog-box">
        <el-dialog
        :visible.sync="isOpenDialog"
        :close-on-click-modal="false"
        :modal-append-to-body='false'
        @close="cancelHandle"
        custom-class="dialog"
        center
        width="560px"
        v-dialogDrag>
            <div slot="title" style="display:flex;alignItems:center;">
                <img :src="type=='add'?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
                <span style="fontSize:16px;">{{type==='add' ? $t('Table.add_btn') : $t('Table.edit_btn')}}</span>
            </div>
            <div class="dialog-main">
                <el-form
                ref="diaForm"
                label-position="left"
                hide-required-asterisk
                label-width="120px"
                :model="formData"
                :rules="formRules">
                    <el-form-item :label="$t('OnlineExcelPage.parent_directory_lable')" v-if="formData.level>0">
                        <el-tooltip class="item" effect="dark" :content="getParentName" placement="top">
                            <span class="parentStr">{{getParentName}}</span>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item :label="$t('EtaBasePage.menu_name')" prop="levelVal">
                        <el-input
                        v-model="formData.levelVal"
                        style="width: 80%"
                        :placeholder="$t('Dialog.require_vaild')"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="dia-bot">
                <el-button type="primary" style="margin-right:20px" @click="saveHandle"><!-- 保存 -->{{$t('Dialog.confirm_save_btn')}}</el-button>
                <el-button type="primary" plain @click="cancelHandle"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import chartRelevanceApi from "@/api/modules/chartRelevanceApi.js";
export default {
    props: {
        isOpenDialog: {
            type: Boolean,
        },
        type:{
            type:String,
            default:'add'
        },
        formData: {
            type: Object,//{parentArr父级数据}
        }
    },
    computed:{
        getParentName(){
            const arr=this.formData.parentArr||['无']
            let strArr=arr.reverse().map(item=>{
                return item.classifyName
            })
            
            return strArr.join('/')
        }
    },
    data () {
        return {
            formRules: {
                levelVal:[
                    { required: true, message: this.$t('EtaBasePage.input_menu_msg'), trigger: 'blur' },
                ],
            },
            options:  [],

        };
    },
    methods: {
        async saveHandle() {
            await this.$refs.diaForm.validate();
            let addParams = {
                ChartClassifyName:this.formData.levelVal,
                Level:this.formData.level,
                ParentId:this.formData.parent_id,
            }
            let editParams = {
                ChartClassifyName:this.formData.levelVal,
                ChartClassifyId:this.formData.nodeId
            }
            const res = this.type==='add'?await chartRelevanceApi.classifyAdd(addParams):await chartRelevanceApi.classifyEdit(editParams)
            if(res.Ret!==200) return 
            this.$message.success(`${this.type==='add'?'新增':'编辑'}成功`)
            this.callbackHandle()


        },
        /* 成功回调 */
        callbackHandle(type) {
            this.$refs.diaForm.resetFields();
            this.$emit('sucessCallback',type)
        },
        /* 取消 */
        cancelHandle() {
            this.$refs.diaForm.resetFields();
            this.$emit('closeDia')
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang='scss'>
.Dialog-box {
    .parentStr{
        display: block;
        width: 304px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .dialog-main {
        padding-left: 50px;
    }
    .el-cascader .el-input {
        width: 100%;
    }
    .dia-bot {
        margin: 52px 0 30px;
        display: flex;
        justify-content: center;

    }
    }
</style>