<template>
  <div ref="invalidList" class="summary-archive-content">
    <!--    <div class="summary-archive-content-card" :style="{ height: chartHeight }">-->
    <!-- 查询、导出 -->
    <a-card>
      <div class="fmeaTable-from">
        <a-form layout="vertical">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
              <a-form-item :label="$t('summary-Archive.inspection-table.equipment-machine-name')">
                <!-- 勾选模式选择 -->
                <span class="radio-group-class" >
                  <a-radio-group @change="radioChange" :default-value="1" size="small">
                    <a-radio :value="2" class="level-radio">
                      <a-tooltip>
                        <template slot="title">
                          {{ $t('summary-archive.fmea-table.same-level-check') }}
                        </template>
                        {{ $t('summary-archive.fmea-table.same-level-check') }}
                      </a-tooltip>
                    </a-radio>
                    <a-radio :value="3" class="level-radio">
                      <a-tooltip>
                        <template slot="title">
                          {{ $t('summary-archive.fmea-table.check-with-same-superior') }}
                        </template>
                        {{ $t('summary-archive.fmea-table.check-with-same-superior') }}
                      </a-tooltip>
                    </a-radio>
                    <a-radio :value="1" class="level-radio">
                      <a-tooltip>
                        <template slot="title">
                          {{ $t('summary-archive.fmea-table.unlimited') }}
                        </template>
                        {{ $t('summary-archive.fmea-table.unlimited') }}
                      </a-tooltip>
                    </a-radio>
                  </a-radio-group>
                </span>
                <a-tree-select ref="leftTree" v-model="searchParams.struId" treeCheckable treeCheckStrictly
                               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :placeholder="$t('summary-Archive.inspection-table.please-select-equipment-machine-name')
                    " allow-clear show-search :showArrow="true" tree-default-expand-all :replaceFields="replaceFields"
                               :maxTagCount="3" :filterTreeNode="filterTreeNode" :tree-data="treeData" @select="selectBtn" @change="treeSelectChange">
                  <template #title="{ value: val, title }">
                    <template>{{ title }}</template>
                  </template>
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
              <a-form-item :label="$t('summary-Archive.inspection-table.inspection-items')">
                <a-input v-model="searchParams.measureName" allowClear :placeholder="$t('summary-Archive.inspection-table.please-input-inspection-items')">
                </a-input>
              </a-form-item>
            </a-col>
            <span v-show="advanceExpand">
              <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                <a-form-item :label="$t('summary-Archive.inspection-table.maintenance-cycle')">
                <a-range-picker v-model="searchParams.maintenanceCycle" style='width:100%' allowClear
                @change='(date, dateString)=>{
                searchParams.startTime = dateString[0] || undefined;
                searchParams.endTime = dateString[1] || undefined;
              }'>
                </a-range-picker>
              </a-form-item>
              </a-col>
              <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                <a-form-item :label="$t('summary-Archive.inspection-table.maintenance-methods')">
                <a-input v-model="searchParams.maintenanceMethods" allowClear :placeholder="$t('summary-Archive.inspection-table.please-input-maintenance-methods')">
                </a-input>
              </a-form-item>
              </a-col>
              <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                <a-form-item :label="$t('summary-Archive.inspection-table.acceptance-criteria')">
                <a-input v-model="searchParams.acceptanceCriteria" allowClear :placeholder="$t('summary-Archive.inspection-table.please-input-acceptance-criteria')">
                </a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                <a-form-item :label="$t('summary-Archive.inspection-table.maintenance-frequency')">
                <a-select @change="frequencyChange" allowClear :value="searchParams.maintenanceFrequency" :placeholder="$t('functional-analysis.property-modal.please-select-maintenance-frequency')">
                    <a-select-option
                        v-for="(item, index) in maintenanceFrequencyDict"
                        :key="index"
                        :value="item.key">
                      {{ item.value }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </span>
            <a-col :xl="advanceExpand ? 24 : 8" :lg="advanceExpand ? 24 : 8" :md="24" :sm="24" :xs="24">
              <a-form-item class="tr" :label="'\xa0'">
                <a @click="toggleAdvance">
                  {{
                    advanceExpand ? $t("global.collapse") : $t("global.expand")
                  }}
                  <a-icon :type="advanceExpand ? 'up' : 'down'" />
                </a>
                <a-button class="ml-2" @click="reset" type="primary">
                  {{ $t("global-btn.reset") }}
                </a-button>
                <a-button class="ml-2" @click="search" type="primary">
                  {{ $t("global-btn.search") }}
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <!-- 表格 -->
    <a-card style="border-radius:10px 10px 0px 0px">
      <template slot="extra">
        <a-row class='tr'>
          <a-button type="primary" @click="excelExport">
            {{ $t("global-btn.export") }}
          </a-button>
        </a-row>
      </template>
      <div :style="{ height: chartHeight }">
        <a-table ref="tableRef" :key="tableKey" :data-source="tableData" :columns="tableColumns"
                 :rowKey="(row, index) => { return index; }" bordered size="small" :loading="tableLoading"
                 @change="tableChange" :pagination="pagination" :scroll="{ x: tableWidth, y: tableHeightValue }"
                 :components='components'>
          <!-- 序号 -->
          <template slot="index" slot-scope="text, record, index">
            <span :title="text"> {{ (pagination.current - 1) * pagination.pageSize + index + 1 }} </span>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
  <!--  </div>-->
</template>

<script>

import { arrayToTree } from "@/utils/tree";
import VueDraggableResizable from "vue-draggable-resizable";

export default {
  name: "InspectionTable",
  components: {
    VueDraggableResizable
  },
  data() {
    //表格拖拽
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props;
          // 此处的this.columns 是定义的table的表头属性变量
          const col = this.tableColumns.find((col) => {
            const k = col.dataIndex || col.key;
            return k === key;
          });
          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children]);
          }
          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 35);
              }
            }
          };
          const drag = h('vue-draggable-resizable', { ...dragProps });
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
        }
      }
    };
    return {
      advanceExpand: false,
      // 表格总宽度
      tableWidth: 0,
      //表格各列宽度总和
      columnsWidth: 0,
      // 当前选中的层级
      deepCurrent: '',
      // 同级勾选是否启动
      checkIdShow: false,
      // 同父级勾选是否启动
      sameSuperCheckFlag: false,
      // 判断是勾选还是删除
      checkedEvent: false,
      // 完全受控数据
      currentChecked: [],
      // 节点下拉选原始数据
      struNodeList: [],
      // 当前选中节点的父节点
      currentPid: '',
      /** 统计每一个struId重复了多少次 用来做单元格合并显示 */
      structIdCountMap: {},
      /** 统计每一个functionId重复了多少次 用来做单元格合并显示 */
      functionIdCountMap: {},
      /** 统计每一个reqId重复了多少次 用来做单元格合并显示 */
      reqIdCountMap: {},
      /** 表格数据 */
      tableData: [],
      /** 表格高度 */
      tableHeightValue: window.innerHeight - 370,
      /** 表格列头 */
      tableColumns: [
        {
          title: this.$t("summary-Archive.function-list.serial-number"),
          width: 100,
          align: "center",
          key: "serialNumber",
          dataIndex: "serialNumber",
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0;
            return obj;
          },
        },
        // 机器/设备编号
        {
          title: this.$t("summary-Archive.inspection-table.machine-equipment-number"),
          width: 100,
          align: "center",
          key: "struPartNo",
          dataIndex: "struPartNo",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0;
            return obj;
          },
        },
        // 机台/设备名称
        {
          title: this.$t("summary-Archive.inspection-table.machine-equipment-name"),
          width: 200,
          align: "center",
          key: "struName",
          dataIndex: "struName",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0
            return obj;
          }
        },
        // 检查项目
        {
          title: this.$t("summary-Archive.inspection-table.inspection-items"),
          width: 200,
          align: "center",
          key: "measureName",
          dataIndex: "measureName",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0
            return obj;
          }
        },
        // 维护周期
        {
          title: this.$t("summary-Archive.inspection-table.maintenance-cycle"),
          width: 200,
          align: "center",
          key: "maintenanceCycle",
          dataIndex: "maintenanceCycle",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0
            return obj;
          }
        },
        // 维护方法
        {
          title: this.$t("summary-Archive.inspection-table.maintenance-methods"),
          width: 200,
          align: "center",
          key: "maintenanceMethods",
          dataIndex: "maintenanceMethods",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0
            return obj;
          }
        },
        // 接收准则
        {
          title: this.$t("summary-Archive.inspection-table.acceptance-criteria"),
          width: 200,
          align: "center",
          key: "acceptanceCriteria",
          dataIndex: "acceptanceCriteria",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0
            return obj;
          }
        },
        // 维护频度
        {
          title: this.$t("summary-Archive.inspection-table.maintenance-frequency"),
          width: 200,
          align: "center",
          key: "maintenanceFrequency",
          dataIndex: "maintenanceFrequency",
          ellipsis: true,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = row.mergeFlag ? 2 : 0
            return obj;
          }
        },
      ],
      // 维护频度字典(暂时写死 等待后期确认)
      maintenanceFrequencyDict: [
        {
          key: "1",
          value: this.$t('functional-analysis.property-modal.maintenance-once-a-day')
        },
        {
          key: "2",
          value: this.$t('functional-analysis.property-modal.maintenance-twice-a-day')
        },
        {
          key: "3",
          value: this.$t('functional-analysis.property-modal.maintenance-twice-a-week')
        },
        {
          key: "4",
          value: this.$t('functional-analysis.property-modal.maintenance-twice-a-month')
        }
      ],
      /** 表格分页 */
      pagination: {
        // 当前页数
        current: 1,
        // 每页条数
        pageSize: 10,
        // 用于显示数据总量和当前数据顺序
        showTotal: total => this.$t("global-constant.table.show-total", [total]),
        // 是否可以改变 pageSize
        showSizeChanger: true,
        // 指定每页可以显示多少条
        pageSizeOptions: ["10", "20", "50", "100", "200"],
        // pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
        // 总条数
        total: 0
      },
      /** 表格Loading */
      tableLoading: false,
      /** 树数据 */
      treeData: [],
      /** 替换 treeNode 中 title,key,children,value 字段为 treeData 中对应的字段 */
      replaceFields: {
        children: "children",
        label: "name",
        key: "id",
        value: "id"
      },
      /** 检索条件 */
      searchParams: {
        struId: undefined,
        maintenanceCycle: undefined,
        maintenanceMethods: undefined,
        acceptanceCriteria: undefined,
        maintenanceFrequency: undefined,
        measureName: undefined,
        startTime: undefined,
        endTime: undefined
      },
      /** 接收整理完毕的结构树勾选的结构id */
      structIds: [],
      /** 未整理过的备用tableData */
      standbyTableData: [],
      tableKey: 0,
      chartHeight: window.innerHeight - 125 + 'px'
    };
  },
  watch: {
    tableColumns: {
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          // this.changeFixed();
        });
      },
      deep: true,
      immediate: true
    },
    tableWidth: {
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          // this.changeFixed();
        });

      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.addColumns();
    this.getTreeSelect();
    this.list();
    window.onresize = () => {
      this.chartHeight = window.innerHeight - 125 + 'px';
      this.tableHeightValue = window.innerHeight - 370;
    };
  },

  //剔除页面窗体大小变化得监听事件
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    addColumns() {
      this.tableColumns.push({
        title: this.$t("summary-Archive.inspection-table.shift-schedule"),
        width: 100,
        align: "center",
        key: "schedule",
        dataIndex: "schedule",
        ellipsis: true
      });
      for (let columnTitle = 1; columnTitle < 32; columnTitle++) {
        let column = {
          title: columnTitle,
          width: 50,
          align: "center",
          key: columnTitle,
          dataIndex: columnTitle,
          ellipsis: true
        };
        this.tableColumns.push(column)
      }
    },
    // 获取表格的总宽度
    handleResize() {
      this.tableWidth = this.$refs.tableRef !== undefined ? this.$refs.tableRef.$el.offsetWidth : 1;
    },
    // 计算表格各列宽度总和
    getColumnWidthTotal() {
      this.columnsWidth = this.tableColumns.reduce((sum, column) => sum + column.width, 0);
    },
    // 动态修改fixe的属性以便表格样式不出现空白列,并平和各列与表格的总宽度
    changeFixed() {
      if (this.columnsWidth <= this.tableWidth) {
        // 遍历 Columns 数组，将有 fixed 属性的元素的 fixed 值设置为 false（当有固定列时，列宽总和小于表格总宽度时会串行）
        this.tableColumns.forEach((column) => {
          if (column.fixed) {
            column.fixed = false;
          }
        });
        // 获取除最后一列以外其他列的宽度总和
        let otherColumnsWidth = this.tableColumns.slice(0, -1).reduce((total, column) => {
          return total + column.width;
        }, 0);
        // 将最后一列的宽度设置为剩余宽度，避免页面表头与内容显示串行
        this.tableColumns[this.tableColumns.length - 1].width = this.tableWidth - otherColumnsWidth;
      } else {
        // 恢复固定列原始定位属性
        this.tableColumns[0].fixed = 'left';
        // this.tableColumns[1].fixed='left';
        // this.tableColumns[this.tableColumns.length - 1].fixed='right';
        // 恢复最后一列原始宽度
        this.tableColumns[this.tableColumns.length - 1].width = 350;
      }
    },

    /**
     * 输入项筛选
     * @param inputValue
     * @param treeNode
     */
    filterTreeNode(inputValue, treeNode) {
      return treeNode.data.props.name.includes(inputValue);
    },

    // 收起/展开
    toggleAdvance() {
      this.advanceExpand = !this.advanceExpand;
      if (this.advanceExpand) {
        this.overflowHeight = window.innerHeight - 480 + 'px';
        this.tableBodyHeight = window.innerHeight - 565 + 'px';
      } else {
        this.overflowHeight = window.innerHeight - 410 + 'px';
        this.tableBodyHeight = window.innerHeight - 495 + 'px';
      }
    },

    /**
     * 维护频度改变事件
     * @param val
     */
    frequencyChange(val) {
      this.searchParams.maintenanceFrequency = val;
    },

    /**
     * 搜索
     */
    search() {
      this.pagination.current = 1;
      this.list();
    },

    reset() {
      this.searchParams = {};
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.list();
    },
    /**
     * 获取Tree下拉
     */
    getTreeSelect() {
      let _that = this;
      _that.$api.getLeftTree({ fmeaId: _that.$store.getters.rfmeaId }).then(res => {
        if (res.flag) {
          _that.struNodeList = res.data.mfmeaStruTreeModels;
          let targetNode = res.data.mfmeaStruTreeModels.filter(item => {
            return item.pid === "00000000000000000000000000000000";
          })[0];
          // 数组转Tree
          _that.treeData = arrayToTree(targetNode, res.data.mfmeaStruTreeModels);
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch(error => {
        // _that.$message.error(error.response.data.message, 1);
      });
    },

    /**
     * Excel导出
     */
    excelExport() {
      // 结构id处理
      let tempData = [];
      if (this.searchParams.struId && this.searchParams.struId.length > 0) {
        this.searchParams.struId.forEach(item => {
          tempData.push(item.value);
        })
      }
      let fmeaId = this.$store.getters.rfmeaId;
      let struIds = tempData || "";
      let maintenanceFrequency = this.searchParams.maintenanceFrequency || "";
      let maintenanceMethods = this.searchParams.maintenanceMethods || "";
      let acceptanceCriteria = this.searchParams.acceptanceCriteria || "";
      let startTime = this.searchParams.startTime || "";
      let endTime = this.searchParams.endTime || "";
      let measureName = this.searchParams.measureName || "";
      let url =
          this.$api.baseUrl +
          "/DFMEA/mfmeaEquipmentInspection/export?fmeaId=" +
          fmeaId +
          "&struIds=" +
          struIds +
          "&maintenanceFrequency=" +
          maintenanceFrequency +
          "&maintenanceMethods=" +
          maintenanceMethods +
          "&acceptanceCriteria=" +
          acceptanceCriteria +
          "&startTime=" +
          startTime +
          "&endTime=" +
          endTime +
          "&measureName=" +
          measureName;
      window.open(url);
    },

    /**
     * 整理搜索数据
     * @param val
     */
    buildSearchData(val) {
      if (val !== undefined && val.length > 0) {
        this.structIds = [];
        val.forEach(item => {
          this.structIds.push(item.value);
        });
      } else {
        this.structIds = [];
      }
    },

    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.tableLoading = true;
      _that.buildSearchData(_that.searchParams.struId);
      let data = {
        fmeaId: _that.$store.getters.rfmeaId,
        struIds: _that.structIds,
        maintenanceFrequency: _that.searchParams.maintenanceFrequency,
        maintenanceMethods: _that.searchParams.maintenanceMethods,
        acceptanceCriteria: _that.searchParams.acceptanceCriteria,
        startTime: _that.searchParams.startTime,
        endTime: _that.searchParams.endTime,
        measureName: _that.searchParams.measureName,
        pagination: {
          pageCurrent: _that.pagination.current,
          pageSize: _that.pagination.pageSize
        }
      };
      _that.$api.getInspectionData(data).then(res => {
        if (res.flag) {
          _that.tableData = res.inputData.list;
          if (_that.tableData && _that.tableData.length > 0) {
            _that.tableData.forEach(data => {
              data.maintenanceFrequency = _that.maintenanceFrequencyDict.find(
                item => item.key == data.maintenanceFrequency
              ).value;
            });
          }
          _that.pagination.current = res.data.pagination.pageCurrent;
          _that.pagination.pageSize = res.data.pagination.pageSize;
          _that.pagination.total = res.data.pagination.rowTotal;
          _that.tableKey = _that.pagination.current;
        } else {
          _that.$message.error(res.message);
        }
      }).finally(() => {
        _that.tableLoading = false;
      });
    },
    /**
     * Tree下拉选择事件时
     * @param value
     * @param option
     */
    treeSelectChange(value, option) {
      this.searchParams.struId = value;
      let checkList = [];
      let checkIds = [];
      if (this.sameSuperCheckFlag == true) {
        //当同级勾选按钮打开，并且是勾选添加时
        if (this.checkedEvent == true) {
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent && item.pid == this.currentPid) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          let result = checkIds.concat(this.searchParams.struId);
          let arrayResult = result.filter((currentValue, currentIndex, selfArr) => {
            return selfArr.findIndex(item => item.value === currentValue.value) === currentIndex;
          });
          this.searchParams.struId = arrayResult;
          // 暂存选中数据，取消勾选时使用
          this.currentChecked = arrayResult;
        } else {
          //当同级勾选按钮打开，并且是勾选取消时
          // 对比数组，找到当前勾选的层级
          let arr1 = this.currentChecked.filter(item => {
            return !this.searchParams.struId.find(prop => {
              return prop.value == item.value
            })
          });
          let currentUnCheckedNode = this.struNodeList.filter(item => {
            return item.id === arr1[0].value;
          })
          this.deepCurrent = currentUnCheckedNode[0] ? currentUnCheckedNode[0].deep : undefined;
          this.currentPid = currentUnCheckedNode[0] ? (currentUnCheckedNode[0].pid ? currentUnCheckedNode[0].pid : undefined) : undefined;
          //根据当前勾选的层级，找到所有相同的层级
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent && item.pid == this.currentPid) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          //把找到相同数据的层级从勾选的数据中删除
          const result = this.searchParams.struId.filter((itemA) => {
            return !checkIds.some((itemB) => itemA.value == itemB.value);
          })
          this.searchParams.struId = result;
          this.currentChecked = result;
        }
      } else if (this.checkIdShow == true) {
        //当同级勾选按钮打开，并且是勾选添加时
        if (this.checkedEvent == true) {
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          let result = checkIds.concat(this.searchParams.struId);
          let arrayResult = result.filter((currentValue, currentIndex, selfArr) => {
            return selfArr.findIndex(item => item.value === currentValue.value) === currentIndex;
          });
          this.searchParams.struId = arrayResult;
          // 暂存选中数据，取消勾选时使用
          this.currentChecked = arrayResult;
        } else {
          //当同级勾选按钮打开，并且是勾选取消时
          // 对比数组，找到当前勾选的层级
          let arr1 = this.currentChecked.filter(item => {
            return !this.searchParams.struId.find(prop => {
              return prop.value == item.value
            })
          });
          let currentUnCheckedNode = this.struNodeList.filter(item => {
            return item.id === arr1[0].value;
          })
          this.deepCurrent = currentUnCheckedNode[0] ? currentUnCheckedNode[0].deep : undefined;
          //根据当前勾选的层级，找到所有相同的层级
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          //把找到相同数据的层级从勾选的数据中删除
          const result = this.searchParams.struId.filter((itemA) => {
            return !checkIds.some((itemB) => itemA.value == itemB.value);
          })
          this.searchParams.struId = result;
          this.currentChecked = result;
        }
      } else {
        this.searchParams.struId = value;
      }
      this.checkedEvent = false;
    },
    /**
     * 表格点击分页中数字触发的方法
     * @param pagination
     */
    tableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.searchParams.pageCurrent = pagination.current;
      this.searchParams.pageSize = pagination.pageSize;
      this.list();
    },
    /**
     * 单选框改变事件
     */
    radioChange(e) {
      let radio = e.target.value;
      if (radio === 1) {
        this.checkIdShow = false;
        this.sameSuperCheckFlag = false;
      } else if (radio === 2) {
        this.checkIdShow = true;
        this.sameSuperCheckFlag = false;
      } else if (radio === 3) {
        this.checkIdShow = false;
        this.sameSuperCheckFlag = true;
      }
    },
    /**
     * tree 完全受控  选中
     * @param even
     * @param evenT
     * @param evenTR
     */
    selectBtn(even, evenT, evenTR) {
      this.checkedEvent = true; //判断是勾选添加还是删除
      this.currentChecked = evenTR.checkedNodes;
      let i = evenTR.checkedNodes.length - 1;
      this.deepCurrent = evenTR.checkedNodes[i].data.props.deep;
      this.currentPid = evenTR.checkedNodes[i].data.props.pid;
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  height: calc(80vh);
  overflow: auto;
}

/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden !important;
  margin-bottom: 0 !important;
  padding-right: 8px;
  background: rgb(250, 250, 250);
}

/deep/ .radio-group-class {
  float: right;
  margin-top: -30px;
}
</style>
