简柏林 / thingskit-front · Commits

Commit c6568d8e9c5a78d6fef32bb2208e719c3f8aefaa

Authored by fengwotao
1 parent 9527b942

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

Inline Side-by-side
Showing 3 changed files with 140 additions and 90 deletions
... ... @@ -50,6 +50,18 @@ export const uploadThumbnail = (file: FormData) => {
50 50 return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
51 51 };
52 52
  53 +export const bigScreenPublish = (id) => {
  54 + return defHttp.get({
  55 + url: API.basicUrl + '/publish/' + id,
  56 + });
  57 +};
  58 +
  59 +export const bigScreenCancelPublish = (id) => {
  60 + return defHttp.get({
  61 + url: API.basicUrl + '/cancel_publish/' + id,
  62 + });
  63 +};
  64 +
53 65 /**
54 66 * 大屏公共接口
55 67 */
... ... @@ -81,14 +93,14 @@ export const deleteBigViewInterface = (ids: string[]) => {
81 93 });
82 94 };
83 95
84   -export function getPublish(id) {
  96 +export const getPublish = (id) => {
85 97 return defHttp.get({
86 98 url: API.DATA_VIEW_INTERFACE + '/publish/' + id,
87 99 });
88   -}
  100 +};
89 101
90   -export function getCancelPublish(id) {
  102 +export const getCancelPublish = (id) => {
91 103 return defHttp.get({
92 104 url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
93 105 });
94   -}
  106 +};
... ...
1   -<script lang="ts" setup>
2   - import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
3   - import { computed, useSlots } from 'vue';
4   - import Icon from '../Icon';
5   - import { usePermission } from '/@/hooks/web/usePermission';
6   -
7   - export interface AuthDropDownProps {
8   - dropMenuList: AuthDropMenuList[];
9   - trigger?: ('contextmenu' | 'click' | 'hover')[];
10   - }
11   -
12   - export interface AuthDropMenuList {
13   - icon?: string;
14   - event: string | number;
15   - text: string;
16   - disabled?: boolean;
17   - divider?: boolean;
18   - auth?: string;
19   - onClick?: Fn;
20   - popconfirm?: {
21   - cancelText?: string;
22   - okText?: string;
23   - okType?: string;
24   - title?: string;
25   - icon?: string;
26   - disabled?: boolean;
27   - onCancel?: Fn;
28   - onConfirm?: Fn;
29   - onVisibleChange?: Fn;
30   - };
31   - }
32   -
33   - const props = defineProps<AuthDropDownProps>();
34   -
35   - const slot = useSlots();
36   -
37   - const { hasPermission } = usePermission();
38   -
39   - const getMenuList = computed(() => {
40   - const { dropMenuList } = props;
41   - return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
42   - });
43   -
44   - const hasDefaultSlot = computed(() => {
45   - return !!slot.default;
46   - });
47   -</script>
48   -
49   -<template>
50   - <Dropdown :trigger="$props.trigger">
51   - <template #overlay>
52   - <Menu v-if="getMenuList.length">
53   - <template v-for="item in getMenuList" :key="item.event">
54   - <Menu.Divider v-if="item.divider" />
55   - <Menu.Item v-if="!item.popconfirm" @click="item.onClick">
56   - <span class="flex justify-center items-center">
57   - <Icon :icon="item.icon" />
58   - <span class="ml-2">{{ item.text }}</span>
59   - </span>
60   - </Menu.Item>
61   - <Menu.Item v-if="item.popconfirm">
62   - <Popconfirm v-bind="item.popconfirm">
63   - <template v-if="item.popconfirm.icon" #icon>
64   - <Icon :icon="item.popconfirm.icon" />
65   - </template>
66   - <span class="flex justify-center items-center">
67   - <Icon :icon="item.icon" />
68   - <span class="ml-2">{{ item.text }}</span>
69   - </span>
70   - </Popconfirm>
71   - </Menu.Item>
72   - </template>
73   - </Menu>
74   - </template>
75   - <Icon
76   - v-if="!hasDefaultSlot"
77   - class="items-center justify-center"
78   - icon="ant-design:ellipsis-outlined"
79   - :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
80   - />
81   - <slot name="default"></slot>
82   - </Dropdown>
83   -</template>
  1 +<script lang="ts" setup>
  2 + import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
  3 + import { computed, useSlots } from 'vue';
  4 + import Icon from '../Icon';
  5 + import { usePermission } from '/@/hooks/web/usePermission';
  6 +
  7 + export interface AuthDropDownProps {
  8 + dropMenuList: AuthDropMenuList[];
  9 + trigger?: ('contextmenu' | 'click' | 'hover')[];
  10 + }
  11 +
  12 + export interface AuthDropMenuList {
  13 + icon?: string;
  14 + event: string | number;
  15 + text: string;
  16 + disabled?: boolean;
  17 + divider?: boolean;
  18 + auth?: string;
  19 + onClick?: Fn;
  20 + popconfirm?: {
  21 + cancelText?: string;
  22 + okText?: string;
  23 + okType?: string;
  24 + title?: string;
  25 + icon?: string;
  26 + disabled?: boolean;
  27 + onCancel?: Fn;
  28 + onConfirm?: Fn;
  29 + onVisibleChange?: Fn;
  30 + };
  31 + }
  32 +
  33 + const props = defineProps<AuthDropDownProps>();
  34 +
  35 + const slot = useSlots();
  36 +
  37 + const { hasPermission } = usePermission();
  38 +
  39 + const getMenuList = computed(() => {
  40 + const { dropMenuList } = props;
  41 + return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
  42 + });
  43 +
  44 + const hasDefaultSlot = computed(() => {
  45 + return !!slot.default;
  46 + });
  47 +</script>
  48 +
  49 +<template>
  50 + <Dropdown :trigger="$props.trigger">
  51 + <template #overlay>
  52 + <Menu v-if="getMenuList.length">
  53 + <template v-for="item in getMenuList" :key="item.event">
  54 + <Menu.Divider v-if="item.divider" />
  55 + <Menu.Item :disabled="item.disabled" v-if="!item.popconfirm" @click="item.onClick">
  56 + <span class="flex justify-center items-center">
  57 + <Icon :icon="item.icon" />
  58 + <span class="ml-2">{{ item.text }}</span>
  59 + </span>
  60 + </Menu.Item>
  61 + <Menu.Item :disabled="item.disabled" v-if="item.popconfirm">
  62 + <Popconfirm v-bind="item.popconfirm">
  63 + <template v-if="item.popconfirm.icon" #icon>
  64 + <Icon :icon="item.popconfirm.icon" />
  65 + </template>
  66 + <span class="flex justify-center items-center">
  67 + <Icon :icon="item.icon" />
  68 + <span class="ml-2">{{ item.text }}</span>
  69 + </span>
  70 + </Popconfirm>
  71 + </Menu.Item>
  72 + </template>
  73 + </Menu>
  74 + </template>
  75 + <Icon
  76 + v-if="!hasDefaultSlot"
  77 + class="items-center justify-center"
  78 + icon="ant-design:ellipsis-outlined"
  79 + :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
  80 + />
  81 + <slot name="default"></slot>
  82 + </Dropdown>
  83 +</template>
... ...
... ... @@ -3,7 +3,12 @@
3 3 import { ReloadOutlined } from '@ant-design/icons-vue';
4 4 import { onMounted, reactive, ref, unref } from 'vue';
5 5 import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
6   - import { deleteBigScreenenter, getPage } from '/@/api/bigscreen/center/bigscreenCenter';
  6 + import {
  7 + bigScreenCancelPublish,
  8 + bigScreenPublish,
  9 + deleteBigScreenenter,
  10 + getPage,
  11 + } from '/@/api/bigscreen/center/bigscreenCenter';
7 12 import { BigScreenCenterItemsModel } from '/@/api/bigscreen/center/model/bigscreenCenterModel';
8 13 import { PageWrapper } from '/@/components/Page';
9 14 import { BasicForm, useForm } from '/@/components/Form';
... ... @@ -150,6 +155,17 @@
150 155 });
151 156
152 157 const getPublicApiListData = () => {};
  158 +
  159 + const handlePublish = async ({ id }) => {
  160 + await bigScreenPublish(id);
  161 + createMessage.success('发布成功');
  162 + getListData();
  163 + };
  164 + const handleCancelPublish = async ({ id }) => {
  165 + await bigScreenCancelPublish(id);
  166 + createMessage.success('取消发布成功');
  167 + getListData();
  168 + };
153 169 </script>
154 170
155 171 <template>
... ... @@ -206,6 +222,11 @@
206 222 >所属组织：{{ item.organizationDTO.name }}</span
207 223 >
208 224 </div>
  225 + <div>
  226 + <span class="masker-text-state"
  227 + >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
  228 + >
  229 + </div>
209 230 </div>
210 231 </div>
211 232 </div>
... ... @@ -228,11 +249,19 @@
228 249 <AuthDropDown
229 250 :dropMenuList="[
230 251 {
231   - text: '未发布',
  252 + text: '发布',
232 253 auth: ConfigurationPermission.UPDATE,
233 254 icon: 'ant-design:node-expand-outlined',
234 255 event: '',
235   - onClick: handleCreateOrUpdate.bind(null, item),
  256 + onClick: handlePublish.bind(null, item),
  257 + disabled: item.state === 0 ? false : true,
  258 + },
  259 + {
  260 + text: '取消发布',
  261 + icon: 'ant-design:node-collapse-outlined',
  262 + event: '',
  263 + onClick: handleCancelPublish.bind(null, item),
  264 + disabled: item.state === 1 ? false : true,
236 265 },
237 266 {
238 267 text: '编辑',
... ... @@ -240,11 +269,13 @@
240 269 icon: 'clarity:note-edit-line',
241 270 event: '',
242 271 onClick: handleCreateOrUpdate.bind(null, item),
  272 + disabled: item.state === 0 ? false : true,
243 273 },
244 274 {
245 275 text: '删除',
246 276 auth: ConfigurationPermission.DELETE,
247 277 icon: 'ant-design:delete-outlined',
  278 + disabled: item.state === 0 ? false : true,
248 279 event: '',
249 280 popconfirm: {
250 281 title: '是否确认删除操作?',
... ... @@ -316,6 +347,13 @@
316 347 bottom: 0;
317 348 left: 0.8rem;
318 349 }
  350 +
  351 + .masker-text-state {
  352 + font-size: 12px;
  353 + position: absolute;
  354 + bottom: 0;
  355 + right: 0.8rem;
  356 + }
319 357 }
320 358 }
321 359
... ...