| | |
| | | <ttable |
| | | :table="table" |
| | | :resultData="resultData" |
| | | @change ="costPlannedAmountChange" |
| | | @handleSelectionChange="handleSelectionChange" |
| | | :prelang="prelang" |
| | | :options="options" |
| | | :ajaxFun="ajaxFun" |
| | | @queryParam="getQueryParam($event)" |
| | | ref="rawMaterialTable"> |
| | | <template #toolbar></template> |
| | | <template #toolbar> |
| | | <el-button @click="exportRawMaterial" type="primary" >导出</el-button> |
| | | </template> |
| | | </ttable> |
| | | </basic-container> |
| | | <!-- 弹窗, 新增 / 修改 --> |
| | |
| | | ref="addOrUpdate" |
| | | @refreshDataList="getData" |
| | | ></RawMaterialForm> |
| | | <el-dialog |
| | | top="10vh" |
| | | title="打印预览" |
| | | :visible.sync="printDialogVisible" |
| | | width="60%"> |
| | | <div style="width:100%;height: 60vh;overflow-y: scroll;"> |
| | | <printTemplate id="printRaw" :formData="printFormData"></printTemplate> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="()=>{printDialogVisible = false;this.printFormData=null}">取 消</el-button> |
| | | <el-button type="primary" @click="printFun()">打 印</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import ExportMaterial from './ExportMaterial.vue' |
| | | import ttable from '@/views/common/ztt-table.vue' |
| | | import { getRawInspectList,delObj } from '@/api/quality/rawMaterial' |
| | | import { getRawInspectList,delObj,exportRawMaterial,getObj } from '@/api/quality/rawMaterial' |
| | | import RawMaterialForm from './rawMaterial-form' |
| | | import * as fecha from 'element-ui/lib/utils/date' |
| | | import { mapGetters } from 'vuex' |
| | | import PrintJS from 'print-js' |
| | | import printTemplate from './rawMaterial-print.vue' |
| | | export default { |
| | | data() { |
| | | return { |
| | | printFormData: null, |
| | | printDialogVisible: false, |
| | | queryParam: {}, |
| | | resultData:[], |
| | | addOrUpdateVisible: false, |
| | | type: [1], |
| | |
| | | isRefresh: true, // 是否显示刷新按钮 |
| | | isShowHide: true, // 是否显示显影按钮H |
| | | isSearch: true, // 高级查询按钮 |
| | | defaultOrderBy: { column: 'formTime', direction: 'desc' }, |
| | | defaultOrderBy: { column: 'createTime', direction: 'desc' }, |
| | | }, |
| | | table: { |
| | | total: 0, |
| | | currentPage: 1, |
| | | pageSize: 20, |
| | | data: [], |
| | | isExport:true, |
| | | // 标题 |
| | | column: [ |
| | | { |
| | |
| | | prop: 'createTime', |
| | | label: '报检日期', |
| | | isTrue: true, |
| | | sort: true, |
| | | isSearch: true, |
| | | searchInfoType: 'text', |
| | | formatter: this.formatDateTime, |
| | |
| | | text: '新增', |
| | | type: 'primary', |
| | | fun: this.addOrUpdateHandle |
| | | }], |
| | | operator: [{ |
| | | text: '打印', |
| | | type: 'text', |
| | | size: 'small', |
| | | fun: this.previewFun |
| | | }, |
| | | { |
| | | text: '导出', |
| | | type: 'primary', |
| | | fun: this.handleExcel |
| | | } |
| | | ], |
| | | operator: [{ |
| | | text: '作废', |
| | | type: 'text', |
| | | size: 'small', |
| | |
| | | components: { |
| | | ttable, |
| | | RawMaterialForm, |
| | | ExportMaterial, |
| | | printTemplate, |
| | | }, |
| | | created() { |
| | | |
| | |
| | | computed: { |
| | | ...mapGetters(['permissions']) |
| | | }, |
| | | methods:{ |
| | | async costPlannedAmountChange(value){ |
| | | this.resultData= value |
| | | }, |
| | | |
| | | handleExcel() { |
| | | console.log(this.resultData); |
| | | console.log(this.table.column); |
| | | // let arr = this.table.column.map(el = el.isTrue == true) |
| | | // console.log(arr); |
| | | let arr = this.table.column.filter(item => item.isTrue == true).map(item => { |
| | | return{ |
| | | prop:item.prop, |
| | | label:item.label |
| | | } |
| | | }) |
| | | let opt = { |
| | | title: '文档标题', |
| | | column: [{ |
| | | label:'', |
| | | prop:'header', |
| | | children:arr |
| | | }], |
| | | data: this.resultData |
| | | watch:{ |
| | | printFormData(newVal){ |
| | | if(newVal){ |
| | | this.printFormData = newVal |
| | | } |
| | | } |
| | | this.$Export.excel({ |
| | | title: opt.title, |
| | | columns: opt.column, |
| | | data: opt.data |
| | | }); |
| | | // console.log(this.table); |
| | | |
| | | }, |
| | | }, |
| | | methods:{ |
| | | //查看报告按钮 |
| | | previewFun(row){ |
| | | getObj(row.id).then(res=>{ |
| | | this.printFormData = res.data.data |
| | | this.printDialogVisible = true |
| | | }).catch(error=>{ |
| | | console.log(error); |
| | | }) |
| | | }, |
| | | //打印按钮 |
| | | printFun() { |
| | | this.printDialogVisible = false; |
| | | PrintJS({ |
| | | printable: "printRaw", |
| | | type: "html", |
| | | maxWidth: 1200, |
| | | // header: "原材料检测报告", |
| | | style: '@page {margin: 0 5mm}', |
| | | targetStyles: ["*"], |
| | | ignoreElements: ["no-ignore"], |
| | | orientation: 'portrait' |
| | | }); |
| | | }, |
| | | getQueryParam(data){ |
| | | this.queryParam = data |
| | | }, |
| | | exportRawMaterial(){ |
| | | exportRawMaterial(this.queryParam).then(res=>{ |
| | | console.log(res) |
| | | this.downloadFun(res) |
| | | }).catch(error=>{ |
| | | console.log(error); |
| | | }) |
| | | }, |
| | | downloadFun(result){ |
| | | if(result == null || result == undefined){ |
| | | return; |
| | | } |
| | | var nameList = result.headers['content-disposition']; |
| | | nameList = decodeURI(nameList); |
| | | var fileName = nameList.split('=')[1]; |
| | | const blob = new Blob([result.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) |
| | | const downloadElement = document.createElement('a') // 新建一个DOM节点 |
| | | const href = window.URL.createObjectURL(blob) // 创建下载的链接 |
| | | downloadElement.href = href |
| | | downloadElement.download = fileName // 下载后文件名 |
| | | document.body.appendChild(downloadElement) // 将新增的节点挂载到页面上 |
| | | downloadElement.click() // 点击下载 |
| | | document.body.removeChild(downloadElement) // 下载完成移除元素 |
| | | window.URL.revokeObjectURL(href) |
| | | }, |
| | | // 删除 |
| | | deleteHandle(row) { |
| | | this.$confirm('是否确认删除该数据:' + row.code , '提示', { |