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

<!--
批量添加应用功能红名单
@Author: linqian
@Date: 2021-07-13
-->
<template>
  <div>
    <el-form inline>
      <el-form-item label="应用系统名称：">
        <el-input v-model="appName" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
      </el-form-item>
    </el-form>
    <!-- 表格树 -->
    <vxe-table ref="vxeGrid" :data="sourceData" v-bind="gridOptions">
      <vxe-table-column type="checkbox" width="60" align="center">
        <template #header="row">
          <span class="custom-checkbox">
            <el-checkbox
              :indeterminate="row.indeterminate"
              v-model="row.checked"
              @change="handleToggleAllCheck"
            ></el-checkbox>
          </span>
        </template>
        <template #checkbox="scoped">
          <span class="custom-checkbox">
            <el-checkbox
              :indeterminate="scoped.indeterminate"
              v-model="scoped.checked"
              @change="handleToggleCheck(scoped.row)"
            ></el-checkbox>
          </span>
        </template>
      </vxe-table-column>
      <vxe-table-column type="seq" width="60" align="center" title="序号"></vxe-table-column>
      <vxe-table-column align="center" title="应用功能名称" field="label" :treeNode="true"></vxe-table-column>
    </vxe-table>

    <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 batchSetlevelAppFunc from './batch-setlevel-appfunc.vue';
import { getFunIdsInRedList } from '@/api/list-manage';
export default {
  props: {
    data: [Array]
  },
  mixins: [getTreeDataMixin],
  components: {},
  data() {
    return {
      appName: '',
      value: [],
      valueName: 'id',
      childrenName: 'child',
      pidName: 'p',
      gridOptions: {
        border: true,
        rowId: 'id',
        treeConfig: { children: 'child', indent: 40 },
        loading: false,
        checkboxConfig: {
          // 设置复选框支持分页勾选，需要设置 rowId 行数据主键
          reserve: true
        }
      }
    };
  },
  computed: {},
  methods: {
    handleToggleCheck(row) {
      this.$refs.vxeGrid.toggleCheckboxRow(row);
    },
    handleToggleAllCheck() {
      this.$refs.vxeGrid.toggleAllCheckboxRow();
    },
    handleSearch() {
       this.dataSource = this.data.filter(item => item.label.indexOf(this.appName) > -1);

    },
    handleCancel() {
      this.$emit('close');
    },
    handleSubmit() {
      // 获取全选和半选的节点
      const checkboxRecords = this.$refs.vxeGrid.getCheckboxRecords(true);
      const indeterminateRecords = this.$refs.vxeGrid.getCheckboxIndeterminateRecords(true);
      const totalRecords = [...checkboxRecords, ...indeterminateRecords].filter((item) => item.appId);

      if (totalRecords.length > 0) {
        this.setLevel(totalRecords);
      } else {
        this.$message.warning('请至少选择一个应用功能!');
      }
    },
    /**
     * 设置名单等级
     */
    setLevel(selectedData) {
      const vm = this;
      const layer = this.$dgLayer({
        title: '设置红名单等级',
        content: batchSetlevelAppFunc,
        props: {
          data: this.data,
          value: selectedData.map((item) => item.id),
          selectedData,
          operate: 'add'
        },
        on: {
          success() {
            vm.$emit('success');
            layer.close(layer.dialogIndex);
          }
        },
        cancel: function (index) {
          // 关闭对应弹窗的ID
          layer.close(index);
          return false;
        },
        area: ['800px', '600px']
      });
    }
  },
  created() {
    // 查询已被添加为红名单的功能id
    getFunIdsInRedList().then((res) => {
      this.value = res.data.content;
    });
  },
  mounted() {}
};
</script>

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