<!-- 基础数据-岗位物料配置 -->
<template>
  <div class="examination postMaterials">
    <div class="common-head-search">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item prop="matClassNo" label="物料类型">
          <el-select
            v-model="search.matClassNo"
            @change="selctMatName"
            clearable
            style="width: 100%"
            filterable
            size="small"
          >
            <el-option
              v-for="item of matClassNameType"
              :key="item.matClassNo"
              :label="item.matClassName"
              :value="item.matClassNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="matNo" label="物料名称">
          <el-select
            v-model="search.matNo"
            clearable
            style="width: 100%"
            filterable
            size="small"
          >
            <el-option
              v-for="item of matNameType"
              :key="item.matNo"
              :label="item.matName"
              :value="item.matNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="search.postNo" clearable  style="width:100%" filterable size="small" >
            <el-option v-for="item of jobType" :key="item.postNo" :label="item.postName"
              :value="item.postNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="goon" size="mini" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" type="info" plain size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-title-div">
      <div class="common-title-name">
        <img style="width: 25px; height: 25px" src='../../../../assets/img/imgScreen/logo.png' />
        岗位物料配置
      </div>
      <div>
      <el-button icon="el-icon-circle-plus-outline" type="goon" size="mini" @click="but_add">新增</el-button>
      <el-button icon="el-icon-edit" type="goon" size="mini" @click="modify">修改</el-button>
      <!-- <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="deleteData">停用</el-button>
      <el-button icon="el-icon-check" type="goon" size="mini" @click="recoverData">启用</el-button> -->
      </div>
    </div>
    <div class="common-table-div" style="margin-bottom:0;margin-top:0">
       <el-table v-loading="dataLoading" ref="dataTable" border :height="height_top" highlight-current-row
       @selection-change="handleSelectionChange" :data="table.list" :icore-filter-flag="icoreFilterFlag"
       @current-change="handleCurrentChange" :header-cell-style="tableHeaderCellStyle" 
       :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary>
        <el-table-column type="index" label="NO" fixed="left" align="center"></el-table-column>
        <el-table-column type="selection" width="45" align="center"></el-table-column>
        <el-table-column sortable min-width="120px" show-overflow-tooltip prop="matName" label="物料名称" align="center"></el-table-column>
        <el-table-column sortable min-width="120px" show-overflow-tooltip prop="postName" label="岗位名称" align="center"></el-table-column>
        <el-table-column sortable width="95px" show-overflow-tooltip prop="matOrder" label="顺序号" align="center"></el-table-column>
        <el-table-column sortable width="95px" show-overflow-tooltip prop="matNo" label="物料编码" align="center"></el-table-column>
        <el-table-column sortable width="95px" show-overflow-tooltip prop="postNo" label="岗位编码" align="center"></el-table-column>
        <!-- <el-table-column sortable min-width="80px" prop="validFlag1" show-overflow-tooltip label="数据状态" align="center"> </el-table-column> -->
        <el-table-column sortable min-width="80px" prop="memo" show-overflow-tooltip label="备注" align="center"> </el-table-column>
        <el-table-column sortable width="135px" show-overflow-tooltip prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column sortable width="80px" show-overflow-tooltip prop="createMan" label="创建人" align="center"></el-table-column>
        <el-table-column sortable width="135px" show-overflow-tooltip prop="updateTime" label="修改时间" align="center"></el-table-column>
        <el-table-column sortable width="80px" show-overflow-tooltip prop="updateMan" label="修改人" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="common-foot-style">
        <el-pagination 
          @size-change="pageSizeChange" 
          @current-change="getDataList()"
          :current-page.sync="page.pageNum" 
          :page-sizes="[10, 20, 50, 100, 200]" 
          :page-size="page.pageSize" 
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalPage" background>
        </el-pagination>
    </div>
    <el-dialog @close="closeDialog('baseData')" :visible.sync="dialogTableVisible" >
        <div slot="title" class="titleBox">
        <i :class="tableType === 0? 'el-icon-document':'el-icon-edit-outline'" style="font-size: 20px"></i>
        <span style="margin-left:10px;font-size:18px">{{tableTypeDsc}}</span>
        </div>
       <el-form ref="baseData" label-width="80px" :rules="ruleValidate" :model="baseData">
         <el-row>
          <el-col :span="12">
            <el-form-item prop="matClassNo" label="物料类型">
              <el-select
                v-model="baseData.matClassNo"
                @change="selctMatName2"
                clearable
                style="width: 100%"
                filterable
                size="small"
              >
                <el-option
                  v-for="item of matClassNameType"
                  :key="item.matClassNo"
                  :label="item.matClassName"
                  :value="item.matClassNo"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="matNo" label="物料名称">
              <el-select
                v-model="baseData.matNo"
                clearable
                style="width: 100%"
                filterable
                size="small"
              >
                <el-option
                  v-for="item of matNameType2"
                  :key="item.matNo"
                  :label="item.matName"
                  :value="item.matNo"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="postNo" label="岗位">
              <el-select v-model="baseData.postNo" clearable style="width:100%" filterable size="small" >
                <el-option v-for="item of jobType"
                  :key="item.postNo" 
                  :label="item.postName"
                  :value="item.postNo">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="matOrder" label="顺序号">
              <el-input v-model="baseData.matOrder" maxlength="4" clearable oninput ="value=value.replace(/[^0-9]/g,'')" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
          <el-col :span="24">
            <el-form-item prop="memo" label="备注">
              <el-input v-model="baseData.memo" clearable size="small"></el-input>
            </el-form-item>
          </el-col>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
        <el-button type="goon" size="mini" icon="el-icon-check" @click="tableType === 0 ? addData('baseData'):modifyData('baseData')">确定</el-button>
        <el-button size="mini" type="goon" icon="el-icon-remove-outline" @click="cancel()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getCookie} from '@/utils/util.js';
import {cookieUserId, cookieUserName} from '@/config/config.js';
let userName = getCookie(cookieUserName);
let userId = getCookie(cookieUserId);
export default {
  data () {
    return {
      table: {
        list: []
      },
      dataLoading: false,
      icoreFilterFlag: true,
      dialogTableVisible:false,
      page: {
        pageSize: 50,
        pageNum: 1,
        totalPage: 0
      },
      tableType:0,
      tableTypeDsc: '新增岗位物料配置',
      showFlag: false,
      Params: {},
      multipleSelection: [],
      search: {
        matClassNo: '',
        matNo: '',
        postNo: ''
      },
      jobType:[], // 岗位列表
      matNameType: [], // 物料名称-查询
      matNameType2: [], // 物料名称-编辑
      matClassNameType: [], // 物料类型-查询
      baseData:{
        id:'',
        postNo:'',
        matNo:'',
        matClassNo:'',
        matOrder:'',
        memo:''
      },
      ruleValidate: {
        matClassNo: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        matNo: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        postNo: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      },
      height_top:0,
      currentData: {} // 选中行数据
    }
  },
  created() {
    this.axios.post('pass/baseManagement/v1/limsbaseposts/queryLimsBasePostList',{}, {individualType: 'json'}).then(res =>{
      this.jobType = res.data
    })
    this.height_top = window.innerHeight - 160;
  },
  mounted () {
    this.getDataList();
    this.addScreen();
    //物料类型
    this.axios.get("pass/baseManagement/v1/limsbasematerialsclasss/?validFlag=1").then((res) => {
      this.matClassNameType = res.data.list;
    });
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
        }
        if (index === 1) {
          sums[index] = data.length;
        } 
      });
      return sums;
    },
    //新增
    addData (formName) {
      let _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          let foorData = new FormData();
          for (let key in _this.baseData) {
              foorData.append(key, _this.baseData[key]);
          }
          _this.axios.post('pass/testManagement/v1/limsbasepostmaterialss/', foorData, {
            headers: {'Content-Type': 'multipart/form-data'}
          }).then(res => {
            if (res.succeed) {
              _this.cancel();
              _this.$message.success('添加成功')
              _this.getDataList();
            } else {
              _this.$message.error(res.message)
            }
          }).catch(e => {
            _this.$message.error(e.message)
          })
        }
      })
    },
    //关闭弹窗
    closeDialog (formName){
      this.$refs[formName].resetFields();
      this.tableType = 0
      this.tableTypeDsc = '新增岗位物料配置'
    },
    //取消
    cancel () {
      let that = this;
      that.dialogTableVisible = false
      that.baseData = {
        id:'',
        postNo:'',
        matNo:'',
        matClassNo:'',
        matOrder:'',
        memo:''
      }
      that.tableType = 0
      that.tableTypeDsc = '新增岗位物料配置'
    },
    //修改弹窗
    modify () {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请勾选您要修改的一条数据！')
        return
      }
      this.tableType = 1
      this.tableTypeDsc = '修改岗位物料配置'
      this.selctMatName2(this.multipleSelection[0].matClassNo);
      this.baseData = Object.assign({},this.multipleSelection[0])
      this.dialogTableVisible = true
    },
    //弹窗修改操作
    modifyData (formName) {
      let that = this;
      that.$refs[formName].validate((valid) => {
      if (valid) {
        that.axios.put('pass/testManagement/v1/limsbasepostmaterialss/', that.baseData).then(res => {
           if (res.succeed) {
            that.cancel();
            that.$message.success('修改成功')
            that.getDataList();
           } else {
            that.$message.error(res.message)
           }
           }).catch(e => {
            that.$message.error(e.message)
          })
        }
      })
    },
    //启用
    recoverData () {
       let _this = this;
        if (_this.multipleSelection.length < 1) {
        this.$message.warning('请勾选您要启用的数据！')
      } else {
        _this.dialogTableVisible = false;
        _this.axios.post('pass/testManagement/v1/limsbasereviserules/recover', _this.multipleSelection, {individualType: 'json'}).then(res => {
        if (res.succeed) {
         this.$message.success('启用成功');
         this.getDataList();
        } else {
         this.$message.error(res.message)
        }
        }).catch(e => {
         this.$message.error(e.message)
       })
      }
    },
    //删除
    deleteData () {
       let _this = this;
        if (_this.multipleSelection.length < 1) {
        this.$message.warning('请勾选您要停用的数据！')
      } else {
        _this.dialogTableVisible = false;
        _this.axios.post('pass/testManagement/v1/limsbasereviserules/abolish', _this.multipleSelection, {individualType: 'json'}).then(res => {
        if (res.succeed) {
         this.$message.success('停用成功');
         this.getDataList();
        } else {
         this.$message.error(res.message)
        }
        }).catch(e => {
         this.$message.error(e.message)
       })
      }
    },
    searchData () {
      this.page.pageNum = 1;
      this.getDataList()
    },
    reset () {
      let _this = this;
      _this.search.matNo = '';
      _this.search.postNo = '';
      _this.searchData();
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    pageSizeChange (size) {
      this.page.pageNum = 1;
      this.page.pageSize = size;
      this.getDataList();
    },
    addScreen () {
      this.$nextTick(() => {
          let ss = document.createElement('div');
          ss.innerHTML = '筛选';
          ss.style = 'text-align: center;'
          this.$refs.dataTable.$el.getElementsByClassName('el-table__fixed')[0].getElementsByTagName('td')[0].appendChild(ss);
       });
    },
    getDataList () {
      let that = this;
      that.dataLoading = true;
      let params = {
        matClassNo:that.search.matClassNo,
        matNo:that.search.matNo,
        postNo:that.search.postNo,
        pageNum:that.page.pageNum,
        pageSize:that.page.pageSize
      }
      let foorData = new FormData();
      for (let key in params) {
          foorData.append(key, params[key]);
      }
      that.axios.post('pass/testManagement/v1/limsbasepostmaterialss/queryListForPage', foorData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
        that.dataLoading = false;
        that.table.list = res.data.list;
        for (let i = 0; i < that.table.list.length; i++) {
          if (that.table.list[i].validFlag === '0') {
            that.table.list[i].validFlag1 = '无效'
          } else if (that.table.list[i].validFlag === '1') {
            that.table.list[i].validFlag1 = '有效'
          }
        }
        that.page.totalPage = res.data.total;
      }).catch(e => {
        that.dataLoading = false;
      });
    },
    tableRowClassName ({row, column, rowIndex, columnIndex}) {
      if (row.validFlag !== '1') {
        return 'error-row';
      }
      return '';
    },
    tableHeaderCellStyle () {
      return 'color: rgb(255,255,255);border-bottom: 1px solid #DCDFE7;'
    },
    // 根据物料类型查询物料 - 查询
    selctMatName(val) {
      this.matNameType = [];
      this.search.matNo = "";
      if (!val) {
        return;
      }
      //物料名称
      this.axios.post("pass/baseManagement/v1/limsbasematerialss/queryLimsBaseMaterialsPage/",
          {
            object: { validFlag: 1, matClassNo: val },
            pageIndex: 1,
            pageSize: 99999,
          },
          { individualType: "json" }
        ).then((res) => {
          this.matNameType = res.data.list;
        });
    },
    // 根据物料类型查询物料 - 编辑
    selctMatName2(val) {
      let that = this;
      that.matNameType = [];
      that.baseData.matNo = "";
      if (!val) {
        return;
      }
      //物料名称
      that.axios.post("pass/baseManagement/v1/limsbasematerialss/queryLimsBaseMaterialsPage/",
          {
            object: { validFlag: 1, matClassNo: val },
            pageIndex: 1,
            pageSize: 99999,
          },
          { individualType: "json" }
        ).then((res) => {
          that.matNameType2 = res.data.list;
        });
    },
    handleCurrentChange (currentRow) {
        let that = this;
        if(currentRow){
          that.currentData = currentRow;
        }
    },
    // 新增按钮，弹窗，带入选中行数据
    but_add () {
      let that = this;
      if (that.currentData && that.currentData.matClassNo) {
        that.selctMatName2(that.currentData.matClassNo);
        for (let key in that.baseData) {
          if (that.currentData[key] || that.currentData[key] === 0) {
              that.baseData[key] = that.currentData[key];
          } else {
              that.baseData[key] = '';
          }
        }
      }
      that.dialogTableVisible = true
    }
  }
}
</script>
<style lang="less">
.postMaterials {
  .common-table-div{
    .el-table .el-table__body tr.error-row {
      background-color: rgb(253, 89, 89) !important;
    }
    .el-table .el-table__body tr.error-row > td{
      background-color: rgb(253, 89, 89) !important;
    }
  }
}
</style>
