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" @submit="handleSubmit"><a-form-item:labelCol="labelCol":wrapperCol="wrapperCol"label="上级仓库"hasFeedback><a-tree-select:treeData="dataSource"placeholder="请选择":replaceFields="{title: 'name',key: 'id',value: 'id',children: 'children',}"v-decorator="['parentId', { initialValue: formData.parentId }]"/></a-form-item><a-form-item:labelCol="labelCol":wrapperCol="wrapperCol"label="仓库名称"hasFeedback><a-inputplaceholder="仓库名称"v-decorator="['name',{initialValue: formData.name,rules: validatorRules.inputIf.rules,},]"/></a-form-item><a-form-item:labelCol="labelCol":wrapperCol="wrapperCol"label="所属机构"required><vorganTreev-decorator="['orgId',{initialValue: formData.orgId,rules: validatorRules.inputIf.rules,},]"></vorganTree></a-form-item><a-form-item:labelCol="labelCol":wrapperCol="wrapperCol2"label="位置地点"><div class="disflex"><a-inputv-decorator="['address',{initialValue: formData.address,rules: validatorRules.inputIf.rules,},]"/><a-icon type="environment" @click="mapShow(true)" class="mapico" /><a-button type="link" @click="mapShow(true)">选择地点</a-button></div></a-form-item></a-form>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 = thisreturn 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 = truevar 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 = selectedRowKeysthis.selectedRows = selectedRowslet list = this.needTotalListthis.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 = thisthis.that = thislet d = []return d},renderAlert(h) {return h('span', {slot: 'message'}, this.renderMsg(h))},},render(h) {const _vm = thislet 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);},
};
使用
<s-tableref="tableAssets"size="default":rowKey="(record) => record.id":columns="columns1":data="loadDataListAssets":showAlertInfo="true"@onSelect="onChangeAssetsList"></s-table>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使用
<s-table ref="tableAssets2" size="default" :columns="columns2" :data="loadDataListAssets2"><span slot="action" slot-scope="text, record" class="flx-row-c-c"><div><a @click="handleDel(record)">删除</a></div></span>
</s-table> 3.关于单选封装好的组件使用
<j-select-supplierv-decorator="['supplierId']":multiple="false"@accountData="accountData2"></j-select-supplier>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);},<template><!-- 定义在这里的参数都是不可在外部覆盖的，防止出现问题 --><j-select-biz-component-two:value="value":ellipsisLength="25":listUrl="url.list":columns="columns":multiple="false"v-on="$listeners"v-bind="attrs"@commitData="commitData"/>
</template><script>
import JSelectBizComponentTwo from "./JSelectBizComponentTwo";export default {name: "JSelectSupplier",components: { JSelectBizComponentTwo },props: ["value"],data() {return {url: { list: "/asset/supplierinfo/page" },columns: [{ title: "供应商", align: "center", dataIndex: "name" },{title: "联系人",align: "center",dataIndex: "linkman",},{title: "联系电话",align: "center",dataIndex: "phone",},],// 定义在这里的参数都是可以在外部传递覆盖的，可以更灵活的定制化使用的组件default: {name: "供应商",width: "80%",displayKey: "name",returnKeys: ["id", "name"],rowKey: "id",valueKey: "id",queryParamText: "供应商名称", //左侧搜索框名称queryParamCode: "name", //左侧搜索框字段名},};},computed: {attrs() {return Object.assign(this.default, this.$attrs);},},methods: {// 提交数据commitData(e) {console.log(e);this.$emit("accountData", e);},},
};
</script><style lang="less" scoped></style>
外层也就是index
<template><a-row class="j-select-biz-component-box" type="flex" :gutter="8"><a-col class="left" :class="{'full': !buttons}"><slot name="left"><a-selectmode="multiple":placeholder="placeholder"v-model="selectValue":options="selectOptions"allowClear:disabled="disabled":open="selectOpen"style="width: 100%;"@dropdownVisibleChange="handleDropdownVisibleChange"@click.native="visible=(buttons?visible:true)"/></slot></a-col><a-col v-if="buttons" class="right"><a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button></a-col><j-select-biz-component-modalv-model="selectValue":visible.sync="visible"v-bind="modalProps":multiple="multiple"@options="handleOptions"@commitData="commitData"/></a-row>
</template><script>import JSelectBizComponentModal from './JSelectBizComponentModal'export default {name: 'JSelectBizComponent',components: { JSelectBizComponentModal },props: {value: {type: String,default: ''},/** 是否返回 id，默认 false，返回 code */returnId: {type: Boolean,default: false},placeholder: {type: String,default: '请选择'},disabled: {type: Boolean,default: false},// 是否支持多选，默认 truemultiple: {type: Boolean,default: true},// 是否显示按钮，默认 truebuttons: {type: Boolean,default: true},// 显示的 KeydisplayKey: {type: String,default: null},// 返回的 keyreturnKeys: {type: Array,default: () => ['id', 'id']},// 选择按钮文字selectButtonText: {type: String,default: '选择'},},data() {return {selectValue: [],selectOptions: [],dataSourceMap: {},visible: false,selectOpen: false,}},computed: {valueKey() {return this.returnId ? this.returnKeys[0] : this.returnKeys[1]},modalProps() {return Object.assign({valueKey: this.valueKey,multiple: this.multiple,returnKeys: this.returnKeys,displayKey: this.displayKey || this.valueKey}, this.$attrs)},},watch: {value: {immediate: true,handler(val) {console.log('cake撒',val)if (val) {this.selectValue = val.split(',')} else {this.selectValue = []}}},selectValue: {deep: true,handler(val) {console.log(this.materialUseTime)let rows = val.map(key => this.dataSourceMap[key])this.$emit('select', rows)let data = val.join(',')this.$emit('input', data)this.$emit('change', data)}}},methods: {commitData(e) {this.$emit('commitData',e)},handleOptions(options, dataSourceMap) {this.selectOptions = optionsthis.dataSourceMap = dataSourceMap},handleDropdownVisibleChange() {// 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效this.selectOpen = truethis.$nextTick(() => {this.selectOpen = false})},}}
</script><style lang="less" scoped>.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;}}
</style>内层
<template><a-modalcentered:title="name + '选择'":width="width":visible="visible"@ok="handleOk"@cancel="close"cancelText="关闭"><a-row :gutter="18"><a-col :span="16"><!-- 查询区域 --><div class="table-page-search-wrapper"><a-form layout="inline"><a-row :gutter="24"><a-col :span="14"><a-form-item :label="queryParamText || name"><a-inputv-model="queryParam[queryParamCode || valueKey]":placeholder="'请输入' + (queryParamText || name)"@pressEnter="searchQuery"/></a-form-item></a-col><a-col :span="8"><spanstyle="float: left; overflow: hidden"class="table-page-search-submitButtons"><a-button type="primary" @click="searchQuery" icon="search">查询</a-button><a-buttontype="primary"@click="searchReset"icon="reload"style="margin-left: 8px">重置</a-button></span></a-col></a-row></a-form></div><a-tablesize="small"bordered:rowKey="rowKey":columns="innerColumns":dataSource="dataSource":pagination="ipagination":loading="loading":scroll="{ y: 240 }":rowSelection="{selectedRowKeys,onChange: onSelectChange,type: multiple ? 'checkbox' : 'radio',width: '60px',}":customRow="customRowFn"@change="handleTableChange"></a-table></a-col><a-col :span="8"><a-card:title="'已选中的' + name":bordered="false":head-style="{ padding: 0 }":body-style="{ padding: 0 }"><a-tablesize="small":rowKey="rowKey"borderedv-bind="selectedTable"><span slot="action" slot-scope="text, record, index"><a @click="handleDeleteSelected(record, index)">删除</a></span></a-table></a-card></a-col></a-row></a-modal>
</template><script>
// import { getAction } from '@/api/manage'
import Ellipsis from "@/components/Ellipsis";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { cloneObject, pushIfNotExist } from "@/utils/util";export default {name: "JSelectBizComponentModal",mixins: [JeecgListMixin],components: { Ellipsis },props: {value: {type: Array,default: () => [],},visible: {type: Boolean,default: false,},valueKey: {type: String,required: true,},multiple: {type: Boolean,default: true,},width: {type: [Number, String],default: "80%",},name: {type: String,default: "",},listUrl: {type: String,required: true,default: "",},// 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realnamevalueUrl: {type: String,default: "",},displayKey: {type: String,default: null,},columns: {type: Array,required: true,default: () => [],},// 查询条件CodequeryParamCode: {type: String,default: null,},// 查询条件文字queryParamText: {type: String,default: null,},rowKey: {type: String,default: "id",},// 过长裁剪长度，设置为 -1 代表不裁剪ellipsisLength: {type: Number,default: 12,},},data() {return {innerValue: [],// 已选择列表selectedTable: {pagination: false,scroll: { y: 240 },columns: [{...this.columns[0],width: this.columns[0].widthRight || this.columns[0].width,},{...this.columns[1],width: this.columns[1].widthRight || this.columns[1].width,},{title: "操作",dataIndex: "action",align: "center",width: 60,scopedSlots: { customRender: "action" },},],dataSource: [],},renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),url: { list: this.listUrl },/* 分页参数 */ipagination: {current: 1,pageSize: 5,pageSizeOptions: ["5", "10", "20", "30"],showTotal: (total, range) => {return range[0] + "-" + range[1] + " 共" + total + "条";},showQuickJumper: true,showSizeChanger: true,total: 0,},options: [],dataSourceMap: {},};},computed: {// 表头innerColumns() {let columns = cloneObject(this.columns);columns.forEach((column) => {// 给所有的列加上过长裁剪if (this.ellipsisLength !== -1) {column.customRender = (text) => this.renderEllipsis(text);}});return columns;},},watch: {value: {deep: true,immediate: true,handler(val) {console.log(val);this.innerValue = cloneObject(val);this.selectedRowKeys = [];this.valueWatchHandler(val);this.queryOptionsByValue(val);},},dataSource: {deep: true,handler(val) {// 重置之后key恢复this.emitOptions(val);this.valueWatchHandler(this.innerValue);},},selectedRowKeys: {immediate: true,deep: true,handler(val) {this.selectedTable.dataSource = val.map((key) => {for (let data of this.dataSource) {if (data[this.rowKey] === key) {pushIfNotExist(this.innerValue, data[this.valueKey]);return data;}}for (let data of this.selectedTable.dataSource) {if (data[this.rowKey] === key) {pushIfNotExist(this.innerValue, data[this.valueKey]);return data;}}console.warn("未找到选择的行信息，key：" + key);return {};});},},},methods: {/** 关闭弹窗 */close() {this.$emit("update:visible", false);},valueWatchHandler(val) {console.log(val);val.forEach((item) => {this.dataSource.concat(this.selectedTable.dataSource).forEach((data) => {if (data[this.valueKey] === item) {pushIfNotExist(this.selectedRowKeys, data[this.rowKey]);}});});},queryOptionsByValue(value) {console.log(value);if (!value || value.length === 0) {return;}// 判断options是否存在value，如果已存在数据就不再请求后台了let notExist = false;for (let val of value) {let find = false;for (let option of this.options) {if (val === option.value) {find = true;break;}}if (!find) {notExist = true;break;}}if (!notExist) return;// listDepartUser( {// // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确// // [this.valueKey]: value.join(',') + ',',// pageNo: 1,// pageSize: value.length// }).then((res) => {// if (res.success) {// let dataSource = res.result// if (!(dataSource instanceof Array)) {// dataSource = res.result.records// }// this.emitOptions(dataSource, (data) => {// pushIfNotExist(this.innerValue, data[this.valueKey])// pushIfNotExist(this.selectedRowKeys, data[this.rowKey])// pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)// })// }// })},emitOptions(dataSource, callback) {dataSource.forEach((data) => {let key = data[this.valueKey];this.dataSourceMap[key] = data;pushIfNotExist(this.options,{ label: data[this.displayKey || this.valueKey], value: key },"value");typeof callback === "function" ? callback(data) : "";});this.$emit("options", this.options, this.dataSourceMap);},/** 完成选择 */handleOk() {let value = this.selectedTable.dataSource.map((data) => data[this.valueKey]);this.$emit("input", value);this.$emit("commitData", this.selectedTable.dataSource);this.close();},/** 删除已选择的 */handleDeleteSelected(record, index) {this.selectionRows.splice(this.selectedRowKeys.indexOf(record[this.rowKey]),1);this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]),1);this.selectedTable.dataSource.splice(index, 1);console.log(this.selectedRowKeys, this.selectionRows);},customRowFn(record) {return {on: {click: () => {let key = record[this.rowKey];if (!this.multiple) {this.selectedRowKeys = [key];this.selectedTable.dataSource = [record];} else {let index = this.selectedRowKeys.indexOf(key);if (index === -1) {this.selectedRowKeys.push(key);this.selectedTable.dataSource.push(record);} else {this.handleDeleteSelected(record, index);}}},},};},},
};
</script>
<style lang="less" scoped>
</style>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 < this.selectedRowKeys.length; a++) {ids += this.selectedRowKeys[a] + ",";}var that = this;this.$confirm({title: "确认删除",content: "是否删除选中数据?",onOk: function () {that.loading = true;deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {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) {//总数量-countlet total = this.ipagination.total - count;//获取删除后的分页数let currentIndex = Math.ceil(total / this.ipagination.pageSize);//删除后的分页数<所在当前页if (currentIndex < this.ipagination.current) {this.ipagination.current = currentIndex;}console.log("currentIndex", currentIndex);},handleEdit: function (record) {this.$refs.modalForm.edit(record);this.$refs.modalForm.title = "编辑";this.$refs.modalForm.disableSubmit = false;},handleAdd: function () {this.$refs.modalForm.add();this.$refs.modalForm.title = "新增";this.$refs.modalForm.disableSubmit = false;},handleTableChange(pagination, filters, sorter) {//分页、排序、筛选变化时触发//TODO 筛选console.log(pagination);if (Object.keys(sorter).length > 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 EllipsisEllipsis.vue
<script>import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'export default {name: 'Ellipsis',props: {prefixCls: {type: String,default: 'ant-pro-ellipsis'},tooltip: {type: Boolean,default: true,},length: {type: Number,default: 25,},lines: {type: Number,default: 1},fullWidthRecognition: {type: Boolean,default: false}},methods: {},render() {const { tooltip, length } = this.$propslet text = ''// 处理没有default插槽时的特殊情况if (this.$slots.default) {text = this.$slots.default.map(vNode => vNode.text).join('')}// 判断是否显示 tooltipif (tooltip && getStrFullLength(text) > length) {return (<a-tooltip><template slot="title">{text}</template><span>{cutStrByFullLength(text, this.length) + '…'}</span></a-tooltip>)} else {return (<span>{text}</span>)}}}
</script>4.关于封装好的复选表格
<j-select-contract:trigger-change="true"v-decorator="['purchaseContractIds']"customReturnField="purchaseContractIds"@accountData="changeContract":multiple="true":status="2"></j-select-contract>import JSelectContract from "@/components/jeecgbiz/JSelectContract";
<template><!-- 定义在这里的参数都是不可在外部覆盖的，防止出现问题 --><j-select-biz-component:value="value":ellipsisLength="25":listUrl="url.list":columns="columns":multiple="multiple"v-on="$listeners"v-bind="attrs"@commitData="commitData"/>
</template><script>
import JSelectBizComponent from "./JSelectBizComponent";export default {name: "JSelectContract",components: { JSelectBizComponent },props: ["value", "multiple"],data() {return {url: { list: "/asset/purchasecontract/page?contractStatus=2&isAllTake=0" },columns: [{ title: "合同单据号", align: "center", width: "25%", widthRight: "70%", dataIndex: "purchaseContractNo" },{ title: "订购时间", align: "center", width: "25%", dataIndex: "orderDate" },{ title: "采购员", align: "center", width: "20%", dataIndex: "purchasePersonName" },{ title: "采购部门", align: "center", width: "20%", dataIndex: "organName" },],// 定义在这里的参数都是可以在外部传递覆盖的，可以更灵活的定制化使用的组件default: {name: "采购合同",width: 1200,displayKey: "purchaseContractNo",returnKeys: ["id", "purchaseContractNo", "organName", "organId"],queryParamText: "合同单据号",queryParamCode: "purchaseContractNo",},};},computed: {attrs() {return Object.assign(this.default, this.$attrs);},},methods: {// 提交数据commitData(e) {this.$emit("accountData", e);},},
};
</script><style lang="less" scoped></style>
index外层
<template><a-row class="j-select-biz-component-box" type="flex" :gutter="8"><a-col class="left" :class="{'full': !buttons}"><slot name="left"><a-selectmode="multiple":placeholder="placeholder"v-model="selectValue":options="selectOptions"allowClear:disabled="disabled":open="selectOpen"style="width: 100%;"@dropdownVisibleChange="handleDropdownVisibleChange"@click.native="visible=(buttons?visible:true)"/></slot></a-col><a-col v-if="buttons" class="right"><a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button></a-col><j-select-biz-component-modalv-model="selectValue":visible.sync="visible"v-bind="modalProps":multiple="multiple"@options="handleOptions"@commitData="commitData"/></a-row>
</template><script>import JSelectBizComponentModal from './JSelectBizComponentModal'export default {name: 'JSelectBizComponent',components: { JSelectBizComponentModal },props: {value: {type: String,default: ''},/** 是否返回 id，默认 false，返回 code */returnId: {type: Boolean,default: false},placeholder: {type: String,default: '请选择'},disabled: {type: Boolean,default: false},// 是否支持多选，默认 truemultiple: {type: Boolean,default: true},// 是否显示按钮，默认 truebuttons: {type: Boolean,default: true},// 显示的 KeydisplayKey: {type: String,default: null},// 返回的 keyreturnKeys: {type: Array,default: () => ['id', 'id']},// 选择按钮文字selectButtonText: {type: String,default: '选择'},},data() {return {selectValue: [],selectOptions: [],dataSourceMap: {},visible: false,selectOpen: false,}},computed: {valueKey() {return this.returnId ? this.returnKeys[0] : this.returnKeys[1]},modalProps() {return Object.assign({valueKey: this.valueKey,multiple: this.multiple,returnKeys: this.returnKeys,displayKey: this.displayKey || this.valueKey}, this.$attrs)},},watch: {value: {immediate: true,handler(val) {console.log('cake撒',val)if (val) {this.selectValue = val.split(',')} else {this.selectValue = []}}},selectValue: {deep: true,handler(val) {console.log(this.materialUseTime)let rows = val.map(key => this.dataSourceMap[key])this.$emit('select', rows)let data = val.join(',')this.$emit('input', data)this.$emit('change', data)}}},methods: {commitData(e) {this.$emit('commitData',e)},handleOptions(options, dataSourceMap) {this.selectOptions = optionsthis.dataSourceMap = dataSourceMap},handleDropdownVisibleChange() {// 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效this.selectOpen = truethis.$nextTick(() => {this.selectOpen = false})},}}
</script><style lang="less" scoped>.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;}}
</style>内层
<template><a-modalcentered:title="name + '选择'":width="width":visible="visible"@ok="handleOk"@cancel="close"cancelText="关闭"><a-row :gutter="18"><a-col :span="16"><!-- 查询区域 --><div class="table-page-search-wrapper"><a-form :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }"><a-row :gutter="24"><a-col :span="14"><a-form-item :label="queryParamText || name"><a-inputv-model="queryParam[queryParamCode || valueKey]":placeholder="'请输入' + (queryParamText || name)"@pressEnter="searchQuery"/></a-form-item></a-col><a-col :span="8"><spanstyle="float: left; overflow: hidden"class="table-page-search-submitButtons"><a-button type="primary" @click="searchQuery" icon="search">查询</a-button><a-buttontype="primary"@click="searchReset"icon="reload"style="margin-left: 8px">重置</a-button></span></a-col></a-row></a-form></div><a-tablesize="small"bordered:rowKey="rowKey":columns="innerColumns":dataSource="dataSource":pagination="ipagination":loading="loading":scroll="{ y: 240 }":rowSelection="{selectedRowKeys,onChange: onSelectChange,type: multiple ? 'checkbox' : 'radio',}":customRow="customRowFn"@change="handleTableChange"></a-table></a-col><a-col :span="8"><a-card:title="'已选' + name":bordered="false":head-style="{ padding: 0 }":body-style="{ padding: 0 }"><a-tablesize="small":rowKey="rowKey"borderedv-bind="selectedTable"><span slot="action" slot-scope="text, record, index"><a @click="handleDeleteSelected(record, index)">删除</a></span></a-table></a-card></a-col></a-row></a-modal>
</template><script>
// import { getAction } from '@/api/manage'
import Ellipsis from "@/components/Ellipsis";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { cloneObject, pushIfNotExist } from "@/utils/util";
import { listDepartUser } from "@/api/apis";export default {name: "JSelectBizComponentModal",mixins: [JeecgListMixin],components: { Ellipsis },props: {value: {type: Array,default: () => [],},visible: {type: Boolean,default: false,},valueKey: {type: String,required: true,},multiple: {type: Boolean,default: true,},width: {type: Number,default: 900,},name: {type: String,default: "",},listUrl: {type: String,required: true,default: "",},// 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realnamevalueUrl: {type: String,default: "",},displayKey: {type: String,default: null,},columns: {type: Array,required: true,default: () => [],},// 查询条件CodequeryParamCode: {type: String,default: null,},// 查询条件文字queryParamText: {type: String,default: null,},rowKey: {type: String,default: "id",},// 过长裁剪长度，设置为 -1 代表不裁剪ellipsisLength: {type: Number,default: 12,},},data() {return {innerValue: [],// 已选择列表selectedTable: {pagination: false,scroll: { y: 240 },columns: [{...this.columns[0],width: this.columns[0].widthRight || this.columns[0].width,},{title: "操作",dataIndex: "action",align: "center",width: 60,scopedSlots: { customRender: "action" },},],dataSource: [],},renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),url: { list: this.listUrl },/* 分页参数 */ipagination: {current: 1,pageSize: 5,pageSizeOptions: ["5", "10", "20", "30"],showTotal: (total, range) => {return range[0] + "-" + range[1] + " 共" + total + "条";},showQuickJumper: true,showSizeChanger: true,total: 0,},options: [],dataSourceMap: {},};},computed: {// 表头innerColumns() {let columns = cloneObject(this.columns);columns.forEach((column) => {// 给所有的列加上过长裁剪if (this.ellipsisLength !== -1) {column.customRender = (text) => this.renderEllipsis(text);}});return columns;},},watch: {value: {deep: true,immediate: true,handler(val) {console.log(val);this.innerValue = cloneObject(val);this.selectedRowKeys = [];this.valueWatchHandler(val);this.queryOptionsByValue(val);},},dataSource: {deep: true,handler(val) {// 重置之后key恢复this.emitOptions(val);this.valueWatchHandler(this.innerValue);},},selectedRowKeys: {immediate: true,deep: true,handler(val) {this.selectedTable.dataSource = val.map((key) => {for (let data of this.dataSource) {if (data[this.rowKey] === key) {pushIfNotExist(this.innerValue, data[this.valueKey]);return data;}}for (let data of this.selectedTable.dataSource) {if (data[this.rowKey] === key) {pushIfNotExist(this.innerValue, data[this.valueKey]);return data;}}console.warn("未找到选择的行信息，key：" + key);return {};});},},},methods: {/** 关闭弹窗 */close() {this.$emit("update:visible", false);},valueWatchHandler(val) {console.log(val);val.forEach((item) => {this.dataSource.concat(this.selectedTable.dataSource).forEach((data) => {if (data[this.valueKey] === item) {pushIfNotExist(this.selectedRowKeys, data[this.rowKey]);}});});},queryOptionsByValue(value) {console.log(value);if (!value || value.length === 0) {return;}// 判断options是否存在value，如果已存在数据就不再请求后台了let notExist = false;for (let val of value) {let find = false;for (let option of this.options) {if (val === option.value) {find = true;break;}}if (!find) {notExist = true;break;}}if (!notExist) return;// listDepartUser( {// // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确// // [this.valueKey]: value.join(',') + ',',// pageNo: 1,// pageSize: value.length// }).then((res) => {// if (res.success) {// let dataSource = res.result// if (!(dataSource instanceof Array)) {// dataSource = res.result.records// }// this.emitOptions(dataSource, (data) => {// pushIfNotExist(this.innerValue, data[this.valueKey])// pushIfNotExist(this.selectedRowKeys, data[this.rowKey])// pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)// })// }// })},emitOptions(dataSource, callback) {dataSource.forEach((data) => {let key = data[this.valueKey];this.dataSourceMap[key] = data;pushIfNotExist(this.options,{ label: data[this.displayKey || this.valueKey], value: key },"value");typeof callback === "function" ? callback(data) : "";});this.$emit("options", this.options, this.dataSourceMap);},/** 完成选择 */handleOk() {let value = this.selectedTable.dataSource.map((data) => data[this.valueKey]);this.$emit("input", value);console.log(this.selectedTable.dataSource);this.$emit("commitData", this.selectedTable.dataSource);this.close();},/** 删除已选择的 */handleDeleteSelected(record, index) {this.selectionRows.splice(this.selectedRowKeys.indexOf(record[this.rowKey]),1);this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]),1);this.selectedTable.dataSource.splice(index, 1);console.log(this.selectedRowKeys, this.selectionRows);},customRowFn(record) {return {on: {click: () => {let key = record[this.rowKey];if (!this.multiple) {this.selectedRowKeys = [key];this.selectedTable.dataSource = [record];} else {let index = this.selectedRowKeys.indexOf(key);if (index === -1) {this.selectedRowKeys.push(key);this.selectedTable.dataSource.push(record);} else {this.handleDeleteSelected(record, index);}}},},};},},
};
</script>
<style lang="less" scoped>
</style>
这边的方法通单选框是一样的
5.关于没有封装的单选框表格同时要实现点击行增加单选框选中效果
<a-tablestyle="width: 100%; margin-top: 50px":rowKey="(record) => record.id":dataSource="tableData":columns="columns":row-selection="{type: 'radio',onChange: onSelectChange,selectedRowKeys: selectedRowKeys,}":customRow="customRowFn"@change="handleTableChange":pagination="ipagination":loading="tableLoading"bordered></a-table>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.关于没有封装的单选框表格同时要实现点击行增加多选框选中效果
<a-table:columns="columns":data-source="dataSource"size="small"rowKey="id":loading="loading":pagination="ipagination"bordered:rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onChangeTableSelect,}":customRow="customRowFn"@change="handleTableChange"> 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 < this.selectedRowKeys.length; a++) {ids += this.selectedRowKeys[a] + ",";}var that = this;this.$confirm({title: "确认删除",content: "是否删除选中数据?",onOk: function () {that.loading = true;deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {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) {//总数量-countlet total = this.ipagination.total - count;//获取删除后的分页数let currentIndex = Math.ceil(total / this.ipagination.pageSize);//删除后的分页数<所在当前页if (currentIndex < this.ipagination.current) {this.ipagination.current = currentIndex;}console.log("currentIndex", currentIndex);},handleEdit: function (record) {this.$refs.modalForm.edit(record);this.$refs.modalForm.title = "编辑";this.$refs.modalForm.disableSubmit = false;},handleAdd: function () {this.$refs.modalForm.add();this.$refs.modalForm.title = "新增";this.$refs.modalForm.disableSubmit = false;},handleTableChange(pagination, filters, sorter) {//分页、排序、筛选变化时触发//TODO 筛选console.log(pagination);if (Object.keys(sorter).length > 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对象});},
