stdproject/frontend/src/data-public/FormCreateDesigner.vue

<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 '@/data-collect/render/element-plus/form-create.es.js'
import { useRoute } from 'vue-router'
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>