ha-mes-vue/src/views/modules/production/operator.vue

<template>
  <div class="mod-config">
    <el-form :inline="true"  label-position="top" label-width="100px" style="margin-top: -20px;">
      <el-form-item :label="'工厂编码：'">
        <el-input v-model="searchData.site" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'操作员编号：'">
        <el-input v-model="searchData.operatorID" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'操作员名称：'">
        <el-input v-model="searchData.operatorName" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="是否在用：" >
        <el-select v-model="searchData.active" style="width: 120px">
          <el-option label="全部" value=""></el-option>
          <el-option label="在用" value="Y"></el-option>
          <el-option label="不在用" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" " >
      <el-button @click="search()" style="margin-left: 0px;margin-top: 0px" type="primary">查询</el-button>
      <download-excel
        :fields="exportDataStandard"
        :data="tableData"
        type="xlsx"
        :name="exportName"
        :header="exportHeader"
        :footer="exportFooter"
        :defaultValue="exportDefaultValue"
        :fetch="createExportData"
        :before-generate="startDownload"
        :before-finish="finishDownload"
        worksheet="导出信息"
        class="el-button el-button--primary el-button--medium">
        {{'导出'}}
      </download-excel>
      </el-form-item>
    </el-form>
    <el-table
      :height="height"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="site"
        header-align="center"
        align="left"
        min-width="80"
        label="工厂编码">
      </el-table-column>
      <el-table-column
        prop="operatorID"
        header-align="center"
        align="left"
        min-width="70"
        label="操作员编码">
      </el-table-column>
      <el-table-column
        prop="operatorName"
        header-align="center"
        align="left"
        min-width="90"
        label="操作员姓名">
      </el-table-column>
      <el-table-column
        prop="active"
        header-align="center"
        align="left"
        min-width="70"
        label="是否在用">
      </el-table-column>
      <el-table-column
        prop="department"
        header-align="center"
        align="left"
        min-width="100"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="createdDate"
        header-align="center"
        align="left"
        min-width="130"
        label="录入时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="skillMatrix(scope.row)">技能矩阵</a>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="技能矩阵" :close-on-click-modal="false" v-drag :visible.sync="skillFlag" width="800px">
      <div style="font-size: 12px">
        操作员编码：<el-input v-model="operatorData.operatorID" style="width: 120px"></el-input>
        操作员姓名：<el-input v-model="operatorData.operatorName" style="width: 120px"></el-input>
      </div>
      <el-container style="margin-top: -12px;">
        <el-main style="width: 300px">
          <span  style="font-size: 12px" >可选技能：</span>
          <el-table
            height="300px"
            :data="skillList1"
            border
            @row-click="clickSkill1"
            highlight-current-row
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
              prop="workCenterNo"
              header-align="center"
              align="left"
              min-width="110"
              label="加工中心编码">
            </el-table-column>
            <el-table-column
              prop="workCenterDesc"
              header-align="center"
              align="left"
              min-width="170"
              label="加工中心名称">
            </el-table-column>
          </el-table>
        </el-main>
        <el-main style="width: 100px">
          <div style="margin-top: 100px">
            <el-button type="primary" @click="addSkill()">添加>></el-button>
          </div>
          <div style="margin-top: 20px">
            <el-button type="primary" @click="deleteSkill()">删除<<</el-button>
          </div>
        </el-main>
        <el-main style="width: 300px">
          <span  style="font-size: 12px" >已选技能：</span>
          <el-table
            height="300px"
            :data="skillList2"
            border
            @row-click="clickSkill2"
            highlight-current-row
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
              prop="workCenterNo"
              header-align="center"
              align="left"
              min-width="110"
              label="加工中心编码">
            </el-table-column>
            <el-table-column
              prop="workCenterDesc"
              header-align="center"
              align="left"
              min-width="170"
              label="加工中心名称">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <!--      <el-footer  style="height:40px;margin-top: 20px;text-align:center">-->
      <!--        <el-button type="primary" @click="routingModelFlag = false">关闭</el-button>-->
      <!--      </el-footer>-->
    </el-dialog>
  </div>
</template>

<script>
  import {
    getOperatorData,
    getWorkCenterData,
    getWorkCenterOperatorData,
    addSkill,
    deleteSkill
  } from "@/api/production.js"

  export default {
    name: 'searchDailyPlan',
    data () {
      return {
        // 导出 start
        exportData: [],
        exportDataStandard: {
          "工厂编码": "site",
          "操作员编码": "operatorID",
          "操作员姓名": "operatorName",
          "是否在用": "active",
          "部门": "department",
          "录入时间": "createdDate",
        },
        exportName: "操作员列表"+this.getStrDate(),
        exportHeader: ["操作员列表"],
        exportFooter: [],
        exportDefaultValue: "这一行这一列没有数据",
        dataListLoading:false,
        // 导出 end
        height:200,
        tableData:[],
        date1:'',
        searchData:{
          operatorID:'',
          operatorName:'',
          status:'all',
          site:this.$store.state.user.site,
        },
        operatorData:{
          operatorID:'',
          operatorName:'',
          site:'',
        },
        skillFlag:false,
        skillList1:[],
        skillList2:[],
        skillRow1:null,
        skillRow2:null,
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.height = window.innerHeight - 210;
      })
    },
    methods: {
      search(){
        getOperatorData(this.searchData).then(({data}) => {
          this.tableData = data.rows;
        })
      },
      createExportData() {

        return this.tableData;
      },
      startDownload() {
        //  this.exportData = this.dataList

      },
      finishDownload() {

      },
      getStrDate() {
        let dd = new Date();
        let Y = dd.getFullYear();
        let M = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期，不足10补0
        let D = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();//获取当前几号，不足10补0
        let H = dd.getHours() < 10 ? "0" + dd.getHours() : dd.getHours();
        let MM = dd.getMinutes() < 10 ? "0" + dd.getMinutes() : dd.getMinutes();
        let S = dd.getSeconds() < 10 ? "0" + dd.getSeconds() : dd.getSeconds();
        return Y + M + D + H + MM + S;

      },
      clickSkill1(row){
        this.skillRow1 = JSON.parse(JSON.stringify(row));
      },
      clickSkill2(row){
        this.skillRow2 = JSON.parse(JSON.stringify(row));
      },
      skillMatrix(row){
        let inData={
          site:row.site,
          operatorID:row.operatorID,
        }
        this.operatorData.site=row.site;
        this.operatorData.operatorID=row.operatorID;
        this.operatorData.operatorName=row.operatorName;
        getWorkCenterData(inData).then(({data}) => {
          this.skillList1 = data.rows;
        })
        getWorkCenterOperatorData(inData).then(({data}) => {
          this.skillList2 = data.rows;
        })
        this.skillFlag=true;
      },
      addSkill(){
        if(this.skillRow1==null){
          this.$alert("请选择可选加工中心技能！", '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        let inSkillData={
          site:this.operatorData.site,
          operatorID:this.operatorData.operatorID,
          workCenterNo:this.skillRow1.workCenterNo,
          user:this.$store.state.user.name,
        }
        addSkill(inSkillData).then(({data}) => {
          let inData={
            site:this.operatorData.site,
            operatorID:this.operatorData.operatorID,
          }
          getWorkCenterData(inData).then(({data}) => {
            this.skillList1 = data.rows;
          })
          getWorkCenterOperatorData(inData).then(({data}) => {
            this.skillList2 = data.rows;
          })
          this.skillRow1=null;
        })
      },
      deleteSkill(){
        if(this.skillRow2==null){
          this.$alert("请选择已选加工中心技能！", '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        let inSkillData={
          site:this.operatorData.site,
          operatorID:this.operatorData.operatorID,
          workCenterNo:this.skillRow2.workCenterNo,
        }
        deleteSkill(inSkillData).then(({data}) => {
          let inData={
            site:this.operatorData.site,
            operatorID:this.operatorData.operatorID,
          }
          getWorkCenterData(inData).then(({data}) => {
            this.skillList1 = data.rows;
          })
          getWorkCenterOperatorData(inData).then(({data}) => {
            this.skillList2 = data.rows;
          })
          this.skillRow2=null;
        })
      },
    },
    created() {
    }
  }
</script>

<style scoped>

</style>