zdsz_vue/src/components/EnginNodeInfo/index.vue

<!-- 
 *@description: 节点信息form（新）
 *@author: yh Fu
 *@date: 2024-01-10 14:44:14
 *@version: V1.0.5
 -->


 <template>
    <div style="width: 100%; height: 100%;">
        <!-- 节点表单 -->
        <el-form ref="fangxianForm" :model="nodeInfo" :rules="nodeRules" label-width="200px">
            <h2 style="margin-left: 16%;font-weight: 800;">{{ name }}</h2>
            <el-form-item label="施工时间" prop="constructTime" v-show="currentContain.includes('constructTime')">
                <el-date-picker
                    :disabled="formType"
                    v-model="nodeInfo.constructTime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    type="datetime"
                    placeholder="请选择施工时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="回填时间" prop="backfillTime" v-if="currentContain.includes('backfillTime')">
              <el-date-picker
                  :disabled="formType"
                  v-model="nodeInfo.backfillTime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  type="datetime"
                  placeholder="请选择回填日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否按图纸施工" prop="constructAccordingDrawings" v-if="currentContain.includes('constructAccordingDrawings')">
            <el-select v-model="nodeInfo.constructAccordingDrawings" :disabled="formType">
                <el-option
                v-for="e in constructAccordingDrawingsOption"
                :key="e.value"
                :label="e.label"
                :value="e.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="分段打压" prop="segmentedCompressionQualified" v-if="currentContain.includes('segmentedCompressionQualified')">
            <el-select v-model="nodeInfo.segmentedCompressionQualified" :disabled="formType">
                <el-option
                v-for="e in segmentedCompressionQualifiedOption"
                :key="e.value"
                :label="e.label"
                :value="e.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="照片" prop="zEngiineeringPhotoBoList" class="obsImage" v-if="currentContain.includes('zEngiineeringPhotoBoList')">
            <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoList"
                            @input="getUrl"></ObsImageUpload>
            </el-form-item>
            <el-form-item label="备注" prop="remark" v-if="currentContain.includes('remark')">
                <el-input
                    v-model="nodeInfo.remark"
                    type="textarea"
                    placeholder="请输入内容"
                    maxlength="255"
                />
            </el-form-item>
            <el-row v-for="(item, index) in zEngineeringMaterialBo" :key="index" style="left: 13%;">
                <!-- 在此处添加默认的行内容 -->
                <template v-if="index === null">
                    <div>默认的行内容</div>
                </template>
                <!-- 循环输出的行内容 -->
                <el-col :span="7" v-show="materialComponList.includes('materialQuality')">
                    <el-form-item
                    :prop="'zEngineeringMaterialBo.' + index + '.materialQuality'"
                    label-width="50px"
                    label="材质"

                    >
                    <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                    <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                    <el-select v-model="item.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(item, index)">
                        <el-option
                        v-for="e in materialQualityList"
                        :key="e.id"
                        :label="e.name"
                        :value="e.id"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('specifications')">
                    <el-form-item
                    :prop="'zEngineeringMaterialBo.' + index + '.specifications'"
                    label-width="50px"
                    label="规格"

                    >
                    <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
                    <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
                    <el-select v-model="status == '修改' ? item.specificationsName : item.specifications" placeholder="请选择规格" style="width: 100%">
                        <el-option
                        v-for="e in specificationsList"
                        :key="e.id"
                        :label="e.name"
                        :value="e.id"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('number')">
                    <el-form-item
                    :prop="'zEngineeringMaterialBo.' + index + '.number'"
                    label-width="50px"
                    label="数量"
                    >
                    <!--                  :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
                    <div class="block" style="display: inline-block; margin-right: 20px;">
                        <el-input v-model="item.number" placeholder="请输入数量" style="width: 100%" maxlength="8" type="number"/>
                    </div>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('remark')">
                    <el-form-item
                    :prop="'zEngineeringMaterialBo.' + index + '.remark'"
                    label="描述"
                    label-width="50px"
                    class="material_desc"
                    >
                    <!--                  :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
                    <div class="block" style="display: inline-block; margin-right: 20px;">
                        <el-input v-model="item.remark" placeholder="请填写描述" style="width: 200px;" maxlength="255" type="textarea"/>
                    </div>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('brand')">
                    <el-form-item
                    :prop="'zEngineeringMaterialBo.' + index + '.brand'"
                    label-width="50px"
                    label="品牌"

                    >
                    <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
                    <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
                    <el-select v-model="item.brand" placeholder="请选择品牌" style="width: 100%">
                        <el-option
                        v-for="e in specificationsList"
                        :key="e.id"
                        :label="e.name"
                        :value="e.id"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('corrosionLevel')">
                    <el-form-item
                    :prop="'zEngineeringMaterialBo.' + index + '.corrosionLevel'"
                    label-width="150px"
                    label="腐蚀等级"

                    >
                    <!--                  :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
                    <!--                  <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
                    <el-select v-model="item.corrosionLevel" placeholder="请选择腐蚀等级" style="width: 100%">
                        <el-option
                        v-for="e in corrosionLevelList"
                        :key="e.dictValue"
                        :label="e.dictLabel"
                        :value="e.dictValue"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('visitType')">
                    <el-form-item label="上门类型" :prop="'zEngineeringMaterialBo.' + index + '.visitType'">
                        <el-select v-model="item.visitType">
                            <el-option
                            v-for="e in dict.type.visit_type"
                            :key="e.value"
                            :label="e.label"
                            :value="e.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-show="materialComponList.includes('selfClosingValveType')">
                    <el-form-item label="自闭阀类型" :prop="'zEngineeringMaterialBo.' + index + '.selfClosingValveType'">
                        <el-select v-model="item.selfClosingValveType">
                            <el-option
                            v-for="e in dict.type.self_closing_valve_type"
                            :key="e.value"
                            :label="e.label"
                            :value="e.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-if="enginType != '民用工程'" style="position: absolute;right: 0;">
                    <el-form-item style="margin-left: -197px;">
                    <el-button v-if="zEngineeringMaterialBo.length > 0" @click="removezEngineeringMaterialBo(index)">
                        删除
                    </el-button>
                    </el-form-item>
                </el-col>
                </el-row>
            <div style="width: 25%; float: right" v-if="enginType != '民用工程'">
                <!-- <el-button @click="addzEngineeringMaterialBo('nodeInfo',['materialQuality','specifications','number'])">新增用料信息</el-button> -->
                <el-button @click="addMaterial()">新增用料信息</el-button>
                <!-- <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
                <el-button @click="nodeCancel">取 消</el-button> -->
            </div>
        </el-form>

    </div>
</template>

<script>
import { 
    getEnginMaterialQualityList,                    // 材质
    getEnginSpecificationsList,                     // 规格
    getDictType,                                    // 腐蚀程度

} from '@/api/zdsz/enginee'
export default {
    name:'EnginNodeInfo',
    props:['types','enginType','name','currentContain','updateOption','status'],
    dicts:[
        'visit_type',
        'self_closing_valve_type',
        
    ],
    data(){
        return {
            constructAccordingDrawingsOption:[
              {
                value:'Y',
                label:'是'
              },
              {
                value:'N',
                label:'否'
              }
            ],
            segmentedCompressionQualifiedOption:[
              {
                value:'1',
                label:'合格'
              },
              {
                value:'0',
                label:'不合格'
              }
            ],
            corrosionLevelList:[],                      // 腐蚀等级option
            materialQualityList:[],                     // 材质
            specificationsList:[],                      // 规格
            materialComponList:[],
            nodeInfo:{
                backfillTime:'',                        // 回填时间
                constructTime:'',
                constructAccordingDrawings:'',
                segmentedCompressionQualified:'',
                zEngiineeringPhotoBoList:[],            // 照片集合
                zEngineeringMaterialBo:[],              // 用料集合
                remark:'',
            },
            nodeInfoBo:{
                zEngineeringInfoBo:{

                }
            },                                         //  节点信息
            zEngineeringMaterialBo:[

            ],                                         //  用料信息
            
        }
    },
    created(){
        // 获取材质
        getEnginMaterialQualityList({enginType:this.enginType}).then(res => {
            console.log('材质',res)
            this.materialQualityList = res.data
        })
        // 获取腐蚀等级
        getDictType({dictType:'corrosion_level'}).then(res => {
            console.log('腐蚀等级',res)
            this.corrosionLevelList = res.data
        })
        console.log('update',this.updateOption)
    },
    mounted(){
        console.log('当前节点name',this.name)
        console.log('update',this.updateOption)
        console.log('当前节点currentContain',this.currentContain)
        this.materialComponList = this.currentContain.find(e => {
            if( e instanceof Array){
                return e
            }

        })

        if(this.status == '修改'){
            this.currentContain.find(e => {
                console.log(this.updateOption)
                if( e instanceof Array){
                    this.zEngineeringMaterialBo = this.updateOption.zEngineeringInfoBoList[0].zEngineeringMaterialBo
                }
                this.nodeInfo[e] = this.updateOption[e]
            })
            this.nodeInfo.zEngiineeringPhotoBoList = this.updateOption.zEngineeringInfoBoList[0].zEngiineeringPhotoBoList
        }

        setTimeout(() => {
            // 至少存在一条物料
            this.addMaterial()
        },1500)
        console.log('用料组件',this.materialComponList)
        console.log('用料信息',this.zEngineeringMaterialBo)
        console.log('节点信息',this.nodeInfo)
        // 添加用料对象
        // this.addMaterial()
    },
    methods:{ 
        // 收集节点信息
        infoCollection(){
            // 收集主节点信息
            this.currentContain.forEach(e => {
                if( e instanceof Array){
                    // 包含用料 特殊处理
                    return 
                }
                this.nodeInfoBo[e] = this.nodeInfo[e]
            })
            this.nodeInfoBo.type = this.name
            // 接口数据格式修改 图片和用料放到nodeInfoBo节点详情对象中
            this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.nodeInfo.zEngiineeringPhotoBoList
            this.nodeInfoBo.zEngineeringInfoBo.zEngineeringMaterialBo = this.zEngineeringMaterialBo
            delete this.nodeInfo.zEngiineeringPhotoBoList
            console.log('即将返回的节点Info',this.nodeInfoBo)
            return this.nodeInfoBo
        },
        addMaterial(){
            let materialBo = {}
            console.log(this.materialComponList)
            this.materialComponList.forEach(e => {
                materialBo[e] = null
            })
            this.zEngineeringMaterialBo.push(materialBo)
            // console.log('节点用料参数对象',this.zEngineeringMaterialBo)
        },
        addzEngineeringMaterialBo(option,params){
            let material = {}
            params.forEach(e => {
                material[e] = ""
            })
            this[option].zEngineeringMaterialBo.push(
                material
            )
        },
        // 填充已有数据
        updateInfo(e){
            console.log('填充',e)
        },
        getUrl(url) {
            this.nodeInfo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList ? this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
        },
        // 获取材质规格
        getEnginSpecificationsList(e,idx){
            getEnginSpecificationsList({materId:e.materialQuality}).then(res => {
                console.log('规格',res.data)
                this.specificationsList = res.data
            })
        },
    }
}
</script>

<style lang="scss" scoped>

::v-deep .material_desc{
    .el-form-item__content{
        margin-left: 50px !important;
    }
}
::v-deep .el-form{
    position: relative;
    left: -10%;
    .el-form-item{
        display: inline-block;
    }
    .obsImage{
        width: 100%;
        display: block;
        margin-left: 8%;
        .el-form-item__label{
            width: 113px !important;
        }
    }
}
</style>