back_town/src/views/roleIng/role/roleAdmin.vue

<template>
  <div class="role-admin">
    <!--       :body-style="{padding: '24px 10px 24px 32px'}" -->
    <a-card
      :bordered="false"
      title="角色面板"
    >
      <template slot="extra">
        <a-button type="primary" @click="openModal({id: '', label: ''}, 0, 'add')">新增</a-button>
      </template>
      <div class="role-list">
        <div v-for="(item, index) in roleList" :key="item.id">
          <div class="['role-item']" >
            <a-row>
              <a-col :span="14" @click="selectRole(item)">

                <a-icon v-show="roleId === item.id" type="check-circle" theme="twoTone" two-tone-color="#52c41a" />
                <span class="cp"> {{ item.label }}</span>
              </a-col>
              <a-col :span="10">
                <a @click="openModal(item, index, 'edit')">重命名</a>
                <a-divider type="vertical" />
                <a-popconfirm
                  title="你确定要删除这个角色吗?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="deleteRole(item)"
                >
                  <a> 删除</a>
                </a-popconfirm>

              </a-col>
            </a-row>
          </div>
          <a-divider />
        </div>

      </div>
    </a-card>

    <!-- 重命名 or 新增 角色弹窗 -->
    <a-modal
      :title="modalType | filtersModalType"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="postRole"
      @cancel="visible= false"
    >
      <a-input v-model="form.label" :placeholder="modalType | filtersModalType " ></a-input>
    </a-modal>
  </div>
</template>

<script>
import { postRole, getRole, deleteRole } from '@/api/role'
const roleList = []

for (let i = 0; i < 10; i++) {
    roleList.push({
        label: `校长${i}`,
        id: i
    })
}
export default {
  name: 'RoleAdmin',
  filters: {
      filtersModalType (type) {
          switch (type) {
              case 'add':
                  return '新增标签名'
              case 'edit':
                  return '编辑角色名'
          }
      }
  },
  mounted () {
    this.getRole()
  },
  watch: {
    roleId () {
       this.$emit('changeRole', this.roleId)
    }
  },
  data () {
      return {
        modalType: 'add', // 编辑 edit 或者 新增 add
        visible: false,
        confirmLoading: false,
        roleList: [],
        form: {
            label: '', // 新增或者修改的字段
            id: ''
        },
        roleId: ''
      }
  },
  methods: {
    // 选择一个角色
    selectRole (records) {
      this.roleId = records.id
    },
    // 删除角色
    async deleteRole (records) {
      const { code, data } = await deleteRole(records.id)
      if (code === 0) {
        console.log(data)
        data ? this.$message.success('删除成功') : this.$message.error('删除失败')
      }
      this.getRole()
    },
    // 添加角色
    async postRole () {
      const $par = {
        label: this.form.label,
        id: this.form.id,
        type: this.modalType
      }
      this.confirmLoadin = true
      const { code, data } = await postRole($par)
      this.confirmLoading = false
      if (code === 0) {
        console.log(data)
      }
      this.getRole()
      this.visible = false
    },
    // 查询角色
    async getRole () {
      const { code, data } = await getRole({ curPage: 1 })
      if (code === 0) {
        const { records } = data
        console.log(data)
        this.roleList = records
        this.roleId = this.roleList[0].id
      }
    },
    handleOk (e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
       // 打开弹窗
    openModal (record, index, type) {
        this.modalType = type
        this.visible = true
        this.form.label = record.label
        this.form.id = record.id
    }
  }
}
</script>
<style scoped lang="less">
@import '~ant-design-vue/es/style/themes/default.less';
// .role-admin {
//     min-height: 100vh;
// }
.role-item {

}
.active {
  // color: @primary-color;
 }
</style>