udiwms-vue/src/views/inventory/InvProductsDetail.vue

<template>
    <div>

        <el-descriptions class="margin-top" title="产品信息" :column="3" :size="size" border>
            <el-descriptions-item>
                <template slot="label">
                    产品名称
                </template>
                {{ idQuery.cpmctymc }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    产品标识
                </template>
                {{ idQuery.nameCode }}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    批次号
                </template>
                {{ idQuery.batchNo }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    规格型号
                </template>
                {{ idQuery.ggxh }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    生产日期
                </template>
                {{ idQuery.productionDate }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    失效日期
                </template>
                {{ idQuery.expireDate }}
            </el-descriptions-item>
        </el-descriptions>

        <!--        <el-descriptions style="margin-top: 15px" class="margin-top" title="库存统计" :column="3" :size="size" border>-->

        <!--            <el-descriptions-item>-->
        <!--                <template slot="label">-->
        <!--                    入库数量-->
        <!--                </template>-->
        <!--                {{ statData.inCount }}-->
        <!--            </el-descriptions-item>-->
        <!--            <el-descriptions-item>-->
        <!--                <template slot="label">-->
        <!--                    出库数量-->
        <!--                </template>-->
        <!--                {{ statData.outCount }}-->
        <!--            </el-descriptions-item>-->
        <!--            <el-descriptions-item>-->
        <!--                <template slot="label">-->
        <!--                    结余数量-->
        <!--                </template>-->
        <!--                {{ (statData.inCount - statData.outCount) }}-->
        <!--            </el-descriptions-item>-->
        <!--            <el-descriptions-item>-->
        <!--                <template slot="label">-->
        <!--                    普通采购数量-->
        <!--                </template>-->
        <!--                {{ statData.commonCount }}-->
        <!--            </el-descriptions-item>-->
        <!--            <el-descriptions-item>-->
        <!--                <template slot="label">-->
        <!--                    预入库数量-->
        <!--                </template>-->
        <!--                {{ statData.advanceCount }}-->
        <!--            </el-descriptions-item>-->
        <!--        </el-descriptions>-->

        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input v-model="query.code" placeholder="条码查询"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="search" @click="getCodeList"
                    >查询
                    </el-button
                    >
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="codeArry" style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column
                label="条码"
                prop="originCode"
                width="300"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="单据类型" prop="action" width="150">
                <template slot-scope="scope">
                    <span>{{ getActionName(scope.row.action) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="出入库类型"
                prop="mainActionStr"
                width="120"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="入库数量"
                prop="inCount"
                width="120"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                label="出库数量"
                prop="outCount"
                width="120"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="订单日期"
                prop="updateTime"
                width="150"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="所属扫码单据"
                prop="orderIdFk"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="所属业务单据"
                prop="stockIdFk"
                show-overflow-tooltip
            ></el-table-column>
        </el-table>

        <el-pagination
            :page-size="query.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next,total"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import {
    filterDetailProducts, statDetailProducts
} from "../../api/inventory/InvProducts";
import store from "../../store";
import draggable from "vuedraggable";
import {getBussinessType} from "../../api/basic/bussinessType";

export default {
    name: "idQuery",
    props: {
        idQuery: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            query: {
                batchNo: null,
                productIdFk: null,
                customerId: null,
                page: 1,
                limit: 20,
            },
            codeArry: [],
            total: 0,
            loading: true,
            index: null,
            formLoading: false,
            formVisible: false,
            deleteLoading: false,
            orderNo: null,
            busTypes: [],
            statData: {},
        };
    },
    components: {
        draggable,
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.query = {
                productIdFk: null,
                customerId: null,
                page: 1,
                limit: 20,
            };
            this.getCodeList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query,
            });
            this.getCodeList();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getCodeList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getCodeList();
        },

        getCodeList() {
            this.loading = true;
            this.query.productIdFk = this.idQuery.relIdFk;
            this.query.batchNo = this.idQuery.batchNo;
            this.query.supId = this.idQuery.supId;
            this.query.invStorageCode = this.idQuery.invStorageCode;
            filterDetailProducts(this.query) //查找该单号下的所有条码
                .then((response) => {
                    this.loading = false;
                    this.codeArry = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },

        getStat() {
            this.query.productIdFk = this.idQuery.relIdFk;
            this.query.batchNo = this.idQuery.batchNo;
            this.query.customerId = store.getters.customerId;
            statDetailProducts(this.query) //查找该单号下的所有条码
                .then((response) => {
                    this.loading = false;
                    this.statData = response.data;
                })
                .catch(() => {
                    this.loading = false;
                });

        },

        intentBack() {
            //  this.$router.push({path:'../readme/detail',query:{id:row.corpOrderId}});
            this.$router.go(-1);
        },
        getActionName(action) {
            for (let i = 0; i < this.busTypes.length; i++) {
                if (this.busTypes[i].action === action) {
                    return this.busTypes[i].name;
                }
            }
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getBussinessType(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.filterQuery.billAction = this.busTypes[0].action;
                    // this.getList();
                })
                .catch(() => {
                });
        },
    },
    filters: {},
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
    created() {
        this.getBusType();
        this.getCodeList();
        this.getStat();
    },
};
</script>