Smart_platform_ui/src/views/tirePartsMall/purchasingManagement/warehouseEntryOrder/detailsPage.vue

<template>
    <div>
        <div class="customer-head">
            <div class="customer-back">
                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                    @click="backToList(0)">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                       <el-button class="el-button&#45;&#45;small-yh" style="margin-right: 10px" type="primary" size="small" v-if="form.id"
                                  @click="confirmEditing">编辑
                       </el-button>
                <el-button class="el-button--small-yh" type="primary" size="small" v-if="form.statusName != '已入库'"
                    @click="editCustomer">保存数据
                </el-button>
                <el-button class="el-button--small-yh" type="success" size="small"
                    v-if="form.statusName == '待入库' || form.statusName == '已撤销'" @click="complete">入库完成
                </el-button>
                <el-button class="el-button--small-yh" type="success" size="small" v-if="form.statusName == '已入库'"
                    @click="revoke">撤销入库
                </el-button>
            </div>
        </div>
        <div style="margin-top: 50px">
            <trade-card title="基础信息">
                <avue-form :option="optionForm" v-model="form" ref="form"></avue-form>
            </trade-card>
            <trade-card title="明细信息">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="入库明细" name="sale_detail">
                        <avue-crud :option="optionContacts" v-model="formContacts" ref="formContacts"
                            :data="form.shipItemsList" :key="key" @row-save="rowSave" @row-update="rowUpdate"
                            @resetColumn="resetColumnTwo('formContacts', 'optionContacts', 'optionContactsBack', 274.1)"
                            @saveColumn="saveColumnTwo('formContacts', 'optionContacts', 'optionContactsBack', 274.1)">
                            <template slot-scope="{type,size,row,index,disabled}" slot="menu">
                                <el-button :size="size" :disabled="disabled" :type="type"
                                    :icon="row.$cellEdit ? 'el-icon-plus' : 'el-icon-edit'"
                                    @click="rowEdit(row, index)">编辑
                                </el-button>
                                <el-button icon="el-icon-delete" :size="size" :disabled="disabled || form.statusName == '已入库'" :type="type"
                                    @click="rowDelBox(row, index)">删除
                                </el-button>
                            </template>
                            <template slot-scope="{scope,row}" slot="menuLeft">
                                <el-button type="primary" icon="el-icon-plus" size="small" 
                                    @click="rowAdd(row,score)" :disabled="isrowAdd">添加轮胎</el-button>
                                <el-button type="success" size="small" icon="el-icon-bottom" @click="excelBox = true">导入
                                </el-button>
                                <el-button type="primary" icon="el-icon-printer" size="small"
                                    @click="handlePrint">打印</el-button>
                            </template>
                        </avue-crud>
                    </el-tab-pane>
                    <el-tab-pane label="采购信息" name="payment_details">
                        <avue-crud :option="optionPaymentDetails" ref="payment_details" :data="form.shipVOList" :key="key"
                            @resetColumn="resetColumnTwo('payment_details', 'optionPaymentDetails', 'optionPaymentDetailsBack', 274.2)"
                            @saveColumn="saveColumnTwo('payment_details', 'optionPaymentDetails', 'optionPaymentDetailsBack', 274.2)">
                        </avue-crud>
                    </el-tab-pane>
                    <el-tab-pane label="历史记录" name="outbound_records">
                        <avue-crud :option="optionOutboundRecords" ref="outbound_records" :data="form.historyList"
                            :key="key"
                            @resetColumn="resetColumnTwo('outbound_records', 'optionOutboundRecords', 'optionOutboundRecordsBack', 274.3)"
                            @saveColumn="saveColumnTwo('outbound_records', 'optionOutboundRecords', 'optionOutboundRecordsBack', 274.3)">
                        </avue-crud>
                    </el-tab-pane>
                </el-tabs>
            </trade-card>
            <report-dialog :switchDialog="switchDialog" :reportId="form.id" @onClose="onClose()"></report-dialog>
        </div>
        <el-dialog title="导入明细" append-to-body :visible.sync="excelBox" v-if="excelBox" width="555px"
            :close-on-click-modal="false" v-dialog-drag>
            <avue-form :option="excelOption" v-model="excelForm" table-loading="excelLoading" :upload-before="uploadBefore"
                :upload-after="uploadAfter">
                <template slot="excelTemplate">
                    <el-button type="primary" @click="derivation">
                        点击下载<i class="el-icon-download el-icon--right"></i>
                    </el-button>
                </template>
            </avue-form>
            <p style="text-align: center;color: #DC0505">
                温馨提示 第一次导入时请先下载模板
            </p>
        </el-dialog>
    </div>
</template>

<script>

import {
    getDetails,
    tradingBox,
    submit,
    warehousingComplete,
    revoke,
    goodsDetail,
    dotList,
    getWarehouseKeeper
} from "@/api/tirePartsMall/purchasingManagement/warehouseEntryOrder";
import { dateFormat } from "@/util/date";
import { getToken } from "@/util/auth";
import { getMenu } from "@/api/system/menu";
import reportDialog from "@/components/report-dialog/main";
export default {
    name: "detailsPage",
    data() {
        return {
            switchDialog: false,
            activeName: "sale_detail",
            disabled: false,
            isrowAdd:true,
            excelBox: false,
            excelOption: {
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: "模板下载",
                        prop: "excelTemplate",
                        formslot: true,
                        span: 24
                    },
                    {
                        label: "导入明细",
                        prop: "excelFile",
                        type: "upload",
                        drag: true,
                        loadText: "上传中，请稍等",
                        accept: '.xls,.xlsx',
                        span: 24,
                        propsHttp: {
                            res: "data"
                        },
                        tip: "请上传 .xls,.xlsx 标准格式文件",
                        action: "/api/blade-sales-part/ship/import-item"
                    }
                ]
            },
            excelForm: {},
            form: {
                shipItemsList: [],
                shipVOList: [],
                historyList: []
            },
            key: 0,
            optionForm: {
                disabled: false,
                menuBtn: false,
                labelWidth: 100,
                columnBtn: false,
                span: 8,
                column: [
                    {
                        label: "业务对象",
                        prop: "customerId",
                        disabled:false,
                        type: 'select',
                        props: {
                            label: 'cname',
                            value: 'id'
                        },
                        dicUrl: '/api/blade-sales-part/corpsDesc/listAll?corpType=GYS',
                        rules: [
                            {
                                required: true,
                                message: " ",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "仓库",
                        prop: "storageId",
                        search: true,
                        overHidden: true,
                        type: 'select',
                        dicUrl: "/api/blade-sales-part/storageDesc/listAll",
                        disabled:false,
                        props: {
                            label: 'cname',
                            value: 'id'
                        },
                        
                        rules: [
                            {
                                required: true,
                                message: " ",
                                trigger: "blur"
                            }
                        ],
                        // change:(data)=>{
                        // //   console.log(this.$refs);
                        // getWarehouseKeeper({salesCompanyId:this.form.storageId}).then((res)=>{
                        //     console.log(res.data.data);
                        //     this.form.stockClerkId = res.data.data[0].id
                        // })
                        // }
                    },
                    {
                        label: '库管',
                        prop: "stockClerkId",
                        type: 'select',
                        disabled:false,
                        props: {
                            label: 'realName',
                            value: 'id'
                        },
                        dicUrl: '/api/blade-user/stockClerkList',
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "轮胎数量",
                        prop: "goodsTotalNum",
                        search: false,
                        overHidden: true,
                        disabled:false,
                        // width: 120,
                        // rules: [
                        //     {
                        //         required: true,
                        //         message: " ",
                        //         trigger: "blur"
                        //     }
                        // ]
                    },
                    {
                        label: "业务日期",
                        prop: "createTime",
                        disabled:false,
                        type: "datetime",
                        value: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
                        format: "yyyy-MM-dd HH:mm",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        rules: [
                            {
                                required: true,
                                message: "",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "入库单号",
                        prop: "billno",
                        disabled:false,
                    },
                    {
                        label: "来源单号",
                        prop: "ordNo",
                        disabled:false,

                    }, {
                        label: '备注',
                        disabled:false,
                        prop: "remarks",
                        type: 'textarea',
                        span: 16,
                        minRows: 1
                    }
                ]
            },
            formContacts: {},
            optionContacts: {},
            optionContactsBack: {
                align: "center",
                addBtn: false,
                addBtnText: "录入明细",
                refreshBtn: false,
                editBtn: false,
                delBtn: false,
                border: true,
                menuWidth: 120,
                stripe: true,
                index: true,
                menu: true,
                dialogTop: 25,
                disabled:false,
                dialogWidth: "80%",
                column: [{
                    label: '轮胎名称',
                    prop: 'goodsId',
                    width: 200,
                    overHidden: true,
                    disabled:false,
                    filterable: true,
                    type: 'select',
                    props: {
                        label: 'cname',
                        value: 'id'
                    },
                    dicUrl: '/api/blade-sales-part/goodsDesc/goodsListAll'
                }, {
                    label: '物料编码',
                    prop: 'goodsNo',
                    overHidden: true,
                    disabled:false,
                    width: 140
                }, {
                    label: "品牌",
                    prop: 'brandId',
                    width: 100,
                    overHidden: true,
                    disabled:false,
                    type: 'select',
                    props: {
                        label: 'cname',
                        value: 'id'
                    },
                    dicUrl: '/api/blade-sales-part/brandDesc/listAll'
                }, {
                    label: "规格型号",
                    prop: "propertyName",
                    overHidden: true,
                    disabled:false,
                    rules: [{
                        required: true,
                        message: " ",
                        trigger: "blur"
                    }]
                }, {
                    label: "花纹",
                    prop: "pattern",
                    disabled:false,
                    overHidden: true
                }, {
                    label: "轮胎描述",
                    prop: "goodsDescription",
                    disabled:false,
                    overHidden: true
                }, {
                    label: "批次号",
                    prop: "dot",
                    type: "select",
                    disabled: false,
                    allowCreate: true,
                    filterable: true,
                    dicData: [],
                    props: {
                        label: "dot",
                        value: "dot"
                    },
                    overHidden: true
                }, {
                    label: "单位",
                    prop: 'units',
                    type: "select",
                    disabled:false,
                    props: {
                        label: "dictValue",
                        value: "dictValue"
                    },
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=unit"
                }, {
                    label: "单价",
                    prop: "price",
                    disabled:false,
                    ovrHidden: true,
                    rules: [{
                        required: true,
                        message: " ",
                        trigger: "blur"
                    }]
                }, {
                    label: "入库数量",
                    prop: "goodsNum",
                    disabled: true,
                    ovrHidden: true,
                }, {
                    label: "实际数量",
                    prop: "sendNum",
                    disabled:false,
                    overHidden: true,
                    rules: [{
                        required: true,
                        message: " ",
                        trigger: "blur"
                    }]
                }, {
                    label: "备注",
                    prop: "remarks",
                    disabled:false,
                    overHidde: true
                }]
            },
            optionPaymentDetails: {},
            optionPaymentDetailsBack: {
                align: "center",
                addBtn: false,
                refreshBtn: false,
                editBtn: false,
                delBtn: false,
                border: true,
                menuWidth: 120,
                stripe: true,
                index: true,
                menu: false,
                column: [
                    {
                        label: "入库单号",
                        prop: "billno",
                        disabled: true
                    },
                    {
                        label: "来源单号",
                        prop: "ordNo",
                        disabled: true
                    },
                    {
                        label: "业务来源",
                        prop: "stockTime",
                        type: "date",
                        searchRange: true,
                        searchDefaultTime: [
                            "00:00:00",
                            "23:59:59"
                        ],
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        overHidden: true
                    },
                    {
                        prop: "itemId",
                        label: "地址",
                        type: "select",
                        props: {
                            label: "cname",
                            value: "id"
                        },
                        dicData: [],
                        overHidden: true,
                        filterable: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        prop: "length",
                        label: "联系人",
                        overHidden: true
                    },
                    {
                        prop: "thickness",
                        label: "电话",
                        overHidden: true
                    },
                    {
                        prop: "remarks",
                        label: "备注",
                        disabled:false,
                        overHidden: true,
                        cell: true
                    }
                ]
            },
            optionOutboundRecords: {},
            optionOutboundRecordsBack: {
                align: "center",
                addBtn: false,
                refreshBtn: false,
                editBtn: false,
                delBtn: false,
                border: true,
                menuWidth: 120,
                index: true,
                stripe: true,
                menu: false,
                column: [{
                    prop: "operatorName",
                    label: "操作人",
                    overHidden: true,
                    showColumn: false,
                    width: 120,
                }, {
                    prop: "operateStatus",
                    label: "状态",
                    overHidden: true,
                }, {
                    prop: "operateTime",
                    label: "时间",
                    overHidden: true,
                    searchDefaultTime: ["00:00:00", "23:59:59"],
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd HH:mm:ss",
                }]
            }
        }
    },
    props: {
        onLoad: Object,
        detailData: Object
    },

    async created() {
        this.findObject(this.optionContactsBack.column, "goodsId").change = ({ value, column }) => {
            console.log(value);
            console.log('this.formContacts.goodsId',this.formContacts.goodsId);
            if (this.formContacts.goodsId !== value) {
                goodsDetail({ id: value }).then(res => {
                    this.formContacts.goodsNo = res.data.data.code
                    this.formContacts.brandId = res.data.data.brandId
                    this.formContacts.brandName = res.data.data.brandName
                    
                    this.formContacts.propertyName = res.data.data.specificationAndModel
                    this.formContacts.pattern = res.data.data.brandItem
                    this.formContacts.goodsDescription = res.data.data.goodsDescription
                    this.formContacts.units = res.data.data.unit
                    this.findObject(this.optionContacts.column, "goodsNum").disabled = true
                    if (res.data.data.whether == 0) {
                        this.findObject(this.optionContacts.column, "dot").disabled = true
                    } else {
                        this.findObject(this.optionContacts.column, "dot").disabled = false
                        dotList({
                            storageId: this.form.storageId,
                            goodsId: this.formContacts.goodsId
                        }).then(res => {
                            this.findObject(this.optionContacts.column, "dot").dicData = res.data.data
                        })
                    }
                })
            }
        }
        this.optionContacts = await this.getColumnData(this.getColumnName(274.1), this.optionContactsBack);
        this.findObject(this.optionContacts.column, "goodsId").change = ({ value, column }) => {
            console.log(value);
            console.log('this.formContacts.goodsId',this.formContacts.goodsId);
            if (this.formContacts.goodsId !== value) {
                goodsDetail({ id: value }).then(res => {
                    this.formContacts.goodsNo = res.data.data.code
                    this.formContacts.brandId = res.data.data.brandId
                    this.formContacts.brandName = res.data.data.brandName
                    
                    this.formContacts.propertyName = res.data.data.specificationAndModel
                    this.formContacts.pattern = res.data.data.brandItem
                    this.formContacts.goodsDescription = res.data.data.goodsDescription
                    this.formContacts.units = res.data.data.unit
                    this.findObject(this.optionContacts.column, "goodsNum").disabled = true
                    if (res.data.data.whether == 0) {
                        this.findObject(this.optionContacts.column, "dot").disabled = true
                    } else {
                        this.findObject(this.optionContacts.column, "dot").disabled = false
                        dotList({
                            storageId: this.form.storageId,
                            goodsId: this.formContacts.goodsId
                        }).then(res => {
                            this.findObject(this.optionContacts.column, "dot").dicData = res.data.data
                        })
                    }
                })
            }
        }
        this.optionPaymentDetails = await this.getColumnData(this.getColumnName(274.2), this.optionPaymentDetailsBack);
        this.optionOutboundRecords = await this.getColumnData(this.getColumnName(274.3), this.optionOutboundRecordsBack);
        this.key++
        if (this.onLoad.id && this.detailData.id) {
            this.refresh(this.onLoad.id, true)
            this.$set(this.optionForm,'disabled',true)
            this.$set(this.optionContactsBack,'disabled',true)
        } else if (this.onLoad.id) {
            console.log(2);
            this.refresh(this.onLoad.id, true)
        }
        if(!this.onLoad.id){
            console.log(3);
            this.isrowAdd= false
            // this.$set(this.optionForm,'disabled',false)
            // this.$set(this.optionContacts,'disabled',false)
        }
        if (!this.form.id) {
            console.log('这是一还是二');
            // this.$set(this.optionContactsBack, "addBtn", false)
            this['optionContacts'] = this['optionContactsBack'];
            this.delColumnData(this.getColumnName('269.1'), this['optionContactsBack']);
        }
    },
    components: {
        reportDialog
    },

    methods: {
        rowAdd(row,score){
            console.log(123214);
            this.optionContactsBack.column.forEach(its => {
                if (its.prop == 'goodsNum') {
                    this.$set(its,'disabled',true)
                } else {
                    this.$set(its,'disabled',false)
                }
            })
            this.$refs.formContacts.rowAdd()
        },
        derivation() {
            window.open(
                `/api/blade-sales-part/ship/export-item?${this.website.tokenHeader
                }=${getToken()}`
            );
        },
        uploadAfter(res, done, loading, column) {
            if (res instanceof Array) {
                this.form.shipItemsList = this.form.shipItemsList.concat(res)
            }
            this.excelBox = false;
            loading = false;
            done();
        },
        uploadBefore(file, done, loading) {
            done();
            loading = true;
        },
        //撤销
        revoke() {
            this.$refs["form"].validate((valid, done) => {
                done();
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    revoke({
                        ...this.form,
                        bizTypeName: "SHGD"
                    }).then(res => {
                        this.$message.success("撤销成功");
                        this.refresh(res.data.data.id)
                        loading.close();
                    }).finally(() => {
                        loading.close();
                    });
                }
            })
        },
        //编辑
        confirmEditing(){
            if(this.form.statusName == '待入库'){
                this.isrowAdd = false
                this.$set(this.optionForm,'disabled',false)
                this.$set(this.optionContacts,'disabled',false)
                this.optionForm.column.forEach(item=>{
                    if(item.prop == 'remarks'  || item.prop == 'createTime' || item.prop == 'stockClerkId'){
                        this.$set(item,'disabled',false)
                    }else{
                        this.$set(item,'disabled',true)

                    }
                })
                this.optionContacts.column.forEach(item=>{
                    if(item.prop == 'remarks'){
                        this.$set(item,'disabled',false)
                    }else{
                        this.$set(item,'disabled',true)
                    }
                })
            }else if(this.form.statusName == '已入库'){
                this.$set(this.optionForm,'disabled',false)
                this.$set(this.optionContactsBack,'disabled',false)
                this.optionForm.column.forEach(item=>{
                    if(item.prop == 'remarks'){
                        this.$set(item,'disabled',false)
                    }else{
                        this.$set(item,'disabled',true)

                    }
                })
                this.optionContactsBack.column.forEach(item=>{
                    if(item.prop == 'remarks'){
                        this.$set(item,'disabled',false)
                    }else{
                        this.$set(item,'disabled',true)
                    }
                })
            }
        },
        complete() {
            this.$refs["form"].validate((valid, done) => {
                done();
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    warehousingComplete({
                        ...this.form,
                        bizTypeName: "SHGD"
                    }).then(res => {
                        this.$message.success("保存成功");
                        this.refresh(res.data.data.id)
                        loading.close();
                    }).finally(() => {
                        loading.close();
                    });
                }
            })
        },
        //修改提交触发
        editCustomer() {
            if (this.form.shipItemsList.length == 0) {
                return this.$message.warning('请明细不能为空')
            }
            this.$refs["form"].validate((valid, done) => {
                done();
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    this.form.customerName=this.form.$customerId
                    submit({
                        ...this.form,
                        bizTypeName: "SHGD"
                    }).then(res => {
                        this.$message.success("保存成功");
                        this.refresh(res.data.data.id);
                        loading.close();
                    }).finally(() => {
                        loading.close();
                    });
                } else {
                    return false;
                }
            });
        },
        refresh(id, type) {
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            })
            getDetails({ id: id }).then(res => {
                this.form = res.data.data
                loading.close();
            }).catch(() => {
                loading.close();
            })
        },
        //编辑
        rowEdit(row,index){
            console.log(row,index);
            this.confirmEditing()
            this.$refs.formContacts.rowEdit(row,index)
        },
        rowDelBox(row, index) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                if (row.id) {
                    tradingBox(row.id).then(res => {
                        this.form.shipItemsList.splice(index, 1);
                        this.$message.success("操作成功!");
                    });
                } else {
                    this.form.shipItemsList.splice(index, 1);
                    this.$message.success("操作成功!");
                }
            }
            );
        },
        rowSave(form, done, loading) {
            console.log(form)
            done(form)
        },
        rowUpdate(form, index, done, loading) {
            console.log(form)
            done(form);
        },
        handlePrint() {
            this.switchDialog = !this.switchDialog;
        },
        onClose(val) {
            this.switchDialog = val;
        },
        //自定义列保存
        async saveColumnTwo(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口b
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        //自定义列重置
        async resetColumnTwo(ref, option, optionBack, code) {
            this[option] = this[optionBack];
            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        backToList(type) {
            this.$emit("backToList", type);
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
    margin-bottom: 8px !important;
}
</style>