|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <div class="artifacts-layout">
|
|
|
+ <div class="artifacts-header">
|
|
|
+ <div class="search">
|
|
|
+
|
|
|
+ <div class="action-group">
|
|
|
+ <el-button type="primary" @click="addHandler">
|
|
|
+ 新增文物
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="artifacts-content">
|
|
|
+ <el-table :data="relicsArray" border>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="文物名称"
|
|
|
+ v-slot:default="{ row }: { row: Relics }"
|
|
|
+ >
|
|
|
+<!-- <a class="link" @click="shareHandler(row)">-->
|
|
|
+<!-- -->
|
|
|
+<!-- </a>-->
|
|
|
+ <TexToolTip :text="row.name"/>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="unicode"
|
|
|
+ label="时代"
|
|
|
+ v-slot:default="{ row }: { row: Relics }"
|
|
|
+ >
|
|
|
+ <TexToolTip :text="row.unicode" v-if="row.unicode"/>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="文物级别" v-slot:default="{ row }: { row: Relics }">
|
|
|
+ <TexToolTip :text="relicsLevelDesc[row.level!]"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="类别" v-slot:default="{ row }: { row: Relics }">
|
|
|
+ <TexToolTip :text="relicsTypeDesc[row.category!]"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="文物地址" v-slot:default="{ row }: { row: Relics }">
|
|
|
+ <TexToolTip :text="row.address"/>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="创建时间" v-slot:default="{ row }">
|
|
|
+ <TexToolTip :text="row.createTime.substr(0, 16)" v-if="row.createTime"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="userName" label="创建人账号" v-slot:default="{ row }">
|
|
|
+ <TexToolTip :text="row.userName"/>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" width="240" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+
|
|
|
+ <el-button link type="primary" size="small" @click="editHandler(row)">
|
|
|
+ 编辑
|
|
|
+ </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, watch} from "vue";
|
|
|
+import {
|
|
|
+ relicsPageFetch,
|
|
|
+ RelicsPageProps,
|
|
|
+ delRelicsFetch,
|
|
|
+ updateRelicsFetch,
|
|
|
+} from "@/request";
|
|
|
+import {
|
|
|
+ Relics,
|
|
|
+ relicsLevelDesc,
|
|
|
+ relicsTypeDesc,
|
|
|
+ creationMethodDesc,
|
|
|
+} from "@/store/relics";
|
|
|
+import {COORD_NAME, router} from "@/router";
|
|
|
+import {ElMessageBox} from "element-plus";
|
|
|
+import {relicsEdit, addArtifacts} from "./quisk";
|
|
|
+import TexToolTip from "@/components/tex-tooltip.vue";
|
|
|
+import {debounce} from "@/util";
|
|
|
+import {QUERY_COORD_NAME} from "@/router";
|
|
|
+
|
|
|
+
|
|
|
+const initProps: RelicsPageProps = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+};
|
|
|
+const pageProps = ref({...initProps});
|
|
|
+const total = ref<number>(0);
|
|
|
+const relicsArray = ref<Relics[]>([]);
|
|
|
+
|
|
|
+const refresh = debounce(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_COORD_NAME, 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 () => {
|
|
|
+ await addArtifacts({
|
|
|
+ submit: async (data) => {
|
|
|
+
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const editHandler = async (relics: Relics) => {
|
|
|
+ await relicsEdit({
|
|
|
+ relics,
|
|
|
+ submit: async (data) => {
|
|
|
+ await updateRelicsFetch(data);
|
|
|
+ await refresh();
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+watch(pageProps, refresh, {deep: true, immediate: true});
|
|
|
+onActivated(refresh);
|
|
|
+
|
|
|
+const handleAddArtifact = () => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.artifacts-layout {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 30px;
|
|
|
+
|
|
|
+ .action-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pag-layout {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.artifacts-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .artifacts-oper {
|
|
|
+ flex: 0 0 100px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|