sfms3.0-uniapp3/src/pages/mes/workScheduling/processReportForm.vue

<template>
  <view class="container">
    <u-navbar back-icon-color='#fff' :background="{ background: '#409eff'}" back-text="" title-color='#fff'
              title="工序报工">
      <!-- <template v-slot:right v-if="isEngineer"> -->
      <template v-slot:right v-if="isLeader">
        <u-icon name="plus" color="#fff" size="36" style="padding-right: 30rpx;"></u-icon>
      </template>
    </u-navbar>
    <view>
      <form @submit="formSubmit">
        <scroll-view scroll-y="true" class="scroll-Y" style="height: calc(100vh - 80rpx)">
          <view class="list">
            <view class="item">
              <view class="dec">
                <view><span style="color: red">*</span>报工日期：</view>
                <view >
                  <u-input v-model="dataInput" @click="show = true" style="width:100%;margin-left: 12px" placeholder="请选择时间" />
                </view>
              </view>
            </view>
          </view>

          <view v-for="item in list" class="list">
            <view class="item">
              <view class="dec">
                <view>&nbsp;员工姓名：</view>
                <view>&nbsp;&nbsp;&nbsp;{{ item.personName }}</view>
              </view>
              <view class="dec">
                <view><span style="color: red">*</span>报工数量：</view>
                <view><input class="uni-input" type="number" inputmode="numeric" placeholder="请输入报工数量" v-model="item.reportCount" /></view>
              </view>
              <view class="dec">
                <view><span style="color: red">*</span>报工工时：</view>
                <view><input class="uni-input" type="number" inputmode="numeric" placeholder="请输入报工工时" v-model="item.workTerm" /></view>
              </view>
            </view>
          </view>
        </scroll-view>

        <u-button form-type="submit" style="color:#ffffff;backgroundColor:#3C9CFF;position: fixed;bottom: 0px;width: 100%">提交</u-button>
      </form>
    </view>
  </view>
  <u-picker mode="time" v-model="show" :params="params" @confirm="selectReworkTime"></u-picker>
</template>

<script setup lang="ts">
/* 初始化 */
import { onShow } from "@dcloudio/uni-app"
import { getCurrentInstance, ref } from "vue"
/* 引入API */
import * as workSchedulingApi from "@/api/mes/workScheduling"

const { proxy } = getCurrentInstance()
let show = ref(false)
let dataInput = ref()
function selectReworkTime(datetime){
  dataInput.value = `${datetime.year}-${datetime.month}-${datetime.day} ${datetime.hour}:${datetime.minute}:${datetime.second}`
  show.value = false
}
const isLeader = uni.getStorageSync("isLeader")
let params = {
  year: true,
  month: true,
  day: true,
  hour: true,
  minute: true,
  second: true
}
/* 列表数据集 */
const list = ref([])
/* 列表调用API方法 */
async function formSubmit() {
  proxy.$modal.loading("提交中")
  await workSchedulingApi.reportWorkByProcess({
    reportDate : dataInput.value,
    schedulingCode : list.value[0].schedulingCode,
    processCode: list.value[0].processCode,
    list : list.value
  })
  proxy.$modal.closeLoading()
}
/* 打开详情页 */
function openDetail(item: any) {
  console.log(item)
  // proxy.$tab.navigateTo(`/pages/mes/orderDapPlan/detail?obj=${item}`)
}

/* 通用方法 */
onShow(() => {
  list.value = uni.getStorageSync("processReportList")
})
function getDate(type) {
  const date = new Date();

  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours()
  let minute = date.getMinutes()
  let second = date.getSeconds()

  if (type === 'start') {
    year = year - 10;
  } else if (type === 'end') {
    year = year + 10;
  }
  month = month > 9 ? month : '0' + month;
  day = day > 9 ? day : '0' + day;

  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
let date = getDate({
  format: true
})
function bindDateChange(e){
  date = e.detail.value
}
</script>

<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

.list {
  background: #f5f5f5;
  margin-top: 20rpx;

  .item {
    padding: 30rpx 30rpx 0px 30rpx;
    margin-top: 20rpx;
    background: white;
    position: relative;

    .title {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;

      .title-txt {
        color: #409eff;
        font-weight: bold;
        font-size: 36rpx;
        width: 0px;
        flex: 1;
        word-wrap: break-word;
      }

      .time {
        color: #919191;
      }
    }

    .dec {
      padding-bottom: 20rpx;
      display: flex;
      align-items: center;
      view {
        &:nth-child(1) {
          width: 160rpx;
        }

        &:nth-child(2) {
          color: #999999;
          flex: 1;
          width: 0px;
          word-wrap: break-word;
        }
      }
    }

    .last {
      padding-bottom: 30rpx;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #e4e4e4;
      padding: 20rpx 0px;
      height: 90rpx;
    }
  }
}

::v-deep .u-checkbox-group {
  display: grid !important;
}

.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
}
</style>