添加formcreat

frontend/package.json

@@ -11,12 +11,16 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.5",
-    "pinia": "^2.1.7",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@form-create/designer": "^1.1.9",
+    "@form-create/element-ui": "^3.2.22",
+    "@form-create/vant": "^3.2.24",
     "axios": "^1.6.0",
     "element-plus": "^2.4.4",
-    "@element-plus/icons-vue": "^2.3.1"
+    "pinia": "^2.1.7",
+    "vant": "^4.9.19",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

frontend/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
+import FcDesigner  from '@/fcDesignerPro/index.es.js'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import './styles/index.scss'
@@ -17,5 +18,5 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
-
+app.use(FcDesigner)
 app.mount('#app')

frontend/src/router/index.js

@@ -61,6 +61,15 @@ const routes = [
       requiresAuth: true
     }
   },
+  {
+    path: '/FormCreateDesigner',
+    name: 'FormCreateDesigner',
+    component: () => import('@/views/FormCreateDesigner.vue'),
+    meta: {
+      title: '字典管理',
+      requiresAuth: true
+    }
+  },
   {
     path: '/:pathMatch(.*)*',
     name: '404',

frontend/src/views/Dashboard.vue

@@ -81,7 +81,19 @@
         </el-card>
       </div>
     </div>
-    
+     <!-- 快捷操作 -->
+     <div class="quick-actions">
+      <h2>快捷操作</h2>
+      <div class="actions-grid">
+        <el-card class="action-card" @click="$router.push('/FormCreateDesigner')">
+          <div class="action-content">
+            <el-icon class="action-icon"><User /></el-icon>
+            <span>FormCreat 编辑面板</span>
+          </div>
+        </el-card>
+        
+      </div>
+    </div>
     <!-- 最近活动 -->
     <div class="recent-activities">
       <h2>最近活动</h2>

frontend/src/views/FormCreateDesigner.vue

@@ -0,0 +1,91 @@
+<template>
+  <div >
+    <div style="display: flex;justify-content: flex-end;padding: 10px;">
+      <el-button type="primary" @click="exportData">保存</el-button>
+    </div>
+    <FcDesigner ref="designerRef" style="width: 100vw;height:calc(100vh - 60px) " :field="field"
+    :appId="appId"  :config="config" :appUrl="''"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { ElMessage } from 'element-plus-secondary'
+
+import formCreate  from '@/fcDesignerPro/render/element-plus/form-create.es.js'
+
+// import formCreate  from '../fcDesignerPro/render/element-plus/form-create.es.js'
+import { useRoute } from 'vue-router'
+// import { moduleById,moduleUpdate } from '@/api/application/module'
+// const basePath = import.meta.env.VITE_API_BASEPATH
+
+const route = useRoute()
+const designerForm = formCreate.factory();
+debugger
+const appId:any = ref(route.query.appId)
+if(route.query.appId == null){
+    appId.value = '00'
+}
+const designerRef:any = ref();
+const field:any = [{}]
+const config:any = {
+    fieldReadonly: false,
+    showSaveBtn: true,
+}
+const exportData = () => {
+  if (!designerRef.value) return;
+ // 获取规则和配置
+  const rules = designerForm.toJson(designerRef.value.getRule()) ;
+  const options = designerForm.toJson(designerRef.value.getOption());
+  // let data = {
+  //     id:route.query.moduleId,
+  //     canvasStyleData:rules,
+  //     componentData:options,
+  //   }
+  //   moduleUpdate(data).then((res) => {
+  //     if(res.code == 0){
+  //       ElMessage.success('修改成功')
+  //     }else{
+  //       ElMessage.error('修改失败')
+  //     }
+
+  //   }).catch(() => {
+
+  //   })
+};
+onMounted(() => {
+  // designerRef.value.setOption(formCreate.parseJson('{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"125px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}'));
+  // designerRef.value.setRule(formCreate.parseJson('[{"type":"fcInlineForm","_fc_id":"id_Fjdrm1vqsjnub0c","name":"ref_F1mkm1vqsjnub1c","_fc_drag_tag":"fcInlineForm","children":[{"type":"input","field":"Fwqlm1vqu2c1b2c","title":"关键字","$required":false,"_fc_id":"id_F6omm1vqu2c1b3c","name":"ref_F8l5m1vqu2c1b4c","_fc_drag_tag":"input","wrap":{"labelWidth":"5em"},"style":{"width":"180px"},"display":true,"hidden":false},{"type":"select","field":"Fkh7m1vqzakub7c","title":"商品分类","effect":{"fetch":""},"$required":false,"options":[{"label":"熊熊百货","value":"6"},{"label":"时尚优品","value":"3"}],"_fc_id":"id_Ffb3m1vqzakub8c","name":"ref_Floem1vqzakub9c","_fc_drag_tag":"select","wrap":{"labelWidth":"6em"},"style":{"width":"180px"},"display":true,"hidden":false},{"type":"elButton","children":["搜索"],"_fc_id":"id_Fgecm1vquanjb5c","name":"ref_Fdshm1vquanjb6c","_fc_drag_tag":"elButton","style":{"marginLeft":"15px"},"display":true,"hidden":false,"on":{"click":"$FNX:$inject.api.getRule(\'ref_Fd9xlxvrabk0jmc\').props.fetch.action = `https://mer.crmeb.net/api/product/spu/lst?keywrod=${$inject.api.form.Fwqlm1vqu2c1b2c || \'\'}&mer_id=${$inject.api.form.Fkh7m1vqzakub7c || \'\'}`;\\n\\n$inject.api.el(\'ref_Fd9xlxvrabk0jmc\').initPage();"}}],"style":{"display":"flex","flexDirection":"row","alignItems":"flex-start"},"display":true,"hidden":false},{"type":"dataTable","native":true,"props":{"height":"500px","button":{"open":true,"column":[{"key":1,"name":"详情","prop":["link"],"type":"primary","size":"small","click":"[[FORM-CREATE-PREFIX-function click(scope, api){api.open(\'ref_Fraim1unt0jhisc\', scope.row);}-FORM-CREATE-SUFFIX]]"},{"key":2,"name":"删除","prop":["link"],"type":"primary","handle":"[[FORM-CREATE-PREFIX-function render(props, scope){return scope.row.spu_id % 2 === 1;}-FORM-CREATE-SUFFIX]]","size":"small"}],"width":"100px"},"column":[{"format":"default","prop":"spu_id","label":"ID","width":"150"},{"format":"default","prop":"store_name","label":"商品名称","width":""},{"format":"default","prop":"stock","label":"库存","width":"100"},{"format":"tag","prop":"unit_name","label":"单位","width":"100"},{"format":"image","prop":"image","label":"主图","width":"200"}],"page":{"totalField":"count","dataField":"list","orderField":"order","orderByField":"orderBy","pageField":"page","pageSizeField":"limit","open":true,"props":{"pageSize":10,"small":true,"background":true}},"_optionType":2,"fetch":{"action":"https://mer.crmeb.net/api/product/spu/lst","method":"GET","headers":{},"data":{},"parse":"[[FORM-CREATE-PREFIX-function parse(res){return res.data;}-FORM-CREATE-SUFFIX]]","onError":"","to":"options"},"rowKey":"spu_id"},"_fc_id":"id_Fe33lxvrabk0jlc","name":"ref_Fd9xlxvrabk0jmc","_fc_drag_tag":"dataTable","display":true,"hidden":false},{"type":"fcDialog","props":{"title":"弹出框","rule":[{"type":"input","field":"store_name","title":"商品名称","$required":false,"_fc_id":"id_F22lm1unts3aiuc","name":"ref_Ft1nm1unts3aivc","_fc_drag_tag":"input","display":true,"hidden":false},{"type":"inputNumber","field":"stock","title":"库存","$required":false,"_fc_id":"id_Fmzhm1ununlrixc","name":"ref_Fhj5m1ununlriyc","_fc_drag_tag":"inputNumber","display":true,"hidden":false},{"type":"input","field":"unit_name","title":"单位","$required":false,"_fc_id":"id_Fzp1m1unv5trj0c","name":"ref_Fxc0m1unv5trj1c","_fc_drag_tag":"input","display":true,"hidden":false}]},"_fc_id":"id_Ft1em1unt0jhirc","name":"ref_Fraim1unt0jhisc","_fc_drag_tag":"fcDialog","native":true,"ignore":true,"field":"Fwxrmb0h4qovafc","display":true,"hidden":false}]'));
+  
+  if(route.query.moduleId == null){
+    return
+  }
+  appId.value = route.query.moduleId
+  route.query.moduleId
+  // moduleById(route.query.moduleId).then(res => {
+  //   if(res.code ==0){
+      
+  //     if(res.data.data.canvas_style_data != null && res.data.data.canvas_style_data != ""){
+
+
+  //       designerRef.value.setOption(formCreate.parseJson(res.data.data.component_data))
+  //       designerRef.value.setRule( formCreate.parseJson(res.data.data.canvas_style_data))
+  //     }
+  //   }
+  // })
+});
+
+</script>
+
+<style lang="scss">
+</style>
+<style>
+
+/* ._fc-m-tools-l{
+  display: none;
+}
+._fc-m-tools-r{
+  display: none;
+} */
+</style>