feat: 添加报工输入弹窗

songshankun

2023-11-08 d517e5eacb38b075ae7cdffc011fc84401e587a8

feat: 添加报工输入弹窗

 src/views/dashboard/components/ReportProductionModal.vue

New file
@@ -0,0 +1,105 @@
<template>
  <div class="report-production-modal">
    <BaseModal v-model="modelData" :wider="true" @close="closeModal">
      <template #title> 生产报工 </template>
      <div class="report-content">
        <div class="numbers">{{ inputNumber }}</div>
        <div class="buttons">
          <BigButton
            v-for="item in btnList"
            :key="item"
            class="btn"
            :bg-color="getBtnColor(item).bgColor"
            :color="getBtnColor(item).color"
            @click="clickBtn(item)"
            >{{ item }}</BigButton
          >
        </div>
      </div>
    </BaseModal>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import BigButton from './BigButton.vue'
import { ref, watch } from 'vue'
const props = withDefaults(defineProps<{ modelValue: boolean }>(), {
  modelValue: false
})
const emit = defineEmits<{
  'update:modelValue': [show: boolean]
  submit: [inputNumber: number]
  close: []
}>()
const modelData = useVModel(props, 'modelValue', emit)
function closeModal() {
  emit('close')
}

const btnList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '清除', '0', '确定']
function getBtnColor(item: string) {
  if (item === '清除') {
    return {
      color: '#ffffff',
      bgColor: '#f44336'
    }
  } else if (item === '确定') {
    return {
      color: '#ffffff',
      bgColor: '#2196f3'
    }
  } else {
    return {
      color: '#1a73ff',
      bgColor: '#f2f2f2'
    }
  }
}
const inputNumber = ref('')
function clickBtn(input: string) {
  if (input === '清除') {
    inputNumber.value = ''
  } else if (input === '确定') {
    emit('submit', +inputNumber.value)
  } else if (inputNumber.value === '0' && input === '0') {
    return
  } else if (inputNumber.value === '0' && input !== '0') {
    inputNumber.value = input
  } else {
    inputNumber.value += input
  }
}
watch(modelData, () => {
  if (modelData.value) {
    inputNumber.value = ''
  }
})
</script>

<style scoped lang="scss">
.report-content {
  padding: 60px 0 0 230px;
  height: 520px;
}
.numbers {
  height: 80px;
  border: 1px solid #fff;
  padding: 0 6px;
  width: 400px;
  margin-bottom: 20px;
  line-height: 80px;
  text-align: right;
  font-size: 40px;
  color: #fff;
}
.buttons {
  width: 420px;
}
.btn {
  margin-right: 20px;
  margin-bottom: 20px;
  width: 120px;
  height: 70px;
}
</style>

 src/views/dashboard/components/TaskControl.vue

@@ -22,7 +22,7 @@
      </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="#00cc33" @click="openReportModal">报工</BigButton>
        <el-popconfirm
          width="340"
          confirm-button-text="确定"
@@ -43,6 +43,11 @@
    </div>
  </div>
  <TaskControlModal v-model="showTaskControlModal" :task="task" @produce-start="onProduceStart"></TaskControlModal>
  <ReportProductionModal
    v-model="showReportModal"
    @close="showReportModal = false"
    @submit="showReportModal = false"
  ></ReportProductionModal>
</template>
<script setup lang="ts">
import type { Task } from '@/api/task'
@@ -53,6 +58,7 @@
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { finishTask } from '@/api'
import { ElMessage } from 'element-plus'
import ReportProductionModal from '@/views/dashboard/components/ReportProductionModal.vue'

const props = defineProps<{
  task?: Task
@@ -116,6 +122,11 @@
  const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
  return time.value
}
// 报工
const showReportModal = ref(false)
function openReportModal() {
  showReportModal.value = true
}
</script>
<style scoped lang="scss">
$title-text-color: #9599af;