视频标签管理

xiangpei

2025-05-14 7b8486eea75293a6701fec93d2a4f4c2bdf3625b

视频标签管理

 README.md

@@ -2,7 +2,8 @@

该项目使用开源项目进行二开，仓库地址：https://github.com/lilishop?tab=repositories


# UI库
该项目使用的iview，https://v4.iviewui.com/components/button

# 项目结构


 manager/src/api/videoTag.js

New file
@@ -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
    })
}

 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();

 manager/src/views/video-tag/VideoTagList.vue

New file
@@ -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>