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

<!--
 * @Author: gtz
 * @Date: 2022-07-28 10:22:30
 * @LastEditors: gtz
 * @LastEditTime: 2022-07-29 17:06:04
 * @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"
              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
              placeholder="选择巡检时间"
            />
          </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" />
          <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>
                  <van-checkbox v-model="item.statusBoolean" @change="updateStatus(item)" />
                </template>
              </van-cell>
              <template #right>
                <van-button square>
                  <van-icon name="add-o" />
                  <div>编辑详情</div>
                </van-button>
              </template>
            </van-swipe-cell>
          </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-row>
      </div>
    </div>
  </div>
</template>

<script>
import { detail, eqList, getInsList, updateInsStatus } from '@/api/eqInspection'
import { uploadFile } from '@/api/file'
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
      },
      insList: [],
      insTime: null,
      fileList: [],
      eqId: null
    }
  },
  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
        const result1 = await getInsList({
          equipmentInspectionId: this.$route.query.id
        })
        if (result1.success) {
          this.insList = result1.data.map(item => {
            item.statusBoolean = item.status === '1' ? true : false
            return item
          })
        }
      }
    },
    // 文件上传
    async upload (file) {
      const data = new FormData()
      data.append('files', file.file)
      data.append('typeCode', 'file')
      setTimeout(async () => {
        const result = await uploadFile(data)
      }, 1000)
    },
    // 更新巡检内容状态
    async updateStatus (item) {
      console.log(item)
      const result = await updateInsStatus({
        id: item.id,
        status: item.statusBoolean ? '1' : '0'
      })
      if (result.success) {
        Toast.success({
          message: '更新成功'
        })
      } else {
        item.statusBoolean = !item.statusBoolean
      }
    }
  }
}
</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;
    input::-webkit-input-placeholder {
      font-size: .375rem;
    }
    input:-moz-placeholder {
      font-size: .375rem;
    }
    input::-moz-placeholder {
      font-size: .375rem;
    }
    input:-ms-input-placeholder {
      font-size: .375rem;
    }
    .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>