nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分（二）

接第一部分

1、在tools目录下建立formdesigner的index.vue，主要是获取参数，调用formdesigner组件，内容如下：

<template>
  <div>
    <form-designer ref="formDesigner" :queryId="routeQueryId" v-model="form.fdForm"></form-designer>
  </div>
</template>

<script>
export default {
  name: 'designerExapmle',
  data() {
    return {
      form: {
        fdForm: ''
      },
      routeQueryId: '',
    }
  },
  created() {
    this.routeQueryId = this.$route.query && this.$route.query.formId;
  },
  mounted() {
  },
}
</script>

<style>

</style>

2、组件里的formdesigner.vue主要是获取form信息，同时赋值，再调用designer组件，并传递相关参数，具体代码如下：

<template>
  <div class="container">
    <div class="left-board">
      <div class="d-logo-wrapper">
        <div class="d-logo">
          Form designer
        </div>
      </div>

      <el-scrollbar class="left-scrollbar">
        <!--左侧组件列表-->
        <div class="components-list">
          <div class="components-title">
            常用组件
          </div>
          <draggable
            class="components-draggable"
            :list="formItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            @start="onStart"
            @end="onEnd"
          >
            <div
              v-for="(element, index) in formItems" :key="index" class="components-item"
              @click="addComponent(element)"
            >
              <div class="components-body" :class="{ 'dynamicTable-tips': dynamicTableExist(element)}">
                <icon :code="element.compIcon" :text="element.compName"/>
              </div>
            </div>
          </draggable>
          <div class="components-title">
            布局组件
          </div>
          <draggable
            class="components-draggable"
            :list="layoutFormItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            @start="onStart"
            @end="onEnd"
          >
            <div
              v-for="(element, index) in layoutFormItems" :key="index" class="components-item"
              @click="addComponent(element)"
            >
              <div class="components-body">
                <icon :code="element.compIcon" :text="element.compName"/>
              </div>
            </div>
          </draggable>
          <div class="components-title">
            辅助组件
          </div>
          <draggable
            class="components-draggable"
            :list="assistFormItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            @start="onStart"
            @end="onEnd"
          >
            <div
              v-for="(element, index) in assistFormItems" :key="index" class="components-item"
              @click="addComponent(element)"
            >
              <div class="components-body">
                <icon :code="element.compIcon" :text="element.compName"/>
              </div>
            </div>
          </draggable>
        </div>
      </el-scrollbar>
    </div>
    <designer ref="designer" :queryId="routeQueryId" :list="designList" :formConfig="formConfig" :inform="inform" @clear="designList = []" @updateJSON="handlerUpdateJSON" :activeData="activeData"/>
  </div>
</template>
<script>
/**
 * 1.0版本
 */
import draggable from "vuedraggable";
import {formItems,assistFormItems,layoutFormItems} from "./custom/itemList";
import designer from "./designer";
import icon from "./icon";
import {getSimpleId,setTableId} from "./utils/IdGenerate";
import formConf from "./custom/formConf";
import {dynamicTableAllowedItems} from "./custom/formConf";
import {getForm, addForm, updateForm} from "@/api/workflow/form";

let tempActiveData;

export default {
  name:"formDesigner",
  components:{
    draggable
    ,icon,
    designer
  },
  data() {
    return {
      formItems:formItems,
      assistFormItems:assistFormItems,
      layoutFormItems:layoutFormItems,
      designList:[],
      activeData:{},
      formConfig:formConf,
      routeQueryId:'',
      inform:[],
    }
  },
  props:{
    value:{
      type:String,
      default:''
    },
    queryId:{
      type:String,
      default:''
    }
  },
  created() {// add by nbacheng 2023-09-10
    const that = this;
    const id =  that.queryId;
    console.log("formDesigner mounted queryId",that.queryId);
    if (id) {
      getForm(id).then(res =>{
        console.log("getForm res=",res);
        const content = JSON.parse(res.data.content);
        that.formConfig = content.config;
        that.designList = content.list;
        that.inform = res.data;
      })
    }
  },
  mounted() {

  },
  methods: {
    addComponent(element){

    },
    cloneComponent(origin){
      const clone = JSON.parse(JSON.stringify(origin))
      if (!clone.layout) clone.layout = 'colItem'
      if (clone.layout === 'colItem'||clone.layout === 'dynamicItem') {
        let uId = "fd_"+getSimpleId();
        clone.id = uId;
        clone._id = uId;
        tempActiveData = clone;
      }else if (clone.layout === 'rowItem'){
        let uId = "row_"+getSimpleId();
        clone.id = uId;
        clone._id = uId;
        tempActiveData = clone;
      }else if(clone.layout === 'tableItem'){
        let uId = "table_"+getSimpleId();
        clone.id = uId;
        clone._id = uId;
        //增加td默认的id
        setTableId(clone);
        tempActiveData = clone;
      }
      this.$refs.designer.activeItem = tempActiveData;
    },
    onStart(obj){

    },
    onEnd(obj){
      if(obj.from !== obj.to){
        this.activeData = tempActiveData;
        this.$refs.designer.activeItem = this.activeData;
        if(obj.to.className.indexOf('row-drag')<0){
          this.designList.splice(obj.newIndex,0,this.activeData);
        }
      }else{
        this.$refs.designer.activeItem = {};
      }

    },
    getFormData(){
      return this.formData;
    },
    handlerUpdateJSON(json){
      const jsonObject = JSON.parse(json);
      this.designList = [];
      this.designList = this.designList.concat(jsonObject.list);
      this.formConfig = Object.assign({}, jsonObject.config);
      this.$refs['designer'].changeFormConfig(this.formConfig);
    }
  },
  computed:{
    formData:function(){
      const list = this.designList;
      const config = this.formConfig;
      let formData = {};
      formData.list = list;
      formData.config = config;
      console.log("formDesigner formData=",formData);
      return JSON.stringify(formData);
        //this.$emit('input',JSON.stringify(formData));
    },
    dynamicTableExist(){
      return function(element){
        return  this.formConfig.dynamicTableAllowed
            &&this.designList.filter(item=>item.compType === 'dynamicTable').length>0
            &&dynamicTableAllowedItems.includes(element.compType);
      }
    }
  },
  watch:{
    value(newVal){
      if(newVal !==''){
        const formData = JSON.parse(newVal);
        this.designList= formData.list;
        this.formConfig = formData.config;
      }
    }
  }
}

</script>
<style scoped>
.container{
  padding:0px
}
.dynamicTable-tips{
  border:1px solid#F08080
}
</style>

3、组件里的designer.vue主要增加一个保存按钮与相关方法，具体代码如下：

<template>
  <!--中间面板-->
  <div class="center-board" >
    <div class="action-bar">
      <el-button icon="el-icon-plus" type="text" @click="save">
        保存
      </el-button>
      <el-button icon="el-icon-view" type="text" @click="preview">
        预览
      </el-button>
      <el-button icon="el-icon-view" type="text" @click="view">
        查看
      </el-button>
      <el-button icon="el-icon-tickets" type="text" @click="viewJSON">
        JSON
      </el-button>
      <el-button icon="el-icon-s-tools" type="text" @click="setting">
        设置
      </el-button>
      <el-button class="delete-btn" icon="el-icon-delete-solid" type="text" @click="clear">
        清空
      </el-button>
      <el-button icon="el-icon-question" type="text" @click="help">
        帮助
      </el-button>
    </div>
    <el-scrollbar class="center-scrollbar">
      <el-row class="center-board-row" :gutter="formConf.gutter">
        <el-form
                :size="formConf.size"
                :label-position="formConf.labelPosition"
                :disabled="formConf.disabled"
                :label-width="formConf.labelWidth + 'px'"
                class="design-form"
        >
          <draggable
                  class="drawing-board center-board-row"
                  :list="list"
                  :animation="100"
                  group="componentsGroup"
          >
            <template v-for="element in list">
              <el-row
                      :gutter="element.gutter"
                      class="drawing-item"
              >
                <design-item
                        :model="element"
                        :activeItem="activeItem"
                        @rowItemRollBack="handlerRollBack"
                        @onActiveItemChange="handlerActiveItemChange"
                        @copyItem="handlerItemCopy"
                        @deleteItem="handlerItemDelete"
                />
              </el-row>
            </template>
          </draggable>
          <div v-show="infoShow" class="empty-info">
            <el-empty description="从左侧拖拽添加控件"></el-empty>
          </div>
        </el-form>
      </el-row>
    </el-scrollbar>
    <config-panel :activeItem="activeItem" :itemList="list" :formConf="formConf"/>
    <!-- 设计器配置弹出框 -->
    <el-dialog  :visible.sync="formConfVisible" width="50%" top="30px" :center="true">
      <el-tabs v-model="activeName">
        <el-tab-pane label="表单配置" name="formConf">
          <el-form ref="formConf" :model="formConf" label-width="100px">
            <el-form-item label="表单名">
              <el-input class="input" v-model="formConf.formRef"></el-input>
            </el-form-item>
            <el-form-item label="表单模型">
              <el-input class="input" v-model="formConf.formModel"></el-input>
            </el-form-item>
            <el-form-item label="校验模型">
              <el-input class="input" v-model="formConf.formRules"></el-input>
            </el-form-item>
            <el-form-item label="表单尺寸">
              <el-radio-group v-model="formConf.size">
                <el-radio-button label="medium">中等</el-radio-button>
                <el-radio-button label="small">较小</el-radio-button>
                <el-radio-button label="mini">迷你</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标签对齐">
              <el-radio-group v-model="formConf.labelPosition">
                <el-radio-button label="right">右对齐</el-radio-button>
                <el-radio-button label="left">左对齐</el-radio-button>
                <el-radio-button label="top">顶部对齐</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标签宽度">
              <el-input-number v-model="formConf.labelWidth"  :min="60" :max="140"></el-input-number>
            </el-form-item>
            <el-form-item label="栅格间隔">
              <el-input-number v-model="formConf.gutter"  :min="0" :max="30"></el-input-number>
            </el-form-item>
            <el-form-item label="动态表格支持组件高亮显示">
              <el-switch v-model="formConfig.dynamicTableAllowed"></el-switch>
            </el-form-item>
            <el-form-item label="禁用表单">
              <el-switch v-model="formConf.disabled"></el-switch>
            </el-form-item>
            <el-form-item label="表单样式表">
              <css-codemirror ref="cssCodemirror"  :formConf="formConf"></css-codemirror>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- <el-tab-pane label="提交前" name="fourth">开发中...</el-tab-pane> -->
      </el-tabs>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handlerSaveFormConf">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog :visible.sync="previewVisible" width="70%" title="预览">
      <preview :itemList="itemList"  :formConf="formConf" v-if="previewVisible"/>
    </el-dialog>
    <el-dialog :visible.sync="JSONVisible" width="70%" title="JSON" center :close-on-click-modal="false">
      <codemirror v-model="viewCode" :options="options"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerSetJson()">确 定</el-button>
      </span>
    </el-dialog>
    <!--表单配置详情  add by nbacheng 2022-09-05-->
    <el-dialog :title="formTitle" :visible.sync="formOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import draggable from "vuedraggable";
  import configPanel from './configPanel'
  import designItem from './designItem'
  import {getSimpleId} from "./utils/IdGenerate";
  import { isLayout, isTable, inTable,jsonClone } from "./utils/index";
  import formConf from "./custom/formConf";
  import preview from "./preview";
  import {codemirror} from 'vue-codemirror';
  // 核心样式
  import 'codemirror/lib/codemirror.css';
  // 引入主题后还需要在 options 中指定主题才会生效
  import 'codemirror/theme/dracula.css';
  import 'codemirror/mode/javascript/javascript'
  import cssCodemirror from '../components/custom/css/cssCodemirror'
  import {addForm, updateForm} from "@/api/workflow/form";

  export default {
    name:"designer",
    components:{
      draggable,
      configPanel,
      designItem,
      preview,
      codemirror,
      cssCodemirror
    },
    props:{
      list: {
        type: Array,
        default:[]
      },
      formConfig:{
      type:Object,
      default:formConf
      },
      inform: {
        type:Array,
        default:[]
      },
      queryId: {
        type:String,
        default:''
      }
    },
    provide(){
      return{
        getContext:this
      }
    },
    data() {
      return {
        formConf:formConf,
        activeItem:{},
        lastActiveItem:{},
        formConfVisible:false,
        previewVisible:false,
        JSONVisible:false,
        itemList:[],
        activeName:'formConf',
        editorCode:'',
        viewCode:'',
         formOpen: false,
         formTitle: "",
         // 表单参数
         form: {
           formId: null,
           formName: null,
           content: null,
           remark: null
         },
         // 表单校验
         rules: {},
        // 默认配置
        options: {
          tabSize: 2, // 缩进格式
          theme: 'dracula', // 主题，对应主题库 JS 需要提前引入
          lineNumbers: true, // 显示行号
          line: true,
          styleActiveLine: true, // 高亮选中行
          hintOptions: {
            completeSingle: true // 当匹配只有一项的时候是否自动补全
          }
        }
      }
    },
    mounted() {
    },
    methods: {
    save(){// add by nbacheng 2022-09-05
      console.log("save inform=",this.inform);
      if (this.inform.formId) {
        this.form.formId = this.inform.formId;
        this.form.formName = this.inform.formName;
        this.form.remark = this.inform.remark;
      }
      /** 表单保存基本信息 */
       this.formData = {
         list: this.list,
         config: this.formConf
       }
       console.log("save this.formData=",this.formData);
       this.form.content = JSON.stringify(this.formData);
       this.formOpen = true;
       if (this.inform.formId) {
         this.formTitle = "修改表单";
       }
       else {
         this.formTitle = "添加表单";
       }
       console.log("save form=",this.form);
    },
      changeFormConfig(formConfig){
        this.formConf = formConfig;
      },
      preview(){
        const clone = JSON.parse(JSON.stringify(this.list))
        this.itemList = clone;
        this.previewVisible= true;
      },
      viewJSON(){
        this.viewCode = this.code;
        this.JSONVisible = true;
      },
      // 表单重置
    reset() {
      this.form = {
        formId: null,
        formName: null,
        content: null,
        remark: null
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.formOpen = false;
      this.reset();
    },
    /** 保存表单信息 */
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.formId != null) {
            updateForm(this.form).then(response => {
              this.$message.success("修改成功");
            });
          } else {
            addForm(this.form).then(response => {
              this.$message.success("新增成功");
            });
          }
          this.list = []
          this.idGlobal = 100
          this.formOpen = false;
          // 关闭当前标签页并返回上个页面
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1)
        }
      });
    },
      view(){
        localStorage.setItem("formValue",this.code);
        window.open('#/view');
      },
      setting(){
        this.formConfVisible = true;
      },
      clear(){
        this.$confirm('此操作将清空整个表单,是否继续?').then(() => {
          this.$emit('clear');
        })
      },
      help(){
        window.open('https://gitee.com/wurong19870715/formDesigner')
      },
      handlerActiveItemChange(obj){
        this.lastActiveItem = this.activeItem;
        this.activeItem = obj;
      },
      handlerItemCopy(origin,parent){
        if(isLayout(origin)){ //row
          const clone = jsonClone(origin);
          const uId = "row_"+getSimpleId();
          console.log(uId);
          clone.id = uId;
          clone._id = uId;
          clone.columns.map((column)=>{
            let itemList = [];
            column.list.map((item)=>{
              const cloneItem = jsonClone(item);
              const uId = "fd_"+getSimpleId();
              cloneItem.id = uId;
              cloneItem._id = uId;
              itemList.push(cloneItem);
            })
            column.list = [];
            column.list = itemList;
          })
          this.list.push(clone);
          this.handlerActiveItemChange(clone);
        }else if(isTable(origin)){  //表格布局
          const clone = jsonClone(origin);
          const uId = "table_"+getSimpleId();
          clone.id = uId;
          clone._id = uId;
          clone.layoutArray.map((tr)=>{
            tr.map(td=>{
              let itemList = [];
              td.id=getSimpleId();
              td.columns.map((item,i)=>{
                const cloneItem = jsonClone(item);
                const uId = "fd_"+getSimpleId();
                cloneItem.id = uId;
                cloneItem._id = uId;
                itemList.push(cloneItem);
              })
              td.columns = [];
              td.columns = itemList;
            });
          })
          this.list.push(clone);
          this.handlerActiveItemChange(clone);
        }else{  //如果是普通组件，需要判断他是否再布局组件下。
          if(parent){
            if (inTable(parent)) { //增加表格组件的支持
              if (parent.columns.some(item => item.id === origin.id)) {
                const clone = jsonClone(origin);
                const uId = "fd_" + getSimpleId();
                clone.id = uId;
                clone._id = uId;
                parent.columns.push(clone);
                this.handlerActiveItemChange(clone);
              }
            } else {
              parent.columns.map((column) => {
                if (column.list.some(item => item.id === origin.id)) {
                  const clone = jsonClone(origin);
                  const uId = "fd_" + getSimpleId();
                  clone.id = uId;
                  clone._id = uId;
                  column.list.push(clone);
                  this.handlerActiveItemChange(clone);
                }
              })
            }

          }else{
            const clone = jsonClone(origin);
            const uId = "fd_"+getSimpleId();
            clone.id = uId;
            clone._id = uId;
            this.list.push(clone);
            this.handlerActiveItemChange(clone);
          }
        }
      },
      handlerItemDelete(origin,parent){
        if (isLayout(origin) || isTable(origin)){ //如果是布局组件,则直接删除
          const index = this.list.findIndex(item=>item.id === origin.id);
          this.list.splice(index,1);
        }else{  //如果不是布局组件，则先判断是不是再布局内部，如果不是，则直接删除就可以，如果是，则要在布局内部删除
          if(parent){
            if (inTable(parent)){ //增加表格组件的支持
              const colIndex = parent.columns.findIndex(item => item.id === origin.id);
              if (colIndex > -1) {
                parent.columns.splice(colIndex, 1);
              }
            }else{
              parent.columns.map((column) => {
                const colIndex = column.list.findIndex(item => item.id === origin.id);
                if (colIndex > -1) {
                  column.list.splice(colIndex, 1);
                }
              })
            }

          }else{
            const index = this.list.findIndex(item=>item.id === origin.id);
            this.list.splice(index,1);

          }
        }
      },
      handlerSaveFormConf(){
        this.$refs.cssCodemirror.setClassStyle()
        this.formConfVisible = false
      },
      handlerRollBack(rowItem,oldIndex){  //还原
        this.list.splice(oldIndex,0,rowItem);
      },
      handlerSetJson(){
        this.$emit('updateJSON',this.viewCode);
        this.JSONVisible = false;
      },
    },
    computed:{
      infoShow() {
        return this.list.length<1;
      },
      code() {
        let json = {};
        json.config = this.formConf;
        json.list = this.list;
        return JSON.stringify(json,null,4);
      }
    },
    watch: {
      activeItem (newValue,oldValue) {
        this.lastActiveItem = oldValue;
      }
    }
  }

</script>
<style  scoped>
  .el-rate{
    display:inline-block;
  }
  .center-scrollbar >>> .el-scrollbar__bar.is-horizontal {
    display: none;
  }
  .center-scrollbar >>> .el-scrollbar__wrap{
    overflow-x: hidden;
  }
  .empty-info >>> .el-empty__description p{
    color: #ccb1ea;
    font-size:16px;
  }
  .drawing-board >>> .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left:0px;
  }
  .drawing-board >>> .el-checkbox.is-bordered+.el-checkbox.is-bordered{
    margin-left:0px;
  }
</style>
<style lang="scss">
  @import "./style/designer.scss";
</style>
<style>
  @import "./style/designer.css";
</style>