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

<!--
批量删除应用功能红名单
@Author: linqian
@Date: 2021-07-14 10:09
-->
<template>
  <div>
    <p>是否确定移除以下应用功能红名单？</p>
    <p style="margin-top: 10px; 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 { delBatchRedAppFunc } from '@/api/list-manage';
export default {
  props: {
    data: [Array],
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    selectedData: [Array]
    
  },
  mixins: [getTreeDataMixin],
  components: {},
  data() {
    return {
      appName: '',
      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');
    },
    // 批量删除
    handleSubmit() {
      delBatchRedAppFunc({
        listIds: this.selectedData.map(item => item.listId)
      }).then((res) => {
        this.$message.success('删除成功！');
        this.$emit('success');
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

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