<template>
<div class="pagex">
<div class="section-page">
<!--搜索区-->
<el-form :inline="true" :model="formParam" ref="formParam" label-width="80px">
<el-form-item label="账单号" prop="bill_sn">
<el-input v-model="formParam.bill_sn" placeholder="请输入账单号" @keyup.enter.native="submit" clearable></el-input>
</el-form-item>
<el-form-item label="型号" prop="goods_name">
<el-autocomplete v-model="formParam.goods_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" clearable></el-autocomplete>
</el-form-item>
<el-form-item label="创建时间" prop="create_time">
<el-date-picker v-model="formParam.create_time" align="right" type="date" placeholder="请选择创建时间" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
<el-button @click="resetForm('formParam')">重置</el-button>
</el-form-item>
</el-form>
<!--操作区-->
<div class="operation-area row verCenter bothSide">
<div class="operation-button row verCenter">
<el-button type="primary" @click="exportVerifiedBill()">导出账单</el-button>
</div>
</div>
<!--列表区-->
<div class="data-box">
<el-table :data="list" border max-height="600" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" align="center" fixed></el-table-column>
<el-table-column type="index" label="序号" width="50" align="center" fixed></el-table-column>
<el-table-column prop="bill_sn" label="账单号" width="120" :show-overflow-tooltip="true" align="center">
<template slot-scope="scope">
<el-link type="primary" :underline="false" @click="$router.push({path: '/reconciledBillDetail', query: {bill_id: scope.row.bill_id}})" style="font-size: 12px;">{{ scope.row.bill_sn }}</el-link>
</template>
</el-table-column>
<el-table-column prop="bill_name" label="账单名称" min-width="170" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="total_amount" label="应付总金额" width="120" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="unpaid_amount" label="未付总金额" width="120" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="paid_amount" label="已付总金额" width="120" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="paying_amount" label="付款中总金额" width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="contact_name" label="对接人" width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="create_name" label="创建人" width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="create_time" label="创建时间" width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
<el-table-column prop="create_type" label="创建方式" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
</el-table>
<el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
</div>
</div>
<Menu></Menu>
</div>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, DatePicker, Descriptions, DescriptionsItem, Dialog, Divider, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Link, Message, MessageBox, Option, Pagination, Popover, Select, Table, TableColumn, Tag, Tooltip} from 'element-ui'
import {NODE_ENVS} from "@/ajax";
import Tool from "@/tool";
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Button).use(Link).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete).use(Popover).use(Tag).use(Divider);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Descriptions).use(DescriptionsItem);
export default {
name: "reconciledBill",
data() {
return {
multipleSelection: [],
total: 0,
page: 1,
limit: 10,
list: [],
formParam: {
bill_sn: '',
goods_name: '',
create_time: ''
}
};
},
created() {
this.getData()
},
methods: {
getData() {
var params = Object.assign({}, this.formParam, {page: this.page, limit: this.limit});
this.$http('GET', "/api/bill/getVerifiedBillList", params).then(res => {
if (res.code === 0) {
this.list = res.data.list || [];
this.total = Number(res.data.total) || 0;
} else {
this.$message({
message: res.msg,
type: 'error'
});
}
})
},
/**
* 型号监听
* @param queryString
* @param cb
*/
querySearchAsync(queryString, cb) {
if (!queryString) {
cb([]);
return;
}
this.$http('GET', "/api/search/getspu", {spu_name: queryString}).then(res => {
if (res.code == 0 && res.data.list?.length) {
const arr = res.data.list.map(item => ({
value: item.spu_name
}));
cb(arr);
} else {
cb([]);
}
}).catch(() => {
cb([]);
});
},
/**
* 搜索
*/
onSubmit() {
this.page = 1;
this.getData();
},
/**
* 重置表单
* @param formName
*/
resetForm(formName) {
this.formParam.date = '';
this.$refs[formName].resetFields();
},
/**
* 列表分页条数筛选监听
* @param val
*/
handleSizeChange(val) {
this.limit = val;
this.getData();
},
/**
* 列表分页输入页码监听
* @param val
*/
handleCurrentChange(val) {
this.page = val;
this.getData();
},
/**
* chebox 选择监听
* @param val
*/
handleSelectionChange(val) {
this.multipleSelection = val;
},
/**
* 已对账账单-导出（待采购系统确认）
*/
exportVerifiedBill() {
let bill_id = this.multipleSelection.map(item => item.bill_id).join(',');
let url = NODE_ENVS + '/api/bill/exportVerifiedBill?bill_id=' + bill_id + '&token=' + Tool.getCookie('token');
Tool.openNewWindow(url);
}
},
components: {
Menu
}
};
</script>
<style scoped>
</style>