zouyu
2023-11-07 2c1bde73a53930829f46701adf2161a574a1931c
src/views/quality/rawMaterial/index.vue
@@ -20,13 +20,15 @@
            <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>
        <!-- 弹窗, 新增 / 修改 -->
@@ -35,18 +37,35 @@
            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],
@@ -64,14 +83,13 @@
                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: [
                    {
@@ -139,6 +157,7 @@
                        prop: 'createTime',
                        label: '报检日期',
                        isTrue: true,
                        sort: true,
                        isSearch: true,
                        searchInfoType: 'text',
                        formatter: this.formatDateTime,
@@ -190,14 +209,14 @@
                    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',
@@ -217,7 +236,7 @@
    components: {
        ttable,
        RawMaterialForm,
        ExportMaterial,
        printTemplate,
    },
    created() {
@@ -225,39 +244,65 @@
    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 , '提示', {