From 14a30be7dd145d04cd905ed552a8eceaeb282643 Mon Sep 17 00:00:00 2001
From: denghao <2519864438@qq.com>
Date: Mon, 22 May 2023 22:55:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9Eexcel=E5=92=8C=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.base                                     |  2 +-
 package.json                                  | 17 +++++++
 src/layout/Layout.vue                         |  3 ++
 .../src/components/LayoutRadioPicker.vue      | 12 +++++
 src/layout/components/useRenderLayout.tsx     | 16 ++++++-
 src/types/layout.d.ts                         |  2 +-
 src/views/spread/excel/index.vue              | 45 +++++++++++++++++++
 src/views/spread/excel/index1.vue             | 44 ++++++++++++++++++
 src/views/spread/excel/index2.vue             | 42 +++++++++++++++++
 9 files changed, 179 insertions(+), 4 deletions(-)
 create mode 100644 src/views/spread/excel/index.vue
 create mode 100644 src/views/spread/excel/index1.vue
 create mode 100644 src/views/spread/excel/index2.vue

diff --git a/.env.base b/.env.base
index fdb26d85..ad0d5313 100644
--- a/.env.base
+++ b/.env.base
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://192.168.2.132:48080'
 
 # 上传路径
 VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'
diff --git a/package.json b/package.json
index 7a00c122..9ba0e214 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,23 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.1.0",
     "@form-create/element-ui": "^3.1.17",
+    "@grapecity/spread-excelio": "^16.1.0",
+    "@grapecity/spread-sheets": "^16.1.0",
+    "@grapecity/spread-sheets-barcode": "^16.1.0",
+    "@grapecity/spread-sheets-charts": "^16.1.0",
+    "@grapecity/spread-sheets-designer": "^16.1.0",
+    "@grapecity/spread-sheets-designer-resources-cn": "^16.1.0",
+    "@grapecity/spread-sheets-designer-vue": "^16.1.0",
+    "@grapecity/spread-sheets-io": "^16.1.0",
+    "@grapecity/spread-sheets-languagepackages": "^16.1.0",
+    "@grapecity/spread-sheets-pdf": "^16.1.0",
+    "@grapecity/spread-sheets-pivot-addon": "^16.1.0",
+    "@grapecity/spread-sheets-print": "^16.1.0",
+    "@grapecity/spread-sheets-resources-zh": "^16.1.0",
+    "@grapecity/spread-sheets-shapes": "^16.1.0",
+    "@grapecity/spread-sheets-slicers": "^16.1.0",
+    "@grapecity/spread-sheets-tablesheet": "^16.1.0",
+    "@grapecity/spread-sheets-vue": "^16.1.0",
     "@iconify/iconify": "^3.1.0",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.1.0",
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 5c43e52d..88f727fb 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -38,6 +38,9 @@ const renderLayout = () => {
     case 'cutMenu':
       const { renderCutMenu } = useRenderLayout()
       return renderCutMenu()
+    case 'desgin':
+      const { renderDesign } = useRenderLayout()
+      return renderDesign()
     default:
       break
   }
diff --git a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
index b500683a..bd055a39 100644
--- a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
@@ -55,6 +55,18 @@ const layout = computed(() => appStore.getLayout)
     >
       <div class="absolute h-full w-[33%] top-0 left-[10%] bg-gray-200"></div>
     </div>
+    <div
+      :class="[
+        `${prefixCls}__cut-menu`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'desgin'
+        }
+      ]"
+      @click="appStore.setLayout('desgin')"
+    >
+      <div class="absolute h-full w-[33%] top-0 left-[10%] bg-gray-200"></div>
+    </div>
   </div>
 </template>
 
diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx
index ab42e43f..2cfd434a 100644
--- a/src/layout/components/useRenderLayout.tsx
+++ b/src/layout/components/useRenderLayout.tsx
@@ -268,11 +268,23 @@ export const useRenderLayout = () => {
       </>
     )
   }
-
+  const renderDesign = () => {
+    return (
+      <>
+        <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
+          {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
+        </div>
+        <div class="absolute top-[var(--logo-height)] left-0 w-full h-[calc(100%-var(--logo-height))] flex">
+          243
+        </div>
+      </>
+    )
+  }
   return {
     renderClassic,
     renderTopLeft,
     renderTop,
-    renderCutMenu
+    renderCutMenu,
+    renderDesign
   }
 }
diff --git a/src/types/layout.d.ts b/src/types/layout.d.ts
index cad3e2af..60316fbd 100644
--- a/src/types/layout.d.ts
+++ b/src/types/layout.d.ts
@@ -1 +1 @@
-export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
+export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu' | 'desgin'
diff --git a/src/views/spread/excel/index.vue b/src/views/spread/excel/index.vue
new file mode 100644
index 00000000..09d63e8b
--- /dev/null
+++ b/src/views/spread/excel/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <el-button @click="setDataSource">绑定数据源</el-button>
+    <div id="ssDesigner" style="height: 700px; width: 100%; text-align: left"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
+import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
+import '@grapecity/spread-sheets-shapes'
+import '@grapecity/spread-sheets-pivot-addon'
+import '@grapecity/spread-sheets-tablesheet'
+import GC from '@grapecity/spread-sheets'
+import '@grapecity/spread-sheets-resources-zh'
+GC.Spread.Common.CultureManager.culture('zh-cn')
+import '@grapecity/spread-sheets-designer-resources-cn'
+import '@grapecity/spread-sheets-designer'
+
+export default {
+  name: 'Designer',
+  props: {},
+  setup() {
+    let designer: any
+    let spreadDom
+    let spread
+    const setDataSource = () => {
+      alert('oo')
+    }
+    onMounted(() => {
+      designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('ssDesigner'))
+      spreadDom = designer.getWorkbook().getHost()
+      spread = GC.Spread.Sheets.findControl(spreadDom)
+    })
+
+    return {
+      designer,
+      spread,
+      setDataSource
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/spread/excel/index1.vue b/src/views/spread/excel/index1.vue
new file mode 100644
index 00000000..2bf4c6c9
--- /dev/null
+++ b/src/views/spread/excel/index1.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="my-process-designer__container">
+    <div
+      class="my-process-designer__canvas"
+      ref="bpmnCanvas"
+      id="bpmnCanvas"
+      style="width: 1680px; height: 800px"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts" name="excel">
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+// 翻译方法
+import customTranslate from '@/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate'
+import translationsCN from '@/components/bpmnProcessDesigner/package/designer/plugins/translate/zh'
+let bpmnModeler: any = null
+
+const additionalModules = computed(() => {
+  const Modules: any[] = []
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(translationsCN)]
+  }
+  Modules.push(TranslateModule)
+  return Modules
+})
+const initBpmn = () => {
+  let data = document.getElementById('bpmnCanvas')
+  bpmnModeler = new BpmnModeler({
+    container: data,
+    keyboard: { bindTo: document },
+    additionalModules: additionalModules.value
+  })
+  bpmnModeler.createDiagram(() => {
+    bpmnModeler.get('canvas').zoom('fit-viewport')
+  })
+}
+onMounted(() => {
+  initBpmn()
+})
+</script>
+
+<style last="scss" scoped></style>
diff --git a/src/views/spread/excel/index2.vue b/src/views/spread/excel/index2.vue
new file mode 100644
index 00000000..a13b6066
--- /dev/null
+++ b/src/views/spread/excel/index2.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-button>上传excel1</el-button>
+    <div ref="ssHost" style="height: 500px; width: 100%; text-align: left"></div>
+  </div>
+</template>
+
+<script setup lang="ts" name="excel">
+import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
+import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
+import '@grapecity/spread-sheets-vue'
+import GC from '@grapecity/spread-sheets'
+import '@grapecity/spread-sheets-resources-zh'
+GC.Spread.Common.CultureManager.culture('zh-cn')
+
+const ssHost: any = ref(null)
+onMounted(() => {
+  let workbook = new GC.Spread.Sheets.Workbook(ssHost.value)
+  let sheet = workbook.getActiveSheet()
+  console.log(sheet)
+
+  const formData: Array<object> = reactive([
+    { label: '姓名', value: '12' },
+    { label: '年龄', value: '32' },
+    { label: '性别', value: '2' },
+    { label: '电话', value: '2' },
+    { label: '邮箱', value: '2' },
+    { label: '地址', value: '2' },
+    { label: '教育背景', value: '2' },
+    { label: '工作经历', value: '2' },
+    { label: '技能', value: '2' }
+  ])
+  // 渲染表单
+  formData.forEach((field, index) => {
+    sheet.getCell(index, 0).value(field.label)
+    sheet.getCell(index, 1).value(field.value)
+  })
+  console.log(workbook, ssHost, formData)
+})
+</script>
+
+<style last="scss" scoped></style>
-- 
Gitee