同步代码

src/services/config/index.ts

@@ -16,8 +16,8 @@ const menuConfig: IModules = {
 
 /** @type {http请求地址} */
 const urlConfig: IUrl = {
-    importUrl:'import',
-    test:'test'
+    importUrl: 'import',
+    test: 'test'
 }
 
 /** @type {http请求地址} */
@@ -31,21 +31,21 @@ const userUrlConfig: IUrl = {
     //获取当前用户信息
     getUserInfo: "user/getUserInfo",
     //注册
-    register:"user/register",
+    register: "user/register",
     //添加用户
-    addUser:'message/add',
+    addUser: 'message/add',
     //获取用户
-    getUser:'/message/list',
+    getUser: 'message/list',
     //编辑用户
-    editUser:'message/edit',
+    editUser: 'message/edit',
     //删除用户
-    deleteUser:'message/delete',
+    deleteUser: 'message/delete',
 }
 
 /** @type {http请求地址} */
 const authUrlConfig: IUrl = {
     //查询账号角色
-    findRoleByUser:'userAccount/findRoleByUser',
+    findRoleByUser: 'userAccount/findRoleByUser',
     //添加菜单
     addMenu: "permission/add",
     //删除菜单
@@ -53,46 +53,46 @@ const authUrlConfig: IUrl = {
     //编辑菜单
     editMenu: "permission/edit",
     //获取菜单路由
-    getMenuTree:'permission/getMenuTree',
+    getMenuTree: 'permission/getMenuTree',
     //获取权限树
     getPermissionTree: "permission/list",
     //查询角色授权
-    queryRoleMenu:"permission/queryRolePermission",
+    queryRoleMenu: "permission/queryRolePermission",
     //查询所有权限树
     queryTreeList: "permission/queryTreeList",
     //保存角色授权
-    saveRolePermission:'permission/saveRolePermission',
+    saveRolePermission: 'permission/saveRolePermission',
     //角色分页查询
-    getRoleList:'role/list',
+    getRoleList: 'role/list',
     //添加角色
-    addRole:'role/add',
+    addRole: 'role/add',
     //删除角色
-    deleteRole:'role/delete',
+    deleteRole: 'role/delete',
     //编辑角色
-    editRole:'role/edit',
+    editRole: 'role/edit',
     //获取全部角色
-    getAllRole:'role/queryAll',
+    getAllRole: 'role/queryAll',
 }
 
 /** @type {http请求地址} */
 const tableCreatorUrlConfig: IUrl = {
     //创建表
-    createTable:'starbos_codegenerator/generatetable/create',
+    createTable: 'starbos_codegenerator/generatetable/create',
     //查询表
-    queryTable:'starbos_codegenerator/generatetable/list',
+    queryTable: 'starbos_codegenerator/generatetable/list',
     //获取文件类型
-    getFiledType:'starbos_codegenerator/generatetable/getFiledType',
+    getFiledType: 'starbos_codegenerator/generatetable/getFiledType',
 }
 
 const projectUrlConfig: IUrl = {
     //创建项目
-    addProject:'starbos_project/project/add',
+    addProject: 'starbos_project/project/add',
     //删除项目
-    deleteProject:'starbos_project/project/delete',
+    deleteProject: 'starbos_project/project/delete',
     //编辑项目
-    editProject:'starbos_project/project/edit',
+    editProject: 'starbos_project/project/edit',
     //分页查询项目
-    projectList:'starbos_project/project/list'
+    projectList: 'starbos_project/project/list'
 }
 
 

src/views/system/userManage.vue

@@ -2,7 +2,7 @@
     <div class="router" style="padding: 20px;">
         <el-form :inline="true">
             <el-form-item>
-                <el-button type="primary" size="small" @click="handleAdd">添加用户</el-button>
+                <el-button type="primary" size="small" icon="plus" @click="handleAdd">添加用户</el-button>
             </el-form-item>
         </el-form>
         <el-table :data="tableData" border scrollbar-always-on>

src/vueFormCreate/components/ComponentGroup.vue

 <template>
   <div class="widget-cate">{{ title }}</div>
+  <!-- group 两组名要相同， pull: 'clone' 以克隆的方式拖出，这个组的数据不会有问题，  put: false 禁止拖入-->
   <Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }"
     :sort="false" :list="list">
     <template #item="{ element }">

src/vueFormCreate/components/SvgIcon.vue

 <template>
-  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$attrs" />
-  <svg v-else :class="svgClass" arig-hidden="true" v-on="$attrs">
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="attrs" />
+  <svg v-else :class="svgClass" arig-hidden="true" v-on="attrs">
     <use :href="iconName" />
   </svg>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import * as utils from '../utils'
 
+const attrs = useAttrs()
+
 const props = defineProps({
   iconClass: {
     type: String,

src/vueFormCreate/config/element.ts

@@ -47,10 +47,6 @@ export const widgetForm: WidgetForm = {
     formId: ''
   }
 }
-export const put = () => {
-  console.log('widgetForm', widgetForm);
-
-}
 
 export const basicComponents = [
   {

src/vueFormCreate/core/element/ElCustomHeader.vue

 <template>
   <el-header class="btn-bar">
     <slot></slot>
-    <el-button v-if="$attrs.uploadJson" type="text" @click="$emit('uploadJson')">
+    <el-button v-if="$attrs.uploadJson" type="text" @click="emits('uploadJson')">
       <template #icon>
         <SvgIcon iconClass="upload" />
       </template>
       导入JSON
     </el-button>
-    <el-button v-if="$attrs.clearable" type="text" @click="$emit('clearable')">
+    <el-button v-if="$attrs.clearable" type="text" @click="emits('clearable')">
       <template #icon>
         <SvgIcon iconClass="clearable" />
       </template>
       清空
     </el-button>
-    <el-button v-if="$attrs.preview" type="text" @click="$emit('preview')">
+    <el-button v-if="$attrs.preview" type="text" @click="emits('preview')">
       <template #icon>
         <SvgIcon iconClass="preview" />
       </template>
       预览
     </el-button>
-    <el-button v-if="$attrs.generateJson" type="text" @click="$emit('generateJson')">
+    <el-button v-if="$attrs.generateJson" type="text" @click="emits('generateJson')">
       <template #icon>
         <SvgIcon iconClass="generate-json" />
       </template>
       生成JSON
     </el-button>
-    <el-button v-if="$attrs.generateCode" type="text" @click="$emit('generateCode')">
+    <el-button v-if="$attrs.generateCode" type="text" @click="emits('generateCode')">
       <template #icon>
         <SvgIcon iconClass="generate-code" />
       </template>

src/vueFormCreate/core/element/ElDesignForm.vue

@@ -11,7 +11,7 @@
             </div>
           </el-aside>
           <el-main class="center-container">
-            <ElCustomHeader v-bind="$props" @preview="() => (state.previewVisible = true)"
+            <ElCustomHeader v-bind="props" @preview="() => (state.previewVisible = true)"
               @uploadJson="() => (state.uploadJsonVisible = true)" @generateJson="handleGenerateJson"
               @generateCode="handleGenerateCode" @clearable="handleClearable">
               <slot name="header"></slot>
@@ -79,7 +79,7 @@
         </template>
       </el-dialog>
 
-      <el-dialog v-model="state.dataCodeVisible" title="生产代码" :width="800">
+      <el-dialog v-model="state.dataCodeVisible" title="生成代码" :width="800">
         <el-tabs type="card" v-model="state.codeLanguage" :tabBarStyle="{ margin: 0 }">
           <el-tab-pane label="Vue Component" :name="state.codeType.Vue">
             <CodeEditor :value="state.dataCodeTemplate" language="html" readonly />
@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, PropType, toRefs, watchEffect, ref, nextTick } from 'vue'
+import { reactive, watchEffect, ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { defaultsDeep } from 'lodash'
 import CodeEditor from '../../components/CodeEditor.vue'
@@ -135,6 +135,11 @@ const props = defineProps({
   clearable: {
     type: Boolean,
     default: true
+  },
+  // 设置盒子的最小高度
+  height: {
+    type: Number,
+    default: 400
   }
 })
 
@@ -143,7 +148,6 @@ const state = reactive({
   codeType: CodeType,
   widgetForm: JSON.parse(JSON.stringify(element.widgetForm)),
   widgetFormSelect: undefined,
-  generateFormRef: null as any,
   configTab: 'widget',
   previewVisible: false,
   uploadJsonVisible: false,
@@ -161,6 +165,7 @@ const state = reactive({
 })
 
 const formConfigRef = ref()
+const generateFormRef = ref()
 
 const showPreviewVisible = () => {
   state.previewVisible = true
@@ -200,15 +205,13 @@ const handleCopyClick = (text: string) => {
 }
 // 获取数据
 const handleGetData = () => {
-  state.generateFormRef.getData().then((res: any) => {
+  generateFormRef.value.getData().then((res: any) => {
     const dataForm = {
       id: '',
       list: res,
       formid: state.widgetForm.config.formField
     }
-    console.log('Object数据', dataForm);
     state.dataJsonTemplate = JSON.stringify(dataForm, null, 2)
-    console.log('json数据', state.dataJsonTemplate);
     state.dataJsonVisible = true
   })
 }
@@ -231,8 +234,9 @@ const handleGenerateJson1 = () => {
   ))
 }
 
+// 生成代码
 const handleGenerateCode = () => {
-  state.codeLanguage = CodeType.Vue
+  state.codeLanguage = CodeType.Vue // vue
   state.dataCodeVisible = true
 }
 
@@ -246,6 +250,7 @@ watchEffect(() => {
   }
 })
 
+// 清空数据
 const handleClearable = () => {
   state.widgetForm.list = []
   nextTick(() => defaultsDeep(
@@ -255,7 +260,7 @@ const handleClearable = () => {
   state.widgetFormSelect = undefined
 }
 
-const handleReset = () => state.generateFormRef.reset()
+const handleReset = () => generateFormRef.value.reset()
 
 const getJson = () => state.widgetForm
 
@@ -270,6 +275,7 @@ const setJson = (json: WidgetForm) => {
 const getTemplate = (codeType: CodeType) =>
   generateCode(state.widgetForm, codeType, PlatformType.Element)
 
+// 使用最新数据
 const clear = () => {
   handleClearable()
   formConfigRef.value.updataNewData(element.widgetForm)
@@ -282,3 +288,6 @@ defineExpose({
   clear
 })
 </script>
+
+<style lang="scss" scoped>
+</style>

src/vueFormCreate/core/element/ElGenerateForm.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, toRefs, watch } from 'vue'
+import { onMounted, reactive, toRefs, watch, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import ElGenerateFormItem from './ElGenerateFormItem.vue'
 import { element } from '../../config'
@@ -42,8 +42,9 @@ const props = defineProps({
   }
 })
 
+const generateForm = ref()
+
 const state = reactive({
-  generateForm: null as any,
   model: {} as any,
   rules: {} as any,
   widgetForm:
@@ -112,25 +113,22 @@ onMounted(() => {
 
 const getData = () => {
   return new Promise((resolve, reject) => {
-    state.generateForm
-      .validate()
-      .then((validate: boolean) => {
-        if (validate) {
-          // console.log('成功', state.generateForm);
-          resolve(state.model)
-        } else {
-          // console.log('失败');
-          ElMessage.error('验证失败')
-        }
-      })
-      .catch((error: Error) => {
-        reject(error)
-      })
+    generateForm.value.validate().then((validate: boolean) => {
+      if (validate) {
+        // console.log('成功', state.generateForm);
+        resolve(state.model)
+      } else {
+        // console.log('失败');
+        ElMessage.error('验证失败')
+      }
+    }).catch((error: Error) => {
+      reject(error)
+    })
   })
 }
 
 const reset = () => {
-  state.generateForm.resetFields()
+  generateForm.value.resetFields()
 }
 
 defineExpose({

src/vueFormCreate/core/element/ElWidgetForm.vue

@@ -4,6 +4,10 @@
     <el-form label-suffix=":" :size="widgetForm.config.size" :label-position="widgetForm.config.labelPosition"
       :label-width="`${widgetForm.config.labelWidth}px`"
       :hide-required-asterisk="widgetForm.config.hideRequiredAsterisk">
+      <!-- ghostClass 拖拽中的css样式 handle 只有当鼠标移动到css为mover类的元素上才能拖动 -->
+      <!-- group 分组 同一组的不同的list可以拖动 -->
+      <!-- transition-group 用于列表的过渡效果 默认为key，可以用tag转换-->
+      <!-- 当拖拽为 栅格布局时 -->
       <Draggable class="widget-form-list" item-key="key" ghostClass="ghost" handle=".drag-widget" :animation="200"
         :group="{ name: 'people' }" :list="widgetForm.list" @add="handleMoveAdd">
         <template #item="{ element, index }">
@@ -158,11 +162,16 @@ const handleDeleteClick = (index: number, list: any[]) => {
   })
 }
 
+
+// 添加单元时的回调
 const handleMoveAdd = (event: any) => {
+  // console.log(event, 'event');
+  // 添加单元的索引
   const { newIndex } = event
-
+  // 随机产生一个可以
   const key = v4().replaceAll('-', '')
   const list = JSON.parse(JSON.stringify(props.widgetForm.list))
+  // console.log(list, 'liss');
 
   list[newIndex] = {
     ...list[newIndex],
@@ -198,6 +207,7 @@ const handleMoveAdd = (event: any) => {
   emits('update:widgetFormSelect', list[newIndex])
 }
 
+// 拖拽到栅格布局中
 const handleColMoveAdd = (
   event: any,
   row: any,

src/vueFormCreate/core/element/ElWidgetFormItem.vue

@@ -142,8 +142,8 @@
       </template>
     </el-form-item>
     <div class="widget-view-action" v-if="selectWidget?.key === element.key">
-      <SvgIcon iconClass="copy" @click.stop="$emit('copy')" />
-      <SvgIcon iconClass="delete" @click.stop="$emit('delete')" />
+      <SvgIcon iconClass="copy" @click.stop="emits('copy')" />
+      <SvgIcon iconClass="delete" @click.stop="emits('delete')" />
     </div>
 
     <div class="widget-view-drag" v-if="selectWidget?.key === element.key">
@@ -153,7 +153,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, PropType } from 'vue'
+import { PropType } from 'vue'
 import SvgIcon from '../../components/SvgIcon.vue'
 import RichTextEditor from '../../components/RichTextEditor.vue'
 import { WidgetForm } from '../../config/element'

src/vueFormCreate/styles/element.styl

-.fc-style
-  .el-main
-    padding 0
-  .el-dialog__header
-    border-bottom 1px solid #f0f0f0
-  .el-dialog__body
-    padding 15px 20px
-  .el-dialog__footer
-    border-top 1px solid #F2F6FC
-    padding 10px 15px
-  .config-content
-    .el-radio-group
-      margin-top 10px
-      vertical-align super
-    .el-radio
-      margin-bottom 10px
-  .el-rate
-    margin-top 6px
-  .el-checkbox
-    line-height 32px
+.fc-style {
+  .el-main {
+    padding: 0;
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .el-dialog__body {
+    padding: 15px 20px;
+  }
+
+  .el-dialog__footer {
+    border-top: 1px solid #F2F6FC;
+    padding: 10px 15px;
+  }
+
+  .config-content {
+    .el-radio-group {
\ No newline at end of file
+      margin-top: 10px;
+      vertical-align: super;
+    }
+
+    .el-radio {
+      margin-bottom: 10px;
+    }
+  }
+
+  .el-rate {
+    margin-top: 6px;
+  }
+
+  .el-checkbox {
+    line-height: 32px;
+  }
+}
\ No newline at end of file

src/vueFormCreate/styles/scrollbar.styl

-::-webkit-scrollbar
-  width 5px
-  height 5px
-::-webkit-scrollbar-thumb
-  border-radius 1em
-  background-color rgba(50, 50, 50, 0.3)
-::-webkit-scrollbar-track
-  border-radius 1em
-  background-color rgba(50, 50, 50, 0.1)
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.3);
+}
\ No newline at end of file
+
+::-webkit-scrollbar-track {
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.1);
+}
\ No newline at end of file

vite.config.ts

-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
 // vite 提供的操作env配置变量的方法loadEnv
-import { loadEnv } from "vite";
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
 // nodejs写法，获取项目目录
 import path from "path";
 
 //按需要加载
-import AutoImport from "unplugin-auto-import/vite";
-import Components from "unplugin-vue-components/vite";
-import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
-import Icons from "unplugin-icons/vite";
-import IconsResolver from "unplugin-icons/resolver";
+// import AutoImport from "unplugin-auto-import/vite";
+// import Components from "unplugin-vue-components/vite";
+// import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+// import Icons from "unplugin-icons/vite";
+// import IconsResolver from "unplugin-icons/resolver";
 import Inspect from "vite-plugin-inspect";
 // import { viteMockServe } from "vite-plugin-mock";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
@@ -31,49 +30,6 @@ export default ({ command, mode }) => {
         // 指定symbolId格式
         symbolId: "icon-[dir]-[name]",
       }),
-      // viteMockServe({
-      //   // default
-      //   mockPath: "mock",
-      // }),
-      // AutoImport({
-      //     // Auto import functions from Vue, e.g. ref, reactive, toRef...
-      //     // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
-      //     imports: ['vue'],
-
-      //     // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
-      //     // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
-      //     resolvers: [
-      //         ElementPlusResolver(),
-
-      //         // Auto import icon components
-      //         // 自动导入图标组件
-      //         IconsResolver({
-      //             prefix: 'Icon',
-      //         }),
-      //     ],
-
-      //     dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
-      // }),
-
-      // Components({
-      //     resolvers: [
-      //         // Auto register icon components
-      //         // 自动注册图标组件
-      //         IconsResolver({
-      //             enabledCollections: ['ep'],
-      //         }),
-      //         // Auto register Element Plus components
-      //         // 自动导入 Element Plus 组件
-      //         ElementPlusResolver(),
-      //     ],
-
-      //     dts: path.resolve(pathSrc, 'components.d.ts'),
-      // }),
-
-      // Icons({
-      //     autoInstall: true,
-      // }),
-
       Inspect(),
     ],
     // 服务器配置
@@ -89,7 +45,7 @@ export default ({ command, mode }) => {
         // '/foo': '',
         // 选项写法
         "/integrate": {
-          target: "http://localhost:8090",
+          target: "http://192.168.0.60",
           //  rewrite: (path) => path.replace(/^\/api/, '')
         },
         // 正则表达式写法