TcAssetvue3/src/views/myAssets/myProgram/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="queryForm"
        :model="formInline"
        size="medium"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="小程序名称：" prop="xcxmc">
              <el-input
                v-model="formInline.xcxmc"
                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 gzh_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="text-align: right">
            <el-form-item class="unit-form">
              <el-button  @click="resetQuery">重置</el-button>
              <el-button
                
                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"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              :icon="Plus"
              @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="70"
            label="序号"
            align="center"
          />
          <el-table-column
            label="小程序名称"
            key="xcxmc"
            prop="xcxmc"
            align="center"
          />
          <el-table-column
            label="所属单位"
            key="ssdw"
            prop="ssdw"
            align="center"
          />
          <el-table-column
            label="小程序状态"
            key="state"
            prop="state"
            class-name="table-status"
            align="center"
          >
            <template #default="scope">
              <span v-if="scope.row.state == 1" style="color: #16b771">
                正常
              </span>
              <span v-if="scope.row.state == 2" style="color: #f58a0c">
                注销
              </span>
              <span v-if="scope.row.state == 3" style="color: #1485ef">
                迁移
              </span>
              <span v-if="scope.row.state == 4" style="color: #29a07a">
                受限
              </span>
              <span v-if="scope.row.state == 5" style="color: #f50c0c">
                违规
              </span>
              <span v-if="scope.row.state == 6" 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;
                    margin-left: 10px;
                  "
                  @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 myPagination from '@/views/components/Pagination/index.vue'
import { miniProgramsList } from '@/api/auditPagesApi/index'
import { Download, Plus } from "@element-plus/icons-vue";

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

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

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

const { proxy } = getCurrentInstance();
const { gzh_state } = proxy.useDict(
  "gzh_state"
);


// 操作函数
const handleAdd = () => {
  router.push({
    name: 'myAssetsAuth',
    query: {
      pageType: 'add',
      type: 1,
      queryData: formInline,
      name: 'MyProgram'
    }
  })
}

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

const resetQuery = () => {
  if (queryForm.value) {
    queryForm.value.resetFields()
  }
  handleQuery()
}

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: 1,
      id: row.id,
      queryData: formInline,
      name: 'MyProgram'
    }
  })
}

// 表格行样式
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>