SBLZHYQ/src/views/tab4/edit2.vue

<!--  -->
<template>
  <div class="tab4Edit2">
    <div class="top">设备情况</div>
    <div class="from">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="摄像头-启用：" prop="cameraStart">
          <el-input
            v-model.number="ruleForm.cameraStart"
            type="number"
          ></el-input>
          <span class="unit">个</span>
        </el-form-item>
        <el-form-item label="摄像头-停用：" prop="cameraStop">
          <el-input
            v-model.number="ruleForm.cameraStop"
            type="number"
          ></el-input>
          <span class="unit">个</span>
        </el-form-item>
        <el-form-item label="巡逻车-启用：" prop="cruiserStart">
          <el-input
            v-model.number="ruleForm.cruiserStart"
            type="number"
          ></el-input>
          <span class="unit">辆</span>
        </el-form-item>
        <el-form-item label="巡逻车-停用：" prop="cruiserStop">
          <el-input
            v-model.number="ruleForm.cruiserStop"
            type="number"
          ></el-input>
          <span class="unit">辆</span>
        </el-form-item>
        <el-form-item label="门禁锁-启用：" prop="doorStart">
          <el-input
            v-model.number="ruleForm.doorStart"
            type="number"
          ></el-input>
          <span class="unit">个</span>
        </el-form-item>
        <el-form-item label="门禁锁-停用：" prop="doorStop">
          <el-input
            v-model.number="ruleForm.doorStop"
            type="number"
          ></el-input>
          <span class="unit">个</span>
        </el-form-item>
        <el-form-item label="无人机-启用：" prop="aerialStart">
          <el-input
            v-model.number="ruleForm.aerialStart"
            type="number"
          ></el-input>
          <span class="unit">辆</span>
        </el-form-item>
        <el-form-item label="无人机-停用：" prop="aerialStop">
          <el-input
            v-model.number="ruleForm.aerialStop"
            type="number"
          ></el-input>
          <span class="unit">辆</span>
        </el-form-item>
        <el-form-item label="更新时间：">
          <i class="biaoshi"></i>
          <el-date-picker
            v-model="time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <!-- 下面的按钮 -->
    <div class="btn">
      <el-button @click="$router.push('/layout/tab4')">返 回</el-button>
      <el-button type="primary" @click="btnOk">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { lotSave } from '@/apis/tab4'
export default {
  name: 'tab4Edit2',
  components: {},
  data () {
    // 这里存放数据
    const validatePass = (rule, value, callback) => {
      if (value > 99999999.99) {
        callback(new Error('不能超过99999999.99'))
      } else {
        callback()
      }
    }
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      disTime: '',
      time: '',
      myData: {},
      ruleForm: {
        cameraStart: '',
        cameraStop: '',
        cruiserStart: '',
        cruiserStop: '',
        doorStart: '',
        doorStop: '',
        aerialStart: '',
        aerialStop: ''
      },
      rules: {
        cameraStart: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        cameraStop: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        cruiserStart: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        cruiserStop: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        doorStart: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        doorStop: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        aerialStart: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        aerialStop: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    time (val) {
      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
      this.disTime = temp
    }
  },
  // 方法集合
  methods: {
    // 点击提交
    async btnOk () {
      if (this.time === null) return this.$message.warning('时间不能为空!')
      try {
        await this.$refs.ruleForm.validate()
        const obj = {}
        obj.type = 'info'
        obj.id = Number(this.myData.id)
        obj.data = JSON.stringify(this.ruleForm)
        obj.userUpdateTime = this.disTime
        const res = await lotSave(obj)
        if (res.code === 0) {
          this.$message.success('修改成功')
          this.$router.push('/layout/tab4')
        }
        // console.log(999, res)
        // console.log(777777777777, obj)
      } catch (error) {
        console.log(error)
      }
    },
    getCurrentTime () {
      // 获取当前时间并打印
      var _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      const ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
      this.time = _this.gettime
      // console.log(_this.gettime)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    this.myData = this.$route.query
    console.log(998, this.myData)
    for (const k in this.myData) {
      this.ruleForm[k] = this.myData[k]
    }
    this.getCurrentTime()
    // console.log(999, this.$route.query)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab4Edit2 {
  height: 100%;
  position: relative;
  .top {
    height: 40px;
    line-height: 40px;
    background-color: #fbfbfb;
    padding-left: 20px;
  }
  .from {
    margin-top: 30px;
    width: 50%;
    .unit {
      position: absolute;
      right: -40px;
      top: 0;
    }
  }
  .btn {
    display: flex;
    justify-content: space-between;
    width: 200px;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
  }
}
</style>