rt-sim-training-client/src/views/system/configLine/config.vue

<template>
  <div v-show="dialogVisible">
    <el-dialog v-dialogDrag title="通用配置项" :visible.sync="dialogVisible" width="550px" :before-close="handleClose" center :close-on-click-modal="false" :z-index="2000">
      <div style="height: 370px; overflow: auto;">
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="configKey" label="key" />
          <el-table-column prop="configValue" label="value" />
          <el-table-column prop="description" label="描述" />
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <div class="flex_box">
                <span>操作</span>
                <i class="el-icon-circle-plus-outline icon_font" @click="addModel(scope)" />
              </div>
            </template>
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editModel(scope.row, scope.$index)">编辑</el-button>
              <el-button type="text" size="small" @click="delModel(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">{{ $t('global.confirm') }}</el-button>
        <el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
      </span>
    </el-dialog>
    <edit-config ref="addConfig" type="ADD" @create="createModel" />
    <edit-config ref="editConfig" type="EDIT" @update="updateModel" />
  </div>
</template>

<script>
import { getRealLineConfigList, putRealLineConfig } from '@/api/management/mapline';
import EditConfig from './editConfig';
export default {
    name: 'Config',
    components: {
        EditConfig
    },
    props: {
        type: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            index: 0,
            id: '',
            tableData: []
        };
    },
    computed: {

    },
    methods: {
        async show(row) {
            this.dialogVisible = true;
            if (row && row.id) {
                this.id = row.id;
                this.getList();
            }
        },
        async getList() {
            try {
                const res = await getRealLineConfigList(this.id);
                if (res.data) {
                    this.tableData = res.data;
                } else {
                    this.tableData = [];
                }
            } catch (error) {
                console.log(error);
            }
        },
        handleClose(done) {
            if (done) {
                done();
            } else {
                this.dialogVisible = false;
            }
        },
        addModel() {
            this.$refs.addConfig.show();
        },
        editModel(item, index) {
            this.$refs.editConfig.show(item);
            this.index = index;
        },
        delModel(item, index) {
            this.$confirm('此操作将删除该配置项, 是否继续?', this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index, 1);
            });
        },
        createModel(data) {
            this.tableData.push(data);
        },
        updateModel(data) {
            this.tableData.splice(this.index, 1, data);
        },
        save() {
            putRealLineConfig(this.id, this.tableData).then(res => {
                this.$message.success(`保存配置项成功!`);
                this.dialogVisible = false;
            }).catch(() => {
                this.$messageBox(`保存配置项失败.`);
            });

        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .icon_font{
        font-size: 18px;
        margin-left: 15px;
        cursor: pointer;
    }
    .flex_box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

</style>