love-donation-portal/src/views/base/personRoleInfo-icon.vue

<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      width="800px"
      :modal-append-to-body="false"
      style="text-align:left;"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
    <div class="role-permission">
        <el-transfer
        v-model="relatedMenus"
        :data="menuList"
        v-loading="loading"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入关键字"
        :props="{key: 'id',label: 'description'}"
        :titles="['未分配菜单','已分配菜单']"
        ></el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
    </span>
    </el-dialog>
</template>
<script>
import personRoleApi from "@/api/base/personRoleInfo";

export default {
  props: ["personRoleId","mode","title"],
  data() {
    return {
      menuList: [],
      relatedMenus: [],
      loading: false,
      showDialog: true,
      submitting: false
    };
  }, 
  methods: {
    closeDialog() {
      this.$emit("close",false);
    },
    handleSubmit() {
      var self = this;

      personRoleApi
        .saveRelatedIcon(this.personRoleId,this.mode,this.relatedMenus)
        .then(function(response) {
          var jsonData = response.data;
          self.submitting = false;

          if (jsonData.result) {
            self.$message({
              message: "保存成功!",
              type: "success"
            });

            self.$emit("close",true);
          } else {
            self.$message({
              message: jsonData.message + "",
              type: "warning"
            });

            self.$emit("close",false);
          }
        });
    },
    filterMethod(query, item) {
      return item.description.indexOf(query) > -1;
    },
    queryRelatedMenuList() {
      var self = this;

      self.loading = true;

      self.menuList = [];
      self.relatedMenus= [];

      personRoleApi.findAllIcon(this.personRoleId)
        .then(response => {
          var jsonData = response.data;

          self.menuList = jsonData.data.map(item => {
            return {
              id: item.id,
              description: "[" + item.iconTypeName + "]" + item.iconName
            };
          });

          return personRoleApi.findRelatedIcon(self.personRoleId,self.mode);
        })
        .then(response => {
          var jsonData = response.data;

          self.relatedMenus = jsonData.data.map(item => {
            return item.iconId;
          });

          //console.log(self.relatedMenus);

          self.loading = false;
        });
    }
  },
  mounted() {
    this.queryRelatedMenuList();
  }
};
</script>
<style lang="scss">
.role-permission {
  .el-transfer-panel {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 320px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }
}
</style>