xytSk-App/pages/xxsb/from copy.vue

<template>
  <view class="container">
    <view class="nav_bar">
      <u-icon name="arrow-left" @click="rightClick" size="28"></u-icon>
      <view class="nav_bar_tit"> {{ title[key] }}</view>
      <view></view>
    </view>
    <!-- form__info -->
    <view class="info">
      <u-form
        labelPosition="left"
        :model="infoForm"
        ref="infoForm"
        labelWidth="100"
      >
        <template v-if="key == 1">
          <!-- 工程名称 -->
          <u-form-item
            label="工程名称"
            prop="projectName"
            borderBottom
            ref="item3"
          >
            <u--input
              v-model="infoForm.projectName"
              placeholder="请输入内容"
              border="surround"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 是否发电 -->
          <u-form-item
            label="是否发电"
            prop="isPowerGeneration"
            borderBottom
            ref="item3"
          >
            <u--input
              v-model="infoForm.isPowerGeneration"
              placeholder="请输入内容"
              border="surround"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 是否泄洪 -->
          <u-form-item
            label="是否泄洪"
            prop="isFloodRelease"
            borderBottom
            ref="item3"
          >
            <u--input
              v-model="infoForm.isFloodRelease"
              placeholder="请输入内容"
              border="surround"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 水位(m) -->
          <u-form-item
            label="水位(m)"
            prop="waterLevel"
            borderBottom
            ref="item3"
          >
            <u--input
              v-model="infoForm.waterLevel"
              placeholder="请输入内容"
              border="surround"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 入库流量     (m³/s)： -->
          <u-form-item
            label="入库流量(m³/s)"
            prop="inflowVolume"
            borderBottom
            ref="item3"
          >
            <u--input
              v-model="infoForm.inflowVolume"
              placeholder="请输入内容"
              border="surround"
              disabled
            ></u--input>
          </u-form-item>

          <!-- 出库流量     (m³/s)： -->
          <u-form-item
            label="出库流量(m³/s)"
            prop="outflowVolume"
            borderBottom
            ref="item3"
          >
            <u--input
              v-model="infoForm.outflowVolume"
              placeholder="请输入内容"
              border="surround"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 其他运行情况 -->
          <u-form-item
            label="其他运行情况"
            prop="remark"
            borderBottom
            ref="item3"
          >
            <u--textarea
              v-model="infoForm.remark"
              placeholder="请输入内容"
              disabled
            ></u--textarea>
          </u-form-item>
          <!-- 附件 -->
          <u-form-item
            label="附件"
            prop="checkboxValue1"
            borderBottom
            ref="item3"
          >
          </u-form-item>
        </template>
        <template v-if="key == 2"></template>
        <template v-if="key == 3"></template>
      </u-form>

      <view>
        <u-button
          type="primary"
          text="上报"
          customStyle="margin: 10px"
          @click="submit"
        ></u-button>
      </view>
    </view>
  </view>
</template>
<script>
import moment from 'moment'
export default {
  props: ['info'],
  data () {
    return {
      infoForm: {
        projectName: '',
        isPowerGeneration: '',
        isFloodRelease: '',
        waterLevel: '',
        inflowVolume: '',
        outflowVolume: '',
        remark: '',
        reportUnit: '',
        reportTime: '',
        projectType: '',
        checkboxValue1: '水库',
        reporter: '' // 上报人
      },

      key: '',
      title: {
        1: '运行情况上报',
        2: '工程险情上报',
        3: '实时灾情上报'
      }
    }
  },
  onLoad (options) {
    this.key = options.key
    console.log('搜索框', options.key)
  },
  mounted () {
    console.log('info', this.info)
  },
  methods: {
    submit () {},
    reset () {
      const validateList = [
        'userInfo.start',
        'userInfo.end',
        'userInfo.checkboxValue1'
      ]
      this.$refs.uForm.resetFields()
      this.$refs.uForm.clearValidate()
      setTimeout(() => {
        this.$refs.uForm.clearValidate(validateList)
        // 或者使用 this.$refs.uForm.clearValidate()
      }, 10)
    },
    // 返回按钮
    rightClick () {
      console.log('rightClick')

      uni.navigateTo({
        url: '/pages/xxsb/index'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  font-size: 14px;
  background-color: #f3f5f8;
}
.tabs_h {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56rpx;
  line-height: 88rpx;
  background-color: #fff;
  margin-bottom: 12rpx;
  text-align: center;
}
.leftTab {
  width: 80px;
}
.rightTab {
  width: 80px;
}
.activetextTypeTab,
.activetextTypeTab:hover {
  //   border-bottom: 3rpx solid #2286f6;
  color: #026be0;
}

.nav_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfdfdf;
  box-shadow: 0 5px 10px -8px #dfdfdf inset;
  background-color: #fff;
  margin-bottom: 12rpx;
}
.nav_bar_tit {
  text-align: center;
}
.info {
  background-color: #fff;
  margin-bottom: 12rpx;
  //   text-align: right;
  padding: 20px;
}

.fl {
  display: flex;
  justify-content: start;
  align-items: left;
}
.flsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.u-image {
  width: 100%; /* 或者其他尺寸 */
  transition: transform 0.3s; /* 平滑的放大效果 */
}
</style>