eam-uniapp/src/pages/upkeepOrder/addServiceRecord.vue

<template>
  <!-- 添加维修工单 -->
  <view class="add-form-container">
    <u-form :model="form" ref="formRef" label-width="160rpx">
      <u-form-item label="保养内容" prop="contents" required class="disabled">
        <u-input v-model="form.contents" placeholder="请输入保养内容" maxlength="50" disabled />
      </u-form-item>
      <!-- <u-form-item label="保养部位" prop="equipmentParts" required>
				<u-input v-model="form.equipmentParts"  placeholder="请输入保养部位" maxlength="50" disabled/>
			</u-form-item> -->
      <u-form-item label="预估人数" prop="peoples" class="disabled">
        <u-input v-model="form.peoples" type="number" placeholder="请输入预估人数" maxlength="50" disabled />
      </u-form-item>
      <u-form-item label="预估分钟" prop="estimatedMinutes" class="disabled">
        <u-input v-model="form.estimatedMinutes" type="number" placeholder="请输入预估分钟" maxlength="50" disabled />
      </u-form-item>
      <u-form-item label="实际分钟" prop="actualMinutes" required>
        <u-input v-model="form.actualMinutes" type="number" placeholder="请输入实际分钟" maxlength="50" />
      </u-form-item>
      <u-form-item label="责任人" prop="chargePeoples" required>
        <view class="select" @click="openSelecUser">
          <view class="input" v-if="form.chargePeoples">
            {{ selectFormatCheck(form.chargePeoples, selecUserList) }}
          </view>
          <view class="placeholder" v-else> 请选择维修人员 </view>
          <u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
        </view>
      </u-form-item>
      <u-form-item label="完成情况" prop="status" required>
        <view class="select" @click="openSingleColumn('status', form.status, jxDetailsStatus, 'form')">
          <view class="input" v-if="form.status">
            {{ form.statusTxt }}
          </view>
          <view class="placeholder" v-else>
            {{ `请选择完成情况` }}
          </view>
          <u-icon name="arrow-right" color="#aaaaaa" size="28" v-if="!form.id"></u-icon>
        </view>
      </u-form-item>
      <u-form-item label="完成时间" prop="completionTime" required v-if="form.status === 0 || form.status === '0'">
        <uni-datetime-picker type="datetime" v-model="formatDate" @change="chooseDatetime" :border="false" />
      </u-form-item>
      <u-form-item label="未完成原因" prop="uncompleted" required v-if="form.status === 1 || form.status === '1'">
        <u-input type="textarea" v-model="form.uncompleted" placeholder="请输入未完成原因" maxlength="200" />
      </u-form-item>
      <u-form-item label="工程师确认" prop="engineer">
        <u-input v-model="form.engineer" placeholder="请输入工程师确认" maxlength="50" />
      </u-form-item>
    </u-form>

    <view class="list">
      <view class="title"> <span></span>备件 </view>
      <view class="item" v-for="(item, index) in form.itemNumbers" :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=""> 数量:{{ item.qty }} </view>
              </view>
            </u-col>
          </u-row>
        </view>
        <u-icon name="minus-circle" color="#aaaaaa" size="60" @click="delSpareParts(index)"></u-icon>
      </view>
      <view class="add-btn">
        <u-button type="primary" @click="open"><u-icon name="plus-circle" color="#ffffff" size="36"></u-icon>添加备件</u-button>
      </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-popup v-model="isPopupShow" mode="center" border-radius="14">
      <view class="popup-title">添加备件</view>
      <view class="popup">
        <u-form :model="form1" ref="form1Ref" label-width="160rpx">
          <u-form-item :label="`备件`" prop="number" required>
            <view class="select" @click="openSingleColumnItem('number', form1.number, sparePartsList, 'form1')">
              <view class="input" v-if="form1.number">
                {{ form1.name }}
              </view>
              <view class="placeholder" v-else> 请选择备件 </view>
              <u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
            </view>
          </u-form-item>
          <u-form-item label="数量" prop="qty" required>
            <u-input v-model="form1.qty" type="number" placeholder="请输入数量" />
          </u-form-item>
        </u-form>
      </view>
      <view class="popup-footer">
        <view @click="isPopupShow = false">取消</view>
        <view class="sure" @click="addSpare">确认</view>
      </view>
    </u-popup>
    <!-- 选择维修人员 -->
    <u-popup v-model="isShowSelecUser" mode="center" border-radius="14">
      <view class="popup-title">选择维修人员</view>
      <view class="popup">
        <u-checkbox-group @change="checkboxGroupChange">
          <u-checkbox v-model="item.checked" v-for="(item, index) in selecUserList" :key="index" :name="item.id">{{ item.name }}</u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="popup-footer">
        <view @click="isShowSelecUser = false">取消</view>
        <view class="sure" @click="chooseUser">确认</view>
      </view>
    </u-popup>
    <SelectItemList :isShowSelectItem="isShowSelectItem" :singleColumnList="singleColumnList" @searchItem="searchItem" @chooseItem1="chooseItem1" />
    <u-select v-model="singleColumnShow" mode="single-column" :default-value="singleColumnDefaultValue" :list="singleColumnList" @confirm="chooseSingleColumn" @cancle="singleColumnShow = false"></u-select>
    <!--    <u-picker mode="time" v-model="datetimeShow" :default-time="datetimeDefaultValue" :params="params" @confirm="chooseDatetime" @cancle="datetimeShow = false"></u-picker> -->
  </view>
</template>

<script setup lang="ts">
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref, getCurrentInstance, nextTick } from 'vue'
import * as upkeepOrderApi from '@/api/upkeepOrder'
import * as sparePartsApi from '@/api/spareParts'
import * as deptApi from '@/api/dept'
import * as dictApi from '@/api/dict'
import SelectItemList from '../../components/item/slectItemList.vue'

onReady(() => {
  datetimeDefaultValue.value = '2025-07-02 13:01'
})

const { proxy } = getCurrentInstance()
const loading = ref(false)
const type = ref('')
// 备件弹窗
const isPopupShow = ref(false)
const sparePartsList = ref([])
const isShowSelectItem = ref(false)
const singleColumnShow = ref(false)
const singleColumnDefaultValue = ref([])
const singleColumnList = ref([])
const field = ref('')
const selecUserList = ref([]) // 负责人员
const isShowSelecUser = ref(false)
const jxDetailsStatus = ref([]) // 完成情况
const formatDate = ref('') // 日期展示
const deviceNumber = ref(null)
const form = ref({
  number: '',
  name: '',
  peoples: null,
  estimatedMinutes: '',
  actualMinutes: '',
  chargePeoples: '',
  status: null,
  completionTime: '',
  engineer: '',
  uncompleted: '',
  itemNumbers: []
})
const form1 = ref({
  number: '',
  name: '',
  qty: 0
})
// 时间参数
const datetimeShow = ref(false)
const params = ref({
  year: true,
  month: true,
  day: true,
  hour: true,
  minute: true,
  second: true,
  timestamp: true
})
const datetimeDefaultValue = ref('')
const formatValue = ref('YYYY-MM-DD hh:mm:ss')

const factoryAreaNumber = ref('')
const chooseUserList = ref([])
// 验证正整数
function validateInteger(value) {
  if (value) {
    const integerReg = /^[+]{0,1}(\d+)$/
    if (integerReg.test(value)) {
      return true
    }
    return false
  }
  return false
}
// 触发提交表单
function submit() {
  // 校验
  if (form.value.peoples > 100) {
    proxy.$modal.showToast('预估人数不得超出100')
    return
  }
  if (!form.value.actualMinutes) {
    proxy.$modal.showToast('请输入实际分钟')
    return
  }
  if (!validateInteger(form.value.actualMinutes)) {
    proxy.$modal.showToast('实际分钟请输入正整数')
    return
  }
  if (!form.value.chargePeoples) {
    proxy.$modal.showToast('请选择负责人')
    return
  }
  if (!form.value.status) {
    proxy.$modal.showToast('请选择完成情况')
    return
  }
  if (form.value.status == 0) {
    if (!form.value.completionTime) {
      proxy.$modal.showToast('请选择完成时间')
      return
    }
  }
  if (form.value.status == 1) {
    if (!form.value.uncompleted) {
      proxy.$modal.showToast('请输入未完成原因')
      return
    }
  }
  if (form.value.id) {
    proxy.$modal.confirm('是否修改保养内容').then(() => {
      proxy.$modal.loading('加载中')
      loading.value = true
      upkeepOrderApi
        .upkeepOrderDetailUpdate(form.value, 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
        })
    })
  } else {
    proxy.$modal.confirm('是否添加保养内容').then(() => {
      proxy.$modal.loading('加载中')
      loading.value = true
      upkeepOrderApi
        .upkeepOrderDetailCreate(form.value, 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.actualMinutes = ''
  form.value.chargePeoples = ''
  form.value.status = null
  form.value.statusTxt = ''
  form.value.completionTime = ''
  form.value.engineer = ''
  form.value.uncompleted = ''
  form.value.itemNumbers = []
  formatDate.value = ''
}
// 获取人员列表
async function getSelecUser() {
  const paramsData = {
    classType: type.value,
    factoryAreaNumber: factoryAreaNumber.value,
    flag: 0
  }
  let arr = []
  if (form.value.chargePeoples) {
    arr = form.value.chargePeoples.split(',')
  }
  await deptApi
    .getSelecUser(paramsData)
    .then((res) => {
      res.data.forEach((item) => {
        item.checked = false
        arr.forEach((cur) => {
          if (item.id == cur) {
            item.checked = true
          }
        })
      })
      selecUserList.value = res.data
    })
    .catch(() => {})
}
// 打开人员列表
function openSelecUser() {
  isShowSelecUser.value = true
}
function checkboxGroupChange(e) {
  chooseUserList.value = e
}
// 多选选择框回显
function selectFormatCheck(val, array) {
  const arr = val.split(',').map(Number)
  const str = array
    .filter((item) => arr.includes(item.id))
    .map((item) => item.name)
    .join(',')
  return str
}
// 选择人员
function chooseUser() {
  form.value.chargePeoples = chooseUserList.value.join(',')
  isShowSelecUser.value = false
}
const whichForm = ref()
// 单列模式
function openSingleColumn(fieldName, val, list, from) {
  if (fieldName == 'deviceNumber' && form.value.id) return
  whichForm.value = from
  singleColumnList.value = list
  field.value = fieldName
  console.log(val)
  singleColumnShow.value = true
  if (val) {
    singleColumnDefaultValue.value = [list.findIndex((item) => item.value == val)]
    console.log(singleColumnDefaultValue.value)
  } else {
    singleColumnDefaultValue.value = []
  }
}

// 单列模式
function openSingleColumnItem(fieldName, val, list, from) {
  if (fieldName == 'deviceNumber' && form.value.id) return
  whichForm.value = from
  singleColumnList.value = list
  field.value = fieldName
  if (val) {
    singleColumnDefaultValue.value = [list.findIndex((item) => item.value == val)]
  } else {
    singleColumnDefaultValue.value = []
  }
  isShowSelectItem.value = true
}

// 单列模式点击确定之后
function chooseSingleColumn(e) {
  if (whichForm.value == 'form') {
    form.value[field.value] = e[0].value
    if (field.value == 'status') {
      form.value.statusTxt = e[0].label
      formatDate.value = ''
    }
  } else if (whichForm.value == 'form1') {
    form1.value[field.value] = e[0].value
    if (field.value == 'number') {
      form1.value.name = e[0].label
    }
  }
  singleColumnShow.value = false
}
// 获取备件列表
async function getSparePartsList(number, name) {
  number = deviceNumber.value
  const param = {
    number,
    name
  }
  await sparePartsApi
    .getSparePartsList(param)
    .then((res) => {
      res.data.map((item) => {
        item.value = item.number
        item.label = item.name
      })
      sparePartsList.value = res.data
      singleColumnList.value = sparePartsList.value
    })
    .catch(() => {})
}
// 打开弹窗
function open() {
  form1.value = {
    number: '',
    name: '',
    qty: 0
  }
  isPopupShow.value = true
}
// 添加配件
function addSpare() {
  if (!form1.value.number) {
    proxy.$modal.showToast('请选择备件')
    return
  }
  if (!form1.value.qty || form1.value.qty == 0) {
    proxy.$modal.showToast('请输入数量')
    return
  }
  if (form.value.itemNumbers && form.value.itemNumbers.length > 0) {
    const arr = form.value.itemNumbers.filter((item) => item.number == form1.value.number)
    if (arr && arr.length > 0) {
      proxy.$modal.showToast('该备件已添加')
      return
    }
  }

  form.value.itemNumbers.push(form1.value)
  isPopupShow.value = false
}
// 删除备件
function delSpareParts(index) {
  form.value.itemNumbers.splice(index, 1)
}
function openDatetime(fieldName, val, params, format) {
  console.log(11, fieldName, val, params, format)
  params.value = params
  formatValue.value = format
  field.value = fieldName
  form.value[field.value] = val || ''
  console.log(2222, datetimeDefaultValue.value)
  // datetimeDefaultValue.value = val || proxy.$time.formatDate()
  datetimeShow.value = true
}
async function searchItem(name) {
  await getSparePartsList(null, name)
}

async function chooseItem1(type, forms) {
  if (!forms.value.number && type == 1) {
    proxy.$modal.showToast('请选择备件')
    return
  }
  if (type == 1) {
    form1.value.number = forms.value.temporarilyNumber
    form1.value.name = forms.value.temporarilyName
  }
  await getSparePartsList(null, null)
  isShowSelectItem.value = false
}
// 日期模式点击确定之后
function chooseDatetime(e) {
  console.log(e)
  const array1 = []
  const array2 = []
  // if (formatValue.value.indexOf('YYYY') > -1) {
  //   array1.push(e.year)
  // }
  // if (formatValue.value.indexOf('MM') > -1) {
  //   array1.push(e.month)
  // }
  // if (formatValue.value.indexOf('DD') > -1) {
  //   array1.push(e.day)
  // }
  // if (formatValue.value.indexOf('hh') > -1) {
  //   array2.push(e.hour)
  // }
  // if (formatValue.value.indexOf('mm') > -1) {
  //   array2.push(e.minute)
  // }
  // if (formatValue.value.indexOf('ss') > -1) {
  //   array2.push(e.second)
  // }
  // const str = `${array1.join('-')} ${array2.join(':')}`
  formatDate.value = e
  form.value.completionTime = new Date(e).getTime()
  console.log(field.value)
  console.log(form.value[field.value])
}
onLoad(async (option) => {
  if (option.type) type.value = option.type
  if (option.factoryAreaNumber) factoryAreaNumber.value = option.factoryAreaNumber
  if (option.number) form.value.number = option.number
  if (option.deviceNumber) deviceNumber.value = option.deviceNumber
  if (option.data && JSON.parse(decodeURIComponent(option.data)) && JSON.parse(decodeURIComponent(option.data)).id) {
    form.value = JSON.parse(decodeURIComponent(option.data))
    form.value.itemNumbers = form.value.items
    formatDate.value = form.value.completionTime ? proxy.$time.formatDate(form.value.completionTime) : proxy.$time.formatDate()
    form.value.statusTxt = form.value.status == 0 ? '完成' : '未完成'
  }
  jxDetailsStatus.value = await dictApi.getDict('jx_details_status')

  await getSelecUser()
  await getSparePartsList()
})
</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;
}

.footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 22;
}

.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;
}

.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);
  }
}

.title {
  padding: 32rpx 0px;
  position: relative;

  span {
    position: absolute;
    left: -16rpx;
    color: #fa3534;
    padding-top: 6rpx;
  }
}

.list {
  padding: 0px 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;
    }
  }
}

.add-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.popup-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #409eff;
  padding: 30rpx 30rpx 0px;
}

.popup {
  width: 600rpx;
  padding: 30rpx 60rpx 30rpx;
}

.popup-footer {
  display: flex;
  border-top: 1px solid #e4e4e4;

  view {
    line-height: 100rpx;
    flex: 1;
    text-align: center;

    &.sure {
      color: #409eff;
    }
  }
}

::v-deep .u-checkbox-group {
  display: grid !important;
}
::v-deep .uni-date__x-input {
  color: #000;
}
</style>