2021-8-13 重写勾选

97

因为之前的勾选分页了之后只能拿到最近页的选项，所以加了selectobj存选过的对象，然后方法返回就返回这个。

<template>
  <div>
    <a-table
      class="ant-table-striped"
      :rowClassName="
        (record, index) =>
          record.isChild ? 'table-striped' : 'table-notstriped'
      "
      :expandIcon="expandIcon"
      :columns="columns"
      :data-source="list"
      rowKey="id"
      v-custom-loading="LoadingData"
      :pagination="false"
      :row-selection="rowSelection"
      @expand="getDetail"
      :expandedRowKeys="expandedRowKeys"
      :expandIconColumnIndex="1"
      :expandable="{ indentSize: 20 }"
    >
      <template #createTime="{ record }">
        {{ timeFormatter(record.last_time) }}
      </template>
      <template #type="{ record }"> {{ record.type_name }}模型 </template>
      <template #last_transform_status="{ record }">
        {{ Status[record.last_transform_status] }}
      </template>
      <template #operation1="{ record }">
        <a-button
          class="link-btn-in-table"
          type="link"
          @click="getDetail(record)"
          v-if="!record.isChild"
          >选择模型版本<up-outlined
            v-if="record.id === expandedRowKeys[0]"/><down-outlined v-else
        /></a-button>
      </template>
    </a-table>
    <div class="pagination">
      <div
        style="margin-top:5px;margin-right:10px"
        v-if="list.length < pagelength"
      >
        本页所示为未选模型，若无目标模型，请先删除节点资源内已选模型或在其它页查找
      </div>
      <a-pagination
        :current="page"
        :page-size="5"
        :total="total"
        @change="changePage"
      >
      </a-pagination>
    </div>
  </div>
</template>
<script>
import { getSelectModelsList, getDetailModelsList } from '@/requests'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import { PlatformRKNN } from '@/constant/common'
const Status = {
  0: '转换成功'
}
const columnConfig = [
  {
    title: '模型名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
    width: 180,
    indentSize: 30
  },
  {
    title: '模型类型',
    dataIndex: 'type',
    key: 'type',
    slots: { customRender: 'type' },
    width: 120,
    ellipsis: true
  },
  {
    title: '生成时间',
    dataIndex: 'last_time',
    key: 'last_time',
    ellipsis: true,
    width: 180,
    slots: { customRender: 'createTime' }
  },
  {
    title: '最新状态',
    dataIndex: 'last_transform_status',
    key: 'last_transform_status',
    slots: { customRender: 'last_transform_status' },
    width: 120
  },
  {
    title: '模型框架',
    dataIndex: 'framework',
    key: 'framework',
    ellipsis: true,
    width: 120
  },
  {
    title: '选择模型版本',
    key: 'operation1',
    width: 180,
    align: 'left',
    slots: { customRender: 'operation1' }
  }
]
export default {
  props: {
    defaultModel: {
      type: Array,
      default: () => []
    },
    hardWare: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      LoadingData: false,
      expandedRowKeys: [],
      columns: columnConfig,
      list: [],
      page: 1,
      pagelength: 0,
      // selectedRows: [],
      // selectedRowKeys: [],
      // selectRowKeys: [],
      // allfather: [],
      // allson: [],
      // deleteson: '',
      total: 0,
      Status,
      selectedRowKeys: [],
      lastSelection: [],
      selectRowKeys: [],
      allsonsfatherid: [],
      allfatherid: [],
      allsonsid: [],
      defaultSelect: [],
      deleteArray: [],
      count: 0,
      selectObj: []
    }
  },
  computed: {
    rowSelection () {
      return {
        columnTitle: ' ',
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.onChange(selectedRowKeys, selectedRows)
        }
    }
  },
  mounted () {
    this.dealWithDefaultModel()
    this.getList()
  },
  components: {
    DownOutlined,
    UpOutlined
  },
  methods: {
    // getDeleteArray () {
    //   return this.deleteArray
    // },
    expandIcon () {
      return <span style="margin-right:0px"></span>
    },
    dealWithDefaultModel () {
      this.defaultModel.forEach(item => {
        this.defaultSelect.push(item.name)
      })
    },
    getSelectedModels () {
      return this.selectObj.map(item => {
        return {
          name: `${item.name}${this.hardWare === PlatformRKNN ? '.rknn' : '.onnx'}`,
          filename: item.filename
        }
      })
    },
    changePage (page) {
      this.page = page
      this.expandedRowKeys = []
      this.getList()
},
    onChange (selectedRowKeys, selectedRows) {
      // console.log(
      //   'onChange',
      //   `selectedRowKeys: ${selectedRowKeys}`,
      //   'selectedRows: ',
      //   selectedRows
      // )
      let selectRowKeysFather = []
      if (selectedRowKeys.includes(',')) {
        selectRowKeysFather = selectedRowKeys.split(',')
      } else {
        selectRowKeysFather = selectedRowKeys
      }
      const rows = selectedRows.filter(
        item =>
          selectRowKeysFather.includes(item.id) && item.father !== 'father'
      )
      this.selectRowKeys = selectRowKeysFather
      // console.log('selectRowKeysFather', selectRowKeysFather)
      this.selectedRowKeys = []
      // this.selectObj = []
      if (this.lastSelection.length > selectRowKeysFather.length) {
        // console.log('有取消')
        const theDeletedOneId = this.lastSelection.find(
          item => !this.selectRowKeys.includes(item)
        )
        // console.log('theDeletedOneId', theDeletedOneId)
        let theDeletedOne = this.list.find(item => item.id === theDeletedOneId)
        if (theDeletedOne) {
          // console.log('取消的是父')
          this.allfatherid.splice(
            this.allfatherid.findIndex(item => item === theDeletedOneId),
            1
          )
        } else {
          // console.log('取消的是子')
          for (const i in this.list) {
            const findChild = this.list[i].children
            for (const j in findChild) {
              if (findChild[j].id === theDeletedOneId) {
                theDeletedOne = findChild[j]
              }
            }
          }
          // console.log('theDeletedOne', theDeletedOne)
          this.allsonsfatherid.splice(
            this.allsonsfatherid.findIndex(
              item => item === theDeletedOne.father
            ),
            1
          )
          this.allsonsid.splice(
            this.allsonsid.findIndex(item => item === theDeletedOneId),
            1
          )
        }
        this.selectObj.splice(
          this.selectObj.findIndex(item => item.id === theDeletedOneId),
          1
        )
      } else {
        const theNewOne = rows.find(
          item =>
            item.id === selectRowKeysFather[selectRowKeysFather.length - 1]
        )
        this.selectObj.push(theNewOne)
        // console.log('theNewOne', theNewOne)
        if (!theNewOne.isChild) {
          if (this.allsonsfatherid.includes(theNewOne.id)) {
            // console.log('父子重复，删除子')
            const father = this.list.find(father => father.id === theNewOne.id)
            const theOldSon = father.children.find(child =>
              this.allsonsid.includes(child.id)
            )
            this.selectRowKeys.splice(
              this.selectRowKeys.findIndex(item => item === theOldSon.id),
              1
            )
            this.allsonsfatherid.splice(
              this.allsonsfatherid.findIndex(item => item === theNewOne.id),
              1
            )
            this.allsonsid.splice(
              this.allsonsid.findIndex(item => item === theOldSon.id),
              1
            )
            this.selectObj.splice(
              this.selectObj.findIndex(item => item.id === theOldSon.id),
              1
            )
          } else {
            // console.log('正常选父')
          }
          this.allfatherid.push(theNewOne.id)
        } else {
          if (this.allfatherid.includes(theNewOne.father)) {
            // console.log('子父重复，删除父')
            this.selectObj.splice(
              this.selectObj.findIndex(item => item.id === theNewOne.father),
              1
            )
            this.selectRowKeys.splice(
              this.selectRowKeys.findIndex(item => item === theNewOne.father),
              1
            )
            this.allfatherid.splice(
              this.allfatherid.findIndex(item => item === theNewOne.father),
              1
            )
          } else if (this.allsonsfatherid.includes(theNewOne.father)) {
            // console.log('子子重复，删除旧子')
            // const father = this.list.find(
            //   father => father.id === theNewOne.father
            // )
            // const theOldSon = father.children.find(child =>
            //   this.allsonsid.includes(child.id)
            // )
            const theOldSon = rows.find(
              item =>
                item.father === theNewOne.father && item.id !== theNewOne.id
            )
            // console.log('theOldSon', theOldSon)
            this.selectObj.splice(
              this.selectObj.findIndex(item => item.id === theOldSon.id),
              1
            )
            this.selectRowKeys.splice(
              this.selectRowKeys.findIndex(item => item === theOldSon.id),
              1
            )
            this.allsonsid.splice(
              this.allsonsid.findIndex(item => item === theOldSon.id),
              1
            )
            this.allsonsfatherid.splice(
              this.allsonsfatherid.findIndex(item => item === theOldSon.father),
              1
            )
          } else {
            // console.log('正常选子')
          }
          this.allsonsid.push(theNewOne.id)
          this.allsonsfatherid.push(theNewOne.father)
        }
      }
      // console.log(
      //   'this.allfatherid',
      //   this.allfatherid,
      //   'this.allsonsid',
      //   this.allsonsid,
      //   'this.allsonsfatherid',
      //   this.allsonsfatherid
      // )
      this.selectedRowKeys = this.selectRowKeys
      this.lastSelection = this.selectedRowKeys
      // console.log('this.selectedRowKeys', this.selectedRowKeys)
      // console.log('this.selectObj', this.selectObj)
    },
    async getList () {
      this.LoadingData = true
      const { list, total } = await getSelectModelsList({
        page: this.page,
        page_size: 5,
        hardware: this.hardWare
      })
      // console.log('modellist1', list)
      this.LoadingData = false
      this.pagelength = list.length
      this.list = list.filter(
        item =>
          item.last_transform_status === 0 &&
          !this.defaultSelect.includes(item.name)
      )
      this.list.forEach(item => {
        item.isChild = false
        item.filename = item.transform_file.substring(
          item.transform_file.lastIndexOf('matrixvision/'),
          item.transform_file.length
        )
      })

      this.total = total
    },
    async getDetail (row) {
      const u = { ...row }
      const id = u.id
      const name = u.name
      if (this.expandedRowKeys[0] !== u.id) {
        this.expandedRowKeys = []
        this.expandedRowKeys.push(u.id)
        this.LoadingData = true
        const { list: detail } = await getDetailModelsList({
          page: 1,
          per_page: 100,
          name,
          hardware_platform: this.hardWare
        })
        this.LoadingData = false
        const index = this.list.findIndex(item => item.id === id)
        this.list[index].children = detail.filter(
          item => item.last_transform_status === 0
        )
        this.list[index].children.forEach(item => {
          item.isChild = true
          item.father = this.list[index].id
          item.name = name
          item.last_time = item.create_time
          item.filename = item.transform_file.substring(
            item.transform_file.lastIndexOf('matrixvision/'),
            item.transform_file.length
          )
        })
        this.list[index].children[0].father = 'father'
        // this.list[index].children[0].isChild = false
        // this.dealWithDefaultModel()
      } else {
        this.expandedRowKeys = []
      }
    },
    clear () {
      this.selectedRowKeys = []
      this.expandedRowKeys = []
    }
  }
}
</script>
<style>
/* .ant-table-row-expand-icon {
  display: none;
} */
</style>
<style scoped>
/* .ant-table-striped :deep(.table-striped) {
  background-color: #f1b8b8;
}
.ant-table-striped :deep(.table-notstriped){
  background-color: #f1b8b8;
  } */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>