视频标签功能

src/api/viedoTag/viedoManagement.ts

@@ -0,0 +1,39 @@
+import request from '@/utils/request';
+// 查询
+export function getTagList(params?: any) {
+  return request({
+    url: '/api/videoResource/tag/list',
+    method: 'get',
+    params: params
+  });
+}
+// 详情
+export function getVideoTagInfo(dictCode) {
+  return request({
+    url: '/api/videoResource/tag/info/' + dictCode,
+    method: 'get'
+  });
+}
+// 新增
+export function createVideoTag(data) {
+  return request({
+    url: '/api/videoResource/tag/add',
+    method: 'post',
+    data: data
+  });
+}
+// 修改
+export function updateVideoTag(data, dictCode) {
+  return request({
+    url: '/api/videoResource/tag/update/' + dictCode,
+    method: 'put',
+    data: data
+  });
+}
+// 删除
+export function deleteVideoTag(dictCode: string) {
+  return request({
+    url: '/api/videoResource/tag/delete/' + dictCode,
+    method: 'delete'
+  });
+}

src/types/components.d.ts

@@ -27,14 +27,9 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -45,40 +40,19 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -89,8 +63,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/videoTag/videoAdd.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>{{ props.id ? '修改视频标签' : '新增视频标签' }}</div>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+          <el-form-item label="标签名称：" prop="dict_label">
+            <el-input v-model="form.dict_label" placeholder="请输入标签名称" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm(formRef)">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+import { createVideoTag, getVideoTagInfo, updateVideoTag } from '@/api/viedoTag/viedoManagement';
+const emits = defineEmits(['close']);
+const props = defineProps({
+  id: String
+});
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { show_status, material_category_level } = toRefs<any>(proxy?.useDict('show_status', 'material_category_level'));
+const formRef = ref();
+const buttonLoading = ref(false);
+
+// 表单数据
+const data = reactive({
+  form: {
+    dict_label: ''
+  },
+  rules: {
+    dict_label: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+const closeDialog = () => {
+  emits('close');
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (props.id) {
+        updateVideoTag(form.value, props.id).then(() => {
+          proxy.$modal.msgSuccess('修改成功');
+          emits('close', true);
+        });
+      } else {
+        createVideoTag(form.value).then(() => {
+          proxy.$modal.msgSuccess('新增成功');
+          emits('close', true);
+        });
+      }
+    } else {
+      nextTick(() => {
+        let isError = document.getElementsByClassName('is-error');
+        isError[0].scrollIntoView({
+          // 滚动到指定节点
+          // 值有start,center,end，nearest，当前显示在视图区域中间
+          block: 'center',
+          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
+          behavior: 'smooth'
+        });
+      });
+      proxy.$modal.msgError('表单校验失败');
+      return false;
+    }
+  });
+};
+
+onMounted(() => {
+  if (!props.id) return;
+  getVideoTagInfo(props.id).then((res) => {
+    form.value = res.data;
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  span {
+    white-space: nowrap;
+  }
+}
+</style>

src/views/videoTag/viedoManagement.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div v-show="!videoAddState.show" class="app-container">
+      <div>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="Plus" @click="handleAdd">新建</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete(selectedRow)"> 删除 </el-button>
+          </el-col>
+        </el-row>
+        <!-- 表格组件 -->
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="视频标签" align="center" prop="dictLabel" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
+              <el-text class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.page"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="fetchWorkrData"
+        />
+      </div>
+    </div>
+    <VideoAdd v-if="videoAddState.show" :event-id="videoAddState.eventId" @close="handleCancel" @refresh="fetchWorkrData" />
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import { to } from 'await-to-js';
+import VideoAdd from '@/views/videoTag/videoAdd.vue';
+import { getTagList } from '@/api/viedoTag/viedoManagement';
+const loading = ref(true);
+const showSearch = ref(true);
+const multiple = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const total = ref(0);
+const tableData = ref([]);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const initFormData = reactive({
+  dictcode: '',
+  dictLabel: ''
+});
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10,
+    dictLabel: ''
+  }
+});
+const { queryParams, form } = toRefs(data);
+let videoAddState = reactive({
+  show: false,
+  eventId: ''
+});
+const handleCancel = () => {
+  videoAddState.show = false;
+};
+
+const handleAdd = () => {
+  videoAddState.show = true;
+};
+const handleUpdate = (row) => {
+  if (row) {
+    videoAddState.eventId = row.dictcode + '';
+    videoAddState.show = true;
+  }
+};
+const handleDelete = async (row) => {
+  let id = [];
+  if (row) {
+    id = [row.dictcode];
+  } else {
+    id = ids.value;
+  }
+  const [err] = await to(proxy?.$modal.confirm('此标签已被摄像头使用，是否确认删除？') as any);
+  if (!err) {
+    await workDelete(id);
+    proxy.$modal.msgSuccess('删除成功');
+    fetchWorkrData();
+  }
+};
+const fetchWorkrData = () => {
+  loading.value = true;
+  getTagList(queryParams.value)
+    .then((res) => {
+      tableData.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.dictcode);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+onMounted(() => {
+  fetchWorkrData();
+});
+</script>