TcAssetvue3/src/views/assetsManage2/gzhZC/index.vue

<!-- 资产管理 -- 公众号 -->
<template>
  <el-row
    :gutter="20"
    style="height: 100%; background-color: #f2f4f6; display: flex"
  >
    <!--部门数据-->
    <el-col
      :span="3"
      :xs="24"
      style="
        margin-right: 10px;
        height: 100%;
        background-color: #fff;
        padding-top: 20px;
      "
    >
      <div class="head-container">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>
    <el-col
      :span="20"
      :xs="24"
      style="height: 100%; flex: 1"
    >
      <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="size"
            class="demo-form-inline"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item
                  label="所属单位："
                  prop="dwmc"
                >
                  <el-input
                    v-model="formInline.dwmc"
                    style="width: 95%"
                    placeholder="请输入所属单位"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="公众号名称："
                  prop="gzhmc"
                >
                  <el-input
                    v-model="formInline.gzhmc"
                    placeholder="请输入公众号名称"
                    style="width: 95%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="新增时间："
                  prop="time"
                >
                  <el-date-picker
                    v-model="time"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="请选择"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                  <!-- <el-date-picker
                    v-model="time"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="请选择"
                  /> -->
                </el-form-item>
              </el-col>
              <el-col
                :span="4"
                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="info"
                  plain
                  :icon="Upload"
                  size="medium"
                  @click="handleImport"
                  >导入</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  :icon="Download"
                  size="medium"
                  @click="handleExport"
                  >导出</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  :icon="Plus"
                  size="medium"
                  @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="gzhmc"
                prop="gzhmc"
                align="center"
              >
                <template #default="{ row }">
                  <span :style="{ color: row.xzType == 1 ? 'blue' : '' }">
                    {{ row.gzhmc }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="所属单位"
                key="ssdw"
                prop="ssdw"
                align="center"
              />
              <el-table-column
                label="新增时间"
                key="createTime"
                prop="createTime"
                align="center"
              />
              <el-table-column
                label="平台类型"
                key="ptlx"
                prop="ptlx"
                align="center"
              >
                <template #default="scope">
                  <dict-tag
                    :options="sys_ptlx_type"
                    :value="scope.row.ptlx"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="公众号状态"
                key="status"
                prop="status"
                class-name="table-status"
                align="center"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.gzhzt == 1"
                    style="color: #16b771"
                  >
                    正常
                  </span>
                  <span
                    v-if="scope.row.gzhzt == 2"
                    style="color: #f58a0c"
                  >
                    注销
                  </span>
                  <span
                    v-if="scope.row.gzhzt == 3"
                    style="color: #1485ef"
                  >
                    迁移
                  </span>
                  <span
                    v-if="scope.row.gzhzt == 4"
                    style="color: #29a07a"
                  >
                    受限
                  </span>
                  <span
                    v-if="scope.row.gzhzt == 5"
                    style="color: #f50c0c"
                  >
                    违规
                  </span>
                  <span
                    v-if="scope.row.gzhzt == 6"
                    style="color: #f58a0c"
                  >
                    未知
                  </span>
                  <span
                    v-if="scope.row.gzhzt == 6"
                    style="color: #f58a0c"
                  >
                    关停
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                prop="userId"
                class-name="table-operation"
                align="center"
                width="250"
              >
                <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
                      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
                      style="
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                      "
                      @click="goInfo(scope.row, 3)"
                    >
                      <img
                        src="@/assets/images/del.png"
                        alt=""
                        style="width: 20px; margin-right: 5px"
                      />
                      <span
                        class="look-info"
                        style="color: #f50c0c; 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"
            :current-page.sync="formInline.current"
          />
        </main>
        <!-- 资产导入对话框 -->
        <el-dialog
          :title="upload.title"
          v-model="upload.open"
          width="400px"
          append-to-body
        >
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip text-center">
                <span>仅允许导入xls、xlsx格式文件。</span>
                <el-link
                  type="primary"
                  :underline="false"
                  style="font-size: 12px; vertical-align: baseline"
                  @click="importTemplate"
                  >下载模板</el-link
                >
              </div>
            </template>
          </el-upload>
          <template #footer>
            <div class="dialog-footer">
              <el-button
                type="primary"
                @click="submitFileForm"
                >确 定</el-button
              >
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getToken } from "@/utils/auth";
import { Upload, Download, Plus } from "@element-plus/icons-vue";
import {
  assetOfficialAccountList,
  deleteAssetOfficialAccount,
  schema,
} from "@/api/auditPagesApi/index";
import myPagination from "@/views/components/Pagination/index.vue";

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

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

// 部门树选项
const deptOptions = ref(undefined);
const defaultProps = reactive({
  children: "children",
  label: "label",
});

const formInline = reactive({
  gzhmc: "",
  dwmc: "",
  startTime: "",
  endTime: "",
  current: 1,
  size: 10,
  deptId: undefined,
});

const time = ref([]);
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const tabHeader = ref(undefined);
const tree = ref(null);
const queryForm = ref(null);
const uploadRef = ref(null);

// 用户导入参数
const upload = reactive({
  open: false,
  title: "公众号资产导入",
  isUploading: false,
  updateSupport: 0,
  headers: { Authorization: "Bearer " + getToken() },
  url:
    import.meta.env.VITE_APP_HJ === "test"
      ? import.meta.env.VITE_APP_BASE_API +
        "/tc/assetOfficialAccount/importData"
      : location.origin + "/api/tc/assetOfficialAccount/importData",
});


// 生命周期钩子
onMounted(() => {
  if (Object.keys(route.params).length !== 0) {
    Object.assign(formInline, route.params);
  } else {
    formInline.current = 1;
    formInline.size = 20;
  }
  getList();
  getDeptTree();
  cancalDebounce();
  window.addEventListener("resize", cancalDebounce);

});

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

// 方法
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
  try {
    const response = await schema({ type: 2 });
    deptOptions.value = response.data;
  } catch (error) {
    console.error("获取部门树失败:", error);
  }
};

// 筛选节点
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

// 节点单击事件
const handleNodeClick = (data) => {
  formInline.deptId = data.id;
  handleQuery();
};

// 获取列表
const getList = async () => {
  try {
    loading.value = true;
    const res = await assetOfficialAccountList(formInline);
    tableData.value = res.data.records;
    total.value = res.data.total;
  } catch (error) {
    console.error("获取列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 重置
const resetQuery = () => {
  queryForm.value.resetFields();
  time.value = [];
  formInline.deptId = undefined;
  tree.value.setCurrentKey(null);
  handleQuery();
};

// 查询
const handleQuery = () => {
  formInline.current = 1;
  if (time.value) {
    formInline.startTime = time.value[0];
    formInline.endTime = time.value[1];
  }
  getList();
};

// 页码获取
const getPagination = (pages) => {
  formInline.current = pages.page;
  formInline.size = pages.limit;
  getList();
};
/** 取消按钮 */
function cancel() {
  upload.open = false;
}
// 导入
const handleImport = () => {
  upload.open = true;
};

// 导出
function handleExport() {
  proxy.download("/tc/assetOfficialAccount/export", {
    ...formInline.value,
  },`公众号资产${new Date().getTime()}.xlsx`)
};

/** 下载模板操作 */
const importTemplate = () => {
  proxy.download(
    "/tc/assetOfficialAccount/importTemplate",
    {},
    `公众号资产导入模板${new Date().getTime()}.xlsx`
  );
};

// 文件上传中处理
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

// 文件上传成功处理
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  uploadRef.value.clearFiles();
  ElMessageBox.alert(
    `<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>${response.msg}</div>`,
    "导入结果",
    { dangerouslyUseHTMLString: true }
  );
  getList();
};

// 提交上传文件
const submitFileForm = () => {
  uploadRef.value.submit();
};

// 新增资产
const handleAdd = () => {
  proxy.setActiveMenu("/assetsManage2/gzhZC");
  router.push({
    path: "/assetsManage2/gzhZC-info",
    query: {
      pageType: "add",
      type: 2,
      parentName: "/assetsManage2/gzhZC",
    },
  });
};

// 查看详情
const goInfo = (row, id) => {
  proxy.setActiveMenu("/assetsManage2/gzhZC");
  if (id === 1) {
    router.push({
      path: "/assetsManage2/gzhZC-info",
      query: {
        pageType: "look",
        type: 2,
        id: row.id,
        queryData: formInline,
        parentName: "/assetsManage2/gzhZC",
      },
    });
  } else if (id === 2) {
    proxy.setActiveMenu("/assetsManage2/gzhZC");
    router.push({
      path: "/assetsManage2/gzhZC-info",
      query: {
        pageType: "change",
        type: 2,
        id: row.id,
        queryData: formInline,
        parentName: "/assetsManage2/gzhZC",
      },
    });
  } else if (id === 3) {
    const userIds = row.id;
    ElMessageBox.confirm(`是否确认删除用户编号为"${userIds}"的数据项？`)
      .then(() => deleteAssetOfficialAccount(userIds))
      .then(() => {
        getList();
        ElMessage.success("删除成功");
      })
      .catch(() => {});
  }
};

// 修改table背景色
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 !== 0) {
    return "evenNumber-row";
  }
  return "";
};

// 屏幕尺寸变化
const cancalDebounce = () => {
  const element = document.getElementById("L-size-main");
  const header = document.getElementById("L-header");
  const pagination = document.getElementById("L-pagination");
  const elementHeight = element?.offsetHeight || 0;
  const headerHeight = header?.offsetHeight || 0;
  const paginationtHeight = pagination?.offsetHeight || 0;
  tabHeader.value = elementHeight - headerHeight - paginationtHeight - 110;
};
</script>