jya-oa-qianduan/src/apps/approval/components/apply-print/apply-print20.vue

<template>
    <div>
        <div ref="approval" class="approval-print">
            <div>
                <h4 class="text-center">
                    基建物业管理中心因私出国（境）审批表
                </h4>
                <div class="text-right">
                    基建因私出字〔{{ data.abroadYear }}〕第{{ data.abroadSn }}号
                </div>
                <table border="1" style="width:100%;" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="text-center">
                            姓名
                        </td>
                        <td class="text-center">
                            {{ data.userName }}
                        </td>
                        <td class="text-center">
                            单位及职务
                        </td>
                        <td colspan="3">
                            {{ data.depName }} / {{ data.position }}
                        </td>
                    </tr>
                    <template v-for="(item,index) in jjcontractform">
                        <tr v-if="item.idx === 0" :key="`${index}b`">
                            <td class="text-center">
                                {{ item.defaultLable }}
                            </td>
                            <td colspan="5">
                                {{ item.values }}
                            </td>
                        </tr>
                        <tr v-if="item.idx === 1" :key="`${index}b`">
                            <td class="text-center">
                                {{ item.defaultLable }}
                            </td>
                            <td colspan="5">
                                <span v-for="(it,indx) in item.defaultOptions" :key="indx">
                                    <span v-if="it.text === item.values">☑</span>
                                    <span v-else>□</span>
                                    {{ it.text }}&nbsp;&nbsp;&nbsp;
                                </span>
                            </td>
                        </tr>
                        <tr v-if="item.idx === 2" :key="`${index}b`">
                            <td rowspan="3" class="text-center">
                                申办事项
                            </td>
                            <td class="text-center">
                                {{ item.defaultLable }}
                            </td>
                            <td colspan="4">
                                <span v-for="(it,indx) in item.defaultOptions" :key="indx">
                                    <span v-if="item.values&&item.values.includes(it.text)">☑</span>
                                    <span v-else>□</span>
                                    {{ it.text }} &nbsp;&nbsp;&nbsp;
                                </span>
                            </td>
                        </tr>
                        <tr v-if="item.idx === 3" :key="`${index}b`">
                            <td class="text-center">
                                {{ item.defaultLable }}
                            </td>
                            <td colspan="4">
                                <span v-for="(it,indx) in item.defaultOptions" :key="indx">
                                    <span v-if="item.values&&item.values.includes(it.text)">☑</span>
                                    <span v-else>□</span>
                                    {{ it.text }}&nbsp;&nbsp;&nbsp;
                                </span>
                            </td>
                        </tr>
                        <tr v-if="item.idx === 4" :key="`${index}b`">
                            <td class="text-center">
                                {{ item.defaultLable }}
                            </td>
                            <td colspan="4">
                                {{ item.values[0] }} -- {{ item.values[1] }}
                            </td>
                        </tr>
                    </template>

                    <template v-for="(item,index) in formJson">
                        <tr v-if="item.componentName === 'textnote'" :key="`${index}c`">
                            <td colspan="6">
                                <div class="sq-title">
                                    申请人承诺：
                                </div>
                                <div class="sq-content">
                                    {{ item.defaultProps }}
                                </div>

                                <div class="sq-footer">
                                    <span>签字： {{ data.userName }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span>时间： {{ data.createTime2 }}</span>
                                </div>
                            </td>
                        </tr>
                    </template>

                    <template v-for="(flow,index) in flowJson">
                        <tr v-if="flow.type === 2||flow.type === 8" :key="`${index}d`">
                            <td>{{ flow.name }}</td>
                            <td colspan="5" class="td-nopadding">
                                <template v-for="item in flow.users">
                                    <div v-if="item.status != 3&&item.status != 4" :key="item.id" class="flow-box">
                                        <div v-if="item.content">
                                            "{{ item.content }}"
                                        </div>
                                        <div>
                                            <span v-if="item.type === 2||item.type === 8">
                                                {{ item.name }}
                                                <span v-if="item.status === 0" class="text-gray">待审批</span>
                                                <span v-if="item.status === 1" class="text-gray">已同意</span>
                                                <span v-if="item.status === 2" class="text-gray">已拒绝</span>
                                                <span v-if="item.status === 3" class="text-gray">已转交</span>
                                                <span v-if="item.status === 4" class="text-gray">已流转</span>
                                            </span>
                                            <span v-if="item.type === 2||item.type === 8" class="pull-right">{{ item.finishTime }}</span>
                                            <span v-if="item.type === 3||item.type === 9" class="pull-right">{{ item.createTime }}</span>
                                        </div>
                                    </div>
                                </template>
                            </td>
                        </tr>
                    </template>
                </table>
            </div>
        </div>
        <p class="text-center">
            <el-button icon="el-icon-printer" type="info" @click="print">
                打印
            </el-button>
        </p>
    </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import utils from '@/common/utils/utils';
import Print from '@/common/utils/print';

Vue.use(Print); // 注册

// 表单打印
@Component({
    props: {
        data: {
            type: Object,
            default() {
                return {};
            },
        },
        table: {
            type: Array,
            default() {
                return [];
            },
        },
        advform: {
            type: Array,
            default() {
                return [];
            },
        },
        flow: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    components: {

    },
    computed: {

    },
})
export default class ApplyPrint20 extends Vue {
    formJson = [];

    jjcontractform = []

    tableData = [];

    flowJsonRecord = [];

    items = [];

    title = '';

    company = '';

    total = 0;

    flowJson = [];

    created() {
        this.jjcontractform = this.advform;
        this.tableData = this.table;
        this.flowJsonRecord = this.flow;


        this.formJson = utils.transFormJson(JSON.parse(this.data.formJson), 1); // 转化表单数据

        const flowJson = JSON.parse(this.data.flowJson);
        let startNodeId = '';
        flowJson.forEach((item) => {
            if (item.type === 1) {
                startNodeId = item.id;
            }
        });
        this.getSortFlowJson(startNodeId, flowJson);

        this.flowJson.forEach((item) => {
            const info = item;
            info.users = [];
            console.log(item, this.flowJsonRecord);
            this.flowJsonRecord.forEach((item2) => {
                if (item.id === item2.nodeid) {
                    console.log(1111);
                    info.users.push(item2);
                }
            });
        });

        console.log(this.flowJson);

        // this.jjcontractform.forEach((item) => {
        //     if (item.idx === 0) {
        //         const vals = JSON.parse(item.values);
        //         this.title = vals.title;
        //         this.company = vals.company;
        //         this.items = vals.items;
        //     }
        // });

        // this.items.forEach((item) => {
        //     this.total += Number(item.money);
        // });
    }

    print() {
        this.$print(this.$refs.approval);
    }

    // 排序节点
    getSortFlowJson(nodeId, flowJson) { // eslint-disable-line
        for (const o in flowJson) { // eslint-disable-line
            if (flowJson[o].id === nodeId) {
                if (flowJson[o].type === 5) { // 流程结束节点
                    this.flowJson.push(flowJson[o]);
                    break;
                }
                this.flowJson.push(flowJson[o]);
                this.getSortFlowJson(flowJson[o].nextId, flowJson);
                break;
            }
        }
    }
}
</script>

<style media="print">
    @page {
        size: auto;
        margin: 0px 50px;
    }
</style>
<style scoped lang="scss">
.approval-print{
    padding-top: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
.flow-box{
    padding: 2px 5px;
    border-bottom: 2px solid #303133;
}
.flow-box:last-child{
    border-bottom: 0;
}
td{
    padding: 2px 5px;
}
.td-nopadding{
    padding: 0;
}

// table,tr,td{
//     border: 1px solid #909399;
// }
table.no-border{
    border:0;
}
.td-title{
    width: 100px;
}
.sq-title{
    font-size: 18;
    font-weight: bold;
    padding: 10px 0;
}
.sq-content{
    text-indent: 40px;
    font-size: 16px;
    padding: 10px 0;
    padding-bottom: 30px;
}
.sq-footer{
    padding: 10px 0;
    padding-bottom: 30px;
    text-align: right;
}
td{
    padding:5px;
    width: 166px;
}
</style>