hf-pda/src/pages/eqInspection/eqInspection-edit.vue

<!--
 * @Author: gtz
 * @Date: 2022-07-28 10:22:30
 * @LastEditors: gtz
 * @LastEditTime: 2022-08-04 15:19:28
 * @Description: file content
 * @FilePath: \hf-pda\src\pages\eqInspection\eqInspection-edit.vue
-->
<template>
  <div class="eqInspectionEdit">
    <!-- navbar -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="PDA巡检信息"
        left-arrow
        sticky
        class="eq-header"
        @click-left="onClickLeft"
      />
      <!-- @click-right="onClickRight" -->
    </van-sticky>
    <div class="eq-edit-main">
      <div class="eq-main-item">
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            设备名称
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.equipmentName"
              ref="eqCodeInput"
              class="canInput"
              disabled
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            巡检人员
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="dataForm.inspectionWorker"
              ref="eqCodeInput"
              clearable
              placeholder="填写巡检人员以逗号隔开"
            />
          </van-col>
        </van-row>
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            巡检时间
          </van-col>
          <van-col :span="15" :offset="1" class="eq-field-item-input">
            <van-field
              v-model="insTime"
              ref="eqCodeInput"
              clearable
              clear-trigger="always"
              disabled
              class="canInput"
              placeholder="选择巡检时间"
              @click="handleDate"
            />
          </van-col>
        </van-row>
      </div>
      <div class="eq-main-edit-neirong-item" v-if="eqId">
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            巡检内容
          </van-col>
          <van-col :span="15" :offset="1" />
          <template v-if="insList && insList.length">
            <van-col :span="24" v-for="item in insList" :key="item.id" class="eq-main-edit-neirong-item-item">
              <van-swipe-cell>
                <van-cell :border="false" :title="item.inspectionItem" :label="item.inspectionContent">
                  <template #right-icon>
                    <span style="display: flex; align-items: center; -webkit-box-align: center; margin-right: .1rem; font-size: .3125rem; position: relative; top: .032rem;">是否完成</span>
                    <van-checkbox v-model="item.statusBoolean" @change="updateStatus(item)" />
                  </template>
                </van-cell>
                <template #right>
                  <van-button square @click="toInsDetail(item)">
                    <van-icon name="add-o" />
                    <div>编辑详情</div>
                  </van-button>
                </template>
              </van-swipe-cell>
            </van-col>
          </template>
          <van-col :span="22" :offset="1" style="font-size: .4rem">暂无</van-col>
        </van-row>
      </div>
      <div class="eq-main-edit-item">
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            巡检详情
          </van-col>
          <van-col :span="15" :offset="1" />
          <van-field
            v-model="dataForm.inspectionDesc"
            type="textarea"
            rows="5"
            autosize
          />
        </van-row>
      </div>
      <div class="eq-main-edit-item">
        <van-row class="eq-field-item">
          <van-col :span="7" class="eq-field-item-lable">
            <short-line />
            附件
          </van-col>
          <van-col :span="15" :offset="1" />
          <van-col :span="24" style="padding-left: .25rem">
            <van-uploader
              v-model="fileList"
              :max-count="1"
              accept=".doc,.docx,.xls,.xlsx,.pdf,image/*"
              :after-read="upload"
            />
          </van-col>
          <van-col :span="22" :offset="1">
            <van-button type="info" round size="large" @click="handleSubmit">
              提交
            </van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :title="dateType ? '选择结束时间' : '选择开始时间'"
        :min-date="minDate"
        @confirm="setDate"
        @cancel="show = false; dateType = 0"
      />
    </van-popup>
  </div>
</template>

<script>
import moment from 'moment'
import { detail, eqList, getInsList, updateInsStatus, add, update } from '@/api/eqInspection'
import { uploadFile, downloadFile } from '@/api/file'
import { blobToBase64 } from '@/util/utils'
import shortLine from '@/components/shortLine.vue'
import { Toast } from 'vant'

export default {
  name: 'eqInspectionEdit',
  components: { shortLine },
  data () {
    return {
      eqList: [],
      dataForm: {
        id: null,
        annexUrl: null,
        equipmentId: null,
        equipmentName: null,
        inspectionDesc: null,
        inspectionWorker: null,
        inspectionEndTime: null,
        inspectionStartTime: null,
        source: 3
      },
      insList: [],
      insTime: null,
      fileList: [],
      eqId: null,
      show: false,
      currentDate: null,
      minDate: new Date(2020, 0, 1),
      dateType: 0
    }
  },
  mounted () {
    if (this.$route.query.equipmentName) {
      this.dataForm.equipmentName = this.$route.query.equipmentName
    }
    this.getEqList()
  },
  methods: {
    // 返回上一页
    onClickLeft () {
      this.$router.goBack()
    },
    async getEqList () {
      const result = await eqList({
        current: 1,
        size: 999
      })
      if (result.success) {
        this.eqList = result.data.records
        if (this.$route.query.id) {
          this.getDetail()
        } else {
          this.dataForm.equipmentId = this.$route.query.equipmentId
        }
      }
    },
    // 获取详情
    async getDetail () {
      this.eqId = this.$route.query.id
      const result = await detail({
        id: this.$route.query.id
      })
      if (result.success) {
        this.dataForm = result.data
        if (this.dataForm.inspectionStartTime && this.dataForm.inspectionEndTime) {
          this.insTime = moment(this.dataForm.inspectionStartTime).format('YYYY-MM-DD HH:mm:ss') + '-' + moment(this.dataForm.inspectionEndTime).format('YYYY-MM-DD HH:mm:ss')
        }
        const result1 = await getInsList({
          equipmentInspectionId: this.$route.query.id
        })
        if (result1.success) {
          this.insList = result1.data.map(item => {
            if (item.status === '1') {
              item.statusBoolean = true
            } else {
              item.statusBoolean = false
            }
            return item
          })
        }
        if (result.data.annexUrl) {
          const result2 = await downloadFile({
            type: 'file',
            attachmentId: result.data.annexUrl
          })
          blobToBase64(result2.data.data, (v) => {
            const file = new File([result2.data.data], result2.data.headers['content-disposition'].slice(result2.data.headers['content-disposition'].indexOf('filename=') + 9), { type: '*' })
            this.fileList.push({
              content: v,
              file
            })
          })
        }
      }
    },
    // 文件上传
    async upload (file) {
      const data = new FormData()
      data.append('files', file.file)
      data.append('typeCode', 'file')
      const result = await uploadFile(data)
      if (result.success) {
        this.dataForm.annexUrl = result.data[0].id
      }
    },
    // 更新巡检内容状态
    async updateStatus (item) {
      const result = await updateInsStatus({
        id: item.id,
        status: item.statusBoolean ? '1' : '0'
      })
      if (result.success) {
        Toast.success({
          message: '更新成功'
        })
      } else {
        item.statusBoolean = !item.statusBoolean
      }
    },
    // 更新时间
    setDate (v) {
      if (this.dateType) {
        if (v.valueOf() - new Date(this.dataForm.inspectionStartTime).valueOf()) {
          this.dataForm.inspectionEndTime = moment(v).format('YYYY-MM-DDTHH:mm:ss')
          this.show = false
          this.insTime = moment(this.dataForm.inspectionStartTime).format('YYYY-MM-DD HH:mm:ss') + '-' + moment(v).format('YYYY-MM-DD HH:mm:ss')
          this.dateType = 0
        } else {
          this.$notify('结束时间必须大于开始时间！')
        }
      } else {
        this.dataForm.inspectionStartTime = moment(v).format('YYYY-MM-DDTHH:mm:ss')
        this.dateType = 1
      }
    },
    // 弹出日期选择器
    handleDate () {
      this.show = true
    },
    // 提交表单
    async handleSubmit () {
      let result = {}
      if (this.$route.query.id) {
        result = await update(this.dataForm)
      } else {
        result = await add(this.dataForm)
      }
      if (result.success) {
        Toast.success({
          message: '操作成功',
          onClose: () => {
            this.$router.push({
              name: 'eqInspection'
            })
          }
        })
      }
    },
    // 前往巡检内容详情
    toInsDetail (item) {
      this.$router.push({
        name: 'eqInspectionDetail',
        query: {
          id: item.id,
          insId: this.dataForm.id
        }
      })
    }
  }
}
</script>

<style lang="scss">
.eqInspectionEdit {
  width: 100%;
  background: #F6F6F6;
  .eq-header {
    background: #4271FF;
    .van-icon {
      color: #fff;
      font-size: .4375rem;
    }
    .van-nav-bar__content {
      height: 1.5rem;
      line-height: 1.5rem;
      .van-nav-bar__title {
        color: #fff;
        font-size: .4375rem;
      }
    }
  }
  .eq-edit-main {
    width: 100%;
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    overflow: scroll;
    .eq-main-item {
      background: #fff;
      padding-bottom: .25rem;
      margin-bottom: .25rem;
      .eq-field-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-field-item-lable {
          text-indent: .375rem;
          font-size: .375rem;
        }
        .van-cell {
          padding: 0 .25rem;
          height: .875rem;
          background: #F6F6F6;
          border-radius: .1875rem;
          .van-field__body {
            height: .875rem;
            .van-field__control {
              height: .875rem;
            }
          }
        }
      }
    }
    .eq-main-edit-item {
      background: #fff;
      padding-bottom: .25rem;
      margin-bottom: .25rem;
      .eq-field-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-field-item-lable {
          text-indent: .375rem;
          font-size: .375rem;
        }
        .van-cell {
          width: calc(100% - .75rem);
          margin: 0 .375rem;
          padding: 0 .25rem;
          background: #F6F6F6;
          border-radius: .125rem;
        }
      }
    }
    .eq-main-edit-neirong-item {
      background: #fff;
      padding-bottom: .25rem;
      margin-bottom: .25rem;
      .eq-field-item {
        padding-top: .25rem;
        line-height: .875rem;
        .eq-field-item-lable {
          text-indent: .375rem;
          font-size: .375rem;
        }
        .eq-main-edit-neirong-item-item {
          border-bottom: 1px solid #F6F6F6;
          .van-cell__title {
            font-size: .3125rem;
          }
          .van-cell__label {
            font-size: .3125rem;
          }
          .van-button {
            height: 100%;
            border: 0;
            background: #42D1A5;
            color: #fff;
            font-size: .3125rem;
            .van-icon {
              font-size: .5rem;
              margin-bottom: .1rem;
            }
          }
        }
      }
    }
  }
}
</style>