nuttyreading-master-html/src/views/modules/order/set-deliver-dialog.vue

<template>
    <div>
        <el-dialog title="发出配置" :close-on-click-modal="false" :visible.sync="visible" width='500px'
            :before-close="beforeCloseDialog" append-to-body>
            <!-- <el-steps :active="stepsActive" simple style="margin-bottom: 20px;;">
                    <el-step title="获取电子面单" icon="el-icon-tickets"></el-step>
                    <el-step title="打印电子面单" icon="el-icon-printer"></el-step>
                </el-steps> -->
            <!-- <el-alert style="margin-bottom: 15px;" v-if="selectData.length > 0"
                    :title="`您正在对 ${selectData.length} 条数据进行发出操作。`" :closable="false" type="success">
                </el-alert> -->
            <el-form v-if="ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="选择物流" prop="deliverLcd">
                    <el-select size="mini" v-model="ruleForm.deliverLcd" placeholder="请选择物流" @change="selectChanged">
                        <el-option v-for="(item, index) in expressList" :label="item.expressName" :key="index"
                        :value="item.expressCode" ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="primary" @click="setDevliverHandle">立即发出</el-button>
            </div>
        </el-dialog>
        <!-- <ul class="print-ul" style="display: block;">
                <li v-for="(item, index) in printArr" :key="index" :id="'printDiv' + index"
                    style="page-break-after:always;">
                    <div v-html="item"></div>
                </li>
            </ul> -->

</div>
</template>

<script>

export default {
    name: 'printOrderDialog',
    props: {
        visible: {
            type: Boolean,
            value: true
        },
        selectData: {
            type: Array,
            value: []
        }
    },
    data() {
        return {
            // 快递列表
            expressList: [],
            fullscreenLoading: false,
            // 后台返回的面单的打印数组：
            printArr: [],
            stepsActive: 1,  // 当前step激活索引值
            ruleForm: {
                deliverLcd: '',
                dictValue: ''
            },
            orderDetailIdList: [],
            rules: {
                deliverLcd: [
                    { required: true, message: '请先选择物流公司', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        // 获取物流列表
        this.getExpressList()
    },
    methods: {
        // 获取快递公司列表
        getExpressList() {           
            this.$http({
                // url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
                url: this.$http.adornUrl('/express/getExpressCompanyList'),
                method: 'get',
            }).then(({ data }) => {
                // console.log(data, '快递列表')
                this.expressList = data.result
            }).catch(({ e }) => {
                console.log(e,'e')
            })
        },
        selectChanged(val) {
            console.log(val)
            if (this.expressList && this.expressList.length > 0) {
                this.expressList.forEach(element => {
                    if (element.expressCode == val) {
                        return this.ruleForm.dictValue = element.expressName
                    }                    
                });
            }           
        },        
        // 关闭页面
        beforeCloseDialog() {
            this.$emit('closeDeliverDialog', false)
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            
           /// this.selectData = []
        },
        // 发出操作
        setDevliverHandle() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在处理，请稍后...',
                        spinner: 'Loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    // 发送后台请求
                    this.$http({
                        url: this.$http.adornUrl(`/book/buyOrder/delivery/${this.ruleForm.deliverLcd}`),
                        method: 'post',
                        params: this.$http.adornParams({
                            "shipperName": this.ruleForm.dictValue
                        }),
                        data: this.selectData,
                        // 传orderid 
                    }).then(({ data }) => {
                        //  console.log(data)
                        loading.close();
                        if (data && data.code === 0) {
                            console.log(data)
                            this.beforeCloseDialog()  // 关闭弹窗                        
                            return this.$message.success('发出成功')
                        } else {
                            this.beforeCloseDialog()  // 关闭弹窗
                            return this.$message.error('发出失败')

                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                }
            })
        }
    },

}

</script>
<style>
.content {
    text-align: center;
    margin-top: 15px;
}

.el-step {
    font-size: 20px;
    vertical-align: middle;
    line-height: 0;
}
</style>