flowable-1

.env.development

@@ -5,9 +5,9 @@ VUE_APP_TITLE = 双重预防综合管理系统
 ENV = 'development'
 
 # 双重防御系统开发环境后台接口地址配置
-VUE_APP_BASE_API = 'http://101.42.248.108:17007'
-# VUE_APP_BASE_API = 'http://192.168.29.184:18080'
-#VUE_APP_BASE_API = 'http://localhost:18080'
+# VUE_APP_BASE_API = 'http://101.42.248.108:17005'
+VUE_APP_BASE_API = 'http://192.168.3.200:18080'
+# VUE_APP_BASE_API = 'http://localhost:18080'
 
 
 # 路由懒加载

package.json

@@ -38,28 +38,31 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
-    "FileSaver": "^0.10.0",
     "amfe-flexible": "^2.2.1",
     "animate.css": "^4.1.1",
-    "axios": "0.24.0",
+    "axios": "^1.7.7",
+    "bpmn-js": "^11.1.0",
     "clipboard": "2.0.8",
     "core-js": "^3.32.0",
+    "diagram-js": "^11.4.1",
     "docx-preview": "^0.1.18",
     "echarts": "5.4.0",
     "element-ui": "2.15.13",
     "express": "^4.18.2",
     "file-saver": "2.0.5",
+    "FileSaver": "^0.10.0",
     "fuse.js": "6.4.3",
-    "highlight.js": "9.18.5",
+    "highlight.js": "^9.18.5",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "moment": "^2.29.4",
     "nodemon": "^3.0.1",
     "nprogress": "0.2.0",
-    "quill": "1.3.7",
+    "quill": "^1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "vkbeautify": "^0.99.3",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
@@ -70,26 +73,28 @@
     "vue2-org-tree": "^1.3.6",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
+    "xcrud": "^0.4.19",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.4.6",
-    "@vue/cli-plugin-eslint": "4.4.6",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "5.0.2",
     "connect": "3.6.6",
+    "create-bpmnlint-plugin": "^0.6.0",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
     "postcss-pxtorem": "^5.1.1",
-    "runjs": "4.4.2",
+    "runjs": "^4.1.3",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
-    "svg-sprite-loader": "5.1.1",
+    "svg-sprite-loader": "^5.2.1",
     "vue-template-compiler": "2.6.12"
   },
   "engines": {

src/components/flow/ElInputTag/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+      class="el-input-tag input-tag-wrapper"
+      :class="[size ? 'el-input-tag--' + size : '']"
+      @click="focusTagInput">
+    <el-tag
+        v-for="(tag, idx) in innerTags"
+        v-bind="$attrs"
+        :key="tag"
+        :size="size"
+        effect="dark"
+        closable
+        :disable-transitions="false"
+        @close="remove(idx)">
+      {{tag}}
+    </el-tag>
+    <input
+        v-if="!readOnly"
+        class="tag-input"
+        :placeholder="placeholder"
+        @input="inputTag"
+        :value="newTag"
+        @keydown.delete.stop = "removeLastTag"
+    />
+<!--    @keydown = "addNew"
+        @blur = "addNew"-->
+  </div>
+</template>
+
+
+<script>
+import {StrUtil} from '@/utils/StrUtil'
+
+export default {
+  name: "ElInputTag",
+  /** 组件传值  */
+  props : {
+    value: {
+      type: String,
+      default: ""
+    },
+    addTagOnKeys: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    placeholder: String,
+  },
+  data() {
+    return {
+       newTag :"",
+       innerTags :[],
+       readOnly :true,
+    }
+  },
+  /** 传值监听 */
+  watch: {
+    value: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          this.innerTags = newVal.split(',');
+        }else {
+          this.innerTags = [];
+        }
+      },
+      immediate: true, // 立即生效
+    },
+  },
+  methods: {
+    focusTagInput() {
+      if (this.readOnly || !this.$el.querySelector('.tag-input')) {
+        return
+      } else {
+        this.$el.querySelector('.tag-input').focus()
+      }
+    },
+
+    inputTag(ev) {
+     this.newTag = ev.target.value
+    },
+
+    addNew(e) {
+      if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
+        return
+      }
+      if (e) {
+        e.stopPropagation()
+        e.preventDefault()
+      }
+      let addSuccess = false
+      if (this.newTag.includes(',')) {
+       this.newTag.split(',').forEach(item => {
+          if (this.addTag(item.trim())) {
+            addSuccess = true
+          }
+        })
+      } else {
+        if (this.addTag(this.newTag.trim())) {
+          addSuccess = true
+        }
+      }
+      if (addSuccess) {
+        this.tagChange()
+       this.newTag = ''
+      }
+    },
+
+    addTag(tag) {
+      tag = tag.trim()
+      if (tag && !this.innerTags.includes(tag)) {
+        this.innerTags.push(tag)
+        return true
+      }
+      return false
+    },
+
+    remove(index) {
+      this.innerTags.splice(index, 1)
+      this.tagChange();
+    },
+
+    removeLastTag() {
+      if (this.newTag) {
+        return
+      }
+      this.innerTags.pop()
+      this.tagChange()
+    },
+
+    tagChange() {
+      this.$emit('input', this.innerTags)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.el-form-item.is-error .el-input-tag {
+  border-color: #f56c6c;
+}
+.input-tag-wrapper {
+  position: relative;
+  font-size: 14px;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  outline: none;
+  padding: 0 10px 0 5px;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  width: 100%;
+}
+.el-tag {
+  margin-right: 4px;
+}
+
+.tag-input {
+  background: transparent;
+  border: 0;
+  font-size: inherit;
+  outline: none;
+  padding-left: 0;
+  width: 100px;
+}
+.el-input-tag {
+  min-height: 42px;
+}
+.el-input-tag--small {
+  min-height: 32px;
+  line-height: 32px;
+  font-size: 12px;
+}
+
+.el-input-tag--default {
+  min-height: 34px;
+  line-height: 34px;
+}
+
+.el-input-tag--large {
+  min-height: 36px;
+  line-height: 36px;
+}
+
+</style>

src/components/flow/Expression/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表达式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="expressionList" @current-change="handleSingleExpSelect">
+      <el-table-column  width="55" align="center" >
+        <template slot-scope="scope">
+          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+          <el-radio v-model="radioSelected" :label="scope.row.id">{{''}}</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="表达式内容" align="center" prop="expression" />
+      <el-table-column label="表达式类型" align="center" prop="dataType" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.exp_data_type" :value="scope.row.dataType"/>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      layout="prev, pager, next"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listExpression } from "@/api/flowable/expression";
+import {StrUtil} from "@/utils/StrUtil";
+
+export default {
+  name: "Expression",
+  dicts: ['sys_common_status','exp_data_type'],
+  // 接受父组件的值
+  props: {
+    // 回显数据传值
+    selectValues: {
+      type: Number | String,
+      default: null,
+      required: false
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程达式表格数据
+      expressionList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        expression: null,
+        status: null,
+      },
+      radioSelected: null // 单选框传值
+    };
+  },
+  watch: {
+    selectValues: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          this.radioSelected = newVal
+        }
+      },
+      immediate: true,
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程达式列表 */
+    getList() {
+      this.loading = true;
+      listExpression(this.queryParams).then(response => {
+        this.expressionList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 单选框选中数据
+    handleSingleExpSelect(selection) {
+      this.radioSelected = selection.id;//点击当前行时,radio同样有选中效果
+      this.$emit('handleSingleExpSelect',selection);
+    },
+  }
+};
+</script>

src/components/flow/Role/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          placeholder="请输入角色名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-show="checkType === 'multiple'" ref="dataTable"  v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table v-show="checkType === 'single'" v-loading="loading" :data="roleList" @current-change="handleSingleRoleSelect">
+      <el-table-column  width="55" align="center" >
+        <template slot-scope="scope">
+          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+          <el-radio v-model="radioSelected" :label="scope.row.roleId">{{''}}</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      layout="prev, pager, next"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listRole} from "@/api/system/role";
+import {StrUtil} from "@/utils/StrUtil";
+
+export default {
+  name: "FlowRole",
+  dicts: ['sys_normal_disable'],
+  // 接受父组件的值
+  props: {
+    // 回显数据传值
+    selectValues: {
+      type: Number | String | Array,
+      default: null,
+      required: false
+    },
+    checkType: {
+      type: String,
+      default: 'multiple',
+      required: false
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      radioSelected: 0, // 单选框传值
+      selectRoleList: [] // 回显数据传值
+    };
+  },
+  watch: {
+    selectValues: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          if (newVal instanceof Number || newVal instanceof String) {
+            this.radioSelected = newVal
+          } else {
+            this.selectRoleList = newVal;
+          }
+        }
+      },
+      immediate: true
+    },
+    roleList: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal) && this.selectRoleList.length > 0) {
+          this.$nextTick(() => {
+            this.$refs.dataTable.clearSelection();
+            this.selectRoleList?.split(',').forEach(key => {
+              this.$refs.dataTable.toggleRowSelection(newVal.find(
+                item => key == item.roleId
+              ), true)
+            });
+          });
+        }
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.queryParams).then(response => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 多选框选中数据
+    handleMultipleRoleSelect(selection) {
+      const idList = selection.map(item => item.roleId);
+      const nameList = selection.map(item => item.roleName);
+      this.$emit('handleRoleSelect', idList.join(','), nameList.join(','));
+    },
+    // 单选框选中数据
+    handleSingleRoleSelect(selection) {
+      this.radioSelected = selection.roleId;
+      const roleName = selection.roleName;
+      this.$emit('handleRoleSelect', this.radioSelected.toString(), roleName);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.handleQuery();
+    },
+  }
+};
+</script>
+<style>
+/*隐藏radio展示的label及本身自带的样式*/
+/*.el-radio__label{*/
+/*  display:none;*/
+/*}*/
+</style>

src/components/flow/User/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="6" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            placeholder="请输入部门名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="18" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table v-show="checkType === 'multiple'" ref="dataTable" v-loading="loading" :row-key="getRowKey" :data="userList" @selection-change="handleMultipleUserSelect">
+          <el-table-column type="selection" :reserve-selection="true" width="50" align="center" />
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+        </el-table>
+        <el-table v-show="checkType === 'single'" v-loading="loading" :data="userList" @current-change="handleSingleUserSelect">
+          <el-table-column  width="55" align="center" >
+            <template slot-scope="scope">
+              <el-radio v-model="radioSelected" :label="scope.row.userId">{{''}}</el-radio>
+            </template>
+          </el-table-column>
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+        </el-table>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page-sizes="[5,10]"
+          layout="prev, pager, next"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listUser, deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {StrUtil} from '@/utils/StrUtil'
+
+export default {
+  name: "FlowUser",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: { Treeselect },
+  // 接受父组件的值
+  props: {
+    // 回显数据传值
+    selectValues: {
+      type: Number | String | Array,
+      default: null,
+      required: false
+    },
+    // 表格类型
+    checkType: {
+      type: String,
+      default: 'multiple',
+      required: true
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: [],
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+      radioSelected: 0, // 单选框传值
+      selectUserList: [] // 回显数据传值
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
+    selectValues: {
+      handler(newVal) {
+        if (StrUtil.isNotBlank(newVal)) {
+          if (newVal instanceof Number) {
+            this.radioSelected = newVal
+          } else {
+            this.selectUserList = newVal;
+          }
+        }
+      },
+      immediate: true
+    },
+    userList: {
+      handler(newVal) {
+        debugger
+        if (StrUtil.isNotBlank(newVal) && this.selectUserList.length > 0) {
+            this.$nextTick(() => {
+              this.$refs.dataTable.clearSelection();
+              this.selectUserList?.split(',').forEach(key => {
+                this.$refs.dataTable.toggleRowSelection(newVal.find(
+                  item => key == item.userId
+                ), true)
+              });
+            });
+        }
+      }
+    }
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
+    getRowKey (row) {
+      return row.id
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleMultipleUserSelect(selection) {
+      this.$emit('handleUserSelect', selection);
+    },
+    // 单选框选中数据
+    handleSingleUserSelect(selection) {
+      this.radioSelected = selection.userId;//点击当前行时,radio同样有选中效果
+      this.$emit('handleUserSelect', selection);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.queryParams.deptId = undefined;
+      this.$refs.tree.setCurrentKey(null);
+      this.handleQuery();
+    },
+  }
+};
+</script>
+<style>
+/*隐藏radio展示的label及本身自带的样式*/
+/*.el-radio__label{*/
+/*  display:none;*/
+/*}*/
+</style>

src/main.js

@@ -13,7 +13,7 @@ import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
 import dataV from '@jiaminghi/data-view'
-
+import  Tinymce from  '@/components/tinymce/index';
 Vue.use(dataV)
 import './assets/icons' // icon
 import './permission' // permission control
@@ -40,7 +40,14 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 import * as echarts from "echarts"
 import Vue2OrgTree from 'vue2-org-tree'
+
+import modelerStore from '@/components/Process/common/global'
+// vform 表单设计器
+import vform from '@/components/vform/VFormDesigner.umd.min.js'
+import '@/components/vform/VFormDesigner.css'
 Vue.use(Vue2OrgTree)
+//同时注册了v-form-designer、v-form-render等组件
+Vue.use(vform)
 Vue.prototype.$echarts = echarts
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -53,7 +60,9 @@ Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
 
-// 全局组件挂载
+
+// 全局方法挂载
+Vue.prototype.modelerStore = modelerStore
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
@@ -61,6 +70,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('Tinymce', Tinymce)
 
 Vue.use(directive)
 Vue.use(plugins)

src/router/index.js

@@ -284,6 +284,97 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'definition/model/',
+        component: () => import('@/views/flowable/definition/model'),
+        name: 'Model',
+        meta: { title: '流程设计', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'task/finished/detail/index',
+        component: () => import('@/views/flowable/task/finished/detail/index'),
+        name: 'FinishedRecord',
+        meta: { title: '流程详情', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'task/myProcess/detail/index',
+        component: () => import('@/views/flowable/task/myProcess/detail/index'),
+        name: 'MyProcessRecord',
+        meta: { title: '流程详情', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'task/myProcess/send/index',
+        component: () => import('@/views/flowable/task/myProcess/send/index'),
+        name: 'SendRecord',
+        meta: { title: '流程发起', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'task/todo/detail/index',
+        component: () => import('@/views/flowable/task/todo/detail/index'),
+        name: 'TodoRecord',
+        meta: { title: '流程处理', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: false,
+    children: [
+      {
+        path: 'task/flowForm/index',
+        component: () => import('@/views/flowable/task/flowForm/index'),
+        name: 'FlowForm',
+        meta: { title: '流程表单', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/tool',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'build/index',
+        component: () => import('@/views/tool/build/index'),
+        name: 'FormBuild',
+        meta: { title: '表单配置', icon: '' }
+      }
+    ]
   }
 ]
 
@@ -359,6 +450,7 @@ export const dynamicRoutes = [
       }
     ]
   }
+
 ]
 
 // 防止连续点击多次路由报错

src/utils/generator/config.js

@@ -1,3 +1,4 @@
+// 表单属性【右面板】
 export const formConf = {
   formRef: 'elForm',
   formModel: 'formData',
@@ -11,144 +12,195 @@ export const formConf = {
   formBtns: true
 }
 
+// 输入型组件 【左面板】
 export const inputComponents = [
   {
-    label: '单行文本',
-    tag: 'el-input',
-    tagIcon: 'input',
+    // 组件的自定义配置
+    __config__: {
+      label: '单行文本',
+      labelWidth: null,
+      showLabel: true,
+      changeTag: true,
+      tag: 'el-input',
+      tagIcon: 'input',
+      defaultValue: undefined,
+      required: true,
+      layout: 'colFormItem',
+      span: 24,
+      document: 'https://element.eleme.cn/#/zh-CN/component/input',
+      // 正则校验规则
+      regList: []
+    },
+    // 组件的插槽属性
+    __slot__: {
+      prepend: '',
+      append: ''
+    },
+    // 其余的为可直接写在组件标签上的属性
     placeholder: '请输入',
-    defaultValue: undefined,
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
+    style: {width: '100%'},
     clearable: true,
-    prepend: '',
-    append: '',
     'prefix-icon': '',
     'suffix-icon': '',
     maxlength: null,
     'show-word-limit': false,
     readonly: false,
-    disabled: false,
-    required: true,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/input'
+    disabled: false
   },
   {
-    label: '多行文本',
-    tag: 'el-input',
-    tagIcon: 'textarea',
+    __config__: {
+      label: '多行文本',
+      labelWidth: null,
+      showLabel: true,
+      tag: 'el-input',
+      tagIcon: 'textarea',
+      defaultValue: undefined,
+      required: true,
+      layout: 'colFormItem',
+      span: 24,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/input'
+    },
     type: 'textarea',
     placeholder: '请输入',
-    defaultValue: undefined,
-    span: 24,
-    labelWidth: null,
     autosize: {
       minRows: 4,
       maxRows: 4
     },
-    style: { width: '100%' },
+    style: {width: '100%'},
     maxlength: null,
     'show-word-limit': false,
     readonly: false,
-    disabled: false,
-    required: true,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/input'
+    disabled: false
   },
   {
-    label: '密码',
-    tag: 'el-input',
-    tagIcon: 'password',
+    __config__: {
+      label: '密码',
+      showLabel: true,
+      labelWidth: null,
+      changeTag: true,
+      tag: 'el-input',
+      tagIcon: 'password',
+      defaultValue: undefined,
+      layout: 'colFormItem',
+      span: 24,
+      required: true,
+      regList: [],
+      document: 'https://element.eleme.cn/#/zh-CN/component/input'
+    },
+    __slot__: {
+      prepend: '',
+      append: ''
+    },
     placeholder: '请输入',
-    defaultValue: undefined,
-    span: 24,
     'show-password': true,
-    labelWidth: null,
-    style: { width: '100%' },
+    style: {width: '100%'},
     clearable: true,
-    prepend: '',
-    append: '',
     'prefix-icon': '',
     'suffix-icon': '',
     maxlength: null,
     'show-word-limit': false,
     readonly: false,
-    disabled: false,
-    required: true,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/input'
+    disabled: false
   },
   {
-    label: '计数器',
-    tag: 'el-input-number',
-    tagIcon: 'number',
+    __config__: {
+      label: '计数器',
+      showLabel: true,
+      changeTag: true,
+      labelWidth: null,
+      tag: 'el-input-number',
+      tagIcon: 'number',
+      defaultValue: undefined,
+      span: 24,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      document: 'https://element.eleme.cn/#/zh-CN/component/input-number'
+    },
     placeholder: '',
-    defaultValue: undefined,
-    span: 24,
-    labelWidth: null,
     min: undefined,
     max: undefined,
-    step: undefined,
+    step: 1,
     'step-strictly': false,
     precision: undefined,
     'controls-position': '',
-    disabled: false,
-    required: true,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/input-number'
+    disabled: false
+  },
+  {
+    __config__: {
+      label: '编辑器',
+      showLabel: true,
+      changeTag: true,
+      labelWidth: null,
+      tag: 'tinymce',
+      tagIcon: 'rich-text',
+      defaultValue: null,
+      span: 24,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      document: 'http://tinymce.ax-z.cn'
+    },
+    placeholder: '请输入',
+    height: 300, // 编辑器高度
+    branding: false // 隐藏右下角品牌烙印
   }
 ]
 
+// 选择型组件 【左面板】
 export const selectComponents = [
   {
-    label: '下拉选择',
-    tag: 'el-select',
-    tagIcon: 'select',
+    __config__: {
+      label: '下拉选择',
+      showLabel: true,
+      labelWidth: null,
+      tag: 'el-select',
+      tagIcon: 'select',
+      layout: 'colFormItem',
+      span: 24,
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/select'
+    },
+    __slot__: {
+      options: [{
+        label: '选项一',
+        value: 1
+      }, {
+        label: '选项二',
+        value: 2
+      }]
+    },
     placeholder: '请选择',
-    defaultValue: undefined,
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
+    style: {width: '100%'},
     clearable: true,
     disabled: false,
-    required: true,
     filterable: false,
-    multiple: false,
-    options: [{
-      label: '选项一',
-      value: 1
-    }, {
-      label: '选项二',
-      value: 2
-    }],
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/select'
+    multiple: false
   },
   {
-    label: '级联选择',
-    tag: 'el-cascader',
-    tagIcon: 'cascader',
-    placeholder: '请选择',
-    defaultValue: [],
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
-    props: {
-      props: {
-        multiple: false
-      }
+    __config__: {
+      label: '级联选择',
+      url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
+      method: 'get',
+      dataPath: 'list',
+      dataConsumer: 'options',
+      showLabel: true,
+      labelWidth: null,
+      tag: 'el-cascader',
+      tagIcon: 'cascader',
+      layout: 'colFormItem',
+      defaultValue: [],
+      dataType: 'dynamic',
+      span: 24,
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/cascader'
     },
-    'show-all-levels': true,
-    disabled: false,
-    clearable: true,
-    filterable: false,
-    required: true,
     options: [{
       id: 1,
       value: 1,
@@ -159,280 +211,419 @@ export const selectComponents = [
         label: '选项1-1'
       }]
     }],
-    dataType: 'dynamic',
-    labelKey: 'label',
-    valueKey: 'value',
-    childrenKey: 'children',
-    separator: '/',
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/cascader'
+    placeholder: '请选择',
+    style: {width: '100%'},
+    props: {
+      props: {
+        multiple: false,
+        label: 'label',
+        value: 'value',
+        children: 'children'
+      }
+    },
+    'show-all-levels': true,
+    disabled: false,
+    clearable: true,
+    filterable: false,
+    separator: '/'
   },
   {
-    label: '单选框组',
-    tag: 'el-radio-group',
-    tagIcon: 'radio',
-    defaultValue: undefined,
-    span: 24,
-    labelWidth: null,
+    __config__: {
+      label: '单选框组',
+      labelWidth: null,
+      showLabel: true,
+      tag: 'el-radio-group',
+      tagIcon: 'radio',
+      changeTag: true,
+      defaultValue: undefined,
+      layout: 'colFormItem',
+      span: 24,
+      optionType: 'default',
+      regList: [],
+      required: true,
+      border: false,
+      document: 'https://element.eleme.cn/#/zh-CN/component/radio'
+    },
+    __slot__: {
+      options: [{
+        label: '选项一',
+        value: 1
+      }, {
+        label: '选项二',
+        value: 2
+      }]
+    },
     style: {},
-    optionType: 'default',
-    border: false,
     size: 'medium',
-    disabled: false,
-    required: true,
-    options: [{
-      label: '选项一',
-      value: 1
-    }, {
-      label: '选项二',
-      value: 2
-    }],
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/radio'
+    disabled: false
   },
   {
-    label: '多选框组',
-    tag: 'el-checkbox-group',
-    tagIcon: 'checkbox',
-    defaultValue: [],
-    span: 24,
-    labelWidth: null,
+    __config__: {
+      label: '多选框组',
+      tag: 'el-checkbox-group',
+      tagIcon: 'checkbox',
+      defaultValue: [],
+      span: 24,
+      showLabel: true,
+      labelWidth: null,
+      layout: 'colFormItem',
+      optionType: 'default',
+      required: true,
+      regList: [],
+      changeTag: true,
+      border: false,
+      document: 'https://element.eleme.cn/#/zh-CN/component/checkbox'
+    },
+    __slot__: {
+      options: [{
+        label: '选项一',
+        value: 1
+      }, {
+        label: '选项二',
+        value: 2
+      }]
+    },
     style: {},
-    optionType: 'default',
-    border: false,
     size: 'medium',
-    disabled: false,
-    required: true,
-    options: [{
-      label: '选项一',
-      value: 1
-    }, {
-      label: '选项二',
-      value: 2
-    }],
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/checkbox'
+    min: null,
+    max: null,
+    disabled: false
   },
   {
-    label: '开关',
-    tag: 'el-switch',
-    tagIcon: 'switch',
-    defaultValue: false,
-    span: 24,
-    labelWidth: null,
+    __config__: {
+      label: '开关',
+      tag: 'el-switch',
+      tagIcon: 'switch',
+      defaultValue: false,
+      span: 24,
+      showLabel: true,
+      labelWidth: null,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/switch'
+    },
     style: {},
     disabled: false,
-    required: true,
     'active-text': '',
     'inactive-text': '',
     'active-color': null,
     'inactive-color': null,
     'active-value': true,
-    'inactive-value': false,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/switch'
+    'inactive-value': false
   },
   {
-    label: '滑块',
-    tag: 'el-slider',
-    tagIcon: 'slider',
-    defaultValue: null,
-    span: 24,
-    labelWidth: null,
+    __config__: {
+      label: '滑块',
+      tag: 'el-slider',
+      tagIcon: 'slider',
+      defaultValue: null,
+      span: 24,
+      showLabel: true,
+      layout: 'colFormItem',
+      labelWidth: null,
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/slider'
+    },
     disabled: false,
-    required: true,
     min: 0,
     max: 100,
     step: 1,
     'show-stops': false,
-    range: false,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/slider'
+    range: false
   },
   {
-    label: '时间选择',
-    tag: 'el-time-picker',
-    tagIcon: 'time',
+    __config__: {
+      label: '时间选择',
+      tag: 'el-time-picker',
+      tagIcon: 'time',
+      defaultValue: null,
+      span: 24,
+      showLabel: true,
+      layout: 'colFormItem',
+      labelWidth: null,
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
+    },
     placeholder: '请选择',
-    defaultValue: null,
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
+    style: {width: '100%'},
     disabled: false,
     clearable: true,
-    required: true,
     'picker-options': {
       selectableRange: '00:00:00-23:59:59'
     },
     format: 'HH:mm:ss',
-    'value-format': 'HH:mm:ss',
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
+    'value-format': 'HH:mm:ss'
   },
   {
-    label: '时间范围',
-    tag: 'el-time-picker',
-    tagIcon: 'time-range',
-    defaultValue: null,
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
+    __config__: {
+      label: '时间范围',
+      tag: 'el-time-picker',
+      tagIcon: 'time-range',
+      span: 24,
+      showLabel: true,
+      labelWidth: null,
+      layout: 'colFormItem',
+      defaultValue: null,
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
+    },
+    style: {width: '100%'},
     disabled: false,
     clearable: true,
-    required: true,
     'is-range': true,
     'range-separator': '至',
     'start-placeholder': '开始时间',
     'end-placeholder': '结束时间',
     format: 'HH:mm:ss',
-    'value-format': 'HH:mm:ss',
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
+    'value-format': 'HH:mm:ss'
   },
   {
-    label: '日期选择',
-    tag: 'el-date-picker',
-    tagIcon: 'date',
+    __config__: {
+      label: '日期选择',
+      tag: 'el-date-picker',
+      tagIcon: 'date',
+      defaultValue: null,
+      showLabel: true,
+      labelWidth: null,
+      span: 24,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
+    },
     placeholder: '请选择',
-    defaultValue: null,
     type: 'date',
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
+    style: {width: '100%'},
     disabled: false,
     clearable: true,
-    required: true,
     format: 'yyyy-MM-dd',
     'value-format': 'yyyy-MM-dd',
-    readonly: false,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
+    readonly: false
   },
   {
-    label: '日期范围',
-    tag: 'el-date-picker',
-    tagIcon: 'date-range',
-    defaultValue: null,
-    span: 24,
-    labelWidth: null,
-    style: { width: '100%' },
+    __config__: {
+      label: '日期范围',
+      tag: 'el-date-picker',
+      tagIcon: 'date-range',
+      defaultValue: null,
+      span: 24,
+      showLabel: true,
+      labelWidth: null,
+      required: true,
+      layout: 'colFormItem',
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
+    },
+    style: {width: '100%'},
     type: 'daterange',
     'range-separator': '至',
     'start-placeholder': '开始日期',
     'end-placeholder': '结束日期',
     disabled: false,
     clearable: true,
-    required: true,
     format: 'yyyy-MM-dd',
     'value-format': 'yyyy-MM-dd',
-    readonly: false,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
+    readonly: false
   },
   {
-    label: '评分',
-    tag: 'el-rate',
-    tagIcon: 'rate',
-    defaultValue: 0,
-    span: 24,
-    labelWidth: null,
+    __config__: {
+      label: '评分',
+      tag: 'el-rate',
+      tagIcon: 'rate',
+      defaultValue: 0,
+      span: 24,
+      showLabel: true,
+      labelWidth: null,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/rate'
+    },
     style: {},
     max: 5,
     'allow-half': false,
     'show-text': false,
     'show-score': false,
-    disabled: false,
-    required: true,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/rate'
+    disabled: false
   },
   {
-    label: '颜色选择',
-    tag: 'el-color-picker',
-    tagIcon: 'color',
-    defaultValue: null,
-    labelWidth: null,
+    __config__: {
+      label: '颜色选择',
+      tag: 'el-color-picker',
+      tagIcon: 'color',
+      span: 24,
+      defaultValue: null,
+      showLabel: true,
+      labelWidth: null,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      changeTag: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
+    },
     'show-alpha': false,
     'color-format': '',
     disabled: false,
-    required: true,
-    size: 'medium',
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
+    size: 'medium'
   },
   {
-    label: '上传',
-    tag: 'el-upload',
-    tagIcon: 'upload',
-    action: 'https://jsonplaceholder.typicode.com/posts/',
-    defaultValue: null,
-    labelWidth: null,
+    __config__: {
+      label: '上传',
+      tag: 'el-upload',
+      tagIcon: 'upload',
+      layout: 'colFormItem',
+      defaultValue: null,
+      showLabel: true,
+      labelWidth: null,
+      required: true,
+      span: 24,
+      showTip: false,
+      buttonText: '点击上传',
+      regList: [],
+      changeTag: true,
+      fileSize: 2,
+      sizeUnit: 'MB',
+      document: 'https://element.eleme.cn/#/zh-CN/component/upload'
+    },
+    __slot__: {
+      'list-type': true
+    },
+    action: 'http://localhost:8080/file/upload',
     disabled: false,
-    required: true,
     accept: '',
     name: 'file',
     'auto-upload': true,
-    showTip: false,
-    buttonText: '点击上传',
-    fileSize: 2,
-    sizeUnit: 'MB',
     'list-type': 'text',
-    multiple: false,
-    regList: [],
-    changeTag: true,
-    document: 'https://element.eleme.cn/#/zh-CN/component/upload'
+    multiple: false
   }
 ]
 
+// 布局型组件 【左面板】
 export const layoutComponents = [
   {
-    layout: 'rowFormItem',
-    tagIcon: 'row',
+    __config__: {
+      layout: 'rowFormItem',
+      tagIcon: 'row',
+      label: '行容器',
+      layoutTree: true,
+      document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
+    },
     type: 'default',
     justify: 'start',
-    align: 'top',
-    label: '行容器',
-    layoutTree: true,
-    children: [],
-    document: 'https://element.eleme.cn/#/zh-CN/component/layout'
+    align: 'top'
   },
   {
-    layout: 'colFormItem',
-    label: '按钮',
-    changeTag: true,
-    labelWidth: null,
-    tag: 'el-button',
-    tagIcon: 'button',
-    span: 24,
-    default: '主要按钮',
+    __config__: {
+      label: '按钮',
+      showLabel: true,
+      changeTag: true,
+      labelWidth: null,
+      tag: 'el-button',
+      tagIcon: 'button',
+      span: 24,
+      layout: 'colFormItem',
+      document: 'https://element.eleme.cn/#/zh-CN/component/button'
+    },
+    __slot__: {
+      default: '主要按钮'
+    },
     type: 'primary',
     icon: 'el-icon-search',
+    round: false,
     size: 'medium',
-    disabled: false,
-    document: 'https://element.eleme.cn/#/zh-CN/component/button'
-  }
+    plain: false,
+    circle: false,
+    disabled: false
+  },
+  // {
+  //   __config__: {
+  //     layout: 'colFormItem',
+  //     tagIcon: 'table',
+  //     tag: 'el-table',
+  //     document: 'https://element.eleme.cn/#/zh-CN/component/table',
+  //     span: 24,
+  //     formId: 101,
+  //     renderKey: 1595761764203,
+  //     componentName: 'row101',
+  //     showLabel: true,
+  //     changeTag: true,
+  //     labelWidth: null,
+  //     label: '表格[开发中]',
+  //     dataType: 'dynamic',
+  //     method: 'get',
+  //     dataPath: 'list',
+  //     dataConsumer: 'data',
+  //     url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
+  //     children: [{
+  //       __config__: {
+  //         layout: 'raw',
+  //         tag: 'el-table-column',
+  //         renderKey: 15957617660153
+  //       },
+  //       prop: 'date',
+  //       label: '日期'
+  //     }, {
+  //       __config__: {
+  //         layout: 'raw',
+  //         tag: 'el-table-column',
+  //         renderKey: 15957617660152
+  //       },
+  //       prop: 'address',
+  //       label: '地址'
+  //     }, {
+  //       __config__: {
+  //         layout: 'raw',
+  //         tag: 'el-table-column',
+  //         renderKey: 15957617660151
+  //       },
+  //       prop: 'name',
+  //       label: '名称'
+  //     }, {
+  //       __config__: {
+  //         layout: 'raw',
+  //         tag: 'el-table-column',
+  //         renderKey: 1595774496335,
+  //         children: [
+  //           {
+  //             __config__: {
+  //               label: '按钮',
+  //               tag: 'el-button',
+  //               tagIcon: 'button',
+  //               layout: 'raw',
+  //               renderKey: 1595779809901
+  //             },
+  //             __slot__: {
+  //               default: '主要按钮'
+  //             },
+  //             type: 'primary',
+  //             icon: 'el-icon-search',
+  //             round: false,
+  //             size: 'medium'
+  //           }
+  //         ]
+  //       },
+  //       label: '操作'
+  //     }]
+  //   },
+  //   data: [],
+  //   directives: [{
+  //     name: 'loading',
+  //     value: true
+  //   }],
+  //   border: true,
+  //   type: 'default',
+  //   justify: 'start',
+  //   align: 'top'
+  // }
 ]
-
-// 组件rule的触发方式，无触发方式的组件不生成rule
-export const trigger = {
-  'el-input': 'blur',
-  'el-input-number': 'blur',
-  'el-select': 'change',
-  'el-radio-group': 'change',
-  'el-checkbox-group': 'change',
-  'el-cascader': 'change',
-  'el-time-picker': 'change',
-  'el-date-picker': 'change',
-  'el-rate': 'change'
-}

src/utils/generator/drawingDefalut.js

@@ -0,0 +1,37 @@
+export default [
+  {
+    __config__: {
+      label: '单行文本',
+      labelWidth: null,
+      showLabel: true,
+      changeTag: true,
+      tag: 'el-input',
+      tagIcon: 'input',
+      defaultValue: undefined,
+      required: true,
+      layout: 'colFormItem',
+      span: 24,
+      document: 'https://element.eleme.cn/#/zh-CN/component/input',
+      // 正则校验规则
+      regList: [{
+        pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
+        message: '手机号格式错误'
+      }]
+    },
+    // 组件的插槽属性
+    __slot__: {
+      prepend: '',
+      append: ''
+    },
+    __vModel__: 'mobile',
+    placeholder: '请输入手机号',
+    style: { width: '100%' },
+    clearable: true,
+    'prefix-icon': 'el-icon-mobile',
+    'suffix-icon': '',
+    maxlength: 11,
+    'show-word-limit': true,
+    readonly: false,
+    disabled: false
+  }
+]

src/utils/generator/drawingDefault.js

@@ -1,29 +0,0 @@
-export default [
-  {
-    layout: 'colFormItem',
-    tagIcon: 'input',
-    label: '手机号',
-    vModel: 'mobile',
-    formId: 6,
-    tag: 'el-input',
-    placeholder: '请输入手机号',
-    defaultValue: '',
-    span: 24,
-    style: { width: '100%' },
-    clearable: true,
-    prepend: '',
-    append: '',
-    'prefix-icon': 'el-icon-mobile',
-    'suffix-icon': '',
-    maxlength: 11,
-    'show-word-limit': true,
-    readonly: false,
-    disabled: false,
-    required: true,
-    changeTag: true,
-    regList: [{
-      pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
-      message: '手机号格式错误'
-    }]
-  }
-]

src/utils/index.js

@@ -5,12 +5,12 @@ import { parseTime } from './ruoyi'
  */
 export function formatDate(cellValue) {
   if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue) 
+  var date = new Date(cellValue)
   var year = date.getFullYear()
   var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
+  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
   var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
 }
@@ -257,20 +257,20 @@ export function debounce(func, wait, immediate) {
  * @param {Object} source
  * @returns {Object}
  */
-export function deepClone(source) {
-  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
-  }
-  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
-    if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
-    } else {
-      targetObj[keys] = source[keys]
-    }
-  })
-  return targetObj
-}
+// export function deepClone(source) {
+//   if (!source && typeof source !== 'object') {
+//     throw new Error('error arguments', 'deepClone')
+//   }
+//   const targetObj = source.constructor === Array ? [] : {}
+//   Object.keys(source).forEach(keys => {
+//     if (source[keys] && typeof source[keys] === 'object') {
+//       targetObj[keys] = deepClone(source[keys])
+//     } else {
+//       targetObj[keys] = source[keys]
+//     }
+//   })
+//   return targetObj
+// }
 
 /**
  * @param {Array} arr
@@ -330,7 +330,7 @@ export function makeMap(str, expectsLowerCase) {
     ? val => map[val.toLowerCase()]
     : val => map[val]
 }
- 
+
 export const exportDefault = 'export default '
 
 export const beautifierConf = {
@@ -387,4 +387,41 @@ export function camelCase(str) {
 export function isNumberStr(str) {
   return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
- 
+// 深拷贝对象
+export function deepClone(obj) {
+  const _toString = Object.prototype.toString
+
+  // null, undefined, non-object, function
+  if (!obj || typeof obj !== 'object') {
+    return obj
+  }
+
+  // DOM Node
+  if (obj.nodeType && 'cloneNode' in obj) {
+    return obj.cloneNode(true)
+  }
+
+  // Date
+  if (_toString.call(obj) === '[object Date]') {
+    return new Date(obj.getTime())
+  }
+
+  // RegExp
+  if (_toString.call(obj) === '[object RegExp]') {
+    const flags = []
+    if (obj.global) { flags.push('g') }
+    if (obj.multiline) { flags.push('m') }
+    if (obj.ignoreCase) { flags.push('i') }
+
+    return new RegExp(obj.source, flags.join(''))
+  }
+
+  const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
+
+  for (const key in obj) {
+    result[key] = deepClone(obj[key])
+  }
+
+  return result
+}
+

src/utils/permission.js

@@ -15,10 +15,8 @@ export function checkPermi(value) {
       return all_permission === permission || permissionDatas.includes(permission)
     })
 
-    if (!hasPermission) {
-      return false
-    }
-    return true
+    return hasPermission;
+
   } else {
     console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
     return false
@@ -40,10 +38,8 @@ export function checkRole(value) {
       return super_admin === role || permissionRoles.includes(role)
     })
 
-    if (!hasRole) {
-      return false
-    }
-    return true
+    return hasRole;
+
   } else {
     console.error(`need roles! Like checkRole="['admin','editor']"`)
     return false

src/views/tool/build/CodeTypeDialog.vue

@@ -41,7 +41,7 @@
         <el-button @click="close">
           取消
         </el-button>
-        <el-button type="primary" @click="handleConfirm">
+        <el-button type="primary" @click="handelConfirm">
           确定
         </el-button>
       </div>
@@ -94,7 +94,7 @@ export default {
     close(e) {
       this.$emit('update:visible', false)
     },
-    handleConfirm() {
+    handelConfirm() {
       this.$refs.elForm.validate(valid => {
         if (!valid) return
         this.$emit('confirm', { ...this.formData })
@@ -104,3 +104,7 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/tool/build/DraggableItem.vue

@@ -1,18 +1,18 @@
 <script>
 import draggable from 'vuedraggable'
-import render from '@/utils/generator/render'
+import render from '@/components/render/render'
 
 const components = {
-  itemBtns(h, element, index, parent) {
+  itemBtns(h, currentItem, index, list) {
     const { copyItem, deleteItem } = this.$listeners
     return [
       <span class="drawing-item-copy" title="复制" onClick={event => {
-        copyItem(element, parent); event.stopPropagation()
+        copyItem(currentItem, list); event.stopPropagation()
       }}>
         <i class="el-icon-copy-document" />
       </span>,
       <span class="drawing-item-delete" title="删除" onClick={event => {
-        deleteItem(index, parent); event.stopPropagation()
+        deleteItem(index, list); event.stopPropagation()
       }}>
         <i class="el-icon-delete" />
       </span>
@@ -20,60 +20,80 @@ const components = {
   }
 }
 const layouts = {
-  colFormItem(h, element, index, parent) {
+  colFormItem(h, currentItem, index, list) {
     const { activeItem } = this.$listeners
-    let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
+    const config = currentItem.__config__
+    const child = renderChildren.apply(this, arguments)
+    let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
     if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
+    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
+    if (config.showLabel === false) labelWidth = '0'
     return (
-      <el-col span={element.span} class={className}
-        nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
-        <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
-          label={element.label} required={element.required}>
-          <render key={element.renderKey} conf={element} onInput={ event => {
-            this.$set(element, 'defaultValue', event)
-          }} />
+      <el-col span={config.span} class={className}
+              nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
+        <el-form-item label-width={labelWidth}
+                      label={config.showLabel ? config.label : ''} required={config.required}>
+          <render key={config.renderKey} conf={currentItem} onInput={ event => {
+            this.$set(config, 'defaultValue', event)
+          }}>
+            {child}
+          </render>
         </el-form-item>
         {components.itemBtns.apply(this, arguments)}
       </el-col>
     )
   },
-  rowFormItem(h, element, index, parent) {
+  rowFormItem(h, currentItem, index, list) {
     const { activeItem } = this.$listeners
-    const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
+    const config = currentItem.__config__
+    const className = this.activeId === config.formId
+      ? 'drawing-row-item active-from-item'
+      : 'drawing-row-item'
     let child = renderChildren.apply(this, arguments)
-    if (element.type === 'flex') {
-      child = <el-row type={element.type} justify={element.justify} align={element.align}>
-              {child}
-            </el-row>
+    if (currentItem.type === 'flex') {
+      child = <el-row type={currentItem.type} justify={currentItem.justify} align={currentItem.align}>
+        {child}
+      </el-row>
     }
     return (
-      <el-col span={element.span}>
-        <el-row gutter={element.gutter} class={className}
-          nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
-          <span class="component-name">{element.componentName}</span>
-          <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
+      <el-col span={config.span}>
+        <el-row gutter={config.gutter} class={className}
+                nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
+          <span class="component-name">{config.componentName}</span>
+          <draggable list={config.children || []} animation={340}
+                     group="componentsGroup" class="drag-wrapper">
             {child}
           </draggable>
           {components.itemBtns.apply(this, arguments)}
         </el-row>
       </el-col>
     )
+  },
+  raw(h, currentItem, index, list) {
+    const config = currentItem.__config__
+    const child = renderChildren.apply(this, arguments)
+    return <render key={config.renderKey} conf={currentItem} onInput={ event => {
+      this.$set(config, 'defaultValue', event)
+    }}>
+      {child}
+    </render>
   }
 }
 
-function renderChildren(h, element, index, parent) {
-  if (!Array.isArray(element.children)) return null
-  return element.children.map((el, i) => {
-    const layout = layouts[el.layout]
+function renderChildren(h, currentItem, index, list) {
+  const config = currentItem.__config__
+  if (!Array.isArray(config.children)) return null
+  return config.children.map((el, i) => {
+    const layout = layouts[el.__config__.layout]
     if (layout) {
-      return layout.call(this, h, el, i, element.children)
+      return layout.call(this, h, el, i, config.children)
     }
-    return layoutIsNotFound()
+    return layoutIsNotFound.call(this)
   })
 }
 
 function layoutIsNotFound() {
-  throw new Error(`没有与${this.element.layout}匹配的layout`)
+  throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
 }
 
 export default {
@@ -82,19 +102,19 @@ export default {
     draggable
   },
   props: [
-    'element',
+    'currentItem',
     'index',
     'drawingList',
     'activeId',
     'formConf'
   ],
   render(h) {
-    const layout = layouts[this.element.layout]
+    const layout = layouts[this.currentItem.__config__.layout]
 
     if (layout) {
-      return layout.call(this, h, this.element, this.index, this.drawingList)
+      return layout.call(this, h, this.currentItem, this.index, this.drawingList)
     }
-    return layoutIsNotFound()
+    return layoutIsNotFound.call(this)
   }
 }
 </script>

src/views/tool/build/RightPanel.vue

@@ -11,9 +11,9 @@
       <el-scrollbar class="right-scrollbar">
         <!-- 组件属性 -->
         <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
-          <el-form-item v-if="activeData.changeTag" label="组件类型">
+          <el-form-item v-if="activeData.__config__.changeTag" label="组件类型">
             <el-select
-              v-model="activeData.tagIcon"
+              v-model="activeData.__config__.tagIcon"
               placeholder="请选择组件类型"
               :style="{width: '100%'}"
               @change="tagChange"
@@ -21,27 +21,27 @@
               <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
                 <el-option
                   v-for="item in group.options"
-                  :key="item.label"
-                  :label="item.label"
-                  :value="item.tagIcon"
+                  :key="item.__config__.label"
+                  :label="item.__config__.label"
+                  :value="item.__config__.tagIcon"
                 >
-                  <svg-icon class="node-icon" :icon-class="item.tagIcon" />
-                  <span> {{ item.label }}</span>
+                  <svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />
+                  <span> {{ item.__config__.label }}</span>
                 </el-option>
               </el-option-group>
             </el-select>
           </el-form-item>
-          <el-form-item v-if="activeData.vModel!==undefined" label="字段名">
-            <el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
+          <el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">
+            <el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）" />
           </el-form-item>
-          <el-form-item v-if="activeData.componentName!==undefined" label="组件名">
-            {{ activeData.componentName }}
+          <el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名">
+            {{ activeData.__config__.componentName }}
           </el-form-item>
-          <el-form-item v-if="activeData.label!==undefined" label="标题">
-            <el-input v-model="activeData.label" placeholder="请输入标题" />
+          <el-form-item v-if="activeData.__config__.label!==undefined" label="标题">
+            <el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" />
           </el-form-item>
           <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
-            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
+            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
           </el-form-item>
           <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
             <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
@@ -49,13 +49,13 @@
           <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
             <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
           </el-form-item>
-          <el-form-item v-if="activeData.span!==undefined" label="表单栅格">
-            <el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
+          <el-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格">
+            <el-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
           </el-form-item>
-          <el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
+          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined" label="栅格间隔">
             <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
           </el-form-item>
-          <el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
+          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.type!==undefined" label="布局模式">
             <el-radio-group v-model="activeData.type">
               <el-radio-button label="default" />
               <el-radio-button label="flex" />
@@ -78,20 +78,20 @@
               <el-radio-button label="bottom" />
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
-            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
+          <el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度">
+            <el-input v-model.number="activeData.__config__.labelWidth" type="number" placeholder="请输入标签宽度" />
           </el-form-item>
           <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
             <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
           </el-form-item>
-          <el-form-item v-if="activeData.vModel!==undefined" label="默认值">
+          <el-form-item v-if="activeData.__vModel__!==undefined" label="默认值">
             <el-input
-              :value="setDefaultValue(activeData.defaultValue)"
+              :value="setDefaultValue(activeData.__config__.defaultValue)"
               placeholder="请输入默认值"
               @input="onDefaultValueInput"
             />
           </el-form-item>
-          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
+          <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="至少应选">
             <el-input-number
               :value="activeData.min"
               :min="0"
@@ -99,7 +99,7 @@
               @input="$set(activeData, 'min', $event?$event:undefined)"
             />
           </el-form-item>
-          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
+          <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="最多可选">
             <el-input-number
               :value="activeData.max"
               :min="0"
@@ -107,11 +107,11 @@
               @input="$set(activeData, 'max', $event?$event:undefined)"
             />
           </el-form-item>
-          <el-form-item v-if="activeData.prepend!==undefined" label="前缀">
-            <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
+          <el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
+            <el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" />
           </el-form-item>
-          <el-form-item v-if="activeData.append!==undefined" label="后缀">
-            <el-input v-model="activeData.append" placeholder="请输入后缀" />
+          <el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
+            <el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" />
           </el-form-item>
           <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
             <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
@@ -127,7 +127,17 @@
               </el-button>
             </el-input>
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
+          <el-form-item
+            v-if="activeData['icon']!==undefined && activeData.__config__.tag === 'el-button'"
+            label="按钮图标"
+          >
+            <el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称">
+              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('icon')">
+                选择
+              </el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符">
             <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
           </el-form-item>
           <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
@@ -136,19 +146,22 @@
           <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
             <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
           </el-form-item>
-          <el-form-item v-if="activeData.min !== undefined" label="最小值">
+          <el-form-item v-if="isShowMin" label="最小值">
             <el-input-number v-model="activeData.min" placeholder="最小值" />
           </el-form-item>
-          <el-form-item v-if="activeData.max !== undefined" label="最大值">
+          <el-form-item v-if="isShowMax" label="最大值">
             <el-input-number v-model="activeData.max" placeholder="最大值" />
           </el-form-item>
-          <el-form-item v-if="activeData.step !== undefined" label="步长">
+          <el-form-item v-if="activeData.height!==undefined" label="组件高度">
+            <el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey" />
+          </el-form-item>
+          <el-form-item v-if="isShowStep" label="步长">
             <el-input-number v-model="activeData.step" placeholder="步数" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
+          <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="精度">
             <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
+          <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="按钮位置">
             <el-radio-group v-model="activeData['controls-position']">
               <el-radio-button label="">
                 默认
@@ -186,7 +199,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
+            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.__config__.tag"
             label="时间类型"
           >
             <el-select
@@ -222,9 +235,9 @@
               <el-option label="txt" value=".txt" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
-            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
-              <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
+          <el-form-item v-if="activeData.__config__.fileSize !== undefined" label="文件大小">
+            <el-input v-model.number="activeData.__config__.fileSize" placeholder="请输入文件大小">
+              <el-select slot="append" v-model="activeData.__config__.sizeUnit" :style="{ width: '66px' }">
                 <el-option label="KB" value="KB" />
                 <el-option label="MB" value="MB" />
                 <el-option label="GB" value="GB" />
@@ -248,11 +261,30 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item
-            v-if="activeData.buttonText !== undefined"
+            v-if="activeData.type !== undefined && activeData.__config__.tag === 'el-button'"
+            label="按钮类型"
+          >
+            <el-select v-model="activeData.type" :style="{ width: '100%' }">
+              <el-option label="primary" value="primary" />
+              <el-option label="success" value="success" />
+              <el-option label="warning" value="warning" />
+              <el-option label="danger" value="danger" />
+              <el-option label="info" value="info" />
+              <el-option label="text" value="text" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.__config__.buttonText !== undefined"
             v-show="'picture-card' !== activeData['list-type']"
             label="按钮文字"
           >
-            <el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
+            <el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字" />
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.__config__.tag === 'el-button'"
+            label="按钮文字"
+          >
+            <el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字" />
           </el-form-item>
           <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
             <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
@@ -270,15 +302,15 @@
               @input="setTimeValue($event)"
             />
           </el-form-item>
-          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
+          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag) > -1">
             <el-divider>选项</el-divider>
             <draggable
-              :list="activeData.options"
+              :list="activeData.__slot__.options"
               :animation="340"
               group="selectItem"
               handle=".option-drag"
             >
-              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
+              <div v-for="(item, index) in activeData.__slot__.options" :key="index" class="select-item">
                 <div class="select-line-icon option-drag">
                   <i class="el-icon-s-operation" />
                 </div>
@@ -289,7 +321,7 @@
                   :value="item.value"
                   @input="setOptionValue(item, $event)"
                 />
-                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
+                <div class="close-btn select-line-icon" @click="activeData.__slot__.options.splice(index, 1)">
                   <i class="el-icon-remove-outline" />
                 </div>
               </div>
@@ -307,10 +339,10 @@
             <el-divider />
           </template>
 
-          <template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
+          <template v-if="['el-cascader', 'el-table'].includes(activeData.__config__.tag)">
             <el-divider>选项</el-divider>
-            <el-form-item label="数据类型">
-              <el-radio-group v-model="activeData.dataType" size="small">
+            <el-form-item v-if="activeData.__config__.dataType" label="数据类型">
+              <el-radio-group v-model="activeData.__config__.dataType" size="small">
                 <el-radio-button label="dynamic">
                   动态数据
                 </el-radio-button>
@@ -320,27 +352,59 @@
               </el-radio-group>
             </el-form-item>
 
-            <template v-if="activeData.dataType === 'dynamic'">
-              <el-form-item label="标签键名">
-                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
-              </el-form-item>
-              <el-form-item label="值键名">
-                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
+            <template v-if="activeData.__config__.dataType === 'dynamic'">
+              <el-form-item label="接口地址">
+                <el-input
+                  v-model="activeData.__config__.url"
+                  :title="activeData.__config__.url"
+                  placeholder="请输入接口地址"
+                  clearable
+                  @blur="$emit('fetch-data', activeData)"
+                >
+                  <el-select
+                    slot="prepend"
+                    v-model="activeData.__config__.method"
+                    :style="{width: '85px'}"
+                    @change="$emit('fetch-data', activeData)"
+                  >
+                    <el-option label="get" value="get" />
+                    <el-option label="post" value="post" />
+                    <el-option label="put" value="put" />
+                    <el-option label="delete" value="delete" />
+                  </el-select>
+                </el-input>
               </el-form-item>
-              <el-form-item label="子级键名">
-                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
+              <el-form-item label="数据位置">
+                <el-input
+                  v-model="activeData.__config__.dataPath"
+                  placeholder="请输入数据位置"
+                  @blur="$emit('fetch-data', activeData)"
+                />
               </el-form-item>
+
+              <template v-if="activeData.props && activeData.props.props">
+                <el-form-item label="标签键名">
+                  <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
+                </el-form-item>
+                <el-form-item label="值键名">
+                  <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
+                </el-form-item>
+                <el-form-item label="子级键名">
+                  <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
+                </el-form-item>
+              </template>
             </template>
 
+            <!-- 级联选择静态树 -->
             <el-tree
-              v-if="activeData.dataType === 'static'"
+              v-if="activeData.__config__.dataType === 'static'"
               draggable
               :data="activeData.options"
               node-key="id"
               :expand-on-click-node="false"
               :render-content="renderContent"
             />
-            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
+            <div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px">
               <el-button
                 style="padding-bottom: 0"
                 icon="el-icon-circle-plus-outline"
@@ -353,8 +417,8 @@
             <el-divider />
           </template>
 
-          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
-            <el-radio-group v-model="activeData.optionType">
+          <el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式">
+            <el-radio-group v-model="activeData.__config__.optionType">
               <el-radio-button label="default">
                 默认
               </el-radio-button>
@@ -370,6 +434,14 @@
             <el-color-picker v-model="activeData['inactive-color']" />
           </el-form-item>
 
+          <el-form-item v-if="activeData.__config__.showLabel !== undefined
+            && activeData.__config__.labelWidth !== undefined" label="显示标签"
+          >
+            <el-switch v-model="activeData.__config__.showLabel" />
+          </el-form-item>
+          <el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
+            <el-switch v-model="activeData.branding" @input="changeRenderKey" />
+          </el-form-item>
           <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
             <el-switch v-model="activeData['allow-half']" />
           </el-form-item>
@@ -386,16 +458,17 @@
             <el-switch v-model="activeData.range" @change="rangeChange" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.border !== undefined && activeData.optionType === 'default'"
+            v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'"
             label="是否带边框"
           >
-            <el-switch v-model="activeData.border" />
+            <el-switch v-model="activeData.__config__.border" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
+          <el-form-item v-if="activeData.__config__.tag === 'el-color-picker'" label="颜色格式">
             <el-select
               v-model="activeData['color-format']"
               placeholder="请选择颜色格式"
               :style="{ width: '100%' }"
+              clearable
               @change="colorFormatChange"
             >
               <el-option
@@ -408,10 +481,11 @@
           </el-form-item>
           <el-form-item
             v-if="activeData.size !== undefined &&
-              (activeData.optionType === 'button' ||
-                activeData.border ||
-                activeData.tag === 'el-color-picker')"
-            label="选项尺寸"
+              (activeData.__config__.optionType === 'button' ||
+                activeData.__config__.border ||
+                activeData.__config__.tag === 'el-color-picker' ||
+                activeData.__config__.tag === 'el-button')"
+            label="组件尺寸"
           >
             <el-radio-group v-model="activeData.size">
               <el-radio-button label="medium">
@@ -428,25 +502,28 @@
           <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
             <el-switch v-model="activeData['show-word-limit']" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
+          <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="严格步数">
             <el-switch v-model="activeData['step-strictly']" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
+          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="任选层级">
+            <el-switch v-model="activeData.props.props.checkStrictly" />
+          </el-form-item>
+          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="是否多选">
             <el-switch v-model="activeData.props.props.multiple" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
+          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="展示全路径">
             <el-switch v-model="activeData['show-all-levels']" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
+          <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选">
             <el-switch v-model="activeData.filterable" />
           </el-form-item>
           <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
             <el-switch v-model="activeData.clearable" />
           </el-form-item>
-          <el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
-            <el-switch v-model="activeData.showTip" />
+          <el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
+            <el-switch v-model="activeData.__config__.showTip" />
           </el-form-item>
-          <el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
+          <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
             <el-switch v-model="activeData.multiple" />
           </el-form-item>
           <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
@@ -458,20 +535,20 @@
           <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
             <el-switch v-model="activeData.disabled" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
+          <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="能否搜索">
             <el-switch v-model="activeData.filterable" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
+          <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选">
             <el-switch v-model="activeData.multiple" @change="multipleChange" />
           </el-form-item>
-          <el-form-item v-if="activeData.required !== undefined" label="是否必填">
-            <el-switch v-model="activeData.required" />
+          <el-form-item v-if="activeData.__config__.required !== undefined" label="是否必填">
+            <el-switch v-model="activeData.__config__.required" />
           </el-form-item>
 
-          <template v-if="activeData.layoutTree">
+          <template v-if="activeData.__config__.layoutTree">
             <el-divider>布局结构树</el-divider>
             <el-tree
-              :data="[activeData]"
+              :data="[activeData.__config__]"
               :props="layoutTreeProps"
               node-key="renderKey"
               default-expand-all
@@ -479,21 +556,21 @@
             >
               <span slot-scope="{ node, data }">
                 <span class="node-label">
-                  <svg-icon class="node-icon" :icon-class="data.tagIcon" />
+                  <svg-icon class="node-icon" :icon-class="data.__config__?data.__config__.tagIcon:data.tagIcon" />
                   {{ node.label }}
                 </span>
               </span>
             </el-tree>
           </template>
 
-          <template v-if="activeData.layout === 'colFormItem' && activeData.tag !== 'el-button'">
+          <template v-if="Array.isArray(activeData.__config__.regList)">
             <el-divider>正则校验</el-divider>
             <div
-              v-for="(item, index) in activeData.regList"
+              v-for="(item, index) in activeData.__config__.regList"
               :key="index"
               class="reg-item"
             >
-              <span class="close-btn" @click="activeData.regList.splice(index, 1)">
+              <span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
                 <i class="el-icon-close" />
               </span>
               <el-form-item label="表达式">
@@ -548,7 +625,7 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item label="标签宽度">
-            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
+            <el-input v-model.number="formConf.labelWidth" type="number" placeholder="请输入标签宽度" />
           </el-form-item>
           <el-form-item label="栅格间隔">
             <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
@@ -572,16 +649,15 @@
 </template>
 
 <script>
-import { isArray } from 'util'
 import draggable from 'vuedraggable'
+import { isArray } from 'util'
 import TreeNodeDialog from './TreeNodeDialog'
-import { isNumberStr } from '@/utils/index'
+import { isNumberStr } from '@/utils'
 import IconsDialog from './IconsDialog'
 import {
-  inputComponents,
-  selectComponents,
-  layoutComponents
+  inputComponents, selectComponents, layoutComponents
 } from '@/utils/generator/config'
+import { saveFormConf } from '@/utils/db'
 
 const dateTimeFormat = {
   date: 'yyyy-MM-dd',
@@ -594,11 +670,14 @@ const dateTimeFormat = {
   datetimerange: 'yyyy-MM-dd HH:mm:ss'
 }
 
+// 使changeRenderKey在目标组件改变时可用
+const needRerenderList = ['tinymce']
+
 export default {
   components: {
-    draggable,
     TreeNodeDialog,
-    IconsDialog
+    IconsDialog,
+    draggable
   },
   props: ['showField', 'activeData', 'formConf'],
   data() {
@@ -690,7 +769,8 @@ export default {
       ],
       layoutTreeProps: {
         label(data, node) {
-          return data.componentName || `${data.label}: ${data.vModel}`
+          const config = data.__config__
+          return data.componentName || `${config.label}: ${data.__vModel__}`
         }
       }
     }
@@ -698,14 +778,14 @@ export default {
   computed: {
     documentLink() {
       return (
-        this.activeData.document
+        this.activeData.__config__.document
         || 'https://element.eleme.cn/#/zh-CN/component/installation'
       )
     },
     dateOptions() {
       if (
         this.activeData.type !== undefined
-        && this.activeData.tag === 'el-date-picker'
+        && this.activeData.__config__.tag === 'el-date-picker'
       ) {
         if (this.activeData['start-placeholder'] === undefined) {
           return this.dateTypeOptions
@@ -725,17 +805,37 @@ export default {
           options: selectComponents
         }
       ]
+    },
+    activeTag() {
+      return this.activeData.__config__.tag
+    },
+    isShowMin() {
+      return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
+    },
+    isShowMax() {
+      return ['el-input-number', 'el-slider', 'el-rate'].indexOf(this.activeTag) > -1
+    },
+    isShowStep() {
+      return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
+    }
+  },
+  watch: {
+    formConf: {
+      handler(val) {
+        saveFormConf(val)
+      },
+      deep: true
     }
   },
   methods: {
     addReg() {
-      this.activeData.regList.push({
+      this.activeData.__config__.regList.push({
         pattern: '',
         message: ''
       })
     },
     addSelectItem() {
-      this.activeData.options.push({
+      this.activeData.__slot__.options.push({
         label: '',
         value: ''
       })
@@ -751,12 +851,12 @@ export default {
           <span>{node.label}</span>
           <span class="node-operation">
             <i on-click={() => this.append(data)}
-              class="el-icon-plus"
-              title="添加"
+               class="el-icon-plus"
+               title="添加"
             ></i>
             <i on-click={() => this.remove(node, data)}
-              class="el-icon-delete"
-              title="删除"
+               class="el-icon-delete"
+               title="删除"
             ></i>
           </span>
         </div>
@@ -770,6 +870,7 @@ export default {
       this.currentNode = data.children
     },
     remove(node, data) {
+      this.activeData.__config__.defaultValue = [] // 避免删除时报错
       const { parent } = node
       const children = parent.data.children || parent.data
       const index = children.findIndex(d => d.id === data.id)
@@ -785,29 +886,29 @@ export default {
       if (Array.isArray(val)) {
         return val.join(',')
       }
-      if (['string', 'number'].indexOf(val) > -1) {
-        return val
-      }
+      // if (['string', 'number'].indexOf(typeof val) > -1) {
+      //   return val
+      // }
       if (typeof val === 'boolean') {
         return `${val}`
       }
       return val
     },
     onDefaultValueInput(str) {
-      if (isArray(this.activeData.defaultValue)) {
+      if (isArray(this.activeData.__config__.defaultValue)) {
         // 数组
         this.$set(
-          this.activeData,
+          this.activeData.__config__,
           'defaultValue',
           str.split(',').map(val => (isNumberStr(val) ? +val : val))
         )
       } else if (['true', 'false'].indexOf(str) > -1) {
         // 布尔
-        this.$set(this.activeData, 'defaultValue', JSON.parse(str))
+        this.$set(this.activeData.__config__, 'defaultValue', JSON.parse(str))
       } else {
         // 字符串和数字
         this.$set(
-          this.activeData,
+          this.activeData.__config__,
           'defaultValue',
           isNumberStr(str) ? +str : str
         )
@@ -822,7 +923,7 @@ export default {
     },
     setTimeValue(val, type) {
       const valueFormat = type === 'week' ? dateTimeFormat.date : val
-      this.$set(this.activeData, 'defaultValue', null)
+      this.$set(this.activeData.__config__, 'defaultValue', null)
       this.$set(this.activeData, 'value-format', valueFormat)
       this.$set(this.activeData, 'format', val)
     },
@@ -830,14 +931,14 @@ export default {
       this.formConf.span = val
     },
     multipleChange(val) {
-      this.$set(this.activeData, 'defaultValue', val ? [] : '')
+      this.$set(this.activeData.__config__, 'defaultValue', val ? [] : '')
     },
     dateTypeChange(val) {
       this.setTimeValue(dateTimeFormat[val], val)
     },
     rangeChange(val) {
       this.$set(
-        this.activeData,
+        this.activeData.__config__,
         'defaultValue',
         val ? [this.activeData.min, this.activeData.max] : this.activeData.min
       )
@@ -849,9 +950,9 @@ export default {
       if (val) this.activeData['show-text'] = false
     },
     colorFormatChange(val) {
-      this.activeData.defaultValue = null
+      this.activeData.__config__.defaultValue = null
       this.activeData['show-alpha'] = val.indexOf('a') > -1
-      this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
+      this.activeData.__config__.renderKey = +new Date() // 更新renderKey,重新渲染该组件
     },
     openIconsDialog(model) {
       this.iconsVisible = true
@@ -861,9 +962,14 @@ export default {
       this.activeData[this.currentIconModel] = val
     },
     tagChange(tagIcon) {
-      let target = inputComponents.find(item => item.tagIcon === tagIcon)
-      if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
+      let target = inputComponents.find(item => item.__config__.tagIcon === tagIcon)
+      if (!target) target = selectComponents.find(item => item.__config__.tagIcon === tagIcon)
       this.$emit('tag-change', target)
+    },
+    changeRenderKey() {
+      if (needRerenderList.includes(this.activeData.__config__.tag)) {
+        this.activeData.__config__.renderKey = +new Date()
+      }
     }
   }
 }
@@ -902,7 +1008,7 @@ export default {
   margin-top: 4px;
 }
 .select-item.sortable-chosen {
-  border: 1px dashed #031527;
+  border: 1px dashed #409eff;
 }
 .select-line-icon {
   line-height: 32px;
@@ -929,7 +1035,7 @@ export default {
   top: 0;
   left: 0;
   cursor: pointer;
-  background: #031527;
+  background: #409eff;
   z-index: 1;
   border-radius: 0 0 6px 0;
   text-align: center;

src/views/tool/build/TreeNodeDialog.vue

@@ -59,7 +59,7 @@
       <div slot="footer">
         <el-button
           type="primary"
-          @click="handleConfirm"
+          @click="handelConfirm"
         >
           确定
         </el-button>
@@ -71,7 +71,10 @@
   </div>
 </template>
 <script>
-import { isNumberStr } from '@/utils/index'
+import { isNumberStr } from '@/utils'
+import { getTreeNodeId, saveTreeNodeId } from '@/utils/db'
+
+const id = getTreeNodeId()
 
 export default {
   components: {},
@@ -79,7 +82,7 @@ export default {
   props: [],
   data() {
     return {
-      id: 100,
+      id,
       formData: {
         label: undefined,
         value: undefined
@@ -118,6 +121,9 @@ export default {
     // eslint-disable-next-line func-names
     'formData.value': function (val) {
       this.dataType = isNumberStr(val) ? 'number' : 'string'
+    },
+    id(val) {
+      saveTreeNodeId(val)
     }
   },
   created() {},
@@ -133,7 +139,7 @@ export default {
     close() {
       this.$emit('update:visible', false)
     },
-    handleConfirm() {
+    handelConfirm() {
       this.$refs.elForm.validate(valid => {
         if (!valid) return
         if (this.dataType === 'number') {
@@ -147,3 +153,6 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+</style>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.3.200:8080`,
+        target: `http://101.42.248.108:17005`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''