energy_storage/web/src/views/system/permission.vue

<template>
  <div class="permission">
    <searchBox
      :btn-option-list="btnOptionList"
      @onSearch="onSearch"
      :search-options="searchOptions"
      @operateForm="operateForm"
    ></searchBox>

    <div class="content-table">
      <TreeTable
        :columns="columns"
        :table-data="tableData"
        @handlePagesizeChange="handlePagesizeChange"
        ref="comTable"
        :table-option="tableOption"
        :page-option="pageOption"
        :table-h="tableH"
      >
        <template #is_open="record">
          <!-- 0:禁用; 1:启用 -->
          <span>{{ ['禁用', '启用'][record.is_open] }}</span>
        </template>
        <template #permission="record">
          <!-- 0:禁用; 1:启用 -->
          <span>{{record.permission.map(item=>item.name).toString() }}</span>
        </template>

        <template #action="record">
          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
      </TreeTable>
    </div>
    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
      <!-- action:edit add -->
      <EditCom
        :record="record"
        @operateForm="operateForm"
        type="permission"
        :action="formStatus"
      ></EditCom>
    </a-modal>
  </div>
</template>

<script>
import { columnList, permissionOptions } from '../../../public/config/columnList'
import { getReq, postReq } from '@/request/api.js'

import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
export default {
  name: '',
  components: {
  
  },
  props: {},
  data() {
    return {
      formModal: false,
      formState: {},
      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
      pageOption: {
        pageSize: 10,
        page: 1
      },
      btnOptionList: [],
      paramsDate: {}
    }
  },
  computed: {},
  created() {
    let info = []
    let col = columnList.find((i) => i.page == 'permission').columns
    if (col.length) {
      col.forEach((item) => {
        info.push(this.$setWidth(item))
      })
    }
    this.columns = info
  },

  mounted() {
    this.operateList = this.$getBtns(['查看'])
    // this.btnOptionList = this.$getBtns()
    this.getList()
  },

  methods: {
    async getList() {
      this.$refs.comTable.loading = true

      const { page, pageSize } = this.pageOption

      const params = {
        ...this.paramsDate,
        page_size: pageSize,
        page
      }

      try {
        const res = await getReq('/queryPermissionList', params)
        if (res.errcode === 0) {
          this.$refs.comTable.loading = false

          this.tableData = res.data

          this.pageOption = {
            page: res.page,
            pageSize: res.page_size,
            count: res.count
          }
        } else {
          const err = { tip: res.errmsg }
          throw err
        }
      } catch (error) {
        //统一处理报错提示
      }
    },
    operateForm(type, record = {}) {
      console.log(record,record.id,'rrrrrrrrrr')
      this.formStatus = type
      switch (type) {
      // case 'add':
      //   this.formModal = true
      //   this.formState = {}
      //   this.getRuleFormInfo()

      //   break
      // case 'edit':
      // case 'read':
      //   this.formModal = true
      //   this.formState = record
      //   this.getRuleFormInfo(record)
      //   break
    
      case 'del':
        // this.handleDelete([record.permission_id],this.getList)

        break

      case 'back':
        this.formModal = false
        this.getList()
        break

      default:
        break
      }
    },
    //  删除操作
    async handleDelete(id,callback) {
      const that = this
      Modal.confirm({
        title: '你确认删除数据吗?',
        icon: createVNode(ExclamationCircleOutlined),

        async onOk() {
          try {
            const res = await getReq('/deletepermission',{permission_id:id})
            if (res.errcode === 0) {
              this.$message.success(res.errmsg)
              this.pageOption.page=1
              callback()
            } else {
              throw res
            }
          } catch (error) {
            callback()
          }
        },
        onCancel() {
          // console.log("Cancel");
        },
        class: 'test'
      })
    },
    async getRuleFormInfo(record) {
      function getInfo(data, url) {
        return new Promise((reslove, reject) => {
          getReq(data, url).then((res) => {
            reslove(res.data)
          })
        })
      }

      let row = {}
      if (record && record.permission_id) {
        // row = await getInfo({ id: record.id },'/querypermissionList')
        this.record = record
        row = record
        // this.type='edit'
      }
      permissionOptions.forEach((e, index) => {
        e.list.forEach((i) => {
          
          e.ruleForm[i.key] = row ? row[i.key] : ''
          e.ruleForm.id = row.id
        })
      })
    },
    handlePagesizeChange(pageOption) {
      this.pageOption.pageSize = pageOption.pageSize
      this.pageOption.page = pageOption.page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.permission {
  height: 100%;

  .content-table {
    height: calc(100% - 70px);
    padding: 10px;
  }
}
</style>