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

<!--专维-->
<template>
    <div class='zw-list'>
        <div class='eq-list-top'>
            <el-date-picker
                size='small'
                value-format='yyyy'
                v-model='nd'
                type='year'
                placeholder='请选择年度'
                @change='getList'
                style='width:180px;margin-right:12px'
            ></el-date-picker>
            <Select width='160' tipPlace='top' v-model='lb' caption='类别：' :selectdata='lbOption' :placeholder='"请选择"' @change='getList'></Select>
            <Select
                width='160'
                tipPlace='top'
                v-model='xm'
                caption='项目 ：'
                :selectdata='xmOption'
                :placeholder='"请选择"'
                style='margin:0 12px'
                @change='getList'
            ></Select>
            <el-input
                placeholder='搜索实施方案说明'
                prefix-icon='el-icon-search'
                size='small'
                style='width:192px'
                v-model='ssfasm'
                clearable
                @keyup.enter.native='getList'
                @blur='getList'
            ></el-input>
            <!-- 当前阶段 -->
            <Select
                width='180'
                tipPlace='top'
                size='small'
                v-model='sxjd'
                caption='当前阶段 ：'
                :placeholder='"请选择"'
                :selectdata='sxjdOption'
                style='margin:0 12px'
                @change='getList'
            ></Select>
            <!-- placeholder='选择立项时间' -->
            <div class='picker-box'>
                <span class='picker-span'>立项日期：</span>
                <el-date-picker
                    style='width:190px'
                    v-model='lxsjwcsj'
                    value-format='yyyyMMdd'
                    type='daterange'
                    @change='getList'
                    size='mini'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
            </div>
            <!-- placeholder='选择验收时间' -->
            <input-dialog v-if='statusOption.length>0' :statusOption='statusOption' :type='4' @confirm='confirm'></input-dialog>
        </div>
        <div ref='tableBox'>
            <el-table :data='tableData' :border='true' style='width: 100%' @row-click='innerTable' v-if='tableData.length>=0'>
                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
                <el-table-column prop='nd' label='年度' show-overflow-tooltip resizable width='60'>
                    <template slot-scope='{row}'>{{row.nd || '--'}}</template>
                </el-table-column>
                <el-table-column prop='qs' label='期数' show-overflow-tooltip resizable width='60'>
                    <template slot-scope='{row}'>{{row.qs || '--'}}</template>
                </el-table-column>
                <el-table-column prop='lb' label='类别' show-overflow-tooltip resizable min-width='250'>
                    <template slot-scope='{row}'>{{row.lb || '--'}}</template>
                </el-table-column>
                <el-table-column prop='xm' label='项目' show-overflow-tooltip resizable min-width='150'>
                    <template slot-scope='{row}'>{{row.xm || '--'}}</template>
                </el-table-column>
                <el-table-column prop='sl' label='数量' show-overflow-tooltip resizable width='60'>
                    <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                </el-table-column>
                <el-table-column prop='ssfasm' label='实施方案说明' show-overflow-tooltip resizable min-width='250'>
                    <template slot-scope='{row}'>{{row.ssfasm || '--'}}</template>
                </el-table-column>
                <el-table-column prop='sxjd' label='当前阶段' show-overflow-tooltip resizable width='80'>
                    <template slot-scope='{row}'>{{row.sxjd || '--'}}</template>
                </el-table-column>
                <el-table-column prop='lxsjwcsj' label='立项日期' show-overflow-tooltip resizable width='100'>
                    <template slot-scope='{row}'>{{row.lxsjwcsj?formatter(row.lxsjwcsj):'--'}}</template>
                </el-table-column>
                <el-table-column prop='yssjwcsj' label='验收日期' show-overflow-tooltip resizable width='100'>
                    <template slot-scope='{row}'>{{row.yssjwcsj?formatter(row.yssjwcsj):'--'}}</template>
                </el-table-column>
                <el-table-column prop='status' label='验收结果' show-overflow-tooltip resizable width='80'>
                    <template slot-scope='{row}'>{{row.status || '--'}}</template>
                </el-table-column>
                <el-table-column prop='zfje' label='结算金额（元）' show-overflow-tooltip resizable width='105'>
                    <template slot-scope='{row}'>{{number_format(row.zfje,2)|| '--'}}</template>
                </el-table-column>
                <el-table-column prop='xlcfwz' label='资料存放位置' show-overflow-tooltip resizable width='100'>
                    <template slot-scope='{row}'>{{row.xlcfwz || '--'}}</template>
                </el-table-column>
            </el-table>
        </div>
        <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 Select from '@/components/Select/Select.vue'
import { queryZw } from '@/api/equipmentList.js'
import { querySelect } from '@/api/public.js'
import { mapGetters } from 'vuex'
import inputDialog from './inputDIalog'
import { formatter, number_format } from '@/utils/format.js'
export default {
    components: { Select, inputDialog },
    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 1,
            yssjwcsj: '',
            lxsjwcsj: '',
            ssfasm: '',
            size: 10,
            keyword: '',
            nd: '',
            lb: '1',
            sxjd: '1',
            formatter,
            number_format,
            xm: '1',
            status: '1',
            statusOption: [],
            sxjdOption: [],
            xmOption: [],
            lbOption: [],
        }
    },
    computed: {
        ...mapGetters(['floorSelect']),
    },
    props: ['smsxt', 'major', 'diff', 'tabLabel'],
    methods: {
        //序号的方法
        indexMethod(index) {
            return (this.currentPage - 1) * this.size + index + 1
        },
        //多余输入框监听
        confirm(status, yssjwcsj) {
            console.log(status)
            this.yssjwcsj = yssjwcsj
            this.status = status
            console.log(this.status)
            this.getList()
        },
        pageChanged(page) {
            this.currentPage = page
            this.getList()
        },
        innerTable(row) {
            if (row.gczxwx_lineid) {
                window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=GCZXWXLINE&uniqueid=${row.gczxwx_lineid}`)
            }
        },
        //下拉框查询
        tabFind() {
            let postParams = [
                {
                    columnName: { lb: 'lb', xm: 'xm', sxjd: 'sxjd', status: 'status' },
                    params: {
                        smsxt: this.smsxt,
                    },
                    tableName: 'sms_zw', //视图名称
                },
            ]
            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,
            }
            if (this.major != '土建') {
                data.onlyMainAsset = true
            }
            querySelect({ data, postParams }).then((res) => {
                //console.log(res)
                let lb = res.data.data.sms_zw.lb
                let xm = res.data.data.sms_zw.xm
                let sxjd = res.data.data.sms_zw.sxjd
                let status = res.data.data.sms_zw.status
                this.lbOption = []
                this.lbOption.push({
                    name: '全部',
                    id: '1',
                })
                this.xmOption = []
                this.xmOption.push({
                    id: '1',
                    name: '全部',
                })
                this.sxjdOption = []
                this.sxjdOption.push({
                    id: '1',
                    name: '全部',
                })
                this.statusOption = []
                this.statusOption.push({
                    id: '1',
                    name: '全部',
                })
                sxjd.forEach((el) => {
                    this.sxjdOption.push({
                        name: el.value,
                        id: el.key,
                    })
                })
                xm.forEach((el) => {
                    this.xmOption.push({
                        name: el.value,
                        id: el.key,
                    })
                })
                lb.forEach((el) => {
                    this.lbOption.push({
                        name: el.value,
                        id: el.key,
                    })
                })
                status.forEach((el) => {
                    this.statusOption.push({
                        name: el.value,
                        id: el.key,
                    })
                })
            })
        },
        getList() {
            let getParams = {
                data: {
                    smsxt: this.smsxt,
                    plazaId: this.$store.state.plazaId,
                    page: this.currentPage,
                    diff: this.diff,
                    size: this.size,
                },
            }
            //下拉
            if (this.nd) {
                getParams.data.nd = this.nd
            }
            if (this.lb && this.lb != 1) {
                getParams.data.lb = this.lb
            }
            if (this.xm && this.xm != 1) {
                getParams.data.xm = this.xm
            }
            if (this.sxjd && this.sxjd != 1) {
                getParams.data.sxjd = this.sxjd
            }
            //验收
            if (this.yssjwcsj) {
                getParams.data.yssjwcsjStartDate = this.yssjwcsj[0] + '000000'
                getParams.data.yssjwcsjEndDate = this.yssjwcsj[1] + '000000'
            }
            if (this.lxsjwcsj) {
                getParams.data.lxsjwcsjStartDate = this.lxsjwcsj[0] + '000000'
                getParams.data.lxsjwcsjEndDate = this.reportdate[1] + '000000'
            }
            if (this.status && this.status != 1) {
                getParams.data.status = this.status
            }

            //input
            getParams.data.keyword = ''
            if (this.ssfasm) {
                getParams.data.keyword += `${this.ssfasm}:ssfasm`
            }
            if (getParams.data.keyword == '') {
                delete getParams.data.keyword
            }
            queryZw(getParams).then((res) => {
                this.tableData = res.data || []
                this.total = res.count
            })
        },
    },
    watch: {
        diff(newV, oldV) {
            if (newV !== oldV) {
                this.tabFind()
                this.getList()
            }
        },
        tabLabel(newV, oldV) {
            if (newV !== oldV) {
                this.tabFind()
                this.getList()
            }
        },
        smsxt: {
            handler(newV, oldV) {
                if (newV != oldV) {
                    this.getList()
                }
            },
            deep: true,
        },
        sxjd() {
            this.getList()
        },
        xm() {
            this.getList()
        },
        lb() {
            this.getList()
        },
    },
    mounted() {
        this.tabFind()
        this.getList()
    },
}
</script>
<style lang="less" scoped>
.zw-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" >
.zw-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);
        }
    }
    /deep/.el-table td {
        cursor: pointer;
    }
}
</style>