hz_crm_web/src/views/business_ETA_manage/components/ModifySaller.vue

<template>
    <div class="modify-saller-wrap">
        <el-form 
            :model="ruleForm" 
            :rules="rules" 
            ref="ruleForm" 
            label-width="100px" 
            class="demo-ruleForm"
        >
            <el-form-item label="商家名称">
                <span>{{data.BusinessName||''}}</span>
            </el-form-item>
            <el-form-item label="当前销售">
                <span>{{data.SellerName||''}}</span>
            </el-form-item>
            <el-form-item label="移至销售" prop="saller">
                <el-cascader
                    ref="cascader"
                    v-model="ruleForm.saller"
                    :options="salesArr"
                    :show-all-levels="false"
                    :props="{
                        expandTrigger: 'hover',
                        children: 'Child',
                        emitPath: false,
                        label:'AdminName',
                        value:'AdminId',
                    }"
                    collapse-tags
                    filterable
                    clearable
                    placeholder="请选择销售"
                />
            </el-form-item>
            <div style="text-align:center;margin:30px 0">
                <el-button type="primary" plain @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    props:{
        salesArr:{ //销售数据
            type:Array,
            default:()=>{return []}
        },
        data:{ //正在编辑的数据
            type:Object,
            default:()=>{return {}}
        }
    },
    data() {
        return {
            salesArr:[],
            rules:{
                saller:[{required: true, message: '请选择所属销售', trigger: 'change' },],
            },
            ruleForm:{
                saller:''
            }
        }
    },
    created() {},
    methods: {
        handleSave(){
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
                    const cascaderNodes = this.$refs.cascader.getCheckedNodes({leafOnly:true})
                    this.$emit('modifySaller',{
                        saller:Number(cascaderNodes[0]?cascaderNodes[0].value:0),
                        sallerName:cascaderNodes[0]?cascaderNodes[0].label:''
                    })
                    this.initForm()

                }
            })
        },
        initForm(){
            this.ruleForm.saller = ''
            this.$refs.ruleForm.resetFields();
        },
        handleClose(){
            this.initForm()
            this.$emit('close')
        },
    },
}
</script>

<style>

</style>