udiwms-vue/src/views/inout/DialogSelectInout.vue

<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input v-model="filterQuery.id" placeholder="单号"></el-input>
            </el-form-item>

            <el-form-item class="query-form-item">
                <el-input v-model="filterQuery.code" placeholder="条码查询"></el-input>
            </el-form-item>

            <el-form-item class="query-form-item">
                <el-select v-model="filterQuery.mainAction" placeholder="出入库类型">
                    <el-option label="全部" value></el-option>
                    <el-option label="入库" value="WareHouseIn"></el-option>
                    <el-option label="出库" value="WareHouseOut"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="query-form-item">
                <el-select v-model="filterQuery.action" placeholder="请选择业务类型">
                    <el-option
                        v-for="item in busTypes"
                        :key="item.name"
                        :label="item.name"
                        :value="item.action">
                        <span style="float: left">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table
            v-loading="loading"
            :data="list"
            style="width: 100%;"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            @row-click="intentDetail"
        >
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column label="ID" prop="id" fixed></el-table-column>
            <el-table-column label="业务类型" prop="action" fixed>
                <template slot-scope="scope">
                    <span>{{ geActionName(scope.row.action) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单号" prop="corpOrderId" fixed></el-table-column>
            <el-table-column label="往来单位" prop="fromCorp" fixed></el-table-column>
            <el-table-column label="创建时间" prop="actDate">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.actDate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作员" prop="actor" fixed></el-table-column>
        </el-table>
        <el-pagination
            :page-size="query.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
    import {
        filterOrder
    } from "../../api/inout/order";
    import draggable from "vuedraggable";
    import {getBussinessType} from "../../api/basic/bussinessType";

    const formJson = {
        site_id: "",
        site_name: "",
        describe: "",
        ads: []
    };
    export default {
        props: {
            isSelect: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                query: {
                    page: 1,
                    limit: 20
                },
                multipleSelection: [],

                list: [],
                busTypes: [],
                filterQuery: {
                    id: "",
                    mainAction: "",
                    action: "",
                    page: 1,
                    limit: 20,
                    code: ""
                },
                curIndex: "",
                adListNoDataText: "无数据",
                queryAdIdAsyncLoading: false,
                total: 0,
                loading: true,
                index: null,

                dialogTableVisible: false,
                formLoading: false,
                formVisible: false,
                formData: formJson,
                deleteLoading: false
            };
        },
        components: {
            draggable
        },
        methods: {
            onReset() {
                this.$router.push({
                    path: ""
                });
                this.filterQuery = {
                    id: "",
                    mainAction: "",
                    action: "",
                    page: 1,
                    limit: 20,
                    code: ""
                };
                this.getList();
            },
            onSubmit() {
                this.getList();
            },
            handleSizeChange(val) {
                this.filterQuery.limit = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.filterQuery.page = val;
                this.getList();
            },

            //获取订单列表
            getList() {
                this.loading = true;
                filterOrder(this.filterQuery)
                    .then(response => {
                        this.loading = false;
                        this.list = response.data.list || [];
                        this.total = response.data.total || 0;
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },
            getBusType() {
                let query = {
                    enabled: true,
                };
                getBussinessType(query)
                    .then((response) => {
                        this.busTypes = response.data.list || [];
                        this.filterQuery.action = this.busTypes[0].action;
                        // this.getList();
                    })
                    .catch(() => {
                    });
            },
            geActionName(action) {
                this.busTypes.forEach((obj) => {
                    if (obj.action == action) {
                        return obj.name;
                    }
                });
            },
            handleSelectionChange(val) {
                console.log(val);
                this.multipleSelection = val;
            }
        },
        filters: {},
        mounted() {
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            };
        },

        created() {
            // 将参数拷贝进查询对象
            let query = this.$route.query;
            this.query = Object.assign(this.query, query);
            this.query.limit = parseInt(this.query.limit);
            // 加载表格数据
            this.getList();
            this.getBusType();
        }
    };
</script>

<style type="text/scss" lang="scss">
</style>