feat: 增加素材分类

src/api/interactVideo/sourceType.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询菜单列表
+export function listSourceType(query) {
+    return request({
+        url: '/business/type/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询菜单详细
+export function getSourceType(id) {
+    return request({
+        url: '/business/type/' + id,
+        method: 'get'
+    })
+}
+
+// 查询菜单下拉树结构
+export function treeselect() {
+    return request({
+        url: '/business/type',
+        method: 'get'
+    })
+}
+
+// 新增菜单
+export function addSourceType(data) {
+    return request({
+        url: '/business/type',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改菜单
+export function updateSourceType(data) {
+    return request({
+        url: '/business/type',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除菜单
+export function delSourceType(id) {
+    return request({
+        url: '/business/type/' + id,
+        method: 'delete'
+    })
+}

src/views/interactVideo/components/typeDialog.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-dialog
+      v-model="dialogVisible"
+      :title="title"
+      width="40%"
+      :before-close="handleClose"
+  >
+    <el-form
+        ref="formRef"
+        label-width="auto"
+        label-position="right"
+        :model="form"
+        :rules="rules"
+    >
+      <el-form-item label="目录编码" prop="assetDirectoryCode">
+        <el-input v-model="form.assetDirectoryCode"/>
+      </el-form-item>
+      <el-form-item label="目录名称" prop="assetDirectoryName">
+        <el-input v-model="form.assetDirectoryName"/>
+      </el-form-item>
+      <el-form-item label="父级目录" prop="parentId" v-if="form.parentId !== 0">
+        <el-tree-select
+            v-model="form.parentId"
+            :data="dataOption"
+            :default-expanded-keys="[form.parentId]"
+            :default-checked-keys="[form.parentId]"
+            :props="{ label: 'assetDirectory', children: 'childList' }"
+            :render-after-expand="false"
+            check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="父级目录" prop="parentId" v-else/>
+      <el-form-item label="是否启用" prop="enable">
+        <el-switch
+            v-model="form.enable"
+            active-value="0"
+            inactive-value="1"
+        />
+      </el-form-item>
+      <el-form-item label="是否必填" prop="required">
+        <el-switch
+            v-model="form.required"
+            active-value="1"
+            inactive-value="0"
+        />
+      </el-form-item>
+      <el-form-item label="是否应用到资产目录" prop="applied">
+        <el-switch
+            v-model="form.applied"
+            active-value="1"
+            inactive-value="0"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+            v-model="form.remark"
+            type="textarea"
+            :autosize="{ minRows: 2 }"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span slot-scope="scope">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="confirmHandle(formRef)">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watchEffect, computed } from 'vue';
+import { FormRules, FormInstance, ElMessage } from 'element-plus';
+import { menuClass, Tree } from '@api/dataGovernance/dataAssets/types';
+import { addAssetDirectoryList, editAssetDirectoryList } from '@api/dataGovernance/dataAssets/index';
+
+const props = defineProps({
+  title: String,
+  dialogVisible: Boolean,
+  isAdd: Boolean,
+  formData: {
+    type: Object,
+    default: () => ({
+      enable: '0',
+      required: '0',
+      applied: '0'
+    })
+  },
+  option: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const dataOption = ref(props.option);
+
+const rules = reactive<FormRules>({
+  assetDirectoryCode: [[{ required: true, message: '请输入', trigger: 'blur' }]],
+  assetDirectoryName: [[{ required: true, message: '请输入', trigger: 'blur' }]]
+});
+
+const formRef = ref<FormInstance>({})
+
+const form = ref<MenuClass>(props.formData);
+
+const emit = defineEmits(['closeDialog', 'update:dialogVisible']);
+
+const handleClose = () => {
+  form.value = { ...props.formData };
+  emit('closeDialog');
+};
+
+const confirmHandle = async () => {
+  if (!formRef.value.validate()) return;
+  formRef.value.validate().then(valid => {
+    if (valid) {
+      if (props.isAdd) {
+        addAssetDirectoryList(form.value).then(res => {
+          if (res.success) {
+            ElMessage({ type: 'success', message: '操作成功' });
+            emit('closeDialog');
+          } else {
+            ElMessage.error(res.message);
+          }
+        });
+      } else {
+        editAssetDirectoryList(form.value).then(res => {
+          if (res.success) {
+            ElMessage({ type: 'success', message: '操作成功' });
+            emit('closeDialog');
+          } else {
+            ElMessage.error(res.message);
+          }
+        });
+      }
+    }
+  });
+};
+
+watchEffect(() => {
+  if (props.dialogVisible) {
+    dataOption.value = props.option;
+    form.value = props.formData;
+  }
+});
+
+
+</script>

src/views/interactVideo/sourceMaterialManage/index.vue

@@ -1,117 +1,133 @@
 <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
+    <div style="display:flex;">
+      <el-card style="width: 300px;margin-right: 20px">
+        <el-tree
+            ref="treeRef"
+            :data="treeData"
+            :props="{
+              label: 'name',
+              value: 'name',
+              children: 'childs'
+            }"
+            @node-click="handleNodeClick"
+        ></el-tree>
+      </el-card>
+      <el-card style="width: 100%">
+        <el-form
+            :model="queryParams"
+            ref="queryRef"
+            :inline="true"
+            label-width="68px"
         >
-      </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"
-      @sort-change="sortChange"
-    >
-      <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>
-      <el-table-column
-        prop="createTime"
-        label="创建时间"
-        align="center"
-        sortable="custom"
-      />
-      <!-- 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-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-button
-            type="primary"
-            link
-            @click="handlepreview(row)"
-            v-if="row.materialType == 0"
-            >视频预览</el-button
-          >
-          <el-button
-            type="primary"
-            link
-            @click="handleViewPic(row)"
-            v-if="row.materialType == 1"
-            >图片预览</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-col>
+        </el-row>
+        <!-- 列表 -->
+        <el-table
+            border
+            v-loading="loading"
+            :data="libraryList"
+            @selection-change="handleSelectionChange"
+            @sort-change="sortChange"
+        >
+          <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>
+          <el-table-column
+              prop="createTime"
+              label="创建时间"
+              align="center"
+              sortable="custom"
+          />
+          <!-- 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
+              >
+              <el-button
+                  type="primary"
+                  link
+                  @click="handlepreview(row)"
+                  v-if="row.materialType == 0"
+              >视频预览</el-button
+              >
+              <el-button
+                  type="primary"
+                  link
+                  @click="handleViewPic(row)"
+                  v-if="row.materialType == 1"
+              >图片预览</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-card>
+    </div>
+    <!-- 查询条件 -->
     <!-- 新增编辑素材 -->
     <el-dialog
       :title="dialogTitle"
@@ -129,6 +145,16 @@
         <el-form-item label="素材名称" prop="materialName">
           <el-input v-model="form.materialName" placeholder="请输入素材名称" />
         </el-form-item>
+        <el-form-item label="素材分类名称">
+          <el-tree-select
+              v-model="form.materialLibraryType"
+              :data="treeData"
+              :props="{ value: 'id', label: 'name', children: 'childs' }"
+              value-key="id"
+              placeholder="选择上级素材分类"
+              check-strictly
+          />
+        </el-form-item>
         <el-form-item label="素材类型" prop="materialType">
           <el-select v-model="form.materialType" placeholder="请选择素材类型">
             <el-option :value="0" label="视频" />
@@ -206,6 +232,7 @@ import {
   libraryDelete,
   libraryUpdate,
 } from "@/api/interactVideo/sourceMaterialManage";
+import {listSourceType} from "@/api/interactVideo/sourceType.js";
 const { proxy } = getCurrentInstance();
 
 const loading = ref(false);
@@ -226,10 +253,12 @@ const data = reactive({
   form: {
     materialName: undefined,
     materialType: undefined,
+    materialLibraryType: undefined,
     fileList: [],
   },
   queryParams: {
     orderByColumn: "m.create_time",
+    materialLibraryType: undefined,
     isAsc: "desc",
     pageNum: 1,
     pageSize: 10,
@@ -292,6 +321,7 @@ function handleQuery() {
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
+  queryParams.value.materialLibraryType = undefined
   handleQuery();
 }
 /** 删除按钮操作 */
@@ -345,9 +375,10 @@ function dialogSubmit() {
   proxy.$refs["dataForm"].validate((valid) => {
     if (valid) {
       confirmLoading.value = true;
-      const { materialName, materialType, fileList = [] } = form.value;
+      const { materialName, materialType, fileList = [], materialLibraryType } = form.value;
       formData.append("materialName", materialName);
       formData.append("materialType", materialType);
+      formData.append("materialLibraryType", materialLibraryType);
       fileList.forEach((file) => {
         file.raw && formData.append("file", file.raw || "");
       });
@@ -426,4 +457,21 @@ function handleViewPic(row) {
   imgUrl.value = import.meta.env.VITE_APP_BASE_API + row.url;
   picViewOpen.value = true;
 }
+
+// 树形列表
+const treeRef = ref()
+const treeData = ref([])
+/** 查询素材分类列表 */
+function getTreeList() {
+  loading.value = true;
+  listSourceType(queryParams.value).then(response => {
+    treeData.value = response.data;
+    loading.value = false;
+  });
+}
+const handleNodeClick = (data) => {
+  queryParams.value.materialLibraryType = data.id
+  getList()
+}
+getTreeList()
 </script>

src/views/interactVideo/sourceType/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form-item label="素材分类名称" prop="name">
+        <el-input
+            v-model="queryParams.name"
+            placeholder="请输入素材分类名称"
+            clearable
+            style="width: 200px"
+            @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="info"
+            plain
+            icon="Sort"
+            @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="sourceTypeList"
+        row-key="id"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="name" label="素材分类名称"></el-table-column>
+<!--      <el-table-column prop="code" align="center" label="素材分类值"></el-table-column>-->
+      <el-table-column prop="createBy" align="center" label="创建人"></el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
+<!--      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"></el-table-column>-->
+      <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改素材分类对话框 -->
+    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
+      <el-form ref="sourceTypeRef" :model="form" :rules="rules" label-width="140px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="上级素材分类名称">
+              <el-tree-select
+                  v-model="form.parentId"
+                  :data="sourceTypeOptions"
+                  :props="{ value: 'id', label: 'name', children: 'childs' }"
+                  value-key="id"
+                  placeholder="选择上级素材分类"
+                  check-strictly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="素材分类名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入素材分类名称" />
+            </el-form-item>
+          </el-col>
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="素材分类值" prop="code">-->
+<!--              <el-input v-model="form.code" placeholder="请输入素材分类值" />-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--          <el-col :span="24">-->
+<!--            <el-form-item label="备注" prop="remark">-->
+<!--              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SourceType">
+import {
+  addSourceType,
+  delSourceType,
+  getSourceType,
+  listSourceType,
+  updateSourceType
+} from "@/api/interactVideo/sourceType.js";
+
+const { proxy } = getCurrentInstance();
+const sourceTypeList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const sourceTypeOptions = ref([]);
+const isExpandAll = ref(false);
+const refreshTable = ref(true);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    name: undefined
+  },
+  rules: {
+    name: [{ required: true, message: "素材分类名称不能为空", trigger: "blur" }],
+    // code: [{ required: true, message: "素材分类值不能为空", trigger: "blur" }],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询素材分类列表 */
+function getList() {
+  loading.value = true;
+  listSourceType(queryParams.value).then(response => {
+    sourceTypeList.value = response.data
+    loading.value = false;
+  });
+}
+/** 查询素材分类下拉树结构 */
+function getTreeselect() {
+  sourceTypeOptions.value = [];
+  listSourceType().then(response => {
+    const sourceType = { id: 0, name: "主类目", childs: [] };
+    sourceType.childs = response.data;
+    sourceTypeOptions.value.push(sourceType);
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    id: undefined,
+    parentId: 0,
+    name: undefined,
+    code: undefined
+  }
+  proxy.resetForm("sourceTypeRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset();
+  getTreeselect();
+  if (row != null && row.id) {
+    form.value.parentId = row.id;
+  } else {
+    form.value.parentId = 0;
+  }
+  open.value = true;
+  title.value = "添加素材分类";
+}
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset();
+  await getTreeselect();
+  getSourceType(row.id).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改素材分类";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["sourceTypeRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != undefined) {
+        updateSourceType(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addSourceType(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
+    return delSourceType(row.id);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
+</script>