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 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 handleAdd = () => {
  proxy.setActiveMenu("/myAssets2/myProgram");
  router.push({
    path: "/assetsManage2/xcxZC-info",
    query: {
      pageType: "add",
      type: 1,
      queryData: formInline,
      name: "MyProgram",
    },
  });
};
const goInfo = (row, id) => {
  if (id === 1) {
    proxy.setActiveMenu("/myAssets2/myProgram");
    router.push({
      path: "/assetsManage2/xcxZC-info",
      query: {
        name: "MyProgram",
        pageType: "look",
        type: 1,
        id: row.id,
        queryData: formInline.value,
      },
    });
  } else if (id === 2) {
    proxy.setActiveMenu("/myAssets2/myProgram");
    router.push({
      path: "/assetsManage2/xcxZC-info",
      query: {
        name: "MyProgram",
        pageType: "change",
        type: 1,
        id: row.id,
        queryData: formInline.value,
      },
    });
  }
};

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