Преглед изворни кода

```
feat(api): 新增发布工作流编辑功能

- 添加publishEdit函数用于编辑发布工作流
- 通过PUT请求调用/publish接口

feat(components): 优化文件上传组件

- 为FileUploader组件添加文件数量超出限制时的错误提示
- 使用DGTMessage.error显示文件数量超出限制的提示信息

fix(pages): 修复搜索平台页面分页和页面大小问题

- 修复Pagination组件total属性绑定错误,从searchFom.total改为listTotal
- 将页面大小从10调整为16

feat(pages): 完善工作流添加页面编辑功能

- 为FileUploader组件添加limit限制,最多上传5个文件
- 添加publishId参数用于区分新增和编辑模式
- 实现工作流详情获取和表单回填功能
- 修复工作流类型验证信息错误
- 添加编辑模式下的详情获取逻辑

fix(pages): 修复工作流详情页面预览图片显示问题

- 将预览图片数据源从coverImage改为previewImage
- 添加下载工作流功能,区分本人发布和需要购买的情况
```

zhangningning пре 1 месец
родитељ
комит
612da1bae8

+ 4 - 0
src/api/publish.js

@@ -4,6 +4,10 @@ import request from './request.js'
 export function publishAdd(data = {}) {
   return request.post('/publish',data)
 }
+// 编辑发布工作流
+export function publishEdit(data = {}) {
+  return request.put('/publish',data)
+}
 // 查询发布工作流列表
 export function getPublishList(data = {}) {
   return request.get('/publish/list',data)

+ 4 - 1
src/components/FileUploader.vue

@@ -36,7 +36,9 @@
       </template>
 
       <template v-else-if="listType === 'picture-card'">
-       <el-icon><Plus /></el-icon>
+        <!-- 只有当文件数量小于limit且limit大于0时才显示加号按钮 -->
+        <!--  v-if="!limit || fileList.length < limit" -->
+        <el-icon><Plus /></el-icon>
       </template>
 
       
@@ -413,6 +415,7 @@ const handleRemove = (file) => {
 
 // 文件数量超出限制处理
 const handleExceed = (files, fileList) => {
+  DGTMessage.error(`文件数量超出限制,最多允许上传 ${props.limit} 个文件`)
   emit('exceed', files, fileList)
 }
 

+ 2 - 2
src/pages/SearchPlatform.vue

@@ -69,7 +69,7 @@
       <!-- 分页 -->
       <!-- 替换原有的分页代码 -->
       <Pagination 
-        :total="searchFom.total"
+        :total="listTotal"
         :page-size="searchFom.pageSize"
         :current-page="searchFom.pageNum"
         @page-change="handlePageChange"
@@ -119,7 +119,7 @@
     categoryId3: '',
     workflowTitle: '',
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 16,
   })
 
   onMounted(() => {

+ 46 - 7
src/pages/WorkflowAdd.vue

@@ -50,7 +50,6 @@
             <el-input type="textarea" v-model="ruleForm.description" placeholder="请输入工作流描述"  maxlength="500" show-word-limit/>
           </el-form-item>
           <el-form-item label="封面图" prop="coverImage">
-            <div>支持批量上传文件,文件格式不限,最多只能上传 5 份文件</div>
             <!-- 图片类型 -->
             <FileUploader
               ref="fileUploader"
@@ -75,6 +74,7 @@
               ref="fileUploader"
               accept="image/*"
               :multiple="true"
+              :limit="5"
               :auto-upload="true"
               list-type="picture-card"
               :data="{ directory: 'workflow' }"
@@ -130,7 +130,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, reactive, watchEffect } from 'vue'
+import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import FileUploader from '@/components/FileUploader.vue'
 import DGTMessage from '@/utils/message'
@@ -139,13 +139,15 @@ const route = useRoute()
 const router = useRouter()
 
 import { getCategoryListTree } from '@/api/category.js'
-import { publishAdd } from '@/api/publish.js'
+import { publishAdd, getPublishDetail,publishEdit } from '@/api/publish.js'
 
-  import { useI18n } from 'vue-i18n' 
-  const { t } = useI18n()
+import { useI18n } from 'vue-i18n' 
+const { t } = useI18n()
 
 // 从路由参数中获取 activePlatform
 const activePlatform = ref(route.query.activePlatform || '');
+// 从路由参数中获取 publishId
+const publishId = ref(route.query.id || '');
 
 // 图片
 const images = ref([]);
@@ -162,6 +164,7 @@ const workflowPriceType = ref('pay'); // 价格类型,默认免费
 // 表单实例
 const ruleFormRef = ref(null)
 const ruleForm = reactive({
+  publishId: '',
   workflowTitle: '',
   categoryId1: '',
   categoryId2: '',
@@ -194,7 +197,7 @@ const rules = reactive({
     { required: true, message: '请输入工作流标题', trigger: 'blur' },
   ],
   categoryId3: [
-    { required: true, message: '请输入工作流标题', trigger: 'blur' },
+    { required: true, message: '请输入工作流类型', trigger: 'blur' },
   ],
   description: [
     { required: true, message: '请输入工作流描述', trigger: 'blur' },
@@ -211,6 +214,9 @@ const rules = reactive({
 
 onMounted(() => {
   getCategoryListTreeFn();
+  if(publishId.value){
+    getDetail();
+  }
 });
 
 // 提交表单
@@ -240,7 +246,11 @@ const submitForm = async () => {
       DGTMessage.warning(fields[firstKey][0].message)
       return
     }
-    publishAdd(ruleForm).then(res => {
+     let req = publishAdd;
+    if(publishId.value){
+      req = publishEdit;
+    }
+    req(ruleForm).then(res => {
       console.log(res)
       if(res.code === 200){
         DGTMessage.success(t('workflowTrade.publishSuccess'))
@@ -279,6 +289,35 @@ const getCategoryListTreeFn = () => {
     categoryListTree.value = res.rows || [];
   })
 };
+const getDetail = () => {
+  getPublishDetail({id:publishId.value}).then(res => {
+    const detail = res.data || {};
+    for(let key in ruleForm){
+      ruleForm[key] = detail[key];
+    }
+    nextTick(() => {
+      if(ruleForm.workflowFile){
+        files.value = [{url: ruleForm.workflowFile}];
+      };
+      if(ruleForm.coverImage){
+        coverImage.value = ruleForm.coverImage.split(',').map(item => ({url: item}));
+      };
+      if(ruleForm.previewImage){
+        images.value = ruleForm.previewImage.split(',').map(item => ({url: item}));
+      };
+      if(ruleForm.categoryId1){
+        categoryIdList.value = [ruleForm.categoryId1, ruleForm.categoryId2, ruleForm.categoryId3];
+      };
+
+      setTimeout(() => {
+        if(detail.workflowContent){
+          editorContent.value = JSON.parse(detail.workflowContent);
+        }
+        console.log('editorContent.value',editorContent.value,ruleForm)
+      }, 500);
+    });
+  })
+};
 </script>
 <style lang="scss">
 .workflow-add{

+ 10 - 4
src/pages/WorkflowDetail.vue

@@ -37,7 +37,7 @@
             <div class="font_size20 bold">{{$t('common.workflowPreview')}}</div>
           </div>
           <div class="mt20">
-            <img :src="item || ''" alt="" v-for="(item, index) in coverImage" :key="index"
+            <img :src="item || ''" alt="" v-for="(item, index) in previewImage" :key="index"
             style="width: 100%; height: auto;" />
           </div>
         </div>
@@ -166,7 +166,7 @@ const query = route.query
 const publishId = ref(query.publishId || '');
 // 详情内容
 const editorContent = ref(null);
-const coverImage = ref([]);
+const previewImage = ref([]);
 // 表单数据
 const ruleForm = ref({
   workflowTitle: '',
@@ -185,8 +185,8 @@ onMounted(() => {
   getPublishDetail({id:publishId.value}).then(res => {
     ruleForm.value = res.data || {};
     nextTick(() => {
-      if(ruleForm.value.coverImage){
-        coverImage.value = ruleForm.value.coverImage.split(',');
+      if(ruleForm.value.previewImage){
+        previewImage.value = ruleForm.value.previewImage.split(',');
       };
       setTimeout(() => {
         if(ruleForm.value.workflowContent){
@@ -198,6 +198,12 @@ onMounted(() => {
 });
 // 下载工作流
 const downloadWorkflow = () => {
+  //如果是本人发布的,是有下载地址的,直接下载
+  if(ruleForm.value.workflowFile){
+    downloadFile({url:ruleForm.value.workflowFile,t});
+    return;
+  }
+  //如果不是本人发布的,需要购买
   purchase({
     buyType: 1,
     publishId: publishId.value,