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>