xps-web-v5/src/views/customer/ent/index.vue

<script lang="ts" setup name="EntIndex">
import { ElMessage, ElMessageBox } from 'element-plus'
import OcComponent from '../components/Oc.vue'
import OcAdminComponent from '../components/OcAdmin.vue'
import { deleteOcById, getOcByList, resetAdminPwd, updateLicStatus, updateStatus } from '@/api/system/ocApi'

const state = reactive({
  loading: false,
  // 表格是否自适应高度
  tableAutoHeight: false,
  // 搜索
  search: {
    ocTypeId: 2,
    keywords: '',
  },
  // 列表数据
  dataList: [],
  switch_state: false,
})

const ocRef = ref()

const getData = async () => {
  state.loading = true
  const { data } = await getOcByList(state.search)
  state.dataList = data
  state.loading = false
}

onMounted(() => {
  getData()
})

function onSearch() {
  getData()
}

function onOcAdd() {
  ocRef.value.showAddModel()
}

function onOcEdit(row: any) {
  const ocId = row.ocId
  ocRef.value.showEditModel(ocId)
}

function onOcDel(row: any) {
  ElMessageBox.confirm(`确认删除「${row.ocName}」吗？`, '确认信息').then(async () => {
    await deleteOcById(row.ocId)
    await getData()
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const ocAdminRef = ref()
// 添加管理员账号
function onAdminAdd(row: any) {
  const { ocId } = row
  ocAdminRef.value.showAddModel(ocId)
}

// 修改管理员账号
function onAdminEdit(row: any) {
  const { ocId } = row
  ocAdminRef.value.showEditModel(ocId)
}

// 状态变更
const onStatusChange = async (status: number, row: { ocId: number }) => {
  const { msg } = await updateStatus(row.ocId, status)
  ElMessage.success(msg)
}

// license状态变更
const onLicStatusChange = async (status: number, row: { ocId: number }) => {
  const { msg } = await updateLicStatus(row.ocId, status)
  ElMessage.success(msg)
}

function onPasswordReset(row: { ocId: number; adminId: number; adminName: string }) {
  ElMessageBox.confirm(`确认删除「${row.adminName}」吗？`, '确认信息').then(async () => {
    const { ocId, adminId } = row
    await resetAdminPwd(ocId, adminId)
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  }).catch(() => {})
}
</script>

<template>
  <div :class="{ 'absolute-container': state.tableAutoHeight }">
    <page-header title="企业单位管理" />

    <page-main>
      <tool-bar>
        <template #right>
          <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
          <el-button type="primary" @click="onSearch">
            <template #icon>
              <el-icon>
                <svg-icon name="i-ep:search" />
              </el-icon>
            </template>
          </el-button>

          <el-button size="default" @click.stop="onOcAdd">
            <template #icon>
              <el-icon>
                <svg-icon name="i-ep:plus" />
              </el-icon>
            </template>
          </el-button>
        </template>
      </tool-bar>
      <el-table v-loading="state.loading" class="list-table" :data="state.dataList" size="small" border stripe highlight-current-row height="100%">
        <el-table-column type="index" label="序号" width="60" header-align="center" align="center" />

        <el-table-column prop="ocName" label="名称" header-align="center" align="center" width="200">
          <template #default="scope">
            <span>{{ scope.row.ocName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="ocCatId" label="分类" header-align="center" align="center" width="250">
          <template #default="scope">
            <span>{{ scope.row.ocTypeTitle }}</span> - <span>{{ scope.row.ocCatTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column label="管理员账号" header-align="center" align="center" width="150">
          <template #default="scope">
            <div v-if="scope.row.isFixed !== 1">
              <el-tag v-if="scope.row.adminId > 0" @click="onAdminEdit(scope.row)">
                {{ scope.row.adminName }}
              </el-tag>
              <el-tag v-else @click="onAdminAdd(scope.row)">
                <i class="el-icon-plus" /> 管理员账号
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="License控制" width="120">
          <template #default="scope">
            <div>
              <el-switch
                v-model="scope.row.ifLic"
                :active-value="1"
                :inactive-value="0"
                :loading="scope.row.loading"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                @change="() => onLicStatusChange(scope.row.ifLic, scope.row)"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="状态" width="120">
          <template #default="scope">
            <div v-if="scope.row.isFixed !== 1">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                :loading="scope.row.loading"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                @change="() => onStatusChange(scope.row.status, scope.row)"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="ocRemark" label="备注" header-align="center" align="left">
          <template #default="scope">
            <span>{{ scope.row.ocRemark }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" header-align="center" align="center" width="160">
          <template #default="scope">
            <div>
              <el-button type="primary" size="small" plain @click="onOcEdit(scope.row)">
                编辑
              </el-button>
              <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onOcDel(scope.row)">
                删除
              </el-button>
              <el-button v-if="!scope.row.adminId > 0" type="danger" size="small" plain @click="onPasswordReset(scope.row)">
                重置管理员密码
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </page-main>
    <OcComponent ref="ocRef" :oc-type-id="state.search.ocTypeId" @success="getData" />
    <OcAdminComponent ref="ocAdminRef" @success="getData" />
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    margin-bottom: 0;
  }

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .search-container {
      margin-bottom: 0;
    }
  }
}
</style>