cxc/gen_short_link
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
cxc
2023-02-13 17:04:42 +08:00
parent 221c466bdb
commit 730a93c4d3
7 changed files with 67 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development Normal file
View File

@ -0,0 +1,8 @@
# 页面标题
#VITE_APP_TITLE = 楚桓会议系统
# 开发环境配置
VITE_APP_ENV = 'development'
# 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'

11
.env.production Normal file
View File

@ -0,0 +1,11 @@
# 页面标题
#VITE_APP_TITLE = 楚桓会议系统
# 生产环境配置
VITE_APP_ENV = 'production'
# 若依管理系统/生产环境
# VITE_APP_BASE_API = '/prod-api'
# VITE_APP_BASE_API = 'http://120.26.107.74:1618'
VITE_APP_BASE_API = '/api'

20
index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>生成短链接</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

10
src/api/shortlink.ts
View File

@ -6,20 +6,20 @@ export const listShortLink = (params: { pageNum: number; pageSize: number }) =>
request({ request({
method: "get", method: "get",
url: "/shortLink/list", url: "/shortLink/list",
params params,
}); });
export const addShortLink = (data: ShortLink) => export const addShortLink = (data: ShortLink) =>
request({ request({
method: "post", method: "post",
url: "/shortLink", url: "/shortLink",
data data,
}); });
export const updateShortLink = (data: ShortLink) => export const updateShortLink = (data: ShortLink) =>
request({ request({
method: "put", method: "put",
url: "/shortLink", url: "/shortLink",
data data,
}); });
export const getDetailById = (id: number) => export const getDetailById = (id: number) =>
request({ method: "get", url: `/shortLink/getInfo/${id}` }); request({ method: "get", url: `/shortLink/getInfo/${id}` });
@ -27,12 +27,12 @@ export const getDetailById = (id: number) =>
export const deleteShortLink = (ids: string) => export const deleteShortLink = (ids: string) =>
request({ request({
url: `/shortLink/${ids}`, url: `/shortLink/${ids}`,
method: "delete" method: "delete",
}); });
export const listLogList = (params: LogListParams) => export const listLogList = (params: LogListParams) =>
request({ request({
url: `/shortLink/getShortLinkLogList`, url: `/shortLink/getShortLinkLogList`,
method: "get", method: "get",
params params,
}); });

4
src/utils/request.ts
View File

@ -5,9 +5,9 @@ import { errorCode } from "@/utils/errorCode";
const service = axios.create({ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分 // axios中请求配置有baseURL选项，表示请求URL公共部分
// baseURL: import.meta.env.VITE_APP_BASE_API, baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时 // 超时
baseURL: "/dev-api", // baseURL: "/dev-api",
timeout: 100000, timeout: 100000,
}); });

56
src/views/GenShortLink.vue
View File

@ -3,7 +3,7 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button @click="handleAdd" type="primary" size="small" icon="plus" <el-button @click="handleAdd" type="primary" size="small" icon="plus"
>新增 >新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -13,7 +13,7 @@
type="danger" type="danger"
size="small" size="small"
:disabled="multiple" :disabled="multiple"
>批量删除 >批量删除
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
@ -37,7 +37,7 @@
<div> <div>
<a <a
class="short-link" class="short-link"
:href="`//${row.urlPrefix}/dlj/${row.urlSuffix}`" :href="`${row.urlPrefix}/dlj/${row.urlSuffix}`"
> >
{{ row.urlPrefix }}/dlj/{{ row.urlSuffix }} {{ row.urlPrefix }}/dlj/{{ row.urlSuffix }}
</a> </a>
@ -60,7 +60,7 @@
:style="{ :style="{
cursor: 'pointer', cursor: 'pointer',
}" }"
@click="copyToClipboard(row.jumpUrl)" @click="copyToClipboard(row)"
> >
<CopyDocument /> <CopyDocument />
</el-icon> </el-icon>
@ -96,21 +96,21 @@
link link
size="small" size="small"
type="warning" type="warning"
>编辑 >编辑
</el-button> </el-button>
<el-button <el-button
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
link link
size="small" size="small"
type="danger" type="danger"
>删除 >删除
</el-button> </el-button>
<el-button <el-button
@click="goLogList(row.urlSuffix)" @click="goLogList(row.urlSuffix)"
link link
size="small" size="small"
type="primary" type="primary"
>访问记录 >访问记录
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -174,14 +174,20 @@
width: '100%', width: '100%',
marginTop: '10px', marginTop: '10px',
}" }"
>下载二维码 >下载二维码
</el-button> </el-button>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup lang="ts" name="GenShortLink"> <script setup lang="ts" name="GenShortLink">
import { addShortLink, deleteShortLink, getDetailById, listShortLink, updateShortLink } from "@/api/shortlink"; import {
addShortLink,
deleteShortLink,
getDetailById,
listShortLink,
updateShortLink,
} from "@/api/shortlink";
import { reactive, ref, toRefs } from "vue"; import { reactive, ref, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import type { ShortLink } from "@/models/shortLink"; import type { ShortLink } from "@/models/shortLink";
@ -204,7 +210,7 @@ const data = reactive<{
}>({ }>({
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10,
}, },
form: {}, form: {},
rules: { rules: {
@ -212,31 +218,31 @@ const data = reactive<{
{ {
required: true, required: true,
message: "请输入短链接名称", message: "请输入短链接名称",
trigger: "blur" trigger: "blur",
} },
], ],
jumpUrl: [ jumpUrl: [
{ {
required: true, required: true,
message: "请输入短链接", message: "请输入短链接",
trigger: "blur" trigger: "blur",
} },
], ],
urlPrefix: [ urlPrefix: [
{ {
required: true, required: true,
message: "请输入URL前缀", message: "请输入URL前缀",
trigger: "blur" trigger: "blur",
} },
], ],
validityTime: [ validityTime: [
{ {
required: true, required: true,
message: "请选择过期时间", message: "请选择过期时间",
trigger: "change" trigger: "change",
} },
] ],
} },
}); });
const { form, queryParams, rules } = toRefs(data); const { form, queryParams, rules } = toRefs(data);
const total = ref<number>(0); const total = ref<number>(0);
@ -253,7 +259,7 @@ const handleShowQrCode = (data: ShortLink) => {
}; };
const goLogList = (suffix: string) => { const goLogList = (suffix: string) => {
router.push({ router.push({
path: `/log-list/${suffix}` path: `/log-list/${suffix}`,
}); });
}; };
const reset = () => { const reset = () => {
@ -286,8 +292,8 @@ const handleSelectionChange = (selection: ShortLink[]) => {
single.value = selection.length != 1; single.value = selection.length != 1;
multiple.value = !selection.length; multiple.value = !selection.length;
}; };
const copyToClipboard = (data: string) => { const copyToClipboard = (data: ShortLink) => {
navigator.clipboard.writeText(data); navigator.clipboard.writeText(`${data.urlPrefix}/dlj/${data.urlSuffix}`);
ElMessage.success("短链接已拷贝到剪贴板"); ElMessage.success("短链接已拷贝到剪贴板");
}; };
const handleAdd = () => { const handleAdd = () => {
@ -310,7 +316,7 @@ const handleDelete = (id?: string) => {
ids = linkIds.value.join(","); ids = linkIds.value.join(",");
} }
ElMessageBox.confirm("确认删除该短链接吗", "删除短链接", { ElMessageBox.confirm("确认删除该短链接吗", "删除短链接", {
type: "warning" type: "warning",
}).then(async () => { }).then(async () => {
await deleteShortLink(ids); await deleteShortLink(ids);
ElMessage.success("删除短链接成功"); ElMessage.success("删除短链接成功");
@ -377,7 +383,7 @@ getList();
margin-top: 20px; margin-top: 20px;
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
justify-content: end; justify-content: flex-end;
} }
} }
</style> </style>