2021-08-17 小bug

98

思路上的bug，一个是组件关闭时刷新，这个思路要常有。第二个是删除的时候要清空变量。还有一个转换状态，父就筛的话，有的可以的子就选不了，所以用了禁用。

getCheckboxProps: record => ({
          props: { disabled: record.last_transform_status !== 0 }
        })

某个disable版本

<template>
  <div>
    <a-table
      class="ant-table-striped"
      :expandIcon="expandIcon"
      :columns="columns"
      :data-source="list"
      rowKey="id"
      v-custom-loading="LoadingData"
      :pagination="false"
      @expand="getDetail"
      :expandedRowKeys="expandedRowKeys"
      :expandIconColumnIndex="0"
      :expandable="{ indentSize: 10 }"
    >
      <template #name="{ record }">
        {{ record.name }}<br />
        <span style="color:red" v-if="getRemarks(record)"
          >您选过该模型的历史<br />版本，可展开查看</span
        >
      </template>
      <template #checkbox="{ record }">
        <a-checkbox
          @change="changeSelectStatus(record, $event)"
          :disabled="getDisabled(record)"
          :checked="selected.find(item => item.filename === record.filename)"
        ></a-checkbox>
      </template>
      <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 _ from 'lodash'
import { getSelectModelsList, getDetailModelsList } from '@/requests'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import { PlatformRKNN } from '@/constant/common'
const Status = {
  0: '转换成功',
  1: '转换中',
  2: '转换失败'
}
const columnConfig = [
  {
    title: ' ',
    dataIndex: 'checkbox',
    key: 'checkbox',
    width: 60,
    slots: { customRender: 'checkbox' }
  },
  {
    title: '模型名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
    width: 180,
    slots: { customRender: 'name' }
  },
  {
    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,
      total: 0,
      Status,
      selected: []
    }
  },
  mounted () {
    this.dealWithDefaultModel()
    this.getList()
  },
  components: {
    DownOutlined,
    UpOutlined
  },
  methods: {
    getDisabled (record) {
      return record.last_transform_status !== 0 || this.getRemarks(record)
    },
    getRemarks (record) {
      return this.selected.some(
        item =>
          item.name === record.name && // 模型名称相同
          item.filename !== record.filename && // filename不同
          !record.isChild && // 是父
          !this.expandedRowKeys.includes(record.id) // 未展开的父，展开则不提示
      )
    },
    changeSelectStatus (record) {
      const index = this.selected.findIndex(item => item.filename === record.filename)
      if (index !== -1) {
        this.selected.splice(index, 1)
      } else {
        this.list.forEach(itemP => {
          if (itemP.children && itemP.children.find(itemS => itemS.filename === record.filename)) {
            itemP.children.forEach(item => {
              const indexS = this.selected.findIndex(itemS => itemS.filename === item.filename)
              if (indexS !== -1) {
                this.selected.splice(indexS, 1)
              }
            })
          }
        })
        this.selected.push({
          id: record.id,
          filename: record.filename,
          name: record.name
        })
      }
    },
    expandIcon () {
      return <span style="margin-right:0px"></span>
    },
    dealWithDefaultModel () {
      this.selected = _.clone(this.defaultModel)
    },
    getSelectedModels () {
      return this.selected.map(item => {
        return {
          name: item.name,
          filename: item.filename
        }
      })
    },
    changePage (page) {
      this.page = page
      this.expandedRowKeys = []
      this.getList()
    },
    async getList () {
      this.LoadingData = true
      const { list, total } = await getSelectModelsList({
        page: this.page,
        page_size: 5,
        hardware: this.hardWare
      })
      this.LoadingData = false
      this.pagelength = list.length
      this.list = list
      this.list.forEach(item => {
        item.isChild = false
        item.filename = item.transform_file.substring(
          item.transform_file.lastIndexOf('matrixvision/'),
          item.transform_file.length
        )
        item.name = item.name +=
          this.hardWare === PlatformRKNN ? '.rknn' : '.onnx' // 给父的模型名称加后缀
      })

      this.total = total
    },
    async getDetail (row) {
      const u = { ...row }
      const id = u.id
      const name = u.name.substring(0, u.name.lastIndexOf('.')) // 根据未加后缀的模型名称发送请求获取父的所有子
      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
        this.list[index].children.forEach(item => {
          item.isChild = true
          item.father = this.list[index].id
          item.name = u.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'
      } else {
        this.expandedRowKeys = []
      }
    },
    clear () {
      this.expandedRowKeys = []
    }
  }
}
</script>
<style scoped>
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

然后就被mentor秀到了，一个是用了自己的checkbox，第二个是用了好简单的filename就判断完了。第三个就是mentor对代码的完美度要求有点高，需要代码简洁易懂，有注释，就看判断条件那块帮我我改的哎，这么简单的业务代码也要写的好看，就需要很强的逻辑和功力了。
还有就是，自己好菜，mentor各种不信任，难受，甚至要他重新写。