auth-web/src/pages/list-manage/red-list-manage/component/batch-setlevel-appfunc.vue

<!--
批量设置应用功能红名单级别
@Author: linqian
@Date: 2021-07-014 09:46
-->
<template>
  <div>
    <el-form inline>
      <el-form-item label="红名单级别：">
        <dg-select v-model="level" enum="ListLevelEnum" clearable></dg-select>
      </el-form-item>
    </el-form>
    <p style="margin-bottom: 5px">选中的应用功能列表：</p>
    <!-- 表格树 -->
    <vxe-grid v-bind="gridOptions" ref="vxeGrid" :data="targetData"></vxe-grid>
    <div v-footer>
      <dg-button @click="handleCancel">取消</dg-button>
      <dg-button type="primary" @click="handleSubmit">确定</dg-button>
    </div>
  </div>
</template>

<script>
import getTreeDataMixin from '@/pages/common/transfer-tree/mixin';
import { saveRedAppFunc, updateRedAppFuncLevel } from '@/api/list-manage';
export default {
  props: {
    data: [Array],
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    selectedData: [Array],
    operate: {
      type: String,
      default: 'add'
    }
  },
  mixins: [getTreeDataMixin],
  components: {},
  data() {
    return {
      level: '1',
      valueName: 'id',
      childrenName: 'child',
      pidName: 'p',
      gridOptions: {
        border: true,
        rowId: 'id',
        treeConfig: { children: 'child', indent: 40, expandAll: false },
        loading: false,
        checkboxConfig: {
          // 设置复选框支持分页勾选，需要设置 rowId 行数据主键
          reserve: true
        },
        columns: [
          { type: 'seq', width: 60, align: 'center', title: '序号' },
          { title: '应用功能名称', field: 'label', treeNode: true, align: 'left', headerAlign: 'center' }
        ]
      }
    };
  },
  computed: {},
  methods: {
    handleCancel() {
      this.$emit('close');
    },
    handlerValues(arr, key) {
      let obj = {};
      arr.forEach((item, index) => {
        let { appId } = item;
          if (!obj[appId]) {
            obj[appId] = {
              appId,
              funIds: []
            };
          } 
          // else {
            obj[appId].funIds.push(item.id);
          // }
      });
      return Object.values(obj); // 最终输出
    },
    // 保存
    save() {
      console.log("选中的数据", this.selectedData);
      const params = this.handlerValues(this.selectedData).map((item) => {
        return {
          ...item,
          level: this.level
        };
      });
      return new Promise((resolve) => {
        saveRedAppFunc(params).then((res) => {
          resolve(res.data);
          this.$message.success('保存成功！');
        });
      });
    },
    // 设置级别
    setLevel() {
      const params = {
        level: this.level,
        listIds: this.selectedData.map(item => item.listId)
      };
      return new Promise((resolve) => {
        updateRedAppFuncLevel(params).then((res) => {
          resolve(res.data);
          this.$message.success('设置成功！');
        });
      });
    },

    async handleSubmit() {
      // 添加白名单
      if (this.operate == 'add') {
        await this.save();
      } else {
        // 设置白名单
        await this.setLevel();
      }
      this.$emit('success');
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss' scoped>
@import url('../index.scss');
</style>