bocai_supplyChain_pc/src/components/merchantManagement/roleManagement.vue

<template>
  <div class="rightContainer">
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <span @click="cancelAdd" v-if="secondBreadcrumb" style="cursor:pointer">角色管理</span>
        <span v-else>角色管理</span>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-if="secondBreadcrumb">{{secondBreadcrumb}}</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="contentbody bodyContainer">
      <div class="fsa pb16" v-if="secondBreadcrumb == ''">
        <div class="f20 fw500">{{secondBreadcrumb || '角色管理'}}</div>
        <a-button class="addmemeber f14" @click="addRole('add')">
          <i class="iconfont icon-fangda mr4"></i> 添加角色
        </a-button>
      </div>
      <div v-if="secondBreadcrumb == ''">
        <a-table :columns="columns" :data-source="roleList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id">
          <!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
          <div slot="setting" class="setting" slot-scope="text, record" style="color: #1890FF">
            <a @click="showDetail(record)">详情</a>
            <a :class="record.roleType == 1 ?'':'unclick'" class="delete" @click="record.roleType == 1 ?  addRole('edit',record):''">编辑</a>
            <a :class="record.roleType == 1 ?'':'unclick'" @click="record.roleType == 1 ?  delRole(record):''">删除</a>
          </div>
        </a-table>
        <div class="pagecontainer mt16 fss dn">
          <a-pagination :current="pagination.pageNum" :default-current="1" :defaultPageSize="20" :show-total="total => `共${total}条`" :total="pagination.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoleListApi, addRoleApi, updateRoleApi, delRoleApi } from '../../api/merchantConfig'
export default {
  // 组件名称
  name: 'RoleManagement',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      secondBreadcrumb: '',
      roleList: [1, 2, 3, 4],

      pagination: {
        pageNum: 1,
        pageSize: 20,
        total: 3, //分页配置
        status: 0,
        keys: null,
        size: 'small',
        showTotal: function (total, range) {
          return `共${total}条`
        },
        pageSizeOptions: ['25', '50', '100'],
        showSizeChanger: true,
        // searchTag: 1,
      },
      isspinning: false,
      roleList: [],
    }
  },
  // 计算属性
  computed: {
    columns() {
      const columns = [
        {
          title: '排序',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, row, index) => {
            if (row.children) {
              return ''
            } else {
              return index + 1
            }
          },
          // ellipsis: true,
          width: 60,
        },
        {
          title: '角色',
          dataIndex: 'roleName',
          key: 'roleName',
          scopedSlots: { customRender: 'roleName' },
          ellipsis: true,
          width: 150,
        },
        // {
        //   title: '角色',
        //   dataIndex: 'role',
        //   key: 'role',
        //   width: 100,
        //   ellipsis: true,
        // },
        {
          title: '角色备注',
          dataIndex: 'desp',
          key: 'desp',
          // width: 100,
          // filters: this.groupList,
          // customRender: (text, row, index) => {
          //   let text1
          //   this.groupList.forEach((item) => {
          //     if (item.id == text) {
          //       text1 = item.teamName
          //     }
          //   })
          //   return text1
          // },
          ellipsis: true,
        },
        // {
        //   title: '权限',
        //   dataIndex: 'permission',
        //   key: 'permission',
        //   ellipsis: true,
        // },
        {
          title: '操作',
          dataIndex: 'setting',
          key: 'setting',
          // sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
          scopedSlots: { customRender: 'setting' },
          ellipsis: true,

          // sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
          // ellipsis: true,
          width: 140,
        },
      ]
      return columns
    },
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  beforeCreate() {},
  created() {
    this.$emit('setTitle', '角色管理')
    this.getRoleList()
    console.log(this.middleauthor)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    checkboxChange(e, key, index) {
      // console.log(e)
      // console.log(key)
      // console.log(index)
      // console.log(this.authorityList[key]);
      // console.log(this.authorityList[key][index]);
      if (e.children) {
        this.authorityList[key].checked = !this.authorityList[key].checked
      } else {
        this.authorityList[key].children[index].checked = !this.authorityList[key].children[index].checked
      }
      console.log(this.authorityList)
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize
      console.log(pagenumcount)
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount)
        } else {
          this.pagination.pageNum = e.target.value
        }
      } else {
        this.pagination.pageNum = 1
      }
      // this.getJobList();
      this.getMemberList()
      console.log(e)
    },
    choiceGroup() {},
    onChange(e, e1, e2) {
      console.log(e)
      console.log(e1)
      console.log(e2)
      if (typeof e == 'number') {
        this.pagination.pageNum = e
        this.getMemberList()
      }
    },
    showDetail(val) {
      let that = this
      this.secondBreadcrumb = '角色详情'
      console.log(val)
      that.$router.push({
        name: 'RoleManagementDetail',
        query: {
          item: JSON.stringify(val),
        },
      })
    },
    addRole(type, val) {
      let that = this
      this.currentRole = val
      if (type == 'add') {
        this.$confirm({
          title: '添加角色',
          content: '【添加角色】属高敏感权限，基于账户安全考虑，请再次确认是否创建',
          onOk() {
            that.$router.push({
              name: 'AddRoleManagement',
              query: {
                // item: val,
                type: 'add',
                roleList: JSON.stringify(that.roleList),
              },
            })
          },
          onCancel() {},
        })
        // this.secondBreadcrumb = '添加角色'
      } else {
        this.$router.push({
          name: 'AddRoleManagement',
          query: {
            item: JSON.stringify(val),
            roleList: JSON.stringify(this.roleList),
          },
        })
        // this.secondBreadcrumb = '编辑角色'
        // setTimeout(() => {
        //   this.roleForm.setFieldsValue({
        //     roleName: val.roleName,
        //     desp: val.desp,
        //   })
        // }, 10)
      }
      this.$forceUpdate()
    },
    delRole(val) {
      let that = this
      that.$confirm({
        title: '删除',
        content: '确定要删除该角色吗？',
        centered: true,
        onOk(e1, e2) {
          console.log(e1)
          console.log(e2)
          that.delSubmit(val)
          return new Promise((res) => {
            setTimeout(() => {
              res()
            }, 2000)
          })
        },
        onCancel() {},
      })
    },
    getRoleList() {
      getRoleListApi().then(({ data }) => {
        console.log(data)
        if (data.status == 200) {
          this.roleList = data.data.list
        }
      })
    },

    /**
     * 删除角色信息表单提交
     */
    delSubmit(val) {
      console.log(val)
      delRoleApi(val.id).then(({ data }) => {
        console.log(data)
        if (data.status == 200) {
          this.secondBreadcrumb = ''
          this.$message.success('删除成功')
          this.getRoleList()
        } else {
          this.$message.fail('删除失败')
        }
      })
    },
    /**
     * 取消编辑或者新增角色
     */
    cancelAdd() {
      this.secondBreadcrumb = ''

      // this.authorityList = JSON.parse(JSON.stringify(this.middleauthor))
    },
  },
}
</script>

<style scoped lang="less">
.addmemeber {
  border: 0;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  background: #1890ff;
  border-radius: 4px;
  i {
    font-size: 12px;
  }
  &:hover {
    background: #40a9ff;
  }
}

.ant-divider {
  margin: 16px 0 22px 0;
}
.delete {
  border-left: 1px solid #979797;
  border-right: 1px solid #979797;
  padding: 0 9px;
  margin: 0 9px;
}
/deep/.ant-table {
  .ant-table-content {
    .ant-table-body {
      .ant-table-thead {
        th {
          padding: 12px 0;
          div {
            padding: 0px 8px;
          }
          &:not(:first-child) {
            > span {
              //  line-height: 22px;
              > div {
                //  line-height: 1;
                border-left: 1px solid #ddd;
                padding-left: 12px;
              }
            }
          }
        }
        .ant-table-row-cell-break-word {
          font-size: 14px !important;
          font-weight: bold;
        }
        .ant-table-row-cell-ellipsis {
          font-size: 14px !important;
          font-weight: bold;
        }
      }
      .ant-table-tbody {
        .ant-table-row-cell-ellipsis {
          font-size: 14px !important;
          padding: 12px 14px;
        }
        .ant-table-row-expand-icon {
          // color: #000;
          padding: 0;
        }
        .ant-table-row-indent {
          display: none !important;
        }
      }
    }
  }
}
.unclick {
  color: #ccc;
  cursor: not-allowed;
}
</style>