controlPc/src/pages/sys/permissionsAuth.vue

<template>
  <div class="menu">
    <div class="menu-head">
      <a-input
        placeholder="名称"
        style="width: 300px"
        v-model="searchName"
        allowClear
      ></a-input>
      <a-button type="primary" @click="searchList">查询</a-button>
    </div>
    <standard-table
      bordered
      :columns="columns"
      :dataSource="tableList"
      :pagination="pagination"
      @change="onChange"
      :loading="loading"
    >
      <div class="operation-list" slot="operation" slot-scope="record">
        <a-button type="primary" @click="editMenu(record)">数据权限</a-button>
      </div>
    </standard-table>
    <a-modal
      v-model="visible"
      :title="title"
      @ok="handleOk"
      layout="inline"
      width="70%"
      :confirm-loading="confirmLoading"
    >
      <div style="display: flex">
        <div style="width: 28%">
          <tree
            :checkable="checkable"
            @checkTree="checkTree"
            ref="tree"
            @getList="getMessageList"
          ></tree>
        </div>
        <div style="flex: 1">
          <a-form layout="inline" :model="formState" class="users">
            <a-form-item label="姓名" :labelCol="{ span: 5 }" :colon="false">
              <a-input
                placeholder="请输入姓名"
                v-model="formState.userName"
                allowClear
              ></a-input>
            </a-form-item>
            <a-form-item label="工号" :labelCol="{ span: 5 }" :colon="false">
              <a-input
                placeholder="请输入工号"
                v-model="formState.userId"
                allowClear
              ></a-input>
            </a-form-item>

            <a-form-item label="管理人" :labelCol="{ span: 5 }" :colon="false">
              <a-cascader
              change-on-select
                style="width: 300px"
                placeholder="请选择管理人"
                v-model="formState.leaderId"
                allowClear
                :options="manageList"
                :display-render="displayRender"
              >
              </a-cascader>
            </a-form-item>
            <a-form-item
              label="             "
              :labelCol="{ span: 5 }"
              :colon="false"
              class="form-item-search"
            >
              <a-button type="primary" @click="searchChannel()">查询</a-button>
            </a-form-item>
          </a-form>
          <a-tabs
            default-active-key="1"
            :tab-position="'top'"
            style="margin-left: 15px; flex: 1"
            @change="tabChange"
          >
            <a-tab-pane key="1" tab="代理人">
              <standard-table
                bordered
                :columns="columns1"
                :dataSource="perTable"
                :pagination="perPagination"
                @change="onChangePer"
                :loading="perLoading"
              >
              </standard-table>
            </a-tab-pane>
            <a-tab-pane key="2" tab="渠道">
              <standard-table
                bordered
                :columns="columns1"
                :dataSource="perTable"
                :pagination="perPagination"
                @change="onChangePer"
                :loading="perLoading"
              >
              </standard-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>

      <!-- <a-form :layout="formLayout"> -->
      <!-- <tree :checkable="checkable" @checkTree="checkTree" ref="tree"></tree> -->
      <!-- </a-form> -->
    </a-modal>
  </div>
</template>
    
    <script>
import StandardTable from "@/components/table/StandardTable";
import tree from "@/components/tree/allTree.vue";
const columns = [
  {
    title: "员工工号",
    dataIndex: "id",
    //
  },

  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "机构Id",
    dataIndex: "deptId",
  },
  {
    title: "机构名称",
    dataIndex: "deptName",
  },

  {
    title: "操作",
    key: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
const columns1 = [
  {
    title: "员工工号",
    dataIndex: "id",
    //
  },

  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "管理人",
    dataIndex: "leaderName",
  },
  {
    title: "业务来源",
    dataIndex: "managementSource",
  },
];
import manageminxin from "../../minins/manageMixin";
export default {
  components: {
    StandardTable,
    tree,
  },
  mixins: [manageminxin],
  data() {
    return {
      formState: {
        userId: undefined,
        userName: undefined,
        leaderId: [],
      },
      visible: false,
      confirmLoading: false,
      title: "",
      checkable: true,
      formLayout: "horizontal",
      menuTypeList: ["目录", "菜单", "按钮"],
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
      },
      dataForm: {
        id: 0,
        type: 1,
        name: "",
        parentId: 0,
        parentName: "",
        url: "",
        perms: "",
        orderNum: 0,
        icon: "",
      },
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      columns1,
      perPagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      perTable: [],
      perLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 5 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      menuList: [],
      columns,
      tableList: [],
      loading: false,
      resetForm: {},
      authType: false,
      authList: [],
      authPermissions: {
        customScriptFlag: 0,
        dataPermissionId: "",
        id: undefined,
        menuId: 0,
        scriptContent: "",
        url: "",
      },
      checkList: [],
      defaultCheckList: [],
      searchName: "",
      tabs: 1,
      deptId: "",
    };
  },
  created() {
    this.getList();
    this.resetForm = { ...this.dataForm };
    this.getAuthList();
  },
  mounted() {},
  methods: {
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    searchList() {
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;

      this.getList();
    },
    tabChange(key) {
      // console.log(key);
      this.tabs = key;
      this.perPagination.current = 1;
      this.perPagination.defaultPageSize = 10;
      this.getChannelList(this.deptId);
    },
    searchChannel() {
      this.perPagination.current = 1;
      this.perPagination.defaultPageSize = 10;
      this.getChannelList(this.deptId);
    },
    getMessageList(id) {
      this.deptId = id;
      this.perPagination.current = 1;
      this.perPagination.defaultPageSize = 10;
      this.getChannelList(id);
    },
    getChannelList(id) {
      this.perLoading = true;
      this.$API.sysManage
        .getAgentOrChannel({
          deptId: id,
          type: this.tabs,
          pageNum: this.perPagination.current,
          pageSize: this.perPagination.defaultPageSize,
          ...this.formState,
          leaderId: this.formState.leaderId[this.formState.leaderId.length - 1],
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.perLoading = false;
            this.perTable = [...res.data.data.content];
            this.perPagination.total = res.data.data.totalSize;
          }
        });
    },
    checkTree(list) {
      this.checkList = [...list];
      //   console.log(list);
    },
    getAuthList() {
      this.$API.sysManage.getAuthModule("sjqx").then((res) => {
        if (res.data.code === 200) {
          this.authList = [...res.data.data];
        }
      });
    },

    editMenu(item) {
      //   this.defaultCheckList = [];
      this.title = "数据权限配置";
      this.visible = true;
      this.dataForm = { ...item.record };

      this.$nextTick(() => {
        this.$refs.tree.setExpandKys(item.record);
        // this.defaultCheckList = [""];
      });
      this.perTable = [];
      this.perPagination.current = 1;
      this.perPagination.defaultPageSize = 10;
      this.deptId = "";
      this.formState = {
        userId: undefined,
        userName: undefined,
        leaderId: [],
      };

      //   this.setExpandKys(item.record);
    },
    setExpandKys() {},
    onChange(pagination) {
      // this.$message.info('表格状态改变了')
      // console.log(pagination, filters, sorter, { currentDataSource });
      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getList();
    },
    onChangePer(pagination) {
      this.perPagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getMessageList(this.deptId);
    },
    getList() {
      this.loading = true;
      this.$API.sysManage
        .getDeptList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          name: this.searchName,
          agentFlag: 0,
          roleId: "22",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;

            this.tableList = [...res.data.data.content];
            // this.pagination.current = res.data.data.pageNum;
            // this.pagination.defaultPageSize = res.data.data.pageSize;
            this.pagination.total = res.data.data.totalSize;
          }
        });
    },
    // addMenu() {
    //   this.title = "新增";
    //   this.visible = true;
    //   this.dataForm = { ...this.resetForm };
    // },
    handleOk() {
      //   this.visible = false;
      // this.confirmLoading = true;
      //   console.log(this.dataForm, this.checkList);
      this.$API.sysManage
        .UserSetDeptAuth({
          userId: this.dataForm.id,
          deptIds: this.checkList,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("操作成功");
            this.confirmLoading = false;
            this.visible = false;
            this.getList();
          }
        });
    },
  },
};
</script>
    <style lang='less' scoped>
.ant-tabs-tabpane {
  display: flex;
}
.menu {
  display: flex;
  flex-direction: column;
  background: #fff;
  .menu-head {
    display: flex;
    padding: 15px;
    box-sizing: border-box;
    button {
      margin-left: 15px;
    }
  }
  /deep/ .ant-form .ant-form-item {
    display: flex !important;
  }
  .operation-list {
    button {
      margin-right: 10px;
    }
  }
}
</style>