ele-usky-admin/src/views/tenantManage/adminConfig/index.vue

<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div>
          <a class="" style="margin-right: 30px">管理员配置列表</a>
        </div>
      </div>

      <div class="right">
        <!-- <el-button type="primary">全部导出</el-button>
        <el-button type="primary">导出</el-button> -->
        <!-- <el-button
          type="primary"
          @click="DataReportExport()"
          :disabled="store.state.authorities.indexOf('导出') == -1"
        >
          导出
        </el-button> -->
      </div>
    </div>

    <div class="filter-container mb-10">
      <div style="margin-top: 20px">
        <div class="filter-item">
          租户名称：
          <el-input
            v-model="tenantName"
            placeholder="请输入内容"
            style="width: 130px"
            :disabled="store.state.authorities.indexOf('查询') == -1"
          ></el-input>
        </div>
        <div class="filter-item">
          负责人：
          <el-input
            v-model="tenantManager"
            placeholder="请输入内容"
            style="width: 150px"
            :disabled="store.state.authorities.indexOf('查询') == -1"
          ></el-input>
        </div>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="Select()"
          class="search-button"
          :disabled="store.state.authorities.indexOf('查询') == -1"
        >
          查询
        </el-button>
      </div>
    </div>

    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column type="index" label="序号" width="50px"></el-table-column>
      <el-table-column prop="tenantName" label="租户名称"></el-table-column>
      <el-table-column prop="tenantManager" label="负责人"></el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="负责人手机号"
      ></el-table-column>
      <el-table-column prop="systemName" label="系统平台"></el-table-column>
      <el-table-column prop="tenantType" label="管理员信息">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="checkAdminList(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            @click="adminConfig(scope.row)"
            type="text"
            size="small"
            style="color: #409eff"
          >
            配置管理员
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        v-model:currentPage="page"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      ></el-pagination>
    </div>

    <!-- 分页end -->

    <!--管理员信息组件开始-----------------------start-->
    <checkAdmin-list
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
      :show_Dialog="showDialog"
    ></checkAdmin-list>
    <!--管理员信息组件开始-----------------------end-->

    <!-- 管理员配置组件开始  新增修改 -->
    <admin-Dialog
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeNo="closeNo"
      :show_dialog2="showDialog2"
      :DialogArray="DialogArray"
    ></admin-Dialog>

    <!-- 管理员配置组件end -->
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import CheckAdminList from './component/checkAdminList'
import adminDialog from './component/adminDialog.vue'
import * as api from '@/api/tenantManage/adminConfig.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'VariableList',

  components: { CheckAdminList, adminDialog },
  setup() {
    const store = useStore()

    const tableItem = ref()
    const dialogTitle = ref('')
    const showDialog = ref(false)

    const tableData = ref()
    const currentPage = ref(1)
    const pageSize = ref(15)
    const total = ref(0)

    const status = ref('')
    const tenantType = ref('')
    const tenantName = ref('')
    const tenantManager = ref('')

    const dateTime = ref('')

    const input = ref('')
    const region = ref()

    const DialogArray = ref([])
    const showDialog2 = ref(false)

    //查询设备列表
    function Select() {
      store.commit('TimeAll_function', dateTime.value)
      api
        .getTenantDataOne({
          size: pageSize.value,
          page: currentPage.value,
          tenantName: tenantName.value,
          tenantManager: tenantManager.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            tableData.value = requset.data.records.map((val) => {
              store.commit('getTimestampAll', val.startTime)
              val.startTime = store.state.timeProcessing
              store.commit('getTimestampAll', val.endTime)
              val.endTime = store.state.timeProcessing
              store.commit('getTimestampAll', val.createTime)
              val.createTime = store.state.timeProcessing
            })
            tableData.value = requset.data.records
            total.value = requset.data.total
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    // 管理员信息列表页弹框
    const checkAdminList = (row) => {
      console.log(row)
      tableItem.value = {
        tenantId: row.id,
      }
      dialogTitle.value = '管理员信息'
      showDialog.value = true
    }

    //管理员配置(新增操作)
    const adminConfig = (row) => {
      tableItem.value = {
        tenantId: row.id,
        status:0
      }
      DialogArray.value = row
      dialogTitle.value = '配置管理员'
      showDialog2.value = true
    }

    // 关闭操作
    const closeDialog = (flag) => {
      if (flag) {
        // 重新刷新表格内容
        // this.fetchData()
        console.log(1)
      }
      showDialog.value = false
      Select()
    }

    //管理员配置弹窗关闭
    const closeNo = (value) => {
      showDialog2.value = value
    }

    onMounted(() => {
      Select()
    })

    const handleSizeChange = (val) => {
      pageSize.value = val
      Select()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      Select()
    }

    // 表头样式设置
    const goVariableList = () => {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    }
    const headClass = () => {
      return 'background:#FAFAFA;'
    }
    //处理状态状态值变色
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex
      // console.log(row, column, rowIndex)

      if (columnIndex) {
        // return `text-align:left;cursor:pointer;`
      } else {
        return ''
      }
    }

    //导出
    const DataReportExport = () => {
      store.commit('TimeAll_function', dateTime.value)
      const time = store.state.Time_Data
      api
        .outagePlanListExport({
          type: region.value,
          startTime: time[0] ? time[0] : '',
          endTime: time[1] ? time[1] : '',
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            window.location.href = process.env.VUE_APP_FILE_URL + requset.data
            ElMessage.success({
              message: '导出成功',
              type: 'success',
            })
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    return {
      cellStyle,
      headClass,
      goVariableList,

      closeDialog,
      checkAdminList,
      Select,

      store,

      total,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,

      tenantType,
      tableData,
      tenantName,
      tenantManager,
      status,

      showDialog,
      dateTime,
      tableItem,
      dialogTitle,
      input,
      region,

      DataReportExport,

      DialogArray,
      showDialog2,

      adminConfig, //管理员配置按钮事件
      closeNo, //管理员配置弹窗关闭事件
    }
  },
})
</script>

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