spfm-market-front/src/components/flow/modules/ShortcutModal.vue

<template>
  <el-dialog
    title="快捷键大全"
    width="60%"
    :show-close="false"
    :modal-append-to-body="false"
    :visible="modalVisible"
  >
    <el-table :data="dataSource">
      <el-table-column align="center" prop="shortcutName" label="功能">
      </el-table-column>
      <el-table-column align="center" prop="codeName" label="快捷键">
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { flowConfig } from "../config/args-config.js";

export default {
  data() {
    return {
      modalVisible: false,
      columns: [
        {
          title: "功能",
          align: "center",
          key: "shortcutName",
          dataIndex: "shortcutName",
          width: "50%",
        },
        {
          title: "快捷键",
          align: "center",
          key: "codeName",
          dataIndex: "codeName",
          width: "50%",
        },
      ],
      dataSource: [],
    };
  },
  methods: {
    open() {
      const that = this;

      that.modalVisible = true;
      let obj = Object.assign({}, flowConfig.shortcut);
      for (let k in obj) {
        that.dataSource.push(obj[k]);
      }
    },
    close() {
      this.dataSource = [];
      this.modalVisible = false;
    },
    saveSetting() {
      this.close();
    },
    cancel() {
      this.close();
    },
  },
};
</script>

<style>
</style>