角色选择器

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/2

flowable-engine-web/src/api/org.js

@@ -13,7 +13,7 @@ export function getOrgTree(param) {
 // 查询系统角色
 export function getRole() {
   return request({
-    url: 'oa/org/role',
+    url: 'admin/role/option',
     method: 'get'
   })
 }

flowable-engine-web/src/components/common/OrgPicker.vue

@@ -2,67 +2,32 @@
   <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
     <div class="picker">
       <div class="candidate" v-loading="loading">
-        <div v-if="type !== 'role'">
+        <div class="role-header">
-          <el-input v-model="search" @input="searchUser" style="width: 95%;" size="small"
-                    clearable placeholder="搜索人员，支持拼音、姓名" prefix-icon="el-icon-search"/>
-          <div v-show="!showUsers">
-            <ellipsis hoverTip style="height: 18px; color: #8c8c8c; padding: 5px 0 0" :row="1" :content="deptStackStr">
-              <i slot="pre" class="el-icon-office-building"></i>
-            </ellipsis>
-            <div style="margin-top: 5px">
-              <el-checkbox v-model="checkAll" @change="handleCheckAllChange" :disabled="!multiple">全选</el-checkbox>
-              <span v-show="deptStack.length > 0" class="top-dept" @click="beforeNode">上一级</span>
-            </div>
-          </div>
-        </div>
-        <div class="role-header" v-else>
           <div>系统角色</div>
         </div>
-        <div class="org-items" :style="type === 'role' ? 'height: 350px':''">
+        <div class="org-items">
-          <el-empty :image-size="100" description="似乎没有数据" v-show="orgs.length === 0"/>
+          <el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
-          <div v-for="(org, index) in orgs" :key="index" :class="orgItemClass(org)" @click="selectChange(org)">
+          <!-- 系统角色-->
-            <el-checkbox v-model="org.selected" :disabled="disableDept(org)"></el-checkbox>
+          <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
-            <div v-if="org.type === 'dept'">
+               @click="selectChange(roleItem)">
-              <i class="el-icon-folder-opened"></i>
+            <el-checkbox v-model="roleItem.selected" v-if="multiple"></el-checkbox>
-              <span class="name">{{ org.name }}</span>
+            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
-              <span @click.stop="nextNode(org)" :class="`next-dept${org.selected ? '-disable':''}`">
+            <span>{{ roleItem.name }}</span>
-                <i class="iconfont icon-map-site"></i>下级
-              </span>
-            </div>
-            <div v-else-if="org.type === 'user'" style="display: flex; align-items: center">
-              <el-avatar :size="35" :src="org.avatar" v-if="$isNotEmpty(org.avatar)"/>
-              <span v-else class="avatar">{{getShortName(org.name)}}</span>
-              <span class="name">{{ org.name }}</span>
-            </div>
-            <div style="display: inline-block" v-else>
-              <i class="iconfont icon-bumen"></i>
-              <span class="name">{{ org.name }}</span>
-            </div>
           </div>
         </div>
       </div>
+
       <div class="selected">
         <div class="count">
-          <span>已选 {{ select.length }} 项</span>
+          <span>已选 {{ selectList.length }} 项</span>
           <span @click="clearSelected">清空</span>
         </div>
-        <div class="org-items" style="height: 350px;">
+        <div class="org-items">
-          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="select.length === 0"/>
+          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
-          <div v-for="(org, index) in select" :key="index" :class="orgItemClass(org)" >
+          <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
-            <div v-if="org.type === 'dept'">
+            <i class="el-icon-user-solid"></i>
-              <i class="el-icon-folder-opened"></i>
+            <span>{{ org.name }}</span>
-              <span style="position: static" class="name">{{ org.name }}</span>
+            <i class="el-icon-close" @click="noSelected(org)"></i>
-            </div>
-            <div v-else-if="org.type === 'user'" style="display: flex; align-items: center">
-              <el-avatar :size="35" :src="org.avatar" v-if="$isNotEmpty(org.avatar)"/>
-              <span v-else class="avatar">{{getShortName(org.name)}}</span>
-              <span class="name">{{ org.name }}</span>
-            </div>
-            <div v-else>
-              <i class="iconfont icon-bumen"></i>
-              <span class="name">{{ org.name }}</span>
-            </div>
-            <i class="el-icon-close" @click="noSelected(index)"></i>
           </div>
         </div>
       </div>
@@ -71,251 +36,137 @@
 </template>
 
 <script>
-import {getOrgTree, getUserByName} from '@/api/org'
+import {getRole} from "@/api/org";
-import axios from "axios";
 
 export default {
   name: "OrgPicker",
-  components: {},
-  props: {
-    title: {
-      default: '请选择',
-      type: String
-    },
-    type: {
-      default: 'org', //org选择部门/人员  user-选人  dept-选部门 role-选角色
-      type: String
-    },
-    multiple: { //是否多选
-      default: false,
-      type: Boolean
-    },
-    selected: {
-      default: () => {
-        return []
-      },
-      type: Array
-    },
-  },
   data() {
     return {
       visible: false,
       loading: false,
-      checkAll: false,
+      title: "请选择",
-      nowDeptId: null,
+      multiple: true,//是否多选
-      isIndeterminate: false,
+      roleList: [
-      searchUsers: [],
+        {
-      nodes: [],
+          value: 1,
-      select: [],
+          name: "超级管理员"
-      search: '',
+        },
-      deptStack: []
+        {
+          value: 2,
+          name: "普通角色"
+        },
+        {
+          value: 100,
+          name: "前端开发人员"
+        },
+        {
+          value: 101,
+          name: "图片文件管理员"
+        },
+        {
+          value: 102,
+          name: "附件管理员"
+        },
+        {
+          value: 103,
+          name: "权限测试角色"
         }
+      ],
+      selectList: []
+    };
   },
-  computed: {
+  created() {
-    deptStackStr() {
+    this.getRole();
-      return String(this.deptStack.map(v => v.name)).replaceAll(',', ' > ')
-    },
-    orgs() {
-      return !this.search || this.search.trim() === '' ? this.nodes : this.searchUsers
-    },
-    showUsers(){
-      return this.search || this.search.trim() !== ''
-    }
   },
   methods: {
+    //获取角色信息
+    getRole() {
+      getRole().then(res => {
+        console.log("获取角色信息:==", res);
+      });
+    },
+    //用于首页选择本次登录者,显示弹窗
     show() {
-      this.visible = true
+      this.visible = true;
-      this.init()
+      this.init();
-      this.getOrgList()
+      // this.getOrgList();
     },
-    orgItemClass(org){
+    //选中角色
-      return {
+    selectChange(userItem) {
-        'org-item': true,
+      //多选
-        'org-dept-item': org.type === 'dept',
+      if (this.multiple) {
-        'org-user-item': org.type === 'user',
+        for (let i = 0; i < this.selectList.length; i++) {
-        'org-role-item': org.type === 'role'
+          if (this.selectList[i].value === userItem.value) {
-      }
+            this.selectList.splice(i, 1);
-    },
-    disableDept(node) {
-      return this.type === 'user' && 'dept' === node.type
-    },
-    getOrgList() {
-      this.loading = true
-      axios({
-        url:"http://127.0.0.1:9999/oa/org/tree",
-      params:{deptId: this.nowDeptId, type: this.type}}).then(res=>{
-        // console.log(res,res,"neuaodiasjd")
-        this.loading = false
-        this.nodes = res.data
-        this.selectToLeft()
-      }).catch(err => {
-        this.loading = false
-        this.$message.error(err.response.data)
-      })
-      // getOrgTree({deptId: this.nowDeptId, type: this.type}).then(rsp => {
-      //   this.loading = false
-      //   this.nodes = rsp.data
-      //   this.selectToLeft()
-      // }).catch(err => {
-      //   this.loading = false
-      //   this.$message.error(err.response.data)
-      // })
-    },
-    getShortName(name) {
-      if (name) {
-        return name.length > 2 ? name.substring(1, 3) : name;
-      }
-      return '**'
-    },
-    searchUser() {
-      let userName = this.search.trim()
-      this.searchUsers = []
-      this.loading = true
-      getUserByName({userName: userName}).then(rsp => {
-        this.loading = false
-        this.searchUsers = rsp.data
-        this.selectToLeft()
-      }).catch(err => {
-        this.loading = false
-        this.$message.error("接口异常")
-      })
-    },
-    selectToLeft() {
-      let nodes = this.search.trim() === '' ? this.nodes : this.searchUsers;
-      nodes.forEach(node => {
-        for (let i = 0; i < this.select.length; i++) {
-          if (this.select[i].id === node.id) {
-            node.selected = true;
-            break;
-          } else {
-            node.selected = false;
-          }
-        }
-      })
-    },
-    selectChange(node) {
-      if (node.selected) {
-        this.checkAll = false;
-        for (let i = 0; i < this.select.length; i++) {
-          if (this.select[i].id === node.id) {
-            this.select.splice(i, 1);
             break;
           }
         }
-        node.selected = false;
+        userItem.selected = true;
-      } else if (!this.disableDept(node)) {
+        this.selectList.push(userItem);
-        node.selected = true
+      } else {//单选
-        let nodes = this.search.trim() === '' ? this.nodes : this.searchUsers;
+        userItem.selected = true;
-        if (!this.multiple) {
+        this.selectList = [userItem];
-          nodes.forEach(nd => {
-            if (node.id !== nd.id) {
-              nd.selected = false
-            }
-          })
-        }
-        if (node.type === 'dept') {
-          if (!this.multiple) {
-            this.select = [node]
-          } else {
-            this.select.unshift(node);
-          }
-        } else {
-          if (!this.multiple) {
-            this.select = [node]
-          } else {
-            this.select.push(node);
-          }
-        }
       }
     },
-    noSelected(index) {
+    //右侧的×
-      let nodes = this.nodes;
+    noSelected(org) {
-      for (let f = 0; f < 2; f++) {
+      for (let i = 0; i < this.selectList.length; i++) {
-        for (let i = 0; i < nodes.length; i++) {
+        if (this.selectList[i].value === org.value) {
-          if (nodes[i].id === this.select[index].id) {
+          this.selectList.splice(i, 1);
-            nodes[i].selected = false;
-            this.checkAll = false;
           break;
         }
       }
-        nodes = this.searchUsers;
+      org.selected = false;
-      }
-      this.select.splice(index, 1)
-    },
-    handleCheckAllChange() {
-      this.nodes.forEach(node => {
-        if (this.checkAll) {
-          if (!node.selected && !this.disableDept(node)) {
-            node.selected = true
-            this.select.push(node)
-          }
-        } else {
-          node.selected = false;
-          for (let i = 0; i < this.select.length; i++) {
-            if (this.select[i].id === node.id) {
-              this.select.splice(i, 1);
-              break;
-            }
-          }
-        }
-      })
-    },
-    nextNode(node) {
-      this.nowDeptId = node.id
-      this.deptStack.push(node)
-      this.getOrgList()
-    },
-    beforeNode() {
-      if (this.deptStack.length === 0) {
-        return;
-      }
-      if (this.deptStack.length < 2) {
-        this.nowDeptId = null
-      } else {
-        this.nowDeptId = this.deptStack[this.deptStack.length - 2].id
-      }
-      this.deptStack.splice(this.deptStack.length - 1, 1);
-      this.getOrgList()
-    },
-    recover() {
-      this.select = []
-      this.nodes.forEach(nd => nd.selected = false)
     },
+    //确定按钮
     selectOk() {
-      this.$emit('ok', Object.assign([], this.select.map(v => {
+      // this.$emit("ok", Object.assign([], this.select.map(v => {
-        v.avatar = undefined
+      //   v.avatar = undefined;
-        return v
+      //   return v;
-      })))
+      // })));
-      this.visible = false
+      // this.visible = false;
-      this.recover()
+      // this.recover();
     },
-    clearSelected(){
+    //清空
-      this.$confirm('您确定要清空已选中的项?', '提示', {
+    clearSelected() {
-        confirmButtonText: '确定',
+      this.$confirm("您确定要清空已选中的项?", "提示", {
-        cancelButtonText: '取消',
+        confirmButtonText: "确定",
-        type: 'warning'
+        cancelButtonText: "取消",
+        type: "warning"
       }).then(() => {
-        this.recover()
+        this.recover();
-      })
+      });
-    },
-    close() {
-      this.$emit('close')
-      this.recover()
     },
     init() {
-      this.checkAll = false;
+      this.selectList = Object.assign([], this.selected);
-      this.nowDeptId = null;
-      this.nodes = []
-      this.select = Object.assign([], this.selected)
-      this.selectToLeft()
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
-
 @containWidth: 278px;
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+
+
+.picker {
+  height: 402px;
+  position: relative;
+  text-align: left;
+
+  .candidate {
+    left: 0;
+    top: 0;
+  }
+
+  .role-header {
+    padding: 10px !important;
+    margin-bottom: 5px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+}
 
 .candidate, .selected {
   position: absolute;
@@ -325,118 +176,10 @@ export default {
   border: 1px solid #e8e8e8;
 }
 
-.picker {
-  height: 402px;
-  position: relative;
-  text-align: left;
-  .candidate {
-    left: 0;
-    top: 0;
-
-    .role-header{
-      padding: 10px !important;
-      margin-bottom: 5px;
-      border-bottom: 1px solid #e8e8e8;
-    }
-
-    .top-dept{
-      margin-left: 20px;
-      cursor: pointer;
-      color:#38adff;
-    }
-    .next-dept {
-      float: right;
-      color: @theme-primary;
-      cursor: pointer;
-    }
-
-    .next-dept-disable {
-      float: right;
-      color: #8c8c8c;
-      cursor: not-allowed;
-    }
-
-    & > div:first-child {
-      padding: 5px 10px;
-    }
-
-  }
-
-  .selected {
-    right: 0;
-    top: 0;
-  }
-
-  .org-items {
-    overflow-y: auto;
-    height: 310px;
-
-    .el-icon-close {
-      position: absolute;
-      right: 5px;
-      cursor: pointer;
-      font-size: larger;
-    }
-    .org-dept-item {
-      padding: 10px 5px;
-
-      & > div {
-        display: inline-block;
-
-        & > span:last-child {
-          position: absolute;
-          right: 5px;
-        }
-      }
-    }
-
-    .org-role-item {
-      display: flex;
-      align-items: center;
-      padding: 10px 5px;
-    }
-
-    /deep/ .org-user-item {
-      display: flex;
-      align-items: center;
-      padding: 5px;
-
-      & > div {
-        display: inline-block;
-      }
-
-      .avatar {
-        width: 35px;
-        text-align: center;
-        line-height: 35px;
-        background: @theme-primary;
-        color: white;
-        border-radius: 50%;
-      }
-    }
-
-    /deep/ .org-item {
-      margin: 0 5px;
-      border-radius: 5px;
-      position: relative;
-
-      .el-checkbox {
-        margin-right: 10px;
-      }
-
-      .name {
-        margin-left: 5px;
-      }
-
-      &:hover {
-        background: #f1f1f1;
-      }
-    }
-  }
-}
-
 .selected {
   border-left: none;
+  right: 0;
+  top: 0;
 
   .count {
     width: calc(@containWidth - 20px);
@@ -444,22 +187,48 @@ export default {
     display: inline-block;
     border-bottom: 1px solid #e8e8e8;
     margin-bottom: 5px;
+
     & > span:nth-child(2) {
       float: right;
       color: #c75450;
       cursor: pointer;
     }
   }
+
 }
 
-/deep/ .el-dialog__body {
+
-  padding: 10px 20px;
+.org-items {
+  overflow-y: auto;
+  height: 350px;
+
+  .el-icon-close {
+    position: absolute;
+    right: 5px;
+    cursor: pointer;
+    font-size: larger;
+  }
+
+  .org-role-item {
+    padding: 7px 5px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin: 0 5px;
+    border-radius: 5px;
+    position: relative;
+
+    &:hover {
+      background: #f1f1f1;
+    }
+
+    > span {
+      margin-left: 5px;
+    }
+
+  }
 }
 
-.disabled{
-  cursor: not-allowed !important;
-  color: #8c8c8c !important;
-}
 
 ::-webkit-scrollbar {
   float: right;

flowable-engine-web/src/components/common/RolePicker.vue

@@ -0,0 +1,244 @@
+<template>
+  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
+    <div class="picker">
+      <div class="candidate" v-loading="loading">
+        <div class="role-header">
+          <div>系统角色</div>
+        </div>
+        <div class="org-items">
+          <el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
+          <!-- 系统角色-->
+          <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
+               @click="selectChange(roleItem)">
+            <el-checkbox v-model="roleItem.selected" v-if="multiple"></el-checkbox>
+            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
+            <span>{{ roleItem.name }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="selected">
+        <div class="count">
+          <span>已选 {{ selectList.length }} 项</span>
+          <span @click="clearSelected">清空</span>
+        </div>
+        <div class="org-items">
+          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
+          <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
+            <i class="el-icon-user-solid"></i>
+            <span>{{ org.name }}</span>
+            <i class="el-icon-close" @click="noSelected(org)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </w-dialog>
+</template>
+
+<script>
+import {getRole} from "@/api/org";
+
+export default {
+  name: "RolePicker",
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      title: "请选择",
+      multiple: true,//是否多选
+      roleList: [
+        {
+          value: 1,
+          name: "超级管理员"
+        },
+        {
+          value: 2,
+          name: "普通角色"
+        },
+        {
+          value: 100,
+          name: "前端开发人员"
+        },
+        {
+          value: 101,
+          name: "图片文件管理员"
+        },
+        {
+          value: 102,
+          name: "附件管理员"
+        },
+        {
+          value: 103,
+          name: "权限测试角色"
+        }
+      ],
+      selectList: []
+    };
+  },
+  created() {
+    this.getRole();
+  },
+  methods: {
+    //获取角色信息
+    getRole() {
+      getRole().then(res => {
+        console.log("获取角色信息:==", res);
+      });
+    },
+    //用于首页选择本次登录者,显示弹窗
+    show() {
+      this.visible = true;
+      this.init();
+      // this.getOrgList();
+    },
+    //选中角色
+    selectChange(userItem) {
+      //多选
+      if (this.multiple) {
+        for (let i = 0; i < this.selectList.length; i++) {
+          if (this.selectList[i].value === userItem.value) {
+            this.selectList.splice(i, 1);
+            break;
+          }
+        }
+        userItem.selected = true;
+        this.selectList.push(userItem);
+      } else {//单选
+        userItem.selected = true;
+        this.selectList = [userItem];
+      }
+    },
+    //右侧的×
+    noSelected(org) {
+      for (let i = 0; i < this.selectList.length; i++) {
+        if (this.selectList[i].value === org.value) {
+          this.selectList.splice(i, 1);
+          break;
+        }
+      }
+      org.selected = false;
+    },
+    //确定按钮
+    selectOk() {
+      // this.$emit("ok", Object.assign([], this.select.map(v => {
+      //   v.avatar = undefined;
+      //   return v;
+      // })));
+      // this.visible = false;
+      // this.recover();
+    },
+    //清空
+    clearSelected() {
+      this.$confirm("您确定要清空已选中的项?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.recover();
+      });
+    },
+    init() {
+      this.selectList = Object.assign([], this.selected);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@containWidth: 278px;
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+
+
+.picker {
+  height: 402px;
+  position: relative;
+  text-align: left;
+
+  .candidate {
+    left: 0;
+    top: 0;
+  }
+
+  .role-header {
+    padding: 10px !important;
+    margin-bottom: 5px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+}
+
+.candidate, .selected {
+  position: absolute;
+  display: inline-block;
+  width: @containWidth;
+  height: 400px;
+  border: 1px solid #e8e8e8;
+}
+
+.selected {
+  border-left: none;
+  right: 0;
+  top: 0;
+
+  .count {
+    width: calc(@containWidth - 20px);
+    padding: 10px;
+    display: inline-block;
+    border-bottom: 1px solid #e8e8e8;
+    margin-bottom: 5px;
+
+    & > span:nth-child(2) {
+      float: right;
+      color: #c75450;
+      cursor: pointer;
+    }
+  }
+
+}
+
+
+.org-items {
+  overflow-y: auto;
+  height: 350px;
+
+  .el-icon-close {
+    position: absolute;
+    right: 5px;
+    cursor: pointer;
+    font-size: larger;
+  }
+
+  .org-role-item {
+    padding: 7px 5px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin: 0 5px;
+    border-radius: 5px;
+    position: relative;
+
+    &:hover {
+      background: #f1f1f1;
+    }
+
+    > span {
+      margin-left: 5px;
+    }
+
+  }
+}
+
+
+::-webkit-scrollbar {
+  float: right;
+  width: 4px;
+  height: 4px;
+  background-color: white;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 16px;
+  background-color: #efefef;
+}
+</style>

flowable-engine-web/src/views/admin/layout/FormDesign.vue

@@ -87,32 +87,38 @@
     </el-aside>
     <w-dialog clickClose closeFree width="800px" :showFooter="false" :border="false" title="表单预览"
               v-model="viewFormVisible">
+      <el-radio-group v-model="formPreviewModel" @change="formPreviewModelChange">
+        <el-radio-button label="E">编辑</el-radio-button>
+        <el-radio-button label="R">查看</el-radio-button>
+      </el-radio-group>
       <!--todo 表单渲染-->
-      <form-render ref="form" :forms="forms" v-model="formData"/>
+      <form-render-view v-if="viewFormVisibleRender" ref="form" :form-items="forms" v-model="formData" :is-preview="true" :model="formPreviewModel"/>
     </w-dialog>
   </el-container>
 </template>
 <!--动态表单编辑器-->
 <script>
 import draggable from "vuedraggable";
-import FormRender from '@/views/common/form/FormRender'
+import FormRenderView from '@/views/common/form/FormRenderView'
 import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
 import FormComponentConfig from '@/views/common/form/FormComponentConfig'
 import {baseComponents} from '@/views/common/form/ComponentsConfigExport'
 
 export default {
   name: "FormDesign",
-  components: {draggable, FormComponentConfig, FormDesignRender, FormRender},
+  components: {draggable, FormComponentConfig, FormDesignRender, FormRenderView},
   data() {
     return {
       formData: {},
       libSelect: 0,
       viewFormVisible: false,
+      viewFormVisibleRender: true,
       isStart: false,
-      showMobile: true,
+      showMobile: false,
       baseComponents,
       select: null,
       drag: false,
+      formPreviewModel:"E",
     }
   },
   computed: {
@@ -132,6 +138,16 @@ export default {
     }
   },
   methods: {
+    formPreviewModelChange(){
+      // 卸载
+      this.viewFormVisibleRender= false
+      // 建议加上 nextTick 微任务
+      // 否则在同一事件内同时将tableShow设置false和true有可能导致组件渲染失败
+      this.$nextTick(function(){
+        // 加载
+        this.viewFormVisibleRender= true
+      })
+    },
     copy(node, index) {
       this.form.splice(index + 1, 0, Object.assign({}, node))
     },

flowable-engine-web/src/views/common/form/FormRender.vue

@@ -79,7 +79,7 @@ export default {
           this.loadFormConfig(item.props.items)
         }else {
           if (!item.perm){
-            this.$set(item, 'perm', null)
+            this.$set(item, 'perm', 'E')
           }
           this.$set(this._value, item.id, this.value[item.id])
           if(item.props.required){

flowable-engine-web/src/views/common/form/FormRenderView.vue

@@ -15,7 +15,7 @@
 import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
 
 export default {
-  name: "FormViewRender",
+  name: "FormRenderView",
   components: {FormDesignRender},
   props: {
     formItems: {
@@ -29,6 +29,18 @@ export default {
       default: () => {
         return {}
       }
+    },
+    model:{
+      type: String,
+      default:() => {
+        return "R"
+      }
+    },
+    isPreview:{
+      type: Boolean,
+      default:() => {
+        return false
+      }
     }
   },
   data() {
@@ -51,13 +63,15 @@ export default {
   },
   methods: {
     loadFormConfig(formItems) {
-      console.log(formItems)
       formItems.forEach(item => {
         if (item.name === 'SpanLayout') {
           this.loadFormConfig(item.props.items)
         } else {
           this.$set(this._value, item.id, this.value[item.id])
-          if (item.props.required) {
+          if (this.isPreview){
+            this.$set(item, 'perm', this.model)
+          }
+          if (item.props.required && this.model === "E") {
             this.$set(this.rules, item.id, [{
               type: item.valueType === 'Array' ? 'array' : undefined,
               required: true,
@@ -68,8 +82,6 @@ export default {
       })
     }
   }
-
-
 }
 </script>