王震
2023-09-12 49a5757c36d73524c74bc27fcecf486368d80311
src/components/view/standard-table/material.vue
@@ -1,38 +1,39 @@
<template>
    <div class="standard">
      <div>
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="name" border
              @selection-change="handleSelectionChange" default-expand-all
            <el-table :data="tableData" max-height="675" row-key="rowId" border
            @select-all="selectAll" @select="selectTr" ref="multipleTable"
            @selection-change="handleSelectionChange" default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column type="index" width="50" label="序号">
              <el-table-column type="index" width="60" label="序号">
              </el-table-column>
              <el-table-column prop="father" label="工序" sortable width="200px">
                <template slot-scope="scope">
                      <el-tag v-if="scope.row.children" :type="scope.row.children ? 'primary' : 'success'">
                        <div class="firstDiv" :style="{ color: scope.row.children ? '#16a7ff' : '#58c173' }">
                          01
                        </div>
                      </el-tag>
                      <span style="color: black">
                        {{ scope.row.father }}
                      </span>
                  <el-tag v-if="scope.row.father != null" type="primary">01</el-tag>
                  <span style="color: #000000">
                    {{ scope.row.father }}
                  </span>
              </template>
              </el-table-column>
              <el-table-column prop="tanme" sortable label="工艺名称">
                <!-- <template slot-scope="scope">
                          <el-tag v-if="!scope.row.children">
                              <div class="firstDiv" :style="`color: ${scope.row.children? '#16a7ff' : '#58c173'}`">
                                02
                              </div>
                          </el-tag>
                          <span style="color: black">
                            {{ scope.row.tname  }}
                          </span>
                          </template> -->
              <el-table-column prop="tname" sortable label="工艺名称">
                <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.tname != null">02</el-tag>
                  <span style="color: #000000">
                    {{ scope.row.tname  }}
                  </span>
                  </template>
              </el-table-column>
              <el-table-column prop="mname" label="材料名称">
                <template slot-scope="scope">
                  <el-tag type="info" color="#faf2ff" v-if="scope.row.mname != null">
                    <span style="color: #e1affb">03</span>
                  </el-tag>
                  <span>
                    {{scope.row.mname}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="specifications" label="规格">
              </el-table-column>
@@ -49,20 +50,59 @@
    export default {
      data() {
        return {
          hasChildren:true,
          selects: []
        }
      },
      props:['tableData','tableType'],
      created() {
        console.log(this.tableData,this.tableType)
      },
      mounted() {
      },
      created() {},
      mounted() {},
      methods: {
        // 表格树全部选中配置
        // 全选/取消选操作
        selectAll(val) {
          this.isAllSelect = !this.isAllSelect;
          let data = this.tableData;
          this.toggleSelect(data, this.isAllSelect, "all");
        },
        //选择某行
        selectTr(selection, row) {
          this.$set(row, "isChecked", !row.isChecked);
          this.$nextTick(() => {
            this.isAllSelect = row.isChecked;
            this.toggleSelect(row, row.isChecked, "tr");
          });
        },
        //递归子级
        toggleSelect(data, flag, type) {
          if (type === "all") {
            if (data.length > 0) {
              data.forEach((item) => {
                this.toggleSelection(item, flag);
                if (item.children && item.children.length > 0) {
                  this.toggleSelect(item.children, flag, type);
                }
              });
            }
          } else {
            if (data.children && data.children.length > 0) {
              data.children.forEach((item) => {
                item.isChecked = !item.isChecked;
                this.$refs.multipleTable.toggleRowSelection(item, flag);
                this.toggleSelect(item, flag, type);
              });
            }
          }
        },
        handleSelectionChange(val) {
          this.selects = val;
        }
          this.deleteList = [];
          val.forEach((v) => {
            if (v.id !== undefined) {
              this.deleteList.push(v.id);
            }
          });
        },
        // 表格树全部选中配置  结束
      }
    }
  </script>