feat: 素材管理页面接口对接

src/api/interactVideo/sourceMaterialManage.js

@@ -0,0 +1,32 @@
+import request from "@/utils/request";
+
+// 查询素材库列表
+export function getLibraryList(params) {
+  return request({
+    url: "/business/library/list",
+    method: "get",
+    params,
+  });
+}
+// 素材详情
+export function getLibraryDetail(materialId) {
+  return request({
+    url: `/business/library/${materialId}`,
+    method: "get",
+  });
+}
+// 新增素材
+export function libraryAdd(data) {
+  return request({
+    url: "/business/library",
+    method: "post",
+    data,
+  });
+}
+// 删除素材
+export function libraryDelete(materialIds) {
+  return request({
+    url: `/business/library/${materialIds}`,
+    method: "delete",
+  });
+}

src/views/interactVideo/sourceMaterialManage/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件 -->
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="素材名称" prop="materialName">
+        <el-input
+          v-model="queryParams.materialName"
+          placeholder="请输入素材名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 操作按钮 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
+      </el-col>
+    </el-row>
+    <!-- 列表 -->
+    <el-table
+      border
+      v-loading="loading"
+      :data="libraryList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="100" align="center" />
+      <el-table-column type="index" label="序号" width="100" align="center" />
+      <el-table-column prop="materialName" label="素材名称" align="center" />
+      <!-- 素材类型,0-视频、1-图片 -->
+      <el-table-column prop="materialType" label="素材类型" align="center">
+        <template #default="{ row }">
+          {{ libraryType[row.materialType] }}
+        </template>
+      </el-table-column>
+      <!-- 0=未发布,1=发布 -->
+      <el-table-column prop="status" label="状态" align="center">
+        <template #default="{ row }">
+          {{ libraryStatus[row.status] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="{ row }">
+          <el-button type="primary" icon="Edit" link @click="handleUpdate(row)"
+            >编辑</el-button
+          >
+          <el-button type="danger" icon="Delete" link @click="handleDelete(row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 新增编辑素材 -->
+    <el-dialog
+      :title="dialogTitle"
+      v-model="materialOpen"
+      width="800"
+      append-to-body
+    >
+      <el-form
+        v-loading="detailLoading"
+        :model="form"
+        ref="dataForm"
+        :rules="rules"
+        label-width="100"
+      >
+        <el-form-item label="素材名称" prop="materialName">
+          <el-input v-model="form.materialName" placeholder="请输入素材名称" />
+        </el-form-item>
+        <el-form-item label="素材类型" prop="materialType">
+          <el-select v-model="form.materialType" placeholder="请选择素材类型">
+            <el-option :value="0" label="视频" />
+            <el-option :value="1" label="图片" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="素材文件">
+          <el-upload
+            ref="uploadRef"
+            action=""
+            :file-list="form.fileList"
+            :on-change="uploadChange"
+            :on-remove="uploadRemove"
+            :auto-upload="false"
+            :limit="1"
+          >
+            <template #trigger>
+              <el-button type="primary">选择文件</el-button>
+            </template>
+            <template #tip>
+              <div class="el-upload__tip">仅支持上传图片或视频文件</div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            type="primary"
+            :loading="confirmLoading"
+            @click="dialogSubmit"
+            >确 定</el-button
+          >
+          <el-button :loading="confirmLoading" @click="dialogCancel"
+            >取 消</el-button
+          >
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SourceMaterialManage">
+import {
+  getLibraryList,
+  libraryAdd,
+  getLibraryDetail,
+  libraryDelete,
+} from "@/api/interactVideo/sourceMaterialManage";
+const { proxy } = getCurrentInstance();
+
+const loading = ref(false);
+const confirmLoading = ref(false);
+const detailLoading = ref(false);
+const libraryList = ref([]);
+const total = ref(0);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const dialogTitle = ref("新增素材");
+const materialOpen = ref(false);
+const data = reactive({
+  form: {
+    materialName: undefined,
+    materialType: undefined,
+    fileList: [],
+  },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    materialName: undefined,
+  },
+  rules: {
+    materialName: [
+      { required: true, message: "素材名称不能为空", trigger: "blur" },
+    ],
+    materialType: [
+      { required: true, message: "素材类型不能为空", trigger: "change" },
+    ],
+  },
+  libraryType: {
+    0: "视频",
+    1: "图片",
+  },
+  libraryStatus: {
+    0: "未发布",
+    1: "已发布",
+  },
+});
+const { queryParams, form, rules, libraryType, libraryStatus } = toRefs(data);
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.materialId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+getList();
+/** 查询视频列表 */
+function getList() {
+  loading.value = true;
+  getLibraryList(queryParams.value).then((response) => {
+    libraryList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const materialIds = row.materialId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除视频编号为"' + materialIds + '"的数据项?')
+    .then(function () {
+      return libraryDelete(materialIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+function handleAdd() {
+  form.value = {
+    materialName: undefined,
+    materialType: "0",
+    fileList: [],
+  };
+  dialogTitle.value = "新增素材";
+  materialOpen.value = true;
+}
+function handleUpdate(row) {
+  dialogTitle.value = "编辑素材";
+  materialOpen.value = true;
+  detailLoading.value = true;
+  getLibraryDetail(row.materialId)
+    .then((res) => {
+      form.value = {
+        materialName: res.data.materialName,
+        materialType: res.data.materialType,
+      };
+    })
+    .finally(() => {
+      detailLoading.value = false;
+    });
+}
+
+// 弹窗表单提交
+function dialogSubmit() {
+  const formData = new FormData();
+  proxy.$refs["dataForm"].validate((valid) => {
+    if (valid) {
+      confirmLoading.value = true;
+      console.log(form.value);
+      const { materialName, materialType, fileList } = form.value;
+      formData.append("materialName", materialName);
+      formData.append("materialType", materialType);
+      fileList.forEach((file) => {
+        formData.append("file", file.raw);
+      });
+      libraryAdd(formData)
+        .then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            proxy.$modal.msgSuccess("新增成功");
+            materialOpen.value = false;
+            getList();
+          }
+        })
+        .finally(() => {
+          confirmLoading.value = false;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  });
+}
+function dialogCancel() {
+  materialOpen.value = false;
+  confirmLoading.value = false;
+}
+
+// 文件上传回调
+function uploadChange(file) {
+  form.value.fileList.push(file);
+}
+
+function uploadRemove() {
+  form.value.fileList = [];
+}
+</script>