shuili-vue/src/views/dike/runManage/patrolMaintenance/componentsDetails/defectDetails.vue

<template>
  <div class="slider-right">
    <!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> -->
    <TopBackTitle></TopBackTitle>
    <div class="table-box">
      <div class="form-row-title">缺陷信息</div>
      <div class="defectInformation">
        <el-row>
          <el-col :span="8">
            <div class="tc-text2">堤防名称：</div>
            <div class="tc-text1">{{ form.dikeName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">堤防巡查责任人：</div>
            <div class="tc-text1">{{ form.createName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">巡查类别：</div>
            <div class="tc-text1">
              {{getDictLabelName(form.category, "maintenanceCategory") }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">堤防巡查开始/结束时间：</div>
            <div class="tc-text1">{{ form.startDate }}/{{ form.endDate }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">巡查部位：</div>
            <div class="tc-text1">{{ form.partsName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">问题位置：</div>
            <div class="tc-text1">{{ form.position }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">问题等级：</div>
            <div class="tc-text1">
              {{getDictLabelName(form.problemLevel, "maintenanceLevel") }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">具体描述：</div>
            <div class="tc-text1">{{ form.content }}</div>
          </el-col>
          <el-col :span="24">
            <div class="tc-text2">缺陷图片：</div>
            <div class="tc-text1">
              <el-image
                v-for="item in form.problemImages"
                style="width: 240px; height: 135px;margin-right: 16px;"
                :src="item"
                :preview-src-list="form.problemImages">
              </el-image>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import TopBackTitle from "@/components/TopBackTitle/index.vue";
import {calcTableHeight} from "@/mixins/calcTableHeight";
import SyMixMap from "@/views/components/SyMixMap.vue";
import {getV2Yh, postV2Yh, getV2ApprovalComment, gettV2Record, postV2ApprovalPassed, postV2ApprovalRejected} from "@/api/dike/patrolMaintenance";
import {getDictMapData} from "@/api/system/dict/data";
import {mapGetters} from "vuex";

export default {
  components: {
    SyMixMap,
    TopBackTitle,
  },
  mixins: [calcTableHeight],
  data() {
    return {
      entries: {},
      traceList: [],
      maintenanceCategory: [],
      maintenanceLevel: [],
      tableData: [{
        nspectionLocation: '堤坡与戗台',
        inspectionContent: '是否坚实平整',
      }],
      form: {
        createName: '',
        userName: '',
        dikeName: '',
        category: '',
        parts: '',
        partsName: '',
        content: '',
        describe: '',
        position: '',
        problemImages: '',
        problemLevel: '',
        createUid: '',
        dikeCode: '',
        dikeType: '',
        type: '',
        time: [],
        scope: '',
      },
      rules: {
        userName: [{required: true}],
        projectName: [{required: true}],
        dikeName: [{required: true}],
        inspectionCategory: [{required: true}],
        time: [{required: true}],
        describe: [{required: true}],
      }
    };
  },
  created() {
    this.getDicts("patrol_maintenance_category").then((response) => {
      this.maintenanceCategory = response.data;
    });
    this.getDicts("patrol_maintenance_level").then((response) => {
      this.maintenanceLevel = response.data;
    });
  },
  mounted() {
    this.initData()
  },
  computed: {
    ...mapGetters({
      userId: "uid",
      userName: "name",
    }),
  },
  methods: {
    async initData() {
      const checking = await gettV2Record(this.$route.query.recordId)
      this.form.createName = checking.data.createName
      this.form.userName = this.userName
      this.form.userId = this.userId
      this.form.dikeName = checking.data.dikeName
      this.form.checkingId = checking.data.checkingId
      this.form.checkingName = checking.data.checkingName
      this.form.status = checking.data.status
      this.form.problems = checking.data.problems
      this.form.category = checking.data.category
      this.form.createUid = checking.data.createUid
      this.form.dikeCode = checking.data.dikeCode
      this.form.dikeType = checking.data.dikeType
      this.form.type = checking.data.type
      this.form.startDate = checking.data.startDate
      this.form.endDate = checking.data.endDate
      checking.data.problems.forEach(item => {
        if(item.id === this.$route.query.defectId) {
          this.form.content = item.content
          this.form.position = item.position
          this.form.parts = item.parts
          getDictMapData("df_xs_c_classfy").then((res) => {
            let parts = ''
            item.parts.forEach((part) => {
              if (parts) {
                parts = parts + ':' + part
              } else {
                parts = part
              }
            })
            this.form.partsName = res.data[parts]
          })
          this.form.problemLevel = item.problemLevel
          this.form.problemImages = item.problemImages
        }
      })
      // if (this.$route.query.fromId) {
      //   const ApprovalComment = await getV2ApprovalComment(this.$route.query.fromId)
      // } else {
      //   const ApprovalComment = await getV2ApprovalComment(0)
      // }
    },

    getDictLabelName(type, dictListName) {
      if (!this[dictListName]) return "";
      return (
        this[dictListName].find((item) => item.dictValue === type)?.dictLabel ||
        ""
      );
    },
    handleAccept() {

    },
    handleSave(commit) {
      const data = {
        checkingId: this.form.checkingId,
        content: this.form.describe,
        dutyHolderId: this.form.userId,
        dutyHolderName: this.form.userName,
        problemLevel: this.form.problemLevel,
        problemId: this.$route.query.defectId,
        recordId: this.$route.query.recordId,
        startDate: this.form.time && this.form.time.length > 1 ? this.form.time[0] : '',
        endDate: this.form.time && this.form.time.length > 1 ? this.form.time[1] : '',
      }
      if (this.$route.query.id) {
        data.id = this.$route.query.id
      }
      postV2Yh(data, commit).then(res => {
        this.$message.success('保存成功')
        this.$router.go(-1)
      })
    }
  },
};
</script>
<style lang="scss">
.table-box {
  width: 100%;
  height: calc(100% - 50px - 24px);
  margin-top: 24px;
  padding: 16px;
  padding-bottom: 80px;
  background-color: white;
  overflow: auto;
}
.form-row-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  border-left: 4px solid #36b29e;
  padding-left: 8px;
}
.row-item {
  display: flex;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 16px;
  & > div {
    width: 50%;
  }
}
.defectInformation {
  .el-row {
    margin-bottom: 16px;
    .el-col {
      margin-bottom: 16px;
    }
  }

}
</style>