<!-- 物品基础数据管理 -->
<template>
  <el-container>
    <el-header>
      <div class="all">
        <div class="left">
          <el-row>
            <el-col :span="6">
<!--              <el-input v-model="request.matNo" placeholder="物品号" clearable></el-input>-->
              <el-select v-model="request.txMatNo" filterable clearable collapse-tags
                         placeholder="物品号">
                <el-option
                  v-for="item in matGroup"
                  :key="item.ylMatNo"
                  :label="item.txMatNo"
                  :value="item.txMatNo"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="request.matName" placeholder="物品名称" clearable></el-input>
            </el-col>
            <el-col :span="6">
              <el-select v-model="request.matLevel" placeholder="物品级别" clearable>
                <el-option
                  v-for="item in Level"
                  :key="item.itemCode"
                  :label="item.itemValue"
                  :value="item.itemCode">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="request.matGrd" placeholder="材质" clearable></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-input v-model="request.matSpec" placeholder="规格" clearable></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="request.matVersion" placeholder="型号" clearable></el-input>
            </el-col>
            <el-col :span="6">
              <el-select v-model="request.matCateg" placeholder="物品分类" clearable>
                <el-option
                  v-for="item in wplx"
                  :key="item.itemCode"
                  :label="item.itemValue"
                  :value="item.itemCode">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="request.gzlx" placeholder="购置类型" clearable>
                <el-option
                  v-for="item in GZLX"
                  :key="item.itemCode"
                  :label="item.itemValue"
                  :value="item.itemCode">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <el-row>
            <el-col>
              <el-button type="success" @click="toolbarButtonClickEvent('mySave')">保存</el-button>
              <el-button type="success" @click="toolbarButtonClickEvent('myInsert')">新增</el-button>
              <el-button type="primary" @click="initList">查询</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-header>
    <el-main>
      <vxe-grid
        id="id"
        ref="xGrid"
        keep-source
        border
        resizable
        highlight-current-row
        show-header-overflow
        show-overflow
        show-footer
        align="center"
        header-align="center"
        size="mini"
        class="xGrid"
        :columns="tableColumn"
        :height="height"
        :data="tableData"
        :edit-config="{trigger: 'click', mode: 'row',showStatus:true}"
      />
    </el-main>
  </el-container>
</template>
<script>
import { mapGetters } from 'vuex'
import{list,add,update} from '@/api/tx/base'
import {getByCode} from "@/api/sy/xtgl";
import { getWBase } from '@/api/gj/base'
import {getMatGroup} from "@/api/tx/materia";
export default {
  name:'Wpjcsjgl',
  data(){
    return{
      defaultHeight: { height: '' },
      height:'',
      tableData: [],
      wplx:[],
      GZLX:[],
      Level:[],
      matGroup:[],
      request:{
        txMatNo: '',
        matNo:'',
        matName:'',
        matLevel:'',
        matGrd:'',
        matSpec:'',
        matVersion:'',
        matCateg:'',
        gzlx:'',
        txFlag:1
      },
      tableColumn:[
        { field: 'matNo', title: '物品号', width: 120, editRender: { name: 'input' }},
        { field: 'matName', title: '物品名称', width:120, editRender: { name: 'input' }},
        { field: 'matSpec', title: '规格', width: 120, editRender: { name: 'input' }},
        { field: 'matVersion', title: '型号/标准号', width:120, editRender: { name: 'input' }},
        { field: 'matGrd', title: '材质', width: 120, editRender: { name: 'input' }},
        { field: 't1', title: 'T1', width:120},
        { field: 't2', title: 'T2', width: 120},
        { field: 'b1', title: 'B1', width:120},
        { field: 'b2', title: 'B2', width: 120},
        { field: 'l', title: 'L', width:120},
        { field: 'matLevel', title: '物品级别', width: 120, editRender: { name: '$select', options: [], props: { clearable: true ,}, events: { change: this.selectChange }}},
        { field: 'matCateg', title: '物品分类', width: 120, editRender: { name: '$select', options: [], props: { clearable: true ,}, events: { change: this.selectChange }},
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'gzlx', title: '购制类型', width: 120,formatter:['dictFormat','GZLX']},
        { field: 'useType', title: '使用方式', width:120},
        { field: 'hsUnit', title: '计量单位', width: 120},
        { field: '', title: '第二单位', width:120},
        { field: '', title: '单位换算系数', width: 120},
        { field: '', title: '损耗备用系数', width:120},
        { field: '', title: '提醒天数', width: 120},
        { field: 'areaFormula', title: '面积公式', width:120},
        { field: 'matArea', title: '面积', width: 120},
        { field: 'matArea1', title: '面积2', width:120},
        { field: 'volumeFormula', title: '体积公式', width: 120},
        { field: 'density', title: '密度', width:120},
        { field: '', title: '重量1', width: 120},
        { field: '', title: '重量2', width:120},
        { field: '', title: '度数', width: 120},
        { field: '', title: '定额工时', width:120},
        { field: '', title: '焊丝编码', width: 120},
        { field: 'fixedWire', title: '定额焊丝(Kg)', width:120},
        { field: 'weldngNum', title: '焊点数量', width: 120},
        { field: 'grooveNum', title: '坡口数量', width:120},
        { field: 'turnNum', title: '翻边数量', width: 120},
        { field: 'itemBm', title: '客户材料编码', width:120},
        { field: 'institutionCode', title: '仓库', width: 120},
        { field: 'safekc', title: '库存下限', width:120},
        { field: 'maxkc', title: '库存上限', width: 120},
        { field: 'abcCateg', title: 'ABC分类', width: 120},
        { field: 'gylb', title: '工艺类别', width:120},
        { field: 'craftIdentifyNo', title: '工艺识别号', width: 120},
        { field: 'usertypeStatus', title: '用户分类码', width:120},
        { field: '', title: '标准对照', width: 120},
        { field: '', title: '涂装说明', width:120},
        { field: 'useStatus', title: '使用状态', width: 120},
        { field: '', title: '助记码', width:120},
        { field: 'remark', title: '备注', width: 120},
        { field: '', title: '基础数据修改人', width:120},
        { field: '', title: '基础数据修改日期', width: 120},
        { field: '', title: '仓库计量单位', width:120},
        { field: '', title: '仓库辅助计量单位', width: 120},
      ],
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bmbm'
    ])
  },
  created(){
    window.addEventListener('resize', this.getHeight)
    this.getHeight();
    this.initType();
    this.initBase()
    this.initGZLX()
    this.loadMatGroup();
  },
  methods: {
    loadMatGroup(){
      getMatGroup().then(res=>{
        this.matGroup=res.data
      })
    },
    initType(){
      getByCode({dictCode:'WPLX'}).then(res => {
        this.wplx = res.data
        const xGrid = this.$refs.xGrid
        const ddepartTypedText = xGrid.getColumnByField('matCateg')
        const testList = []
        for (let i = 0; i < this.wplx.length; i++) {
          const temp = { label: this.wplx[i].itemValue, value: this.wplx[i].itemCode }
          testList.push(temp)
        }
        ddepartTypedText.editRender.options = testList
      })
    },
    initBase(){
      getByCode({dictCode:'WPJB'}).then(res => {
        this.Level = res.data
        const xGrid = this.$refs.xGrid
        const ddepartTypedText = xGrid.getColumnByField('matLevel')
        const testList = []
        for (let i = 0; i < this.Level.length; i++) {
          const temp = { label: this.Level[i].itemValue, value: this.Level[i].itemCode }
          testList.push(temp)
        }
        ddepartTypedText.editRender.options = testList
      })
    },
    initGZLX(){
      getWBase({}).then(res=>{
        this.GZLX=res.data.gzlx;
        const xGrid = this.$refs.xGrid
        const gzlx = xGrid.getColumnByField('gzlx');
        gzlx.editRender.options = this.GZLX
      })
    },
    GZLX({ cellValue }) {
      return getBMBM(cellValue, this.GZLX,'itemCode','itemValue');
    },
    getHeight() {
      this.height = window.innerHeight - 185
      this.defaultHeight.height = window.innerHeight - 185 + 'px'
    },
    add(){

    },
    //查询
    initList() {
      list(this.request).then(res => {
        this.tableData = res.data
      })
    },
    toolbarButtonClickEvent(code) {
      const { insertRecords, updateRecords } = this.$refs.xGrid.getRecordset()
      switch (code) {
        case 'myInsert':

          this.$refs.xGrid.insertAt({
            dictCode: 'CPLX'
          }, -1)
          break
        case 'mySave':

          if (insertRecords.length !== 0) {
            for (let i=0;i<insertRecords.length;i++){
              if(!insertRecords[i].matNo || !insertRecords[i].matSpec || !insertRecords[i].matVersion || !insertRecords[i].matGrd){
                this.$message.warning('物品号、规格、型号、材质不能为空!')
                return;
              }
              insertRecords[i].txFlag=1;
              insertRecords[i].ylMatNo=insertRecords[i].matNo;
            }
            add(insertRecords).then(response => {
              this.tableData = response.data
              this.loadData();
            })
          }
          if (updateRecords.length !== 0) {
            for(let i=0;i<updateRecords.length;i++){
              if(!updateRecords[i].matNo || !updateRecords[i].matSpec || !updateRecords[i].matVersion || !updateRecords[i].matGrd){
                this.$message.warning('物品号、规格、型号、材质不能为空!')
                return;
              }
            }
            update(updateRecords).then(response => {
              if (response.success) {
                this.loadData();
                this.$message({ message: '保存成功！', type: 'success' })
              }
            })
          }
          this.$message(`新增 ${insertRecords.length} 条，更新 ${updateRecords.length} 条`);
          break

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select,.el-input{width: 95%;}
.el-row{margin-top: 1%;}
.left{float: left;width: 50%;}
.right{width: 50%;float: left;}
.right button{float: right;width: 55px;margin-left: 1%;}
</style>
