2021-8-4 重写勾选非替换

91

记录一下，之前是选过的就替换之前的，就会遇到分页后第二页选过的就没法选进去的问题。所以就换成，不删除，在选的过程中记录删除过的某几项，点添加的时候对照之前的表，有相同项就删除。

<template>
  <div style="max-height:600px;overflow-y:auto">
    <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">
      <a-pagination
        :current="page"
        :page-size="5"
        :total="total"
        :showTotal="(total, range) => `共${total}条`"
        @change="changePage"
      >
      </a-pagination>
    </div>
  </div>
</template>
<script>
import { getSelectModelsList, getDetailModelsList } from '@/requests'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
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: () => []
    }
  },
  data () {
    return {
      LoadingData: false,
      expandedRowKeys: [],
      columns: columnConfig,
      list: [],
      page: 1,
      // selectedRows: [],
      // selectedRowKeys: [],
      // selectRowKeys: [],
      // allfather: [],
      // allson: [],
      // deleteson: '',
      total: 0,
      Status,
      selectedRowKeys: [],
      lastSelection: [],
      selectRowKeys: [],
      allsonsfatherid: [],
      allfatherid: [],
      allsonsid: [],
      defaultSelect: [],
      deleteArray: [],
      count: 0
    }
  },
  computed: {
    rowSelection () {
      return {
        columnTitle: ' ',
        selectedRowKeys: this.selectedRowKeys,
        getCheckboxProps: record => ({
          defaultChecked: this.defaultSelect.includes(record.id)
        }),
        onChange: (selectedRowKeys, selectedRows) => {
          this.onChange(selectedRowKeys, selectedRows)
        }
        // getCheckboxProps: this.getCheckboxProps()
        // onSelect: (record, selected, selectedRows) => {
        // },
        // selectedRows: this.selectedRows
      }
    }
  },
  mounted () {
    this.getList()
  },
  components: {
    DownOutlined,
    UpOutlined
  },
  methods: {
    getDeleteArray () {
      return this.deleteArray
    },
    expandIcon () {
      return <span style="margin-right:0px"></span>
    },
    dealWithDefaultModel (first) {
      console.log('this.defaultModel', this.defaultModel, 'first', first)
      this.defaultModel.forEach(item => {
        this.defaultSelect.push(item.id)
        if (item.isChild === false) {
          this.allfatherid.push(item.id)
        } else if (item.father !== 'father' && item.isChild === true) {
          this.allsonsfatherid.push(item.father)
          this.allsonsid.push(item.id)
        }
      })

      // if (this.defaultModel.length) {
      //   for (const i in this.defaultModel) {
      //     const defaultfather = this.list.find(
      //       item => item.filename === this.defaultModel[i].filename
      //     )
      //     // console.log('this.list', this.list)
      //     // console.log('defaultfather', defaultfather)
      //     if (defaultfather) {
      //       // console.log('defaultfather&&first')
      //       this.defaultSelect.push(defaultfather.id)
      //       this.allfatherid.push(defaultfather.id)
      //     } else {
      //       console.log('kidss')
      //       for (const x in this.list) {
      //         const childs = this.list[x].children
      //         for (const y in childs) {
      //           console.log('childs[y].filename', childs[y].filename)
      //           if (
      //             childs[y].filename === this.defaultModel[i].filename &&
      //             childs[y].father !== 'father'
      //           ) {
      //             console.log('childs[y]', childs[y].father)
      //             this.defaultSelect.push(childs[y].id)
      //             this.allsonsid.push(childs[y].id)
      //             this.allsonsfatherid.push(childs[y].father)
      //           }
      //         }
      //       }
      //     }
      //   }
      // }
      console.log('this.defaultSelect', this.defaultSelect)
    },
    getSelectedModels () {
      const selected = []
      if (this.selectedRowKeys) {
        this.selectedRowKeys.forEach(model => {
          const selecteditem = this.list.find(item => item.id === model)
          this.list.forEach(item => {
            if (item.children) {
              const selecteditemchild = item.children.find(
                child => child.id === model && child.id !== item.id
              )
              if (selecteditemchild) {
                selected.push(selecteditemchild)
                // const all = selecteditemchild.transform_file
                // if (all) {
                //   const pos = all.lastIndexOf('/') + 1
                //   const filename = all.substring(
                //     pos === -1 ? all.length : pos,
                //     all.length
                //   )
                //   selected.push({
                //     ...selecteditemchild,
                //     filename
                //   })
                // }
                // selected.push({
                //   name: selecteditemchild.name,
                //   filename
                // })
              }
            }
          })
          if (selecteditem) {
            // console.log(selecteditem)
            selected.push(selecteditem)
            // const all = selecteditem.transform_file
            // if (all) {
            //   const pos = all.lastIndexOf('/') + 1
            //   const filename = all.substring(
            //     pos === -1 ? all.length : pos,
            //     all.length
            //   )
            //   selected.push({
            //     ...selecteditem,
            //     filename
            //   })
            // }
          }
        })
      }
      return selected
    },
    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
    //   }
    //   console.log('selectRowKeysFather', selectRowKeysFather)
    //   const rows = selectedRows.filter(
    //     item =>
    //       selectRowKeysFather.includes(item.id) && item.father !== 'father'
    //   )
    //   rows.forEach(item => {
    //     if (!item.father) {
    //       console.log('真爹')
    //       const father = this.list.find(itme => item.id === itme.id)
    //       father.children.forEach(item => {
    //         if (item.father !== 'father') {
    //           item.disable = true
    //           this.disableList.push(item)
    //         }
    //       })
    //     }
    //   })
    //   console.log('rows', rows)
    //   this.selectedRowKeys = selectRowKeysFather
    // },
    // getCheckboxProps () {
    //   console.log('this.disableList', this.disableList)
    //   // console.log('this.disableList', this.disableList)
    //   // if (record) {
    //   return {
    //     props: {
    //       disable: this.disableList.some(item => (item.disable = true))
    //     }
    //   }
    //   // }
    // },
    // onChange (selectedRowKeys, selectedRows) {
    //   console.log(
    //     'onChange',
    //     `selectedRowKeys: ${selectedRowKeys}`,
    //     'selectedRows: ',
    //     selectedRows
    //   )
    //   let selectRowKeysFather = []
    //   if (selectedRowKeys.includes(',')) {
    //     selectRowKeysFather = selectedRowKeys.split(',')
    //   } else {
    //     selectRowKeysFather = selectedRowKeys
    //   }
    //   // const selectRowKeysFather = selectedRowKeys
    //   // selectedRows.forEach(item => selectRowKeysFather.push(item.id))
    //   this.selectRowKeys = selectedRowKeys
    //   this.selectedRowKeys = []
    //   const fathersid = []
    //   const sons = []
    //   const sonsid = []
    //   for (const i in this.selectRowKeys) {
    //     this.list.forEach(item => {
    //       if (
    //         item.id === this.selectRowKeys[i] &&
    //         this.allfather.includes(item.id) === false
    //       ) {
    //         console.log('选爹')
    //         fathersid.push(this.selectRowKeys[i])
    //       } else if (
    //         item.id === this.selectRowKeys[i] &&
    //         this.allfather.includes(item.id) === true
    //       ) {
    //         this.deleteson = this.allson.find(
    //           item => item.father === this.selectRowKeys[i]
    //         )
    //         if (this.deleteson) {
    //           console.log(
    //             '选爹发现与子重复删除子',
    //             'this.allson',
    //             this.allson,
    //             'this.selectRowKeys[i]',
    //             this.selectRowKeys[i],
    //             'this.deleteson',
    //             this.deleteson
    //           )
    //           fathersid.push(this.selectRowKeys[i])
    //         } else {
    //           console.log(
    //             '循环发现原来选过的爹不用管',
    //             'this.selectRowKeys[i]',
    //             this.selectRowKeys[i]
    //           )
    //           fathersid.push(this.selectRowKeys[i])
    //         }
    //       } else if (item.children) {
    //         if (
    //           item.id === this.selectRowKeys[i] &&
    //           this.allfather.includes(item.id) === true &&
    //           this.allsonid.includes(item.id) === true
    //         ) {
    //           console.log('第二种情况选爹发现与子重复删除子', item)
    //           fathersid.push(this.selectRowKeys[i])
    //           this.deleteson = this.allson.find(
    //             item => item.father === this.selectRowKeys[i]
    //           )
    //           console.log(
    //             'this.allson',
    //             this.allson,
    //             'this.selectRowKeys[i]',
    //             this.selectRowKeys[i],
    //             'this.deleteson',
    //             this.deleteson
    //           )
    //         } else {
    //           item.children.forEach(child => {
    //             if (
    //               child.id === this.selectRowKeys[i] &&
    //               this.allfather.includes(child.father) === false &&
    //               fathersid.includes(child.father) === false
    //             ) {
    //               console.log('没问题的选子', sonsid)
    //               sonsid.push(this.selectRowKeys[i])
    //               sons.push(child)
    //             } else if (
    //               child.id === this.selectRowKeys[i] &&
    //               child.father !== 'father' &&
    //               this.allfather.includes(child.father) === true &&
    //               fathersid.includes(child.father) === false
    //             ) {
    //               const last = sonsid.findIndex(item => item.father === child.father)
    //               if (last === -1) {
    //                 console.log('循环子不用管')
    //                 sonsid.push(this.selectRowKeys[i])
    //                 sons.push(child)
    //               } else {
    //                 console.log('与son重复, 替代最早的son', 'last', last)
    //                 sonsid.splice(last, 1, child.id)
    //                 sons.splice(last, 1, child)
    //               }
    //             } else if (
    //               child.id === this.selectRowKeys[i] &&
    //               fathersid.includes(child.father) === true &&
    //               this.allfather.includes(child.father) === false
    //             ) {
    //               console.log('与father重复，删除father')
    //               const last = fathersid.findIndex(
    //                 item => item === child.father
    //               )
    //               console.log('last', last, 'fathersid', fathersid)
    //               fathersid.splice(last, 1)
    //               sonsid.push(this.selectRowKeys[i])
    //               sons.push(child)
    //             }
    //           })
    //         }
    //       }
    //     })
    //   }
    //   this.allfather = []
    //   this.allson = []
    //   this.allsonid = []
    //   if (sonsid.length) {
    //     sons.forEach(item => {
    //       this.allfather.push(item.father)
    //       this.allson.push(item)
    //       // this.allsonid.push(item.id)
    //     })
    //   }
    //   if (fathersid.length) {
    //     // console.log('fathersid.length', fathersid.length)
    //     fathersid.forEach(item => {
    //       this.allfather.push(item)
    //     })
    //   }
    //   this.allson.splice(
    //     this.allson.findIndex(item => item.isChild === false),
    //     1
    //   )
    //   this.allson.forEach(item => this.allsonid.push(item.id))
    //   // console.log('sons', sons, 'fathersid', fathersid)
    //   console.log('this.allfather', this.allfather, 'this.allson', this.allson)
    //   fathersid.forEach(item => this.selectedRowKeys.push(item))
    //   sonsid.forEach(item => this.selectedRowKeys.push(item))
    //   if (this.deleteson) {
    //     this.allson.splice(
    //       this.allson.findIndex(item => item === this.deleteson),
    //       1
    //     )
    //     this.selectedRowKeys.splice(
    //       this.selectedRowKeys.findIndex(item => item === this.deleteson.id),
    //       1
    //     )
    //     this.deleteson = ''
    //   }
    //   console.log('this.selectedRowKeys', this.selectedRowKeys)
    // },
    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 = []
      if (this.defaultModel.length && this.count === 0) {
        console.log('this.countfirsttime', this.count)
        this.lastSelection = this.defaultSelect
      }
      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
          )
        }
        console.log('theDeletedOne', theDeletedOne)
        this.deleteArray.push(theDeletedOne)
        // console.log('this.deleteArray', this.deleteArray)
      } else {
        const theNewOne = rows.find(
          item =>
            item.id === selectRowKeysFather[selectRowKeysFather.length - 1]
        )
        console.log('theNewOne', theNewOne)
        if (theNewOne.isChild === false) {
          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.deleteArray.push(theOldSon)
          } else {
            console.log('正常选父')
          }
          this.allfatherid.push(theNewOne.id)
        } else {
          if (this.allfatherid.includes(theNewOne.father)) {
            console.log('子父重复，删除父')
            console.log(
              'this.selectRowKeys',
              this.selectRowKeys,
              theNewOne.father
            )
            this.selectRowKeys.splice(
              this.selectRowKeys.findIndex(item => item === theNewOne.father),
              1
            )
            if (this.selectRowKeys.includes(theNewOne.father)) {
              this.selectRowKeys.splice(
                this.selectRowKeys.findIndex(item => item === theNewOne.father),
                1
              )
            }
            console.log(
              'this.selectRowKeys',
              this.selectRowKeys,
              theNewOne.father
            )
            this.allfatherid.splice(
              this.allfatherid.findIndex(item => item === theNewOne.father),
              1
            )
            this.deleteArray.push(
              this.list.find(item => item.id === theNewOne.father)
            )
            console.log('删除父没找到父', 'this.deleteArray', this.deleteArray)
          } 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.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
            )
            this.deleteArray.push(theOldSon)
          } else {
            console.log('正常选子')
          }
          this.allsonsid.push(theNewOne.id)
          this.allsonsfatherid.push(theNewOne.father)
        }
        console.log(
          'this.deleteArray',
          this.deleteArray,
          'theNewOne',
          theNewOne
        )
        const deletearray = this.deleteArray.filter(
          item => item.id !== theNewOne.id
        )
        this.deleteArray = deletearray
        //   if (
        //     JSON.stringify(this.deleteArray).indexOf(JSON.stringify(theNewOne))
        //   ) {
        //     console.log('删掉删掉')
        //     this.deleteArray.splice(
        //       this.deleteArray.findIndex(item => item.id === theNewOne.id),
        //       1
        //     )
        //   }
      }
      console.log(
        'this.allfatherid',
        this.allfatherid,
        'this.allsonsid',
        this.allsonsid,
        'this.allsonsfatherid',
        this.allsonsfatherid
      )
      console.log('this.deleteArray删除后的', this.deleteArray)
      this.selectedRowKeys = this.selectRowKeys
      this.count++
      console.log('this.count', this.count)
      this.lastSelection = this.selectedRowKeys
      // console.log('this.selectedRowKeys', this.selectedRowKeys)
    },
    async getList () {
      this.LoadingData = true
      const { list } = await getSelectModelsList({
        page: this.page,
        page_size: 5
      })
      // console.log('modellist1', list)
      this.LoadingData = false
      this.list = list.filter(item => item.last_transform_status === 0)
      this.total = this.list.length
      this.list.forEach(item => {
        item.isChild = false
        item.filename = item.transform_file.substring(
          item.transform_file.lastIndexOf('/') + 1,
          item.transform_file.length
        )
      })
      const first = 1
      this.dealWithDefaultModel(first)
    },
    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
        })
        this.LoadingData = false
        // console.log('detail', detail)
        // console.log('this.list', this.list)
        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('/') + 1,
            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>

然后在用列表界面

addModel () {
      const select = this.$refs.table.getSelectedModels()
      const theDeletes = this.$refs.table.getDeleteArray()
      const theDeleteFilename = []
      theDeletes.forEach(item => theDeleteFilename.push(item.filename))
      select.forEach(model => {
        const exist = this.modelList.some(oModel => {
          return oModel.filename === model.filename
        })
        if (!exist) {
          this.modelList.push(model)
        }
      })
      if (theDeleteFilename.length) {
        const y = this.modelList.filter(
          item =>
            !theDeleteFilename.includes(item.filename) ||
            !theDeleteFilename === item.filename
        )
        this.modelList = y
      }
      this.addModelDialogVisible = false
    },

但是有问题。

之前选了子，不展开的时候改成了选父，就要删掉子，但是因为没有展开就没有拿到所有的子，找不到子id删不掉这个子。

这个问题绕不开。。。