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.equipmentId"
              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-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="uploadFile"
            />
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { detail, eqList } from '@/api/eqInspection'
// , getEqInsItemList
import shortLine from '@/components/shortLine.vue'

export default {
  name: 'eqInspectionEdit',
  components: { shortLine },
  data () {
    return {
      eqList: [],
      dataForm: {
        id: null,
        annexUrl: null,
        equipmentId: null,
        inspectionDesc: null,
        inspectionWorker: null,
        inspectionEndTime: null,
        inspectionStartTime: null
      },
      insTime: null,
      fileList: []
    }
  },
  mounted () {
    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 () {
      const result = await detail({
        id: this.$route.query.id
      })
      if (result.success) {
        this.dataForm = result.data
        console.log(result)
      }
    },
    // 文件上传
    uploadFile (file) {
      console.log(file)
    }
  }
}
</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;
        }
      }
    }
  }
}
</style>