jjx-web/pages/process/quote.vue

<template>
    <view>
        <top-bar></top-bar>
        <common-header></common-header>
        <category-bar></category-bar>

        <view class="page-nav">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <navigator style="display: inline-block;" url="/pages/process/list">找加工</navigator>
                </el-breadcrumb-item>
                <el-breadcrumb-item>填写报价信息</el-breadcrumb-item>
            </el-breadcrumb>
        </view>

        <view class="page-main">
            <quote-remain-num v-if="reloaded" :amount="sheet.quoteAmount" type="process" :id="sheetId"/>
            <vk-data-form
                ref="form1"
                v-model="form1.data"
                :action="form1.props.action"
                :columns="form1.props.columns"
                :rules="form1.props.rules"
                :form-type="form1.props.formType"
                :loading.sync="form1.props.loading"
                :auto-close="true"
                label-width="180px"
                :show-cancel="false"
                @success="onFormSuccess"
                :need-alert="false"
                @fail="onFormFail"
            >
                <template v-slot:totalPrice>
                    <el-input v-model="form1.data.totalPrice" placeholder="请输入货款总价" @change="formatNumber"></el-input>
                </template>
            </vk-data-form>
        </view>

        <common-footer></common-footer>
    </view>
</template>

<script>
export default {
    data() {
        return {
            reloaded: false,
            sheet: null,
            sheetId: null,
            // 表单相关开始-----------------------------------------------------------
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {
                    // radio: 1,
                    // checkbox : [1,2]
                    sheetId: null,
                    totalPrice: null,
                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "client/process/quote/kh/addQuote",
                    // 表单字段显示规则
                    columns: [
                        {key: "totalPrice", title: "加工总价(人民币:元)", type: "html"},
                        {key: "files", title: "附件", type: "file", accept: '.pdf', tips: '仅限PDF格式附件或合同，非协议合同将读取为合同附件，请仔细核查'},
                        {key: "remark", title: "报价单详情", type: "textarea"},
                        {key: "supplierExt", title: "合同补充条款", type: "textarea"},
                    ],
                    // 表单验证规则
                    rules: {
                        totalPrice: [
                            {required: true, message: "货款总价不能为空", trigger: "change,blur"},
                        ]
                    },
                    // add 代表添加 update 代表修改
                    formType: "",
                    // 表单是否在请求中
                    loading: false,
                    // 是否显示表单1 的弹窗
                    show: false
                }
            },
            // 表单相关结束-----------------------------------------------------------
        };
    },
    onLoad(options = {}) {
        console.log(options)
        const {
            sheetId
        } = options
        if (!sheetId) {
            vk.navigateBack()
            return
        }

        this.sheetId = sheetId
        this.form1.data.sheetId = sheetId
        this.getDetail()
    },
    computed: {

        totalPriceStr() {
            if (this.totalPrice == 0) {
                return "零元"
            }
            return vk.myfn.convertCurrency(this.totalPrice / 100)
        }
    },
    methods: {
        onFormSuccess() {
            vk.redirectTo({url: `/pages/process/detail?id=${this.sheetId}`})
        },
        onFormFail(data) {
            if (data.data.code === 12) {
                this.$confirm(data.data.msg, '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'warning'
                }).then(() => {
                    vk.redirectTo({url: `/pages/user/user?menu=grade`})
                })
            }else {
                this.$confirm(data.data.msg, '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'warning'
                }).then(() => {
                    vk.navigateBack()
                })
            }
        },
        // 提交报价单
        async submit() {

            const data = await vk.userCenter.getCurrentUserInfo();
            const {userInfo} = data
            if (userInfo.quoteTimes > 3) {

            }

            vk.callFunction({
                url: 'client/process/quote/kh/addQuote',
                title: '请求中...',
                // data: {
                //     sheet: this.sheet,
                //     totalPrice: this.totalPrice
                // },
                success: (data) => {
                    this.$message({
                        message: "报价成功",
                        type: 'success'
                    })
                    vk.navigateBack()
                }
            });
        },
        /**
         * 获取询价单详情
         */
        getDetail() {
            vk.callFunction({
                url: 'client/process/sheet/pub/getInfo',
                title: '请求中...',
                data: {
                    id: this.sheetId
                },
                success: (res) => {
                    this.sheet = res
                }
            });
        },
        formatNumber(e){
            this.form1.data.totalPrice = parseFloat(this.form1.data.totalPrice).toFixed(2)
        }
    },
    onShow() {
        this.reloaded = false
        setTimeout(() => {
            this.reloaded = true
        }, 500)
    }
}
</script>

<style lang="scss" scoped>
.page-main {
    width: 1200px;
    margin: 20px auto;
    background-color: #FFFFFF;
    padding: 20px;
}

.description {
    margin-bottom: 40px;
    width: 800px;
}

.quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote-form {
    width: 260px;
}

.form-footer {
    height: 40px;
    line-height: 40px;
    background: #fff;
    padding-top: 0;
    text-align: center;
    display: block;
}
</style>