kd-aiot-frontend/src/views/technology/route/components/user-detail.vue

<!-- 用户编辑弹窗 -->
<template>
    <ele-modal width="1060px" :visible="visible" :append-to-body="true" :close-on-click-modal="false"
        custom-class="ele-dialog-form" title="修改工艺详情" @update:visible="updateVisible" :maxable="true">
        <header-title title="基本信息"> </header-title>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="工艺路线组编码:" prop="code">
                        {{ form.code }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="工艺路线组名称:" prop="name">
                        {{ form.name }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属工厂:" prop="factoryId">
                        <el-select v-model="form.factoryId" placeholder="请选择" filterable disabled>
                            <el-option v-for="item in fList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产版本:" prop="produceVersionId">
                        <el-select v-model="form.produceVersionId" filterable placeholder="请选择" :style="{ width: '100%' }"
                            disabled>
                            <el-option v-for="item in versionList" :key="item.code" :label="item.code + '-' + item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="工艺路线版本:" prop="version">
                        {{ form.version }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态:" prop="status">
                        <el-select v-model="form.status" placeholder="" filterable disabled>
                            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


            </el-row>

        </el-form>

        <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="datasource" row-key="id">
            <template v-slot:orderNum="{ row }">
                {{ row.orderNum }}
            </template>


        </ele-pro-table>

        <template v-slot:footer>
            <el-button type="primary" @click="save">
                确定
            </el-button>


        </template>






    </ele-modal>
</template>
  
<script>

import route from '@/api/technology/route';
import { pageList } from '@/api/technology/version/version.js';

export default {
    components: {

    },
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            code: '',
            name: '',
            factoryId: '',
            status: -1,
            categoryId: '',
            produceVersionId: '',
            version: '1.0',
            id: '',

        };
        return {
            defaultForm,
            fList: [], //仓库列表

            // 表单数据
            form: { ...defaultForm },

            statusList: [
                { label: '草稿', value: -1 },
                { label: '失效', value: 0 },
                { label: '生效', value: 1 }
            ],

            // 表单验证规则
            rules: {


            },
            versionList: [],
            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false,

            columns: [

                {
                    prop: 'orderNum',
                    label: '排序',
                    align: 'center',
                    slot: 'orderNum',
                    minWidth: 120
                },
                {
                    prop: 'code',
                    label: '工序编码',
                    // sortable: 'custom',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },


                {
                    prop: 'name',
                    label: '工序名称',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    align: 'center',
                    prop: 'controlName',
                    label: '工序控制码',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'workCenterName',
                    label: '所属工作中心',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },


            ],


        };
    },
    computed: {

        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    
    methods: {
        

        /* 表格数据源 */
        async datasource(id) {
            console.log(111111);
           
            if (this.data.id) {
                const res = await route.taskinstanceList({
                    routingId: this.data.id,
                    isDetail: true,
                    pageNum: 1,
                    size: -1
                });

                let arr = res.list.map((it) => {
                    it.detail.orderNum = it.orderNum
                    return it.detail
                });
                return {
                    list: arr,
                };
            }
        },


        /* 保存编辑 */
        save() { 
            this.$emit('close')
        },

        async getVersionList() {
            
            const res = await pageList({
                pageNum: 1,
                size: 100
            });

            this.versionList = res.list;
        },


        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        },



    },

    watch: {
        async visible(visible) {

            if (visible) {
                
                this.datasource();
                this.getVersionList()

                const res = await route.Flist({
                    pageNum: 1,
                    size: -1,
                    type: 1
                });
                this.fList = res.list;
                
                if (this.data) {
                    const res = await route.getById(this.data.id);
                    this.$util.assignObject(this.form, {
                        ...res
                    });

                    this.isUpdate = true;
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    }
};
</script>