273 lines
		
	
	
		
			9.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			273 lines
		
	
	
		
			9.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
<template>
 | 
						|
    <!-- 工程在用检修预警 -->
 | 
						|
    <div class="app-container">
 | 
						|
        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
 | 
						|
            <el-form-item label="时间范围" prop="timeRange">
 | 
						|
                <el-date-picker
 | 
						|
                    clearable
 | 
						|
                    type="daterange"
 | 
						|
                    format="yyyy-MM-dd"
 | 
						|
                    style="width: 240px"
 | 
						|
                    range-separator="至"
 | 
						|
                    value-format="yyyy-MM-dd"
 | 
						|
                    end-placeholder="结束日期"
 | 
						|
                    start-placeholder="开始日期"
 | 
						|
                    v-model="queryParams.timeRange"
 | 
						|
                />
 | 
						|
            </el-form-item>
 | 
						|
            <el-form-item label="关键字" prop="keyWord">
 | 
						|
                <el-input
 | 
						|
                    clearable
 | 
						|
                    style="width: 240px"
 | 
						|
                    placeholder="请输入关键字"
 | 
						|
                    v-model="queryParams.keyWord"
 | 
						|
                    @keyup.enter.native="handleQuery"
 | 
						|
                />
 | 
						|
            </el-form-item>
 | 
						|
            <!-- <el-form-item label="状态" prop="taskStatus">
 | 
						|
                <el-select v-model="queryParams.taskStatus" placeholder="请选择状态" clearable>
 | 
						|
                    <el-option
 | 
						|
                        v-for="item in statusOptions"
 | 
						|
                        :key="item.value"
 | 
						|
                        :label="item.label"
 | 
						|
                        :value="item.value"
 | 
						|
                    />
 | 
						|
                </el-select>
 | 
						|
            </el-form-item> -->
 | 
						|
 | 
						|
            <!-- 表单按钮 -->
 | 
						|
            <el-form-item>
 | 
						|
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
 | 
						|
                <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
 | 
						|
            </el-form-item>
 | 
						|
        </el-form>
 | 
						|
 | 
						|
        <el-row :gutter="10" class="mb8">
 | 
						|
            <el-col :span="1.5">
 | 
						|
                <el-button type="primary" plain icon="el-icon-chat-dot-round" size="mini" @click="onHandleNotice">
 | 
						|
                    通知
 | 
						|
                </el-button>
 | 
						|
            </el-col>
 | 
						|
            <el-col :span="1.5">
 | 
						|
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">
 | 
						|
                    导出数据
 | 
						|
                </el-button>
 | 
						|
            </el-col>
 | 
						|
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
						|
        </el-row>
 | 
						|
 | 
						|
        <el-table :data="tableList" fit highlight-current-row style="width: 100%">
 | 
						|
            <!-- 多选 -->
 | 
						|
            <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" />
 | 
						|
            <el-table-column
 | 
						|
                type="index"
 | 
						|
                width="55"
 | 
						|
                label="序号"
 | 
						|
                align="center"
 | 
						|
                :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
 | 
						|
            />
 | 
						|
            <el-table-column
 | 
						|
                v-for="column in tableColumns"
 | 
						|
                show-overflow-tooltip
 | 
						|
                :key="column.prop"
 | 
						|
                :label="column.label"
 | 
						|
                :prop="column.prop"
 | 
						|
                align="center"
 | 
						|
            />
 | 
						|
        </el-table>
 | 
						|
 | 
						|
        <!-- 分页 -->
 | 
						|
        <pagination
 | 
						|
            v-show="total > 0"
 | 
						|
            :total="total"
 | 
						|
            :page.sync="queryParams.pageNum"
 | 
						|
            :limit.sync="queryParams.pageSize"
 | 
						|
            @pagination="getList"
 | 
						|
        />
 | 
						|
    </div>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
import printJS from 'print-js'
 | 
						|
import { getLeaseTaskList, deleteLeaseTask, getLeaseTask, getCodePDF } from '@/api/business/index'
 | 
						|
import { getUseMaintenanceWarningApi } from '@/api/warning-analysis/engineering-in-use.js'
 | 
						|
 | 
						|
export default {
 | 
						|
    data() {
 | 
						|
        return {
 | 
						|
            showSearch: true,
 | 
						|
            queryParams: {
 | 
						|
                pageNum: 1,
 | 
						|
                pageSize: 10,
 | 
						|
                keyWord: '', // 关键字
 | 
						|
                timeRange: [] // 日期范围
 | 
						|
            },
 | 
						|
 | 
						|
            total: 0, // 总条数
 | 
						|
            // 表头
 | 
						|
            tableColumns: [
 | 
						|
                { label: '下次检修时间', prop: 'nextCheckTime' },
 | 
						|
                { label: '机具类型', prop: 'typeName' },
 | 
						|
                { label: '规格型号', prop: 'typeModelName' },
 | 
						|
                { label: '设备编码', prop: 'maCode' },
 | 
						|
                { label: '单位名称', prop: 'unitName' },
 | 
						|
                { label: '工程名称', prop: 'projectName' },
 | 
						|
                { label: '协议号', prop: 'agreementCode' },
 | 
						|
                { label: '超期时长', prop: 'overDays' }
 | 
						|
            ],
 | 
						|
            // 表格数据
 | 
						|
            tableList: [],
 | 
						|
            dialogTitle: '', // 弹框标题
 | 
						|
            dialogVisible: false, // 弹框显示
 | 
						|
            dialogForm: {
 | 
						|
                proName: '', // 项目名称
 | 
						|
                code: '' // 业务单号
 | 
						|
            },
 | 
						|
            dialogColumns: [
 | 
						|
                { label: '名称', prop: 'maTypeName', width: '150px' },
 | 
						|
                { label: '规格', prop: 'typeName', width: '150px' },
 | 
						|
                { label: '单位', prop: 'unitName', width: '60px' },
 | 
						|
                { label: '数量', prop: 'preNum', width: '60px' },
 | 
						|
                { label: '备注', prop: 'remark', width: '' }
 | 
						|
            ],
 | 
						|
            dialogList: []
 | 
						|
        }
 | 
						|
    },
 | 
						|
    created() {
 | 
						|
        this.getList()
 | 
						|
    },
 | 
						|
    methods: {
 | 
						|
        // 查询
 | 
						|
        handleQuery() {
 | 
						|
            this.getList()
 | 
						|
        },
 | 
						|
        // 重置
 | 
						|
        handleReset() {
 | 
						|
            this.queryParams.pageNum = 1
 | 
						|
            this.queryParams.pageSize = 10
 | 
						|
            this.$refs.queryForm.resetFields()
 | 
						|
            this.getList()
 | 
						|
        },
 | 
						|
        // 获取列表
 | 
						|
        async getList() {
 | 
						|
            console.log('列表-查询', this.queryParams)
 | 
						|
            try {
 | 
						|
                const params = {
 | 
						|
                    ...this.queryParams,
 | 
						|
                    startTime: this.queryParams.timeRange[0] || '',
 | 
						|
                    endTime: this.queryParams.timeRange[1] || ''
 | 
						|
                }
 | 
						|
                const res = await getUseMaintenanceWarningApi(params)
 | 
						|
                console.log('🚀 ~ 获取列表 ~ res:', res)
 | 
						|
                this.tableList = res.rows
 | 
						|
                this.total = res.total
 | 
						|
            } catch (error) {
 | 
						|
                console.log('🚀 ~ 获取列表 ~ error:', error)
 | 
						|
                this.tableList = []
 | 
						|
                this.total = 0
 | 
						|
            }
 | 
						|
        },
 | 
						|
        // 多选
 | 
						|
        selectionChange(val) {
 | 
						|
            console.log('selectionChange', val)
 | 
						|
        },
 | 
						|
        handleAdd() {
 | 
						|
            console.log('领料申请')
 | 
						|
            this.$router.push({ path: '/business/businessHandling/index' })
 | 
						|
        },
 | 
						|
        // 编辑
 | 
						|
        handleEdit(row, type) {
 | 
						|
            console.log('编辑', row)
 | 
						|
            let params = {}
 | 
						|
            if (type === 1) {
 | 
						|
                params = { type: 'detail', id: row.id }
 | 
						|
            } else {
 | 
						|
                params = { type: 'edit', id: row.id }
 | 
						|
            }
 | 
						|
            this.$router.push({ path: '/business/businessHandling/index', query: params })
 | 
						|
        },
 | 
						|
        // 删除
 | 
						|
        handleDelete(row) {
 | 
						|
            console.log('删除', row)
 | 
						|
            this.$confirm('是否删除该数据?', '提示', {
 | 
						|
                confirmButtonText: '确定',
 | 
						|
                cancelButtonText: '取消',
 | 
						|
                type: 'warning'
 | 
						|
            }).then(async () => {
 | 
						|
                const res = await deleteLeaseTask(row.id)
 | 
						|
                console.log('🚀 ~ 删除 ~ res:', res)
 | 
						|
                this.getList()
 | 
						|
                this.$message({
 | 
						|
                    type: 'success',
 | 
						|
                    message: '删除成功!'
 | 
						|
                })
 | 
						|
            })
 | 
						|
        },
 | 
						|
        // 导出数据
 | 
						|
        handleExport() {
 | 
						|
            try {
 | 
						|
                let fileName = `工程在用检修预警数据_${new Date().getTime()}.xLsx`
 | 
						|
                let url = '/material/useMaintenanceWarning/export'
 | 
						|
                const params = { ...this.queryParams }
 | 
						|
                this.download(url, params, fileName)
 | 
						|
            } catch (error) {
 | 
						|
                console.log('导出数据失败', error)
 | 
						|
            }
 | 
						|
        },
 | 
						|
        // 打印
 | 
						|
        print() {
 | 
						|
            printJS({
 | 
						|
                printable: 'print-content',
 | 
						|
                type: 'html', //
 | 
						|
                // targetStyles: ['*'], // 打印的元素样式
 | 
						|
                scanStyles: false, // 是否扫描页面样式
 | 
						|
                // css: [
 | 
						|
                //   'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // Element UI 的样式表
 | 
						|
                // ],
 | 
						|
                maxWidth: '1400'
 | 
						|
                // 其他配置选项
 | 
						|
            })
 | 
						|
        },
 | 
						|
        // 获取弹框内容
 | 
						|
        async getDialogContent(row) {
 | 
						|
            console.log('🚀 ~ getDialogContent ~ row:', row.taskId)
 | 
						|
            const loading = this.$loading({
 | 
						|
                lock: true,
 | 
						|
                text: '加载中...'
 | 
						|
            })
 | 
						|
            try {
 | 
						|
                // 获取业务联系单
 | 
						|
                const res = await getLeaseTask(row.id)
 | 
						|
                console.log('🚀 ~ getDialogContent ~ res:', res)
 | 
						|
                // 获取PDF
 | 
						|
                // const PDFres = await getCodePDF(row.taskId)
 | 
						|
                // console.log('🚀 ~ getDialogContent ~ res:', PDFres)
 | 
						|
                this.dialogVisible = true
 | 
						|
                this.dialogForm = {
 | 
						|
                    ...res.data.leaseApplyInfo,
 | 
						|
                    // pdfUrl: PDFres.data.url
 | 
						|
                }
 | 
						|
                this.dialogList = res.data.leaseApplyDetailsList
 | 
						|
                loading.close()
 | 
						|
            } catch (error) {
 | 
						|
                console.log('🚀 ~ 获取弹框内容 ~ error:', error)
 | 
						|
                loading.close()
 | 
						|
            }
 | 
						|
        },
 | 
						|
        // 处理时间格式 2021-09-01 转换为 2021年09月01日
 | 
						|
        handleTimeFormat(time) {
 | 
						|
            if (time) {
 | 
						|
                return time.replace(/-/g, '年').replace(/-/g, '月') + '日'
 | 
						|
            }
 | 
						|
            return ''
 | 
						|
        },
 | 
						|
        // 通知按钮
 | 
						|
        onHandleNotice() {
 | 
						|
            console.log('通知--')
 | 
						|
        }
 | 
						|
    }
 | 
						|
}
 | 
						|
</script>
 | 
						|
 | 
						|
<style lang="scss" scoped></style>
 |