ah-jjzhgd-web/src/views/dataAnalysis/projectProgress/index.vue

<template>
    <!-- 数据分析 施工进度 -->
    <div class="app-container">
        <el-form label-width="auto" inline :model="queryParams">
            <el-form-item label="工程类型">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入项目名称"
                />
            </el-form-item>
            <el-form-item label="工序">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入工序名称"
                />
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="onHandleQuery">
                    查询
                </el-button>

                <el-button size="mini" type="primary" @click="onHandleReset">
                    重置
                </el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="onHandleAddProject"
                >
                    新增
                </el-button>
            </el-form-item>
        </el-form>

        <el-table border :data="projectProgressList">
            <el-table-column
                align="center"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                show-overflow-tooltip
                v-for="column in tableColumns"
            />
            <el-table-column label="操作" align="center" width="140">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        style="padding: 6px 6px"
                        @click="onHandleEditProject(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        style="padding: 6px 6px"
                        @click="onHandleDeleteProject(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            :total="total"
            @pagination="getProjectProgressList"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
        />

        <el-dialog
            append-to-body
            width="40%"
            v-if="addAndEditDialogVisible"
            :visible.sync="addAndEditDialogVisible"
            :title="`${addAndEditDialogTitle}工程质量`"
        >
            <AddAndEditForm ref="addAndEditFormRef" />

            <div slot="footer" class="dialog-footer">
                <el-button @click="addAndEditDialogVisible = false">
                    关闭
                </el-button>
                <el-button type="primary" @click="onHandleSubmit">
                    提交
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getProjectProgressListAPI,
    deleteProjectProgressAPI,
} from '@/api/dataAnalysis/projectProgress'

import AddAndEditForm from './components/addAndEditForm.vue'

export default {
    name: 'ProjectQuality',
    components: {
        AddAndEditForm,
    },
    data() {
        return {
            total: 0,
            projectProgressList: [],
            addAndEditDialogVisible: false,
            addAndEditDialogTitle: '',
            tableColumns: [
                {
                    label: '工程类型',
                    prop: 'projectName',
                },
                {
                    label: '工序',
                    prop: 'projectName',
                },
                {
                    label: '计划开始时间',
                    prop: 'projectName',
                },
                {
                    label: '计划结束时间',
                    prop: 'projectName',
                },
                {
                    label: '实际开始时间',
                    prop: 'projectName',
                },
                {
                    label: '实际结束时间',
                    prop: 'projectName',
                },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
            },
        }
    },

    methods: {
        onHandleQuery() {
            this.getProjectProgressList()
        },
        onHandleReset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
            }
            this.getProjectProgressList()
        },
        onHandleAddProject() {
            this.addAndEditDialogVisible = true
            this.addAndEditDialogTitle = '新增'
        },
        // 获取施工进度列表
        async getProjectProgressList() {
            const res = await getProjectProgressListAPI(this.queryParams)
            this.projectProgressList = res.rows
            this.total = res.total
        },

        // 新增工程质量
        addProjectQuality() {},

        // 编辑工程质量
        onHandleEditProject() {
            this.addAndEditDialogVisible = true
            this.addAndEditDialogTitle = '编辑'
        },

        // 删除工程质量
        onHandleDeleteProject() {},

        // 提交工程质量
        onHandleSubmit() {
            this.$refs.addAndEditFormRef.submitForm()
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    // height: 90vh !important;
    // min-height: 90vh !important;
    // max-height: 90vh !important;
    .el-dialog__body {
        flex: 1 !important;
        overflow-y: scroll !important;
        padding: 20px 20px !important;
        box-sizing: border-box !important;
    }
}
</style>