modified ProjectApply table and design the textShow component

ruoyi-ui/src/utils/generator/config.js

@@ -12,6 +12,42 @@ export const formConf = {
   formBtns: true
 }
 
+export const textComponents = [
+  {
+    // 组件的自定义配置
+    __config__: {
+      label: '文本显示',
+      labelWidth: null,
+      showLabel: false,
+      changeTag: true,
+      tag: 'el-input',
+      tagIcon: 'text',
+      defaultValue: undefined,
+      required: false,
+      layout: 'colFormItem',
+      span: 24,
+      document: 'https://element.eleme.cn/#/zh-CN/component/el-input',
+      // 正则校验规则
+      regList: [],
+    },
+    // 组件的插槽属性
+    __slot__: {
+      prepend: '',
+      append: ''
+    },
+    // 其余的为可直接写在组件标签上的属性
+    style: {width: '100%'},
+    placeholder: '请输入要显示的字符然后打开只读属性',
+    clearable: false,
+    'prefix-icon': '',
+    'suffix-icon': '',
+    maxlength: null,
+    'show-word-limit': false,
+    readonly: false,
+    disabled: false
+  }
+  ]
+
 // 输入型组件 【左面板】
 export const inputComponents = [
   {

ruoyi-ui/src/utils/generator/parser.js

@@ -26,14 +26,26 @@ const layouts = {
 
     let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
     if (config.showLabel === false) labelWidth = '0'
-    return (
-      <el-col span={config.span}>
-        <el-form-item label-width={labelWidth} prop={scheme.__vModel__}
-          label={config.showLabel ? config.label : ''}>
-          <render conf={scheme} on={listeners} />
-        </el-form-item>
-      </el-col>
-    )
+    if(config.tagIcon === 'text') {
+      return (
+        <el-col span={config.span}>
+          <el-form-item class="text" label-width={labelWidth} prop={scheme.__vModel__}
+                        label={config.showLabel ? config.label : ''}>
+            <render conf={scheme} on={listeners} />
+          </el-form-item>
+        </el-col>
+      )
+    }
+    else {
+      return (
+        <el-col span={config.span}>
+          <el-form-item label-width={labelWidth} prop={scheme.__vModel__}
+                        label={config.showLabel ? config.label : ''}>
+            <render conf={scheme} on={listeners} />
+          </el-form-item>
+        </el-col>
+      )
+    }
   },
   rowFormItem(h, scheme) {
     let child = renderChildren.apply(this, arguments)
@@ -87,7 +99,7 @@ function renderFormItem(h, elementList) {
   return elementList.map(scheme => {
     const config = scheme.__config__
     const layout = layouts[config.layout]
-
+    console.log(layout)
     if (layout) {
       return layout.call(this, h, scheme)
     }

ruoyi-ui/src/views/tool/build/RightPanel.vue

@@ -645,7 +645,7 @@ import TreeNodeDialog from './TreeNodeDialog'
 import { isNumberStr } from '@/utils/index'
 import IconsDialog from './IconsDialog'
 import {
-  inputComponents, selectComponents, layoutComponents
+  inputComponents, selectComponents, layoutComponents, textComponents
 } from '@/utils/generator/config'
 import { saveFormConf } from '@/utils/db'
 
@@ -785,6 +785,10 @@ export default {
     },
     tagList() {
       return [
+        {
+          label: '显示型组件',
+          options: textComponents
+        },
         {
           label: '输入型组件',
           options: inputComponents

ruoyi-ui/src/views/tool/build/index.vue

@@ -71,6 +71,7 @@
             <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
               <draggable-item
                 v-for="(item, index) in drawingList"
+                :class="item.__config__.tagIcon"
                 :key="item.renderKey"
                 :drawing-list="drawingList"
                 :current-item="item"
@@ -143,7 +144,13 @@ import render from '@/utils/generator/render'
 import FormDrawer from './FormDrawer'
 import JsonDrawer from './JsonDrawer'
 import RightPanel from './RightPanel'
-import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
+import {
+  inputComponents,
+  selectComponents,
+  layoutComponents,
+  formConf,
+  textComponents
+} from '@/utils/generator/config'
 import { beautifierConf, titleCase, deepClone } from '@/utils/index'
 import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
 import { makeUpJs } from '@/utils/generator/js'
@@ -184,6 +191,7 @@ export default {
       logo,
       idGlobal,
       formConf,
+      textComponents,
       inputComponents,
       selectComponents,
       layoutComponents,
@@ -201,6 +209,10 @@ export default {
       saveDrawingListDebounce: debounce(340, saveDrawingList),
       saveIdGlobalDebounce: debounce(340, saveIdGlobal),
       leftComponents: [
+        {
+          title: '显示型组件',
+          list: textComponents
+        },
         {
           title: '输入型组件',
           list: inputComponents
@@ -563,6 +575,42 @@ export default {
 
 <style lang='scss'>
 
+// zqjia: set the style for el-input__inner in textShow component
+// for textShow component with width 22
+.el-col {
+  .text  {
+    .el-input__inner, .el-input {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-weight: bold;
+      font-size: 14px;
+      color: #606266;
+
+      border: 0 !important;
+      box-shadow: none !important;
+      background-color: transparent !important;
+      text-align: center;
+    }
+  }
+}
+
+// for multi textShow component in a line with width 24
+.el-col-24 {
+  .text  {
+    .el-input__inner, .el-input {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-weight: bold;
+      font-size: 14px;
+      color: #606266;
+
+      border: 0 !important;
+      box-shadow: none !important;
+      background-color: transparent !important;
+      text-align: left;
+    }
+  }
+}
+
+
 .editor-tabs{
   background: #121315;
   .el-tabs__header{

ruoyi-ui/src/views/workflow/work/index.vue

@@ -183,6 +183,7 @@ export default {
         path: '/workflow/process/start/' + row.deploymentId,
         query: {
           definitionId: row.definitionId,
+          processName: row.processName,
         }
       })
     },

ruoyi-ui/src/views/workflow/work/start.vue

@@ -2,8 +2,9 @@
   <div class="app-container">
     <el-card class="box-card">
       <div slot="header" class="clearfix">
-        <span>发起流程</span>
+        <span>{{ processName }}</span>
       </div>
+
       <el-col :span="18" :offset="3">
         <div class="form-conf" v-if="formOpen">
           <parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData"/>
@@ -29,6 +30,8 @@ export default {
       procInsId: null,
       formOpen: false,
       formData: {},
+
+      processName: null,
     }
   },
   created() {
@@ -39,6 +42,8 @@ export default {
       this.deployId = this.$route.params && this.$route.params.deployId;
       this.definitionId = this.$route.query && this.$route.query.definitionId;
       this.procInsId = this.$route.query && this.$route.query.procInsId;
+      this.processName = this.$route.query && this.$route.query.processName;
+
       getProcessForm({
         definitionId: this.definitionId,
         deployId: this.deployId,