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">
      <el-card>
        <div slot="header" style="font-weight: bold;text-align: center;">
          <span>通用配置项</span>
        </div>
        <el-table :data="generalData" style="width: 100%;" height="200">
          <el-table-column prop="configKey" label="key" width="300px" />
          <el-table-column prop="configValue" label="value">
            <template slot-scope="scope">
              <div v-if="scope.row.type === 'input'">
                <div v-if="!scope.row.focus" style="width: 100%;cursor: pointer;" @click="changeFocus(scope.row, '1')">{{ scope.row.configValue }}</div>
                <el-input v-if="scope.row.focus" v-model="scope.row.configValue" size="mini" style="width: 100%" @blur="changeFocus(scope.row, '0')" />
              </div>
              <div v-else-if="scope.row.type === 'number'">
                <div v-if="!scope.row.focus" style="width: 100%;cursor: pointer" @click="changeFocus(scope.row, '1')">{{ scope.row.configValue }}</div>
                <el-input-number v-if="scope.row.focus" v-model="scope.row.configValue" size="mini" style="width: 100px;" :min="0" controls-position="right" @blur="changeFocus(scope.row, '0')" />
              </div>
              <div v-else-if="scope.row.type === 'boolean'">
                <el-checkbox v-model="scope.row.configValue">{{ scope.row.configValue }}</el-checkbox>
              </div>
              <div v-else-if="scope.row.type === 'select'">
                <el-select v-model="scope.row.configValue" size="mini" style="width: 80px;">
                  <el-option
                    v-for="item in scope.row.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card style="margin-top: 10px">
        <div slot="header" style="font-weight: bold;text-align: center;">
          <span>联锁配置项</span>
        </div>
        <el-table :data="roadData" style="width: 100%;" height="200">
          <el-table-column prop="configKey" label="key" width="300px" />
          <el-table-column prop="configValue" label="value">
            <template slot-scope="scope">
              <div v-if="scope.row.type === 'input'">
                <div v-if="!scope.row.focus" style="width: 100%;cursor: pointer;" @click="changeFocus(scope.row, '1')">{{ scope.row.configValue }}</div>
                <el-input v-if="scope.row.focus" v-model="scope.row.configValue" size="mini" style="width: 100%" @blur="changeFocus(scope.row, '0')" />
              </div>
              <div v-else-if="scope.row.type === 'number'">
                <div v-if="!scope.row.focus" style="width: 100%;cursor: pointer" @click="changeFocus(scope.row, '1')">{{ scope.row.configValue }}</div>
                <el-input-number v-if="scope.row.focus" v-model="scope.row.configValue" size="mini" style="width: 100px;" :min="0" controls-position="right" @blur="changeFocus(scope.row, '0')" />
              </div>
              <div v-else-if="scope.row.type === 'boolean'">
                <el-checkbox v-model="scope.row.configValue">{{ scope.row.configValue }}</el-checkbox>
              </div>
              <div v-else-if="scope.row.type === 'select'">
                <el-select v-model="scope.row.configValue" size="mini" style="width: 80px;">
                  <el-option
                    v-for="item in scope.row.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <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>
  </div>
</template>

<script>
import { getRealLineConfigList, putRealLineConfig } from '@/api/management/mapline';
// import EditConfig from './editConfig';
export default {
    name: 'Config',
    components: {
        // EditConfig
    },
    props: {
        type: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            index: 0,
            id: '',
            generalData: [],
            roadData: [],
            focus: false,
            booleanList: ['lockFirst', 'switchSingleHandle', 'signalApproachOnlyOne', 'signalApproachOnlyNpSwitch',
                'routeNameUseEndOppositeSignalName', 'generateTbRoute', 'tbRouteNameUseEndOppositeSignalName', 'routeSignalAlwaysGreen',
                'routeApartByOverlap', 'overlapOnlySwitch', 'overlapSwitchNpOnly', 'overlapSignalOppositeSwitchNpOnly', 'overlapOnlyOneSwitch'],
            selectList: ['upDirection'],
            generalConfig: ['lockFirst', 'switchSingleHandle', 'upDirection'],
            numberList: ['overlapReleaseTime', 'routeReleaseTime'],
            optionsMap: {
                upDirection: [{label: 'right', value: 'right'}, {label: 'left', value: 'left'}]
            }
        };
    },
    computed: {

    },
    methods: {
        async show(row) {
            this.dialogVisible = true;
            if (row && row.id) {
                this.id = row.id;
                this.getList();
            }
        },
        changeFocus(row, flag) {
            if (flag === '0') {
                this.$set(row, 'focus', false);
            } else {
                this.$set(row, 'focus', true);
            }
        },
        async getList() {
            try {
                const res = await getRealLineConfigList(this.id);
                if (res.data) {
                    const keys = Object.keys(res.data);
                    this.generalData = [];
                    this.roadData = [];
                    keys.forEach(key => {
                        // let value = '';
                        let type = 'input';
                        let options = [];
                        if (this.booleanList.indexOf(key) >= 0) {
                            type = 'boolean';
                        } else if (this.selectList.indexOf(key) >= 0) {
                            type = 'select';
                            options = this.optionsMap[key];
                        } else if (this.numberList.indexOf(key) >= 0) {
                            type = 'number';
                        } else {
                            type = 'input';
                        }
                        const param = {
                            configKey: key,
                            configValue: res.data[key],
                            type: type,
                            options: options
                        };
                        if (this.generalConfig.includes(key)) {
                            this.generalData.push(param);
                        } else {
                            this.roadData.push(param);
                        }
                    });
                } else {
                    this.generalData = [];
                    this.roadData = [];
                }
            } 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;
        },
        save() {
            const param = {};
            this.generalData.forEach(item => {
                param[item.configKey] = item.configValue;
                // if (item.boolean) {
                //     const value = item.configValue == 'true';
                //     param[item.configKey] = value;
                // }
            });
            this.roadData.forEach(item => {
                param[item.configKey] = item.configValue;
            });
            putRealLineConfig(this.id, param).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>