Gyyq-Upstairs/src/views/models/manages/index.vue

<template>
    <div>
        <div class="headerbox">
            <el-form size="small" :inline="true" label-width="7rem">
                <el-row style="margin-top: 1rem;">
                    <el-col :span="6">
                        <el-form-item label="关键要素" style="width: 100%;">
                            <el-input placeholder="请输入关键要素" clearable style="width: 14rem;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="具体指标" style="width: 100%;">
                            <el-input placeholder="请输入具体指标" clearable style="width: 14rem;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item style="margin-left: 2.5rem;">
                            <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
                            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="tablebox" style="margin: .5rem;">
            <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true; resetForm()">新增要素</el-button>
            <div v-for="(category, categoryName) in tableData" :key="categoryName">
                <div v-for="(items, itemName) in category" :key="itemName" class="tablebox">
                    <div class="boxheader">
                        <div class="headerone">
                            <div>{{ categoryName }}：</div>
                            <div>{{ itemName }}</div>
                        </div>
                        <div class="headertwo">
                            <el-button type="primary" icon="el-icon-edit" size="mini"
                                @click="handleUpdate(items[0])">编辑要素</el-button>
                            <el-button type="primary" icon="el-icon-edit"
                                @click="showAddIndicatorDialog">新增指标</el-button>
                        </div>
                    </div>
                    <el-table :data="items" style="width: 100%">
                        <el-table-column prop="id" label="序号" width="180"></el-table-column>
                        <el-table-column prop="jtzb" label="具体指标" width="180"></el-table-column>
                        <el-table-column prop="xxyq" label="详细要求" width="950"></el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                                    v-hasPermi="['system:post:edit']">编辑</el-button>
                                <el-button size="mini" type="text" @click="handleDelete(scope.row)" style="color: #F25353;" 
                                    v-hasPermi="['system:post:remove']">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 新增要素//编辑要素弹窗 -->
        <el-dialog :title="form.id ? '编辑要素' : '新增要素'" :visible.sync="dialogVisible" width="30%">
            <el-form :model="form" label-width="80px">
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option label="关键" value="关键要素"></el-option>
                        <el-option label="重要" value="重要要素"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddElement">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增指标弹窗 -->
        <el-dialog title="新增指标" :visible.sync="indicatorDialogVisible" width="30%">
            <el-form :model="indicatorForm" label-width="80px">
                <el-form-item label="指标名称">
                    <el-input v-model="indicatorForm.name" placeholder="请输入指标名称"></el-input>
                </el-form-item>
                <el-form-item label="指标类型">
                    <el-select v-model="indicatorForm.type" placeholder="请选择类型">
                        <el-option label="关键指标" value="关键指标"></el-option>
                        <el-option label="重要指标" value="重要指标"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="indicatorDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddIndicator">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAllElements, addElement, editElemention } from '@/api/ManageApi/index';

export default {
    data() {
        return {
            tableData: {
                关键要素: {
                    环保安全: [],
                    安全: []
                },
                重要要素: {
                    设备: [],
                    设备载重: []
                }
            },
            dialogVisible: false, // 新增/编辑要素弹窗
            indicatorDialogVisible: false, // 新增指标弹窗
            form: {
                id: '',
                type: '',
                name: ''
            },
            indicatorForm: {
                name: '',
                type: ''
            }
        }
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        // 获取数据
        async fetchData() {
            try {
                const response = await getAllElements();
                if (response.code === 200) {
                    this.tableData = response.data;
                } else {
                    console.error('获取数据失败', response.msg);
                }
            } catch (error) {
                console.error('请求错误', error);
            }
        },
        // 显示新增指标弹窗
        showAddIndicatorDialog() {
            this.indicatorForm = { name: '', type: '' }; // 重置表单
            this.indicatorDialogVisible = true; // 显示弹窗
        },
        // 处理新增指标
        handleAddIndicator() {
            addElement(this.indicatorForm).then(response => {
                if (response.code === 200) {
                    this.$message.success('新增指标成功');
                    this.indicatorDialogVisible = false; // 关闭弹窗
                    this.fetchData(); // 刷新数据
                } else {
                    this.$message.error('新增指标失败：' + response.msg);
                }
            }).catch(error => {
                this.$message.error('请求错误：' + error.message);
            });
        },
        // 处理新增/编辑要素
        handleAddElement() {
            if (this.form.id) {
                // 编辑操作
                editElemention(this.form).then(response => {
                    if (response.code === 200) {
                        this.$message.success('编辑成功');
                        this.dialogVisible = false; // 关闭弹窗
                        this.fetchData(); // 刷新数据
                    } else {
                        this.$message.error('编辑失败：' + response.msg);
                    }
                });
            } else {
                // 新增操作
                addElement(this.form).then(response => {
                    if (response.code === 200) {
                        this.$message.success('新增成功');
                        this.dialogVisible = false; // 关闭弹窗
                        this.fetchData(); // 刷新数据
                    } else {
                        this.$message.error('新增失败：' + response.msg);
                    }
                });
            }
        },
        // 编辑操作
        handleUpdate(row) {
            this.form = { ...row }; // 将当前行的数据填充到表单中
            this.dialogVisible = true; // 显示弹窗
        },
        // 删除操作
        handleDelete(row) {
            this.$confirm('确定删除该要素吗？', '提示', {
                type: 'warning'
            }).then(() => {
                // 在这里添加删除逻辑
                this.$message.success('删除成功');
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        // 重置表单
        resetForm() {
            this.form = {
                id: '',
                type: '',
                name: ''
            };
        }
    }
}
</script>

<style scoped>
.headerbox {
    background-color: #fff;
    border-radius: 0.5rem;
    margin: 0.5rem;
    border: 1px solid #eee;
}

.tablebox {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.5rem;
    border: 1px solid #eee;
}

.boxheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
    background-color: #F5F7FE;
}

.headerone {
    color: #000000;
    font-weight: bold;
    display: flex;
}

.headertwo {
    display: flex;
}
</style>