4pc/src/view/relics.vue

<template>
  <div class="relics-layout">
    <div class="relics-header">
      <div class="search">
        <el-form label-width="100px" inline>
          <el-form-item label="文物名称：">
            <el-input
              clearable
              v-model="pageProps.name"
              style="width: 250px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="文物级别：">
            <el-select style="width: 250px" v-model="pageProps.level" clearable>
              <el-option
                :value="Number(key)"
                :label="type"
                v-for="(type, key) in relicsLevelDesc"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类别：">
            <el-select style="width: 250px" v-model="pageProps.category" clearable>
              <el-option
                :value="Number(key)"
                :label="type"
                v-for="(type, key) in relicsTypeDesc"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="searh-btns">
            <el-button type="primary" @click="refresh">查询</el-button>
            <el-button type="primary" plain @click="pageProps = { ...initProps }">
              重置
            </el-button>
            <el-button type="primary" @click="addHandler">创建文物</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="relics-oper">
        <el-button type="primary" @click="inputMode = true">新增</el-button>
      </div> -->
    </div>

    <div class="relics-content">
      <el-table :data="relicsArray" border>
        <el-table-column
          prop="name"
          label="文物名称"
          v-slot:default="{ row }: { row: Relics }"
        >
          <a class="link" @click="shareHandler(row)">
            <TexToolTip :text="row.name" />
          </a>
        </el-table-column>

        <el-table-column prop="unicode" label="文物编号" />
        <el-table-column
          prop="name"
          label="文物级别"
          v-slot:default="{ row }: { row: Relics }"
        >
          {{ relicsLevelDesc[row.level!] }}
        </el-table-column>
        <el-table-column
          prop="name"
          label="类别"
          v-slot:default="{ row }: { row: Relics }"
        >
          {{ relicsTypeDesc[row.category!] }}
        </el-table-column>
        <el-table-column label="文物地址" v-slot:default="{ row }: { row: Relics }">
          <TexToolTip :text="row.address" v-if="row.address" />
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" v-slot:default="{ row }">
          {{ row.createTime && row.createTime.substr(0, 16) }}
        </el-table-column>
        <el-table-column prop="userName" label="创建人" />
        <el-table-column
          prop="creationMethod"
          label="创建方式"
          v-slot:default="{ row }: { row: Relics }"
        >
          {{ creationMethodDesc[row.creationMethod!] }}
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="shareHandler(row)">
              文物链接
            </el-button>
            <el-button link type="primary" size="small" @click="editHandler(row)">
              编辑
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="router.push({ name: 'map', params: { relicsId: row.relicsId } })"
            >
              数据提取
            </el-button>
            <el-button link type="danger" @click="delHandler(row.relicsId)" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pag-layout">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        v-model:page-size="pageProps.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="(data: number) => pageProps.pageNum = data"
        :current-page="pageProps.pageNum"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref, watchEffect } from "vue";
import {
  relicsPageFetch,
  RelicsPageProps,
  addRelicsFetch,
  delRelicsFetch,
  updateRelicsFetch,
} from "@/request";
import {
  Relics,
  relicsLevelDesc,
  relicsTypeDesc,
  creationMethodDesc,
} from "@/store/relics";
import { router } from "@/router";
import { ElMessageBox } from "element-plus";
import { relicsEdit } from "./quisk";
import TexToolTip from "@/components/tex-tooltip.vue";

const initProps: RelicsPageProps = {
  pageNum: 1,
  pageSize: 10,
};
const pageProps = ref({ ...initProps });
const total = ref<number>(0);
const relicsArray = ref<Relics[]>([]);

const refresh = async () => {
  const data = await relicsPageFetch(pageProps.value);
  total.value = data.total;
  relicsArray.value = data.records;
};

const delHandler = async (relicsId: number) => {
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    await delRelicsFetch(relicsId);
    await refresh();
  }
};
const getQueryRouteLocation = (row: Relics) =>
  router.resolve({ name: "query-map", params: { relicsId: row.relicsId } });

const shareHandler = async (row: Relics) => {
  const link = location.origin + location.pathname + getQueryRouteLocation(row).href;
  window.open(link);
  // await copyText(link);
  // await ElMessage.success("链接复制成功");
};

const addHandler = async () => {
  const a = await relicsEdit({
    submit: async (data) => {
      await addRelicsFetch(data);
      await refresh();
    },
  });
  console.log(a);
};

const editHandler = async (relics: Relics) => {
  await relicsEdit({
    relics,
    submit: async (data) => {
      await updateRelicsFetch(data);
      await refresh();
    },
  });
};
watchEffect(refresh);
onActivated(refresh);
</script>

<style scoped lang="scss">
.relics-layout {
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}
.pag-layout {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.relics-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .search {
    flex: 1;
  }
  .relics-oper {
    flex: 0 0 100px;
    text-align: right;
  }
}

.link {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>