<template>
  <a-card :bordered="false">
    <!-- 表单结构 -->
    <div class="page">
      <a-row>
        <a-col :span="4" class="tree">
          <locationaTree ref="locationaTree" :height="500" @onSelect="onSelect"></locationaTree>
        </a-col>
        <a-col :span="20" class="table">

          <!-- 操作按钮区域 -->
          <div class="table-operator" style="padding-bottom: 15px;">
            <a-button @click="handleAdd" type="primary" icon="plus" style="float: right;">新增</a-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
              <a-button key="1" @click="batchDel"><a-icon type="delete" />删除</a-button>
            </a-dropdown>
          </div>
          <div style="padding-top: 15px;">
            <a-table ref="table" size="middle" :scroll="{ x: 600, y: 500 }" bordered rowKey="id" :columns="columns"
              :dataSource="dataSource" :pagination="ipagination" :loading="loading"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
              @change="handleTableChange">
              <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </a-table>
          </div>
        </a-col>
      </a-row>
    </div>

    <rms-location-modal ref="modalForm" @ok="modalFormOk"></rms-location-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RmsLocationModal from './modules/RmsLocationModal'
import locationaTree from '../components/locationaTree'

export default {
  name: 'RmsLocationList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    RmsLocationModal,
    locationaTree
  },
  data() {
    return {
      description: '存放地表管理页面',
      // 表头
      columns: [
        {
          title: '地址ID',
          align: "center",
          dataIndex: 'id'
        },
        {
          title: '存放地址',
          align: "center",
          dataIndex: 'locationName'
        },
        {
          title: '排序号',
          align: "center",
          dataIndex: 'sortNumber'
        },
        {
          title: '父级存放地址',
          align: "center",
          dataIndex: 'parentLocationId'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/rms/rmsLocation/list",
        delete: "/rms/rmsLocation/delete",
        deleteBatch: "/rms/rmsLocation/deleteBatch",
        exportXlsUrl: "/rms/rmsLocation/exportXls",
        importExcelUrl: "rms/rmsLocation/importExcel",

      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    onSelect(selectedRowKeys) {
      //将其切分为字符串
      selectedRowKeys = selectedRowKeys.join(',')
      console.log(selectedRowKeys)
      this.queryParam.id = selectedRowKeys
      this.loadData()
    },
    modalFormOk() {
      this.$refs.locationaTree.getTreeData()
      // 新增/修改 成功时，重载列表
      this.loadData();
      //清空列表选中
      this.onClearSelected()
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.page {
  height: 600px;

  .tree {
    height: 500px;
  }

  .table {
    height: 500px;
  }
}
</style>