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

import {
  getPageList,
  getDetailed,
  postDelete
} from '@/api/wms-api'
import { zhApiColumnsLable,firstWordSizeChange } from '@/utils/index'
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,
      //明细列表(主表明细找枚举转义使用)
      URLOption_detailList:allUrlOption[this.$route.name].detailListURL,
      // 主表-明细-筛选数据同步回显
      detailSearchDataFE:null,
      // 主表-操作列
      buttonOperationClick_leftBase:[{label:'查看详情',name:'info'}]
    }
  },
  methods: {
    // 主表-右侧操作列基础按钮
    buttonOperationList_rightBase(data){
      return [{
        label:'编辑',
        name:'edit',
      },{
        label:'删除',
        name:'delete',
        color:'red'
      }]
    },
    // 主表-右侧操作列基础按钮操作
    buttonOperationClick_right(row,item){
      // 编辑
      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)
        this.displayDialog.editDialog = true
      }
      // 删除
      else if (item.name == "delete"){
        this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.Loading.tableLoading = true
          let _url = this.URLOption_delete ? this.URLOption_delete : this.URLOption_base + '/delete-by-id'
          postDelete(row.id, _url).then(res => {
            this.$successMsg('删除成功!')
            this.Loading.tableLoading = false
            this.paging()
          }).catch(err => {
            this.Loading.tableLoading = false
          })
        }).catch(() => {
          this.Loading.tableLoading = false
        });
      }
    },
    // 获取通过api的表头转义数据
    initApiColumnsForDto(list,titleName){
      let data = this.$store.getters.dtoColumnTypes
      let _coloums = data[titleName].S
      let _Columns_Table = []
      if(_coloums){
        let _data = _coloums.dtoList
        _data.forEach(item=>{
          let _item = item
          _item.label = zhApiColumnsLable(titleName + item.name) || item.name
          _item.prop = firstWordSizeChange(item.name)
          // 如果list接口存在数据 ，与list接口返回字段比较处理,list接口存在的话则追加
          let _if = firstWordSizeChange(item.name) != 'details'
          if(list && list.length > 0){
            _if = firstWordSizeChange(item.name) in list && firstWordSizeChange(item.name) != 'details'
          }
          if(_if){
            _Columns_Table.push(_item)
          }
        })
      }
      return _Columns_Table
    },
    //渲染数据
    paging(callback) {
      this.Loading.tableLoading = true;
      this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount
      getPageList(this.PageListParams, this.URLOption_base)
        .then(res=>{
          // 表头处理
          let _Columns = this.initApiColumnsForDto(res,this.$route.name)
          this.apiColumns_Table = this.initTableColumns(_Columns)
          this.apiColumns_DesTions = _Columns
            // 页面数据处理
          if(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) {
              // 表头处理
            let _parentName = this.URLOption_detailList.substr(0,this.URLOption_detailList.indexOf('/'))
            this.apiColumns_DetailsTable = this.initTableColumns(this.initApiColumnsForDto(res.details[0],_parentName),'detail_api')
            if(this.$refs.currenDrawer_Ref){
              this.$refs.currenDrawer_Ref.getDetailList(res,()=>{
                this.inlineDialogCallback()
              },()=>{
                this.Loading.DrawerLoading = false
              })
            }
          }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;
    //     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
    }
  }
}