报工记录列表增加人员姓名

yangfeng

2023-12-12 1519870c0e18171ced014a840e86a459dc6b00f1

 src/views/dashboard/components/TaskControl.vue

@@ -21,25 +21,59 @@
        开始生产
      </BigButton>
      <template v-if="task?.Procedure.Status === 2 || task?.Procedure.Status === 3">
        <BigButton class="btn" bg-color="#ff9933">打印</BigButton>
        <BigButton class="btn" bg-color="#00cc33">报工</BigButton>
        <BigButton class="btn" bg-color="#ff0000">完成</BigButton>
        <BigButton class="btn" bg-color="#ff9933" :disabled="task?.Procedure.Status === 3">打印</BigButton>
        <BigButton class="btn" bg-color="#00cc33" :disabled="task?.Procedure.Status === 3" @click="openReportModal">
          报工
        </BigButton>
        <el-popconfirm
          width="340"
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="CircleCloseFilled"
          icon-color="red"
          :hide-after="0"
          :teleported="false"
          title="请确认是否已完成此生产任务?"
          placement="top"
          @confirm="finishTaskProduce"
        >
          <template #reference>
            <BigButton class="btn" bg-color="#ff0000" :disabled="task?.Procedure.Status === 3">完成</BigButton>
          </template>
        </el-popconfirm>
      </template>
    </div>
  </div>
  <TaskControlModal v-model="showTaskControlModal" :task="task"></TaskControlModal>
  <TaskControlModal v-model="showTaskControlModal" :task="task" @produce-start="onProduceStart"></TaskControlModal>
  <ReportProductionModal
    v-model="showReportModal"
    :amount="plcInfo?.finishNumber ?? 0"
    @close="showReportModal = false"
    @submit="onReportProduction"
  ></ReportProductionModal>
</template>
<script setup lang="ts">
import type { Task } from '@/api/task'
import type { Task, Worker } from '@/api/task'
import { ref, toRefs } from 'vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { useDateFormat } from '@vueuse/core'
import TaskControlModal from '@/views/dashboard/components/TaskControlModal.vue'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { apiReportWork, finishTask } from '@/api'
import { ElMessage } from 'element-plus'
import ReportProductionModal from '@/views/dashboard/components/ReportProductionModal.vue'
import { usePLCStore } from '@/stores/plc'
import { storeToRefs } from 'pinia'

const props = defineProps<{
  task?: Task
  workers: Worker[]
}>()
const { task } = toRefs(props)
const { task, workers } = toRefs(props)

const emit = defineEmits<{
  shouldReload: [task: Task]
}>()

const showTaskControlModal = ref(false)

@@ -51,6 +85,53 @@
}

/**
 * 完成任务
 */
function finishTaskProduce() {
  if (task?.value && task.value?.Procedure?.ID) {
    //点击的时候不能比实际开始时间大于1分钟
    let realStartTime = task.value?.Procedure?.realStartTime
    if (realStartTime) {
      realStartTime = realStartTime * 1000
      let time = Date.now()
      let differ = Math.abs(time - realStartTime) / 1000
      if (differ < 60) {
        ElMessage({
          message: '工序制造时间太短，请检查！',
          type: 'warning'
        })
        return true
      }
    }
    finishTask({ id: task!.value.Procedure.ID }).then(
      (res) => {
        ElMessage({
          message: '操作成功！',
          type: 'success'
        })
        emit('shouldReload', task.value as Task)
      },
      (err) => {
        console.error(err)
        ElMessage({
          message: '操作失败！',
          type: 'warning'
        })
      }
    )
  } else {
    ElMessage({
      message: '当前设备没有工序！',
      type: 'warning'
    })
  }
}

function onProduceStart() {
  emit('shouldReload', task!.value as Task)
}

/**
 * 格式化时间戳
 * @param timestamp 后端返的10位时间戳
 */
@@ -58,8 +139,81 @@
  if (!timestamp) {
    return '--'
  }
  const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
  const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
  return time.value
}

const plcStore = usePLCStore()
const { plcInfo } = storeToRefs(plcStore)
// 报工
const showReportModal = ref(false)
function openReportModal() {
  // 有人员才可以报工
  if (!workers.value || workers.value.length == 0) {
    ElMessage({
      message: '没有人员信息不允许手动报工！',
      type: 'error',
      duration: 3000
    })
    return true
  }
  // 从开始生产到报工的点击时间不能小于1分钟
  if (task?.value && task.value?.Procedure?.realStartTime) {
    let realStartTime = task.value?.Procedure?.realStartTime
    if (realStartTime) {
      realStartTime = realStartTime * 1000
      let time = Date.now()
      let differ = Math.abs(time - realStartTime) / 1000
      if (differ < 60) {
        ElMessage({
          message: '工序制造时间太短，请检查！',
          type: 'warning'
        })
        return true
      }
    }
  }

  if (workers.value[0].workerId) {
    showReportModal.value = true
  }
}

/**
 * 上报加工数
 * @param amount 加工数
 */
function onReportProduction(amount: number) {
  if (!task?.value) {
    return
  }
  // 有人员才可以报工
  if (workers.value[0].workerId) {
    apiReportWork({
      procedureId: task.value?.Procedure.ID,
      reportAmount: amount,
      workerID: workers.value[0].workerId
    })
      .then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: '报工成功',
            type: 'success',
            duration: 2000
          })
          showReportModal.value = false
        } else {
          ElMessage({
            message: '报工失败',
            type: 'error',
            duration: 3000
          })
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
}
</script>
<style scoped lang="scss">
@@ -71,10 +225,12 @@
  align-items: start;
  width: 100%;
}
.task-info,
.produce-btn {
  width: 50%;
.task-info {
  flex: 1;
  height: 100%;
}
.produce-btn {
  flex-shrink: 0;
  height: 100%;
}
.produce-btn {
@@ -89,7 +245,6 @@

.task-info-item {
  padding: 10px 20px;
  margin-bottom: 6px;
}
.task-info-title {
  font-size: 18px;
@@ -99,7 +254,7 @@
  font-size: 19px;
  color: $content-text-color;
  font-weight: 600;
  margin-top: 12px;
  margin-top: 4px;
}
.produce-btn {
  display: flex;
@@ -119,4 +274,41 @@
.finish-btn {
  background-color: #ff0000;
}

:deep(.el-popper) {
  background-color: #133f97;
  color: #fff;
}
:deep(.el-popconfirm__main) {
  font-size: 25px;
}
:deep(.el-popconfirm__icon) {
  font-size: 38px;
}
:deep(.el-popconfirm__main) {
  margin-bottom: 20px;
}
:deep(.el-popconfirm__action) {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
:deep(.el-popconfirm__action .el-button) {
  font-size: 22px;
  height: 54px;
  width: 140px;
  color: #fff;
  background-color: #0ae5ec;
  &:hover {
    background-color: #0ae5ec;
  }
  &.is-text {
    color: #92a1c0;
    background-color: #133f97;
    border: 1px solid #0ae5ec;
    &:hover {
      background-color: #133f97;
    }
  }
}
</style>