admin/LingXi-CRM
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: export excel file

Browse Source
This commit is contained in:
zchengo
2022-12-27 19:18:58 +08:00
parent f11313797b
commit 2235516232
18 changed files with 418 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/api/contract.js
+10
View File
@@ -52,4 +52,14 @@ export function queryContractPlist(param) {
method: 'post',
data: param,
})
}
// 导出Excel表格
export function contractExport(param) {
return request({
url: '/contract/export',
method: 'get',
responseType: 'blob',
params: param,
})
}
web/src/api/customer.js
+10
View File
@@ -52,4 +52,14 @@ export function queryCustomerOption(param) {
method: 'get',
params: param,
})
}
// 导出Excel表格
export function customerExport(param) {
return request({
url: '/customer/export',
method: 'get',
responseType: 'blob',
params: param,
})
}
web/src/api/product.js
+10
View File
@@ -43,4 +43,14 @@ export function queryProductList(param) {
method: 'get',
params: param,
})
}
// 导出Excel表格
export function productExport(param) {
return request({
url: '/product/export',
method: 'get',
responseType: 'blob',
params: param,
})
}
web/src/views/Contract.vue
+45 -17
View File
@@ -1,15 +1,23 @@
<template>
<div>
<a-space style="margin-bottom: 20px; width: 100%;">
<a-input v-model:value="keyWord" placeholder="合同编号" style="width: 280px; margin-right: 50px;">
<template #suffix>
<search-outlined style="color: rgba(0, 0, 0, 0.45)" @click="onSearch" />
</template>
</a-input>
<a-button type="primary" @click="onContracts">全部合同</a-button>
<a-button type="primary" @click="onDelete" :disabled="disabled" danger>删除</a-button>
<a-button type="primary" @click="onCreate">新建</a-button>
</a-space>
<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
<a-space>
<a-input v-model:value="keyWord" placeholder="合同编号" style="width: 280px; margin-right: 50px;">
<template #suffix>
<search-outlined style="color: rgba(0, 0, 0, 0.45)" @click="onSearch" />
</template>
</a-input>
<a-button type="primary" @click="onContracts">全部合同</a-button>
<a-button type="primary" @click="onDelete" :disabled="disabled" danger>删除</a-button>
<a-button type="primary" @click="onCreate">新建</a-button>
</a-space>
<div>
<a-button type="primary" @click="onExport">
<template #icon>
<DownloadOutlined />
</template>导出</a-button>
</div>
</div>
<a-table rowKey="id"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectedConteactIds, getCheckboxProps: defaultSelected }"
:columns="columns" :data-source="data.contractList"
@@ -63,14 +71,14 @@
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="合同开始时间" name="beginTime">
<a-date-picker v-model:value="contract.beginTime" placeholder="选择日期"
style="width: 100%" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"/>
<a-date-picker v-model:value="contract.beginTime" placeholder="选择日期" style="width: 100%"
format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="合同结束时间" name="overTime">
<a-date-picker v-model:value="contract.overTime" placeholder="选择日期"
style="width: 100%" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"/>
<a-date-picker v-model:value="contract.overTime" placeholder="选择日期" style="width: 100%"
format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
</a-form-item>
</a-col>
</a-row>
@@ -164,9 +172,9 @@
<script>
import { ref, reactive, onMounted, createVNode } from 'vue';
import { SearchOutlined, ExclamationCircleOutlined, UpCircleOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
import { SearchOutlined, ExclamationCircleOutlined, UpCircleOutlined, DownCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import moment from 'moment'
import { createContract, updateContract, queryContractList, queryContractInfo, deleteContract, queryContractPlist } from '../api/contract';
import { createContract, updateContract, queryContractList, queryContractInfo, deleteContract, queryContractPlist, contractExport } from '../api/contract';
import { queryProductList } from "../api/product";
import { queryCustomerOption } from "../api/customer";
import { message, Modal } from 'ant-design-vue';
@@ -175,7 +183,8 @@ export default {
components: {
SearchOutlined,
UpCircleOutlined,
DownCircleOutlined
DownCircleOutlined,
DownloadOutlined
},
setup() {
@@ -612,6 +621,24 @@ export default {
visible.value = false
};
// 导出表格
const onExport = () => {
contractExport().then((res) => {
if (res.data.type == 'application/json'){
message.error('导出错误！')
} else {
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel"
})
let a = document.createElement('a')
a.setAttribute("download", "合同信息.xlsx");
a.href = window.URL.createObjectURL(blob)
a.click()
window.URL.revokeObjectURL(a.href)
}
})
}
// 点击取消产品列表
const onCancelProductList = () => {
productListVisible.value = false
@@ -652,6 +679,7 @@ export default {
delProduct,
pagination,
onPagination,
onExport,
onContracts,
onPaginationProduct,
};
web/src/views/Customer.vue
+41 -14
View File
@@ -1,16 +1,23 @@
<template>
<div>
<a-space style="margin-bottom: 20px; width: 100%;">
<a-input v-model:value="keyWord" placeholder="客户名称" style="width: 280px; margin-right: 50px;">
<template #suffix>
<search-outlined style="color: rgba(0, 0, 0, 0.45)" @click="onSearch" />
</template>
</a-input>
<a-button type="primary" @click="onCustomers">全部客户</a-button>
<a-button type="primary" @click="onDelete" :disabled="disabled" danger>删除</a-button>
<a-button type="primary" @click="onCreate">新建</a-button>
</a-space>
<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
<a-space>
<a-input v-model:value="keyWord" placeholder="客户名称" style="width: 280px; margin-right: 50px;">
<template #suffix>
<search-outlined style="color: rgba(0, 0, 0, 0.45)" @click="onSearch" />
</template>
</a-input>
<a-button type="primary" @click="onCustomers">全部客户</a-button>
<a-button type="primary" @click="onDelete" :disabled="disabled" danger>删除</a-button>
<a-button type="primary" @click="onCreate">新建</a-button>
</a-space>
<div>
<a-button type="primary" @click="onExport">
<template #icon>
<DownloadOutlined />
</template>导出</a-button>
</div>
</div>
<a-table rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns" :data-source="data.customerList"
:pagination="{ current: pagination.current, pageSize: pagination.pageSize, total: pagination.total, onChange: onPagination }"
@@ -119,15 +126,16 @@
<script>
import { ref, reactive, onMounted, createVNode } from 'vue';
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { SearchOutlined, ExclamationCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import moment from 'moment'
import { createCustomer, updateCustomer, queryCustomerList, queryCustomerInfo, deleteCustomer } from '../api/customer';
import { createCustomer, updateCustomer, queryCustomerList, queryCustomerInfo, deleteCustomer, customerExport } from '../api/customer';
import { message, Modal } from 'ant-design-vue';
import regionData from '../assets/region';
export default {
components: {
SearchOutlined
SearchOutlined,
DownloadOutlined
},
setup() {
const columns = [{
@@ -366,6 +374,24 @@ export default {
})
}
// 导出表格
const onExport = () => {
customerExport().then((res) => {
if (res.data.type == 'application/json'){
message.error('导出错误！')
} else {
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel"
})
let a = document.createElement('a')
a.setAttribute("download", "客户信息.xlsx");
a.href = window.URL.createObjectURL(blob)
a.click()
window.URL.revokeObjectURL(a.href)
}
})
}
// 点击取消按钮
const onCancel = () => {
customerFormRef.value.resetFields()
@@ -399,6 +425,7 @@ export default {
onCancel,
onDelete,
getCustomerList,
onExport,
keyWord,
options,
onPagination,
web/src/views/Product.vue
+40 -12
View File
@@ -1,15 +1,23 @@
<template>
<div>
<a-space style="margin-bottom: 20px; width: 100%;">
<a-input v-model:value="keyWord" placeholder="产品名称" style="width: 280px; margin-right: 50px;">
<template #suffix>
<search-outlined style="color: rgba(0, 0, 0, 0.45)" @click="onSearch" />
</template>
</a-input>
<a-button type="primary" @click="onProducts">全部产品</a-button>
<a-button type="primary" @click="onDelete" :disabled="disabled" danger>删除</a-button>
<a-button type="primary" @click="onCreate">新建</a-button>
</a-space>
<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
<a-space>
<a-input v-model:value="keyWord" placeholder="产品名称" style="width: 280px; margin-right: 50px;">
<template #suffix>
<search-outlined style="color: rgba(0, 0, 0, 0.45)" @click="onSearch" />
</template>
</a-input>
<a-button type="primary" @click="onProducts">全部产品</a-button>
<a-button type="primary" @click="onDelete" :disabled="disabled" danger>删除</a-button>
<a-button type="primary" @click="onCreate">新建</a-button>
</a-space>
<div>
<a-button type="primary" @click="onExport">
<template #icon>
<DownloadOutlined />
</template>导出</a-button>
</div>
</div>
<a-table rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns" :data-source="data.productList"
:pagination="{ current: pagination.current, pageSize: pagination.pageSize, total: pagination.total, onChange: onPagination }"
@@ -99,14 +107,15 @@
<script>
import { ref, reactive, onMounted, createVNode } from 'vue';
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { SearchOutlined, ExclamationCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import moment from 'moment'
import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo } from '../api/product';
import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product';
import { message, Modal } from 'ant-design-vue';
export default {
components: {
SearchOutlined,
DownloadOutlined
},
setup() {
// 表格字段
@@ -318,6 +327,24 @@ export default {
})
}
// 导出表格
const onExport = () => {
productExport().then((res) => {
if (res.data.type == 'application/json'){
message.error('导出错误！')
} else {
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel"
})
let a = document.createElement('a')
a.setAttribute("download", "产品信息.xlsx");
a.href = window.URL.createObjectURL(blob)
a.click()
window.URL.revokeObjectURL(a.href)
}
})
}
// 点击取消按钮
const onCancel = () => {
productFormRef.value.resetFields()
@@ -343,6 +370,7 @@ export default {
onCancel,
onDelete,
getProductList,
onExport,
keyWord,
pagination,
onPagination,