/**
* @Description:  物料对照表
* @author xioln
* @date 2023-08-30
* @FilePath: applications/dee-mes/src/privateComponents/components/MaterialReferenceLinkTable/index.vue
*/
<template>
  <div class="materialReferenceLink-table">
    <dee-form
      :form="searchForm"
      :form-data="searchFormData"
      :form-buttons="formButtons"
      :form-btn-position="'center'"
      @on-submit="initData(searchForm)"
    />
    <dee-up-table
      :columns="tableColumns"
      :data="tableData"
      :index-row="{ title: '序号', width: '60', align: 'center', fixed: true }"
      selection-row
      :pagination="pagination"
      @pagination-size-change="changePageSize"
      @pagination-current-change="changePageNum"
      @selection-change="selectionChange"
    >
      <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
    </dee-up-table>
    <dee-dialog width="70%" title="新增" :visible.sync="addDialogVisible" @on-cancel="addCancel">
      <add-form ref="addForm" @cancel="addCancel" />
    </dee-dialog>
  </div>
</template>
<script>
import AddForm from './components/addForm'

export default {
  name: 'MaterialReferenceLinkTable', // name写在组件的最前方,自定义组件为必填
  componentName: '物料对照表',
  components: { AddForm },
  data() {
    return {
      addDialogVisible: false,
      tableColumns: [
        { title: '操作', key: 'operate', align: 'center', hideTip: true, component: {
          show: true,
          name: 'EditTableRow',
          props: {
            btns: [
              {
                operation: '编辑',
                handleClick: (row, index) => {
                  this.addDialogVisible = true
                  this.$nextTick(() => {
                    this.$refs.addForm.editData(row)
                  })
                },
                icon: '/icons/c-edit.png',
                showFun: (row) => {
                  return !row.isEdit
                }
              }
            ]
          }
        }, width: 100 },
        {
          title: '物料A', children: [
            { title: '物料', key: 'source.resType2.typeName', align: 'center' },
            { title: '物料编码', key: 'source.resCode', align: 'center' },
            { title: '物料名称', key: 'source.resName', align: 'center' },
            { title: '牌号/型号/件号', width: '120', key: 'source.modelNo', align: 'center' },
            { title: '技术条件', key: 'source.techSpec', align: 'center' },
            { title: '规格', key: 'source.spec', align: 'center' },
            { title: '供应状态', key: 'source.supplyStatus', align: 'center' }
          ]
        },
        {
          title: '物料B', children: [
            { title: '物料', key: 'target.resType2.typeName', align: 'center' },
            { title: '物料编码', key: 'target.resCode', align: 'center' },
            { title: '物料名称', key: 'target.resName', align: 'center' },
            { title: '牌号/型号/件号', width: '120', key: 'target.modelNo', align: 'center' },
            { title: '技术条件', key: 'target.techSpec', align: 'center' },
            { title: '规格', key: 'target.spec', align: 'center' },
            { title: '供应状态', key: 'target.supplyStatus', align: 'center' }
          ]
        }],
      tableData: [],
      tools: [
        {
          name: '新增',
          icon: '/icons/c-add.png',
          handler: {
            click: () => {
              this.addDialogVisible = true
            }
          }
        },
        {
          name: '删除',
          icon: '/icons/c-delete.png',
          handler: {
            click: () => {
              console.log('this.selectionRow', this.selectionRow)
              const delData = this.selectionRow.map(item => item.id).join(',')
              this.$utils.showConfirm(
                '你是否确定删除选中的数据吗?',
                '提示',
                'warning',
                '确定',
                '取消',
                () => {
                  this.$api.batchDelete('MaterialReferenceLink', delData).then(res => {
                    this.$utils.showMessageSuccess('删除成功')
                    this.initData(this.searchForm)
                  })
                }
              )
            }
          }
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 20, 50]
      },
      selectionRow: [],
      formButtons: [
        {
          'text': '查询',
          'type': 'submit',
          'component': {
            'type': 'primary'
          }
        }
      ],
      searchForm: {
        rescodeA: '',
        rescodeB: ''
      },
      searchFormData: [{
        split: 3,
        data: [
          {
            key: 'rescodeA',
            title: '物料A编码',
            component: {
              name: 'el-input'
            }
          },
          {
            key: 'rescodeB',
            title: '物料B编码',
            component: {
              name: 'el-input'
            }
          }
        ]
      }]
    }
  },
  computed: {},
  created() {
    // 初始化数据
    this.initData()
  },
  methods: {
    initData(searchForm) {
      // 初始化数据
      const params = {
        'pageFrom': this.pagination.currentPage,
        'pageSize': this.pagination.pageSize,
        'searchItems': {
          'children': [],
          'items': []
        }
      }
      if (searchForm && searchForm.rescodeA) {
        params.searchItems.children = [
          {
            'items': [
              {
                'fieldName': 'source.resCode',
                'operator': 'LIKE',
                'value': searchForm.rescodeA
              }
            ],
            'operator': 'OR'
          }
        ]
      }
      if (searchForm && searchForm.rescodeB) {
        params.searchItems.children = [
          {
            'items': [
              {
                'fieldName': 'target.resCode',
                'operator': 'LIKE',
                'value': searchForm.rescodeB
              }
            ],
            'operator': 'OR'
          }
        ]
      }
      params.openProps = [{ name: 'target' }, { name: 'source' }]
      this.$api.searchApi('MaterialReferenceLink', params).then(res => {
        if (res.items && res.items.content) {
          this.tableData = res.items.content
          this.pagination.total = res.items.totalElements
        }
      })
    },
    selectionChange(v) {
      this.selectionRow = v
    },
    changePageSize(pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.currentPage = 1
      this.initData()
    },
    changePageNum(pageNum) {
      this.pagination.currentPage = pageNum
      this.initData()
    },
    addCancel(pageNum) {
      this.addDialogVisible = false
    }
  }
}
</script>
<style lang='scss'>
.materialReferenceLink-table {
  .dee-up-table {
    height: 500px;
  }
}
</style>