<!--红旗H平台导入功能--> <template> <div class="cr-body-content"> <flexbox class="content-header"> <XhJSSelect :options="versionList" style="width: 200px" class="search-container" @value-change="selectValue" ></XhJSSelect> <el-button class="filter-item" size="mini" type="warning" icon="el-icon-upload2" @click="handleImportExcel()" >导入文件(Excel) </el-button> <!-- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-download" @click="handleDownload()" >导出Excel </el-button> --> <el-dropdown size="small" class="filter-item" style="margin-left: 15px; font-weight: bold" @command="handleCommand" > <span class="el-dropdown-link"> 导出数据<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="excel" icon="el-icon-plus" >导出Excel</el-dropdown-item > <el-dropdown-item command="csv" icon="el-icon-circle-plus" >导出Csv</el-dropdown-item > </el-dropdown-menu> </el-dropdown> <el-input v-model="searchContent" clearable size="small" placeholder="按照采购订单号搜索..." style="width: 200px" class="search-container" @keyup.enter.native="handleFilter" /> <el-button size="mini" type="success" icon="el-icon-search" @click="handleFilter" >搜索 </el-button> <!--表格头组件,filter查询--> <c-r-m-table-head ref="crmTableHead" :crm-type="crmType" @handle="handleHandle" @filter="handleFilters" > </c-r-m-table-head> </flexbox> <!--表格渲染--> <el-table ref="multipleTable" v-loading.fullscreen.lock="listLoading" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" class="cr-table" :data="list" :height="tableHeight" :cell-style="cellStyle" :header-cell-style="headerRowStyle" size="small" stripe border highlight-current-row style="width: 100%" @sort-change="sortChange" @selection-change="handleSelectionChange" @row-click="handleRowClick" > <!-- <el-table-column type="selection" width="44px"></el-table-column> --> <el-table-column label="版本" prop="version" sortable="custom" align="center" width="100px" fixed > <template slot-scope="scope"> <el-tooltip :content="scope.row.version" placement="top"> <span class="link-type">{{ scope.row.version }}</span> </el-tooltip> </template> </el-table-column> <el-table-column v-for="(item, index) in getDefaultField" :key="index" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="fieldFormatter" sortable="custom" show-overflow-tooltip :gutter="0" > <template slot="header" slot-scope="scope"> {{ scope.column.label }} </template> </el-table-column> </el-table> <div class="table-footer"> <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> <pagination v-show="totalCount > 0" :total="totalCount" :page.sync="page" :limit.sync="listQuery.MaxResultCount" @pagination="getList" /> <!-- 导入Excel组件 --> <importExcel ref="importexcel" :show="showExcelImport" :crmType="crmType" @close="importExcelData" /> </div> </div> </template> <script> import Pagination from "@/components/Pagination"; // secondary package based on el-pagination import permission from "@/directive/permission/index.js"; import importExcel from "@/components/ImportExcel-base"; import CRMTableHead from "../../../components/CRMTableHead"; import moment from "moment"; import Lockr from "lockr"; import { downloadFile } from "@/utils/crmindex.js"; import XhJSSelect from "@/components/CreateCom/Xh-JS-Select-Label.vue"; export default { name: "HQHPlatform", components: { Pagination, CRMTableHead, importExcel, XhJSSelect }, directives: { permission }, filters: { IsCustomerSignFilter(status) { //翻译是否签字 const statusMap = { true: "是", false: "否", }; return statusMap[status]; }, }, props: { customerInfos: { type: Array, default: () => { return []; }, }, }, data() { return { crmType: "hqHPlatform", versionValue: "", versionList: [], //版本列表 rules: { //前端定义的规则,后端也有验证 erpMaterialCode: [ { required: true, message: "必须输入!", trigger: "blur" }, ], }, searchContent: "", // 输入内容 customerInfo: { settleAccountId: "", }, form: { dicDetailID: "", customerId: "", projectId: "", }, list: null, totalCount: 0, listLoading: true, formLoading: true, // 高级搜索 filterObj: { type: Object, default: () => { return {}; }, }, listVersionQuery: { SkipCount: 0, MaxResultCount: 15, }, listQuery: { Filters: [ { logic: 0, column: "Enabled", action: 0, value: "true", }, //默认查询可用的 ], //OrgID:"", SkipCount: 0, MaxResultCount: 15, version: "", site: "TH", userId: "00000000-0000-0000-0000-000000000000", }, listExportQuery: { Filters: [ { logic: 0, column: "Enabled", action: 0, value: "true", }, //默认查询可用的 ], //OrgID:"", SkipCount: 0, MaxResultCount: 15, version: "", fileType: 0, userId: "", }, page: 1, dialogFormVisible: false, multipleSelection: [], formTitle: "", drawer: false, showExcelImport: false, tableHeight: document.documentElement.clientHeight - 220, isEdit: false, }; }, mounted() { var self = this; window.onresize = function () { var offsetHei = document.documentElement.clientHeight; self.tableHeight = offsetHei - 220; }; }, created() { this.getVersionInfo(); if (this.versionList == []) { this.getList(); } }, computed: { /** 列表字段 */ getDefaultField() { var tempsTabs = []; tempsTabs.push({ label: "行号", prop: "lineNumber", width: 100 }); tempsTabs.push({ label: "采购类型", prop: "purchaseType", width: 150 }); tempsTabs.push({ label: "采购订单号", prop: "purchaseOrderNo", width: 220, }); tempsTabs.push({ label: "采购订单行项目", prop: "purchaseOrderNoItem", width: 170, }); tempsTabs.push({ label: "采购订单文本", prop: "purchaseOrderNoText", width: 170, }); tempsTabs.push({ label: "收货数量", prop: "receiptQty", width: 120 }); tempsTabs.push({ label: "开票数量", prop: "invoicedQty", width: 120 }); tempsTabs.push({ label: "不含税金额", prop: "amountNoTax", width: 150 }); tempsTabs.push({ label: "采购价格不含税", prop: "purchasePriceNoTax", width: 200, }); tempsTabs.push({ label: "科目号", prop: "accountNum", width: 150 }); tempsTabs.push({ label: "物料代码", prop: "materialCode", width: 180 }); tempsTabs.push({ label: "物料描述", prop: "materialDesc", width: 250 }); tempsTabs.push({ label: "日期", prop: "spareDate", width: 150, formType: "datetime", }); tempsTabs.push({ label: "交货单号", prop: "deliveryOrderNo", width: 150, }); tempsTabs.push({ label: "交货行号", prop: "deliveryLineNum", width: 150, }); tempsTabs.push({ label: "批次号", prop: "batchNo", width: 150 }); tempsTabs.push({ label: "税率", prop: "taxRate", width: 100 }); tempsTabs.push({ label: "税码", prop: "taxCode", width: 110 }); tempsTabs.push({ label: "德国发票号", prop: "germanInvoiceNo", width: 150, }); tempsTabs.push({ label: "工厂", prop: "factory", width: 150 }); tempsTabs.push({ label: "工厂名称", prop: "factoryName", width: 220 }); return tempsTabs; }, }, methods: { handleCommand(command) { if (this.versionValue === "") { this.$message.error("请先选择版本!"); return; } switch (command) { case "excel": this.listQuery.fileType = 1; //0是csv,1是excel break; case "csv": this.listQuery.fileType = 0; //0是csv,1是excel break; default: //这里是没有找到对应的值处理 break; } this.listLoading = true; if (this.versionValue === "") { this.$message.error("必需选择版本!"); this.listLoading = false; return; } if (this.versionValue != "") { this.listQuery.version = this.versionValue; } console.log("红旗H平台导出:" + JSON.stringify(this.listQuery)); this.$axios .posts("/api/settleaccount/HQHPlatform/Export", this.listQuery) .then((res) => { let fileNameOfProject = res; this.$axios .BolbGets( "/api/settleaccount/getblobfile/download/" + fileNameOfProject ) .then((response) => { if (fileNameOfProject.indexOf("_") != -1) { let downName = fileNameOfProject.slice( 0, fileNameOfProject.lastIndexOf("_") ) + fileNameOfProject.slice(fileNameOfProject.lastIndexOf(".")); downloadFile(response, downName); this.$notify({ title: "成功", message: "数据-导出成功!", type: "success", duration: 2000, }); } else { downloadFile(response, fileNameOfProject); this.$notify({ title: "成功", message: "数据-导出成功!", type: "success", duration: 2000, }); } this.listLoading = false; }); }); }, selectValue(params) { //版本下拉选择 this.versionValue = params.value; this.getList(); }, selectOptionsChange(item) { this.getList(); }, getVersionInfo() { //取版本列表信息 //this.listLoading = true; this.listQuery.SkipCount = (this.page - 1) * 1000; this.$axios .posts("/api/settleaccount/HQHPlatform/listVersion", this.listQuery) .then((response) => { this.versionList = []; response.items.forEach((element) => { let options = {}; options.value = element.id; options.label = element.version; this.versionList.push(options); }); if (JSON.stringify(this.versionList) != "[]") { //因版本下拉有默认值,所以详表要自动绑定子表数据 this.versionValue = this.versionList[0].label; this.getList(); } this.listLoading = false; }) .catch(() => { this.listLoading = false; }); }, handleImportExcel() { //导入 this.showExcelImport = true; this.$refs.importexcel.handleImportExcelClick(); }, /** 刷新列表 */ handleHandle(data) { if (data.type !== "edit") { this.getList(); } }, /** 格式化字段 */ fieldFormatter(row, column) { // if (column.property === "state") { // return { 0: "其他", 2: "已结" }[row[column.property]]; // } if ( column.property == "settleInputDate" || column.property == "settleDate" ) { var date = row[column.property]; if (date == undefined) { return ""; } return moment(date).format("YYYY-MM-DD HH:mm:ss"); } return row[column.property] || "--"; }, importExcelData() { this.getVersionInfo(); this.listLoading = false; //关闭导入窗体时调用 this.showExcelImport = false; }, getList() { this.listLoading = true; this.listQuery.SkipCount = (this.page - 1) * 10; if (this.versionValue != "") { this.listQuery.version = this.versionValue; } console.log("列表查询条件:" + JSON.stringify(this.listQuery)); this.$axios .posts("/api/settleaccount/HQHPlatform/list", this.listQuery) .then((response) => { this.list = response.items; this.totalCount = response.totalCount; setTimeout(() => { //大数据量加载时 this.listLoading = false; }, 500); }) .catch(() => { this.listLoading = false; }); }, fetchData(id) { //循环动态 this.$axios .gets("/api/settleaccount/HQHPlatform/" + id) .then((response) => { this.form = response; }); }, /** 筛选操作 */ handleFilter() { this.page = 1; this.getList(); this.listQuery.Filters = []; if (this.searchContent != "") { var column = "purchaseOrderNo"; let filter = { logic: 0, column: column, action: 0, value: this.searchContent, }; this.listQuery.Filters.push(filter); } this.getList(); }, /** 多项筛选操作 */ /** 筛选操作 */ handleFilters(data) { if (data === null) { this.listQuery.Filters = []; this.getList(); //查询所有 } else { this.filterObj = data; console.log("筛选" + JSON.stringify(data)); var offsetHei = document.documentElement.clientHeight; var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240; this.tableHeight = offsetHei - removeHeight; this.currentPage = 1; let Filter = []; data.forEach((item) => { let filter = {}; if (item.formType === "datetime" || item.formType === "datetime") { //日期类型的过滤条件是 (datetime >= a and datetime <=b) filter["Column"] = item.fieldName; filter["Logic"] = 0; filter["Value"] = item.value[0]; filter["Action"] = item.action; Filter.push(filter); if (item.value[1] != null) { filter["Value"] = item.value[1]; filter["Action"] = 5; Filter.push(filter); } } else { filter["Column"] = item.fieldName; filter["Value"] = item.value; filter["Logic"] = 0; filter["Action"] = item.action; Filter.push(filter); } }); console.log("筛选条件" + JSON.stringify(Filter)); this.listQuery.Filters = Filter; this.getList(); } }, resetQuery() {}, sortChange(data) { const { prop, order } = data; if (!prop || !order) { this.handleFilter(); return; } this.listQuery.Sorting = prop + " " + order; console.log(this.listQuery.Sorting); this.handleFilter(); }, handleSelectionChange(val) { this.multipleSelection = val; }, /** 通过回调控制style */ cellStyle({ row, column, rowIndex, columnIndex }) { // if (column.property === "qty") { // return { textAlign: "right" }; // } else { // return { textAlign: "left" }; // } return { textAlign: "left" }; }, /** 通过回调控制表头style */ headerRowStyle({ row, column, rowIndex, columnIndex }) { if (column.property === "qty") { return { textAlign: "right", background: "#FAFAFA" }; } else { return { textAlign: "left", background: "#FAFAFA" }; } }, handleRowClick(row, column, event) { this.$refs.multipleTable.clearSelection(); this.$refs.multipleTable.toggleRowSelection(row); }, }, }; </script> <style lang="scss" scoped> @import "../../../styles/crmtable.scss"; </style> <style lang="scss"> .el-table .cell.el-tooltip { white-space: pre-wrap; } </style>