feat：新增发布和取消发布接口

src/api/http.ts

@@ -20,6 +20,17 @@ export const post = (url: string, data?: object, headersType?: string) => {
   })
 }
 
+export const put = (url: string, data?: object, headersType?: string) => {
+  return axiosInstance({
+    url: url,
+    method: RequestHttpEnum.PUT,
+    data: data,
+    headers: {
+      'Content-Type': headersType || ContentTypeEnum.JSON
+    }
+  })
+}
+
 export const del = (url: string, params?: object) => {
   return axiosInstance({
     url: url,
@@ -30,11 +41,20 @@ export const del = (url: string, params?: object) => {
 
 // 获取请求函数，默认get
 export const http = (type?: RequestHttpEnum) => {
-  return type === RequestHttpEnum.GET
-    ? get
-    : type === RequestHttpEnum.POST
-    ? post
-    : type === RequestHttpEnum.DELETE
-    ? del
-    : get
+  switch (type) {
+    case RequestHttpEnum.GET:
+      return get
+
+    case RequestHttpEnum.POST:
+      return post
+
+    case RequestHttpEnum.PUT:
+      return put
+
+    case RequestHttpEnum.DELETE:
+      return del
+
+    default:
+      return get
+  }
 }

src/api/path/project.ts

@@ -30,4 +30,14 @@ export const deleteProjectApi = async (data: object) => {
   } catch {
     httpErrorHandle();
   }
+}
+
+// * 修改发布状态 [-1未发布,1发布]
+export const changeProjectReleaseApi = async (data: object) => {
+  try { 
+    const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data);
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
 }

src/i18n/zh/index.ts

@@ -20,11 +20,16 @@ const global = {
   r_edit: '编辑',
   r_preview: '预览',
   r_copy: '克隆',
+  r_copy_success: '克隆成功！',
   r_rename: '重命名',
+  r_rename_success: '重命名成功！',
   r_publish: '发布',
+  r_publish_success: '成功发布！',
   r_unpublish: '取消发布',
+  r_unpublish_success: '取消成功！',
   r_download: '下载',
   r_delete: '删除',
+  r_delete_success: '删除成功！',
   r_more: '更多',
 }
 

src/plugins/customComponents.ts

@@ -8,7 +8,10 @@ import { SketchRule } from 'vue3-sketch-ruler'
  * @param app
  */
 export function setupCustomComponents(app: App) {
+  // 骨架屏
   app.component('GoSkeleton', GoSkeleton)
+  // 加载
   app.component('GoLoading', GoLoading)
+  // 标尺
   app.component('SketchRule', SketchRule)
 }

src/views/project/items/components/ProjectItemsCard/index.vue

@@ -98,7 +98,7 @@ const {
   SendIcon
 } = icon.ionicons5
 
-const emit = defineEmits(['delete', 'resize', 'edit'])
+const emit = defineEmits(['delete', 'resize', 'edit', 'release'])
 
 const props = defineProps({
   cardData: Object as PropType<Chartype>
@@ -146,7 +146,7 @@ const selectOptions = ref([
     label: props.cardData?.release
       ? renderLang('global.r_unpublish')
       : renderLang('global.r_publish'),
-    key: 'send',
+    key: 'release',
     icon: renderIcon(SendIcon)
   },
   {
@@ -170,6 +170,9 @@ const handleSelect = (key: string) => {
     case 'delete':
       deleteHanlde()
       break
+    case 'release':
+      releaseHandle()
+      break
     case 'edit':
       editHandle()
       break
@@ -186,6 +189,11 @@ const editHandle = () => {
   emit('edit', props.cardData)
 }
 
+// 编辑处理
+const releaseHandle = () => {
+  emit('release', props.cardData)
+}
+
 // 放大处理
 const resizeHandle = () => {
   emit('resize', props.cardData)

src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts

@@ -1,15 +1,17 @@
 import { ref, reactive } from 'vue';
 import { goDialog, httpErrorHandle } from '@/utils'
 import { DialogEnum } from '@/enums/pluginEnum'
-import { projectListApi, deleteProjectApi } from '@/api/path/project'
+import { projectListApi, deleteProjectApi, changeProjectReleaseApi } from '@/api/path/project'
 import { Chartype, ChartList } from '../../../index.d'
 import { ResultEnum } from '@/enums/httpEnum'
 
 // 数据初始化
 export const useDataListInit = () => {
 
+  const loading = ref(true)
+
   const paginat = reactive({
-    // 当前页数
+    // 当前页数 
     page: 1,
     // 每页值
     limit: 12,
@@ -21,6 +23,7 @@ export const useDataListInit = () => {
 
   // 数据请求
   const fetchList = async () => {
+    loading.value = true
     const res: any = await projectListApi({
       page: paginat.page,
       limit: paginat.limit
@@ -38,7 +41,12 @@ export const useDataListInit = () => {
           release: state !== -1
         }
       })
+      setTimeout(() => {
+        loading.value = false
+      }, 500)
+      return
     }
+    httpErrorHandle()
   }
 
   // 修改页数
@@ -53,8 +61,8 @@ export const useDataListInit = () => {
     fetchList()
   }
 
-  // 删除
-  const deleteHandle = (cardData: Chartype, index: number) => {
+  // 删除处理
+  const deleteHandle = (cardData: Chartype) => {
     goDialog({
       type: DialogEnum.DELETE,
       promise: true,
@@ -65,7 +73,7 @@ export const useDataListInit = () => {
       }),
       promiseResCallback: (res: any) => {
         if (res.code === ResultEnum.SUCCESS) {
-          window['$message'].success('删除成功')
+          window['$message'].success(window['$t']('global.r_delete_success'))
           fetchList()
           return
         }
@@ -74,13 +82,40 @@ export const useDataListInit = () => {
     })
   }
 
+  // 发布处理
+  const releaseHandle = async (cardData: Chartype, index: number) => {
+    const { id, release } = cardData
+    const res: any = await changeProjectReleaseApi({
+      id: id,
+      // [-1未发布, 1发布]
+      state: !release ? 1 : -1
+    })
+    if (res.code === ResultEnum.SUCCESS) {
+      list.value = []
+      fetchList()
+      // 发布 -> 未发布
+      if (release) {
+        window['$message'].success(window['$t']('global.r_unpublish_success'))
+        return
+      }
+      // 未发布 -> 发布
+      window['$message'].success(window['$t']('global.r_publish_success'))
+      return
+    }
+    httpErrorHandle()
+  }
+
   // 立即请求
   fetchList()
 
   return {
+    loading,
     paginat,
     list,
-    fetchList, changeSize, changePage,
+    fetchList,
+    releaseHandle,
+    changeSize,
+    changePage,
     deleteHandle
   }
 }

src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts

@@ -1,4 +1,4 @@
-import { ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath } from '@/utils'
 import { Chartype } from '../../../index.d'

src/views/project/items/components/ProjectItemsList/index.vue

@@ -1,20 +1,30 @@
 <template>
   <div class="go-items-list">
-    <n-grid
-      :x-gap="20"
-      :y-gap="20"
-      cols="2 s:2 m:3 l:4 xl:4 xxl:4"
-      responsive="screen"
-    >
-      <n-grid-item v-for="(item, index) in list" :key="item.id">
-        <project-items-card
-          :cardData="item"
-          @resize="resizeHandle"
-          @delete="deleteHandle(item, index)"
-          @edit="editHandle"
-        ></project-items-card>
-      </n-grid-item>
-    </n-grid>
+    <!-- 加载 -->
+    <div v-show="loading">
+      <go-loading></go-loading>
+    </div>
+    <!-- 列表 -->
+    <div v-show="!loading">
+      <n-grid
+        :x-gap="20"
+        :y-gap="20"
+        cols="2 s:2 m:3 l:4 xl:4 xxl:4"
+        responsive="screen"
+      >
+        <n-grid-item v-for="(item, index) in list" :key="item.id">
+          <project-items-card
+            :cardData="item"
+            @resize="resizeHandle"
+            @delete="deleteHandle(item)"
+            @release="releaseHandle(item, index)"
+            @edit="editHandle"
+          ></project-items-card>
+        </n-grid-item>
+      </n-grid>
+    </div>
+
+    <!-- 分页 -->
     <div class="list-pagination">
       <n-pagination
         :page="paginat.page"
@@ -27,6 +37,8 @@
       />
     </div>
   </div>
+
+  <!-- model -->
   <project-items-modal-card
     v-if="modalData"
     v-model:modalShow="modalShow"
@@ -44,8 +56,17 @@ import { useModalDataInit } from './hooks/useModal.hook'
 import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
-const { paginat, list, changeSize,changePage, deleteHandle } = useDataListInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
+  useModalDataInit()
+const {
+  loading,
+  paginat,
+  list,
+  changeSize,
+  changePage,
+  releaseHandle,
+  deleteHandle,
+} = useDataListInit()
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +75,7 @@ $contentHeight: 250px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
+  min-height: calc(100vh - #{$--header-height} - 40px - 2px);
   .list-content {
     position: relative;
     height: $contentHeight;

src/views/project/items/index.vue

@@ -10,6 +10,6 @@ import { ProjectItemsList } from './components/ProjectItemsList'
 
 <style lang="scss" scoped>
 @include go(project-items) {
-  padding: 30px 20px;
+  padding: 20px 20px;
 }
 </style>