jonhon-mes-web/src/views/productionManagement/workReportingManagement.vue

<template>
  <basic-container>
    <!-- 报工管理 -->
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="报工调整" name="workReporting"></el-tab-pane>
      <el-tab-pane label="报工调整记录" name="workReportingLog"></el-tab-pane>
    </el-tabs>

    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left v-if="tabPosition == 'workReporting'">
        <el-form :inline="true" v-model="searchForm">
          <el-form-item>
            <el-input placeholder="请扫描流程卡号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">保存</el-button>
            <el-button type="primary" @click="changeTeam">转班</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #userName="{ row }">
        {{ row.receiveMan.userName }}
      </template>
      <template #cardNo="{ row }">
        {{ row.prWorkOrder.cardNo }}
      </template>
      <template #partCode="{ row }">
        {{ row.prWorkOrder.pjYieldOrder.partCode }}
      </template>
      <template #batchNo="{ row }">
        {{ row.prWorkOrder.batchNo }}
      </template>
      <template #ppsName="{ row }">
        {{ row.procedureSet.ppsName }}
      </template>
      <template #oriMakeTeam="{ row }">
        {{ row.makeTeam.tsName }}
      </template>
      <template #oriReceiveMan="{ row }">
        {{ row.receiveMan.tsName }}
      </template>
      <template #detail="{ row }" v-if="tabPosition == 'workReporting'">
        <el-button type="text" @click="handleDetail(row)">详情</el-button>
      </template>
    </avue-crud>
    <el-dialog append-to-body title="详情" v-model="detailDialog">
      <div style="display: flex; justify-content: flex-end">
        <el-button type="primary">保存</el-button>
      </div>
      <el-table :data="tableData" style="margin-top: 20px">
        <el-table-column label="数量" prop="workQty"></el-table-column>
        <el-table-column label="报工时间" prop="makeTime"></el-table-column>
        <el-table-column label="报工人" prop="worker.userId"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body title="转班" v-model="teamDialog">
      <el-form ref="teamForm" :model="teamForm" :rules="teamRules">
        <el-form-item> 旧班组:{{ data[0].prWorkOrder.makeTeam.tsName }} </el-form-item>
        <el-form-item label="新班组" prop="makeTeam">
          <el-select v-model="teamForm.makeTeam">
            <el-option label="班组一" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="teamDialog = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import wordReporting from "./js/wordReporting";
import workReportingData from "./js/workReportingData";
export default {
  data() {
    return {
      tabPosition: "workReporting",
      loading: false,
      data: [],
      form: {},
      detailDialog: false,
      teamDialog: false,
      teamForm: {},
      teamRules: {
        makeTeam: [{ required: true, message: "请选择新班组", trigger: "blur" }],
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        columnSort: true,
        tip: false,
        height: "auto",
        align: "center",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        column: [],
      },
    };
  },
  mounted() {
    this.option.menu = false;
    this.option.column = wordReporting[this.tabPosition];
  },
  methods: {
    tabPositionChange() {
      this.option.column = wordReporting[this.tabPosition];
      if (this.tabPosition == "workReporting") {
        this.data = workReportingData["data"];
      } else {
        this.data = workReportingData["data"];
      }
      this.page.total = this.data.length;
    },
    handleDetail() {
      this.detailDialog = true;
    },
    changeTeam() {
      this.teamDialog = true;
    },
    submit() {
      this.$refs.teamForm.validate((valid) => {
        if (valid) {
          this.teamDialog = false;
        }
      });
    },
    onLoad() {
      this.data = workReportingData["data"];
      this.page.total = this.data.length;
    },
  },
};
</script>

<style></style>