kd-aiot-frontend-mes/src/views/produce/components/workStep/index.vue

<template>
  <ele-modal
    title="工序工步列表"
    :maxable="true"
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="85%"
    append-to-body
    @close="handleClose"
  >
    <ele-pro-table
      style="min-height: 400px"
      ref="fileTable"
      :columns="columns"
      :datasource="workList"
    >
      <template v-slot:starttime="{ row, $index }">
        <el-date-picker
          v-model="row.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:endtime="{ row, $index }">
        <el-date-picker
          v-model="row.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:wuping="{ row }">
        <el-button type="primary" @click="goDetails(row, 'toolList')"
          >物品({{ dataLeng(row, 'toolList') }})</el-button
        >
      </template>
      <template v-slot:zysx="{ row }">
        <el-button type="primary" @click="goDetails(row, 'postscriptList')"
          >注意事项({{ dataLeng(row, 'postscriptList') }})</el-button
        >
      </template>
      <template v-slot:action="{ row }">
        <el-link type="primary" @click="saveData(row)" :underline="false"
          >确定</el-link
        >
        <el-link
          v-if="row.hasStepWorkTimeRecord"
          type="primary"
          @click="showWorkTimeHistoryDialog(row)"
          :underline="false"
          >报工记录</el-link
        >
      </template>
      <!-- 表头工具栏 -->
    </ele-pro-table>
    <Details
      v-if="detailsVisible"
      :detailsVisible="detailsVisible"
      @close="close"
      :list="list"
      :title="detailTitle"
    />
    <WorkTimeHistory
      :details-visible="stepWorkTimeDialogVisible"
      :produceStepWorkTimeId="produceStepWorkTimeId"
      @close="stepWorkDialogClose"/>
  </ele-modal>
</template>

<script>
  import Details from './details.vue';
  import WorkTimeHistory from './workTimeHistory.vue';
  import { listByParam, addStepWorkTime, listStepWorkTimeRecord } from '@/api/produce/workOrder';
  import dayjs from 'dayjs';
  export default {
    components: { WorkTimeHistory, Details },
    data() {
      return {
        visible: false,
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '编码',
            prop: 'code',
            width: 110,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '名称',
            prop: 'name',
            width: 180,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '内容',
            prop: 'defaultValue',
            minWidth: 300,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'wuping',
            label: '物品清单',
            prop: 'wuping',
            width: 130,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'zysx',
            label: '注意事项',
            prop: 'zysx',
            width: 130,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '工时',
            prop: 'totalTimeStr',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '开始时间',
            slot: 'starttime',
            prop: 'starttime',
            width: 250,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '结束时间',
            slot: 'endtime',
            prop: 'endtime',
            width: 250,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            columnKey: 'action',
            slot: 'action',
            label: '操作',
            align: 'center',
            width: 130,
            resizable: false,
            showOverflowTooltip: true
          }
        ],
        workList: [],
        detailsVisible: false,
        list: [],
        detailTitle: null,
        queryParam: {},
        stepWorkTimeDialogVisible: false,
        produceStepWorkTimeId: null,
      };
    },
    computed: {
      dataLeng() {
        return (row, type) => {
          if (!row[type]) {
            return 0;
          }
          return row[type].length;
        };
      }
    },
    methods: {
      open(queryParam) {
        this.queryParam = queryParam;
        this.visible = true;
        this.getList();
      },
      getList() {
        listByParam(this.queryParam)
          .then((res) => {
            this.workList = res;
          })
          .catch((err) => {
            this.$message.error('获取数据失败');
          });
      },
      //   保存
      saveData(row) {
        // 注意判断时间 是否填写
        if (!row.startTime) {
          this.$message.warning('请选择开始时间');
          return;
        }
        // 判断结束时间大于开始时间
        if (row.endTime) {
          const startTime = dayjs(row.startTime);
          const endTime = dayjs(row.endTime);
          const isEndAfterStart = endTime.isAfter(startTime)
          if (!isEndAfterStart) {
            this.$message.warning('结束时间必须大于开始时间，请重新选择结束时间')
            return;
          }
        }
        const formData = {
          produceStepId: row.stepId, // 工步ID,
          taskId: row.paramId, // 工艺ID
          workOrderId: this.queryParam.workOrderId, // 工单ID
          startTime: row.startTime,
          endTime: row.endTime
        };
        const loading = this.$messageLoading('保存中...');
        addStepWorkTime(formData)
          .then((res) => {
            loading.close();
            if (res) {
              this.$message.success('保存成功');
              this.getList();
            } else {
              this.$message.error('保存失败');
            }
          })
          .catch((e) => {
            loading.close();
            this.$message.error('保存失败');
          });
      },
      showWorkTimeHistoryDialog(row) {
        if (!row.produceStepWorkTimeId) return;
        this.produceStepWorkTimeId = row.produceStepWorkTimeId
        this.stepWorkTimeDialogVisible = true;
      },
      handleClose() {
        this.visible = false;
      },
      close() {
        this.detailsVisible = false;
      },
      stepWorkDialogClose() {
        this.stepWorkTimeDialogVisible = false;
      },
      goDetails(row, type) {
        if (!row[type] || row[type].length === 0) {
          return this.$message.warning('暂无详细数据');
        }
        this.list = row[type];
        this.detailTitle = type === 'toolList' ? '物品清单' : '注意事项';
        this.detailsVisible = true;
      }
    }
  };
</script>