feat:新增大屏设计器页面

fengwotao
1 parent f8e9c632
Showing 5 changed files with 49 additions and 263 deletions
src/api/bigscreen/center/bigscreenCenter.ts
src/api/bigscreen/center/model/bigscreenCenterModal.ts → src/api/bigscreen/center/model/bigscreenCenterModel.ts
src/components/Widget/AuthIcon.vue
src/views/dataview/TableMode.vue
src/views/dataview/index.vue
--- a/src/api/bigscreen/center/bigscreenCenter.ts
View file @15132e5
+++ b/src/api/bigscreen/center/bigscreenCenter.ts
View file @15132e5
@@ -4,7 +4,7 @@ import type {
   BigScreenCenterParams,
   ConfigurationCenterInfo,
   BigScreenCenterItemsModal,
-} from './model/bigscreenCenterModal';
+} from './model/bigscreenCenterModel';
 import { getPageData } from '../../base';
 import { FileUploadResponse } from '../../oem/model';
 enum API {
--- a/src/api/bigscreen/center/model/bigscreenCenterModel.ts renamed from src/api/bigscreen/center/model/bigscreenCenterModal.ts
View file @15132e5
+++ b/src/api/bigscreen/center/model/bigscreenCenterModel.ts renamed from src/api/bigscreen/center/model/bigscreenCenterModal.ts
View file @15132e5
 import { BasicPageParams } from '/@/api/model/baseModel';
-export interface BigScreenCenterItemsModal {
+export interface BigScreenCenterItemsModel {
   id: string;
   name: string;
   createTime: string;
@@ -13,7 +13,7 @@ export type queryPageParams = BasicPageParams & {
 };
 export interface ConfigurationModal {
-  items: BigScreenCenterItemsModal[];
+  items: BigScreenCenterItemsModel[];
   total: number;
 }
--- a/src/components/Widget/AuthIcon.vue
View file @15132e5
+++ b/src/components/Widget/AuthIcon.vue
View file @15132e5
-<script lang="ts" setup>
-  import { Icon } from '/@/components/Icon';
-  import { computed, ExtractPropTypes, unref } from 'vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
-    auth?: string;
-  }
-
-  const props = defineProps<AuthIconProps>();
-
-  const emit = defineEmits(['click']);
-
-  const { hasPermission } = usePermission();
-
-  const getHasPermission = computed(() => {
-    const { auth } = props;
-    return auth ? hasPermission(auth) : true;
-  });
-
-  const getBindProps = computed(() => {
-    return {
-      ...props,
-      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
-    };
-  });
-</script>
-
-<template>
-  <Icon
-    v-bind="getBindProps"
-    class="justify-center items-center"
-    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
-  />
-</template>
+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { computed, ExtractPropTypes, unref } from 'vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
+    auth?: string;
+  }
+
+  const props = defineProps<AuthIconProps>();
+
+  const emit = defineEmits(['click']);
+
+  const { hasPermission } = usePermission();
+
+  const getHasPermission = computed(() => {
+    const { auth } = props;
+    console.log(auth);
+    return auth ? hasPermission(auth) : true;
+  });
+
+  const getBindProps = computed(() => {
+    return {
+      ...props,
+      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
+    };
+  });
+</script>
+
+<template>
+  <Icon
+    v-bind="getBindProps"
+    class="justify-center items-center"
+    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
+  />
+</template>
--- a/src/views/dataview/TableMode.vue deleted 100644 → 0
View file @f8e9c63
+++ b/src/views/dataview/TableMode.vue deleted 100644 → 0
View file @f8e9c63
-<template>
-  <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable
-        style="flex: auto"
-        :clickToRowSelect="false"
-        @register="registerTable"
-        :searchInfo="searchInfo"
-        class="w-3/4 xl:w-4/5"
-      >
-        <template #platform="{ record }">
-          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
-            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
-          </Tag>
-        </template>
-        <template #toolbar>
-          <Authority value="api:yt:configuration:center:post">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增大屏</a-button>
-          </Authority>
-          <Authority value="api:yt:configuration:center:delete">
-            <Popconfirm
-              title="您确定要批量删除数据"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDeleteOrBatchDelete(null)"
-            >
-              <a-button type="primary" color="error" :disabled="hasBatchDelete">
-                批量删除
-              </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #action="{ record }">
-          <TableAction
-            :actions="[
-              {
-                label: '设计',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'clarity:note-edit-line',
-                onClick: handleDesign.bind(null, record),
-              },
-              {
-                label: '预览',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'ant-design:eye-outlined',
-                onClick: handlePreview.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:configuration:center:update',
-                icon: 'clarity:note-edit-line',
-                onClick: handleCreateOrEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                auth: 'api:yt:configuration:center:delete',
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDeleteOrBatchDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </BasicTable>
-    </PageWrapper>
-    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
-  import { useDrawer } from '/@/components/Drawer';
-  import ContactDrawer from './BigScreenDrawer.vue';
-  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-  import { searchFormSchema, columns, Platform } from './config';
-  import {
-    getPage,
-    deleteConfigurationCenter,
-  } from '/@/api/configuration/center/configurationCenter';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { isDevMode } from '/@/utils/env';
-  import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
-    },
-    setup() {
-      const { configurationPrefix } = useGlobSetting();
-      const isDev = isDevMode();
-      const searchInfo = reactive<Recordable>({});
-      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      // 表格hooks
-      const [registerTable, { reload, setProps }] = useTable({
-        title: '大屏中心列表',
-        api: getPage,
-        columns,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        showIndexColumn: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
-      });
-      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-        deleteConfigurationCenter,
-        handleSuccess,
-        setProps
-      );
-      nextTick(() => {
-        setProps(selectionOptions);
-      });
-
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      function handleSuccess() {
-        reload();
-      }
-      // 新增或编辑
-      const handleCreateOrEdit = (record: Recordable | null) => {
-        if (record) {
-          openDrawer(true, {
-            isUpdate: true,
-            record,
-          });
-        } else {
-          openDrawer(true, {
-            isUpdate: false,
-          });
-        }
-      };
-      // 树形选择器
-      const handleSelect = (organizationId: string) => {
-        searchInfo.organizationId = organizationId;
-        handleSuccess();
-      };
-
-      const handlePreview = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
-  });
-</script>
--- a/src/views/dataview/index.vue
View file @15132e5
+++ b/src/views/dataview/index.vue
View file @15132e5
 <script setup lang="ts">
   import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { computed, onMounted, reactive, ref, unref } from 'vue';
+  import { onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
   import { deleteBigScreenenter, getPage } from '/@/api/bigscreen/center/bigscreenCenter';
-  import { BigScreenCenterItemsModal } from '/@/api/bigscreen/center/model/configurationCenterModal';
+  import { BigScreenCenterItemsModel } from '/@/api/bigscreen/center/model/bigscreenCenterModel';
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
   import { ConfigurationPermission, searchFormSchema } from './config';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
-  import { isDevMode } from '/@/utils/env';
   import ConfigurationCenterDrawer from './BigScreenDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import { cloneDeep } from 'lodash';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
   import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
@@ -40,7 +38,7 @@
   const loading = ref(false);
-  const dataSource = ref<BigScreenCenterItemsModal[]>([]);
+  const dataSource = ref<BigScreenCenterItemsModel[]>([]);
   const [registerForm, { getFieldsValue }] = useForm({
     schemas: searchFormSchema,
@@ -90,17 +88,7 @@
   const [registerDrawer, { openDrawer }] = useDrawer();
-  const { hasPermission } = usePermission();
-
-  const getPreviewFlag = computed(() => {
-    return hasPermission(ConfigurationPermission.PREVIEW);
-  });
-
-  const getDesignFlag = computed(() => {
-    return hasPermission(ConfigurationPermission.DESIGN);
-  });
-
-  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
+  const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
     if (record) {
       openDrawer(true, {
         isUpdate: true,
@@ -113,22 +101,17 @@
     }
   };
-  const { configurationPrefix } = useGlobSetting();
-  const isDev = isDevMode();
+  const { largeDesignerPrefix } = useGlobSetting();
-  const handlePreview = (record: BigScreenCenterItemsModal) => {
-    if (!unref(getPreviewFlag)) return;
-    window.open(
-      `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
-    );
+  const handlePreview = (record: BigScreenCenterItemsModel) => {
+    window.open(`${largeDesignerPrefix}/${record.id}`);
   };
-  const handleDesign = (record: BigScreenCenterItemsModal) => {
-    if (!unref(getDesignFlag)) return;
-    window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
+  const handleDesign = (record: BigScreenCenterItemsModel) => {
+    window.open(`${largeDesignerPrefix}/${record.id}`);
   };
-  const handleDelete = async (record: BigScreenCenterItemsModal) => {
+  const handleDelete = async (record: BigScreenCenterItemsModel) => {
     try {
       await deleteBigScreenenter([record.id]);
       createMessage.success('删除成功');
@@ -207,7 +190,6 @@
               <template class="ant-card-actions" #actions>
                 <Tooltip title="预览">
                   <AuthIcon
-                    :auth="ConfigurationPermission.PREVIEW"
                     class="!text-lg"
                     icon="ant-design:eye-outlined"
                     @click="handlePreview(item)"
@@ -215,7 +197,6 @@
                 </Tooltip>
                 <Tooltip title="设计">
                   <AuthIcon
-                    :auth="ConfigurationPermission.DESIGN"
                     class="!text-lg"
                     icon="ant-design:edit-outlined"
                     @click="handleDesign(item)"