feat: 导入导出功能将可以直接看到代码模板。

web/package.json

@@ -12,6 +12,7 @@
     "dependencies": {
         "@codemirror/lang-go": "^6.0.1",
         "@codemirror/lang-javascript": "^6.2.2",
+        "@codemirror/lang-vue": "^0.1.3",
         "@codemirror/theme-one-dark": "^6.1.2",
         "@element-plus/icons-vue": "^2.3.1",
         "@form-create/designer": "^3.2.6",

web/src/view/systemTools/exportTemplate/code.js

@@ -0,0 +1,32 @@
+export const getCode = (templateID) => {
+    return `<template>
+  <!-- 导出组件 -->
+  <ExportExcel templateId="${templateID}" :condition="condition" :limit="limit" :offset="offset" :order="order" />
+
+  <!-- 导入组件 handleSuccess为导入成功后的回调函数 -->
+  <ImportExcel templateId="${templateID}" @on-success="handleSuccess" />
+
+  <!-- 导出模板 -->
+  <ExportTemplate templateId="${templateID}" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+// 导出组件
+import ExportExcel from '@/components/exportExcel/exportExcel.vue';
+// 导入组件
+import ImportExcel from '@/components/exportExcel/importExcel.vue';
+// 导出模板组件
+import ExportTemplate from '@/components/exportExcel/exportTemplate.vue';
+
+const condition = ref({}); // 查询条件
+const limit = ref(10); // 最大条数限制
+const offset = ref(0); // 偏移量
+const order = ref('id desc'); // 排序条件
+
+const handleSuccess = (res) => {
+  console.log(res);
+  // 导入成功的回调函数
+};
+</script>`
+}

web/src/view/systemTools/exportTemplate/exportTemplate.vue

@@ -155,6 +155,13 @@
           min-width="120"
         >
           <template #default="scope">
+            <el-button
+                type="primary"
+                link
+                icon="edit-pen"
+                class="table-button"
+                @click="showCode(scope.row)"
+            >代码</el-button>
             <el-button
               type="primary"
               link
@@ -457,6 +464,37 @@
         </el-form-item>
       </el-form>
     </el-drawer>
+
+    <el-drawer
+        v-model="codeVisible"
+        size="60%"
+        :before-close="closeDialog"
+        :title="type==='create'?'添加':'修改'"
+        :show-close="false"
+        destroy-on-close
+    >
+
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ type==='create'?'添加':'修改' }}</span>
+          <div>
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button
+                type="primary"
+                @click="enterDialog"
+            >确 定</el-button>
+          </div>
+        </div>
+      </template>
+      <codemirror
+          v-model="webCode"
+          placeholder="Code goes here..."
+          :style="{ height: '800px',width:'100%' }"
+          :indent-with-tab="true"
+          :tab-size="2"
+          :extensions=" [vue(), oneDark]"
+      />
+    </el-drawer>
   </div>
 </template>
 
@@ -476,7 +514,10 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref, reactive } from 'vue'
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import {getDB, getTable, getColumn, butler} from '@/api/autoCode'
-
+import {vue} from "@codemirror/lang-vue";
+import {oneDark} from "@codemirror/theme-one-dark";
+import {Codemirror} from "vue-codemirror";
+import {getCode} from './code'
 defineOptions({
   name: 'ExportTemplate'
 })
@@ -871,10 +912,17 @@ const deleteSysExportTemplateFunc = async(row) => {
     getTableData()
   }
 }
-
+const codeVisible = ref(false)
 // 弹窗控制标记
 const dialogFormVisible = ref(false)
 
+const webCode = ref("")
+
+const showCode = (row) =>{
+  webCode.value = getCode(row.templateID)
+  codeVisible.value = true
+}
+
 // 打开弹窗
 const openDialog = () => {
   type.value = 'create'
@@ -883,7 +931,9 @@ const openDialog = () => {
 
 // 关闭弹窗
 const closeDialog = () => {
+  codeVisible.value = false
   dialogFormVisible.value = false
+  activeRow.value = {}
   formData.value = {
     name: '',
     tableName: '',