quick.vue

<template>
  <el-scrollbar style="height: 100%">
    <div style="padding: 15px;">
      <router-link
        v-for="(item, index) in quickVisitItem"
        :key="index"
        :to="item.path"
      >
        <div
          class="content-wrapper"
          :style="{ height: Math.floor((cellContentHeight - 20) * 0.33) + 'px' }"
        >
          <div class="visit-item-wrapper">
            <div class="visit-item">
              <img :src="item.icon" alt="" />
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <el-dialog
      :visible="visible"
      title="设置"
      width="50%"
      :before-close="handleClose"
    >
      <div style="text-align: center" >
        <el-transfer
          style="text-align: left; display: inline-block;float:left;"
          v-model="selectedVals"
          filterable
          :titles="['未添加', '已添加']"
          :button-texts="['移除', '添加']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}',
          }"
          :data="transferData"
        >
        </el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <c-button @click="cancel">取消</c-button>
        <c-button type="primary" @click="save">保存</c-button>
      </span>
    </el-dialog>
  </el-scrollbar>
</template>

<script>
import icons from "./icons.js";

export default {
  props: {
    quickType: {
      type: String,
      required: true,
    },
    cellContentHeight: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      allAvailableItems: [],
      quickVisitItem: [],
      visible: false,
      selectedVals: [],
      transferData: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      this.generateVisitItems(this.getCachedVisitItems());
    });
  },
  methods: {
    init() {
      const arr = [];
      this.getAllAvailableItems(this.$store.state.UserContext.menu, arr);
      this.allAvailableItems = arr;
      this.transferData = arr.map((item) => {
        const ps = item.path.split("/");
        return {
          key: item.path,
          label: `${ps[ps.length - 1]} - ${item.name}`,
        };
      });
    },
    getCachedVisitItems() {
      const data = localStorage.getItem(
        `quick-${this.quickType}-${this.getUserRole()}`
      );
      return JSON.parse(data);
    },
    setCachedVisitItems(data) {
      localStorage.setItem(
        `quick-${this.quickType}-${this.getUserRole()}`,
        JSON.stringify(data)
      );
    },
    getUserRole() {
      const userId = this.$store.state.UserContext.userId;
      return userId.toLowerCase() === "zl" ? "admin" : "normal";
    },
    generateVisitItems(keys) {
      const res = [];
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        const f = this.allAvailableItems.find((item) => item.path === key);
        if (f) {
          res.push({
            name: f.name,
            path: f.path,
            icon: icons[key]
              ? icons[key]
              : require("~/assets/icons/信用证.svg"),
          });
        }
      }
      this.quickVisitItem = res;
    },
    openSetting() {
      this.selectedVals = this.quickVisitItem.map((item) => item.path);
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    },
    save() {
      this.setCachedVisitItems(this.selectedVals);
      this.generateVisitItems(this.selectedVals);
      this.visible = false;
    },
    handleClose(done) {
      this.visible = false;
      done();
    },
    getAllAvailableItems(source, arr) {
      for (let i = 0; i < source.length; i++) {
        const s = source[i];
        if (s.children.length > 0) {
          this.getAllAvailableItems(s.children, arr);
        } else {
          arr.push(s);
        }
      }
    },
  },
};
</script>

<style scoped>
.content-wrapper {
  display: inline-block;
  width: 24.33%;
  /* height: 30%; */
}
.visit-item-wrapper {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.visit-item {
  /* padding-bottom: 16px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.visit-item i {
  color: #0088ff;
  font-size: 36px;
}
.visit-item span {
  color: #303133;
  font-size: 12px;
  margin-top: 10px;
}
.visit-item:hover span {
  color: var(--themecolor);
}
.el-scrollbar >>> .el-transfer-panel {
  width: 216px;
  height: 400px;
}
.el-scrollbar >>> .el-checkbox-group.el-transfer-panel__list {
  height: 500px;
}

.el-scrollbar >>> .el-dialog .el-dialog__footer{
  text-align: center;
}

.el-scrollbar >>> .el-checkbox {
  float: left;
  text-align: left;
}

.el-scrollbar >>> .el-transfer-panel__header .el-checkbox {
  float: left;
  text-align: left;
  position:absolute;
}

.el-scrollbar >>> .el-transfer-panel__header .el-checkbox .el-checkbox__label span{
    position: relative;
    left: 100px;
    float: right;
}
</style>