网站充值怎么做分录,网站加背景音乐,百度最新收录方法,网站建设好销售吗1.关于vue2 antd 视图更新问题
1.一种强制更新
Vue2是通过用Object…defineProperty来设置数据的getter和setter实现对数据和以及视图改变的监听的。对于数组和对象这种引用类型来说#xff0c;getter和setter无法检测到它们内部的变化。用这种 this.$set(this.form, getter和setter无法检测到它们内部的变化。用这种 this.$set(this.form, fileUrl, urlArr.join(,));
2.如果碰到
a-form :formform form: this.$form.createForm(this), a-form :formform submithandleSubmita-form-item:labelCollabelCol:wrapperColwrapperCollabel上级仓库hasFeedbacka-tree-select:treeDatadataSourceplaceholder请选择:replaceFields{title: name,key: id,value: id,children: children,}v-decorator[parentId, { initialValue: formData.parentId }]//a-form-itema-form-item:labelCollabelCol:wrapperColwrapperCollabel仓库名称hasFeedbacka-inputplaceholder仓库名称v-decorator[name,{initialValue: formData.name,rules: validatorRules.inputIf.rules,},]//a-form-itema-form-item:labelCollabelCol:wrapperColwrapperCollabel所属机构requiredvorganTreev-decorator[orgId,{initialValue: formData.orgId,rules: validatorRules.inputIf.rules,},]/vorganTree/a-form-itema-form-item:labelCollabelCol:wrapperColwrapperCol2label位置地点div classdisflexa-inputv-decorator[address,{initialValue: formData.address,rules: validatorRules.inputIf.rules,},]/a-icon typeenvironment clickmapShow(true) classmapico /a-button typelink clickmapShow(true)选择地点/a-button/div/a-form-item/a-form
a-form :formform 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-tablereftableAssetssizedefault:rowKey(record) record.id:columnscolumns1:dataloadDataListAssets:showAlertInfotrueonSelectonChangeAssetsList/s-tableloadDataListAssets: (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 reftableAssets2 sizedefault :columnscolumns2 :dataloadDataListAssets2span slotaction slot-scopetext, record classflx-row-c-cdiva clickhandleDel(record)删除/a/div/span
/s-table
3.关于单选封装好的组件使用 j-select-supplierv-decorator[supplierId]:multiplefalseaccountDataaccountData2/j-select-supplierimport 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:valuevalue:ellipsisLength25:listUrlurl.list:columnscolumns:multiplefalsev-on$listenersv-bindattrscommitDatacommitData/
/templatescript
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);},},
};
/scriptstyle langless scoped/style外层也就是index
templatea-row classj-select-biz-component-box typeflex :gutter8a-col classleft :class{full: !buttons}slot namelefta-selectmodemultiple:placeholderplaceholderv-modelselectValue:optionsselectOptionsallowClear:disableddisabled:openselectOpenstylewidth: 100%;dropdownVisibleChangehandleDropdownVisibleChangeclick.nativevisible(buttons?visible:true)//slot/a-cola-col v-ifbuttons classrighta-button typeprimary iconsearch :disableddisabled clickvisibletrue{{selectButtonText}}/a-button/a-colj-select-biz-component-modalv-modelselectValue:visible.syncvisiblev-bindmodalProps:multiplemultipleoptionshandleOptionscommitDatacommitData//a-row
/templatescriptimport JSelectBizComponentModal from ./JSelectBizComponentModalexport 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})},}}
/scriptstyle langless 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 内层
templatea-modalcentered:titlename 选择:widthwidth:visiblevisibleokhandleOkcancelclosecancelText关闭a-row :gutter18a-col :span16!-- 查询区域 --div classtable-page-search-wrappera-form layoutinlinea-row :gutter24a-col :span14a-form-item :labelqueryParamText || namea-inputv-modelqueryParam[queryParamCode || valueKey]:placeholder请输入 (queryParamText || name)pressEntersearchQuery//a-form-item/a-cola-col :span8spanstylefloat: left; overflow: hiddenclasstable-page-search-submitButtonsa-button typeprimary clicksearchQuery iconsearch查询/a-buttona-buttontypeprimaryclicksearchReseticonreloadstylemargin-left: 8px重置/a-button/span/a-col/a-row/a-form/diva-tablesizesmallbordered:rowKeyrowKey:columnsinnerColumns:dataSourcedataSource:paginationipagination:loadingloading:scroll{ y: 240 }:rowSelection{selectedRowKeys,onChange: onSelectChange,type: multiple ? checkbox : radio,width: 60px,}:customRowcustomRowFnchangehandleTableChange/a-table/a-cola-col :span8a-card:title已选中的 name:borderedfalse:head-style{ padding: 0 }:body-style{ padding: 0 }a-tablesizesmall:rowKeyrowKeyborderedv-bindselectedTablespan slotaction slot-scopetext, record, indexa clickhandleDeleteSelected(record, index)删除/a/span/a-table/a-card/a-col/a-row/a-modal
/templatescript
// 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 langless 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 ./Ellipsisexport default Ellipsis
Ellipsis.vue
scriptimport { cutStrByFullLength, getStrFullLength } from /components/_util/StringUtilexport 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-tooltiptemplate slottitle{text}/templatespan{cutStrByFullLength(text, this.length) …}/span/a-tooltip)} else {return (span{text}/span)}}}
/script
4.关于封装好的复选表格 j-select-contract:trigger-changetruev-decorator[purchaseContractIds]customReturnFieldpurchaseContractIdsaccountDatachangeContract:multipletrue:status2/j-select-contract
import JSelectContract from /components/jeecgbiz/JSelectContract; template!-- 定义在这里的参数都是不可在外部覆盖的防止出现问题 --j-select-biz-component:valuevalue:ellipsisLength25:listUrlurl.list:columnscolumns:multiplemultiplev-on$listenersv-bindattrscommitDatacommitData/
/templatescript
import JSelectBizComponent from ./JSelectBizComponent;export default {name: JSelectContract,components: { JSelectBizComponent },props: [value, multiple],data() {return {url: { list: /asset/purchasecontract/page?contractStatus2isAllTake0 },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);},},
};
/scriptstyle langless scoped/styleindex外层
templatea-row classj-select-biz-component-box typeflex :gutter8a-col classleft :class{full: !buttons}slot namelefta-selectmodemultiple:placeholderplaceholderv-modelselectValue:optionsselectOptionsallowClear:disableddisabled:openselectOpenstylewidth: 100%;dropdownVisibleChangehandleDropdownVisibleChangeclick.nativevisible(buttons?visible:true)//slot/a-cola-col v-ifbuttons classrighta-button typeprimary iconsearch :disableddisabled clickvisibletrue{{selectButtonText}}/a-button/a-colj-select-biz-component-modalv-modelselectValue:visible.syncvisiblev-bindmodalProps:multiplemultipleoptionshandleOptionscommitDatacommitData//a-row
/templatescriptimport JSelectBizComponentModal from ./JSelectBizComponentModalexport 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})},}}
/scriptstyle langless 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 内层
templatea-modalcentered:titlename 选择:widthwidth:visiblevisibleokhandleOkcancelclosecancelText关闭a-row :gutter18a-col :span16!-- 查询区域 --div classtable-page-search-wrappera-form :labelCol{ span: 5 } :wrapperCol{ span: 18, offset: 1 }a-row :gutter24a-col :span14a-form-item :labelqueryParamText || namea-inputv-modelqueryParam[queryParamCode || valueKey]:placeholder请输入 (queryParamText || name)pressEntersearchQuery//a-form-item/a-cola-col :span8spanstylefloat: left; overflow: hiddenclasstable-page-search-submitButtonsa-button typeprimary clicksearchQuery iconsearch查询/a-buttona-buttontypeprimaryclicksearchReseticonreloadstylemargin-left: 8px重置/a-button/span/a-col/a-row/a-form/diva-tablesizesmallbordered:rowKeyrowKey:columnsinnerColumns:dataSourcedataSource:paginationipagination:loadingloading:scroll{ y: 240 }:rowSelection{selectedRowKeys,onChange: onSelectChange,type: multiple ? checkbox : radio,}:customRowcustomRowFnchangehandleTableChange/a-table/a-cola-col :span8a-card:title已选 name:borderedfalse:head-style{ padding: 0 }:body-style{ padding: 0 }a-tablesizesmall:rowKeyrowKeyborderedv-bindselectedTablespan slotaction slot-scopetext, record, indexa clickhandleDeleteSelected(record, index)删除/a/span/a-table/a-card/a-col/a-row/a-modal
/templatescript
// 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 langless scoped
/style
这边的方法通单选框是一样的
5.关于没有封装的单选框表格同时要实现点击行增加单选框选中效果
a-tablestylewidth: 100%; margin-top: 50px:rowKey(record) record.id:dataSourcetableData:columnscolumns:row-selection{type: radio,onChange: onSelectChange,selectedRowKeys: selectedRowKeys,}:customRowcustomRowFnchangehandleTableChange:paginationipagination:loadingtableLoadingbordered/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:columnscolumns:data-sourcedataSourcesizesmallrowKeyid:loadingloading:paginationipaginationbordered:rowSelection{selectedRowKeys: selectedRowKeys,onChange: onChangeTableSelect,}:customRowcustomRowFnchangehandleTableChange 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对象});},
8.显示已删除的供应商
a-checkboxstylemargin-left: 20pxchangeonChange:valueyesOfno显示已删除的供应商/a-checkbox onChange(e) {this.yesOfno e.target.checked;this.$refs.table.refresh(this.queryParam);}, s-tablereftablesizedefault:columnscolumns:dataloadDataonSelectonChangeTableSelectspan slotaction slot-scopetext, recorda clickhandleEdit(record)编辑/aa-divider typevertical /a-popconfirm title你确定要删除吗 confirmdeleteTable(record)a删除/a/a-popconfirm/span/s-table 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;});},
