|
|
<script>import {querySalesQuoteByPage} from "../../../api/quote/salesQuote";
export default { name: "salesQuote", props: { queryStyle: { type: Object, default: () => ({ width: "1200px", }) }, height: { type: [String, Number], default: "80vh" }, currentRow:{ type: Object, default: () => ({ id: "", }) } }, data() { return { queryLoading: false, dataList: [], querySalesQuote: { site: "", customerNo: "", customerDesc: "", projectId: "", projectDesc: "", status: "", quoterName: "", trackerName: "", quotationNo: "", startDate: "", endDate: "", customerInquiryNo: "", internalInquiryNo: "", }, no: 1, size: 20, total: 0, columns: [ { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1QuoteVersionNo', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'quoteVersionNo', headerAlign: 'center', align: 'center', columnLabel: '报价单号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 140 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1QuotationDate', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'quotationDate', headerAlign: 'center', align: 'center', columnLabel: '报价日期', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1CustomerNo', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'customerNo', headerAlign: 'center', align: 'center', columnLabel: '客户编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1CustomerName', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'customerDesc', headerAlign: 'center', align: 'left', columnLabel: '客户名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1ProjectId', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'projectId', headerAlign: 'center', align: 'left', columnLabel: '项目编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 200 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1ProjectName', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'projectDesc', headerAlign: 'center', align: 'left', columnLabel: '项目名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 200 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1QuoterName', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'quoterName', headerAlign: 'center', align: 'left', columnLabel: '报价专员', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1TrackerName', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'trackerName', headerAlign: 'center', align: 'left', columnLabel: '采购专员', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1Currency', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'currency', headerAlign: 'center', align: 'center', columnLabel: '货币', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1Status', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'status', headerAlign: 'center', align: 'center', columnLabel: '状态', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1CustomerInquiryNo', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'customerInquiryNo', headerAlign: 'center', align: 'center', columnLabel: '客户报价单号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 102003, serialNumber: '102003Table1InternalInquiryNo', tableId: '102003Table1', tableName: '报价信息表', columnProp: 'internalInquiryNo', headerAlign: 'center', align: 'center', columnLabel: '内部询价单号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, ], } }, methods: { handleQuerySalesQuote() { let params = { ...this.querySalesQuote, no: this.no, size: this.size, site: this.$store.state.user.site, } this.queryLoading = true; querySalesQuoteByPage(params).then(({data}) => { if (data && data.code === 0) { this.dataList = data.rows this.total = data.total } else { this.$message.warning(data.msg) } this.queryLoading = false; }).catch((error) => { this.$message.error(error) this.queryLoading = false; }) }, handleSizeChange(val){ this.size = val; this.handleQuerySalesQuote(); }, handleCurrentChange(val){ this.no = val; this.handleQuerySalesQuote(); }, handleSaveSalesQuote(){ this.$emit("save") }, handleUpdateSalesQuoteStatus(row){ let salesQuote = { ...row, quotationStatus: row.status, } this.$emit("updateStatus",salesQuote) }, handleShowSalesQuote(row){ this.$emit("show",row) }, handleUpdateSalesQuote(row){ this.$emit("update",row) }, handleRemoveSalesQuote(row){ this.$emit("remove",row) }, handleAgainSalesQuote(row){ this.$emit("again",row) }, rowStyle({row}){ if (this.currentRow.id === row.id){ return {'background-color': '#E8F7F6'} } }, handleClickRow(row){ let salesQuote = { ...row, quotationHeaderId: row.id, } this.$emit("rowClick",salesQuote) } }}</script>
<template> <div> <div :style="queryStyle"> <el-form :model="querySalesQuote" label-position="top"> <el-row :gutter="10"> <el-col :span="3"> <el-form-item label="客户编码"> <el-input v-model="querySalesQuote.customerNo"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="客户名称"> <el-input v-model="querySalesQuote.customerDesc"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="采购专员"> <el-input v-model="querySalesQuote.trackerName"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="报价单号"> <el-input v-model="querySalesQuote.quotationNo"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="客户询价单号"> <el-input v-model="querySalesQuote.customerInquiryNo"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="内部询价单号"> <el-input v-model="querySalesQuote.internalInquiryNo"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="3"> <el-form-item label="项目编码"> <el-input v-model="querySalesQuote.projectId"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="项目名称"> <el-input v-model="querySalesQuote.projectDesc"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="报价专员"> <el-input v-model="querySalesQuote.quoterName"></el-input> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label="状态"> <el-select v-model="querySalesQuote.status"> <el-option label="全部" value=""></el-option> <el-option label="草稿" value="草稿"></el-option> <el-option label="下达" value="下达"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="报价日期"> <el-date-picker value-format="yyyy-MM-dd" v-model="querySalesQuote.startDate" style="width: 48%" type="date" placeholder=" "> </el-date-picker> <div style="width: 1.2%;text-align: center;display: inline-block;"> - </div> <el-date-picker value-format="yyyy-MM-dd" v-model="querySalesQuote.endDate" style="width: 48%" type="date" placeholder=" "> </el-date-picker> </el-form-item> </el-col> <el-col :span="3"> <el-form-item label=" "> <el-button type="primary" :loading="queryLoading" @click="handleQuerySalesQuote">查询</el-button> <el-button type="primary" @click="handleSaveSalesQuote">新增</el-button> </el-form-item> </el-col> </el-row> </el-form> </div> <el-table :data="dataList" border :height="height" :row-style="rowStyle" @row-click="handleClickRow"> <el-table-column v-for="(item,index) in columns" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed===''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}} </span> <span v-if="item.columnImage"> <img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/> </span> </template> </el-table-column> <el-table-column label="操作" align="center" fixed="right" width="160"> <template slot-scope="{row,$index}"> <a v-if="row.status === '草稿'" @click="handleUpdateSalesQuoteStatus(row)">下达</a> <a v-if="row.status === '下达'" @click="handleUpdateSalesQuoteStatus(row)">取消下达</a> <a v-if="row.status !== '草稿'" @click="handleShowSalesQuote(row)">详情</a> <a v-if="row.status === '草稿'" @click="handleUpdateSalesQuote(row)">编辑</a> <a v-if="row.status === '草稿'" @click="handleRemoveSalesQuote(row)">删除</a> <a @click="handleAgainSalesQuote(row)">重新报价</a> </template> </el-table-column> </el-table> <el-pagination style="margin-top: 0px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="no" :page-sizes="[20, 50, 100, 200, 500]" :page-size="size" :total="total" layout="total,sizes, prev, pager, next, jumper"> </el-pagination> </div></template>
<style scoped></style>
|
