gjerp_ui/src/views/jhzx/components/sygdpc/GxCD.vue

<template>
  <div class="mytable">
    <el-button size="small"  type="primary" @click="getList" >查询</el-button>
    <el-button size="small"  type="success" @click="add" >新增</el-button>
    <el-button size="small"  type="danger" @click="remove" >删除</el-button>
    <el-button size="small"  type="success" @click="saveGxcd" >保存</el-button>
    <vxe-grid
      id="gxId"
      ref="xGridGx"
      border
      resizable
      keep-source
      :align="'center'"
      :height="height"
      :auto-resize="true"
      :columns="gxCDtableColumn"
      highlight-current-row
      :data="gxCDList"
      :custom-config="{storage: true }"
      :edit-config="{
                trigger: 'click',
                mode: 'row',
                showStatus: true,
              }"
      :scroll-x="{enabled: true}"
      :scroll-y="{enabled: true}"
      highlight-hover-row
      show-overflow
      show-header-overflow
    >
    </vxe-grid>
  </div>
</template>

<script>
import {getCdAll,saveGxcd,removeGxcd,getGxDict} from '@/api/jhzx/pc'
export default {
  name:'GxCD',
  props:{
    height:{
      type:Number,
      default:700,
    }
  },
  data(){
    return {
      gxCDList:[],
      gxList:[],
      gxCDtableColumn:[
        { type: 'checkbox', width: 50 },
        {type: 'seq', width: 60, title: '序号'},
        { field: 'gx', title: '工序', width: 150,
          editRender: {  name: '$select', options:[], props: {clearable: true}},
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'cd', title: '间隔周期', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
      ],
    }
  },
  created() {
    getGxDict().then((res)=>{
      res.data.forEach(item=>{
        // this.gxList.push({label:item.name,value:item.code})
        this.gxList.push({label:item.name,value:item.name})
      })
      const xGridGx = this.$refs.xGridGx
      const gx = xGridGx.getColumnByField('gx')
      gx.editRender.options = this.gxList
    })
    this.getList()
  },
  methods:{
    getList(){
      getCdAll().then((res) => {
        this.gxCDList=[]
        this.gxList.forEach(gx=>{
          res.data.forEach(item=>{
            if (gx.value===item.gx){
              this.gxCDList.push(item)
            }
          })
        })

      })
    },
    add(){
      this.$refs.xGridGx.insertAt({},-1)
    },
    remove(){
      this.$refs.xGridGx.removeCheckboxRow()
    },
    async saveGxcd(){
      const {insertRecords, removeRecords, updateRecords} = this.$refs.xGridGx.getRecordset()
      if (insertRecords.length !== 0 ) {
        await saveGxcd(insertRecords).then(res => {
          this.getList()
        })
      }
      if (updateRecords.length !== 0) {
        await saveGxcd(updateRecords).then(res => {
          this.getList()
        })
      }
      if (removeRecords.length !== 0) {
        await removeGxcd(removeRecords).then(res => {
          this.getList()
        })
      }
    }
  }
}
</script>