iot-front-ui/src/components/dashboard/commonFuncManage/functionManage.vue

<script>
import menuList from "@/data/json/menuList.json"
import ssoList from "@/data/json/ssoList.json"
import Function from "@/components/dashboard/commonFuncManage/function.vue";

export default {
  data() {
    return {
      menuList,
      ssoList,
      customFunction: [],
      functions: [],
      ssoSystems: [],
      show: false,
    }
  },
  props: {
    visible: Boolean,
    commonFunction: Array,
  },
  components: {
    Function
  },
  watch: {
    "show": function (val) {
      this.toggleVisible(val)
    },
    "visible": function (val) {
      this.show = val
    },
  },
  emits: ['update:visible', 'update:commonFunction'],
  setup(props, context) {
    const methods = {
      toggleVisible(flag) {
        context.emit('update:visible', flag)
      },
      updateFunctions(arr) {
        context.emit('update:commonFunction', arr)
      }
    }
    return methods
  },
  mounted() {
    this.show = this.visible;
    this.customFunction = JSON.parse(JSON.stringify(this.commonFunction));
    this.getFunctions();
    this.ssoSystems = this.ssoList
  },
  methods: {
    getFunctions() {
      let names = this.commonFunction.map(i=>{return i.name});
      this.functions = [];
      for (let i = 0; i < this.menuList.length; i++) {
        let menu = this.menuList[i];
        let childMenus = menu.children?menu.children:[];
        childMenus = childMenus.filter(i=>names.indexOf(i.name)<0);
        childMenus.forEach(item => {
          this.functions.push(item)
        })
      }
    },
    handleOk() {
      this.$store.menuStore().commonFunction = JSON.parse(JSON.stringify(this.customFunction));
      this.updateFunctions(this.$store.menuStore().commonFunction)
      this.show = false;
    },
    handleCancel() {
      this.show = false
    },
    plusFunction(item) {
      if (this.customFunction.length>=8) {
        this.$message.warning('功能位已满，请先移除功能后重试')
        return;
      }
      if (item.isSso) {
        let index = this.ssoSystems.findIndex(i=>i.name==item.name)
        if (index) {
          this.ssoSystems.splice(index, 1)
        }
      } else {
        let index = this.functions.findIndex(i=>i.name==item.name)
        if (index) {
          this.functions.splice(index, 1)
        }
      }
      this.customFunction.push(item)
    },
    minusFunction(item) {
      let index = this.customFunction.findIndex(i => i.name==item.name);
      if (index) {
        this.customFunction.splice(index, 1);
        if (item.isSso) {
          this.ssoSystems.push(item);
        } else {
          this.functions.push(item);
        }
      }
    },
  }
}
</script>

<template>
  <a-modal class="dashboard-funcManage"
           :visible="show"
           :width="1020"
           @ok="handleOk"
           @cancel="handleCancel"
  >
    <template #footer>
      <a-button size="small" class="footer-btn" key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button size="small" class="footer-btn" key="submit" type="primary" @click="handleOk">
        确定
      </a-button>
    </template>


    <div class="funcManage-custom">
      <div class="funcManage-title">自定义快捷入口</div>
      <div class="funcManage-body">
        <a-row :gutter="16">
          <transition-group name="common-function">
            <a-col :span="6" v-for="(item,index) in customFunction" :key="item.name" style="margin-bottom: 12px">
              <Function :minus-function="minusFunction" :item="item" :type="-1"></Function>
            </a-col>
          </transition-group>
        </a-row>
      </div>
    </div>

    <div style="max-height: 400px;overflow-y: auto">
      <div class="funcManage-function">
        <div class="funcManage-title funcManage-title-border">运营管理中心</div>
        <div class="funcManage-body">
          <a-row :gutter="16">
            <transition-group name="common-function">
              <a-col :span="6" v-for="(item,index) in functions" :key="item.name" style="margin-bottom: 12px">
                <Function :plus-function="plusFunction" :item="item" :type="1"></Function>
              </a-col>
            </transition-group>
          </a-row>
        </div>
      </div>

      <div class="funcManage-sso">
        <div class="funcManage-title funcManage-title-border">单点登录</div>
        <div class="funcManage-body">
          <a-row :gutter="16">
            <transition-group name="common-function">
              <a-col :span="6" v-for="(item, index) in ssoSystems" :key="item.name" style="margin-bottom: 12px">
                <Function :plus-function="plusFunction" :item="item" :type="1"></Function>
              </a-col>
            </transition-group>
          </a-row>
        </div>
      </div>
    </div>


  </a-modal>
</template>

<style lang="less">
.dashboard-funcManage {
  .footer-btn {
    width: 80px;
    height: 30px;
    border-radius: 5px;
    font-size: 16px;
  }

  .ant-btn {
    margin: 0 10px !important;
  }

  .funcManage-body {
    margin: 10px;
    height: auto;
    min-height: 200px;
    border: 1px solid #E3E4E6;
    padding: 2% 3%;
  }

  .funcManage-custom {
    .funcManage-body {

    }
  }

  .funcManage-function {
    margin-top: 15px;
    margin-bottom: 8px;

    .funcManage-body {

    }
  }

  .funcManage-sso {
    margin-top: 15px;
    margin-bottom: 8px;

    .funcManage-body {

    }
  }

  .funcManage-title {
    font-weight: bold;
    font-size: 16px;
  }

  .funcManage-title-border {
    padding-left: 5px;
    border-left: 3px solid #2EA8E6;

  }
}

</style>