soc_app/src/views/menu/resumption/detail.vue

<template>
  <div class="page_box">
    <van-form ref="resumption_form">
      <div class="panel">
        <NavBar :go="{ type: 'push', path: '/resumption' }" />
        <van-panel :title="resumptionData.taskName">
          <div class="tts">
            <van-row>
              <van-col span="12">
                <div class="total_panel">
                  <div class="title">履职项</div>
                  <div class="content">
                    <span class="con_num ok">已查 {{ resumptionData.yesPointNums }}</span>
                    <span class="con_num no">未查 {{ resumptionData.noPointNums }}</span>
                  </div>
                </div>
              </van-col>
              <van-col span="12">
                <div class="total_panel" @click="showDetail()">
                  <div class="title">NFC</div>
                  <div class="content">
                    <span class="con_num ok">已扫 {{ resumptionData.yesNFCNums }}</span>
                    <span class="con_num no">未扫 {{ resumptionData.noNFCNums }}</span>
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-panel>
      </div>
      <div class="progress">
        <van-progress
          :percentage="
            (
              ((resumptionData.yesPointNums + resumptionData.yesNFCNums) /
                (resumptionData.yesPointNums +
                  resumptionData.noPointNums +
                  resumptionData.yesNFCNums +
                  resumptionData.noNFCNums)) *
              100
            ).toFixed(2)
          "
        />
      </div>
      <!--   检查区域   -->
      <div class="card">
        <van-panel title="巡检区域">
          <div style="padding: 5px">
            <van-row>
              <van-col span="8" v-for="(va, i) in areas" :key="va.areaId">
                <div :class="{ active: i === 0 }" class="check-area" @click="clickArea(va, i)">
                  <div class="ysj">
                    <van-icon name="checked" :color="areaColor.complete" v-if="va.areaStatus === '1'" />
                    <van-icon name="info" :color="areaColor.loading" v-if="va.areaStatus === '2'" />
                    <van-icon name="info" :color="areaColor.noOpen" v-if="va.areaStatus === '0'" />
                  </div>
                  {{ va.areaName }}
                </div>
              </van-col>
            </van-row>
          </div>
        </van-panel>
      </div>
      <van-action-sheet v-model="total_show">
        <div class="content">
          <van-tabs>
            <van-tab title="已扫描" name="a">
              <van-list finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in yesList" :key="item.nfcCode" :title="item.nfcName"></van-cell>
              </van-list>
            </van-tab>
            <van-tab title="未扫描" name="b">
              <van-list finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in noList" :key="item.nfcCode" :title="item.nfcName">
                  <!-- <img :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon"/>-->
                </van-cell>
              </van-list>
            </van-tab>
          </van-tabs>
        </div>
      </van-action-sheet>

      <div class="card">
        <van-row>
          <van-col span="16">
            <van-cell>
              <template #title>
                <span>NFC</span>
              </template>
              <template #extra>
                <span style="display: inline-block; color: #26850c">{{ yesNFCnums }}</span>
                <span style="display: inline-block; color: #0e0e0e">/</span>
                <span style="display: inline-block; color: #0e0e0e">{{ NFCnums }}</span>
                <img :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon" @click="clickNFC" />
              </template>
            </van-cell>
          </van-col>
          <van-col span="8">
            <van-cell>
              <div class="okAll">
                <van-radio-group v-if="enable" v-model="selectRadio" @change="changeSwitch">
                  <van-radio name="1" icon-size="20px">一键填充</van-radio>
                </van-radio-group>
              </div>
            </van-cell>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <van-cell v-show="currentImgNFC.length > 0" :border="false">
              <div
                v-if="v.areaId === areaId && v.img"
                class="nfc-img"
                v-for="(v, i) in nfcs"
                :key="v.img"
                @click="preViewNFC(i)"
              >
                <img :src="imgUrl(v.img)" alt="" />
                <span>{{ v.nfcName }}</span>
                <div v-if="enable" class="cancel_icon" @click="cancelImg(v)">
                  <van-icon name="clear" />
                </div>
              </div>
            </van-cell>
          </van-col>
        </van-row>

        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-show="areaId === item.areaId"
            v-for="item in checks"
            :title="item.itemName + '(' + item.points.length + ')'"
            :name="item.itemName"
            :key="item.areaId"
          >
            <div v-for="(point, index) in item.points">
              <van-cell>
                <template #title>
                  <pre>{{ point.pointName }}</pre>
                </template>
                <template #right-icon>
                  <van-switch
                    style="margin-left: 10px"
                    v-model="point.resValue"
                    v-show="point.dataStatus === 2"
                    v-if="enable"
                    :active-value="1"
                    :inactive-value="0"
                    inactive-color="#4fc08d"
                    active-color="#ee0a24"
                    size="18"
                  />
                  <span v-else>
                    <van-tag v-if="point.resValue === 1" type="warning">异常</van-tag>
                    <van-tag v-else type="success">正常</van-tag>
                  </span>
                  <van-switch
                    style="margin-left: 10px"
                    v-model="point.dataStatus"
                    v-show="point.dataStatus === 1"
                    :active-value="2"
                    :inactive-value="1"
                    inactive-color="#fcfcfc"
                    active-color="#ee0a24"
                    size="18"
                    @change="changeCurrentSwitch(item.areaId)"
                  />
                </template>
              </van-cell>
              <van-cell-group v-show="point.resValue">
                <select-cell
                  :required="enable"
                  :disabled="!enable"
                  title="整改期限"
                  name="rectificationDeadline"
                  v-model="point.rectificationDeadline"
                  :data-list="dayList"
                />
                <van-field
                  :rules="[{ required: enable, message: '请输入情况描述' }]"
                  :required="enable"
                  v-model="point.resRemark"
                  :readonly="!enable"
                  rows="1"
                  name="resRemark"
                  autosize
                  label="情况描述"
                  type="textarea"
                  placeholder="请输入情况描述"
                />
                <div class="upload-box">
                  <uploader :maxCount="5" v-if="enable" v-model="point.imgs" />
                  <van-cell v-else>
                    <div
                      class="nfc-img van-hairline--surround"
                      v-for="(v, i) in point.imgs"
                      :key="v.imgPath"
                      @click="clickWarnImage(point.imgs, i)"
                    >
                      <img :src="imgUrl(v.imgPath)" alt="" />
                      <span>{{ v.checkName }}</span>
                    </div>
                  </van-cell>
                </div>
              </van-cell-group>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>

      <div class="bottomClass" v-if="enable">
        <van-row>
          <van-col span="12">
            <van-button type="default" @click="resumptionDataSave">保存</van-button>
          </van-col>
          <van-col span="12">
            <van-button type="info" @click="submitResumptionData">提交</van-button>
          </van-col>
        </van-row>
      </div>
      <!--  nfc弹窗  -->
      <nfc-popup v-if="enable" ref="NfcPopup" @change="changeNfcImg"></nfc-popup>
    </van-form>
  </div>
</template>

<script>
import { ImagePreview, Dialog } from 'vant'
import NavBar from '@/components/NavBar/index.vue'
import Uploader from '@/components/upload/uploader.vue'
import SelectCell from '@/components/selectCell/index.vue'
import { getDict } from '@/api/toConsult'
import { saveTask, taskDetail } from '@/views/menu/resumption/api'
import NfcPopup from '@/components/nfcPopup/more'
import { imgUrl } from '@/utils'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
import { ref } from 'vue'

export default {
  components: {
    SelectCell,
    Uploader,
    NavBar,
    NfcPopup,
    imgUrl,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      areaColor: {
        // 已完成
        complete: '#26850c',
        // 未开始
        noOpen: '#1989fa',
        // 进行中
        loading: '#ffa500'
      },
      NFCnums: 0,
      yesNFCnums: 0,
      currentImgNFC: [],
      areaId: null,
      resumptionData: {},
      areas: [],
      checks: [],
      nfcs: [],
      selectRadio: 0,
      total_show: false,
      enable: false,
      activeNames: [],
      dayList: [15, 30, 90, 180],
      yesList: [],
      noList: [],
      loading: false,
      finished: false,
      selectArea: null,
      preViewImages: {
        images: [],
        startPosition: 0
      }
    }
  },
  computed: {
    ...mapGetters(['id'])
  },
  mounted() {
    this.getResumptionData()
  },
  created() {
    getDict('rectification_deadline').then(res => {
      let { data } = res
      this.dayList = data
    })
  },
  methods: {
    preViewNFC(i) {
      this.preViewImages.images = this.currentImgNFC.map(v => imgUrl(v.img))
      this.preViewImages.startPosition = i
      ImagePreview(this.preViewImages)
    },
    clickWarnImage(arr, i) {
      this.preViewImages.images = arr.map(v => imgUrl(v.imgPath))
      this.preViewImages.startPosition = i
      ImagePreview(this.preViewImages)
    },
    getResumptionData() {
      let data = {
        taskId: this.$route.query.id,
        taskDate: this.$route.query.taskDate
      }
      taskDetail(data).then(res => {
        let { taskId, taskName, yesPointNums, noPointNums, yesNFCNums, noNFCNums, status } = res.data
        this.resumptionData = {
          taskId,
          taskName,
          yesPointNums,
          noPointNums,
          yesNFCNums,
          noNFCNums,
          status
        }
        this.enable = this.resumptionData.status === 1 || this.resumptionData.status === 2
        this.checks = res.data.checks
        this.nfcs = res.data.nfcs
        this.areas = res.data.areas
        this.activeArea(this.areas[0], 0)

        if (!this.enable) {
          this.openCollapseItems()
        }
      })
    },
    openCollapseItems() {
      let len = this.checks.length
      for (let i = 0; i < len; i++) {
        let title = this.checks[i].itemName
        this.activeNames.push(title)
      }
    },
    changeSwitch() {
      let num = 0
      for (let i = 0; i < this.checks.length; i++) {
        for (let j = 0; j < this.checks[i].points.length; j++) {
          this.checks[i].points[j].dataStatus = 2
          num++
        }
      }
      this.resumptionData.yesPointNums = num
      this.resumptionData.noPointNums = 0
      this.areas.forEach((item, index) => {
        this.validateArea(item.areaId)
      })
      this.openCollapseItems()
    },
    changeCurrentSwitch(areaId) {
      this.resumptionData.yesPointNums = this.resumptionData.yesPointNums + 1
      this.resumptionData.noPointNums = this.resumptionData.noPointNums - 1
      this.validateArea(areaId)
    },
    validateArea(areaId) {
      let total = 0
      let yes = 0
      this.checks.forEach(item => {
        let pointList = item.points

        pointList.forEach(point => {
          if (item.areaId === areaId) {
            total++
            if (point.dataStatus === 2) {
              yes++
            }
          }
        })
      })

      let noNfc = this.nfcs.filter((item, index) => {
        return item.areaId === areaId && item.status === 0
      })

      let areaStatus = '0'
      if (total === yes && noNfc.length === 0) {
        areaStatus = '1'
      } else if (yes === 0 && noNfc.length === this.NFCnums) {
        areaStatus = '0'
      } else {
        areaStatus = '2'
      }

      this.areas.forEach((item, index) => {
        if (item.areaId === areaId) {
          this.areas[index].areaStatus = areaStatus
        }
      })
    },
    clickNFC() {
      let arr = this.nfcs.filter(item => {
        return item.areaId === this.areaId && item.status === 0
      })

      if (arr.length > 0) {
        let nfcs = []
        for (const nfc of arr) {
          let pro = {}
          pro.checkName = nfc.nfcName
          pro.nfccdoe = nfc.nfcCode
          nfcs.push(pro)
        }
        this.$refs.NfcPopup.show(nfcs)
      }
    },
    cancelImg(imgItem) {
      let areaId = null
      this.nfcs.forEach(v => {
        if (v.nfcCode === imgItem.nfcCode) {
          areaId = v.areaId
          v.img = imgItem.url
          v.status = 0
          v.scanMethod = null
        }
      })
      let now = this.currentImgNFC.filter(v => {
        return v.nfcCode !== imgItem.nfcCode
      })
      this.currentImgNFC = now

      this.yesNFCnums--
      this.resumptionData.yesNFCNums--
      this.resumptionData.noNFCNums++
      this.validateArea(areaId)
    },
    changeNfcImg(imgItem) {
      let areaId = null
      this.nfcs.forEach(v => {
        if (v.nfcCode === imgItem.nfcCode) {
          areaId = v.areaId
          v.img = imgItem.url
          v.status = 1
          v.scanMethod = 1
          v.submitTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
          v.submitBy = this.id
          this.currentImgNFC.push(v)
        }
      })
      this.yesNFCnums++
      this.resumptionData.yesNFCNums++
      this.resumptionData.noNFCNums--
      this.validateArea(areaId)
    },
    showDetail() {
      this.total_show = true
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.yesList = []
      this.noList = []
      this.nfcs.forEach((item, index) => {
        if (item.status === 1) {
          this.yesList.push(item)
        } else {
          this.noList.push(item)
        }
      })
    },
    //点击区域
    clickArea(area, index) {
      this.activeArea(area, index)
    },
    //选中区域时数据变更
    activeArea(area, index) {
      //获取当前选中区域
      this.areaId = area.areaId
      //设置选中样式
      this.$nextTick(() => {
        let doms = document.getElementsByClassName('check-area')
        Array.prototype.forEach.call(doms, item => {
          item.classList.remove('active')
        })
        doms[index].classList.add('active')
      })
      let nfcs = 0
      let yesNfc = 0
      let current = []
      for (let i = 0; i < this.nfcs.length; i++) {
        let nfc = this.nfcs[i]
        let areaId = nfc.areaId
        if (areaId === area.areaId) {
          nfcs++
          if (nfc.status === 1) {
            yesNfc++
          }
          if (nfc.img) {
            current.push(nfc)
          }
        }
      }
      this.currentImgNFC = current
      this.yesNFCnums = yesNfc
      this.NFCnums = nfcs
      this.selectArea = area
    },
    //保存数据
    resumptionDataSave() {
      //组装数据
      let data = {}
      data.taskId = this.resumptionData.taskId
      data.checks = this.checks
      data.nfcs = this.nfcs
      data.subType = 1

      saveTask(data).then(res => {
        this.$toast('保存成功')
        this.$router.go(-1)
      })
    },
    submitResumptionData() {
      //验证数据
      let noNfc = this.nfcs.filter((item, index) => {
        return item.status === 0
      })
      if (noNfc.length > 0) {
        Dialog.alert({
          message: 'NFC标签还未扫描完成，请完成后提交！'
        })
        return false
      }
      let isOk = true
      this.checks.forEach(item => {
        let pointList = item.points
        pointList.forEach(point => {
          if (point.dataStatus === 1) {
            Dialog.alert({
              message: '还有未完成的内容，请先完成再提交？'
            })
            throw new Error('有项目未完成')
          } else {
            if (point.resValue === 1) {
              if (!point.rectificationDeadline || !point.resRemark) {
                this.changeSwitch()
                this.areas.forEach((area, i) => {
                  if (area.areaId === item.areaId) {
                    this.activeArea(area, i)
                    //切换后验证表单
                    this.$refs.resumption_form.validate()
                    this.$toast({
                      message: '请完成异常情况的信息填写！',
                      position: 'top'
                    })
                  }
                })
                throw new Error('有异常项目未完成')
              }
            }
          }
        })
      })

      let data = {}
      data.taskId = this.resumptionData.taskId
      data.checks = this.checks
      data.nfcs = this.nfcs
      data.subType = 2

      saveTask(data).then(res => {
        this.$toast('提交成功')
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-progress {
  z-index: 999;
  width: 98%;
  left: 6px;
  right: 6px;
}

.page_box {
  height: calc(100vh - 60px);
  overflow: scroll;
}

.content {
  padding: 16px 16px 10px;
}

.panel {
  background-color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 12px #ebedf0;
  margin-bottom: 10px;

  .van-cell__title {
    font-weight: bold;
  }
}

.total_panel {
  text-align: center;

  .title {
    padding-top: 10px;
  }

  .content {
    padding-top: 10px;
    padding-bottom: 10px;

    .con_num {
      padding: 15px;
    }

    .ok {
      color: #26850c;
    }

    .no {
      color: #98632d;
    }
  }
}

.card {
  box-shadow: 0 10px 10px #eaeaea;
  height: 50px;
}

.van-popup {
  height: 50%;
}

.check-area {
  //background-color: #f1f1f1;
  text-align: center;
  margin: 10px;
  padding: 20px;
  //color: #aaa;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px #ddd;
  position: relative;

  .ysj {
    position: absolute;
    right: 5px;
    top: 5px;
  }
}

.active {
  background-color: #bdbdbd;
  color: #333;
}

.complete {
  color: #fff;
  background-color: #1989fa;
}

.nfc-icon {
  width: 50px;
  height: 50px;
  margin-left: 20px;
}

.bottomClass {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
  background: #ebedf0;
  text-align: center;

  .van-button {
    width: 95%;
    margin-top: 10px;
  }
}

.okAll {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.nfc-img {
  display: inline-block;
  width: 160px;
  height: 160px;
  margin: 0 10px;
  position: relative;

  > img {
    width: 100%;
    height: 100%;
    border: none;
  }

  > span {
    position: absolute;
    padding: 0 10px;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #eaeaea;
    font-size: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    white-space: break-spaces;
    height: 30px;
  }

  .cancel_icon {
    position: absolute;
    font-size: 30px;
    right: 5px;
    top: 2px;
  }
}
</style>