wanda-bm-guide/src/views/equipment/table/otherTable.vue

<!-- 设备设施其他事项 -->
<template>
    <div class='qt-list'>
        <div class='eq-list-top'>
            <el-input
                placeholder='搜索记录事项位置内容'
                style='width:192px;margin-right:12px'
                size='small'
                prefix-icon='el-icon-search'
                v-model='keyword'
                clearable
                @blur='getList'
            ></el-input>

            <div class='picker-box'>
                <span class='picker-span'>选择处理日期：</span>
                <el-date-picker
                    style='width:190px'
                    v-model='handledate'
                    value-format='yyyyMMdd'
                    type='daterange'
                    @change='getList'
                    size='mini'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
            </div>
            <Select
                width='180'
                tipPlace='top'
                caption='处置结果：'
                v-model='handleresults'
                :selectdata='handleOption'
                :placeholder='"请选择"'
                @change='getList'
            ></Select>
        </div>
        <el-table :data='tableData' :border='true' style='width: 100%'>
            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
            <el-table-column prop='lb' label='其他事项详情' align='center'>
                <el-table-column prop='zlwfwe' label='记录事项' show-overflow-tooltip resizable min-width='320'>
                    <template slot-scope='{row}'>{{row.jlsx || '--'}}</template>
                </el-table-column>
                <el-table-column prop label='位置' show-overflow-tooltip resizable width='425'>
                    <template slot-scope='{row}'>{{row.description || '--'}}</template>
                </el-table-column>
                <el-table-column prop='content' label='内容' show-overflow-tooltip resizable width='260'>
                    <template slot-scope='{row}'>{{row.content || '--'}}</template>
                </el-table-column>
                <el-table-column prop='sl' label='数量' width='80'>
                    <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                </el-table-column>
            </el-table-column>
            <el-table-column prop='zfje' label='金额(万元)' width='80'>
                <template slot-scope='{row}'>{{number_format(row.zfje,2) || '--'}}</template>
            </el-table-column>
            <el-table-column prop='handledate' label='处理日期' width='130'>
                <template slot-scope='{row}'>{{row.handledate?formatter(row.handledate): '--'}}</template>
            </el-table-column>
            <el-table-column prop='handleresults' label='处置结果' show-overflow-tooltip resizable width='100'>
                <template slot-scope='{row}'>{{row.handleresults || '--'}}</template>
            </el-table-column>
            <el-table-column prop='zlwfwz ' label='资料存放位置' show-overflow-tooltip resizable width='100'>
                <template slot-scope='{row}'>{{row.zlwfwz || '--'}}</template>
            </el-table-column>
            <el-table-column prop='recordtime' label='记录日期' width='140'>
                <template slot-scope='{row}'>{{row.createdate?formatter(row.createdate): '--'}}</template>
            </el-table-column>
        </el-table>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { queryQtsx } from '@/api/equipmentList.js'
import { mapGetters } from 'vuex'
import { formatter, number_format } from '@/utils/format.js'
import { querySelect } from '@/api/public.js'
import { Select } from 'meri-design'
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            formatter,
            number_format,
            currentPage: 1,
            size: 10,
            keyword: '',
            handleresults: '',
            handledate: '',
            handleOption: []
        }
    },
    props: ['major', 'smsxt', 'tabLabel'],
    computed: {
        ...mapGetters(['floorSelect'])
    },
    methods: {
        //序号的方法
        indexMethod(index) {
            return (this.currentPage - 1) * this.size + index + 1
        },
        pageChanged(page) {
            this.currentPage = page
            this.getList()
        },
        getList() {
            let getParams = {
                data: {
                    smsxt: this.smsxt,
                    // tab: this.major,
                    plazaId: this.$store.state.plazaId,
                    page: this.currentPage,
                    size: this.size
                }
            }
            //输入框
            getParams.data.keyword = ''
            if (this.keyword) {
                getParams.data.keyword += `${this.keyword}:jlsx,location,content;`
            }
            if (getParams.data.keyword == '') {
                delete getParams.data.keyword
            }
            //时间
            if (this.handledate) {
                getParams.data.handledateStartDate = this.handledate[0] + '000000'
                getParams.data.handledateEndDate = this.handledate[1] + '000000'
            }
            //下拉
            if (this.handleresults) {
                getParams.data.handleresults = this.handleresults
            }
            queryQtsx(getParams).then(res => {
                //console.log(res)
                this.tableData = res.data ? res.data : []
                this.total = res.count
            })
        },
        //下拉框查询
        tabFind() {
            let postParams = [
                {
                    columnName: { handleresults: 'handleresults' },
                    tableName: 'glsms_qtsx' //视图名称
                }
            ]
            let major
            if (this.major.slice(0, 2) == 'GD') {
                major = '供电'
            } else if (this.major.slice(0, 2) == 'XF') {
                major = '消防'
            } else if (this.major.slice(0, 2) == 'GPS') {
                major = '给排水'
            } else if (this.major.slice(0, 2) == 'DT') {
                major = '电梯'
            } else if (this.major.slice(0, 2) == 'RQ') {
                major = '燃气'
            } else if (this.major.slice(0, 2) == 'RD') {
                major = '弱电'
            } else if (this.major.slice(0, 2) == 'NT') {
                major = '暖通'
            } else if (this.major.slice(0, 2) == 'TJ') {
                major = '土建'
            } else {
                major = this.major
            }
            let data = {
                major: major,
                plazaId: this.$store.state.plazaId
            }
            querySelect({ data, postParams }).then(res => {
                //console.log(res)
                let handleresults = res.data.data.glsms_qtsx.handleresults
                this.handleOption = []
                handleresults.forEach(el => {
                    this.handleOption.push({
                        name: el.value,
                        id: el.key
                    })
                })
            })
        }
    },
    watch: {
        smsxt(newV, oldV) {
            if (newV !== oldV) {
                this.tabFind()
                this.getList()
            }
        },
        tabLabel(newV, oldV) {
            if (newV !== oldV) {
                this.tabFind()
                this.getList()
            }
        },
        handleresults() {
            this.getList()
        }
    },
    mounted() {
        this.tabFind()
        //console.log(this.smsxt)
        this.getList()
    }
}
</script>
<style lang="less" scoped>
.qt-list {
    .eq-list-top {
        display: flex;
        margin-bottom: 12px;
        .picker-box {
            display: flex;
            align-items: center;
            background: #fff;
            padding: 0 6px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            height: 32px;
            box-sizing: border-box;
            margin-right: 12px;
            .picker-span {
                margin-right: 6px;
                color: rgba(0, 0, 0, 0.65);
            }
        }
    }
    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>
<style lang="less" >
.qt-list {
    .picker-box {
        .el-input__inner {
            border: none;
        }
        .el-range-editor.el-input__inner {
            padding: 3px 0px;
        }
        .el-icon-date {
            display: none;
        }
        .el-range__close-icon {
            position: absolute;
            right: 0px;
            top: 2px;
        }
        .el-range-editor--mini .el-range-input {
            font-size: 14px;
            color: rgb(31, 36, 41);
        }
    }
}
</style>