From 7b8486eea75293a6701fec93d2a4f4c2bdf3625b Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期三, 14 五月 2025 09:28:25 +0800 Subject: [PATCH] 视频标签管理 --- manager/src/views/video-tag/VideoTagList.vue | 345 +++++++++++++++++++++++++++++++++++++++++++++++++ manager/src/api/videoTag.js | 61 ++++++++ manager/src/libs/axios.js | 5 README.md | 3 4 files changed, 412 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1e2a04b..361595d 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ 璇ラ」鐩娇鐢ㄥ紑婧愰」鐩繘琛屼簩寮�锛屼粨搴撳湴鍧�锛歨ttps://github.com/lilishop?tab=repositories - +# UI搴� +璇ラ」鐩娇鐢ㄧ殑iview锛宧ttps://v4.iviewui.com/components/button # 椤圭洰缁撴瀯 diff --git a/manager/src/api/videoTag.js b/manager/src/api/videoTag.js new file mode 100644 index 0000000..61d5323 --- /dev/null +++ b/manager/src/api/videoTag.js @@ -0,0 +1,61 @@ +import service from "@/libs/axios"; + +// 鑾峰彇瑙嗛鏍囩鍒嗛〉 +export const getVideoTags = (params) => { + return service({ + url: "/lmk/video-tag/page", + method: "GET", + params: params + }) +} + +// 鑾峰彇瑙嗛鏍囩鍒楄〃 +export const getVideoTagList = () => { + return service({ + url: "/lmk/video-tag/list", + method: "GET" + }) +} + +// 閫氳繃id鑾峰彇瑙嗛鏍囩 +export const getVideoTagById = (params) => { + return service({ + url: "/lmk/video-tag/" + params, + method: "GET" + }) +} + +// 閫氳繃id鍒犻櫎瑙嗛鏍囩 +export const deleteVideoTagById = (params) => { + return service({ + url: "/lmk/video-tag/" + params, + method: "DELETE" + }) +} + +// 鎵归噺鍒犻櫎瑙嗛鏍囩 +export const deleteVideoTagByIds = (params) => { + return service({ + url: "/lmk/video-tag/batch", + method: "DELETE", + data: params + }) +} + +// 淇敼瑙嗛鏍囩 +export const editVideoTag = (params) => { + return service({ + url: "/lmk/video-tag", + method: "PUT", + data: params + }) +} + +// 娣诲姞瑙嗛鏍囩 +export const addVideoTag = (params) => { + return service({ + url: "/lmk/video-tag", + method: "POST", + data: params + }) +} diff --git a/manager/src/libs/axios.js b/manager/src/libs/axios.js index f5ccf84..c6b3a39 100644 --- a/manager/src/libs/axios.js +++ b/manager/src/libs/axios.js @@ -21,7 +21,10 @@ const service = axios.create({ timeout: 8000, - baseURL: managerUrl + baseURL: managerUrl, + headers: { + accessToken: getStore("accessToken") + }, }); var isRefreshToken = 0; const refreshToken = getTokenDebounce(); diff --git a/manager/src/views/video-tag/VideoTagList.vue b/manager/src/views/video-tag/VideoTagList.vue new file mode 100644 index 0000000..2408b7b --- /dev/null +++ b/manager/src/views/video-tag/VideoTagList.vue @@ -0,0 +1,345 @@ +<template> + <div> + <Card> + <Form + ref="searchForm" + @keydown.enter.native="handleSearch" + :model="searchForm" + inline + :label-width="70" + class="search-form" + > + <Form-item label="鏍囩鍚嶇О" prop="tagName"> + <Input + type="text" + v-model="searchForm.tagName" + clearable + style="width: 160px" + /> + </Form-item> + <Form-item label="鏍囩鏉ユ簮" prop="createType"> + <Select + v-model="searchForm.createType" + clearable + style="width: 160px" + > + <Option value="SYSTEM">绯荤粺鍒涘缓</Option> + <Option value="USER">鐢ㄦ埛鍒涘缓</Option> + </Select> + </Form-item> + <Button + @click="handleSearch" + type="primary" + icon="ios-search" + class="search-btn" + >鎼滅储</Button + > + </Form> + + <Row class="operation padding-row"> + <Button @click="openAdd" type="info">娣诲姞</Button> + <Button @click="delBatch" type="error">鎵归噺鍒犻櫎</Button> + </Row> + + <Modal + v-model="modelShow" + :title="modelTitle" + > + <Form ref="form" :model="form" :label-width="70" :rules="rules"> + <FormItem label="鏍囩鍚嶇О" prop="tagName"> + <Input v-model="form.tagName" autocomplete="off"/> + </FormItem> + </Form> + <div slot="footer"> + <Button type="text" @click="modelClose">鍙栨秷</Button> + <Button type="primary" :loading="submitLoading" @click="saveOrUpdate">鎻愪氦</Button> + </div> + </Modal> + + <Table + :loading="loading" + border + :columns="columns" + :data="data" + ref="table" + sortable="custom" + @on-sort-change="changeSort" + @on-selection-change="showSelect" + > + <template slot-scope="{ row, index }" slot="action"> + <Button type="info" size="small" style="margin-right: 5px" @click="openEdit()">缂栬緫</Button> + <Button type="error" size="small" @click="delById(row)">鍒犻櫎</Button> + </template> + </Table> + + <Row type="flex" justify="end" class="mt_10"> + <Page + :current="searchForm.pageNumber" + :total="total" + :page-size="searchForm.pageSize" + @on-change="changePage" + @on-page-size-change="changePageSize" + :page-size-opts="[10, 20, 50]" + size="small" + show-total + show-elevator + show-sizer + ></Page> + </Row> + </Card> + </div> +</template> + +<script> +import JsonExcel from "vue-json-excel"; +import {deleteVideoTagById, getVideoTags, editVideoTag, addVideoTag, deleteVideoTagByIds} from "@/api/videoTag"; +export default { + name: "VideoTagList", + components: { + "download-excel": JsonExcel, + }, + data() { + return { + // 淇濆瓨鍔犺浇 + submitLoading: false, + // 鏂板淇敼琛ㄥ崟 + form: { + id: '', + tagName: '', + createType: 'SYSTEM' + }, + rules: { + tagName: [ + {required: true, message: "鏍囩鍚嶇О涓嶈兘涓虹┖", trigger: "blur"} + ], + }, + modelShow: false, // 寮圭獥鏄鹃殣 + modelTitle: '', // 寮圭獥title + // 琛ㄦ牸鐨勮〃澶翠互鍙婂唴瀹� + fields: { + 鏍囩: "tagName", + 鏍囩鏉ユ簮: "createType", + 寮曠敤娆℃暟: "useNum", + 鎿嶄綔: "action" + }, + loading: true, // 琛ㄥ崟鍔犺浇鐘舵�� + searchForm: { + // 鎼滅储妗嗗垵濮嬪寲瀵硅薄 + pageNumber: 1, // 褰撳墠椤垫暟 + pageSize: 10, // 椤甸潰澶у皬 + tagName: '', // 鏍囩鍚嶇О + createType: '', // 鍒涘缓鏂瑰紡 + + }, + selectDate: null, + columns: [ + { + type: 'selection', + width: 60, + align: 'center' + }, + { + title: "鏍囩", + key: "tagName", + minWidth: 240, + tooltip: true, + }, + + { + title: "鏍囩鏉ユ簮", + key: "createType", + width: 120, + }, + { + title: "寮曠敤娆℃暟", + key: "useNum", + width: 170, + sortable: true + }, + { + title: "鎿嶄綔", + key: "action", + slot: "action", + align: "center", + width: 200, + }, + ], + data: [], // 琛ㄥ崟鏁版嵁 + total: 0, // 琛ㄥ崟鏁版嵁鎬绘暟 + selectCount: 0, // 宸查�夋暟閲� + selectList: [], // 宸查�夋暟鎹垪琛� + }; + }, + methods: { + showSelect(e) { + this.selectList = e.map(d => d.id); + this.selectCount = e.length; + }, + // 鎺掑簭 + changeSort(e) { + this.searchForm.sort = e.key; + this.searchForm.order = e.order; + if (e.order == "normal") { + this.searchForm.order = ""; + } + this.getDataList(); + }, + // 鎵归噺鍒犻櫎 + delBatch() { + if (this.selectCount <= 0) { + this.$Message.warning("鎮ㄨ繕鏈�夋嫨瑕佸垹闄ょ殑鏁版嵁"); + return; + } + this.$Modal.confirm({ + title: "纭鍒犻櫎", + content: "鎮ㄧ‘璁よ鍒犻櫎鎵�閫夌殑 " + this.selectCount + " 鏉℃暟鎹�?", + loading: true, + onOk: () => { + deleteVideoTagByIds(this.selectList).then(res => { + this.$Modal.remove(); + if (res.code == 200) { + this.$Message.success("鍒犻櫎鎴愬姛"); + this.selectList = []; + this.selectCount = 0; + this.getDataList(); + } + }); + } + }); + }, + // id鍒犻櫎 + delById(row) { + this.$Modal.confirm({ + title: "纭鍒犻櫎", + content: "鎮ㄧ‘璁よ鍒犻櫎鏍囩锛� " + row.tagName + " ?", + loading: true, + onOk: () => { + deleteVideoTagById(row.id).then(res => { + this.$Modal.remove(); + if (res.code == 200) { + this.$Message.success("鍒犻櫎鎴愬姛"); + this.getDataList(); + } + }); + } + }); + }, + // 鎵撳紑鏂板 + openAdd() { + this.modelTitle = "鏂板鏍囩" + this.modelShow = true + }, + // 鎵撳紑淇敼 + openEdit(row) { + this.modelTitle = "淇敼鏍囩" + this.form.id = row.id + this.form.tagName = row.tagName + this.modelShow = true + }, + // 鏂板鎴栦慨鏀� + saveOrUpdate() { + this.$refs.form.validate(valid => { + if (valid) { + this.submitLoading = true + if (this.form.id) { + // 淇敼 + editVideoTag(this.form).then(res => { + if (res.code == 200) { + this.$Message.success("淇敼鎴愬姛"); + this.modelClose() + this.getDataList() + } + }) + } else { + // 鏂板 + addVideoTag(this.form).then(res => { + if (res.code == 200) { + this.$Message.success("娣诲姞鎴愬姛"); + this.modelClose() + this.getDataList() + } + }) + } + } + }); + }, + // 鍏抽棴寮圭獥 + modelClose() { + this.submitLoading = false + this.modelShow = false + }, + // 鍒濆鍖栨暟鎹� + init() { + this.getDataList(); + }, + // 鍒嗛〉 鏀瑰彉椤电爜 + changePage(v) { + this.searchForm.pageNumber = v; + this.getDataList(); + }, + // 鍒嗛〉 鏀瑰彉椤垫暟 + changePageSize(v) { + this.searchForm.pageNumber = 1; + this.searchForm.pageSize = v; + this.getDataList(); + }, + // 鎼滅储 + handleSearch() { + this.searchForm.pageNumber = 1; + this.searchForm.pageSize = 10; + this.getDataList(); + }, + // 璧锋鏃堕棿浠庢柊璧嬪�� + selectDateRange(v) { + if (v) { + this.searchForm.startDate = v[0]; + this.searchForm.endDate = v[1]; + } + }, + // 鑾峰彇鍒楄〃鏁版嵁 + getDataList() { + this.loading = true; + getVideoTags(this.searchForm).then((res) => { + console.log(res) + this.loading = false; + if (res.code == 200) { + this.data = res.data; + this.total = res.total; + } + }); + this.total = this.data.length; + this.loading = false; + }, + }, + mounted() { + this.init(); + }, +}; +</script> +<style lang="scss" scoped> +.export { + margin: 10px 20px 10px 0; +} +.export-excel-wrapper { + display: inline; +} +.order-tab { + width: 950px; + height: 36px; + display: flex; + align-items: center; + justify-content: space-between; + background-color: #f0f0f0; + padding: 0 10px; + margin-bottom: 10px; + div { + text-align: center; + padding: 4px 12px; + border-radius: 4px; + cursor: pointer; + } + .current { + background-color: #ffffff; + } +} +</style> -- Gitblit v1.8.0