auth-web/src/pages/list-manage/white-list-manage/component/user-list.vue

<!--
人员列表
@Author: linqian
@Date: 2021-07-07 14:00
-->
<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 操作栏 -->
    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
    <!-- 表格 -->
    <new-table
      ref="table"
      :tableUrl="whiteListTableUrl"
      :tableHeader="userListHeader"
      rowKey="idcard"
      :condition="condition"
      :selection="true"
      :tableOptList="tableOptList"
       @submitTableOpt="receviceOpt"
       @selection-change="handleSelectChange"

    >
    </new-table>
  </div>
</template>

<script>
import { whiteListTableUrl, delWhiteList } from '@/api/list-manage';
import newTable from '@/components/new-table';
import batchAddUser from './batch-add-user.vue';
import batchSetlevelUser from './batch-setlevel-user.vue';
import batchDeleteUser from './batch-delete-user.vue';
import operateBar from '@/components/operate-bar';
import searchBar from '@/components/search-bar';
import { searchOpt } from '@/mixins/page-opt';

export default {
  components: {
    newTable,
    searchBar,
    operateBar
  },
  mixins: [searchOpt],
  data() {
    return {
      whiteListTableUrl,
      conditionForm: [
        {
          label: '白名单级别',
          name: 'level',
          op: '=',
          value: '',
          component: 'DgSelect',
          attr: {
            enum: 'ListLevelEnum'
          }
        },
        {
          label: '姓名',
          name: 'name',
          op: 'like',
          value: '',
          component: 'ElInput'
        },
        {
          label: '身份证号码',
          name: 'idcard',
          op: 'like',
          value: '',
          component: 'ElInput'
        },
        {
          label: '单位名称',
          name: 'orgId',
          op: '=',
          value: '',
          apiName: 'getOrgTree',
          nodeKey: 'id',
          type: 'APP',
          component: 'SelectOrgTree',
          placeholder: '请选择单位名称'
        }
      ],
      pageOptList: ['批量添加', '批量设置名单级别', '批量删除'],
      tableOptList: ['删除'],
      userListHeader: [
        {
          label: '姓名',
          prop: 'userName'
        },
        {
          label: '身份证号码',
          prop: 'idcard'
        },
        {
          label: '单位名称',
          prop: 'orgName'
        },
        {
          label: '白名单级别',
          prop: 'listLevel',
          enum: 'ListLevelEnum'
        }
      ],
      selectList: []
    };
  },
  computed: {},
  methods: {
    receviceOpt(type, row) {
      if (type == '批量添加') {
        this.handleAdd();
      } else if (type == '批量设置名单级别') {
        this.handleSetListLevel();
      } else if (type == '批量删除') {
        this.handleBatchRemove();
      } else if (type == '删除') {
        this.handleRemove(row);
      }
    },
    handleSelectChange(selection) {
      this.selectList = this.$lodash.cloneDeep(selection);
    },
    // 打开弹窗
    openLayer(title, content, operate, area = ['800px', '600px']) {
      const vm = this;
      const selectedData = vm.selectList;
      const layer = this.$dgLayer({
        title,
        content,
        props: {
          selectedData,
          operate
        },
        on: {
          success() {
            if (operate == 'del') {
              vm.removeList(selectedData);
            } else {
              vm.handleSearch();
              vm.$refs.table.handleClearSelection();
            }
            layer.close(layer.dialogIndex);
          }
        },
        cancel: function (index) {
          // 关闭对应弹窗的ID
          layer.close(index);
          return false;
        },
        area
      });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.openLayer('批量添加人员白名单', batchAddUser, 'add', ['1200px', '800px']);
    },
    /**
     * 设置名单级别
     */
    verify() {
      const selectedData = this.selectList;
      if (selectedData.length == 0) {
        this.$message.warning('请至少选择一个人员!');
        return false;
      } else {
        return true;
      }
    },
    handleSetListLevel() {
      if (!this.verify()) return;
      this.openLayer('批量设置白名单级别', batchSetlevelUser, 'set');
    },
    /**
     * 删除
     */
    handleRemove(row) {
      this.$dgConfirm(`是否确定删除这条数据！`, '提示', {}).then(() => {
        this.removeList([row]);
      });
    },
    /**
     * 批量删除
     */
    handleBatchRemove() {
      if (!this.verify()) return;
      this.openLayer('批量删除白名单人员', batchDeleteUser, 'del');
    },
    removeList(selectData) {
      const params = {
        listIds: selectData.map((item) => item.listId)
      };
      delWhiteList(params).then((res) => {
        this.$message.success('删除成功!');
        this.handleSearch();
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss'>
</style>