民用批量新增 组件封装

src/api/zdsz/enginee.js

@@ -24,7 +24,16 @@ export function getDictList({enginType}) {
     })
 }
 
-
+export function getUnits(areaId,buildingId) {
+    return request({
+      url: '/zdsz/unit/getUnitList',
+      method: 'GET',
+      params:{
+        areaId:areaId,
+        buildingId:buildingId
+      }
+    })
+  }
 
 // 查询楼栋集合
 export function getBuildingList({areaId}) {
@@ -58,6 +67,14 @@ export function getEnginMaterialQualityList({enginType}) {
     })
 }
 
+// 获取材质规格
+export function getEnginSpecificationsList(params) {
+    return request({
+        url: `/zdsz/enginSpecifications/getEnginSpecificationsList`,
+        method: 'get', 
+        params
+    })
+}
 
 
 // 查询工程列表（工业 1 市政 2）

src/components/EnginNodeInfo/index.vue

@@ -6,22 +6,31 @@
  -->
 
 
-<template>
+ <template>
     <div style="width: 100%; height: 100%;">
         <!-- 节点表单 -->
-        <el-form ref="fangxianForm" :model="fangxianInfo" :rules="nodeRules" label-width="200px" v-show="types.includes('放线')">
-            <h2 style="margin-left: 16%;font-weight: 800;">放线</h2>
-            <el-form-item label="施工时间" prop="constructTime">
-            <el-date-picker
-                :disabled="formType"
-                v-model="fangxianInfo.constructTime"
-                value-format="yyyy-MM-dd hh:mm:ss"
-                type="datetime"
-                placeholder="请选择施工时间">
-            </el-date-picker>
+        <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="constructAccordingDrawings">
-            <el-select v-model="fangxianInfo.constructAccordingDrawings" :disabled="formType">
+            <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"
@@ -30,8 +39,8 @@
                 ></el-option>
             </el-select>
             </el-form-item>
-            <el-form-item label="分段打压" prop="segmentedCompressionQualified">
-            <el-select v-model="fangxianInfo.segmentedCompressionQualified" :disabled="formType">
+            <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"
@@ -40,19 +49,27 @@
                 ></el-option>
             </el-select>
             </el-form-item>
-            <el-form-item label="照片" prop="zEngiineeringPhotoBoList" style="width: 8%;display: block;">
-            <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="fangxianInfo.zEngiineeringPhotoBoList"
+            <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-row v-for="(item, index) in fangxianInfo.zEngineeringMaterialBo" :key="index" style="left: 13%;">
+            <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">
+                <el-col :span="7" v-show="materialComponList.includes('materialQuality')">
                     <el-form-item
-                    :prop="'fangxianInfo.zEngineeringMaterialBo.' + index + '.materialQuality'"
+                    :prop="'zEngineeringMaterialBo.' + index + '.materialQuality'"
                     label-width="50px"
                     label="材质"
 
@@ -69,9 +86,9 @@
                     </el-select>
                     </el-form-item>
                 </el-col>
-                <el-col :span="7">
+                <el-col :span="7" v-show="materialComponList.includes('specifications')">
                     <el-form-item
-                    :prop="'fangxianInfo.zEngineeringMaterialBo.' + index + '.specifications'"
+                    :prop="'zEngineeringMaterialBo.' + index + '.specifications'"
                     label-width="50px"
                     label="规格"
 
@@ -88,28 +105,91 @@
                     </el-select>
                     </el-form-item>
                 </el-col>
-                <el-col :span="7">
+                <el-col :span="7" v-show="materialComponList.includes('brand')">
                     <el-form-item
-                    :prop="'fangxianInfo.zEngineeringMaterialBo.' + index + '.number'"
+                    :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="50px"
+                    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 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('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="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"/>
+                        <el-input v-model="item.number" placeholder="请输入数量" style="width: 100%" maxlength="8" type="number"/>
                     </div>
                     </el-form-item>
                 </el-col>
                 <el-col :span="3">
                     <el-form-item style="margin-left: -197px;">
-                    <el-button v-if="fangxianInfo.zEngineeringMaterialBo.length > 1" @click="removezEngineeringMaterialBo(index)">
+                    <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">
-                <el-button @click="addzEngineeringMaterialBo('fangxianInfo',['materialQuality','specifications','number'])">新增用料信息</el-button>
+                <!-- <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>
@@ -119,10 +199,19 @@
 </template>
 
 <script>
-import { getEnginMaterialQualityList } from '@/api/zdsz/enginee'
+import { 
+    getEnginMaterialQualityList,                    // 材质
+    getEnginSpecificationsList,                     // 规格
+
+} from '@/api/zdsz/enginee'
 export default {
     name:'EnginNodeInfo',
-    props:['types','enginType'],
+    props:['types','enginType','name','currentContain'],
+    dicts:[
+        'visit_type',
+        'self_closing_valve_type',
+        
+    ],
     data(){
         return {
             constructAccordingDrawingsOption:[
@@ -145,22 +234,79 @@ export default {
                 label:'不合格'
               }
             ],
-            fangxianInfo:{
+            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
+        })
+    },
+    mounted(){
+        console.log('当前节点name',this.name)
+        console.log('当前节点currentContain',this.currentContain)
+        this.materialComponList = this.currentContain.find(e => {
+            if( e instanceof Array){
+                return e
+            }
+            // 不处理图片
+            if(e == 'zEngiineeringPhotoBoList') return
         })
+        console.log('用料信息',this.materialComponList)
+        // 添加用料对象
+        // this.addMaterial()
     },
-    methods:{
+    methods:{ 
+        // 收集节点信息
+        infoCollection(){
+            // 收集主节点信息
+            this.currentContain.forEach(e => {
+                if( e instanceof Array){
+                    // 包含用料 特殊处理
+                    return 
+                }
+                this.nodeInfoBo[e] = this.nodeInfo[e]
+            })
+            // if(this.nodeInfo.hasOwnProperty('zEngiineeringPhotoBoList')){
+            //     delete this.nodeInfo.zEngiineeringPhotoBoList
+            // }
+            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 = {}
+            this.materialComponList.forEach(e => {
+                materialBo[e] = null
+            })
+            this.zEngineeringMaterialBo.push(materialBo)
+            console.log('节点用料参数对象',this.zEngineeringMaterialBo)
+        },
         addzEngineeringMaterialBo(option,params){
             let material = {}
             params.forEach(e => {
@@ -169,7 +315,17 @@ export default {
             this[option].zEngineeringMaterialBo.push(
                 material
             )
-        }
+        },
+        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>
@@ -181,5 +337,13 @@ export default {
     .el-form-item{
         display: inline-block;
     }
+    .obsImage{
+        width: 100%;
+        display: block;
+        margin-left: 8%;
+        .el-form-item__label{
+            width: 113px !important;
+        }
+    }
 }
 </style>

src/views/zdsz/engineeringCivil/index.vue

@@ -168,7 +168,7 @@
       @pagination="getList"
     />
     <!-- 添加或修改民用工程对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="500" append-to-body custom-class="addDialog">
       <el-form ref="form" :model="queryParams" :rules="rules" label-width="110px">
 
         <el-row>
@@ -308,7 +308,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="节点">
-              <el-checkbox-group v-model="checkList">
+              <el-checkbox-group v-model="currentCheckList">
                 <el-checkbox 
                   :label="item.dictValue" 
                   v-for="item in checkList"
@@ -319,7 +319,12 @@
           </el-col>
         </el-row>
         <EnginNodeInfo 
-          :types="checkList"
+          v-for="(e,idx) in currentCheckList"
+          :key="idx"
+          :name="e"
+          :ref="'EnginNodeInfo'+idx"
+          :currentContain="(listContain.find(i => i.name == e)).components"
+          :types="currentCheckList"
           enginType="民用工程"
         />
         <!-- <el-tabs type="border-card" >
@@ -330,7 +335,7 @@
         </el-tabs> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">填写节点信息</el-button>
+        <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">新增</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -347,7 +352,6 @@ import {
 } from "@/api/zdsz/engineeringCivil";
 import {
   addEnginee,                                // 新增工程
-  getUnitList,                               // 获取当前单元集合
   getHousesList,                             // 获取当前房间集合
   putEngineeringCivil,                       // 民用工程修改
   viewEngineeringCivil,                      // 民用工程查看详情
@@ -382,6 +386,190 @@ export default {
     "engin_cycle"],
   data() {
     return {
+      listContain:[
+        {
+          name:'放线',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'constructAccordingDrawings',              // 是否按图纸施工
+              'segmentedCompressionQualified',           // 分段打压
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'挖沟',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'焊接',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'下沟',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'回田',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'backfillTime',                            // 回填时间
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'打压',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'segmentedCompressionQualified',           // 分段打压
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'除锈',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'刷油',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'打磨',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'打孔',
+          components:[
+              [
+                'corrosionLevel',                        // 孔径/腐蚀等级
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+            ]
+        },
+        {
+          name:'立杠',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+            ]
+        },
+        {
+          name:'挂表',
+          components:[
+              [
+                'brand',                                 // 品牌
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+              'remark',                                  // 施工内容
+            ]
+        },
+        {
+          name:'表后管',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+              ],
+              'constructAccordingDrawings',              // 是否按图纸施工
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+            ]
+        },
+        {
+          name:'阀管',
+          components:[
+              [
+                'materialQuality',                       // 材质
+                'specifications',                        // 规格
+                'number',                                // 数量
+                'visitType',                             // 上门类型
+                'selfClosingValveType',                  // 自闭阀类型
+              ],
+              'constructTime',                           // 施工时间
+              'zEngiineeringPhotoBoList',                // 照片
+            ]
+        },
+      ],
+      currentCheckList:[],
       enginClassificationinfo: '',
       enginClassification: '',
       enginClassificationOption: [],
@@ -540,6 +728,11 @@ export default {
   },
   mounted() {
   },
+  computed:{
+    currentContain(e){
+      console.log('当前contain',e)
+    }
+  },
   methods: {
     // 新增顶管工程
     addNewPipe(data) {
@@ -580,7 +773,7 @@ export default {
     buildingHasChanged(buildingId) {
       console.log(buildingId)
       this.queryParams.unitId = null
-      getUnitList({buildingId}).then(res => {
+      getUnits(this.queryParams.areaId,buildingId ).then(res => {
         this.unitOptions = res.data
       })
     },
@@ -710,6 +903,25 @@ export default {
       this.nodeDetailVisible = false
     },
     toNodeDetail() {
+      let nodeCollection = []
+      // 收集节点信息
+      this.currentCheckList.forEach((e,idx) => {
+         let nodeItem = this.$refs['EnginNodeInfo'+ idx][0].infoCollection()
+        //  console.log(nodeItem)
+         nodeCollection.push(nodeItem)
+      })
+      this.queryParams.zEngineeringNodeBoList = nodeCollection
+      addEngineeringCivil(this.queryParams).then(res => {
+        if(res.code == 200){
+          this.$message({
+            message: '新增成功',
+            type: 'success'
+          });
+          this.open = false
+          // this.$emit('closeToSucceed')
+        }
+      })
+      return
       getDictList({enginType: ['new_built', 'old_renovation']}).then(res => {
         this.nodeList = res.data
         console.log('跳到详情前的queryParams', this.queryParams)
@@ -841,6 +1053,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+
+::v-deep .addDialog{
+  width: 60%;
+}
 ::v-deep .appendElDialog {
   width: 70%;
   height: 80%;