关于vue2 antd 碰到的问题总结下

1.关于vue2 antd 视图更新问题

1.一种强制更新 

Vue2是通过用Object…defineProperty来设置数据的getter和setter实现对数据和以及视图改变的监听的。对于数组和对象这种引用类型来说，getter和setter无法检测到它们内部的变化。用这种

 this.$set(this.form, "fileUrl", urlArr.join(","));

2.如果碰到

a-form :form=”form”

 form: this.$form.createForm(this),

    
        
          
        
        
          
        
        
          
        
        
          
            
            
            选择地点
          
        
      

a-form :form=”form”

 form: this.$form.createForm(this),

那么使用

this.form.setFieldsValue({ address: val.address })来更新表单的值，以触发视图的更新。

清空的话

this.form.resetFields();

3.通常双向绑定如果不行试试前两种。

2.关于封装好了表格 使用

1.导入

import STable from "@/components/table/";

index.js

import T from "ant-design-vue/es/table/Table";
import get from "lodash.get"
export default {
  data() {
    return {
      needTotalList: [],
      selectedRows: [],
      selectedRowKeys: [],

      localLoading: false,
      localDataSource: [],
      localPagination: Object.assign({}, T.props.pagination)
    };
  },
  props: Object.assign({}, T.props, {
    rowKey: {
      type: [String, Function],
      default: 'id'
    },
    data: {
      type: Function,
      required: true
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showSizeChanger: {
      type: Boolean,
      default: true
    },
    showAlertInfo: {
      type: Boolean,
      default: false
    },
    showPagination: {
      default: 'auto'
    },
    deleteShow: { // 删除键
      type: Boolean,
      default: false
    },
    bordered: {
      type: Boolean,
      default: true
    },
  }),
  watch: {
    'localPagination.current'(val) {
      this.$router.push({
        name: this.$route.name,
        params: Object.assign({}, this.$route.params, {
          current: val
        }),
      });
    },
    pageNum(val) {
      Object.assign(this.localPagination, {
        current: val
      });
    },
    pageSize(val) {
      Object.assign(this.localPagination, {
        pageSize: val
      });
    },
    showSizeChanger(val) {
      Object.assign(this.localPagination, {
        showSizeChanger: val
      });
    }
  },
  zzh() {
    const that = this
    return that;
  },
  created() {
    this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
      current: this.pageNum,
      pageSize: this.pageSize,
      showSizeChanger: this.showSizeChanger
    });
    this.needTotalList = this.initTotalList(this.columns)
    this.loadData();
  },
  methods: {
    loadingShow(value) {
      this.localLoading = value
    },
    refresh() {
      var mm = {
        current: 1,
        total: 0,
        size: this.pageSize,
      }
      this.loadData(mm);
    },
    deleteRefresh() {
      this.loadData()
    },
    loadData(pagination, filters, sorter) {
      this.localLoading = true
      var result = this.data(
        Object.assign({
          current: (pagination && pagination.current) ||
            this.localPagination.current,
          size: (pagination && pagination.pageSize) ||
            this.localPagination.pageSize
        },
          (sorter && sorter.field && {
            sortField: sorter.field
          }) || {},
          (sorter && sorter.order && {
            sortOrder: sorter.order
          }) || {}, {
          ...filters
        }
        )
      );

      if (result instanceof Promise) {
        result.then(r => {
          this.localPagination = Object.assign({}, this.localPagination, {
            current: (pagination && pagination.current) ||
              this.localPagination.current,  // 返回结果中的当前分页数
            total: r.totalCount, // 返回结果中的总记录数
            showSizeChanger: this.showSizeChanger,
            pageSize: (pagination && pagination.pageSize) ||
              this.localPagination.pageSize
          });

          !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
          this.localDataSource = r.data; // 返回结果中的数组数据
          this.localLoading = false
        });
      }
    },
    initTotalList(columns) {
      const totalList = []
      columns && columns instanceof Array && columns.forEach(column => {
        if (column.needTotal) {
          totalList.push({
            ...column,
            total: 0
          })
        }
      })
      return totalList
    },
    updateSelect(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      let list = this.needTotalList
      this.needTotalList = list.map(item => {
        return {
          ...item,
          total: selectedRows.reduce((sum, val) => {
            let total = sum + get(val, item.dataIndex)
            return isNaN(total) ? 0 : total
          }, 0)
        }
      })
    },
    updateEdit() {
      this.selectedRows = []
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectedRows = []
      this.updateSelect([], [])
      this.$emit('emptyData', { selectedRowKeys: [], selectedRows: [] })
      this.$emit('onSelect', { selectedRowKeys: [], selectedRows: [] })
    },
    onDeleteSelected() {
      this.$emit('DeleteData')
    },
    handleRowClick(record) {
      const selectedRowKeys = [...this.selectedRowKeys];
      const selectedRows = [...this.selectedRows];

      const rowKey = typeof this.rowKey === 'function' ? this.rowKey(record) : record[this.rowKey];

      const rowIndex = selectedRowKeys.indexOf(rowKey);
      if (rowIndex >= 0) {
        selectedRowKeys.splice(rowIndex, 1);
        selectedRows.splice(rowIndex, 1);
      } else {
        selectedRowKeys.push(rowKey);
        selectedRows.push(record);
      }

      this.updateSelect(selectedRowKeys, selectedRows);
      this.$emit('onSelect', { selectedRowKeys, selectedRows });
    },
    renderMsg(h) {
      const _vm = this
      this.that = this
      let d = []

      return d
    },
    renderAlert(h) {
      return h('span', {
        slot: 'message'
      }, this.renderMsg(h))
    },
  },

  render(h) {
    const _vm = this

    let props = {},
      localKeys = Object.keys(this.$data);

    Object.keys(T.props).forEach(k => {
      let localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`;
      if (localKeys.includes(localKey)) {
        return props[k] = _vm[localKey];
      }
      return props[k] = _vm[k];
    })


    // 显示信息提示
    if (this.showAlertInfo) {

      props.rowSelection = {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          _vm.updateSelect(selectedRowKeys, selectedRows)
          _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
        }
      };

      props.customRow = (record) => ({
        on: {
          click: () => {
            _vm.handleRowClick(record);
          },
        },
      });

      return h('div', {}, [
        h("a-table", {
          tag: "component",
          attrs: props,
          on: {
            change: _vm.loadData
          },
          scopedSlots: this.$scopedSlots
        }, this.$slots.default)
      ]);

    }

    props.customRow = (record) => ({
      on: {
        click: () => {
          _vm.handleRowClick(record);
        },
      },
    });

    return h("a-table", {
      tag: "component",
      attrs: props,
      on: {
        change: _vm.loadData
      },
      scopedSlots: this.$scopedSlots
    }, this.$slots.default);

  },
};

使用

  record.id"
            :columns="columns1"
            :data="loadDataListAssets"
            :showAlertInfo="true"
            @onSelect="onChangeAssetsList"
          >




 loadDataListAssets: (parameter) => {
        return getUserPage(Object.assign(parameter, this.listAssetsParam)).then(
          (res) => {
            var mm = { data: [] };
            mm.size = res.data.size;
            mm.current = res.data.current;
            mm.totalCount = res.data.total;
            mm.totalPage = res.data.pages;
            mm.data = res.data.records;
            return mm;
          }
        );
      },


    onChangeAssetsList(row) {
      console.log(row);
      let self = this;
      self.personList = [];
      let arr = [...new Set([...row.selectedRows])];
      let AssetsListRow = [
        ...new Set([...self.AssetsListRow.concat(arr), ...arr]),
      ];
      self.AssetsListRow = AssetsListRow.filter((item) =>
        row.selectedRowKeys.includes(item.id)
      );
      self.personList = [...new Set([...self.AssetsListRow, ...arr])];
      // self.personList = [...new Set([...self.personList, ...arr])];
      // const strings = self.personList.map((item) => JSON.stringify(item));
      // const removeDupList = Array.from(new Set(strings));
      // const result = removeDupList.map((item) => JSON.parse(item));
      // self.personList = result;
    },

有slot使用

 
              
                
                  删除
                
              
 
           

3.关于单选封装好的组件使用

    



import JSelectSupplier from "@/components/jeecgbiz/JSelectSupplier";



    accountData2(e) {
      if (e.length > 0) {
        this.editform.supplierName = e[0].name;
        this.editform.supplierId = e[0].id;
      } else {
        this.editform.supplierName = "";
        this.editform.supplierId = "";
      }
      console.log(e);
    },

外层也就是index

  
    
      
        
      
    

    
      {{selectButtonText}}
    

    
  





  .j-select-biz-component-box {

    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
    }

    .full {
      width: 100%;
    }

    /deep/ .ant-select-search__field {
      display: none !important;
    }
  }

 内层

  
    
      
        
        
          
            
              
                
                  
                
              
              
                
                  查询
                  重置
                
              
            
          
        

        
        
      
      
        
          
            
              删除
            
          
        
      
    
  

JeecgListMixin的方法

/**
* 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm
* 高级查询按钮调用 superQuery方法  高级查询组件ref定义为superQueryModal
* data中url定义 list为查询列表  delete为删除单条记录  deleteBatch为批量删除
*/
import { filterObj } from "@/utils/util";
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from "@/api/manage";
export const JeecgListMixin = {
data() {
return {
/* 查询条件-请不要在queryParam中声明非字符串值的属性 */
queryParam: {},
/* 数据源 */
dataSource: [],
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ["10", "20", "30"],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条";
},
showQuickJumper: true,
showSizeChanger: true,
total: 0,
},
/* 排序参数 */
isorter: {
column: "createTime",
order: "desc",
},
/* 筛选参数 */
filters: {},
/* table加载状态 */
loading: false,
/* table选中keys*/
selectedRowKeys: [],
/* table选中records*/
selectionRows: [],
/* 查询折叠 */
toggleSearchStatus: false,
/* 高级查询条件生效状态 */
superQueryFlag: false,
/* 高级查询条件 */
superQueryParams: "",
/** 高级查询拼接方式 */
superQueryMatchType: "and",
};
},
created() {
if (!this.disableMixinCreated) {
console.log(" -- mixin created -- ");
this.loadData();
//初始化字典配置 在自己页面定义
this.initDictConfig();
}
},
computed: {},
methods: {
loadData(arg) {
if (!this.url.list) {
this.$message.error("请设置url.list属性!");
return;
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams(); //查询条件
this.loading = true;
getAction(this.url.list, params)
.then((res) => {
if (res.ok) {
//update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
this.dataSource = res.data.records || res.data;
if (res.data.total) {
this.ipagination.total = res.data.total;
} else {
this.ipagination.total = 0;
}
//update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
} else {
this.$message.warning(res.msg);
}
})
.finally(() => {
this.loading = false;
});
},
initDictConfig() {
console.log("--这是一个假的方法!");
},
handleSuperQuery(params, matchType) {
//高级查询方法
if (!params) {
this.superQueryParams = "";
this.superQueryFlag = false;
} else {
this.superQueryFlag = true;
this.superQueryParams = JSON.stringify(params);
this.superQueryMatchType = matchType;
}
this.loadData(1);
},
getQueryParams() {
//获取查询条件
let sqp = {};
if (this.superQueryParams) {
sqp["superQueryParams"] = encodeURI(this.superQueryParams);
sqp["superQueryMatchType"] = this.superQueryMatchType;
}
var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
// param.field = this.getQueryField();
param.current = this.ipagination.current;
param.size = this.ipagination.pageSize;
return filterObj(param);
},
getQueryField() {
//TODO 字段权限控制
var str = "id,";
this.columns.forEach(function (value) {
str += "," + value.dataIndex;
});
return str;
},
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
console.log(selectedRowKeys, selectionRows);
},
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
},
searchQuery() {
this.loadData(1);
},
superQuery() {
this.$refs.superQueryModal.show();
},
searchReset() {
this.queryParam = {};
this.loadData(1);
},
batchDel: function () {
if (!this.url.deleteBatch) {
this.$message.error("请设置url.deleteBatch属性!");
return;
}
if (this.selectedRowKeys.length <= 0) {
this.$message.warning("请选择一条记录！");
return;
} else {
var ids = "";
for (var a = 0; a  {
if (res.success) {
//重新计算分页问题
that.reCalculatePage(that.selectedRowKeys.length);
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res.message);
}
})
.finally(() => {
that.loading = false;
});
},
});
}
},
handleDelete: function (id) {
if (!this.url.delete) {
this.$message.error("请设置url.delete属性!");
return;
}
var that = this;
deleteAction(`${that.url.delete}/${id}`, { id: id }).then((res) => {
if (res.ok) {
//重新计算分页问题
that.reCalculatePage(1);
that.$message.success("操作成功");
that.loadData();
} else {
that.$message.warning(res.msg);
}
});
},
reCalculatePage(count) {
//总数量-count
let total = this.ipagination.total - count;
//获取删除后的分页数
let currentIndex = Math.ceil(total / this.ipagination.pageSize);
//删除后的分页数<所在当前页
if (currentIndex  0) {
// this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc";
}
this.ipagination = pagination;
this.loadData();
},
handleToggleSearch() {
this.toggleSearchStatus = !this.toggleSearchStatus;
},
// 给popup查询使用(查询区域不支持回填多个字段，限制只返回一个字段)
getPopupField(fields) {
return fields.split(",")[0];
},
modalFormOk() {
// 新增/修改 成功时，重载列表
this.loadData();
//清空列表选中
this.onClearSelected();
},
handleDetail: function (record) {
this.$refs.modalForm.edit(record);
this.$refs.modalForm.title = "详情";
this.$refs.modalForm.disableSubmit = true;
},
/* 导出 */
handleExportXls2() {
let paramsStr = encodeURI(JSON.stringify(this.getQueryParams()));
let url = `${window._CONFIG["domianURL"]}/${this.url.exportXlsUrl}?paramsStr=${paramsStr}`;
window.location.href = url;
},
handleExportXls(fileName) {
if (!fileName || typeof fileName != "string") {
fileName = "导出文件";
}
let param = this.getQueryParams();
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
param["selections"] = this.selectedRowKeys.join(",");
}
console.log("导出参数", param);
downFile(this.url.exportXlsUrl, param).then((data) => {
if (!data) {
this.$message.warning("文件下载失败");
return;
}
if (typeof window.navigator.msSaveBlob !== "undefined") {
window.navigator.msSaveBlob(new Blob([data], { type: "application/vnd.ms-excel" }), fileName + ".xls");
} else {
console.log(data);
let url = window.URL.createObjectURL(new Blob([data.data], { type: "application/vnd.ms-excel" }));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName + ".xls");
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
});
},
/* 图片预览 */
getImgView(text) {
if (text && text.indexOf(",") > 0) {
text = text.substring(0, text.indexOf(","));
}
return getFileAccessHttpUrl(text);
},
/* 文件下载 */
// update--autor:lvdandan-----date:20200630------for：修改下载文件方法名uploadFile改为downloadFile------
downloadFile(text) {
if (!text) {
this.$message.warning("未知的文件");
return;
}
if (text.indexOf(",") > 0) {
text = text.substring(0, text.indexOf(","));
}
let url = getFileAccessHttpUrl(text);
window.open(url);
},
},
};

Ellipsis的方法

import Ellipsis from './Ellipsis'
export default Ellipsis

Ellipsis.vue

4.关于封装好的复选表格

import JSelectContract from "@/components/jeecgbiz/JSelectContract";

 index外层

  
    
      
        
      
    

    
      {{selectButtonText}}
    

    
  





  .j-select-biz-component-box {

    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
    }

    .full {
      width: 100%;
    }

    /deep/ .ant-select-search__field {
      display: none !important;
    }
  }

 内层

  
    
      
        
        
          
            
              
                
                  
                
              
              
                
                  查询
                  重置
                
              
            
          
        

        
        
      
      
        
          
            
              删除
            
          
        
      
    
  

这边的方法通单选框是一样的

5.关于没有封装的单选框表格同时要实现点击行增加单选框选中效果

 record.id"
:dataSource="tableData"
:columns="columns"
:row-selection="{
type: 'radio',
onChange: onSelectChange,
selectedRowKeys: selectedRowKeys,
}"
:customRow="customRowFn"
@change="handleTableChange"
:pagination="ipagination"
:loading="tableLoading"
bordered
>

data(){
return{
tableSelectRow: {},
selectedRowKeys: [],
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
total: 0,
},
}
}
method:{
//控制单选框
onSelectChange(val, row) {
console.log("val", val, "row", row);
this.tableSelectRow = row[0];
this.selectedRowKeys = val;
},
//控制行customRowFn属性
customRowFn(record) {
return {
on: {
click: () => {
// console.log("record", record);
this.tableSelectRow = record;
this.selectedRowKeys = [record.id];
// console.log("this.tableSelectRow", this.tableSelectRow);
// console.log("this.selectedRowKeys", this.selectedRowKeys);
},
},
};
},
handleTableChange(pagination) {
//分页、排序、筛选变化时触发
this.ipagination = pagination;
this.getlistassetstandardmodel();
},
}
// 资产型号确定
chosmodelok() {
console.log(this.assetsData);
console.log(this.tableSelectRow);
this.form.setFieldsValue({
assetName: this.tableSelectRow.standardName,
categoryId: this.tableSelectRow.categoryId,
assetModel: this.tableSelectRow.standardModel,
assetMetering: this.tableSelectRow.standardMetering,
});
(this.assetsData.categoryName = this.tableSelectRow.categoryName),
(this.chosmodel = false);
},

6.关于没有封装的单选框表格同时要实现点击行增加多选框选中效果

   selectedRowKeys: [],
selectionRows: [],

 methods: {
customRowFn(record) {
return {
on: {
click: () => {
// console.log("record", record);
// this.tableSelectRow = record;
// this.selectedRowKeys = [record.id];
// console.log("this.tableSelectRow", this.tableSelectRow);
// console.log("this.selectedRowKeys", this.selectedRowKeys);
let key = record.id;
let index = this.selectedRowKeys.indexOf(key);
// console.log("index", index);
if (index === -1) {
this.selectedRowKeys.push(key);
this.selectionRows.push(record);
} else {
this.selectionRows.splice(
this.selectionRows.indexOf(record.id),
1
);
this.selectedRowKeys.splice(
this.selectedRowKeys.indexOf(record.id),
1
);
}
console.log("this.selectionRows", this.selectionRows);
},
},
};
},
onChangeTableSelect(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
let mRow = JSON.parse(JSON.stringify(this.selectionRows));
selectionRows.forEach((item) => {
pushIfNotExist(mRow, item, "id");
});
this.selectionRows = this.selectedRowKeys.map((item) => {
let mObj = {};
mRow.forEach((items) => {
if (items.id == item) {
mObj = items;
}
});
console.log(mObj);
return mObj;
});
console.log(this.selectionRows);
},
clickShowModal(rows) {
let mRows = JSON.parse(JSON.stringify(rows));
this.onClearSelected();
this.selectedRowKeys = mRows.map((item) => item.id);
this.selectionRows = mRows;
this.visible = true;
this.loadData(1);
},
handleOk() {
this.visible = false;
this.$emit(
"select",
JSON.parse(JSON.stringify(this.selectedRowKeys)),
JSON.parse(JSON.stringify(this.selectionRows))
);
},
},
};

 这边表格分页效果是来自JeecgListMixin这个组件或者看5那边有单独写出来分页

/**
* 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm
* 高级查询按钮调用 superQuery方法  高级查询组件ref定义为superQueryModal
* data中url定义 list为查询列表  delete为删除单条记录  deleteBatch为批量删除
*/
import { filterObj } from "@/utils/util";
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from "@/api/manage";
export const JeecgListMixin = {
data() {
return {
/* 查询条件-请不要在queryParam中声明非字符串值的属性 */
queryParam: {},
/* 数据源 */
dataSource: [],
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ["10", "20", "30"],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条";
},
showQuickJumper: true,
showSizeChanger: true,
total: 0,
},
/* 排序参数 */
isorter: {
column: "createTime",
order: "desc",
},
/* 筛选参数 */
filters: {},
/* table加载状态 */
loading: false,
/* table选中keys*/
selectedRowKeys: [],
/* table选中records*/
selectionRows: [],
/* 查询折叠 */
toggleSearchStatus: false,
/* 高级查询条件生效状态 */
superQueryFlag: false,
/* 高级查询条件 */
superQueryParams: "",
/** 高级查询拼接方式 */
superQueryMatchType: "and",
};
},
created() {
if (!this.disableMixinCreated) {
console.log(" -- mixin created -- ");
this.loadData();
//初始化字典配置 在自己页面定义
this.initDictConfig();
}
},
computed: {},
methods: {
loadData(arg) {
if (!this.url.list) {
this.$message.error("请设置url.list属性!");
return;
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams(); //查询条件
this.loading = true;
getAction(this.url.list, params)
.then((res) => {
if (res.ok) {
//update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
this.dataSource = res.data.records || res.data;
if (res.data.total) {
this.ipagination.total = res.data.total;
} else {
this.ipagination.total = 0;
}
//update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
} else {
this.$message.warning(res.msg);
}
})
.finally(() => {
this.loading = false;
});
},
initDictConfig() {
console.log("--这是一个假的方法!");
},
handleSuperQuery(params, matchType) {
//高级查询方法
if (!params) {
this.superQueryParams = "";
this.superQueryFlag = false;
} else {
this.superQueryFlag = true;
this.superQueryParams = JSON.stringify(params);
this.superQueryMatchType = matchType;
}
this.loadData(1);
},
getQueryParams() {
//获取查询条件
let sqp = {};
if (this.superQueryParams) {
sqp["superQueryParams"] = encodeURI(this.superQueryParams);
sqp["superQueryMatchType"] = this.superQueryMatchType;
}
var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
// param.field = this.getQueryField();
param.current = this.ipagination.current;
param.size = this.ipagination.pageSize;
return filterObj(param);
},
getQueryField() {
//TODO 字段权限控制
var str = "id,";
this.columns.forEach(function (value) {
str += "," + value.dataIndex;
});
return str;
},
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
console.log(selectedRowKeys, selectionRows);
},
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
},
searchQuery() {
this.loadData(1);
},
superQuery() {
this.$refs.superQueryModal.show();
},
searchReset() {
this.queryParam = {};
this.loadData(1);
},
batchDel: function () {
if (!this.url.deleteBatch) {
this.$message.error("请设置url.deleteBatch属性!");
return;
}
if (this.selectedRowKeys.length <= 0) {
this.$message.warning("请选择一条记录！");
return;
} else {
var ids = "";
for (var a = 0; a  {
if (res.success) {
//重新计算分页问题
that.reCalculatePage(that.selectedRowKeys.length);
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res.message);
}
})
.finally(() => {
that.loading = false;
});
},
});
}
},
handleDelete: function (id) {
if (!this.url.delete) {
this.$message.error("请设置url.delete属性!");
return;
}
var that = this;
deleteAction(`${that.url.delete}/${id}`, { id: id }).then((res) => {
if (res.ok) {
//重新计算分页问题
that.reCalculatePage(1);
that.$message.success("操作成功");
that.loadData();
} else {
that.$message.warning(res.msg);
}
});
},
reCalculatePage(count) {
//总数量-count
let total = this.ipagination.total - count;
//获取删除后的分页数
let currentIndex = Math.ceil(total / this.ipagination.pageSize);
//删除后的分页数<所在当前页
if (currentIndex  0) {
// this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc";
}
this.ipagination = pagination;
this.loadData();
},
handleToggleSearch() {
this.toggleSearchStatus = !this.toggleSearchStatus;
},
// 给popup查询使用(查询区域不支持回填多个字段，限制只返回一个字段)
getPopupField(fields) {
return fields.split(",")[0];
},
modalFormOk() {
// 新增/修改 成功时，重载列表
this.loadData();
//清空列表选中
this.onClearSelected();
},
handleDetail: function (record) {
this.$refs.modalForm.edit(record);
this.$refs.modalForm.title = "详情";
this.$refs.modalForm.disableSubmit = true;
},
/* 导出 */
handleExportXls2() {
let paramsStr = encodeURI(JSON.stringify(this.getQueryParams()));
let url = `${window._CONFIG["domianURL"]}/${this.url.exportXlsUrl}?paramsStr=${paramsStr}`;
window.location.href = url;
},
handleExportXls(fileName) {
if (!fileName || typeof fileName != "string") {
fileName = "导出文件";
}
let param = this.getQueryParams();
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
param["selections"] = this.selectedRowKeys.join(",");
}
console.log("导出参数", param);
downFile(this.url.exportXlsUrl, param).then((data) => {
if (!data) {
this.$message.warning("文件下载失败");
return;
}
if (typeof window.navigator.msSaveBlob !== "undefined") {
window.navigator.msSaveBlob(new Blob([data], { type: "application/vnd.ms-excel" }), fileName + ".xls");
} else {
console.log(data);
let url = window.URL.createObjectURL(new Blob([data.data], { type: "application/vnd.ms-excel" }));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName + ".xls");
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
});
},
/* 图片预览 */
getImgView(text) {
if (text && text.indexOf(",") > 0) {
text = text.substring(0, text.indexOf(","));
}
return getFileAccessHttpUrl(text);
},
/* 文件下载 */
// update--autor:lvdandan-----date:20200630------for：修改下载文件方法名uploadFile改为downloadFile------
downloadFile(text) {
if (!text) {
this.$message.warning("未知的文件");
return;
}
if (text.indexOf(",") > 0) {
text = text.substring(0, text.indexOf(","));
}
let url = getFileAccessHttpUrl(text);
window.open(url);
},
},
};

7.打印和导出写法

// 打印资产标签列表
const printAssetList = (fileName, params) => downloadFile("/asset/warehousing/printAssetList", fileName, params, "pdf"); // 打印资产标签列表

//导出资产列表
const warehousingExport = (fileName, params) => downloadFile("/asset/assetsinfo/export", fileName, params, "get"); // 导出资产列表

  // 打印资产
clickAssetsPrint() {
this.assetsPrintLoading = true;
var mm = {};
mm.id = this.selectedRows.map((item) => {
return item.materialCode;
});
printAssetList("资产标签", mm)
.then((res) => {
this.assetsPrintLoading = false;
})
.catch((err) => {
this.assetsPrintLoading = false;
});
// this.$refs.barCode.transferData(this.selectedRows)
},
// 导出资产
getWarehousingExport() {
var mm = {};
mm.id = this.selectedRows.map((item) => {
return item.materialCode;
});
warehousingExport("资产列表", mm).then((res) => {
// let execlName = "资产文件名称";
// const buf = Buffer.from(res),
//   blob = new Blob([buf], { type: "application/vnd.ms-excel" }),
//   downloadElement = document.createElement('a'),
//   href = window.URL.createObjectURL(blob); // 创建下载的链接
// downloadElement.href = href;
// downloadElement.download = `${execlName}.xls`; // 下载后文件名
// document.body.appendChild(downloadElement);
// downloadElement.click(); // 点击下载
// window.URL.revokeObjectURL(href); // 释放掉blob对象
});
},

8.显示已删除的供应商

显示已删除的供应商

    onChange(e) {
this.yesOfno = e.target.checked;
this.$refs.table.refresh(this.queryParam);
},

    

编辑
删除

    refresh() {
var mm = {
current: 1,
total: 0,
size: this.pageSize,
}
this.loadData(mm);
},

 同时也有关于loadData传参查询

   // 加载数据方法 必须为 Promise 对象
loadData: (parameter) => {
this.queryParam.delFlag = this.yesOfno ? 1 : "";
return listSupplierinfo(Object.assign(parameter, this.queryParam)).then(
(res) => {
console.log(res);
var mm = { data: [] };
mm.size = res.data.size;
mm.current = res.data.current;
mm.totalCount = res.data.total;
mm.totalPage = res.data.pages;
mm.data = res.data.records;
return mm;
}
);
},

9.关于loadData传参查询

  loadData: (parameter) => {
return allotapplyPage(Object.assign(parameter, this.queryParam)).then(
(res) => {
var mm = { data: [] };
mm.size = res.data.size;
mm.current = res.data.current;
mm.totalCount = res.data.total;
mm.totalPage = res.data.pages;
mm.data = res.data.records;
return mm;
}
);
},