style: 调整表格无数据文案

songshankun

2023-11-28 e85193ea9acae04e9dbf6ca5b97f1735d4cc2e13

 src/views/dashboard/components/TaskControl.vue

@@ -21,8 +21,10 @@
        开始生产
      </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" @click="openReportModal">报工</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="确定"
@@ -36,7 +38,7 @@
          @confirm="finishTaskProduce"
        >
          <template #reference>
            <BigButton class="btn" bg-color="#ff0000">完成</BigButton>
            <BigButton class="btn" bg-color="#ff0000" :disabled="task?.Procedure.Status === 3">完成</BigButton>
          </template>
        </el-popconfirm>
      </template>
@@ -45,25 +47,29 @@
  <TaskControlModal v-model="showTaskControlModal" :task="task" @produce-start="onProduceStart"></TaskControlModal>
  <ReportProductionModal
    v-model="showReportModal"
    :amount="plcInfo?.finishNumber ?? 0"
    @close="showReportModal = false"
    @submit="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 { finishTask } from '@/api'
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]
@@ -119,13 +125,50 @@
  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() {
  showReportModal.value = true
}

/**
 * 上报加工数
 * @param amount 加工数
 */
function onReportProduction(amount: number) {
  if (!task?.value) {
    return
  }
  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">
@@ -137,10 +180,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 {
@@ -155,7 +200,6 @@

.task-info-item {
  padding: 10px 20px;
  margin-bottom: 6px;
}
.task-info-title {
  font-size: 18px;
@@ -165,7 +209,7 @@
  font-size: 19px;
  color: $content-text-color;
  font-weight: 600;
  margin-top: 12px;
  margin-top: 4px;
}
.produce-btn {
  display: flex;