报表基础A

product
mhsnet 2 years ago
parent ac9365a6b4
commit ea67609ddd

@ -0,0 +1,68 @@
<template>
<el-dialog title="导出数据" :close-on-click-modal="false" :visible.sync="visible"
class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
<el-form label-position="top" label-width="80px">
<el-form-item label="数据选择">
<el-radio-group v-model="type">
<el-radio :label="0">当前页面数据</el-radio>
<el-radio :label="1">全部页面数据</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导出字段">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="columns" @change="handleCheckedChange">
<el-checkbox v-for="item in columnList" :label="item.prop" :key="item.prop">
{{item.label}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible=false"> </el-button>
<el-button type="primary" @click="downLoad"> </el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
btnLoading: false,
type: 0,
columns: [],
checkAll: true,
isIndeterminate: false,
columnList: []
}
},
methods: {
init(columnList) {
this.visible = true
this.checkAll = true
this.isIndeterminate = false
this.columnList = columnList
this.columns = columnList.map(o => o.prop)
},
handleCheckAllChange(val) {
this.columns = val ? this.columnList.map(o => o.prop) : [];
this.isIndeterminate = false;
},
handleCheckedChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.columnList.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnList.length;
},
downLoad() {
this.$emit('download', { dataType: this.type, selectKey: this.columns.join(',') })
}
}
}
</script>
<style lang="scss" scoped>
>>> .el-dialog__body {
padding: 20px !important;
}
</style>

@ -0,0 +1,241 @@
<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<!-- <el-col :span="6">
<el-form-item label="合同编码">
<el-input v-model="query.contractCode" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="query.contractName" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
<el-button icon="el-icon-refresh-right" @click="reset()"></el-button>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<div class="JNPF-common-head">
<div>
<el-button type="text" icon="el-icon-download" @click="exportData()">
</el-button>
</div>
<div class="JNPF-common-head-right">
<el-tooltip effect="dark" content="刷新" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="reset()" />
</el-tooltip>
<screenfull isContainer />
</div>
</div>
<JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c :hasNO="false"
@selection-change="handleSelectionChange" border>
<el-table-column prop="contractCode" label="业务类型" width="200" align="center" sortable />
<el-table-column prop="contractName" label="采购单位" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="采购吨位" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="采购金额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="付款金额" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="应付余额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售单位" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售吨位" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售金额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="回款金额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="应收余额(元)" width="200" align="center" sortable />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
</div>
</template>
<script>
import request from '@/utils/request'
import ExportBox from './ExportBox'
export default {
components: {
ExportBox
},
data() {
return {
query: {
contractCode: undefined,
contractName: undefined
},
treeProps: {
children: 'children',
label: 'fullName',
value: 'id'
},
list: [],
listLoading: true,
multipleSelection: [],
total: 0,
listQuery: {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: ''
},
exportBoxVisible: false,
columnList: [{
prop: 'contractCode',
label: '合同编码'
},
{
prop: 'contractName',
label: '合同名称'
},
{
prop: 'contractNo',
label: '对方合同号'
},
{
prop: 'contractType',
label: '合同类型 '
},
{
prop: 'classification',
label: '合同分类 '
},
{
prop: 'declarationDate',
label: '申报日期'
},
{
prop: 'name',
label: '供应商/客户名'
},
{
prop: 'num',
label: '数量'
},
{
prop: 'amount',
label: '金额'
},
{
prop: 'deptName',
label: '部门名称'
},
{
prop: 'remark',
label: '备注'
},
{
prop: 'creatorusername',
label: '录入人'
},
{
prop: 'status',
label: '合同状态'
},
{
prop: 'approval',
label: '集团审批'
}
],
}
},
computed: {
menuId() {
return this.$route.meta.modelId || ''
}
},
created() {
this.initData()
},
methods: {
sortChange({
column,
prop,
order
}) {
this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
this.listQuery.sidx = !order ? '' : prop
this.initData()
},
initData() {
this.listLoading = true
let _query = {
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/getList`,
method: 'post',
data: _query
}).then(res => {
var _list = []
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].creatorTime = res.data.list[i].creatorTime ? res.data.list[i].creatorTime.substring(0, 10) : '';
let _data = res.data.list[i]
_list.push(_data)
}
this.list = _list
this.total = res.data.pagination.total
this.listLoading = false
})
},
handleSelectionChange(val) {
const res = val.map(item => item.id)
this.multipleSelection = res
},
exportData() {
this.exportBoxVisible = true
this.$nextTick(() => {
this.$refs.ExportBox.init(this.columnList)
})
},
download(data) {
let query = {
...data,
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/Actions/Export`,
method: 'GET',
data: query
}).then(res => {
if (!res.data.url) return
this.jnpf.downloadFile(res.data.url)
this.$refs.ExportBox.visible = false
this.exportBoxVisible = false
})
},
search() {
this.listQuery = {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: 'contractCode'
}
this.initData()
},
refresh(isrRefresh) {
if (isrRefresh) this.reset()
},
reset() {
for (let key in this.query) {
this.query[key] = undefined
}
this.search()
}
}
}
</script>

@ -0,0 +1,253 @@
<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<!-- <el-col :span="6">
<el-form-item label="合同编码">
<el-input v-model="query.contractCode" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="query.contractName" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
<el-button icon="el-icon-refresh-right" @click="reset()"></el-button>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<div class="JNPF-common-head">
<div>
<el-button type="text" icon="el-icon-download" @click="exportData()">
</el-button>
</div>
<div class="JNPF-common-head-right">
<el-tooltip effect="dark" content="刷新" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="reset()" />
</el-tooltip>
<screenfull isContainer />
</div>
</div>
<JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c :hasNO="false"
@selection-change="handleSelectionChange" border>
<el-table-column prop="contractCode" label="合同签订日期" width="200" align="center" sortable />
<el-table-column prop="contractName" label="合同状态" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="采购合同" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售合同" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售合同回款期" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="采购合同编号" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售合同编号" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="货物名称" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="合同量(吨)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="合同采购单价(含税)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="合同销售单价(含税)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="采购合同金额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售合同金额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="吨毛利(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="保证金(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="付款金额(采购)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="回款金额(销售)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="结算量" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="结算单价(采购)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="结算单价(销售)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="结算采购金额(含税)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="结算销售金额(含税)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="实际毛利" width="200" align="center" sortable />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
</div>
</template>
<script>
import request from '@/utils/request'
import ExportBox from './ExportBox'
export default {
components: {
ExportBox
},
data() {
return {
query: {
contractCode: undefined,
contractName: undefined
},
treeProps: {
children: 'children',
label: 'fullName',
value: 'id'
},
list: [],
listLoading: true,
multipleSelection: [],
total: 0,
listQuery: {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: ''
},
exportBoxVisible: false,
columnList: [{
prop: 'contractCode',
label: '合同编码'
},
{
prop: 'contractName',
label: '合同名称'
},
{
prop: 'contractNo',
label: '对方合同号'
},
{
prop: 'contractType',
label: '合同类型 '
},
{
prop: 'classification',
label: '合同分类 '
},
{
prop: 'declarationDate',
label: '申报日期'
},
{
prop: 'name',
label: '供应商/客户名'
},
{
prop: 'num',
label: '数量'
},
{
prop: 'amount',
label: '金额'
},
{
prop: 'deptName',
label: '部门名称'
},
{
prop: 'remark',
label: '备注'
},
{
prop: 'creatorusername',
label: '录入人'
},
{
prop: 'status',
label: '合同状态'
},
{
prop: 'approval',
label: '集团审批'
}
],
}
},
computed: {
menuId() {
return this.$route.meta.modelId || ''
}
},
created() {
this.initData()
},
methods: {
sortChange({
column,
prop,
order
}) {
this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
this.listQuery.sidx = !order ? '' : prop
this.initData()
},
initData() {
this.listLoading = true
let _query = {
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/getList`,
method: 'post',
data: _query
}).then(res => {
var _list = []
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].creatorTime = res.data.list[i].creatorTime ? res.data.list[i].creatorTime.substring(0, 10) : '';
let _data = res.data.list[i]
_list.push(_data)
}
this.list = _list
this.total = res.data.pagination.total
this.listLoading = false
})
},
handleSelectionChange(val) {
const res = val.map(item => item.id)
this.multipleSelection = res
},
exportData() {
this.exportBoxVisible = true
this.$nextTick(() => {
this.$refs.ExportBox.init(this.columnList)
})
},
download(data) {
let query = {
...data,
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/Actions/Export`,
method: 'GET',
data: query
}).then(res => {
if (!res.data.url) return
this.jnpf.downloadFile(res.data.url)
this.$refs.ExportBox.visible = false
this.exportBoxVisible = false
})
},
search() {
this.listQuery = {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: 'contractCode'
}
this.initData()
},
refresh(isrRefresh) {
if (isrRefresh) this.reset()
},
reset() {
for (let key in this.query) {
this.query[key] = undefined
}
this.search()
}
}
}
</script>

@ -0,0 +1,237 @@
<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<!-- <el-col :span="6">
<el-form-item label="合同编码">
<el-input v-model="query.contractCode" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="query.contractName" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
<el-button icon="el-icon-refresh-right" @click="reset()"></el-button>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<div class="JNPF-common-head">
<div>
<el-button type="text" icon="el-icon-download" @click="exportData()">
</el-button>
</div>
<div class="JNPF-common-head-right">
<el-tooltip effect="dark" content="刷新" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="reset()" />
</el-tooltip>
<screenfull isContainer />
</div>
</div>
<JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c :hasNO="false"
@selection-change="handleSelectionChange" border>
<el-table-column prop="contractCode" label="日期" width="200" align="center" sortable />
<el-table-column prop="contractName" label="当日收款(懿丰)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="当日付款(诚通)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="当日资金占用余额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="日利率‰" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="日资金占用费用(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="12月份账面毛利(含税)" width="200" align="center" sortable />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
</div>
</template>
<script>
import request from '@/utils/request'
import ExportBox from './ExportBox'
export default {
components: {
ExportBox
},
data() {
return {
query: {
contractCode: undefined,
contractName: undefined
},
treeProps: {
children: 'children',
label: 'fullName',
value: 'id'
},
list: [],
listLoading: true,
multipleSelection: [],
total: 0,
listQuery: {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: ''
},
exportBoxVisible: false,
columnList: [{
prop: 'contractCode',
label: '合同编码'
},
{
prop: 'contractName',
label: '合同名称'
},
{
prop: 'contractNo',
label: '对方合同号'
},
{
prop: 'contractType',
label: '合同类型 '
},
{
prop: 'classification',
label: '合同分类 '
},
{
prop: 'declarationDate',
label: '申报日期'
},
{
prop: 'name',
label: '供应商/客户名'
},
{
prop: 'num',
label: '数量'
},
{
prop: 'amount',
label: '金额'
},
{
prop: 'deptName',
label: '部门名称'
},
{
prop: 'remark',
label: '备注'
},
{
prop: 'creatorusername',
label: '录入人'
},
{
prop: 'status',
label: '合同状态'
},
{
prop: 'approval',
label: '集团审批'
}
],
}
},
computed: {
menuId() {
return this.$route.meta.modelId || ''
}
},
created() {
this.initData()
},
methods: {
sortChange({
column,
prop,
order
}) {
this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
this.listQuery.sidx = !order ? '' : prop
this.initData()
},
initData() {
this.listLoading = true
let _query = {
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/getList`,
method: 'post',
data: _query
}).then(res => {
var _list = []
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].creatorTime = res.data.list[i].creatorTime ? res.data.list[i].creatorTime.substring(0, 10) : '';
let _data = res.data.list[i]
_list.push(_data)
}
this.list = _list
this.total = res.data.pagination.total
this.listLoading = false
})
},
handleSelectionChange(val) {
const res = val.map(item => item.id)
this.multipleSelection = res
},
exportData() {
this.exportBoxVisible = true
this.$nextTick(() => {
this.$refs.ExportBox.init(this.columnList)
})
},
download(data) {
let query = {
...data,
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/Actions/Export`,
method: 'GET',
data: query
}).then(res => {
if (!res.data.url) return
this.jnpf.downloadFile(res.data.url)
this.$refs.ExportBox.visible = false
this.exportBoxVisible = false
})
},
search() {
this.listQuery = {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: 'contractCode'
}
this.initData()
},
refresh(isrRefresh) {
if (isrRefresh) this.reset()
},
reset() {
for (let key in this.query) {
this.query[key] = undefined
}
this.search()
}
}
}
</script>

@ -0,0 +1,236 @@
<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<!-- <el-col :span="6">
<el-form-item label="合同编码">
<el-input v-model="query.contractCode" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="query.contractName" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
<el-button icon="el-icon-refresh-right" @click="reset()"></el-button>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<div class="JNPF-common-head">
<div>
<el-button type="text" icon="el-icon-download" @click="exportData()">
</el-button>
</div>
<div class="JNPF-common-head-right">
<el-tooltip effect="dark" content="刷新" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="reset()" />
</el-tooltip>
<screenfull isContainer />
</div>
</div>
<JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c :hasNO="false"
@selection-change="handleSelectionChange" border>
<el-table-column prop="contractCode" label="采购单位" width="200" align="center" sortable />
<el-table-column prop="contractName" label="货物规格型号" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="吨位" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="金额(元)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="货物规格型号" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="金额(元)" width="200" align="center" sortable />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
</div>
</template>
<script>
import request from '@/utils/request'
import ExportBox from './ExportBox'
export default {
components: {
ExportBox
},
data() {
return {
query: {
contractCode: undefined,
contractName: undefined
},
treeProps: {
children: 'children',
label: 'fullName',
value: 'id'
},
list: [],
listLoading: true,
multipleSelection: [],
total: 0,
listQuery: {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: ''
},
exportBoxVisible: false,
columnList: [{
prop: 'contractCode',
label: '合同编码'
},
{
prop: 'contractName',
label: '合同名称'
},
{
prop: 'contractNo',
label: '对方合同号'
},
{
prop: 'contractType',
label: '合同类型 '
},
{
prop: 'classification',
label: '合同分类 '
},
{
prop: 'declarationDate',
label: '申报日期'
},
{
prop: 'name',
label: '供应商/客户名'
},
{
prop: 'num',
label: '数量'
},
{
prop: 'amount',
label: '金额'
},
{
prop: 'deptName',
label: '部门名称'
},
{
prop: 'remark',
label: '备注'
},
{
prop: 'creatorusername',
label: '录入人'
},
{
prop: 'status',
label: '合同状态'
},
{
prop: 'approval',
label: '集团审批'
}
],
}
},
computed: {
menuId() {
return this.$route.meta.modelId || ''
}
},
created() {
this.initData()
},
methods: {
sortChange({
column,
prop,
order
}) {
this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
this.listQuery.sidx = !order ? '' : prop
this.initData()
},
initData() {
this.listLoading = true
let _query = {
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/getList`,
method: 'post',
data: _query
}).then(res => {
var _list = []
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].creatorTime = res.data.list[i].creatorTime ? res.data.list[i].creatorTime.substring(0, 10) : '';
let _data = res.data.list[i]
_list.push(_data)
}
this.list = _list
this.total = res.data.pagination.total
this.listLoading = false
})
},
handleSelectionChange(val) {
const res = val.map(item => item.id)
this.multipleSelection = res
},
exportData() {
this.exportBoxVisible = true
this.$nextTick(() => {
this.$refs.ExportBox.init(this.columnList)
})
},
download(data) {
let query = {
...data,
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/Actions/Export`,
method: 'GET',
data: query
}).then(res => {
if (!res.data.url) return
this.jnpf.downloadFile(res.data.url)
this.$refs.ExportBox.visible = false
this.exportBoxVisible = false
})
},
search() {
this.listQuery = {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: 'contractCode'
}
this.initData()
},
refresh(isrRefresh) {
if (isrRefresh) this.reset()
},
reset() {
for (let key in this.query) {
this.query[key] = undefined
}
this.search()
}
}
}
</script>

@ -0,0 +1,236 @@
<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<!-- <el-col :span="6">
<el-form-item label="合同编码">
<el-input v-model="query.contractCode" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="query.contractName" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
<el-button icon="el-icon-refresh-right" @click="reset()"></el-button>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<div class="JNPF-common-head">
<div>
<el-button type="text" icon="el-icon-download" @click="exportData()">
</el-button>
</div>
<div class="JNPF-common-head-right">
<el-tooltip effect="dark" content="刷新" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="reset()" />
</el-tooltip>
<screenfull isContainer />
</div>
</div>
<JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c :hasNO="false"
@selection-change="handleSelectionChange" border>
<el-table-column prop="contractCode" label="单位名称" width="200" align="center" sortable />
<el-table-column prop="contractName" label="应收款余额" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="应收款余额(未逾期)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="应收款余额(逾期)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="逾期时间" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="逾期应收利息" width="200" align="center" sortable />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
</div>
</template>
<script>
import request from '@/utils/request'
import ExportBox from './ExportBox'
export default {
components: {
ExportBox
},
data() {
return {
query: {
contractCode: undefined,
contractName: undefined
},
treeProps: {
children: 'children',
label: 'fullName',
value: 'id'
},
list: [],
listLoading: true,
multipleSelection: [],
total: 0,
listQuery: {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: ''
},
exportBoxVisible: false,
columnList: [{
prop: 'contractCode',
label: '合同编码'
},
{
prop: 'contractName',
label: '合同名称'
},
{
prop: 'contractNo',
label: '对方合同号'
},
{
prop: 'contractType',
label: '合同类型 '
},
{
prop: 'classification',
label: '合同分类 '
},
{
prop: 'declarationDate',
label: '申报日期'
},
{
prop: 'name',
label: '供应商/客户名'
},
{
prop: 'num',
label: '数量'
},
{
prop: 'amount',
label: '金额'
},
{
prop: 'deptName',
label: '部门名称'
},
{
prop: 'remark',
label: '备注'
},
{
prop: 'creatorusername',
label: '录入人'
},
{
prop: 'status',
label: '合同状态'
},
{
prop: 'approval',
label: '集团审批'
}
],
}
},
computed: {
menuId() {
return this.$route.meta.modelId || ''
}
},
created() {
this.initData()
},
methods: {
sortChange({
column,
prop,
order
}) {
this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
this.listQuery.sidx = !order ? '' : prop
this.initData()
},
initData() {
this.listLoading = true
let _query = {
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/getList`,
method: 'post',
data: _query
}).then(res => {
var _list = []
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].creatorTime = res.data.list[i].creatorTime ? res.data.list[i].creatorTime.substring(0, 10) : '';
let _data = res.data.list[i]
_list.push(_data)
}
this.list = _list
this.total = res.data.pagination.total
this.listLoading = false
})
},
handleSelectionChange(val) {
const res = val.map(item => item.id)
this.multipleSelection = res
},
exportData() {
this.exportBoxVisible = true
this.$nextTick(() => {
this.$refs.ExportBox.init(this.columnList)
})
},
download(data) {
let query = {
...data,
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/Actions/Export`,
method: 'GET',
data: query
}).then(res => {
if (!res.data.url) return
this.jnpf.downloadFile(res.data.url)
this.$refs.ExportBox.visible = false
this.exportBoxVisible = false
})
},
search() {
this.listQuery = {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: 'contractCode'
}
this.initData()
},
refresh(isrRefresh) {
if (isrRefresh) this.reset()
},
reset() {
for (let key in this.query) {
this.query[key] = undefined
}
this.search()
}
}
}
</script>

@ -0,0 +1,241 @@
<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<!-- <el-col :span="6">
<el-form-item label="合同编码">
<el-input v-model="query.contractCode" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="query.contractName" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()"></el-button>
<el-button icon="el-icon-refresh-right" @click="reset()"></el-button>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<div class="JNPF-common-head">
<div>
<el-button type="text" icon="el-icon-download" @click="exportData()">
</el-button>
</div>
<div class="JNPF-common-head-right">
<el-tooltip effect="dark" content="刷新" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="reset()" />
</el-tooltip>
<screenfull isContainer />
</div>
</div>
<JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c :hasNO="false"
@selection-change="handleSelectionChange" border>
<el-table-column prop="contractCode" label="销售客户名称" width="200" align="center" sortable />
<el-table-column prop="contractName" label="存货名称" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="合同号" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="出库数量(吨)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="不含税采购单价" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="不含税销售单价" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="不含税销售金额" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="销售成本" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="账面毛利(不含税=K-L)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="贴息(去除)" width="200" align="center" sortable />
<el-table-column prop="contractNo" label="部门毛利(不含税=M+N)" width="200" align="center" sortable />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
</div>
</template>
<script>
import request from '@/utils/request'
import ExportBox from './ExportBox'
export default {
components: {
ExportBox
},
data() {
return {
query: {
contractCode: undefined,
contractName: undefined
},
treeProps: {
children: 'children',
label: 'fullName',
value: 'id'
},
list: [],
listLoading: true,
multipleSelection: [],
total: 0,
listQuery: {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: ''
},
exportBoxVisible: false,
columnList: [{
prop: 'contractCode',
label: '合同编码'
},
{
prop: 'contractName',
label: '合同名称'
},
{
prop: 'contractNo',
label: '对方合同号'
},
{
prop: 'contractType',
label: '合同类型 '
},
{
prop: 'classification',
label: '合同分类 '
},
{
prop: 'declarationDate',
label: '申报日期'
},
{
prop: 'name',
label: '供应商/客户名'
},
{
prop: 'num',
label: '数量'
},
{
prop: 'amount',
label: '金额'
},
{
prop: 'deptName',
label: '部门名称'
},
{
prop: 'remark',
label: '备注'
},
{
prop: 'creatorusername',
label: '录入人'
},
{
prop: 'status',
label: '合同状态'
},
{
prop: 'approval',
label: '集团审批'
}
],
}
},
computed: {
menuId() {
return this.$route.meta.modelId || ''
}
},
created() {
this.initData()
},
methods: {
sortChange({
column,
prop,
order
}) {
this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
this.listQuery.sidx = !order ? '' : prop
this.initData()
},
initData() {
this.listLoading = true
let _query = {
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/getList`,
method: 'post',
data: _query
}).then(res => {
var _list = []
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].creatorTime = res.data.list[i].creatorTime ? res.data.list[i].creatorTime.substring(0, 10) : '';
let _data = res.data.list[i]
_list.push(_data)
}
this.list = _list
this.total = res.data.pagination.total
this.listLoading = false
})
},
handleSelectionChange(val) {
const res = val.map(item => item.id)
this.multipleSelection = res
},
exportData() {
this.exportBoxVisible = true
this.$nextTick(() => {
this.$refs.ExportBox.init(this.columnList)
})
},
download(data) {
let query = {
...data,
...this.listQuery,
...this.query,
menuId: this.menuId
}
request({
url: `/api/example/ContractFile/Actions/Export`,
method: 'GET',
data: query
}).then(res => {
if (!res.data.url) return
this.jnpf.downloadFile(res.data.url)
this.$refs.ExportBox.visible = false
this.exportBoxVisible = false
})
},
search() {
this.listQuery = {
currentPage: 1,
pageSize: 20,
sort: 'desc',
sidx: 'contractCode'
}
this.initData()
},
refresh(isrRefresh) {
if (isrRefresh) this.reset()
},
reset() {
for (let key in this.query) {
this.query[key] = undefined
}
this.search()
}
}
}
</script>
Loading…
Cancel
Save