Pre Merge pull request !43 from ahaos/tspr

package.json

@@ -23,24 +23,23 @@
     "animate.css": "4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^1.3.4",
+    "crypto-js": "^4.1.1",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
-    "crypto-js": "^4.1.1",
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
     "path-to-regexp": "6.2.0",
     "pinia": "2.0.22",
     "screenfull": "6.0.0",
-    "vform3-builds": "3.0.8",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.4",
-    "vue-types": "^5.0.3"
+    "vue-types": "5.1.1"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.40",
@@ -73,10 +72,10 @@
     "unplugin-auto-import": "0.13.0",
     "unplugin-icons": "0.15.1",
     "unplugin-vue-components": "0.23.0",
+    "unplugin-vue-setup-extend-plus": "0.4.9",
     "vite": "4.3.1",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
-    "unplugin-vue-setup-extend-plus": "0.4.9",
     "vitest": "^0.29.7",
     "vue-eslint-parser": "9.1.0",
     "vue-tsc": "0.35.0"

src/assets/styles/index.scss

@@ -7,7 +7,7 @@
 @import './ruoyi.scss';
 @import 'animate.css';
 @import 'element-plus/dist/index.css';
-
+@import '../../../lib/designer.style.css';
 body {
   height: 100%;
   margin: 0;

src/components/BuildCode/index.vue

@@ -1,22 +1,36 @@
 <!-- 代码构建 -->
+<template>
+  <div class="reset">
+    <v-form-designer class="build" ref="buildRef" :designer-config="designerConfig">
+      <template #customToolButtons v-if="showBtn">
+        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
+      </template>
+    </v-form-designer>
+  </div>
+</template>
+
 <script setup lang="ts">
 
+import { propTypes } from "@/utils/propTypes";
+
 const props = defineProps({
-  showBtn: {
-    type: Boolean,
-    default: false
-  },
-  formJson: {
-    type: Object,
-    default: undefined
-  }
+  showBtn: propTypes.bool.def(false),
+  formJson: propTypes.object.def({})
 })
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const designerConfig = reactive({
+  languageMenu: true,
+  toolbarMaxWidth: 450,
+  // importJsonButton: false,
+  // exportJsonButton: false,
+  exportCodeButton: false,
+  // generateSFCButton: false,
+  formTemplates: true
+})
+
 const buildRef = ref();
 const emits = defineEmits(['reJson', 'saveDesign']);
 
-
-
 //获取表单json
 const getJson = () => {
   const formJson = JSON.stringify(buildRef.value.getFormJson())
@@ -34,20 +48,6 @@ onMounted(() => {
 })
 </script>
 
-<template>
-  <div>
-    <v-form-designer
-      class="build"
-      ref="buildRef"
-      :designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
-    >
-      <template #customToolButtons v-if="showBtn">
-        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
-      </template>
-    </v-form-designer>
-  </div>
-</template>
-
 <style lang="scss">
 .build {
   margin: 0 !important;
@@ -60,5 +60,8 @@ onMounted(() => {
   & .right-toolbar-con {
     text-align: right !important;
   }
+}
+.reset {
+
 }
 </style>

src/components/BuildCode/render.vue

@@ -1,22 +1,15 @@
 <!-- 动态表单渲染 -->
 <script setup name="Render">
 
+import { propTypes } from "@/utils/propTypes";
+
 const props = defineProps({
-  formJson: {
-    type: [String, Object],
-    default: ""
-  },
-  formData: {
-    type: [String, Object],
-    default: ""
-  },
-  isView: {
-    type: Boolean,
-    default: false
-  }
+  formJson: propTypes.oneOfType([propTypes.object, propTypes.string]).def(''),
+  formData: propTypes.oneOfType([propTypes.object, propTypes.string]).def(''),
+  isView: propTypes.bool.def(false)
 })
 
-const vFormRef = ref(null)
+const vFormRef = ref()
 // 获取表单数据-异步
 const getFormData = () => {
   return vFormRef.value.getFormData()
@@ -24,7 +17,7 @@ const getFormData = () => {
 
 /**
  * 设置表单内容
- * @param {表单配置} formConf
+ * @param { * } formConf
  * formConfig：{ formTemplate：表单模板，formData：表单数据，hiddenField：需要隐藏的字段字符串集合，disabledField：需要禁用的自读字符串集合}
  */
 const initForm = (formConf) => {

src/components/DictTag/index.vue

@@ -26,16 +26,13 @@
 
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes';
-
+import { array } from "vue-types";
 
 const props = defineProps({
   // 数据
-  options: {
-    type: Array as PropType<DictDataOption[]>,
-    default: null,
-  },
+  options: array<DictDataOption>().def([]),
   // 当前的值
-  value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
+  value: propTypes.oneOfType([propTypes.string, propTypes.number, array<number | string>()]),
   // 当未找到匹配的数据时，显示value
   showValue: propTypes.bool.def(true),
   separator: propTypes.string.def(","),

src/components/ImagePreview/index.vue

@@ -13,14 +13,8 @@ import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
   src: propTypes.string.def(''),
-  width: {
-    type: [Number, String],
-    default: ""
-  },
-  height: {
-    type: [Number, String],
-    default: ""
-  }
+  width: propTypes.oneOfType([propTypes.string, propTypes.number]).def(''),
+  height: propTypes.oneOfType([propTypes.string, propTypes.number]).def('')
 });
 
 const realSrc = computed(() => {
@@ -33,7 +27,7 @@ const realSrc = computed(() => {
 
 const realSrcList = computed(() => {
   if (!props.src) {
-    return;
+    return [];
   }
   let real_src_list = props.src.split(",");
   let srcList: string[] = [];

src/components/ImageUpload/index.vue

@@ -55,10 +55,7 @@ const props = defineProps({
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: propTypes.array.def(["png", "jpg", "jpeg"]),
     // 是否显示提示
-    isShowTip: {
-        type: Boolean,
-        default: true
-    },
+    isShowTip: propTypes.bool.def(true)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

src/components/Pagination/index.vue

@@ -22,16 +22,14 @@ export default {
 
 <script setup lang="ts">
 import { scrollTo } from '@/utils/scroll-to'
-import { propTypes } from "@/utils/propTypes";
+import { propTypes } from '@/utils/propTypes';
+import { array } from 'vue-types';
 
 const props = defineProps({
     total: propTypes.number,
     page: propTypes.number.def(1),
     limit: propTypes.number.def(20),
-    pageSizes: {
-      type: Array as PropType<number[]>,
-      default: () => [10, 20, 30, 50]
-    },
+    pageSizes: array<number>().def([10, 20, 30, 50]),
     // 移动端页码按钮的数量端默认值5
     pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
     layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),

src/components/RightToolbar/index.vue

@@ -29,12 +29,11 @@
 
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes';
+import { array } from "vue-types";
 
 const props = defineProps({
     showSearch: propTypes.bool.def(true),
-    columns: {
-        type: Array as PropType<FieldOption[]>,
-    },
+    columns: array<FieldOption>(),
     search: propTypes.bool.def(true),
     gutter: propTypes.number.def(10),
 })

src/components/TreeSelect/index.vue

@@ -30,40 +30,23 @@
 
 <script setup lang="ts">
 
+import { propTypes } from "@/utils/propTypes";
+
 const props = defineProps({
   /* 配置项 */
-  objMap: {
-    type: Object,
-    default: () => {
-      return {
-        value: 'id', // ID字段名
-        label: 'label', // 显示名称
-        children: 'children' // 子级字段名
-      }
-    }
-  },
+  objMap: propTypes.object.def({
+    value: 'id', // ID字段名
+    label: 'label', // 显示名称
+    children: 'children' // 子级字段名
+  }),
   /* 自动收起 */
-  accordion: {
-    type: Boolean,
-    default: () => {
-      return false
-    }
-  },
+  accordion: propTypes.bool.def(false),
   /**当前双向数据绑定的值 */
-  value: {
-    type: [String, Number],
-    default: ''
-  },
+  value: propTypes.oneOfType([propTypes.string, propTypes.number]),
   /**当前的数据 */
-  options: {
-    type: Array,
-    default: () => []
-  },
+  options: propTypes.array.def([]),
   /**输入框内部的文字 */
-  placeholder: {
-    type: String,
-    default: ''
-  }
+  placeholder: propTypes.string.def('')
 })
 
 

src/layout/components/InnerLink/index.vue

@@ -5,14 +5,11 @@
 </template>
 
 <script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 const props = defineProps({
-    src: {
-        type: String,
-        default: "/"
-    },
-    iframeId: {
-        type: String
-    }
+    src: propTypes.string.def('/'),
+    iframeId: propTypes.string
 });
-const height = ref(document.documentElement.clientHeight - 94.5 + "px");
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px');
 </script>

src/layout/components/Sidebar/Link.vue

@@ -6,12 +6,10 @@
 
 <script setup lang="ts">
 import { isExternal } from '@/utils/validate'
+import { propTypes } from "@/utils/propTypes";
 
 const props = defineProps({
-    to: {
-        type: [String, Object],
-        required: true
-    }
+    to: propTypes.oneOfType([propTypes.string, propTypes.object]).isRequired
 })
 
 const isExt = computed(() => {
@@ -25,7 +23,7 @@ const type = computed(() => {
     return 'router-link'
 })
 
-function linkProps() {
+const linkProps = () => {
     if (isExt.value) {
         return {
             href: props.to,

src/layout/components/Sidebar/Logo.vue

@@ -26,13 +26,11 @@ import variables from '@/assets/styles/variables.module.scss'
 import logo from '@/assets/logo/logo.png'
 import useSettingsStore from '@/store/modules/settings'
 import { ComponentInternalInstance } from "vue";
+import { propTypes } from "@/utils/propTypes";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 defineProps({
-    collapse: {
-        type: Boolean,
-        required: true
-    }
+    collapse: propTypes.bool.def(true)
 })
 
 const title = ref('RuoYi-Vue-Plus');

src/layout/components/Sidebar/SidebarItem.vue

@@ -21,7 +21,7 @@
         v-for="child in item.children"
         :key="child.path"
         :is-nest="true"
-        :item="child as RouteOption"
+        :item="child"
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
@@ -34,22 +34,14 @@ import { isExternal } from '@/utils/validate'
 import AppLink from './Link.vue'
 import { getNormalPath } from '@/utils/ruoyi'
 import { RouteOption } from "vue-router";
-import { PropType } from "vue";
+import { propTypes } from "@/utils/propTypes";
+import { object } from 'vue-types';
 
 const props = defineProps({
     // route object
-    item: {
-        type: Object as PropType<RouteOption>,
-        required: true
-    },
-    isNest: {
-        type: Boolean,
-        default: false
-    },
-    basePath: {
-        type: String,
-        default: ''
-    }
+    item: object<RouteOption>().isRequired,
+    isNest: propTypes.bool.def(false),
+    basePath: propTypes.string.def('')
 })
 
 const onlyOneChild = ref<any>({});

src/main.ts

@@ -46,10 +46,16 @@ app.config.globalProperties.selectDictLabel = selectDictLabel;
 app.config.globalProperties.selectDictLabels = selectDictLabels;
 app.config.globalProperties.animate = animate;
 
+// vform3
+import ElementPlus from 'element-plus';
+import VForm3 from '@/../lib/designer.umd.js';
+
 app.use(ElementIcons);
 app.use(router);
 app.use(store);
 app.use(i18n);
+app.use(VForm3);
+app.use(ElementPlus);
 app.use(plugins);
 // 自定义指令
 directive(app);

src/views/tool/build/index.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>表单构建 <svg-icon icon-class="build" /></div>
+  <!--<div>表单构建 <svg-icon icon-class="build" /></div>-->
+  <BuildCode :show-btn="showBtn" @reJson="getJson"></BuildCode>
+  <!--<render ref="formRef" :form-json="setJson" @getFormData="getFormData" />-->
 </template>
+
+<script setup lang="ts">
+
+const showBtn = ref(false)
+const getJson = (value: any) => {
+  console.log(value)
+}
+</script>

vite.config.ts

@@ -53,6 +53,11 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         ]
       }
     },
+    build: {
+      commonjsOptions: {
+        // include: /node_modules|lib/
+      }
+    },
     // 预编译
     optimizeDeps: {
       include: [
@@ -68,6 +73,7 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'vue-i18n',
         '@vueup/vue-quill',
         '@iconify/iconify',
+        '@/../lib/designer.umd.js',
 
         'element-plus/es/components/form/style/css',
         'element-plus/es/components/form-item/style/css',