zdsz_vue/src/components/ConstructionDetails/index.vue

<!--
   *@description: 工程历史详情
   *@author: yh Fu
   *@date: 2024-1-8 10:04:23
   *@version: V1.0.5
-->

<template>
  <div style="width: 100%;height: 100%;">
    <el-dialog
    :visible.sync="dialogVisible"
    title=""
    width="60%"
    append-to-body
    custom-class="ConstructionDetailsDialog">
    <el-tabs type="card" v-model="activeNames" @tab-click="viewSource" class="projectTabs">
      <el-tab-pane
        :label="e.label"
        :name="e.value"
        v-for="(e,idx) in currentDicts"
        :key="idx"
      >
        <el-collapse
          class="rmOldPie"
          v-for="(e,idx) in currentCollapses"
          :key="idx"
        >
          <el-collapse-item :name="idx">
            <template slot="title">
              <div style="display: flex;width: 100%;height: 100%;">
                <div
                  style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                </div>
                <h2 style="margin-left: 1%;font-weight: 700;">{{ e.updateTime }}</h2>
              </div>
            </template>
            <!--  人员信息 -->
            <div>
              负责人：{{ e.headName }} &nbsp;&nbsp;
              施工人：{{ e.constructUser }} &nbsp;&nbsp;
              负责人电话：{{ e.headPhone }} &nbsp;&nbsp;
              施工人电话：{{ e.constructPhone }}
            </div>
            <hr>
            <!--  用料明细 -->
            <div
                v-for="(i,index) in e.zEngineeringMaterialBo || [] "
                :key="index"
              >
                <el-form :model="nodeInfo" class="nodeForm">
                    <el-form-item
                      :prop="i.materialQuality"
                      label-width="50px"
                      label="材质"
                      v-show="i.materialQuality != null"
                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(item, index)" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in materialQualityList"
                          :key="e.id"
                          :label="e.name"
                          :value="e.id"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.specifications"
                      label-width="50px"
                      label="规格"
                      v-show="i.specifications != null"

                      >
                      <el-select v-model="i.specifications" placeholder="请选择规格" style="width: 100%" @change="getEnginSpecificationsList(item, index)" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in specificationsList"
                          :key="e.id"
                          :label="e.name"
                          :value="e.id"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.number + ''"
                      label-width="50px"
                      label="数量"
                      v-show="i.number != null"
                      >
                      <div class="block" style="display: inline-block; margin-right: 20px;">
                          <el-input v-model="i.number" placeholder="请输入数量" style="width: 100%" type="number" :disabled="status == 'read-only' "/>
                      </div>
                    </el-form-item>

                    <el-form-item
                      :prop="i.corrosionLevel"
                      label="腐蚀等级"
                      v-show="i.corrosionLevel != null"

                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.corrosionLevel" placeholder="请选择腐蚀等级" style="width: 100%" @change="getEnginSpecificationsList(item, index)" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in corrosionLevelList"
                          :key="e.dictValue"
                          :label="e.dictLabel"
                          :value="e.dictValue"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.visitType"
                      label-width="50px"
                      label="上门类型"
                      v-show="i.visitType != null"

                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.visitType" placeholder="请选择上门类型" style="width: 100%" @change="getEnginSpecificationsList(item, index)" :disabled="status == 'read-only' ">
                          <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-form-item
                      :prop="i.selfClosingValveType"
                      label-width="50px"
                      label="自闭阀类型"
                      v-show="i.selfClosingValveType != null"

                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.selfClosingValveType" placeholder="请选择自闭阀类型" style="width: 100%" @change="getEnginSpecificationsList(item, index)" :disabled="status == 'read-only' ">
                          <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-form>
                <!-- <el-input size="mini" v-if="i.brand" style="width: 80%" v-model="i.brand" placeholder="请输入品牌">
                  <template slot="prepend">品牌</template>
                </el-input>
                <el-input v-if="i.visitType" size="mini" v-model="i.visitType" placeholder="请输入品牌">
                  <template slot="prepend">上门类型</template>
                </el-input>
                <el-input size="mini" v-if="i.corrosionLevel" v-model="i.corrosionLevel" placeholder="请输入品牌">
                  <template slot="prepend">腐蚀等级</template>
                </el-input>
                <el-input size="mini" v-if="i.selfClosingValveType" v-model="i.selfClosingValveType"
                          placeholder="请输入品牌">
                  <template slot="prepend">自闭阀类型</template>
                </el-input> -->
            </div>
            <!-- <el-form-item label="照片" :prop="e.zEngiineeringPhotoBoList" class="obsImage"> -->
              <ObsImageUpload
                :class=" status == 'read-only' ? '' : obsImageUpload"
                ref="obsImageUpload"
                :limit="9999"
                :fileType="['png', 'jpg', 'jpeg']"
                @input="getUrl"
                :value="e.zEngiineeringPhotoBoList"
                :disabled="status == 'read-only' "
              ></ObsImageUpload>
            <!-- </el-form-item> -->
            <hr>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <button class="check" @click="checkWorking" v-if="currentStatus == 'check' && reviewStatus " style="width: 80px;border: none;">审核</button>
      <button class="check" @click="updateNodeOption" style="width: 94px;border: none;cursor: pointer;" v-if="currentStatus != 'check'">修改</button>
    </el-tabs>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="checkingVisible"
      width="30%"
      class="checkingDialog"
      :before-close="handleClose">
      <el-form :model="checkingInfo" ref="checking" class="nodeForm">
        <el-form-item
          label-width="70px"
          label="审核状态"
          >
          <el-select v-model="checkingInfo.reviewStatus" placeholder="请选择审核状态" style="width: 100%" label="审核状态">
              <el-option
              v-for="e in reviewStatusList"
              :key="e.label"
              :label="e.label"
              :value="e.value"
              ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label-width="70px"
          label="审核内容"
          >
          <div class="block" style="display: inline-block; margin-right: 20px;">
              <el-input 
                v-model="checkingInfo.reviewContent" 
                placeholder="请输入审核内容" 
                type="textarea"
                style="width: 100%"/>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkingVisible = false">取 消</el-button>
        <el-button type="primary" @click=checkingSubmit>确 定</el-button>
      </span>
    </el-dialog>
  </div>
  
</template>

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

} from '@/api/zdsz/enginee'
export default {
  name: 'ConstructionDetails',
  dicts:[
      'visit_type',
      'self_closing_valve_type',

  ],
  props: ['currentCollapses','nodeDetailType','enginType','status'],
  data() {
    return {
      currentDicts: [],              // 当前类型工程节点项
      dialogVisible: false,
      activeNames: '',
      reviewStatusList:[
        {
          value:'1',
          label:'通过'
        },
        {
          value:'0',
          label:'不通过'
        }
      ],                                          // 审核状态option
      corrosionLevelList:[],                      // 腐蚀等级option
      materialQualityList:[],                     // 材质
      specificationsList:[],                      // 规格
      materialComponList:[],
      nodeInfo:{
          backfillTime:'',                        // 回填时间
          constructTime:'',
          constructAccordingDrawings:'',
          segmentedCompressionQualified:'',
          zEngiineeringPhotoBoList:[],            // 照片集合
          zEngineeringMaterialBo:[],              // 用料集合
          remark:'',
      },
      checkingInfo:{
        reviewStatus:'',               // 审核状态
        reviewContent:'',              // 审核内容
        engInfoId:'',                  // 节点Id
        createTime:'',                 // 工程创建时间
      },
      currentStatus:null,
      checkingVisible:null,
    }
  },
  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
      })

  },
  mounted() {
  },
  computed:{
    reviewStatus(){
      let flag = null
      try {
        flag = currentCollapses[0].zEngineeringReviewBo.reviewStatus != '1' ? true : false
      } catch (error) {
        flag = true
      }
      return flag
    }
  },
  watch: {
    // 此处监听variable变量，当期有变化时执行
    currentDicts(item1, item2) {
      // item1为新值，item2为旧值
      console.log('item1为新值，item2为旧值', item1[0].value)
      this.activeNames = item1[0].value
      this.$parent.viewNodeSource(item1[0].value)
    },
    currentCollapses(){
      let materialQuality = []
      try {
        materialQuality = this.currentCollapses[0].zEngineeringMaterialBo[0].materialQuality
      } catch (error) {
        materialQuality = []
      }
      if(materialQuality){
        getEnginSpecificationsList({materId:materialQuality}).then(res => {
          console.log('规格',res.data)
          this.specificationsList = res.data
        })
      }
    }
  },
  methods: {
    // 提交审核
    checkingSubmit(){
      try {
        this.checkingInfo.engInfoId = this.currentCollapses[0].id
      } catch (error) {
        this.checkingInfo.engInfoId = null
      }
      this.$emit('checkWorking',this.checkingInfo)
    },
    // 查看单节点历史
    viewSource(e) {
      console.log(this.$parent)
      this.$parent.viewNodeSource(e.name)
    },
    // 单项审核
    checkWorking() {
      if(this.currentStatus == 'check'){
        this.checkingVisible = true
      }
    },
    updateNodeOption(){
      console.log(this.activeNames)
      console.log('最新面板',this.currentCollapses)
      this.$emit('updateNodeOption',this.currentCollapses)
    },
    // 查看历史
    open(dicts, type = null,currentStatus = null) {
      this.currentStatus = currentStatus
      this.checkingVisible = false
      if (type == '1' || type == '2') {
        // 工业 市政
        this.$parent.viewNodeSource()
        this.currentDicts = [
          {
            value: "历史数据",
            label: "历史数据"
          }
        ]
      } else if (type === '危险作业工程') {
        this.$parent.viewNodeSource()
        this.currentDicts = [
          {
            value: "历史数据",
            label: "历史数据"
          }
        ]
      } else {
        console.log(dicts)
        debugger
        this.dialogVisible = true
        this.currentDicts = dicts
      }

      this.dialogVisible = true
    },
    // 获取材质规格
    getEnginSpecificationsList(e,idx){
        getEnginSpecificationsList({materId:e.materialQuality}).then(res => {
            console.log('规格',res.data)
            this.specificationsList = res.data
        })
    },
    getUrl(url,idx) {
      this.$refs.obsImageUpload.fileList ? this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .nodeForm{
  .el-form-item__content{
    display: flex;
  }
}
::v-deep .obsImageUpload{
  .el-upload--picture-card{
    display: block !important;
  }
}
::v-deep .obsImageUpload >div{
  display: flex;
}
::v-deep .el-dialog {
  height: 85%;

  .el-dialog__body {
    overflow: hidden;
    height: 94%;
  }
}

::v-deep .el-upload--picture-card {
  display: none;
}

.ConstructionDetailsDialog {
  position: absolute;

  .projectTabs {
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 4%;

    ::v-deep .el-tabs__content {
      margin-top: 1%;
    }

    ::v-deep .el-tabs__nav {
      border: none;
      overflow: hidden;
      overflow-x: scroll;
    }

    ::v-deep .el-tabs__item {
      // width: 47%;
      border: 1px solid #797979;
      border-radius: 5px;
    }

    ::v-deep .el-tabs__item.is-active {
      background-color: #169BD5;
      color: #fff;
    }

    ::v-deep .el-tabs__header {
      position: fixed;
      width: 53%;
      border: none;
      top: 13%;
    }

    ::v-deep .el-collapse-item__wrap {
      padding: 0 4%;
    }

    .check {
      position: fixed;
      right: 22.1%;
      top: 13.1%;
      height: 4.6%;
      background-color: #CC9900;
      color: #fff;
    }
  }

  .projectTabs::-webkit-scrollbar {
    display: none;
  }

  ::v-deep .rmOldPie {
    .el-collapse-item {
      border: none;
    }
  }
}

::v-deep .checkingDialog{
 height: 50%;
 margin-top: 6%;
 .el-dialog__body{
  height: 72%;
 } 
 .el-textarea__inner{
  width: 246%;
  height: 140px;
 }
}
</style>