SmartStorage/pages/testExam/testExamDetails.vue

<template>
  <view>
    <view class="single-fetch" v-for="(fetch, index) in fetchList" :key="index">
      <view>
        <span>类型名称</span>
        <h4>{{ fetch.machineTypeName }}</h4>
      </view>
      <view>
        <span>规格型号</span>
        <h4>{{ fetch.specificationType }}</h4>
      </view>
      <view>
        <span>编码</span>
        <h4>{{ fetch.dictName }}</h4>
      </view>
      <view>
        <span>维修总量</span>
        <h4>{{ fetch.repairNum }}</h4>
      </view>
      <view>
        <span>维修数量</span>
        <h4>{{ fetch.repairedNum }}</h4>
      </view>
      <view>
        <span>报废数量</span>
        <h4>{{ fetch.scrapNum }}</h4>
      </view>
    </view>
    <!-- <view class="btm-exam">
      <view class="exam" @click="seeExam"> 审核 </view>
    </view> -->
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup">
        <view class="pop-top">
          <h4>审批</h4>
          <uni-icons
            style="color: #aaaaaa; font-weight: bold"
            type="closeempty"
            size="32"
            @click="closePopup"
          >
          </uni-icons>
        </view>
        <view class="select-area">
          <uni-forms
            ref="examForm"
            :modelValue="examFormData"
            :rules="rules"
            label-position="top"
          >
            <uni-forms-item
              name="ifPass"
              required
              label="是否通过"
              label-width="150"
            >
              <uni-data-select
                v-model="examFormData.ifPass"
                :localdata="ifPassRange"
                :clear="false"
                @change="ifPassChange"
              ></uni-data-select>
            </uni-forms-item>
            <uni-forms-item
              required
              v-show="examFormData.ifPass == '1'"
              name="noPassReason"
              label="不通过原因"
              label-width="150"
            >
              <uni-easyinput
                type="textarea"
                v-model="examFormData.noPassReason"
                placeholder="请输入内容"
              ></uni-easyinput>
            </uni-forms-item>
            <button class="submit-btn" @click="formSubmit">确认</button>
          </uni-forms>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fetchList: [],
      examFormData: {
        ifPass: '',
        noPassReason: ''
      },
      ifPassRange: [
        { text: '是', value: '0' },
        { text: '否', value: '1' }
      ],
      rules: {
        ifPass: {
          rules: [
            {
              required: true,
              errorMessage: '请选择是否通过！'
            }
          ]
        }
      }
    }
  },
  onLoad(params) {
    let paramsObj = {
      taskId: params.taskId
    }
    this.$api.testExam.crashExamDetails(paramsObj).then(res => {
      if (res.data.code == 200) {
        this.fetchList = res.data.rows
      }
    }).catch(err => {
      throw err
    })
  },
  methods: {
    seeExam(taskId) {
      // this.taskIdList.push(taskId)
      // console.log(' this.taskIdList', this.taskIdList);
      // this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    },
    formSubmit() {
      let that = this
      that.$refs.examForm.validate().then(formData => {
        console.log(formData);
        console.log(this.taskIdList);
        // that.$refs.popup.close()
      })
    },
    ifPassChange(e) {
      console.log('111111111111111111111111');
      let that = this
      console.log(e);
      if (e == 1) {
        that.rules = {
          ifPass: {
            rules: [
              {
                required: true,
                errorMessage: '请选择是否通过！'
              }
            ]
          },
          noPassReason: {
            rules: [
              {
                required: true,
                errorMessage: '请填写不通过原因！'
              }
            ]
          }
        }
      } else {
        that.examFormData.noPassReason = ''
        that.rules = {
          ifPass: {
            rules: [
              {
                required: true,
                errorMessage: '请选择是否通过！'
              }
            ]
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
body {
  box-sizing: border-box;
  padding-bottom: 10vh;
}
.single-fetch {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 35rpx;
  border-bottom: 1px solid #dddddd;
  view {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;
    span {
      color: #a7a7a7;
      padding-right: 20rpx;
    }
    h4 {
      font-size: 14px;
      font-weight: normal;
    }
  }
  view:last-child {
    margin-bottom: 0;
  }
}
.btm-exam {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 40rpx;
  display: flex;
  justify-content: flex-end;
  border-top: 2px solid #f6f8ff;
  .exam {
    box-sizing: border-box;
    padding: 10rpx 50rpx;
    border-radius: 30rpx;
    background-color: #3788ff;
    font-size: 14px;
    color: #fff;
  }
}
.popup {
  width: 80vw;
  height: 60vh;
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
  .pop-top {
    width: 100%;
    height: 5vh;
    box-sizing: border-box;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .select-area {
    width: 85%;
    margin: 40rpx auto;
    .submit-btn {
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>