msyj-admin-local/src/modules/grading/components/RibbonSetDialog.vue

<template>
  <Modal
    class="ribbon-set-dialog marker-modal"
    v-model="modalIsShow"
    title="设置"
    :mask-closable="false"
    @on-visible-change="visibleChange"
  >
    <Form
      ref="modalFormComp"
      class="ribbon-set-form"
      :model="ribbonSetModal"
      :label-width="120"
    >
      <FormItem label="启用键盘">
        <i-switch v-model="ribbonSetModal.keyboardMark"></i-switch>
      </FormItem>
      <FormItem v-if="ribbonSetModal.keyboardMark" label="需要回车提交">
        <i-switch v-model="ribbonSetModal.needEnterSubmit"></i-switch>
      </FormItem>
      <FormItem label="显示快捷档位导航">
        <i-switch v-model="ribbonSetModal.fastLevelNav"></i-switch>
      </FormItem>
    </Form>

    <div slot="footer">
      <Button shape="circle" type="primary" @click="submit">确认</Button>
      <Button shape="circle" @click="cancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "ribbon-set-dialog",
  data() {
    return {
      modalIsShow: false,
      ribbonSetModal: {}
    };
  },
  computed: {
    ...mapState("marker", ["ribbonSet"])
  },
  mounted() {
    const userId = this.$ls.get("user", { id: "" }).id;
    const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
    const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
    if (ribbonSet[userId]) this.setRibbonSet(ribbonSet[userId]);
  },
  methods: {
    ...mapMutations("marker", ["setRibbonSet"]),
    initData() {
      this.ribbonSetModal = { ...this.ribbonSet };
    },
    visibleChange(visible) {
      if (visible) {
        this.initData();
      }
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    submit() {
      const userId = this.$ls.get("user", { id: "" }).id;
      const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
      const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
      ribbonSet[userId] = this.ribbonSetModal;
      this.setRibbonSet(this.ribbonSetModal);
      window.localStorage.setItem("ribbonSet", JSON.stringify(ribbonSet));
      this.cancel();
    }
  }
};
</script>