BusinessBenchmark/src/components/assessment/evaluationDeptRatingPage.vue

<template>
    <div class="evaluationRating">
        <div class="evaluationRatingBtn">
            <div class="collectSeach" :style="$utils.collectSeachSty()">
                <div class="exceed">
                    <span class="exceedSpan">部门名称：</span>
                    <el-input v-model="resDeptName" placeholder="请输入部门名称"></el-input>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="width: 80px">考评年度：</span>
                    <el-date-picker v-model="resAnnual" type="year" value-format="YYYY" placeholder="选择年份" />
                </div>
                <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
            </div>
            <div class="PeriodBtn" :style="$utils.PeriodBtnSty()">
                <btns :showImport="$utils.havePurview('evaluationDeptRating:oneLevel:import')"
                    :showExport="$utils.havePurview('evaluationDeptRating:oneLevel:export')"
                    :showSave="$utils.havePurview('evaluationDeptRating:oneLevel:save')"
                    :showAdd="$utils.havePurview('evaluationDeptRating:oneLevel:add')"
                    :showDelete="$utils.havePurview('evaluationDeptRating:oneLevel:delete')"
                    :disSave="changeDateSelect.length === 0 || changeDateSelect.length>1"
                    :disDelete="changeDateSelect.length === 0" :disImport="false" :disExport="false"
                    @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete"
                    @handleImport="handleImport" @handleExport="handleExport"></btns>
            </div>
            <div class="evaluationRatingTableData">
                <!-- @row-click="rowClickToggle" -->
                <!-- .length>0?evaluationRatingData.slice((page.currentPage-1)*page.pagesize, page.currentPage*page.pagesize):evaluationRatingData -->
                <el-table :data="evaluationRatingData" style="width: 100%" ref="tableRating"
                    :class="evaldeptRatingTableSty()" @select="rowClick" @select-all="rowClick">
                    <el-table-column type="selection" label="操作" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" align="center"></el-table-column>
                    <el-table-column label="考评部门" width="200">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="customized" :content="scope.row.deptName"
                                placement="right">
                                <span class="tooltipCC">{{scope.row.deptName}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="考评年度" prop="annual" />
                    <el-table-column :label="it.label" :prop="it.value" v-for="it in monthArr" :key="it.value">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="customized" :content="scope.row[it.value+'Content']"
                                placement="right">
                                <span class="tooltipCCDes"
                                    :style="scope.row[it.value] === 'A' ? 'color: #1f52b2' : scope.row[it.value] === 'C' ? 'color: red' : '' ">{{scope.row[it.value]}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="A级总数" prop="acount" />
                    <el-table-column label="C级总数" prop="ccount" />
                </el-table>
                <!-- <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-size="page.pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination> -->
            </div>
            <el-dialog :title="title" custom-class="startToDia" v-model="dialogVisible" width="600px"
                :close-on-click-modal="false">
                <div class="periodFrom">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                        :validate-on-rule-change="false">
                        <el-form-item label="考评部门" prop="department">
                            <el-select v-model="ruleForm.department" placeholder="请选择考评部门" filterable
                                :disabled="isSave">
                                <el-option v-for="item in departData" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="年份" prop="year">
                            <el-date-picker v-model="ruleForm.year" :disabled="isSave" type="year" value-format="YYYY"
                                placeholder="请选择年份" />
                        </el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item :label="it.label" :prop="it.value" v-for="it in monthArrLeft"
                                    :key="it.value">
                                    <el-select v-model="ruleForm[it.value]" placeholder="请选择评级" clearable
                                        @change="(val)=>changeAData(val, it)" @clear="(val)=>clearAData(val, it)">
                                        <el-option v-for="item in ratingArr" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item :label="it.label" :prop="it.value" v-for="it in monthArrRight"
                                    :key="it.value">
                                    <el-select v-model="ruleForm[it.value]" placeholder="请选择评级" clearable
                                        @change="(val)=>changeAData(val, it)" @clear="(val)=>clearAData(val, it)">
                                        <el-option v-for="item in ratingArr" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item :label="it.label+'通告'" :prop="it.value+'Content'" v-for="it in acauseDataArr"
                            :key="it.value">
                            <el-input v-model="ruleForm[it.value+'Content']" placeholder="请输入通告"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveevaluaStart('ruleForm')">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <start-from-list ref="startFromDetail"></start-from-list>
        <import-dailog ref="importPage" @successImport="successImport"></import-dailog>
    </div>
</template>

<script>
    import importDailog from '../importPage/importDailog.vue'
    import startFromList from './evaluationDeptStartFrom.vue'
    import btns from '../elbuttonS.vue'
    import seachs from '../seachGroup.vue'
    import ExcelJS from 'exceljs'
    import fileSave from 'file-saver'
    import {
        apiGetevaluationdeptratinglist,
        apiGetevaluationdeptratingsave,
        apiGetorganizationstructureFromTree,
        apiPostevaluationdeptratingDelete
    } from '../../api/api'
    export default {
        components: {
            startFromList,
            importDailog,
            btns,
            seachs
        },
        data() {
            return {
                dialogVisible: false,
                isSave: false,
                title: '',
                evalradio: {},
                changeDateSelect: [],
                evaluationRatingData: [],
                departData: [],
                page: {
                    pagesize: 12,
                    currentPage: 1,
                    total: 0
                },
                ruleForm: {
                    department: '',
                    year: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dece: '',
                    janContent: '',
                    febContent: '',
                    marContent: '',
                    aprContent: '',
                    mayContent: '',
                    junContent: '',
                    julContent: '',
                    augContent: '',
                    sepContent: '',
                    octContent: '',
                    novContent: '',
                    deceContent: ''
                },
                winPix: window.devicePixelRatio,
                innerWidth: window.innerWidth,
                rules: {
                    department: [{
                        required: true,
                        message: '请选择考评部门',
                        trigger: 'change'
                    }],
                    year: [{
                        required: true,
                        message: '请选择年份',
                        trigger: 'change'
                    }],
                    janContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    febContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    marContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    aprContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    mayContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    junContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    julContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    augContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    sepContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    octContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    novContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }],
                    deceContent: [{
                        required: true,
                        message: '请输入通告',
                        trigger: 'blur'
                    }]
                },
                resDeptName: '',
                resAnnual: '',
                monthArr: [],
                monthArrLeft: [],
                monthArrRight: [],
                ratingArr: [],
                acauseDataArr: []
            }
        },
        created() {
            this.monthArrLeft = [{
                    label: '一月',
                    value: 'jan',
                },
                {
                    label: '二月',
                    value: 'feb',
                },
                {
                    label: '三月',
                    value: 'mar',
                },
                {
                    label: '四月',
                    value: 'apr',
                },
                {
                    label: '五月',
                    value: 'may',
                },
                {
                    label: '六月',
                    value: 'jun',
                }
            ]
            this.monthArrRight = [{
                    label: '七月',
                    value: 'jul',
                },
                {
                    label: '八月',
                    value: 'aug',
                },
                {
                    label: '九月',
                    value: 'sep',
                },
                {
                    label: '十月',
                    value: 'oct',
                },
                {
                    label: '十一月',
                    value: 'nov',
                },
                {
                    label: '十二月',
                    value: 'dece',
                },
            ]
            this.monthArr = this.monthArrLeft.concat(this.monthArrRight)
            this.ratingArr = [{
                    label: 'A级',
                    value: 'A'
                },
                {
                    label: 'B级',
                    value: 'B'
                },
                {
                    label: 'C级',
                    value: 'C'
                }
            ]
            this.resAnnual = new Date().getFullYear().toString()
            this.getevaluRatingList()
            this.getDepartmentFromTreeData()
        },
        methods: {
            // 查询列表页面
            getevaluRatingList() {
                let that = this
                let userMes = JSON.parse(window.sessionStorage.getItem('user'))
                let params = {
                    pageNum: that.page.currentPage,
                    pageSize: that.page.pagesize,
                    deptId: userMes.deptId,
                    deptName: that.resDeptName,
                    annual: that.resAnnual
                }
                apiGetevaluationdeptratinglist(params).then(datas => {
                    if (datas && datas.data) {
                        that.evaluationRatingData = datas.data
                    }
                })
            },
            // 查询部门
            getDepartmentFromTreeData() {
                let that = this
                let params = {
                    id: '23031001',
                    num: 1,
                    type: 140
                }
                apiGetorganizationstructureFromTree(params).then(datas => {
                    if (datas && datas.data) {
                        that.departData = datas.data[0].children
                    }
                })
            },
            evaluationRatingFn() {
                if (this.evaluationRatingData.length > 0) {
                    evaluationRatingData.slice((page.currentPage - 1) * page.pagesize, page.currentPage * page.pagesize)
                }
            },
            // rowClickToggle(row) {
            //     this.$refs.tableRating.toggleRowSelection(row)
            // },
            changeAData(val, data) {
                if (val !== '') {
                    this.monthArr.forEach(it => {
                        if (data.label === it.label) {
                            let model = false
                            this.acauseDataArr.forEach((iv, index) => {
                                if (data.label === iv.label) {
                                    model = true
                                }
                            })
                            if (!model) {
                                this.acauseDataArr.push(it)
                            }
                        }

                    })
                }
            },
            clearAData(val, data) {
                this.acauseDataArr.forEach((it, index) => {
                    if (data.label === it.label) {
                        this.acauseDataArr.splice(index, 1)
                    }
                })
            },
            saveevaluaStart(formName) {
                let that = this
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.saveAndEditIndicatorData()
                    }
                });
            },
            //新增/修改考评启动数据
            saveAndEditIndicatorData() {
                let that = this
                let orgName = ''
                this.departData.forEach(item => {
                    if (item.id === that.ruleForm.department) {
                        orgName = item.name
                    }
                })
                let userMes = JSON.parse(window.sessionStorage.getItem('user'))
                let params = {
                    deptId: that.ruleForm.department,
                    deptName: orgName,
                    annual: that.ruleForm.year,
                    jan: that.ruleForm.jan,
                    feb: that.ruleForm.feb,
                    mar: that.ruleForm.mar,
                    apr: that.ruleForm.apr,
                    may: that.ruleForm.may,
                    jun: that.ruleForm.jun,
                    jul: that.ruleForm.jul,
                    aug: that.ruleForm.aug,
                    sep: that.ruleForm.sep,
                    oct: that.ruleForm.oct,
                    nov: that.ruleForm.nov,
                    dece: that.ruleForm.dece,
                    janContent: that.ruleForm.janContent,
                    febContent: that.ruleForm.febContent,
                    marContent: that.ruleForm.marContent,
                    aprContent: that.ruleForm.aprContent,
                    mayContent: that.ruleForm.mayContent,
                    junContent: that.ruleForm.junContent,
                    julContent: that.ruleForm.julContent,
                    augContent: that.ruleForm.augContent,
                    sepContent: that.ruleForm.sepContent,
                    octContent: that.ruleForm.octContent,
                    novContent: that.ruleForm.novContent,
                    deceContent: that.ruleForm.deceContent,
                    createBy: userMes.id,
                    createName: userMes.name
                }
                if (that.isSave) {
                    params.id = that.evalradio.id
                }
                apiGetevaluationdeptratingsave(params).then(datas => {
                    if (!datas.success) {
                        that.$message({
                            message: datas.message,
                            type: 'error'
                        });
                    } else {
                        if (!that.isSave) {
                            that.$message({
                                message: '部门绩效考核评级新增成功',
                                type: 'success'
                            });
                        } else {
                            that.$message({
                                message: '部门绩效考核评级修改成功',
                                type: 'success'
                            });
                        }
                        that.dialogVisible = false
                        that.changeDateSelect = []
                        that.getevaluRatingList()
                    }
                })
            },
            getSeachData() {
                this.page.currentPage = 1
                this.getevaluRatingList()
            },
            resetSeach() {
                this.page.currentPage = 1
                this.resDeptName = ''
                this.resAnnual = new Date().getFullYear().toString()
                this.getevaluRatingList()
            },
            handleSizeChange(val) {
                this.page.pagesize = val
                this.getevaluRatingList()
            },
            handleCurrentChange(val) {
                this.page.currentPage = val
                this.getevaluRatingList()
            },
            rowClick(selection, row) {
                this.changeDateSelect = selection
            },
            handleAdd() {
                this.dialogVisible = true
                this.isSave = false
                this.title = '新建部门绩效考核评级'
                this.acauseDataArr = []
                this.$nextTick(() => {
                    // this.$refs['ruleForm'].resetFields()
                    this.ruleForm = {
                        department: '',
                        year: '',
                        jan: '',
                        feb: '',
                        mar: '',
                        apr: '',
                        may: '',
                        jun: '',
                        jul: '',
                        aug: '',
                        sep: '',
                        oct: '',
                        nov: '',
                        dece: '',
                        janContent: '',
                        febContent: '',
                        marContent: '',
                        aprContent: '',
                        mayContent: '',
                        junContent: '',
                        julContent: '',
                        augContent: '',
                        sepContent: '',
                        octContent: '',
                        novContent: '',
                        deceContent: ''
                    }
                })
            },
            handleEdit() {
                this.dialogVisible = true
                this.isSave = true
                this.title = '修改部门绩效考核评级'
                this.evalradio = this.changeDateSelect[0]
                this.acauseDataArr = []
                this.ruleForm = {
                    department: this.evalradio.deptId,
                    year: this.evalradio.annual,
                    jan: this.evalradio.jan,
                    feb: this.evalradio.feb,
                    mar: this.evalradio.mar,
                    apr: this.evalradio.apr,
                    may: this.evalradio.may,
                    jun: this.evalradio.jun,
                    jul: this.evalradio.jul,
                    aug: this.evalradio.aug,
                    sep: this.evalradio.sep,
                    oct: this.evalradio.oct,
                    nov: this.evalradio.nov,
                    dece: this.evalradio.dece,
                    janContent: this.evalradio.janContent,
                    febContent: this.evalradio.febContent,
                    marContent: this.evalradio.marContent,
                    aprContent: this.evalradio.aprContent,
                    mayContent: this.evalradio.mayContent,
                    junContent: this.evalradio.junContent,
                    julContent: this.evalradio.julContent,
                    augContent: this.evalradio.augContent,
                    sepContent: this.evalradio.sepContent,
                    octContent: this.evalradio.octContent,
                    novContent: this.evalradio.novContent,
                    deceContent: this.evalradio.deceContent
                }
                let arr = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dece']
                arr.forEach(it => {
                    if (this.evalradio[it] !== '') {
                        this.monthArr.forEach(itv => {
                            if (itv.value === it) {
                                this.acauseDataArr.push(itv)
                            }

                        })
                    }
                })
            },
            //删除
            handleDelete() {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this
                    let paramsArr = []
                    that.changeDateSelect.forEach(it => {
                        paramsArr.push(it.id)
                    })
                    apiPostevaluationdeptratingDelete(paramsArr.join(',')).then(datas => {
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        that.getevaluRatingList()
                        that.changeDateSelect = []
                    })
                })
            },
            handleImport() {
                this.$refs.importPage.upload.title = "部门考评评级"
                this.$refs.importPage.upload.open = true
                this.$refs.importPage.upload.url = '/evaluation-dept-rating/import'
            },
            successImport(val) {
                this.getevaluRatingList()
            },
            handleExport() {
                let data = this.evaluationRatingData //接口返回数据
                const workbook = new ExcelJS.Workbook()
                const worksheet = workbook.addWorksheet('Sheet1')
                //根据数据自己调整
                let colums = []
                colums = [{
                        header: '部门编号',
                        key: 'deptId',
                        width: 26
                    },
                    {
                        header: '考评部门',
                        key: 'deptName',
                        width: 26
                    },
                    {
                        header: '考评年度',
                        key: 'annual',
                        width: 26
                    },
                    {
                        header: '一月',
                        key: 'jan',
                        width: 15
                    },
                    {
                        header: '一月通告',
                        key: 'janContent',
                        width: 26
                    },
                    {
                        header: '二月',
                        key: 'feb',
                        width: 15
                    },
                    {
                        header: '二月通告',
                        key: 'febContent',
                        width: 26
                    },
                    {
                        header: '三月',
                        key: 'mar',
                        width: 15
                    },
                    {
                        header: '三月通告',
                        key: 'marContent',
                        width: 26
                    },
                    {
                        header: '四月',
                        key: 'apr',
                        width: 15
                    },
                    {
                        header: '四月通告',
                        key: 'aprContent',
                        width: 26
                    },
                    {
                        header: '五月',
                        key: 'may',
                        width: 15
                    },
                    {
                        header: '五月通告',
                        key: 'mayContent',
                        width: 26
                    },
                    {
                        header: '六月',
                        key: 'jun',
                        width: 15
                    },
                    {
                        header: '六月通告',
                        key: 'junContent',
                        width: 26
                    },
                    {
                        header: '七月',
                        key: 'jul',
                        width: 15
                    },
                    {
                        header: '七月通告',
                        key: 'julContent',
                        width: 26
                    },
                    {
                        header: '八月',
                        key: 'aug',
                        width: 15
                    },
                    {
                        header: '八月通告',
                        key: 'augContent',
                        width: 26
                    },
                    {
                        header: '九月',
                        key: 'sep',
                        width: 15
                    },
                    {
                        header: '九月通告',
                        key: 'sepContent',
                        width: 26
                    },
                    {
                        header: '十月',
                        key: 'oct',
                        width: 15
                    },
                    {
                        header: '十月通告',
                        key: 'octContent',
                        width: 26
                    },
                    {
                        header: '十一月',
                        key: 'nov',
                        width: 15
                    },
                    {
                        header: '十一月通告',
                        key: 'novContent',
                        width: 26
                    },
                    {
                        header: '十二月',
                        key: 'dece',
                        width: 15
                    },
                    {
                        header: '十二月通告',
                        key: 'deceContent',
                        width: 26
                    },
                    {
                        header: 'A级总数',
                        key: 'acount',
                        width: 15
                    },
                    {
                        header: 'C级总数',
                        key: 'ccount',
                        width: 15
                    },
                ]
                worksheet.columns = colums
                worksheet.getRow(1).font = {
                    size: 12,
                    bold: true
                }
                worksheet.addRows(data)

                workbook.xlsx.writeBuffer().then(buffer => {
                    //这里为type
                    const blob = new Blob([buffer], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
                    })
                    fileSave(blob, `部门考评评级数据导出.xlsx`)
                })
            },
            evaldeptRatingTableSty() {
                if (this.winPix === 1.25 || this.innerWidth < 1800) {
                    return 'evaldeptRating125Table'
                } else {
                    return 'evaldeptRating100Table'
                }
            }
        }
    }
</script>

<style lang="less">
    .evaluationRating {
        .evaluationRatingBtn {
            .collectSeach {
                display: flex;
                padding: 24px 20px;
                border-bottom: 1px solid#D6DBEA;

                .exceed {
                    display: flex;

                    .exceedSpan {
                        width: 100px;
                        height: 12px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #8991B0;
                        line-height: 12px;
                        margin-top: 14px;
                    }

                    .el-input {
                        margin-right: 10px;
                        height: 40px;

                        .el-input__inner {
                            height: 40px;
                        }

                        .el-input__suffix {
                            .el-select__caret {
                                line-height: 30px;
                            }
                        }
                    }
                }

                .el-select {
                    margin-right: 10px;

                    .el-input__inner {
                        height: 30px;
                    }

                    .el-input__suffix {
                        .el-select__caret {
                            line-height: 30px;
                        }
                    }
                }
            }

            span {
                font-size: 14px;
            }

            .PeriodBtn {
                display: flex;
                justify-content: flex-end;
                padding: 20px 0;
            }

            .el-button {
                height: 30px;
                // width:100px;
                padding: 0 20px;

                // padding-top: 8px;
                span {
                    margin: 0;
                }
            }

            .evaluationRatingTableData {
                .evaldeptRating125Table {
                    .el-table__body-wrapper {
                        height: 63vh !important;
                    }
                }

                .evaldeptRating100Table {
                    .el-table__body-wrapper {
                        height: 65vh !important;
                    }
                }

                .el-table {
                    .el-input__inner {
                        height: 30px !important;
                    }

                    .el-radio__label {
                        display: none;
                    }

                    .tooltipCC {
                        width: 300px !important;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .tooltipCCDes {
                        width: 50px;
                        font-weight: bold;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .indicitem {
                        color: #409EFF;
                        font-size: 12px;
                        margin-right: 20px;
                        cursor: pointer;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .el-pagination {
                    margin-top: 20px;
                    text-align: end;
                    position: relative;
                }
            }

            .el-overlay {
                .startToDia {
                    .el-dialog__body {
                        padding: 30px 60px 30px 20px !important;

                        .periodFrom {

                            .el-select,
                            .el-input {
                                width: 100%;
                            }

                            .el-input {
                                height: 30px;
                            }
                        }

                        .flowSty {
                            width: 100%;
                            height: 70vh;
                        }
                    }
                }
            }
        }

    }
</style>