TcAssetvue3/src/views/unitAutonomicFill/index.vue

<!-- 单位自主填报2 -->
<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="formInlineRef"
        :model="pagination"
        size="default"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="资产名称："
              prop="name"
            >
              <el-input
                v-model="pagination.name"
                placeholder="请输入"
                style="width: 95%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="所属单位："
              prop="dwmc"
            >
              <el-input
                v-model="pagination.dwmc"
                placeholder="请输入"
                style="width: 95%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="审核状态："
              prop="auditState"
            >
              <el-select
                v-model="pagination.auditState"
                placeholder="请选择审核状态"
              >
                <el-option
                  label="待审核"
                  value="1"
                />
                <el-option
                  label="审核通过"
                  value="2"
                />
                <el-option
                  label="审核驳回"
                  value="3"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            style="text-align: right"
          >
            <el-form-item class="unit-form">
              <el-button @click="resetQuery('queryFrom')">重置</el-button>
              <el-button
                type="primary"
                @click="handleQuery('queryFrom')"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <main>
      <div class="search-title">
        <el-row class="mb8">
          <el-col>
            <div class="exportBtn">
              <div
                class="mybuttom"
                :class="btnShow == item.value ? 'mybuttomshow' : ''"
                v-for="(item, index) in btnArr"
                @click="xuanzelist(item)"
              >
                {{ item.label }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <section>
        <el-table
          v-loading="loading"
          :data="tableData"
          :height="tabHeader"
          :max-height="tabHeader"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="index"
            width="70"
            label="序号"
            align="center"
          />
          <el-table-column
            label="资产名称"
            key="xtmc"
            prop="xtmc"
            align="center"
            v-if="btnShow == 'web'"
          />
          <el-table-column
            label="所属单位"
            key="dwmc"
            prop="dwmc"
            align="center"
            v-if="btnShow == 'web'"
          />
          <el-table-column
            label="资产名称"
            key="xcxmc"
            prop="xcxmc"
            align="center"
            v-if="btnShow == 'xcx'"
          />
          <el-table-column
            label="资产名称"
            key="gzhmc"
            prop="gzhmc"
            align="center"
            v-if="btnShow == 'gzh'"
          />
          <el-table-column
            label="资产名称"
            key="dzyxhz"
            prop="dzyxhz"
            align="center"
            v-if="btnShow == 'emil'"
          />
          <el-table-column
            label="资产名称"
            key="appName"
            prop="appName"
            align="center"
            v-if="btnShow == 'app'"
          />
          <el-table-column
            label="所属单位"
            key="ssdw"
            prop="ssdw"
            align="center"
            v-if="btnShow !== 'web'"
          />
          <el-table-column
            label="平台类型"
            key="ptlx"
            prop="ptlx"
            align="center"
            v-if="btnShow == 'gzh'"
          >
            <template #default="{ row }">
              <dict-tag
                :options="sys_ptlx_type"
                :value="row.ptlx"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="审核状态"
            key="auditState"
            width="200px"
            prop="auditState"
            class-name="table-status"
            align="center"
          >
            <template #default="{ row }">
              <span
                v-if="row.auditState == 1"
                style="color: #f58a0c"
              >
                待审核
              </span>
              <span
                v-if="row.auditState == 2"
                style="color: #16b771"
              >
                审批通过
              </span>
              <span
                v-if="row.auditState == 3"
                style="color: #f50c0c"
              >
                审批驳回
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="userId"
            class-name="table-operation"
            align="center"
          >
            <template #default="{ row }">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div
                  style="display: flex; align-items: center; cursor: pointer"
                  @click="goInfo(row)"
                >
                  <img
                    src="@/assets/images/icon-ck@2x.png"
                    style="width: 20px; margin-right: 5px"
                  />
                  <span style="color: #1485ef">查看</span>
                </div>

                <div
                  v-if="row.auditState == 1"
                  style="
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  @click="delInfo(row)"
                >
                  <img
                    src="@/assets/images/icon-shenhe@2x.png"
                    style="width: 15px; margin-right: 5px"
                  />
                  <span style="color: #1485ef">审批</span>
                </div>
                <div
                  v-if="row.auditState == 3"
                  style="
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  @click="lookInfo(row)"
                >
                  <img
                    src="@/assets/images/icon-shenhe@2x.png"
                    style="width: 15px; margin-right: 5px"
                  />
                  <span style="color: #1485ef">驳回原因</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <my-pagination
        id="L-pagination"
        :total="total"
        :page="pagination.current"
        :limit="pagination.size"
        @pagination="getPagination"
        :current-page.sync="pagination.current"
      ></my-pagination>
      <!-- <my-dialog title="查看原因" ref="liebiaoDialog" class="taskDialogBox" width="40%">
        <el-descriptions>
          <el-descriptions-item label="不通过原因">
            {{ chakanyuanyin }}
          </el-descriptions-item>
        </el-descriptions>
      </my-dialog> -->
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import myPagination from "@/views/components/Pagination/index.vue"
import {
  getAuditList,
  miniProgramsGetAuditList,
  gzhGetAuditList,
  EmailList,
  AppList,
} from "@/api/auditPagesApi/index.js";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { sys_ptlx_type } = proxy.useDict("sys_ptlx_type");

// 数据定义
const btnloading = ref(false);
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const tabHeader = ref(undefined);

const pagination = ref({
  current: 1,
  size: 10,
  name: "",
  dwmc: "",
  auditState: "",
});

const btnArr = [
  { label: "web资产", value: "web" },
  { label: "小程序", value: "xcx" },
  { label: "公众号", value: "gzh" },
  { label: "电子邮件", value: "emil" },
  { label: "移动应用系统", value: "app" },
];

const btnShow = ref("web");
const chakanyuanyin = ref("");

// 获取列表数据
const getInfo = (id) => {
  loading.value = true;
  let apiCall;
  switch (id) {
    case 1:
      apiCall = getAuditList;
      break;
    case 2:
      apiCall = miniProgramsGetAuditList;
      break;
    case 3:
      apiCall = gzhGetAuditList;
      break;
    case 4:
      apiCall = EmailList;
      break;
    case 5:
      apiCall = AppList;
      break;
    default:
      return;
  }

  apiCall(pagination.value)
    .then((res) => {
      loading.value = false;
      total.value = res.data.total;
      tableData.value = res.data.records;
    })
    .catch(() => {
      loading.value = false;
      ElMessage.error("获取数据失败");
    });
};

// 重置查询
const resetQuery = () => {
  pagination.value = {
    current: 1,
    size: 10,
    name: "",
    dwmc: "",
    auditState: "",
  };
  const typeMap = {
    web: 1,
    xcx: 2,
    gzh: 3,
    emil: 4,
    app: 5,
  };
  getInfo(typeMap[btnShow.value]);
};

// 查询
const handleQuery = () => {
  pagination.value.current = 1;
  const typeMap = {
    web: 1,
    xcx: 2,
    gzh: 3,
    emil: 4,
    app: 5,
  };
  getInfo(typeMap[btnShow.value]);
};

// 分页处理
const getPagination = (pages) => {
  pagination.value.current = pages.page;
  pagination.value.size = pages.limit;
  const typeMap = {
    web: 1,
    xcx: 2,
    gzh: 3,
    emil: 4,
    app: 5,
  };
  getInfo(typeMap[btnShow.value]);
};

// 查看详情
const goInfo = (row) => {
  const typeMap = {
    web: 0,
    xcx: 1,
    gzh: 2,
    emil: 3,
    app: 4,
  };

  const idMap = {
    web: row.currentId,
    xcx: row.miniId,
    gzh: row.accountId,
    emil: row.emailId,
    app: row.appId,
  };

  router.push({
    name: "unitAssetsAuth",
    query: {
      type: typeMap[btnShow.value],
      pageType: "look",
      btnShow: btnShow.value,
      id: idMap[btnShow.value],
      queryData: JSON.stringify(pagination.value),
      name: "UnitFill",
    },
  });
};

// 审批跳转
const delInfo = (row) => {
  const typeMap = {
    web: 0,
    xcx: 1,
    gzh: 2,
    emil: 3,
    app: 4,
  };

  const idMap = {
    web: row.currentId,
    xcx: row.miniId,
    gzh: row.accountId,
    emil: row.emailId,
    app: row.appId,
  };

  router.push({
    name: "unitAssetsAuth",
    query: {
      type: typeMap[btnShow.value],
      pageType: "change",
      btnShow: btnShow.value,
      id: idMap[btnShow.value],
      queryData: JSON.stringify(pagination.value),
      name: "UnitFill",
    },
  });
};

// 切换 Tab
const xuanzelist = (item) => {
  btnShow.value = item.value;
  const typeMap = {
    web: 1,
    xcx: 2,
    gzh: 3,
    emil: 4,
    app: 5,
  };
  getInfo(typeMap[item.value]);
};

// 查看驳回原因
const lookInfo = (row) => {
  chakanyuanyin.value = row.auditYy;
  // 假设你有自定义 Dialog 组件，调用 open 方法
  // liebiaoDialog.value.open()
};

// 表格行样式
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 paginationEl = document.getElementById("L-pagination");
  if (!element || !header || !paginationEl) return;
  const elementHeight = element.offsetHeight;
  const headerHeight = header.offsetHeight;
  const paginationtHeight = paginationEl.offsetHeight;
  tabHeader.value = elementHeight - headerHeight - paginationtHeight - 140;
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener("resize", cancalDebounce);
  const fromPath = route.query.from;
  if (fromPath === "/unitAssetsAuth") {
    const query = route.query;
    btnShow.value = query.btnShow || "web";
    if (query.queryData) {
      pagination.value = JSON.parse(query.queryData);
    }
    const typeMap = {
      web: 1,
      xcx: 2,
      gzh: 3,
      emil: 4,
      app: 5,
    };
    getInfo(typeMap[btnShow.value]);
  } else {
    getInfo(1);
  }
});

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

<style lang="scss" scoped>
.el-icon-s-unfold {
  font-size: 16px;
}

// ::v-deep .el-dialog__body{
//   padding-left: 80px;
// }
.el-icon-delete {
  color: #409eff;
  font-size: 16px;
  font-weight: 600;
  margin-right: 5px;
}
.exportBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.mybuttom {
  margin: 0 10px;
  display: inline-block;
  padding: 5px 20px;
  // background-color: rgba(30, 128, 235, 0.1);
  background-color: rgba(213, 225, 236, 0.1);
  border-radius: 8px;
  border: 1px solid #1e80eb;
  font-size: 14px;
  color: #1e80eb;
  font-family: Source Han Sans CN;
  cursor: pointer;

  &:hover {
    background-color: #1e80eb;
    color: #ffffff;
    border: 1px solid #1e80eb;
  }
}
.mybuttomshow {
  background-color: #1e80eb;
  color: #ffffff;
  border: 1px solid #1e80eb;
}
</style>