property-manager-side/wuye-manager-uniapp/pageSubPack/inspection/inspection_upload.vue

<template>
  <view class="inspection_upload_box page_container">
    <view class="inspection_info_box">
      <view class="inspection_title flex flex-between">
        <view class="title flex">
          <text class="line"></text>
          <text>幸福苑小区- B1层地下车库</text>
        </view>
        <view class="status">
          <text>未巡检</text>
        </view>
      </view>
      <view class="inspection_item_info_box">
        <view class="inspection_item">
          <text>巡检项目：</text>
          <text>设备巡检</text>
        </view>
        <view class="inspection_item">
          <text>巡检时间：</text>
          <text>07:00:00 - 09:00:00</text>
        </view>
        <view class="inspection_item">
          <text>巡检小区：</text>
          <text>幸福苑小区</text>
        </view>
        <view class="inspection_item">
          <text>巡检路线：</text>
          <text>常规巡检路线1</text>
        </view>
        <view class="inspection_item">
          <text>巡检点：</text>
          <text>安全巡检点1；</text>
          <text>安全巡检点2；</text>
          <text>安全巡检点3；</text>
          <text>安全巡检点4；</text>
        </view>
      </view>
    </view>
    <view class="inspection_info_upload_box">
      <view class="header"> <text>巡检结果</text> </view>
      <view :key="index" v-for="(item, index) in baseFormData">
        <view class="" style="margin-bottom: 20rpx"> {{ item.name }} </view>
        <uni-forms :modelValue="item" :rules="rules" label-position="left" label-width="130">
          <uni-forms-item label="巡检状态" required>
            <uni-data-checkbox v-model="item.status" :localdata="statuslist" />
          </uni-forms-item>
          <uni-forms-item label="巡检描述">
            <uni-easyinput
              :input-border="false"
              v-model="item.desition"
              placeholder="请输入"
            ></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="巡检时间">
            <uni-datetime-picker
              type="datetime"
              return-type="timestamp"
              v-model="item.datetimesingle"
            />
          </uni-forms-item>
          <uni-forms-item label="巡检照片">
            <uni-file-picker v-model="item.files" file-mediatype="image">
              <view class="filePicker flex-center">
                <uni-icons color="#a6a6a6" type="plusempty" size="25"> </uni-icons>
              </view>
            </uni-file-picker>
          </uni-forms-item>
        </uni-forms>
        <view class="line" v-if="index + 1 !== baseFormData.length"> </view>
      </view>
      <view class="submitbox">
        <text>提交</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const statuslist = [
  {
    text: '正常',
    value: 0
  },
  {
    text: '异常',
    value: 1
  }
]
const baseFormData = ref([])
const info = ref({
  point: Array.from({ length: 4 }).map((_, index) => {
    let obj1 = {
      name: `巡检点${index + 1}`,
      id: index + ''
    }
    let obj = {
      id: obj1.id,
      name: obj1.name,
      desition: '', // 描述
      datetimesingle: '', // 时间
      status: 0, // 状态
      files: [], // 图片
      fileUrls: '' // 图片
    }
    baseFormData.value.push(obj)
    return obj1
  })
})
const rules = {
  status: {
    rules: [
      {
        required: true,
        errorMessage: '巡检状态不能为空'
      }
    ]
  }
}
</script>

<style scoped lang="scss">
.inspection_upload_box {
  .inspection_info_box {
    background-color: #ffffff;
    padding: 20rpx 40rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .inspection_title {
      margin-bottom: 20rpx;
      .title {
        font-size: 32rpx;
        color: #333333;
        line-height: 40rpx;
        height: 40rpx;
        .line {
          display: block;
          width: 6rpx;
          height: 28rpx;
          background: #4d5dfa;
          margin-right: 10rpx;
          margin-top: 6rpx;
        }
      }
      .status {
        font-weight: 400;
        font-size: 28rpx;
        color: #4d5dfa;
        line-height: 36rpx;
      }
    }

    .inspection_item_info_box {
      .inspection_item {
        margin-bottom: 20rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
      }
    }
  }
  .inspection_info_upload_box {
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-color: #fff;
    padding: 30rpx 40rpx;
    min-height: 500rpx;
    .header {
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      line-height: 40rpx;
      margin-bottom: 20rpx;
    }
    .line {
      width: 100%;
      height: 0;
      border: 2rpx dashed #ccc;
      margin-bottom: 20rpx;
    }
    .filePicker {
      width: 160rpx;
      height: 160rpx;
      background: #f3f3f3;
    }
  }
  .submitbox {
    height: 80rpx;
    background: #4d5dfa;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    text-align: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
  }
}
</style>