kd-aiot-frontend-mes/src/views/warehousing/index.vue

<template>
    <div class="ele-body">
        <el-card shadow="never" v-loading="loading">
            <search @search="reload" ref="searchRef"> </search>

            <!-- 数据表格 -->
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" cache-key="workOrderTable">



                <template v-slot:totalCount="{ row }">
                    {{ row.totalCount }} {{ row.measuringUnit }}
                </template>


                <template v-slot:totalPackage="{ row }">
                    {{ row.totalPackage }}
                </template>


                <template v-slot:totalWeight="{ row }">
                    {{ row.totalWeight }} {{ row.weightUnit }}
                </template>



                <template v-slot:approvalStatus="{ row }">
                    <span :class="{ 'ele-text-danger': row.approvalStatus == 2 }">
                        {{ statusFormatter(row.approvalStatus) }}
                    </span>
                </template>


                <template v-slot:action="{ row }">

                    <el-link type="primary" :underline="false" @click="details(row)">
                        详情
                    </el-link>

                </template>


            </ele-pro-table>
        </el-card>


        <tgDetails ref="tgDetailsRefs"></tgDetails>

    </div>
</template>
  
<script>
import { getList } from '@/api/warehousing/index.js';

import search from './components/search.vue';
import tgDetails from './components/tgDetails.vue'
export default {
    components: {
        search,
        tgDetails
    },
    data() {
        return {

            loading: false,



            statusOpt: [
                { label: '未提交', value: 0 },
                { label: '审核中', value: 1 },
                { label: '审核通过', value: 2 },
                { label: '审核不通过', value: 3 },

            ]
        };
    },
    computed: {
        // 表格列配置
        columns() {
            return [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },
                {
                    prop: 'workOrderCode',
                    label: '工单编码',
                    align: 'center',
                    minWidth: 110
                },
                {
                    prop: 'warehouseName',
                    label: '仓库名称	',
                    align: 'center'
                },

                {
                    prop: 'categoryLevelName',
                    label: '物品分类名称',
                    align: 'center'
                },
                {
                    prop: 'categoryName',
                    label: '物品名称',
                    align: 'center'
                },
                {
                    slot: 'totalCount',
                    label: '总数量',
                    align: 'center'
                },

                {
                    slot: 'totalPackage',
                    label: '总包装',
                    align: 'center'
                },

                {
                    slot: 'totalWeight',
                    label: '总重量',
                    align: 'center'
                },


                {
                    prop: 'approvalUserName',
                    label: '审核人',
                    align: 'center'
                },




                {
                    prop: 'createTime',
                    label: '创建时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    slot: 'approvalStatus',
                    label: '状态',
                    align: 'center',

                },

                {
                    columnKey: 'action',
                    label: '操作',
                    width: 120,
                    align: 'center',
                    resizable: false,
                    fixed: 'right',
                    slot: 'action',
                    showOverflowTooltip: true
                }


            ];
        },




    },
    created() {

    },
    methods: {
        statusFormatter(status) {
            const obj = this.statusOpt.find((i) => i.value == status);
            return obj && obj.label;
        },
        /* 表格数据源 */
        datasource({ page, limit, where }) {

            return getList({
                pageNum: page,
                size: limit,
                ...where
            });
        },


        details(row) {
            this.$refs.tgDetailsRefs.open(row)
        },



        /* 刷新表格 */
        reload(where) {
            this.$nextTick(() => {
                this.$refs.table.reload({ page: 1, where });
            });
        }
    }
};
</script>
  
<style lang="scss" scoped></style>