zdsz_vue/src/components/ConstructionDetails/indexSZ.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="titleName"
      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-checkbox-group v-model="checkList">
            <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%;">
                    <el-checkbox :label="e.id" @change="handleCheckedCitiesChange">
                      <h2 style="margin-left: 1%;font-weight: 700;">{{ e.updateTime }}</h2>
                    </el-checkbox>
                    <h2 style="margin-left: 20%;font-weight: 700;" v-if="['review','put'].includes(status)">
                      {{ e.state == '0' ? "该施工信息审核未通过" : "" }}</h2>
                    <h2 style="margin-left: 20%;font-weight: 700; color: #1ab394" v-if="['review','put'].includes(status)">
                      {{ e.state == 1 ? "该施工信息审核通过" : "" }}</h2>
                  </div>
                </template>
                <div class="personInfo">
                  <span>施工人：{{ userNames[idx].nickName }}</span>
                  <span>施工人电话：{{ userNames[idx].phonenumber }}</span>
                </div>
                <hr>
                <el-form :model="e">
                  <el-form-item
                    :prop="e.remark"
                    :class="'labelWidth'"
                    label="施工内容"
                    label-width="95px"
                  >
                    <div class="block" style="display: inline-block; margin-right: 20px;">
                      <el-input v-model="e.remark" placeholder="请输入施工内容" style="width: 100%" maxlength="100"
                                type="textarea" :readonly="['review','read-only'].includes(status)"></el-input>
                    </div>
                  </el-form-item>
                </el-form>
                <!--  用料明细 -->
                <div v-if="['焊接、防腐','架空管线','下管','沟下连头'].includes(activeNames)"
                     v-for="(i,index) in e.zEngineeringMaterialBo || [] "
                     :key="index"
                >
                  <el-form :model="nodeInfo" class="nodeForm materialForm">
                    <el-form-item
                      :prop="i.materialQuality"
                      :class="'labelWidth'"
                      :label="'材质'"
                      label-width="95px"
                    >
                      <el-select v-model="i.materialQuality" placeholder="请选择材质" style="width: 100%"
                                 @change="getEnginSpecificationsList(i, index,idx)" :disabled="['review','read-only'].includes(status)">
                        <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"
                      :class="'labelWidth'"
                      label="规格"
                      label-width="95px"

                    >
                      <el-select v-model="i.specifications" placeholder="请选择规格" style="width: 100%"
                                 :disabled="['review','read-only'].includes(status)">
                        <el-option
                          v-for="e in corrosionLevelListAll.filter(o => o.materId == i.materialQuality)"
                          :key="e.id"
                          :label="e.name"
                          :value="e.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <!--                    <el-form-item-->
                    <!--                      :prop="i.remark + ''"-->
                    <!--                      :class="'labelWidth'"-->
                    <!--                      label="施工内容"-->
                    <!--                      label-width="95px"-->
                    <!--                    >-->
                    <!--                      <div class="block" style="display: inline-block; margin-right: 20px;">-->
                    <!--                        <el-input v-model="i.remark" placeholder="请输入施工内容" style="width: 100%" maxlength="100"-->
                    <!--                                  type="textarea" :disabled="status == 'read-only'"></el-input>-->
                    <!--                      </div>-->
                    <!--                    </el-form-item>-->

                    <el-form-item
                      :prop="i.number + ''"
                      :class="'labelWidth'"
                      label="米数"
                      label-width="95px"
                    >
                      <div class="block" style="display: inline-block; margin-right: 20px;">
                        <el-input v-model="i.number" placeholder="请输入米数" style="width: 100%"
                                  oninput="value=value.match(/\d+(\.\d{0,1})?/) ? value.match(/\d+(\.\d{0,1})?/)[0] : ''"
                                  max="999999999" :disabled="['review','read-only'].includes(status)"></el-input>
                      </div>
                    </el-form-item>
                    <!--                    <el-form-item-->
                    <!--                      :prop="i.remark + ''"-->
                    <!--                      label="描述"-->
                    <!--                    >-->
                    <!--                      <div class="block" style="display: inline-block; margin-right: 20px;">-->
                    <!--                        <el-input v-model="i.remark" placeholder="请输入描述" style="width: 100%" maxlength="100"-->
                    <!--                                  :disabled="status == 'read-only'"></el-input>-->
                    <!--                      </div>-->
                    <!--                    </el-form-item>-->
                  </el-form>
                </div>
                <div v-if="['阀井'].includes(activeNames)"
                     v-for="(i,index) in e.zEngineeringMaterialBo || [] "
                     :key="index"
                >
                  <el-form :model="nodeInfo" class="nodeForm materialForm">
                    <el-form-item
                      :prop="i.remark"
                      :class="'labelWidth'"
                      label="型号"
                      label-width="95px"
                    >
                      <el-input v-model="i.remark" placeholder="请输入型号" style="width: 100%" maxlength="100"
                                type="textarea" :disabled="['review','read-only'].includes(status)"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
                <div style="display: flex;width: 100%;height: 100%;" v-if="activeNames != '回填、撤场'">
                  <h3 style="width: 95px;font-weight: 600;text-align: left;text-indent: 25px;">图片</h3>
                  <ObsImageUpload
                    :class=" (status == 'read-only' || status == 'review' )? 'obsImageUploads' : '' "
                    ref="obsImageUpload"
                    :limit="11"
                    :fileType="['png', 'jpg', 'jpeg']"
                    @input="getUrl(arguments,idx)"
                    :value="e.zEngiineeringPhotoBoList"
                    :disabled="['review','read-only'].includes(status)"
                  ></ObsImageUpload>
                </div>
                <div style="display: flex;width: 100%;height: 100%;" v-if="activeNames == '回填、撤场'">
                  <h3 style="width: 95px;font-weight: 600;text-align: left;text-indent: 25px;">回填前</h3>
                  <ObsImageUpload
                    :class=" (status == 'read-only' || status == 'review' )? 'obsImageUploads' : '' "
                    ref="obsImageUpload1"
                    :limit="11"
                    :fileType="['png', 'jpg', 'jpeg']"
                    @input="getUrl1(arguments,idx)"
                    :value="e.zEngiineeringPhotoBoListOne"
                    :disabled="['review','read-only'].includes(status)"
                  ></ObsImageUpload>
                </div>
                <div style="display: flex;width: 100%;height: 100%;" v-if="activeNames == '回填、撤场'">
                  <h3 style="width: 95px;font-weight: 600;text-align: left;text-indent: 25px;">铺设警示带</h3>
                  <ObsImageUpload
                    :class=" (status == 'read-only' || status == 'review' )? 'obsImageUploads' : '' "
                    ref="obsImageUpload2"
                    :limit="11"
                    :fileType="['png', 'jpg', 'jpeg']"
                    @input="getUrl2(arguments,idx)"
                    :value="e.zEngiineeringPhotoBoListTwo"
                    :disabled="['review','read-only'].includes(status)"
                  ></ObsImageUpload>
                </div>
                <div style="display: flex;width: 100%;height: 100%;" v-if="activeNames == '回填、撤场'">
                  <h3 style="width: 95px;font-weight: 600;text-align: left;text-indent: 25px;">回填后</h3>
                  <ObsImageUpload
                    :class=" (status == 'read-only' || status == 'review' )? 'obsImageUploads' : '' "
                    ref="obsImageUpload3"
                    :limit="11"
                    :fileType="['png', 'jpg', 'jpeg']"
                    @input="getUrl3(arguments,idx)"
                    :value="e.zEngiineeringPhotoBoListThree"
                    :disabled="['review','read-only'].includes(status)"
                  ></ObsImageUpload>
                </div>
                <div style="display: flex;  justify-content: flex-end; width: 100%;height: 100%;"
                     v-if="status == 'put'">
                  <el-button plain type="danger" @click=" handleDelete(e)"
                             v-hasPermi="['zdsz:engineeringCivilNode:remove']" style="width: 94px;">删除
                  </el-button>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-checkbox-group>
        </el-tab-pane>
        <el-button class="check" plain type="danger" @click="checkWorking"
                   v-if="status == 'review' " style="width: 80px;"
                   :disabled="currentCollapses.length == 0">审核
        </el-button>
        <el-button class="check" plain type="danger" @click="updateNodeOption" style="width: 94px;cursor: pointer;"
                   v-if="status == 'put' ">修改
        </el-button>
      </el-tabs>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="checkingVisible"
      :title="titleName"
      width="30%"
      class="checkingDialog"
      :before-close="handleChecking">
      <el-form :model="checkingInfo" ref="checking" :rules="checkingRule" class="nodeForm">
        <el-form-item
          label-width="85px"
          label="审核状态"
          prop="reviewStatus"
        >
          <el-select v-model="checkingInfo.reviewStatus" placeholder="请选择审核状态" style="width: 100%"
                     label="审核状态" @change="validateCHanged">
            <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="85px"
          label="审核内容"
          prop="reviewContent"
        >
          <div class="block" style="display: inline-block; margin-right: 20px;">
            <el-input
              v-model="checkingInfo.reviewContent"
              placeholder="请输入审核内容"
              type="textarea"
              style="width: 97%"/>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleChecking">取 消</el-button>
        <el-button type="primary" @click=checkingSubmit>确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {
  deleteinfoById,
  getEnginMaterialQualityList,                    // 材质
  getEnginSpecificationsList,                     // 规格

} from '@/api/zdsz/enginee'
import {selectUserByUserName} from '@/api/system/user'
import ObsVideoUpload from "@/components/ObsVideoUpload/index.vue";

export default {
  name: '市政info',
  dicts: [],
  components: {ObsVideoUpload},
  props: ['currentCollapses', 'nodeDetailType', 'enginType', 'status', 'zEngineeringNodeBo'],
  data() {
    return {
      kind: null,
      userNames: [],
      checkList: [],
      enginNode: '',
      currentDicts: [],              // 当前类型工程节点项
      dialogVisible: false,
      activeNames: '',
      titleName: '',
      reviewStatusList: [
        {
          value: '1',
          label: '通过'
        },
        {
          value: '0',
          label: '不通过'
        }
      ],
      nodesource: '',// 审核状态option
      materialQualityList: [],                     // 材质
      specificationsList: [],                      // 规格
      materialComponList: [],
      engineType: null,
      enginClassification: null,
      nodeInfo: {
        backfillTime: '',                       // 回填时间
        constructTime: '',
        constructAccordingDrawings: '',
        segmentedCompressionQualified: '',
        zEngiineeringPhotoBoList: [],            // 照片集合
        zEngiineeringPhotoBoListOne: [],            // 照片集合
        zEngiineeringPhotoBoListTwo: [],            // 照片集合
        zEngiineeringPhotoBoListThree: [],            // 照片集合
        zEngineeringMaterialBo: [],              // 用料集合
        remark: '',
        constructAddre: ''
      },
      checkingInfo: {
        reviewStatus: '',               // 审核状态
        reviewContent: '',              // 审核内容
        engInfoId: '',                  // 节点Id
        createTime: '',                 // 工程创建时间
      },
      currentStatus: null,
      checkingVisible: null,
      isChecking: true,
      currentEnginId: null,
      reviewStatus: null,
      corrosionLevelListAll: [],
      infoIdList: [],
      delinfoidList: [],
      checkingRule: {
        reviewStatus: [
          {required: true, message: "审核状态不能为空", trigger: "blur"}
        ],
        reviewContent: [
          {required: true, message: "审核内容不能为空", trigger: "change"}
        ],
      },
      node: null
    }
  },
  created() {

  },
  mounted() {
    this.getGoods()
  },
  watch: {
    // 此处监听variable变量，当期有变化时执行
    currentDicts(item1, item2) {
      this.activeNames = item1[0].value
      this.$parent.viewNodeSource(item1[0].value)
    },
    currentCollapses() {
      console.log('currentCollapses', this.currentCollapses)
      this.userNames = [];
      for (let i in this.currentCollapses) {
        selectUserByUserName(this.currentCollapses[i].createBy).then(res => {
          this.userNames.push(res);
        })
      }
      try {
        this.currentCollapses[0].zEngineeringReviewBo.reviewStatus != 1 ? this.isChecking = true : false
      } catch (error) {
        this.isChecking = true
      }
      console.log('isChecking', this.isChecking)
      let materialQuality = []
      try {
        materialQuality = this.currentCollapses[0].zEngineeringMaterialBo[0].materialQuality
      } catch (error) {
        materialQuality = []
      }
      try {
        this.reviewStatus = this.currentCollapses[0].zEngineeringReviewBo.reviewStatus != '1' ? true : false
      } catch (error) {
        this.reviewStatus = true
      }
      if (materialQuality) {
        getEnginSpecificationsList({materId: materialQuality}).then(res => {
          this.specificationsList = res.data
        })
      }
    }
  },
  methods: {
    getGoods() {
      // 获取材质
      let enginType = '市政工程'
      getEnginMaterialQualityList({enginType: enginType}).then(res => {
        this.materialQualityList = res.data
      })
      // 获取规格
      getEnginSpecificationsList().then(res => {
        this.corrosionLevelListAll = res.data
      })
    },
    handleCheckedCitiesChange(e) {
      this.infoIdList = this.currentCollapses.filter(item => this.checkList.indexOf(item.id) > -1)
      this.delinfoidList = this.currentCollapses.map(item => item.id).filter(item => this.checkList.indexOf(item) == -1)
    },
    validateCHanged(e) {
      this.reviewStatusList[e].label == '通过' ? this.checkingRule.reviewContent[0].required = true : this.checkingRule.reviewContent[0].required = false
    },
    handleChecking() {
      this.checkingVisible = false
      this.checkingInfo = {
        reviewStatus: '',               // 审核状态
        reviewContent: '',              // 审核内容
        engInfoId: '',                  // 节点Id
        createTime: '',                 // 工程创建时间
      }
      this.$refs.checking.resetFields()
    },
    // 保存节点Id
    setEngineId(e) {
      this.currentEnginId = e
    },
    // 提交审核
    checkingSubmit() {
      this.$confirm('此操作将删除其他施工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.shenhe()
      }).catch(() => {
      });
    },
    shenhe() {
      this.$refs.checking.validate(valid => {
        if (valid) {
          try {
            this.checkingInfo.engInfoName = this.activeNames
            this.checkingInfo.engInfoId = this.currentEnginId
            this.checkingInfo.delInfoIdList = this.delinfoidList
            this.checkingInfo.infoIdList = this.infoIdList
            this.$emit('checkWorking', this.checkingInfo,this.activeNames=='回填、撤场'?1:0)
            this.checkList = []
          } catch (error) {
            this.checkingInfo.engInfoId = null
          }
          this.checkingVisible = false
          this.checkingInfo = {
            reviewStatus: '',               // 审核状态
            reviewContent: '',              // 审核内容
            engInfoId: '',                  // 节点Id
            createTime: '',                 // 工程创建时间
          }
        } else {
          this.$message({
            message: '请完善信息',
            type: 'error'
          });
          throw 'valid Failed'
        }
      })
    },
    // 查看单节点历史
    viewSource(e) {
      console.log('节点', e)
      this.node = e.name
      this.nodesource = e
      let data = {enginType: this.enginType}
      getEnginMaterialQualityList(data).then(res => {
        this.materialQualityList = res.data
      })
      this.$parent.viewNodeSource(e.name)
    },
    // 单项审核
    checkWorking() {
      if (this.checkList.length == 0) {
        this.$message.warning("请选择需要审核通过的施工信息")
        return
      }
      if (this.status == 'review') {
        this.checkingVisible = true
      }
    },
    updateNodeOption() {
      if (this.checkList.length == 0) {
        this.$message.warning("请选择需要修改的施工信息")
        return
      }
      const intersection = this.currentCollapses.filter(value => this.checkList.includes(value.id));
      this.$emit('updateNodeOption', intersection)
    },
    deleteById(e) {
      deleteinfoById(e).then(res => {
        this.viewSource(this.nodesource)
      })

    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除所选数据项？').then(() => {
        this.loading = true;
        return this.deleteById(row)
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /**
     * 查看历史
     * @param dicts 节点集合
     * @param currentStatus
     * @param title 标题
     * @param enginType 工程分类
     * @param status 页面状态
     */
    open(dicts, currentStatus = null, title = null, enginType, status) {
      this.status = status;
      if (dicts && dicts[0]) {
        this.node = dicts[0].value
      }
      this.engineType = enginType
      let data = {enginType: enginType}
      getEnginMaterialQualityList(data).then(res => {
        this.materialQualityList = res.data
      })
      this.currentStatus = currentStatus
      this.titleName = title
      this.checkingVisible = false

      this.currentDicts = dicts
      this.$parent.viewNodeSource()
      this.dialogVisible = true
      this.$forceUpdate()
    },
    // 获取材质规格
    getEnginSpecificationsList(e, idx, parentIndex) {
      // 重置规格
      this.currentCollapses[parentIndex].zEngineeringMaterialBo[idx].specifications = ''
      getEnginSpecificationsList({materId: e.materialQuality}).then(res => {
        console.log('规格', res.data)
        this.specificationsList = res.data
      })
    },
    getUrl(_, idx) {
      this.currentCollapses[idx].zEngiineeringPhotoBoList = [...arguments][0][0].map(e => e.url) || [];
    },
    getUrl1(_, idx) {
      this.currentCollapses[idx].zEngiineeringPhotoBoListOne = [...arguments][0][0].map(e => e.url) || [];
    },
    getUrl2(_, idx) {
      this.currentCollapses[idx].zEngiineeringPhotoBoListTwo = [...arguments][0][0].map(e => e.url) || [];
    },
    getUrl3(_, idx) {
      this.currentCollapses[idx].zEngiineeringPhotoBoListThree = [...arguments][0][0].map(e => e.url) || [];
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .nodeForm {
  .el-form-item__content {
    display: flex;
  }
}

::v-deep .materialForm {
  display: flex !important;
  flex-wrap: wrap;

  .el-form-item {
    width: 320px;
  }
}

::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: 91%;
  }
}

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

::v-deep .labelWidth {
  .el-form-item__label {
    width: 100px;
  }
}

::v-deep .obsImageUploads {
  .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 #a3d3ff;
      border-radius: 5px;
    }

    ::v-deep .el-tabs__item.is-active {
      background-color: #e8f4ff;
      color: #1890ff;
    }

    ::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;
    }
  }
}

.personInfo > span:not(:nth-child(1)) {
  margin-left: 50px;
}

::v-deep .checkingDialog {
  height: 50%;
  margin-top: 6%;

  .el-dialog__body {
    height: 72%;
  }

  .el-textarea__inner {
    width: 246%;
    height: 140px;
  }
}
</style>