无题

npcp系统开发

vue2 + EUI2.x

ruoyi框架

学到的东西

1.vue结合原生JS绑定事件可以按照下面这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
renderContent(h, node) {
  if (node.data.imgurl != "") {
    return (
      <div>
        <div><i class="el-icon-delete" onClick={(event)=>{
          //先阻止冒泡
          event.stopPropagation()
          this.handleDelete(node)
        }}></i></div>
        <el-link href={node.data.imgurl} target="_blank">
          <img src={node.data.imgurl} width="80" height="60"/>
        </el-link>
        <div style="font-size:12px;"><span>{node.data.label}</span></div>
      </div>
    )
  } else {
    return (
      <div>
        <div style="font-size:30px;width:80px;height:60px;"><i className="el-icon-picture-outline"></i></div>
        <div style="font-size:12px;"><span>{node.data.label}</span></div>
      </div>
    )
  }
},

在上述写法中，onClikc事件被写成了一个对象

onclick = {()=>{ 函数体内容 }}，这里还有一个细节，为了防止事件冒泡，先阻止了事件冒泡，随后在执行删除逻辑。实际如遇到可以按照这样去在vue中绑定原生事件。

目前搭建bom中存在的问题

  1. 原件在被冻结之前可以进行修改(包括删除)
  2. 某原件被其他零件借用，该原件(对于其他零件来说被称为借用件)可以删除。

在项目中我干了什么？

修改表格展示

爆炸图展示

表格渲染

今天在渲染表格时，遇到的问题是，明明函数写的都是scope.row针对单行的，结果一渲染就是全部表格都有数据，究其原因，原来是我们每次更新表格的数据都更新的是整个数据源，而为了实现针对单行数据更新，这里我们用到了只更新单行数据这样的方式。

之前会全部渲染是因为在原始代码中，我们直接修改了整个表格的数据源。让我解释一下区别：

原来的逻辑：

1
2
3
4
5
6
// 之前的代码
async fetchTestTypes(row) {
  const response = await getTestTypes(params);
  this.currentTestTypes = response.rows[0].list;  // 更新了全局的测试类型列表
  // 所有行都会使用这个全局的测试类型列表进行渲染
}

现在的逻辑：

1
2
3
4
5
async fetchTestTypes(row) {
  const response = await getTestTypes(params);
  row.list = response.rows[0].list;  // 只更新当前行的数据
  // 每行都有自己独立的list数据
}

区别在于：

  1. 之前：所有行共享同一个测试类型列表（currentTestTypes），导致只要有一行选择了选项，所有行都会尝试渲染数据
  2. 现在：每行都有自己独立的 list 数据，只有当前行选择了选项才会获取和显示数据

这就像是：

  • 之前是在教室里用大喇叭广播（所有人都听到）
  • 现在是给每个学生发一张纸条（只有特定的人收到信息）

这就是为什么之前会全部渲染，而现在只渲染选择了选项的行。

单元格合并

相同表头单元格合并

1
2
3
4
5
6
7
8
9
10
11
12
// 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
        //这里是只针对第一级的，如果想要合并其他的比如对2级进行合并，还需在灵活变动
      if (row[0].level === 1) {
        // 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        row[0].colSpan = 0
        row[1].colSpan = 2
        if (columnIndex === 0) {
          return { display: 'none' }
        }
      }
    },

相同数据单元格合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
mergeSub({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        // 这里的entryEntity是表格里的数据
        const preRow = this.entryEntity[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : null
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.entryEntity.length; i++) {
            const nextRow = this.entryEntity[i]
            const nextValue = nextRow[column.property]
            if (nextValue === currentValue) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 }
        }
      }
    },

最终效果：

img