TcAssetvue3/src/views/myAssets/myEmail/index.vue

<template>
  <div class="L-main" id="L-size-main">
    <div class="content-search" id="L-header">
      <div class="search-title">查询条件</div>
      <el-form
        :inline="true"
        ref="queryFormRef"
        :model="formInline"
        size="medium"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="电子邮箱后缀：" prop="dzyxhz">
              <el-input
                v-model="formInline.dzyxhz"
                placeholder="请输入电子邮箱后缀"
                style="width: 95%;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="邮件系统状态：" prop="xtzt">
              <el-select
                v-model="formInline.xtzt"
                placeholder="请选择邮件系统状态"
              >
                <el-option
                  v-for="dict in email_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align: right">
            <el-form-item class="unit-form">
              <el-button size="mini" @click="resetQuery">重置</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleQuery"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <main>
      <div class="search-title">
        <span class="search-title-span">资产列表</span>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              :icon="Download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              :icon="Plus"
              size="mini"
              @click="handleAdd"
              >新增资产</el-button
            >
          </el-col>
        </el-row>
      </div>
      <section>
        <el-table
          v-loading="loading"
          :data="tableData"
          :height="tabHeader"
          :row-class-name="tableRowClassName"
          :max-height="tabHeader"
        >
          <el-table-column
            type="index"
            width="60"
            label="序号"
            align="center"
          />
          <el-table-column
            label="所属单位"
            key="ssdw"
            prop="ssdw"
            align="center"
          />
          <el-table-column
            label="电子邮箱后缀"
            key="dzyxhz"
            prop="dzyxhz"
            align="center"
          />
          <el-table-column
            label="邮件系统供应商"
            key="yjxtgys"
            prop="yjxtgys"
            align="center"
          />
          <el-table-column
            label="新增时间"
            key="createTime"
            prop="createTime"
            align="center"
          />
          <el-table-column
            label="邮件系统状态"
            key="status"
            prop="status"
            class-name="table-status"
            align="center"
          >
            <template #default="scope">
              <span v-if="scope.row.yjxtzc == 1" style="color: #16b771">
                正常
              </span>
              <span v-if="scope.row.yjxtzc == 2" style="color: #f58a0c">
                停用
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="userId"
            class-name="table-operation"
            align="center"
          >
            <template #default="scope">
              <div style="display: flex; align-items: center; justify-content: center;">
                <div style="display: flex; align-items: center; cursor: pointer" @click="goInfo(scope.row, 1)">
                  <img src="@/assets/images/icon-ck@2x.png" alt="" style="width: 20px; margin-right: 5px" />
                  <span class="look-info" style="color: #1485ef; margin-right: 15px">查看</span>
                </div>
                <div
                  v-if="!scope.row.auditState || scope.row.auditState == 2"
                  style="display: flex; align-items: center; cursor: pointer"
                  @click="goInfo(scope.row, 2)"
                >
                  <img src="@/assets/images/edit.png" alt="" style="width: 15px; margin-right: 5px" />
                  <span class="look-info" style="color: #1485ef; margin-right: 15px">编辑</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <my-pagination
        id="L-pagination"
        :total="total"
        :page="formInline.current"
        :limit="formInline.size"
        @pagination="getPagination"
        v-model:current-page="formInline.current"
      ></my-pagination>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import myPagination from '@/views/components/Pagination/index.vue'
import { assetEmailList } from '@/api/auditPagesApi/index'
import { Download, Plus } from "@element-plus/icons-vue";

const route = useRoute()
const router = useRouter()

// 表单数据
const formInline = reactive({
  dzyxhz: '',
  xtzt: '',
  current: 1,
  size: 10
})

// 状态数据
const loading = ref(false)
const total = ref(0)
const tableData = ref([])
const tabHeader = ref(undefined)

// 字典数据
const { proxy } = getCurrentInstance();
const { email_state } = proxy.useDict(
  "email_state"
);


// 方法定义
const handleAdd = () => {
  router.push({
    name: 'myAssetsAuth',
    query: {
      pageType: 'add',
      type: 3,
      queryData: formInline,
      name: 'MyEmail'
    }
  })
}

const getList = async () => {
  loading.value = true
  try {
    const res = await assetEmailList(formInline)
    total.value = res.data.total
    tableData.value = res.data.records
  } finally {
    loading.value = false
  }
}

const resetQuery = () => {
  formInline.dzyxhz = ''
  formInline.xtzt = ''
  formInline.current = 1
  getList()
}

const handleQuery = () => {
  formInline.current = 1
  getList()
}

const getPagination = ({ page, limit }) => {
  formInline.current = page
  formInline.size = limit
  getList()
}

const handleExport = () => {
  console.log('导出数据:', formInline)
}

const goInfo = (row, id) => {
  router.push({
    name: 'myAssetsAuth',
    query: {
      pageType: id === 1 ? 'look' : 'change',
      type: 3,
      id: row.id,
      queryData: formInline,
      name: 'MyEmail'
    }
  })
}

const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 !== 0 ? 'evenNumber-row' : ''
}

const cancalDebounce = () => {
  const element = document.getElementById('L-size-main')
  const header = document.getElementById('L-header')
  const pagination = document.getElementById('L-pagination')

  if (element && header && pagination) {
    const elementHeight = element.offsetHeight
    const headerHeight = header.offsetHeight
    const paginationtHeight = pagination.offsetHeight
    tabHeader.value = elementHeight - headerHeight - paginationtHeight - 110
  }
}

onMounted(() => {
  if (Object.keys(route.params).length !== 0) {
    Object.assign(formInline, route.params)
  } else {
    formInline.current = 1
    formInline.size = 20
  }
  getList()
  cancalDebounce()
  window.addEventListener('resize', cancalDebounce)
})

onUnmounted(() => {
  window.removeEventListener('resize', cancalDebounce)
})
</script>