kd-aiot-frontend-mes/src/views/outsourcing/components/details.vue

<template>
    <el-dialog title="详情" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="80%">

        <el-form ref="form"  label-width="100px" class="create-form"
            >
            <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>

            <el-row :gutter="15">
               
            
                <el-col :span="8">
                    <el-form-item label="委外单编码:" prop="code">
                        <el-input v-model="row.code" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="委外单名称:" prop="name">
                        <el-input v-model="row.name" disabled />
                    </el-form-item>
                </el-col>
     
                <el-col :span="8">
                    <el-form-item label="工单编码:" prop="factoriesName">
                        <el-input v-model="row.workOrderCode" style="width: 100%" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="预计到货日期:" prop="factoriesName">
                        <el-input v-model="row.requireDeliveryTime" style="width: 100%" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间:" prop="factoriesName">
                        <el-input v-model="row.createTime" style="width: 100%" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工序:" prop="status">
                        <el-tag>{{ row.status == 1 ? '已发布' : '未发布' }}</el-tag>
                    </el-form-item>
                </el-col>
                

            </el-row>
       
        </el-form>



        <!-- 数据表格 -->
        <ele-pro-table ref="table" v-if="detailType == 1" :columns="columns" cache-key="detailsTable"
            height="calc(100vh - 350px)">
            <template v-slot:totalCount="{ row }">
                {{ row.totalCount }}{{ row.measuringUnit }}
            </template>



            <template v-slot:sourceType="{ row }">
                <el-tag v-if="row.sourceType == 1" size="mini" type="success">物品清单</el-tag>
                <el-tag v-if="row.sourceType == 2" size="mini" type="warning">带料清单</el-tag>
                <el-tag v-if="row.sourceType == 3" size="mini" type="danger">产出清单</el-tag>
            </template>



        </ele-pro-table>


        <ele-pro-table ref="table2" v-if="detailType == 2" :columns="columns2" cache-key="detailsTable2"
            height="calc(100vh - 350px)">
            <template v-slot:totalCount="{ row }">
                {{ row.totalCount }}{{ row.measuringUnit }}
            </template>

            <template v-slot:sourceType="{ row }">
                <el-tag v-if="row.sourceType == 1" size="mini" type="success">物品清单</el-tag>
                <el-tag v-if="row.sourceType == 2" size="mini" type="warning">带料清单</el-tag>
                <el-tag v-if="row.sourceType == 3" size="mini" type="danger">产出清单</el-tag>
            </template>

        </ele-pro-table>



    </el-dialog>
</template>

<script>


export default {
    components: {
    },
    data() {
        return {
            visible: false,
            detailType: null,
            row:{}
        }
    },

    computed: {
        // 表格列配置
        columns() {
            return [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },


                {
                    prop: 'categoryCode',
                    label: '编码',
                    align: 'center'
                },
                {
                    prop: 'categoryName',
                    label: '名称',
                    align: 'center'
                },

                {
                    prop: 'sourceType',
                    slot: 'sourceType',
                    label: '类型',
                    align: 'center'
                },


                {
                    prop: 'brandNum',
                    label: '牌号',
                    align: 'center'
                },

                {
                    prop: 'specification',
                    label: '规格',
                    align: 'center'
                },

                {
                    prop: 'modelType',
                    label: '型号',
                    align: 'center'
                },




                {
                    slot: 'totalCount',
                    label: '数量',
                    align: 'center'
                },





            ];
        },

        columns2() {
            return [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },


                {
                    prop: 'categoryCode',
                    label: '编码',
                    align: 'center'
                },
                {
                    prop: 'categoryName',
                    label: '名称',
                    align: 'center'
                },


                {
                    prop: 'sourceType',
                    slot: 'sourceType',
                    label: '类型',
                    align: 'center'
                },


                {
                    prop: 'brandNum',
                    label: '牌号',
                    align: 'center'
                },


                {
                    prop: 'modelType',
                    label: '型号',
                    align: 'center'
                },



                {
                    prop: 'specification',
                    label: '规格',
                    align: 'center'
                },


                {
                    label: '物料代号',
                    prop: 'extInfo.materielCode',
                    align: 'center'
                },
                {
                    label: '客户代号',
                    prop: 'extInfo.clientCode',
                    align: 'center'
                },
                {
                    label: '刻码',
                    prop: 'extInfo.engrave',
                    align: 'center'
                },
                {
                    label: '重量',
                    prop: 'extInfo.newWeight',
                    align: 'center'
                },


                {
                    slot: 'totalCount',
                    label: '数量',
                    align: 'center'
                },


            ];
        },

        clientEnvironmentId() {
            return this.$store.state.user.info.clientEnvironmentId;
        },
    },

    watch: {

    },
    methods: {



        open(row) {
            this.visible = true
            if (row.detailType == 1) {
                this.detailType = 1
                this.$nextTick(() => {
                    this.$refs.table.setData([...row.detailList]);
                })
            } else if (row.detailType == 2) {
                this.detailType = 2
                this.$nextTick(() => {
                    this.$refs.table2.setData([...row.detailList]);
                })
            }

            this.row = row;

        },







        handleClose() {
            this.visible = false



        },

    }
}
</script>

<style lang="scss" scoped></style>