feat:pc端新增大屏设计器发布和未发布状态修改

fengwotao
1 parent 9527b942
Showing 3 changed files with 140 additions and 90 deletions
src/api/bigscreen/center/bigscreenCenter.ts
src/components/Widget/AuthDropDown.vue
src/views/dataview/index.vue
--- a/src/api/bigscreen/center/bigscreenCenter.ts
View file @c6568d8
+++ b/src/api/bigscreen/center/bigscreenCenter.ts
View file @c6568d8
@@ -50,6 +50,18 @@ export const uploadThumbnail = (file: FormData) => {
   return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
 };
+export const bigScreenPublish = (id) => {
+  return defHttp.get({
+    url: API.basicUrl + '/publish/' + id,
+  });
+};
+
+export const bigScreenCancelPublish = (id) => {
+  return defHttp.get({
+    url: API.basicUrl + '/cancel_publish/' + id,
+  });
+};
+
 /**
  * 大屏公共接口
  */
@@ -81,14 +93,14 @@ export const deleteBigViewInterface = (ids: string[]) => {
   });
 };
-export function getPublish(id) {
+export const getPublish = (id) => {
   return defHttp.get({
     url: API.DATA_VIEW_INTERFACE + '/publish/' + id,
   });
-}
+};
-export function getCancelPublish(id) {
+export const getCancelPublish = (id) => {
   return defHttp.get({
     url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
   });
-}
+};
--- a/src/components/Widget/AuthDropDown.vue
View file @c6568d8
+++ b/src/components/Widget/AuthDropDown.vue
View file @c6568d8
-<script lang="ts" setup>
-  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
-  import { computed, useSlots } from 'vue';
-  import Icon from '../Icon';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  export interface AuthDropDownProps {
-    dropMenuList: AuthDropMenuList[];
-    trigger?: ('contextmenu' | 'click' | 'hover')[];
-  }
-
-  export interface AuthDropMenuList {
-    icon?: string;
-    event: string | number;
-    text: string;
-    disabled?: boolean;
-    divider?: boolean;
-    auth?: string;
-    onClick?: Fn;
-    popconfirm?: {
-      cancelText?: string;
-      okText?: string;
-      okType?: string;
-      title?: string;
-      icon?: string;
-      disabled?: boolean;
-      onCancel?: Fn;
-      onConfirm?: Fn;
-      onVisibleChange?: Fn;
-    };
-  }
-
-  const props = defineProps<AuthDropDownProps>();
-
-  const slot = useSlots();
-
-  const { hasPermission } = usePermission();
-
-  const getMenuList = computed(() => {
-    const { dropMenuList } = props;
-    return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
-  });
-
-  const hasDefaultSlot = computed(() => {
-    return !!slot.default;
-  });
-</script>
-
-<template>
-  <Dropdown :trigger="$props.trigger">
-    <template #overlay>
-      <Menu v-if="getMenuList.length">
-        <template v-for="item in getMenuList" :key="item.event">
-          <Menu.Divider v-if="item.divider" />
-          <Menu.Item v-if="!item.popconfirm" @click="item.onClick">
-            <span class="flex justify-center items-center">
-              <Icon :icon="item.icon" />
-              <span class="ml-2">{{ item.text }}</span>
-            </span>
-          </Menu.Item>
-          <Menu.Item v-if="item.popconfirm">
-            <Popconfirm v-bind="item.popconfirm">
-              <template v-if="item.popconfirm.icon" #icon>
-                <Icon :icon="item.popconfirm.icon" />
-              </template>
-              <span class="flex justify-center items-center">
-                <Icon :icon="item.icon" />
-                <span class="ml-2">{{ item.text }}</span>
-              </span>
-            </Popconfirm>
-          </Menu.Item>
-        </template>
-      </Menu>
-    </template>
-    <Icon
-      v-if="!hasDefaultSlot"
-      class="items-center justify-center"
-      icon="ant-design:ellipsis-outlined"
-      :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
-    />
-    <slot name="default"></slot>
-  </Dropdown>
-</template>
+<script lang="ts" setup>
+  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
+  import { computed, useSlots } from 'vue';
+  import Icon from '../Icon';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  export interface AuthDropDownProps {
+    dropMenuList: AuthDropMenuList[];
+    trigger?: ('contextmenu' | 'click' | 'hover')[];
+  }
+
+  export interface AuthDropMenuList {
+    icon?: string;
+    event: string | number;
+    text: string;
+    disabled?: boolean;
+    divider?: boolean;
+    auth?: string;
+    onClick?: Fn;
+    popconfirm?: {
+      cancelText?: string;
+      okText?: string;
+      okType?: string;
+      title?: string;
+      icon?: string;
+      disabled?: boolean;
+      onCancel?: Fn;
+      onConfirm?: Fn;
+      onVisibleChange?: Fn;
+    };
+  }
+
+  const props = defineProps<AuthDropDownProps>();
+
+  const slot = useSlots();
+
+  const { hasPermission } = usePermission();
+
+  const getMenuList = computed(() => {
+    const { dropMenuList } = props;
+    return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
+  });
+
+  const hasDefaultSlot = computed(() => {
+    return !!slot.default;
+  });
+</script>
+
+<template>
+  <Dropdown :trigger="$props.trigger">
+    <template #overlay>
+      <Menu v-if="getMenuList.length">
+        <template v-for="item in getMenuList" :key="item.event">
+          <Menu.Divider v-if="item.divider" />
+          <Menu.Item :disabled="item.disabled" v-if="!item.popconfirm" @click="item.onClick">
+            <span class="flex justify-center items-center">
+              <Icon :icon="item.icon" />
+              <span class="ml-2">{{ item.text }}</span>
+            </span>
+          </Menu.Item>
+          <Menu.Item :disabled="item.disabled" v-if="item.popconfirm">
+            <Popconfirm v-bind="item.popconfirm">
+              <template v-if="item.popconfirm.icon" #icon>
+                <Icon :icon="item.popconfirm.icon" />
+              </template>
+              <span class="flex justify-center items-center">
+                <Icon :icon="item.icon" />
+                <span class="ml-2">{{ item.text }}</span>
+              </span>
+            </Popconfirm>
+          </Menu.Item>
+        </template>
+      </Menu>
+    </template>
+    <Icon
+      v-if="!hasDefaultSlot"
+      class="items-center justify-center"
+      icon="ant-design:ellipsis-outlined"
+      :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
+    />
+    <slot name="default"></slot>
+  </Dropdown>
+</template>
--- a/src/views/dataview/index.vue
View file @c6568d8
+++ b/src/views/dataview/index.vue
View file @c6568d8
@@ -3,7 +3,12 @@
   import { ReloadOutlined } from '@ant-design/icons-vue';
   import { onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
-  import { deleteBigScreenenter, getPage } from '/@/api/bigscreen/center/bigscreenCenter';
+  import {
+    bigScreenCancelPublish,
+    bigScreenPublish,
+    deleteBigScreenenter,
+    getPage,
+  } from '/@/api/bigscreen/center/bigscreenCenter';
   import { BigScreenCenterItemsModel } from '/@/api/bigscreen/center/model/bigscreenCenterModel';
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
@@ -150,6 +155,17 @@
   });
   const getPublicApiListData = () => {};
+
+  const handlePublish = async ({ id }) => {
+    await bigScreenPublish(id);
+    createMessage.success('发布成功');
+    getListData();
+  };
+  const handleCancelPublish = async ({ id }) => {
+    await bigScreenCancelPublish(id);
+    createMessage.success('取消发布成功');
+    getListData();
+  };
 </script>
 <template>
@@ -206,6 +222,11 @@
                           >所属组织：{{ item.organizationDTO.name }}</span
                         >
                       </div>
+                      <div>
+                        <span class="masker-text-state"
+                          >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
+                        >
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -228,11 +249,19 @@
                 <AuthDropDown
                   :dropMenuList="[
                     {
-                      text: '未发布',
+                      text: '发布',
                       auth: ConfigurationPermission.UPDATE,
                       icon: 'ant-design:node-expand-outlined',
                       event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
+                      onClick: handlePublish.bind(null, item),
+                      disabled: item.state === 0 ? false : true,
+                    },
+                    {
+                      text: '取消发布',
+                      icon: 'ant-design:node-collapse-outlined',
+                      event: '',
+                      onClick: handleCancelPublish.bind(null, item),
+                      disabled: item.state === 1 ? false : true,
                     },
                     {
                       text: '编辑',
@@ -240,11 +269,13 @@
                       icon: 'clarity:note-edit-line',
                       event: '',
                       onClick: handleCreateOrUpdate.bind(null, item),
+                      disabled: item.state === 0 ? false : true,
                     },
                     {
                       text: '删除',
                       auth: ConfigurationPermission.DELETE,
                       icon: 'ant-design:delete-outlined',
+                      disabled: item.state === 0 ? false : true,
                       event: '',
                       popconfirm: {
                         title: '是否确认删除操作?',
@@ -316,6 +347,13 @@
         bottom: 0;
         left: 0.8rem;
       }
+
+      .masker-text-state {
+        font-size: 12px;
+        position: absolute;
+        bottom: 0;
+        right: 0.8rem;
+      }
     }
   }