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

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

    <div class="content-table">
      <ComTable
        :columns="columns"
        :table-data="tableData"
        @handlePagesizeChange="handlePagesizeChange"
        ref="comTable"
        :table-option="tableOption"
        :page-option="pageOption"
        :table-h="tableH"
      >
       <template #gender="record">
        <!-- 0:女; 1:男 -->
          <span>{{ ['女', '男'][record.gender] }}</span>
        </template>
    
        <template #action="record">
          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
    </ComTable>
    </div>

    </div>
</template>

<script>
import { columnList } from '../../../public/config/columnList'
import { mapState } from 'vuex'
import { getReq, postReq } from '@/request/api.js'
import ComTable from '@/components/ComTable'
import OperateCom from '@/components/OperateCom'

import searchBox from '@/components/SearchBox.vue'
export default {
  name: '',
  components: {
    searchBox,
    ComTable,
    OperateCom
  },
  props: {},
  data() {
    return {
      pageOption:{},
      btnOptionList: [],
      paramsDate:{
       
      }
    }
  },
  computed: {
    ...mapState(['page', 'detailType', 'type'])
  },
  created() {
    let info = []
    let col = columnList.find((i) => i.page == 'user').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('/api/queryUserList',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 = {}) {
      switch (type) {
      case 'detail':
        this.$store.commit('updateState', {
          detailType: 'edit', //edit or view
          page: 'detail',
          title: '查看',
          type: 'user'
        })

       

        this.getRuleFormInfo(record)
        break

      case 'back':
        this.$store.commit('updateState', {
          page: 'main'
        })
        this.isShowFlag = false
        this.getList()
        break

      default:
        break
      }
    },
    async getRuleFormInfo(record) {
      function getInfo(data, url) {
        return new Promise((reslove, reject) => {
          getReq(data, url).then((res) => {
            reslove(res.data)
          })
        })
      }

      let row = {}
      if (record.id) {
        row = await getInfo({ id: record.id }, this.apiMethods[0].get)
        this.record = row
        this.$store.commit('updateState', {
          // 配电柜-集中器-查看
          title:
            (row.cabinetName ? row.cabinetName + '-' : '') +
            (row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
            '集中器-查看'
        })
      }
      let connectorType
      cabinetOptions.forEach((e, index) => {
        e.list.forEach((i) => {
          if (index == 1) {
            // 集中器状态
            if (i.key == 'ctrMode' || i.key == 'powerStatus') {
              e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
            } else {
              e.ruleForm[i.key] = row.deviceStatus[i.key]
            }
          } else if (i.key == 'connectorType') {
            connectorType = row.deviceExtend[i.key]
            e.ruleForm[i.key] = row.deviceExtend[i.key]
          } else {
            e.ruleForm[i.key] = row ? row[i.key] : ''
            e.ruleForm.id = row.id
          }
        })
      })

      // C型控制器，手自动状态和故障状态显示为“无”
      if (connectorType == 1) {
        cabinetOptions[1].ruleForm.status = 5
        cabinetOptions[1].ruleForm.ctrMode = 5
      }
      this.isShowFlag = true
    },
    handlePagesizeChange(pageOption) {
      this.pageOption.pageSize = pageOption.pageSize
      this.pageOption.page = pageOption.page

      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>