eam-uniapp/src/pages/spotCheckOrder/addForm.vue

<template>
  <!-- 添加设备报修 -->
  <view class="add-form-container">
    <u-form :model="form" ref="formRef" label-width="160rpx">
      <u-form-item label="点检描述" prop="describes" required>
        <u-input v-model="form.describes" placeholder="请输入点检描述" />
      </u-form-item>
      <u-form-item :label="`${type == 'DEVICE' ? '设备' : '模具'}编码`" prop="deviceNumber" required>
        <u-input v-model="form.deviceNumber" :placeholder="`请输入${type == 'DEVICE' ? '设备' : '模具'}编码`" @blur="blur" @confirm="blur()" />
        <view class="right-button" @click="chickRightButton"> 扫描 </view>
      </u-form-item>
      <u-form-item :label="`${type == 'DEVICE' ? '设备' : '模具'}名称`" prop="deviceName" required class="disabled">
        <u-input v-model="form.deviceName" :placeholder="`请输入${type == 'DEVICE' ? '设备' : '模具'}名称`" disabled />
      </u-form-item>
      <u-form-item label="点检人" prop="name" required class="disabled">
        <u-input v-model="store.name" placeholder="请输入点检人" disabled />
      </u-form-item>
      <u-form-item label="班次" prop="classes" required>
        <view class="select" @click="openSingleColumn('classes', form.classes, maintenanceShift)">
          <view class="input" v-if="form.classes">
            {{ form.classesName }}
          </view>
          <view class="placeholder" v-else>
            {{ `请选择班次` }}
          </view>
          <u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
        </view>
      </u-form-item>
    </u-form>
    <view class="list">
      <!-- <view class="title">
				<span></span>备件
			</view> -->
      <view class="item" v-for="(item, index) in subList" :key="index">
        <view class="item-box">
          <view class="spare-title">
            <view class="title-txt">
              {{ item.name }}
            </view>
          </view>
          <u-row gutter="16">
            <u-col :span="12">
              <view class="dec">
                <view class=""> 设备部位名称: </view>
                <view>{{ item.equipmentParts }}</view>
              </view>
              <view class="dec">
                <!-- <view style="margin-right: 20rpx;">是否符合:</view><u-switch v-model="item.isConform1"></u-switch> -->
                <u-radio-group v-model="item.isConform" @change="radioGroupChange">
                  <!-- <u-radio 
													@change="radioChange" 
													v-for="(item, index) in list" :key="index" 
													:name="item.name"
													:disabled="item.disabled"
												>
													{{item.name}}
												</u-radio> -->
                  <u-radio name="TRUE">符合</u-radio>
                  <u-radio name="FALSE">不符合</u-radio>
                </u-radio-group>
              </view>
              <view class="dec">
                <view class="">
                  <span v-if="item.numberNeedSwitch" class="required">*</span>
                  巡检点检记录:
                </view>
                <u-input v-model="item.records" :placeholder="'请输入巡检点检记录'" :class="{ error: item.numberNeedSwitch && !item.records }" />
              </view>
              <view class="image" style="margin-top: 20rpx">
                <view class="image-list" :key="refreshKey">
                  <view class="image-item" v-for="(element, index) in item.imgList" :key="index">
                    <image :src="element" mode=""></image>
                    <u-icon name="close-circle-fill" color="red" class="close" size="36" @click="delImage(index)"> </u-icon>
                  </view>
                </view>
                <view class="image-item image-item1" @click="chooseImage(item)">
                  <image src="../../static/images/photo.png" mode=""></image>
                </view>
              </view>
              <!-- <view class="dec">
							    <view style="margin-right: 20rpx;">是否符合:</view>
							    <input type="radio" v-model="item.isConform1" value="true"> 是
							    <input type="radio" v-model="item.isConform1" value="false"> 否
							</view> -->
            </u-col>
          </u-row>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btns">
        <button class="reset" @click="reset">重置</button>
        <button class="sure" @click="submit" :loading="loading" :disabled="loading">确定</button>
      </view>
      <view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom)"></view>
    </view>
    <u-select v-model="singleColumnShow" mode="single-column" :default-value="singleColumnDefaultValue" :list="singleColumnList" @confirm="chooseSingleColumn" @cancle="singleColumnShow = false"></u-select>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'

import * as deviceApi from '@/api/device'
import * as moldApi from '@/api/mold'
import * as spotCheckOrderApi from '@/api/spotCheckOrder'
import * as dictApi from '@/api/dict'
import { useCountStore } from '@/store'
import * as uploadApi from '@/api/upload'

const { proxy } = getCurrentInstance()
// 获取自定义的store
const store = useCountStore()

const loading = ref(false)
const type = ref('')
const imgList = ref([])
const list = ref([
  {
    name: 'apple',
    disabled: false
  },
  {
    name: 'banner',
    disabled: false
  },
  {
    name: 'orange',
    disabled: false
  }
])
const form = ref({
  describes: '',
  deviceNumber: '',
  deviceName: '',
  maintenances: '',
  classes: '',
  classesName: ''
})
const singleColumnShow = ref(false)
const singleColumnDefaultValue = ref([])
const singleColumnList = ref([])
const field = ref('')
const maintenanceShift = ref([])
const subList = ref([])
const refreshKey = ref(0)
// 扫描设备条码
function chickRightButton(field) {
  uni.scanCode({
    success(res) {
      form.value.deviceNumber = res.result
      getDetailsByNumber()
      getSubList()
    }
  })
}
function blur() {
  if (form.value.deviceNumber) {
    getDetailsByNumber()
    getSubList()
  }
}
// 根据设备/模具号查询信息
function getDetailsByNumber() {
  const data = {
    number: form.value.deviceNumber,
    flag: 2
  }
  if (type.value == 'MOLD') {
    moldApi
      .getMoldDetailsByNumber(data)
      .then((res) => {
        if (res.data) {
          form.value.deviceName = res.data.name
        } else {
          proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
        }
      })
      .catch(() => {})
  } else {
    deviceApi
      .getDeviceDetailsByNumber(data)
      .then((res) => {
        if (res.data) {
          form.value.deviceName = res.data.name
        } else {
          proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
        }
      })
      .catch(() => {})
  }
}
// 根据设备获取二级列表
function getSubList() {
  const data = {
    number: form.value.deviceNumber
  }
  deviceApi
    .getSubList(data)
    .then((res) => {
      if (res.data) {
        subList.value = res.data
        subList.value.forEach((item) => {
          item.isConform = 'TRUE'
          item.records = ''
        })
      } else {
        proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
      }
    })
    .catch(() => {})
}
// 提交
function submit() {
  // 校验
  if (!form.value.describes) {
    proxy.$modal.showToast('请输入点检描述')
    return
  }
  if (!form.value.deviceNumber) {
    proxy.$modal.showToast(`请输入${type.value == 'DEVICE' ? '设备' : '模具'}编码`)
    return
  }
  if (!form.value.classes) {
    proxy.$modal.showToast('请选择班次')
    return
  }
  if (subList.value.length == 0) {
    proxy.$modal.showToast('该设备无检修项目')
    return
  }

  // 校验 subList 中的巡检点检记录
  let hasError = false
  subList.value.forEach((item) => {
    if (item.numberNeedSwitch && !item.records) {
      hasError = true
      item.error = true // 设置错误标记
    } else {
      item.error = false // 清除错误标记
    }
  })

  if (hasError) {
    proxy.$modal.showToast('请填写所有必填的巡检点检记录')
    return
  }

  const data = {
    describes: form.value.describes,
    deviceNumber: form.value.deviceNumber,
    maintenances: form.value.maintenances,
    classes: form.value.classes,
    subList: subList.value,
    type: type.value
  }

  proxy.$modal.confirm('是否添加点检工单').then(() => {
    proxy.$modal.loading('加载中')
    loading.value = true
    spotCheckOrderApi
      .spotCheckOrderCreate(data, type.value)
      .then((res) => {
        proxy.$modal.closeLoading()
        if (res.data) {
          proxy.$modal.showToast('添加成功')
          setTimeout(() => {
            proxy.$tab.navigateBack()
            loading.value = false
          }, 1500)
        } else {
          if (res.msg) {
            proxy.$modal.showToast(res.msg)
          } else {
            proxy.$modal.showToast('添加失败')
          }
          loading.value = false
        }
      })
      .catch(() => {
        proxy.$modal.closeLoading()
        loading.value = false
      })
  })
}
// 重置
function reset() {
  form.value = {
    describes: '',
    deviceNumber: '',
    deviceName: '',
    maintenances: '',
    classes: ''
  }
  subList.value = []
}

// 单列模式
function openSingleColumn(fieldName, val, list) {
  singleColumnList.value = list
  field.value = fieldName
  if (val) {
    singleColumnDefaultValue.value = [list.findIndex((item) => item.value == val)]
  } else {
    singleColumnDefaultValue.value = []
  }
  singleColumnShow.value = true
}
// 单列模式点击确定之后
function chooseSingleColumn(e) {
  form.value[field.value] = e[0].value
  if (field.value == 'classes') {
    form.value.classesName = e[0].label
  }
  singleColumnShow.value = false
}

function chooseImage(dataItem) {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: (res) => {
      const filePath = res.tempFilePaths[0]
      proxy.$modal.loading()
      const fileInfo = ref({
        name: '',
        url: ''
      })
      uploadApi
        .uploadFile({
          filePath,
          name: 'file',
          formData: {
            user: 'test'
          }
        })
        .then((ret) => {
          if (dataItem.imgList) {
            dataItem.imgList.push(ret.data)
            fileInfo.value.url = ret.data
            dataItem.fileInfoList.push(fileInfo.value)
          } else {
            dataItem.imgList = [ret.data]
            fileInfo.value.url = ret.data
            dataItem.fileInfoList = [fileInfo.value]
          }
          proxy.$modal.closeLoading()
        })
        .catch((err) => {
          proxy.$modal.closeLoading()
        })
    }
  })
}

// 删除图片
function delImage(index) {
  imgList.value.splice(index, 1)
}

onLoad(async (option) => {
  if (option.type) type.value = option.type
  maintenanceShift.value = await dictApi.getDict('maintenance_shift')
  form.value.maintenances = uni.getStorageSync('user').nickname
})

function radioGroupChange(e) {
  console.log(e)
}
</script>

<style lang="scss" scoped>
.add-form-container {
  min-height: calc(100vh - 140rpx);
  background: white;
  padding: 0px 0rpx 140rpx;
}
.u-form-item {
  padding: 20rpx 30rpx;
}
.disabled {
  background: #f5f5f5;
}
.list {
  padding: 30rpx 30rpx;
  .item {
    display: flex;
    margin-bottom: 20rpx;
    .item-box {
      background: #f5f5f5;
      border-radius: 12rpx;
      flex: 1;
      width: 0rpx;
    }
    .spare-title {
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #e4e4e4;
      .title-txt {
        color: #409eff;
        font-size: 30rpx;
        font-weight: bold;
      }
    }
    .dec {
      color: #9c9c9c;
      padding: 20rpx 30rpx 20rpx;
      display: flex;
      align-items: center;
      .required {
        color: red;
        margin-right: 5rpx;
      }
      .error {
        border: 1px solid red !important;
      }
    }
  }
}
.select {
  display: flex;
  align-items: center;
  height: 72rpx;
  width: 100%;
  .input {
    flex: 1;
    font-size: 28rpx;
    color: #000000;
  }
  .placeholder {
    flex: 1;
    font-size: 28rpx;
    color: rgb(192, 196, 204);
  }
}
.footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
.btns {
  display: flex;
  button {
    flex: 1;
  }
  .sure {
    background: #409eff;
    color: white;
    border-radius: 0px;
    &::after {
      border: 1px solid #409eff;
      border-radius: 0px;
    }
  }
  .reset {
    background: #f5f5f5;
    border-radius: 0px;
    &::after {
      border-radius: 0px;
    }
  }
}
.right-button {
  background: #409eff;
  color: white;
  padding: 0rpx 30rpx;
  border-radius: 16rpx;
  text-align: center;
  font-size: 28rpx;
}

.image {
  padding: 0px 30rpx;
  padding-bottom: 30rpx;
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  .image-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}
.image-item {
  width: 210rpx;
  height: 210rpx;
  margin-right: 20rpx;
  position: relative;
  border: 1px solid rgba(230, 230, 230, 0.5);
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }

  .close {
    position: absolute;
    right: 0px;
    top: 0px;
  }
}

.image-item1 {
  border: none;
  margin-right: 0px;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>