ah-jjzhgd-web/src/views/dataManage/overallEffectiveness/index.vue

<template>
    <!-- 数据分析 整体效能分析 -->
    <div class="app-container">
        <!-- 搜索 -->
        <el-form label-width="auto" inline :model="queryParams">
            <el-form-item label="综合查询">
                <el-input
                    clearable
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    style="width: 200px"
                    @keyup.enter.native="onHandleQuery"
                />
            </el-form-item>

            <el-form-item>
                <el-button size="mini" type="primary" @click="onHandleQuery">
                    查询
                </el-button>
                <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="onHandleAdd"
                >
                    新增
                </el-button>
            </el-form-item>
        </el-form>

        <el-table border :data="list" v-loading="loading">
            <el-table-column
                label="序号"
                type="index"
                width="60"
                align="center"
            />
            <el-table-column label="工程名称" prop="proName" align="center" />
            <el-table-column label="提醒时间" prop="txTime" align="center" />
            <el-table-column
                label="提醒内容"
                prop="content"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column label="操作" align="center" width="140">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        style="padding: 6px 6px"
                        @click="onHandleEdit(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        style="padding: 6px 6px"
                        @click="onHandleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

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

        <!-- 新增/编辑弹框 -->
        <el-dialog
            append-to-body
            width="40%"
            v-if="dialogVisible"
            :visible.sync="dialogVisible"
            :title="`${dialogTitle}整体效能`"
        >
            <el-form
                :model="form"
                :rules="rules"
                ref="formRef"
                label-width="auto"
            >
                <el-form-item label="工程名称" prop="bidCode">
                    <el-select
                        style="width: 100%"
                        v-model="form.bidCode"
                        placeholder="请选择工程名称"
                    >
                        <el-option
                            v-for="item in projectList"
                            :key="item.bidCode"
                            :label="item.proName"
                            :value="item.bidCode"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="提醒时间" prop="txTime">
                    <el-date-picker
                        v-model="form.txTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择提醒时间"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="提醒内容" prop="content">
                    <el-input
                        v-model="form.content"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入提醒内容"
                        clearable
                    />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="submitting"
                    @click="onHandleSubmit"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getOverallEffectivenessListAPI,
    addOverallEffectivenessAPI,
    editOverallEffectivenessAPI,
    deleteOverallEffectivenessAPI,
} from '@/api/dataManage/overallEffectiveness'
import { getProjectSelectListAPI } from '@/api/dataManage/common'
export default {
    name: 'OverallEffectiveness',
    data() {
        return {
            loading: false,
            projectList: [],
            list: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
            },
            dialogVisible: false,
            dialogTitle: '新增',
            submitting: false,
            editId: null,
            form: {
                bidCode: '',
                txTime: '',
                content: '',
            },
            rules: {
                bidCode: [
                    {
                        required: true,
                        message: '请选择工程名称',
                        trigger: 'change',
                    },
                ],
                txTime: [
                    {
                        required: true,
                        message: '请选择提醒时间',
                        trigger: 'change',
                    },
                ],
                content: [
                    {
                        required: true,
                        message: '请输入提醒内容',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    created() {
        this.getList()
        this.getProjectSelectList()
    },
    methods: {
        // 获取工程下拉列表
        async getProjectSelectList() {
            const res = await getProjectSelectListAPI()
            this.projectList = res.data
        },

        // 获取列表
        async getList() {
            this.loading = true
            try {
                const res = await getOverallEffectivenessListAPI(
                    this.queryParams,
                )
                this.list = res.rows || []
                this.total = res.total || 0
            } catch (error) {
                this.$message.error('获取列表失败')
            } finally {
                this.loading = false
            }
        },

        // 查询
        onHandleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },

        // 新增
        onHandleAdd() {
            this.dialogTitle = '新增'
            this.editId = null
            this.form = {
                bidCode: '',
                txTime: '',
                content: '',
            }
            this.$nextTick(() => {
                if (this.$refs.formRef) {
                    this.$refs.formRef.clearValidate()
                }
            })
            this.dialogVisible = true
        },

        // 编辑
        onHandleEdit(row) {
            this.dialogTitle = '编辑'
            this.editId = row.id
            this.form = {
                bidCode: row.bidCode || '',
                txTime: row.txTime || '',
                content: row.content || '',
            }
            this.$nextTick(() => {
                if (this.$refs.formRef) {
                    this.$refs.formRef.clearValidate()
                }
            })
            this.dialogVisible = true
        },

        // 删除
        onHandleDelete(row) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    try {
                        const res = await deleteOverallEffectivenessAPI({
                            id: row.id,
                        })
                        if (res.code === 200) {
                            this.$message.success('删除成功')
                            this.getList()
                        } else {
                            this.$message.error(res.msg || '删除失败')
                        }
                    } catch (error) {
                        this.$message.error('删除失败')
                    }
                })
                .catch(() => {})
        },

        // 提交
        async onHandleSubmit() {
            this.$refs.formRef.validate(async (valid) => {
                if (!valid) return
                this.submitting = true
                try {
                    const params = { ...this.form }
                    if (this.editId) {
                        params.id = this.editId
                    }
                    const API = this.editId
                        ? editOverallEffectivenessAPI
                        : addOverallEffectivenessAPI
                    const res = await API(params)
                    if (res.code === 200) {
                        this.$message.success(
                            this.editId ? '编辑成功' : '新增成功',
                        )
                        this.dialogVisible = false
                        this.getList()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                } catch (error) {
                    this.$message.error('操作失败')
                } finally {
                    this.submitting = false
                }
            })
        },
    },
}
</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;
    .el-dialog__body {
        flex: 1 !important;
        overflow-y: scroll !important;
        padding: 20px 20px !important;
        box-sizing: border-box !important;
    }
}
</style>