WMS_IAC_FE/PC/InterFace.Dash/src/mixins/TableMixins.js

import {
  getPageList,
  getDetailed,
  postDelete
} from '@/api/wms-api'
import * as allUrlOption from '@/utils/baseData/urlOption'
export const tableMixins = {
  data() {
    return {
      //分页参数
      PageListParams: {
        condition: {
          filters: []
        },
        Sorting: "",
        SkipCount: 0,
        MaxResultCount: 20,
      },
      //当前数据总条数
      totalCount: 0,
      //改变当前页
      oldSkipCount: 1,
      //table渲染数据
      tableData: [],
      //选择当前表行数据
      multipleSelection: [],
      // 明细 details 数据集做分页处理
      //当前数据总条数
      totalCountDetails: 0,
      //改变当前页
      oldSkipCountDetails: 1,
      //跳过前多少条记录数
      SkipCountDetails: 0,
      //每页最大显示数
      MaxResultCountDetails: 20,
      // 明细数据临时存储
      tableDataDetails:null,
      //默认tag
      firstTabs:'xq',
      // api的表头数据
      apiColumns_Table:null,
      apiColumns_DesTions:null,
      apiColumns_DetailsTable:null,
      apiColumns_DetailsPage:null,
      //主表-列表
      URLOption_base:allUrlOption[this.$route.name].baseURL,
      //主表-明细
      URLOption_detail:allUrlOption[this.$route.name].detailURL,
      // 主表-明细-筛选数据同步回显
      detailSearchDataFE:null,
      // 主表-操作列
      operationButtonsTable:[{label:'查看详情',name:'info'}]
    }
  },
  methods: {
    // 获取通过api的表头数据，不可以在初始化处理，因为接口返回问题
    initApiColumns(table,des,detailsTable,detailsPage){
      // 赋值表头数据
      if(table && table[this.$route.name])this.apiColumns_Table = this.initTableColumns(table[this.$route.name])
      if(des && des[this.$route.name])this.apiColumns_DesTions = des[this.$route.name]
      if(detailsTable && detailsTable[this.$route.name])this.apiColumns_DetailsTable = this.initTableColumns(detailsTable[this.$route.name],'detail_api')
      if(detailsPage && detailsPage[this.$route.name])this.apiColumns_DetailsPage = this.initTableColumns(detailsPage[this.$route.name],'detailPage_api')
    },
    //渲染数据
    paging(callback) {
      this.Loading.tableLoading = true;
      this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount
      getPageList(this.PageListParams, this.URLOption_base).then(res => {
        this.tableData = res.items
        this.totalCount = res.totalCount
        this.pagingCallback(callback)
      }).catch(err => {
        this.Loading.tableLoading = false
      })
    },
    //接受排序信息并改变视图
    sortChange(val) {
      const {
        prop,
        order
      } = val;
      if (!prop || !order) {
        this.PageListParams.Sorting = "";
        this.oldSkipCount = 1;
        this.paging();
        return;
      }
      let orderdata = order.substr(0, order.indexOf("c") + 1);
      const props = prop.charAt(0).toUpperCase() + prop.slice(1)
      this.PageListParams.Sorting = props + " " + orderdata.toUpperCase();
      this.oldSkipCount = 1;
      this.paging();
    },
    //接收分页组件emit改变每页最大页数
    alterResultCount(val) {
      this.PageListParams.MaxResultCount = val;
      this.paging();
    },
    //接收分页组件emit改变当前页
    alertoldSkipCount(val) {
      this.oldSkipCount = val;
      this.paging();
    },
    //点击Table行内名称
    inlineDialog(val) {
      if(this.$refs.currenDrawer_Ref)this.$refs.currenDrawer_Ref.closeDetailInfo()
      // 打开抽屉后，点击其他信息，默认回到详情位置上，避免特殊需要重新点击获取接口的tag页面数据不更新
      this.firstTabs = 'xq'
      //打开抽屉
      this.propsData = {}
      this.Loading.DrawerLoading = true
      this.displayDialog.detailsDialog = true;
      let _url = this.URLOption_detail ? this.URLOption_detail : this.URLOption_base
      getDetailed(val.id, _url).then(res => {
        // 打印使用的全部数据存储
        this.tableDataDetails = JSON.parse(JSON.stringify(res))
        this.propsData = res
        if (res.details) {
          if(this.$refs.currenDrawer_Ref){
            this.$refs.currenDrawer_Ref.getDetailList(res,()=>{
              this.inlineDialogCallback()
            },()=>{
              this.Loading.DrawerLoading = false
            })
          }
          // 前端分页处理
          // this.propsData = this.detailListPageFromFE(res)
        }else{
          this.Loading.DrawerLoading = false
        }
      }).catch(err => {
        this.Loading.DrawerLoading = false
      })
    },
    // 前端分页处理
    // detailListPageFromFE(data){
    //   let linshiTableDataDetails = JSON.parse(JSON.stringify(data))
    //   this.totalCountDetails = data.details.length
    //   // 删除除当前页面最大数以外数据
    //   linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails); 
    //   return linshiTableDataDetails
    // },
    // 明细 分页 接收分页组件emit改变每页最大页数
    alterResultCountDetails(val) {
      this.Loading.DrawerLoading = true
      this.MaxResultCountDetails = val;
      let linshiTableDataDetails = JSON.parse(JSON.stringify(this.tableDataDetails))
      linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails); 
      this.propsData = linshiTableDataDetails
      this.Loading.DrawerLoading = false
    },
    // 明细 分页 接收分页组件emit改变当前页
    alertoldSkipCountDetails(val) {
      this.propsData = {}
      this.Loading.DrawerLoading = true
      this.oldSkipCountDetails = val;
      let SkipCount = (this.oldSkipCountDetails - 1) * this.MaxResultCountDetails
      let linshiTableDataDetails = null;
      linshiTableDataDetails = JSON.parse(JSON.stringify(this.tableDataDetails))
      // 删除当前页 之前数据
      linshiTableDataDetails.details.splice(0,SkipCount); 
      // 删除当前页 之后的数据
      linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails);
      this.propsData = linshiTableDataDetails
      this.Loading.DrawerLoading = false
    },
    //选择当前行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 主列表操作列按钮执行方法
    /**
     * 
     * @param {*} row 当前行数据
     * @param {*} item 按钮信息
     * @param {*} index 按钮索引
     */
    buttonOperationClick_left(row, item, index) {
      // 获取当前行数据，赋值给 propsData
      this.propsData = row
      // 查看详情
      if (item.name == "info") {
        this.inlineDialog(row)
      }
      // 编辑
      if (item.name == "edit") {
        this.formTitle = this.$route.meta.title + "编辑";
        this.formReveal = false
        this.theEvent = "edit"
        const listAssign = (arr1, arr2) => {
          Object.keys(arr1).forEach(item => {
            arr1[item] = arr2[item]
          })
        }
        listAssign(this.editFormData, row)
        if(this.$route.name == 'CustomerItem'){
          this.editFormData.beginTime = new Date(row.beginTime)
          this.editFormData.endTime = new Date(row.endTime)
        }
        this.displayDialog.editDialog = true
      }
      // 删除
      if (item.name == 'delete') {
        this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.Loading.appMainLoading = true
          this.displayDialog.detailsDialog = false
          postDelete(row.id, this.URLOption_base).then(res => {
            this.$successMsg('删除成功!')
            this.Loading.appMainLoading = false
            this.paging()
          }).catch(err => {
            this.Loading.appMainLoading = false
          })
        }).catch(() => {
          this.Loading.appMainLoading = false
        });
      }
    },
    // 主列表更新后全局通用操作
    pagingCallback(callback){
      this.Loading.tableLoading = false
      if(callback)callback()
    },
    // 筛选前端查询
    // detailFiltersSearch(options){
    //   let _item = options.item;
    //   // 重置
    //   if(_item.name == 'reset' || _item.name == 'moreList-reset'){
    //     this.propsData = this.detailListPageFromFE(this.tableDataDetails)
    //     //关闭高级筛选
    //     if(options.vm_moreList){options.vm_moreList.changeMoreListShow(false)}
    //     // 同步当前列表数据请求接口的筛选条件
    //     this.detailSearchDataFE = {}
    //     this.detailSearchDataFE.moreList = {filters:JSON.parse(JSON.stringify([]))}
    //   }
    //   // 查询
    //   if( _item.name == 'search' || _item.name == 'moreList-search'){
    //     let _searchObj = {}
    //     let searchData = options.data_moreList.filters;
    //     console.log(299,searchData)
    //     searchData.forEach(item=>{
    //       _searchObj[item.column] = item.value
    //     })
    //     const productFilter = (data, params) => data.filter(function(item){
    //       return Object.keys(params).every(function(key){ 
    //           return item[key]!=undefined && item[key]==params[key] //可以相应修改条件
    //       })
    //     })
    //     let _allData = JSON.parse(JSON.stringify(this.tableDataDetails))
    //     let _filterList = productFilter(_allData.details,_searchObj)
    //     _allData.details = _filterList
    //     this.propsData = this.detailListPageFromFE(_allData)
    //     //关闭高级筛选
    //     if(options.vm_moreList){options.vm_moreList.changeMoreListShow(false)}
    //     // 同步当前列表数据请求接口的筛选条件
    //     this.detailSearchDataFE = {}
    //     this.detailSearchDataFE.moreList = {filters:JSON.parse(JSON.stringify(searchData))}
    //   }
    //   // return res
    // },
    // 点击抽屉，获取明细后全局通用操作
    inlineDialogCallback(){
      this.Loading.DrawerLoading = false
    }
  }
}