kd-aiot-frontend-aps/src/views/materialPlan/components/workOrderPop.vue

<template>
    <el-dialog :title="title" v-if="visible" :visible.sync="visible" :before-close="handleClose"
        :close-on-click-modal="true" :close-on-press-escape="false" append-to-body width="70%">

        <el-card shadow="never">
            <workOrderSearch @search="reload" />

            <!-- 数据表格 -->
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection" row-key="id">
            </ele-pro-table>

        </el-card>

        <div class="btns">
            <el-button type="primary" size="small" @click="selected">选择</el-button>
            <el-button size="small" @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import workOrderSearch from './workOrder-search'
import { dosingPage } from '@/api/materialPlan/index.js';
import dictMixins from '@/mixins/dictMixins';
export default {
    components: { workOrderSearch },
    mixins: [dictMixins],
    data() {
        return {
            visible: false,
            title: '生产工单',

            // 表格列配置
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    selectable: (row, index) => {
                        return !this.tableData.some((it) => it.id == row.id || it.salesOrderId == row.id);
                    },
                    reserveSelection: true,
                    fixed: 'left'
                },
                {
                    prop: 'code',
                    label: '生产订单号',
                    align: 'center',
                    minWidth: 120
                },
                {
                    prop: 'salesOrderCode',
                    label: '销售订单号',
                    align: 'center',
                    minWidth: 110,
                    sortable: true
                },
                {
                    prop: 'productionPlanCode',
                    label: '计划编号',
                    align: 'center'
                },
                {
                    prop: 'produceRoutingName',
                    label: '工艺路线',
                    align: 'center'
                },
                {
                    prop: 'productName',
                    label: '产品名称',
                    align: 'center'
                },
                {
                    prop: 'formingNum',
                    label: '要求生产数量',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'formingWeight',
                    label: '要求生产重量',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'planStartTime',
                    label: '计划开始时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },

                {
                    slot: 'status',
                    label: '状态',
                    align: 'center',
                    formatter: (row) => {
                        const obj = this.statusOpt.find((i) => i.value == row.status);
                        return obj && obj.label;
                    }
                },



            ],
            statusOpt: [
                { label: '待生产', value: 4 },
                { label: '生产中', value: 5 },
                { label: '待下达', value: 8 }
            ],

            // 表格选中数据
            selection: [],

            tableData: [],
            current: null,

        }
    },

    watch: {

    },
    created() {

    },
    methods: {

        open(item) {
            if (item) {
                this.tableData = item
            }

            this.visible = true



        },


        /* 表格数据源 */
        async datasource({ page, limit, where }) {

            const data = await dosingPage({
                ...where,
                pageNum: page,
                size: limit,
                statusList: [4]
            });



            return data;
        },

        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
        },






        handleClose() {
            this.visible = false
            this.$refs.table.setSelectedRows([]);
            this.selection = []

        },
        selected() {

            if (!this.selection.length) {
                this.$message.error('请至少选择一条数据');
                return;
            }
 
            this.$emit('chooseOrder', this.selection)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>
.btns {
    text-align: center;
    padding: 10px 0;
}
</style>