huimv.cloud.client/src/views/systemConfig/ConfigManage.vue

<template>
    <div>
        <el-row>
            <el-col :span="10">工具</el-col>
            <el-col :span="10"></el-col>
            <el-col :span="4">
                <el-button type="primary" @click="handleNew">新建</el-button>
            </el-col>
        </el-row>
        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
        <el-row style="margin-top:10px;">
            <el-table :data="configList">
                <el-table-column
                        prop="id"
                        label="#"
                        width="48"
                ></el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        width="108"
                ></el-table-column>
                <el-table-column
                        prop="code"
                        label="编码"
                        width="108"
                ></el-table-column>
                <el-table-column
                        label="配置"
                        width="180"
                >
                    <template slot-scope="scope">
                        <el-button @click="handleShow(scope.row)" size="small" type="text">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="created"
                        label="创建时间"
                        width="180"
                ></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" size="small" type="text">编辑</el-button>
                        <el-button @click="handleDel(scope.row)" size="small" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog title="修改/添加 配置" :visible.sync="dialogVisible" width="60%">
            <el-form label-width="98px" :model="formData">
                <el-form-item label="名称：">
                    <el-input v-model="formData.name" style="width: 220px;"></el-input>
                </el-form-item>
                <el-form-item label="编码：">
                    <el-input v-model="formData.code" style="width: 220px;"></el-input>
                </el-form-item>
                <el-form-item label="配置：">
                    <el-row
                            type="flex"
                            justify="space-between"
                            :gutter="20"
                            style="margin-bottom:10px"
                            v-for="(item,index) in formData.config"
                            :key="index"
                    >
                        <el-col :span="3" style="text-align:right">名称：</el-col>
                        <el-col :span="7">
                            <el-input placeholder="请输入内容" v-model="formData.config[index].key"></el-input>
                        </el-col>
                        <el-col :span="3" style="text-align:right">值：</el-col>
                        <el-col :span="7">
                            <el-input placeholder="请输入内容" v-model="formData.config[index].val"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button
                                    v-show="index==(formData.config.length-1)"
                                    @click="plus"
                                    type="primary"
                                    icon="el-icon-plus"
                                    circle
                            ></el-button>
                            <el-button
                                    v-show="index>0"
                                    @click="minus(index)"
                                    type="primary"
                                    icon="el-icon-minus"
                                    circle
                            ></el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="配置属性" :visible.sync="dialogConfig" width="48%">
            <el-table :data="configInfo" label-width="100px">
                <el-table-column prop="key" label="名称"></el-table-column>
                <el-table-column prop="val" label="值"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    import { mapActions } from "vuex";
    export default {
        name: "ConfigManage",
        data(){
            return {
                configList:null,
                dialogVisible:false,
                dialogConfig:false,
                formData:{
                    name:'',
                    code:'',
                    config:[
                        {
                            key: "",
                            val: ""
                        }
                    ],

                },
                configInfo:null
            }
        },
        created() {
            this.loadList()
        },
        methods:{
            ...mapActions(["fetch"]),
            loadList(){
              this.fetch({
                  api:'/publics/sysconf/list',
                  success:res=>{
                      console.log(res)
                      this.configList = res
                  }
              })
            },
            handleShow(row){
                console.log(row)
                this.configInfo = JSON.parse(row.conf.data)
                this.dialogConfig=true
            },
            handleEdit(row){
                this.clearForm()
                this.formData.id = row.id // 关键
                this.formData.name=row.name
                this.formData.code=row.code
                this.formData.config = JSON.parse(row.conf.data)
                this.dialogVisible = true
            },
            handleDel(row){
                this.fetch({
                    api:'/publics/sysconf/delete',
                    data:{id:row.id},
                    success:res=>{
                        this.$message.info("删除成功")
                        this.loadList()
                    },
                    fail:err=>{
                        console.log(err)
                        if(err.errMsg)
                            this.$message.info(err.errMsg)
                    }
                })
            },
            handleNew(){
                this.clearForm()
                this.dialogVisible=true
            },
            handleSubmit(){
                //提交了
                let data = {
                    name:this.formData.name,
                    code:this.formData.code,
                    conf:JSON.stringify({data:JSON.stringify(this.formData.config)})
                }
                let api = "/publics/sysconf/add"
                if(this.formData.id) {
                    api = "/publics/sysconf/update"
                    data.id=this.formData.id
                }
                this.fetch({
                    api,
                    data,
                    success:res=>{
                        //关掉对惶恐
                        console.log(res)
                        this.dialogVisible = false
                        // this.clearForm()
                        this.loadList()
                    },
                    fail:err=>{
                        console.log(err)
                        if(err.errMsg)
                            this.$message.info(err.errMsg)
                    }
                })
            },


            clearForm(){
                if(this.formData.id) delete this.formData.id
                this.formData.name=""
                this.formData.code =""
                this.formData.config=[
                        {
                            key: "",
                            val: ""
                        }
                        ]
            },

            // 配置项增加
            plus() {
                this.formData.config.push({
                    key:'',val:''
                })
            },
            // 配置项减少
            minus(index) {
                this.formData.config.splice(index,1)
            }
        }
    }
</script>

<style scoped>

</style>