icore-pass/src/components/DilCommonUI/packages/table/src/table.js

import Sortablejs from "sortablejs";
export default {
  data() {
    return {
      // 等数据渲染完了再显示
      isShow: false,
      // 自己 请求体 参数
      dataRequestQuery: {},
      // 自己的表数据
      dataTabel: [],
      // 自己的表头数据
      dataColumnData: [],
      // 拖拽的表头数据
      dataDropColumn: [],
      // 自己的数据总条数
      dataTotal: 0,
      // 自己的当前页面数
      dataCurrentPage: 1,
      // 自己的每页显示条目个数
      dataPageSize: 10,
      // 保存表格所有页面所选中的数据
      dataSelection: [],
      // 保存表格单选的数据 保存数据的id
      dataRadioId: ""
    };
  },
  created() {
    this.dataCurrentPage = this.currentPage;
    this.dataPageSize = this.pageSize;
    console.log(this)
    this.requestData();
  },
  mounted() {
    //行拖拽
    // this.rowDrop();
    //列拖拽
    this.columnDrop();
  },
  methods: {
    // 通过请求获取数据
    requestData(options) {
      let pageNum = undefined;
      let pageSize = undefined;
      
      if (options) {
        pageNum = options.pageNum;
        pageSize = options.pageSize;
        
      }
      
      if (this.requestUrl) {
        // 处理请求地址逻辑
        let url;
        if (this.requestUrl.indexOf("//") > -1) {
          url = this.requestUrl;
        } else {
          url = this.requestUrl;
        }
        // 处理请求地址逻辑

        if (
          !this.dataTotal ||
          (this.dataCurrentPage - 1) * this.dataPageSize < this.dataTotal
        ) {
          // 判断是否需要在请求体中放入参数
          if(this.requestQuery){
            console.log(" 判断是否需要在请求体中放入参数")
            
            this.dataRequestQuery=this.requestQuery;
            console.log(this.dataRequestQuery.resultBreakId)
          }

          let data = undefined;
          for (const key in this.dataRequestQuery) {
         
            const val = this.dataRequestQuery[key];
            console.log(val)
            if (val||val==0) {
             
              if (!data) data = {};
            
              data[key] = val;
            }
          }
        
          // 发送请求
          this.axios
            .post(url, data, {
              // 请求地址 中
              params: {
                pageNum: pageNum || this.dataCurrentPage,
                pageSize: pageSize || this.dataPageSize
              }
            })
            .then(response => {
              let d = response.data.data;
              this.dataTabel = d.list;
              this.dataTotal = d.total;
              //执行成功的回调
              this.$emit('func',response.data.data);
              this.refreshColumnData(d.columnData);

              this.isShow = true;
            });
        }
      } else {
        console.warn("requestUrl 参数不能为 null");
      }
    },
    // 刷新表头显示数据
    refreshColumnData(columnData) {
      // 表头只赋值一次
      if (this.dataColumnData.length > 0) return;

      // 如果前端有写表头，则加在后端表头前面
      const d = this.columnData.concat(columnData);

      // 把操作列拼接到最后一列
      this.dataColumnData = d;
      this.dataDropColumn = [].concat(this.dataColumnData);
    },
    // 排序回调
    sortChange({ column, prop, order }) {
      // column : 列的数据
      // prop : 排序字段参数名
      // order : 排序方式 （ascending:升序;descending:降序;null:无）

      // 前端排序
      // const sort = {
      //   ascending: (a, b) => {
      //     a[prop] = this.getString(a[prop]);
      //     b[prop] = this.getString(b[prop]);
      //     return a[prop].localeCompare(b[prop] || "", 'zh-CN');
      //   },
      //   descending: (a, b) => {
      //     a[prop] = this.getString(a[prop]);
      //     b[prop] = this.getString(b[prop]);
      //     return b[prop].localeCompare(a[prop] || "", 'zh-CN')
      //   },
      // };
      // this.dataTabel.sort(sort[order]);
      // 前端排序

      // 后端排序
      let s = {
        ascending: "asc",
        descending: "desc"
      };

      let value = {
        orderType: s[order] || undefined,
        orderField: order ? prop : undefined
      };

      this.setDataRequestQuery(value);
    },
    // 更新请求参数
    setDataRequestQuery(value) {
      let q = this.dataRequestQuery;
      for (const key in value) {
        q[key] = value[key];
      }
      this.requestData(q);
      this.$emit("update:requestQuery", q);
      this.dataRequestQuery = q;
    },
    // 格式化字符串
    getString(str) {
      if (str != null && str != undefined && str.toString) {
        return str.toString();
      } else {
        return str || "";
      }
    },
    // 当某一行被点击时会触发该事件
    rowClick(row, column, event) {
      if (this.selectionType == "radio") {
        if (this.dataRadioId == row.ROW_ID) {
          this.dataRadioId = "";
          row = {};
        } else {
          this.dataRadioId = row.ROW_ID;
        }
        this.$emit("radio-change", row);
      }
    },
    // 多选的选中行改变回调
    selectionChange(selection) {
      this.dataSelection = selection;
      // 将多选中的数据抛出
      this.$emit("selection-change", selection);
    },
    // 当表格的筛选条件发生变化的时候会触发该事件，
    // 参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
    filterChange(filters) {
      let value = {};
      for (const key in filters) {
        value[key] = filters[key].length > 0 ? filters[key] : undefined;
      }
      // 每次筛选时，都默认将页面改为第一页，避免数据过少时，显示没有数据
      this.currentChange(1, false);
      this.setDataRequestQuery(value);
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortablejs.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.dataTabel.splice(oldIndex, 1)[0];
          _this.dataTabel.splice(newIndex, 0, currRow);
        }
      });
    },
    // 列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortablejs = Sortablejs.create(wrapperTr, {
        animation: 180,
        delay: 0,
        handle: ".allowDrag",
        onEnd: evt => {
          // 因为序号列和单多选列不在数组中，所以需要进行偏移计算
          const offset = this.dragColumnOffset;
          evt.oldIndex -= offset;
          evt.newIndex -= offset;
          // 换列
          const oldItem = this.dataDropColumn[evt.oldIndex];
          this.dataDropColumn.splice(evt.oldIndex, 1);
          this.dataDropColumn.splice(evt.newIndex, 0, oldItem);
        }
      });
    },
    // current-page 改变时会触发
    currentChange(val, isRequest = true) {
      this.dataCurrentPage = val;
      if (isRequest) {
        this.requestData({ pageNum: val });
      }
      // 最后通知父节点页面改变
      this.$emit("update:current-page", val);
    },
    // pageSize 改变时会触发
    sizeChange(val) {
      this.dataPageSize = val;
      this.requestData({});
      this.$emit("update:size-change", val);
    }
  },
  computed: {
    // 计算是否使用排序功能
    dataSortable() {
      return function (item) {
        if (item.template) {
          return false;
        } else if (item.sortable) {
          return item.sortable;
        } else {
          return this.sortable;
        }
      };
    },
    // 计算每列的最小宽度
    dataColumnMinWidth() {
      return function (item) {
        let mw = 0;
        if (this.dataSortable(item)) {
          // 如果使用排序功能
          mw += 30;
        }

        if (item.filters && item.filters.length > 0) {
          mw += 20;
        }
        if (item.label) {
          mw += item.label.toString().length * 30;
        }
        return mw;
      };
    },
    // 计算拖拽列的偏移差
    dragColumnOffset() {
      let o = 0;
      if (this.showIndex) {
        o++;
      }
      if (this.selectionType != "") {
        o++;
      }
      return o;
    }
  },
  watch: {
    requestQuery: {
      deep: true,
      handler(val, oldVal) {
        let q = this.dataRequestQuery;
        for (const key in val) {
          q[key] = val[key] ? val[key] : undefined;
        }

        this.setDataRequestQuery(q);
      }
    }
  },
  // 注册组件
  components: {
    // 代理组件
    componentProxy: {
      props: {
        html: {
          default: ""
        },
        scope: {
          default() {
            return {};
          }
        }
      },
      template: ``,
      created() {
        this.$options.template = this.html;
      }
    }
  }
};