保安信息封装组件

guanqb

2024-01-02 763c2bd3607403858b9beaf3b5daf8b82574519a

保安信息封装组件

 src/components/bAForm/main.vue

New file
@@ -0,0 +1,74 @@
<template>
    <div class="dispatch">
        <div class="avue-page" id="avuePageEle"
            style="width: 1000px;margin: 0 auto;padding: 0 20px;position: relative;background-color: #fff;">
            <avue-form ref="form" v-model="form" :option="option0">
            </avue-form>
        </div>
        <div class="printBtn">
            <el-button type="primary" @click="printBAInfo">打印</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bAForm',
    props: {
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
        option0: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },

    methods: {
        // 打印保安信息
        printBAInfo () {
            this.$print("#avuePageEle", {
                noPrint: ".noPrint",
                onStart: () => {
                    // console.log('打印开始', Date.parse(new Date()));
                },
                onEnd: () => {
                    // console.log('打印完成', Date.parse(new Date()));
                }
            })
        },
    }

}
</script>

<style lang="scss" scoped>
.dispatch {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.printBtn {
    position: absolute;
    top: 106px;
    right: 216px;
}

.avue-page {
    :deep(.el-input.is-disabled .el-input__inner) {
        background-color: #fff;
        color: #000;
    }

    :deep(.el-textarea.is-disabled .el-textarea__inner) {
        background-color: #fff;
        color: #000;
    }
}
</style>

 src/views/securityGuard/securityGuardDetail.vue

@@ -1,15 +1,8 @@
<template>
    <div class="dispatch">
        <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
        <span v-if="typeTABS.prop === 'tab1'" class="a-f-box"
            style="display:block;width: 1000px;margin: 0 auto;padding: 0 20px;position: relative;background-color: #fff;"
            id="avuePageEle">
            <avue-form ref="form" v-model="obj1" :option="option0"> </avue-form>
        </span>
        <span v-if="typeTABS.prop === 'tab1'" class="a-f-box-btn">
            <div class="printBtn">
                <el-button type="primary" @click="printBAInfo">打印</el-button>
            </div>
        <span v-if="typeTABS.prop === 'tab1'">
            <bAForm :form="obj1" :option0="option0"></bAForm>
        </span>
        <span v-else-if="typeTABS.prop === 'tab2'">
            <avue-crud :option="option1" :data="data1" :page.sync="page1" :table-loading="loading1" @row-save="rowSave1"
@@ -101,11 +94,13 @@
// import vueQr from "vue-qr";
import securityCertificate from "./securityCertificate.vue"
import baoanz from "./baoanz.vue"
import bAForm from '@/components/bAForm/main'

export default {
    components: {
        securityCertificate: securityCertificate,
        baoanz,
        bAForm
    },
    data () {
        return {
@@ -526,20 +521,6 @@
        // },
    },
    methods: {
        // 打印保安信息
        printBAInfo () {
            var printDom = document.getElementById("avuePageEle")
            this.$print("#avuePageEle", {
                noPrint: ".noPrint",
                onStart: () => {
                    // console.log('打印开始', Date.parse(new Date()));
                },
                onEnd: () => {
                    // console.log('打印完成', Date.parse(new Date()));
                }
            })
        },

        Print () {
            var printDom = document.getElementById("baoanzheng")
            printDom.style.position = "fixed"
@@ -833,32 +814,7 @@


    }

    .printBtn {
        position: absolute;
        top: 108px;
        right: 200px;
    }
}

:deep(.el-input.is-disabled .el-input__inner) {
    background-color: #fff;
    color: #000;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: #fff;
    color: #000;
}

// .el-card__body {
//   padding-bottom: 5px !important;
// }
// .avue-crud__tip,
// .el-tag,
// .el-tag--light {
//   padding: 0 !important;
// }

.baoanzheng {
    // position: fixed;

 src/views/securityMan/index.vue

@@ -1,19 +1,6 @@
<template>
    <div class="dispatch">
        <!-- <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
    <span v-if="typeTABS.prop === 'tab1'"> -->
        <div class="avue-page" id="avuePageEle"
            style="width: 1000px;margin: 0 auto;padding: 0 20px;position: relative;background-color: #fff;">
            <avue-form ref="form" v-model="form" :option="option0">
                <template slot="menuLeft">
                    <el-button type="primary" size="small" plain icon="el-icon-s-check" @click="printBA">打印
                    </el-button>
                </template>
            </avue-form>
        </div>
        <div class="printBtn">
            <el-button type="primary" @click="printBAInfo">打印</el-button>
        </div>
        <bAForm :form="form" :option0="option0"></bAForm>
    </div>
</template>

@@ -41,6 +28,8 @@
import { getUser, getUserPractitionersInfo, update as updateUserInfo } from "@/api/system/user"

import { mapState } from "vuex"

import bAForm from '@/components/bAForm/main'

export default {
    data () {
@@ -441,6 +430,10 @@
        }
    },

    components: {
        bAForm
    },

    computed: {
        ids1 () {
            let ids1 = []
@@ -454,20 +447,6 @@
        }),
    },
    methods: {
        // 打印保安信息
        printBAInfo () {
            var printDom = document.getElementById("avuePageEle")
            this.$print("#avuePageEle", {
                noPrint: ".noPrint",
                onStart: () => {
                    // console.log('打印开始', Date.parse(new Date()));
                },
                onEnd: () => {
                    // console.log('打印完成', Date.parse(new Date()));
                }
            })
        },

        Print () {
            var printDom = document.getElementById("baoanzheng")
            printDom.style.position = "fixed"
@@ -743,26 +722,6 @@
    height: 100%;
    //   border: 1px solid #000;
    box-sizing: border-box;
}

.printBtn {
    position: fixed;
    top: 114px;
    right: 216px;
}

.avue-page {


    :deep(.el-input.is-disabled .el-input__inner) {
        background-color: #fff;
        color: #000;
    }

    :deep(.el-textarea.is-disabled .el-textarea__inner) {
        background-color: #fff;
        color: #000;
    }
}

.baoanzheng {