成员管理&角色权限页面

yangfeng

2023-07-13 72f14ac421734761836416640985d83ddf7a9c12

成员管理&角色权限页面

 src/components/makepager/TableCommonView.vue

@@ -23,7 +23,7 @@
        :width="item.width"
        :min-width="item.min"
        show-overflow-tooltip
        sortable
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>

 src/views/backgroundConfig/memberManage/AddMemberManageDialog.vue

New file
@@ -0,0 +1,435 @@
<template>
  <div class="add-member-manage">
    <el-dialog
      :title="editCommonConfig.title + '成员管理'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="308px"
        size="mini"
        style="height: 70vh; overflow-x: hidden"
      >
        <!-- 信息 -->
        <div class="basic-info">
          <!-- 成员信息 -->
          <div class="basic-info-title">成员信息</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号" prop="account">
                  <el-input v-model="editConfig.infomation.account"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否管理员" prop="isAdmin">
                  <el-switch v-model="editConfig.infomation.isAdmin" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model="editConfig.infomation.password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码确认" prop="passwordConfirm">
                  <el-input v-model="editConfig.infomation.passwordConfirm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="editConfig.infomation.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="editConfig.infomation.realName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" prop="department">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.department"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit-outline"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="state">
                  <el-select v-model="editConfig.infomation.state" placeholder="请选择" size="mini">
                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机" prop="phone">
                  <el-input v-model="editConfig.infomation.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话" prop="telephone">
                  <el-input v-model="editConfig.infomation.telephone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Email" prop="email">
                  <el-input v-model="editConfig.infomation.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业微信通讯录账号" prop="wechat">
                  <el-input v-model="editConfig.infomation.wechat"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批委托" prop="approvalDelegation">
                  <el-select v-model="editConfig.infomation.approvalDelegation" placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in approvalDelegationOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="小程序通讯账号" prop="miniProgram">
                  <el-input v-model="editConfig.infomation.miniProgram"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="钉钉通讯录信函或" prop="dingtalk">
                  <el-input v-model="editConfig.infomation.dingtalk"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批委托人" prop="approvalPrincipal">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.approvalPrincipal"></el-input>
                    <div class="common-select-btn">
                      <i class="el-icon-circle-plus-outline"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位级别" prop="positionLevel">
                  <CommonSelectView
                    :common-value="editConfig.infomation.positionLevel"
                    :common-options="positionLevelOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="notes">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.notes"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入职日期" prop="employeeDate">
                  <el-date-picker v-model="editConfig.infomation.employeeDate" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="个人头像" prop="avatar">
                  <el-button type="text"><i class="el-icon-paperclip"></i>添加</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="云之家通讯账号" prop="cloudHome">
                  <el-input v-model="editConfig.infomation.cloudHome"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="测定" prop="determine">
                  <el-input v-model="editConfig.infomation.determine"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 角色与权限 -->
          <div class="basic-info-title">角色与权限</div>
          <div class="address-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="角色权限" prop="rolePermssion">
                  <el-select v-model="editConfig.infomation.rolePermssion" placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in rolePermssionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务数据范围" prop="dataScope">
                  <el-button type="text">数据范围设置</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="role1">
                  <template slot="label">
                    <div style="display: flex; float: right">
                      <div style="font-size: 16px"><i class="el-icon-question"></i></div>
                      <span style="margin-left: 5px">编辑其他成员单据手机</span>
                    </div>
                  </template>
                  <el-switch v-model="editConfig.infomation.role1" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="编辑自己单据手机" prop="role2">
                  <el-switch v-model="editConfig.infomation.role2" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码显示样式控制" prop="role3">
                  <el-switch v-model="editConfig.infomation.role3" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="显示合同服务信息" prop="role4">
                  <el-switch v-model="editConfig.infomation.role4" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="显示具体服务到期日" prop="role5">
                  <el-switch v-model="editConfig.infomation.role5" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="显示客户服务单历史记录" prop="role6">
                  <el-switch v-model="editConfig.infomation.role6" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据相关信息查询所有关联数据" prop="role7">
                  <el-switch v-model="editConfig.infomation.role7" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="市场活动相关信息查询所有数据" prop="role8">
                  <el-switch v-model="editConfig.infomation.role8" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 其他设置 -->
          <div class="basic-info-title">其他设置</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="登录时启用手机短信验证" prop="other1">
                  <el-switch v-model="editConfig.infomation.other1" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                  需购买并设置短信账户
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否允许推送移动端提醒" prop="other2">
                  <el-switch v-model="editConfig.infomation.other2" active-color="#2E68DB" inactive-color="#AEB9CA">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info-title">附件信息</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="附件" prop="">
                  <template slot="label">
                    <div style="display: flex; float: right">
                      <div style="font-size: 16px">
                        <i class="el-icon-warning-outline" title="最多上传20个附件，最大限制5MB"></i>
                      </div>
                      <span style="margin-left: 5px">附件</span>
                    </div>
                  </template>
                  <div class="annex-view">
                    <div @click="addAnnexClick">
                      <div style="display: flex; float: right">
                        <div style="font-size: 16px"><i class="el-icon-paperclip"></i></div>
                        <span>添加</span>
                      </div>
                    </div>
                    <div class="setFormat" @click="setFormatClick">设置允许上传的文件格式</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editConfig.visible = false">保 存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonSelectView from "@/components/makepager/CommonSelectView"
export default {
  name: "AddMemberManageDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            account: "",
            isAdmin: "",
            password: "",
            passwordConfirm: "",
            name: "",
            realName: "",
            department: "",
            state: "",
            phone: "",
            telephone: "",
            email: "",
            wechat: "",
            approvalDelegation: "",
            miniProgram: "",
            dingtalk: "",
            approvalPrincipal: "",
            positionLevel: "",
            notes: "",
            employeeDate: "",
            avatar: "",
            cloudHome: "",
            determine: "",
            rolePermssion: "",
            dataScope: "",
            role1: "",
            role2: "",
            role3: "",
            role4: "",
            role5: "",
            role6: "",
            role7: "",
            role8: "",
            other1: "",
            other2: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        account: [{ required: true, message: "请输入", trigger: "blur" }],
        password: [{ required: true, message: "请输入", trigger: "blur" }],
        passwordConfirm: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        department: [{ required: true, message: "请输入", trigger: "blur" }],
        rolePermssion: [{ required: true, message: "请选择", trigger: "change" }]
      },
      stateOptions: [], // 状态
      rolePermssionOptions: [], // 角色权限
      positionLevelOptions: [], // 职位级别
      approvalDelegationOptions: [] // 审批委托
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-member-manage {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
</style>

 src/views/backgroundConfig/memberManage/EditDepartmentDialog.vue

New file
@@ -0,0 +1,103 @@
<template>
  <div class="edit-department">
    <el-dialog
      :title="editDepartmentConfig.title"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="editConfig.infomation" :rules="rules" label-width="100px" size="mini">
        <!-- 信息 -->
        <div class="basic-info">
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="departmentName">
                <el-input v-model="editConfig.infomation.departmentName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门编号" prop="departmentNumber">
                <el-input v-model="editConfig.infomation.departmentNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="notes">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="editConfig.infomation.notes"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editConfig.visible = false">保 存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EditDepartmentDialog",
  props: {
    editDepartmentConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            departmentName: "",
            departmentNumber: "",
            notes: ""
          }
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "40%",
      editConfig: this.editDepartmentConfig,
      rules: {
        departmentName: [{ required: true, message: "请输入", trigger: "blur" }],
        departmentNumber: [{ required: true, message: "请输入", trigger: "blur" }]
      }
    }
  },
  created() {
    this.isActive = true
  },
  methods: {
    handleClose() {
      this.editConfig.visible = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.edit-department {
  .basic-info {
    padding: 20px;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
::v-deep {
  .el-dialog__wrapper {
    margin-top: 20vh;
  }
}
</style>

 src/views/backgroundConfig/memberManage/TreeLeft.vue

New file
@@ -0,0 +1,146 @@
<template>
  <div class="tree-left">
    <el-tree :data="data" ref="tree" default-expand-all node-key="id" :expand-on-click-node="false">
      <span
        class="custom-tree-node"
        slot-scope="{ node, data }"
        @mouseenter="mouseenter(data)"
        @mouseleave="mouseleave(data)"
      >
        <span>{{ node.label }}</span>
        <span>
          <el-dropdown
            v-show="data.show"
            @command="
              (command) => {
                handleCommand(command, data)
              }
            "
          >
            <span class="el-dropdown-link">
              <i class="el-icon-more icon"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item command="add">新增子部门</el-dropdown-item>
              <el-dropdown-item v-if="data.id !== 1" command="delete">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "TreeLeft",
  props: {},
  components: {},
  computed: {},
  data() {
    const data = [
      {
        id: 1,
        label: "上海灵当信息科技有限公司",
        children: [
          {
            id: 11,
            label: "销售部",
            children: [
              {
                id: 111,
                label: "Mia"
              },
              {
                id: 112,
                label: "系统管理员"
              },
              {
                id: 113,
                label: "销售"
              },
              {
                id: 114,
                label: "销售总监"
              },
              {
                id: 115,
                label: "销售一部",
                children: []
              },
              {
                id: 116,
                label: "销售二部",
                children: []
              }
            ]
          },
          {
            id: 21,
            label: "管理层",
            children: [
              {
                id: 211,
                label: "BOSS"
              },
              {
                id: 212,
                label: "系统管理员"
              }
            ]
          },
          {
            id: 31,
            label: "财务部",
            children: []
          },
          {
            id: 41,
            label: "市场部",
            children: []
          }
        ]
      }
    ]
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      data: JSON.parse(JSON.stringify(data))
    }
  },
  created() {},
  methods: {
    mouseenter(data) {
      this.$set(data, "show", true)
    },
    mouseleave(data) {
      this.$set(data, "show", false)
    },
    handleCommand(command, data) {
      this.$emit("editDepartmentClick", command, data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.tree-left {
  padding: 20px 10px;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 10px;
    height: 100%;
    .icon {
      transform: rotate(90deg);
    }
  }
}
</style>

 src/views/backgroundConfig/memberManage/index.vue

@@ -1,6 +1,8 @@
<template>
  <div class="memeber-manage">
    <div class="left"></div>
    <div class="left">
      <TreeLeft @editDepartmentClick="editDepartmentClick" />
    </div>
    <div class="right">
      <SearchCommonView
        ref="searchCommonView"
@@ -38,18 +40,24 @@
    </div>

    <!-- 新建/编辑 -->
    <AddContractManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <AddMemberManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <!-- 编辑部门 -->
    <EditDepartmentDialog v-if="departmentConfig.visible" :edit-department-config="departmentConfig" />
  </div>
</template>

<script>
import AddContractManageDialog from "@/views/sales/contractManage/AddContractManageDialog"
import AddMemberManageDialog from "@/views/backgroundConfig/memberManage/AddMemberManageDialog"
import TreeLeft from "@/views/backgroundConfig/memberManage/TreeLeft"
import EditDepartmentDialog from "@/views/backgroundConfig/memberManage/EditDepartmentDialog"

export default {
  name: "MemberManage",
  props: {},
  components: {
    AddContractManageDialog
    AddMemberManageDialog,
    TreeLeft,
    EditDepartmentDialog
  },
  computed: {
    searchCommonHeight() {
@@ -82,6 +90,11 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      departmentConfig: {
        visible: false,
        title: "编辑部门",
        infomation: {}
      }
    }
  },
@@ -106,7 +119,7 @@
          }
        ],
        tableColumn: [
          { label: "姓名", prop: "name", min: 120 },
          { label: "姓名", prop: "name", sortable: true, min: 120 },
          { label: "账号", prop: "account", min: 90 },
          { label: "部门", prop: "department" },
          { label: "角色权限", prop: "rolePermssion", min: 100 },
@@ -127,15 +140,40 @@
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        documentNumber: "ZDYBD01-3",
        owner: "",
        contractStatus: "",
        salesQuotation: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
        account: "",
        isAdmin: "",
        password: "",
        passwordConfirm: "",
        name: "",
        realName: "",
        department: "",
        state: "",
        phone: "",
        telephone: "",
        email: "",
        wechat: "",
        approvalDelegation: "",
        miniProgram: "",
        dingtalk: "",
        approvalPrincipal: "",
        positionLevel: "",
        notes: "",
        employeeDate: "",
        avatar: "",
        cloudHome: "",
        determine: "",
        rolePermssion: "",
        dataScope: "",
        role1: "",
        role2: "",
        role3: "",
        role4: "",
        role5: "",
        role6: "",
        role7: "",
        role8: "",
        other1: "",
        other2: ""
      }
    },
    // 编辑
@@ -144,15 +182,40 @@
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        documentNumber: "TKD20230521-12",
        owner: "",
        contractStatus: "",
        salesQuotation: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
        account: "",
        isAdmin: "",
        password: "",
        passwordConfirm: "",
        name: "",
        realName: "",
        department: "",
        state: "",
        phone: "",
        telephone: "",
        email: "",
        wechat: "",
        approvalDelegation: "",
        miniProgram: "",
        dingtalk: "",
        approvalPrincipal: "",
        positionLevel: "",
        notes: "",
        employeeDate: "",
        avatar: "",
        cloudHome: "",
        determine: "",
        rolePermssion: "",
        dataScope: "",
        role1: "",
        role2: "",
        role3: "",
        role4: "",
        role5: "",
        role6: "",
        role7: "",
        role8: "",
        other1: "",
        other2: ""
      }
    },
    // 启用
@@ -170,6 +233,24 @@
    // 删除
    deleteClick(row) {
      console.log(row)
    },
    // 编辑部门
    editDepartmentClick(command, data) {
      console.log(command, data)
      this.departmentConfig.visible = true
      if (command === "edit") {
        this.departmentConfig.infomation = {
          departmentName: data.label,
          departmentNumber: data.id,
          notes: ""
        }
      } else if (command === "add") {
        this.departmentConfig.infomation = {
          departmentName: "",
          departmentNumber: "",
          notes: ""
        }
      }
    }
  }
}

 src/views/backgroundConfig/rolePermssion/AddRolePermssionDialog.vue

New file
@@ -0,0 +1,316 @@
<template>
  <div class="add-role-permission">
    <el-dialog
      :title="editCommonConfig.title"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="200px"
        size="mini"
      >
        <!-- 信息 -->
        <div class="basic-info">
          <!-- 基本信息 -->
          <div class="basic-info-title">基本信息</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="权限名称" prop="owner">
                  <el-input v-model="editConfig.infomation.owner"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注" prop="notes">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.notes"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 模块选择 -->
          <div class="module-select">
            <el-button type="text" @click="moduleSelectClick('all')" :class="isActive ? 'selBtn' : ''">全部</el-button>
            <el-button type="text" @click="moduleSelectClick('custom')">客户管理</el-button>
            <el-button type="text" @click="moduleSelectClick('sales')">销售管理</el-button>
            <el-button type="text" @click="moduleSelectClick('service')">服务管理</el-button>
            <el-button type="text" @click="moduleSelectClick('background')">后台设置</el-button>
            <div class="title">{{ moduleSelTitle }}</div>
          </div>
        </div>
        <div>
          <el-table :show-header="false" :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="" width="180">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.checked" @change="selAllChange(scope.row)">{{
                  scope.row.name
                }}</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="">
              <template slot-scope="scope">
                <el-checkbox-group
                  v-model="scope.row.checkedList"
                  @change="
                    (value) => {
                      handleCheckedChange(value, scope.row)
                    }
                  "
                >
                  <el-checkbox v-for="item in scope.row.detailsList" :label="item.name" :key="item.id">{{
                    item.name
                  }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="left">
          <el-checkbox v-model="allChecked" @change="allChange">全选</el-checkbox>
          <div class="globalAuth">
            <span>全局快速授权</span>
            <el-select v-model="value" size="mini" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
          <div class="radio">
            <el-radio v-model="radio" label="1">授权</el-radio>
            <el-radio v-model="radio" label="2">取消授权</el-radio>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" size="small" @click="editConfig.visible = false">保 存</el-button>
          <el-button size="small" @click="editConfig.visible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddRolePermissionDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            owner: "",
            notes: ""
          }
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    const commonList = [
      { id: 1, name: "查看" },
      { id: 2, name: "新建" },
      { id: 3, name: "编辑" },
      { id: 4, name: "删除" },
      { id: 5, name: "复制" },
      { id: 6, name: "分配" },
      { id: 7, name: "共享" },
      { id: 8, name: "导入" },
      { id: 9, name: "导出" },
      { id: 10, name: "更改创建人" },
      { id: 11, name: "查询分类设置" },
      { id: 12, name: "推进" },
      { id: 13, name: "下载" },
      { id: 14, name: "预览" },
      { id: 15, name: "下载和预览次数" },
      { id: 16, name: "下载全部附件" }
    ]
    return {
      dialogWidth: "60%",
      editConfig: this.editCommonConfig,
      rules: {
        owner: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      moduleSelTitle: "全部",
      tableData: [],
      btnCommonList: commonList,
      allChecked: false,
      radio: "",
      value: "",
      options: [{ value: "1", label: "删除" }],
      isActive: false
    }
  },
  created() {
    this.isActive = true
  },
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 模块选择
    moduleSelectClick(value) {
      this.isActive = false
      if (value === "all") {
        this.moduleSelTitle = "全部"
        this.tableData = []
      } else if (value === "custom") {
        this.moduleSelTitle = "客户管理"
        this.tableData = [
          {
            name: "销售线索",
            checked: false,
            checkedList: ["查看"],
            detailsList: this.btnCommonList
          },
          {
            name: "客户管理",
            checked: false,
            checkedList: [],
            detailsList: this.btnCommonList
          },
          {
            name: "联系人",
            checked: false,
            checkedList: [],
            detailsList: this.btnCommonList
          },
          {
            name: "跟进记录",
            checked: false,
            checkedList: [],
            detailsList: this.btnCommonList
          }
        ]
      } else if (value === "sales") {
        this.selectA = false
        this.selectB = true
        this.moduleSelTitle = "销售管理"
        this.tableData = []
      } else if (value === "service") {
        this.moduleSelTitle = "服务管理"
        this.tableData = []
      } else if (value === "background") {
        this.moduleSelTitle = "后台设置"
        this.tableData = []
      }
    },
    // 模块全选
    selAllChange(row) {
      if (row.checked) {
        let arr = []
        row.detailsList.forEach((ele) => {
          arr.push(ele.name)
        })
        row.checkedList = arr
      }
    },
    handleCheckedChange(value, row) {
      if (value.length === row.detailsList.length) {
        row.checked = true
      } else {
        row.checked = false
      }
      row.checkedList = value
    },
    // 全选
    allChange() {
      this.allChecked != this.allChecked
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-role-permission {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
        }
      }
    }
    .module-select {
      background-color: $color-text-placehoder;
      padding: 20px;
      .el-button {
        background-color: #fff;
        padding: 10px;
        color: $color-text-main;
        &:hover,
        &:active,
        &:focus {
          background-color: $color-primary;
          color: #fff;
        }
      }
      .selBtn {
        background-color: $color-primary;
        color: #fff;
      }
      .title {
        margin-top: 20px;
        color: black;
        font-weight: bold;
      }
    }
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      .globalAuth {
        font-size: 14px;
        color: #606266;
        margin-left: 10px;
        .el-select {
          width: 90px;
          margin-left: 5px;
        }
      }
      .radio {
        margin-left: 10px;
        .el-radio {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>

 src/views/backgroundConfig/rolePermssion/index.vue

@@ -1,7 +1,7 @@
<template>
  <div class="role-peimission">
    <div class="btn-pager">
      <el-button @click="addpermssionClick" type="primary" size="small">新增权限</el-button>
      <el-button @click="addBtnClick" type="primary" size="small">新增权限</el-button>
    </div>
    <TableCommonView ref="tableListRef" :select-box="false" :table-list="tableList">
      <template slot="tableButton">
@@ -19,18 +19,18 @@
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddContractManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <AddRolePermssionDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import AddContractManageDialog from "@/views/sales/contractManage/AddContractManageDialog"
import AddRolePermssionDialog from "@/views/backgroundConfig/rolePermssion/AddRolePermssionDialog"

export default {
  name: "RoleOeimission",
  props: {},
  components: {
    AddContractManageDialog
    AddRolePermssionDialog
  },
  computed: {
    searchCommonHeight() {
@@ -42,7 +42,7 @@
      tableList: {},
      editConfig: {
        visible: false,
        title: "新建",
        title: "新增权限",
        infomation: {}
      }
    }