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

<template>
    <div class="index_box">
        <div class="c_header_title">
            <div class="c_title">委外记录</div>
        </div>
        <div>
            <el-form label-width="100px" :rules="rules" ref="form" :model="attributeData">

                <el-form-item label="委外名称:" prop="name">
                    <el-input placeholder="" v-model="attributeData.name" style="width: 260px;"></el-input>
                </el-form-item>

                <el-form-item label="委外类型:" prop="type">
                    <el-select v-model="attributeData.type" placeholder="请选择" style="width: 260px;">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="委外数量:" prop="formedNumLast">
                    <el-input placeholder="请输入委外数量" type="number" v-model="attributeData.formedNumLast"
                        style="width: 260px;"></el-input>
                </el-form-item>
                <el-form-item label="委外到:" prop="taskIds">
                    <el-select v-model="attributeData.taskIds" placeholder="请选择" style="width: 260px;"
                        @change="changeTaskId">
                        <el-option v-for="item in newStepsList" :key="item.taskId" :label="item.taskTypeName"
                            :value="item.taskId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="委外场景:" prop="sceneText">
                    <el-input placeholder="" v-model="attributeData.sceneText" disabled
                        style="width: 260px;"></el-input>
                </el-form-item>
                <!-- v-if="attributeData.isFirstTask != 1" -->
                <el-form-item label="直接入库:" borderBottom prop="warehouseId" >
                    <div style="display: flex;">
                        <div style="font-size: 15px;" v-if="attributeData.clientEnvironmentId == 2">是</div>
                        <!-- <el-checkbox-group v-model="isInWarehouse" size="15px" v-if="attributeData.clientEnvironmentId != 2 ">
                            <el-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
                                label="是"></el-checkbox>
                        </el-checkbox-group> -->
                        <!-- <el-checkbox labelSize="15px" iconSize="10px" v-model="isInWarehouse" activeColor="#157A2C" name="true"
                                label="是" v-if="attributeData.clientEnvironmentId != 2 "></el-checkbox> -->
                        <el-select v-if="attributeData.clientEnvironmentId == 2 || isInWarehouse" v-model="attributeData.warehouseId" placeholder="请选择" style="width: 222px;">
                            <el-option v-for="item in warehouseList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <el-form-item label="工艺路线:" borderBottom style="font-size: 15px;" prop="produceRoutingId"
                    v-if="attributeData.clientEnvironmentId != 2 && attributeData.isFirstTask != 1 && isInWarehouse && isInWarehouse.length == 0">

                    <el-select v-model="attributeData.produceRoutingId" placeholder="请选择" style="width: 260px;">
                        <el-option v-for="item in produceList" :key="item.id" :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>

                </el-form-item>


                <el-form-item label="计划交期:" prop="requireDeliveryTime">
                    <el-date-picker v-model="attributeData.requireDeliveryTime" value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 260px;" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>

            <div class="btn-box">
                <el-button type="primary" @click="confirm">确认</el-button>
            </div>
        </div>
    </div>
</template>

<script>

import {getWarehouseList,producerouting} from '@/api/produce/index.js'
export default {
    components: {

    },
    data() {
        return {
            attributeData: {
                name: '',
                type: '',//类型
                sceneText: '',//场景
                formedNumLast: '',//数据
                taskIds: '',//委外到
                isFirstTask:'',
                clientEnvironmentId: 1,//直接入库
                requireDeliveryTime: '',//计划交期
                warehouseId: '',//仓库id
                produceRoutingId: '',//工艺路线id
            },
            isInWarehouse:true,
            produceList:[],
            warehouseList:[],
            newStepsList: [],
            typeList: [{
                id: 4,
                name: '带料生产委外'
            },
            {
                id: 5,
                name: '不带料生产委外'
            },

            ],
            rules: {
                name: [
                    { required: true, message: '请输入委外名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择委外类型', trigger: 'blur' },
                ],
                formedNumLast: [
                    { required: true, message: '请输入委外数量', trigger: 'blur' },
                ],
                taskIds: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                sceneText: [
                    { required: true, message: '请选择委外场景', trigger: 'blur' },
                ],
                warehouseId: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                requireDeliveryTime: [
                    { required: true, message: '请选择计划交期时间', trigger: 'blur' },
                ]
            },

            loading: false,
            operationType: null,
            workListIds: [],
        };
    },
    props: {
        outsourceFormVal: {
            type: Object,
            default: () => ({})
        }
    },

    watch: {
        outsourceFormVal: {
            handler(val) {
                console.log(val, 'outsourceForm');
                Object.assign(this.attributeData, val);
                this.newStepsList = this.attributeData.newStepsList;
                this.getWarehouseFn();
                this.produceFn();
            },
            deep: true,
            immediate: true
        }
    },
    computed: {
        taskObj() {
            return this.$store.state.user.taskObj;
        }
    },
    methods: {

        // 工艺路线
        produceFn() {
            let param = {
                pageNum: 1,
                size: -1,
                routeType: 2
            }
            producerouting(param).then(res => {
                this.produceList = res.list

            })
        },

        // 仓库 
        getWarehouseFn() {
            getWarehouseList().then(res => {

                console.log(res,'仓库数据');
                this.warehouseList = res.data
            })
        },


        changeTaskId(e) {
            console.log(e);

            const arr = this.newStepsList.find(item => item.taskId === e)
            console.log(arr);

            if (this.newStepsList.length) {
                const id = this.newStepsList[0].taskId;
                //isFirstTask 1是首工序 0不是
                if (arr.isFirstTask) {

                    this.attributeData.sceneText = "首工序";
                    this.attributeData.outsourceScene = 1;
                    if (arr.taskId !== id) {
                        this.attributeData.sceneText = "首工序及多工序";
                        this.attributeData.outsourceScene = 4;
                    }
                } else {
                    if (arr.taskId === id) {
                        // 单工序
                        this.attributeData.sceneText = "单工序"
                        this.attributeData.outsourceScene = 2;
                    } else {
                        //多工序
                        this.attributeData.sceneText = "多工序"
                        this.attributeData.outsourceScene = 3;
                    }
                }

            } else {
                uni.showToast({
                    title: '委外到工序为空',
                    icon: 'none'
                })
            }
        },

        //跳转

        confirm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log(this.attributeData,'11111187887877');
                    this.$emit('changePlugIn', this.attributeData);
                } else {
                    console.log('error submit!!');
                    return false;
                }

            })

        }
    },
    created() {
        this.operationType = null;
        this.workListIds = [];
    },



};
</script>

<style scoped>
.index_box {
    padding: 0 !important;
}

.c_header_title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-left: 20px;
    height: 52px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: var(--table-header-background-color);
    border-bottom: 1px solid var(--border-color-lighter);
}

.c_title {

    color: #157a2c;
    font-size: 16px;
    font-weight: bold;
}

.btn-box {
    margin-left: 50px;
}
</style>