新增表格设计器 标题

oa-ui/package.json

     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "bpmn-js": "^11.1.0",
-    "bpmnlint": "^6.4.0",
     "bpmn-js-bpmnlint": "^0.15.0",
+    "bpmnlint": "^6.4.0",
     "bpmnlint-loader": "^0.1.4",
-    "file-drops": "^0.4.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "diagram-js": "^11.4.1",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
+    "file-drops": "^0.4.0",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",

oa-ui/src/assets/styles/element-ui.scss

   > .el-submenu__title
   .el-submenu__icon-arrow {
   display: none;
-}
+}
+// .el-form-item{
+//   margin-bottom: 10px;
+// }
+// .el-form-item--small.el-form-item{
+//   margin-bottom: 10px;
+// }

oa-ui/src/components/RowTitle/index.vue

+<!--
+ * @Author: ysh
+ * @Date: 2024-01-10 17:10:54
+ * @LastEditors: 
+ * @LastEditTime: 2024-01-10 17:11:15
+-->
+<template>
+  <div ref="rowTitle" v-text="rowTitleText" :style="setStyle()"></div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  computed: {
+    rowTitleText() {
+      return this.$attrs.titleText
+    },
+  },
+  watch: {
+    $attrs: {
+      deep: true,
+      handler(val) {
+        this.setStyle()
+      }
+    },
+  },
+  methods: {
+    setStyle() {
+      let obj = {
+        color: this.$attrs.fontColor,
+        fontSize: this.$attrs.fontSize + 'px',
+        fontWeight: this.$attrs.fontWeight ? 600 : 400,
+        textAlign: this.$attrs.textAlign,
+      }
+      return obj
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

oa-ui/src/components/parser/Parser.vue

     let child = renderChildren.apply(this, arguments)
     if (scheme.type === 'flex') {
       child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
-              {child}
-            </el-row>
+        {child}
+      </el-row>
     }
+    console.log(child);
     return (
       <el-col span={scheme.span}>
         <el-row gutter={scheme.gutter}>
         </el-row>
       </el-col>
     )
+  },
+  showFormItem(h, scheme) {
+    const { activeItem } = this.$listeners
+    const config = scheme.__config__
+    const className = this.activeId === config.formId
+      ? 'drawing-row-item active-from-item'
+      : 'drawing-row-item'
+    const spanText = 'row' + config.formId
+    return (
+      <el-col span={config.span}>
+        <el-row>
+          <h1>
+            <render key={config.renderKey} conf={scheme} onInput={event => { this.$set(config, 'defaultValue', event) }}></render>
+          </h1>
+        </el-row>
+      </el-col>
+    )
   }
 }
 
       >
         {renderFormItem.call(this, h, formConfCopy.fields)}
         {formConfCopy.formBtns && formBtns.call(this, h)}
+
       </el-form>
     </el-row>
   )
     return elementList.map(scheme => {
       const config = scheme.__config__
       const layout = layouts[config.layout]
-
+      debugger
       if (layout) {
         return layout.call(this, h, scheme)
       }
       })
     },
     // 传值给父组件
-    getData(){
+    getData() {
       this.$emit('getData', this[this.formConf.formModel])
       // this.$emit('getData',this.formConfCopy)
     }
   }
 }
 </script>
+<style scoped>
+::v-deep.el-form-item {
+  margin-bottom: 10px;
+}
+
+::v-deep.el-form-item--small.el-form-item {
+  margin-bottom: 10px;
+}
+</style>

oa-ui/src/components/parser/example/Index.vue

 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 </style>

oa-ui/src/main.js

+/*
+ * @Author: ysh
+ * @Date: 2024-01-03 09:23:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-01-10 17:11:57
+ */
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+// 标题组件
+import RowTitle from '@/components/RowTitle'
+
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('tinymce', Tinymce)
+Vue.component('RowTitle', RowTitle)
 
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
-
 Vue.config.productionTip = false
 
 new Vue({

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

     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'
-  // }
+  {
+    __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: false
+    }],
+    border: true,
+    type: 'default',
+    justify: 'start',
+    align: 'top'
+  }
 ]
+
+// 展示组件
+export const showComponents = [
+  {
+    __config__: {
+      layout: 'showFormItem',
+      tag: 'row-title',
+      tagIcon: 'row',
+      label: '标题容器',
+      document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
+    },
+    titleText: '标题',
+    fontSize: 20,
+    fontColor: '#606266',
+    fontWeight: false,
+    textAlign: 'left',
+  },
+]

oa-ui/src/utils/generator/html.js

     </el-row>`
     str = colWrapper(scheme, str)
     return str
+  },
+  showFormItem(scheme) {
+    const config = scheme.__config__
+    const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null
+    let str = `<el-row>
+      ${tagDom}
+    </el-row>`
+    str = colWrapper(scheme, str)
+    return str
   }
 }
 
     const height = el.height ? `:height="${el.height}"` : ''
     const branding = el.branding ? `:branding="${el.branding}"` : ''
     return `<${tag} ${vModel} ${placeholder} ${height} ${branding}></${tag}>`
+  },
+  'row-title': el => {
+    return `<h1 style="font-size: ${el.fontSize}px;color: ${el.fontColor};font-weight: ${el.fontWeight ? 600 : 400};text-align: ${el.textAlign};">${el.titleText}</h1>`
   }
 }
 

oa-ui/src/views/flowable/task/finished/detail/index.vue

 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 
 .clearfix:before,

oa-ui/src/views/flowable/task/form/index.vue

     /** 表单配置信息 */
     handleDetail(row){
       this.formConfOpen = true;
+      console.log(JSON.parse(row.formContent));
       this.formTitle = "流程表单配置详细";
       this.formConf = JSON.parse(row.formContent)
     },
 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 </style>

oa-ui/src/views/flowable/task/myProcess/detail/index.vue

 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 
 .clearfix:before,

oa-ui/src/views/flowable/task/myProcess/send/index.vue

 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 
 .clearfix:before,

oa-ui/src/views/flowable/task/record/index.vue

 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 
 .clearfix:before,

oa-ui/src/views/flowable/task/todo/detail/index.vue

             <flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
             <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role>
           </el-form-item>
+          <el-form-item label="熟练程度" label-width="80px" prop="comment">
+            <el-checkbox v-model="taskForm.check">备选项</el-checkbox>
+          </el-form-item>
           <el-form-item label="处理意见" label-width="80px" prop="comment"
                         :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
             <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
         variables: {
           variables: {}
         },
+        check:true
       },
       assignee: null,
       formConf: {}, // 默认表单数据
 <style lang="scss" scoped>
 .test-form {
   margin: 15px auto;
-  width: 800px;
-  padding: 15px;
+  // width: 800px;
+  padding: 20px;
 }
 
 .clearfix:before,

oa-ui/src/views/login.vue

           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <!-- <el-form-item prop="code" v-if="captchaEnabled">
         <el-input
           v-model="loginForm.code"
           auto-complete="off"
         <div class="login-code">
           <img :src="codeUrl" @click="getCode" class="login-code-img"/>
         </div>
-      </el-form-item>
+      </el-form-item> -->
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
     }
   },
   created() {
-    this.getCode();
+    // this.getCode();
     this.getCookie();
   },
   methods: {

oa-ui/src/views/tool/build/DraggableItem.vue

       </el-col>
     )
   },
+  showFormItem(h, currentItem, index, list) {
+    const { activeItem } = this.$listeners
+    const config = currentItem.__config__
+    const className = this.activeId === config.formId
+      ? 'drawing-row-item active-from-item'
+      : 'drawing-row-item'
+    const spanText = 'row'+config.formId
+    return (
+      <el-col span={config.span}>
+        <el-row gutter={config.gutter} class={className}
+          nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
+          <span class="component-name">{spanText}</span>
+          <h1>
+            <render key={config.renderKey} conf={currentItem} onInput={ event => { this.$set(config, 'defaultValue', event) }}></render>
+          </h1>
+          {components.itemBtns.apply(this, arguments)}
+        </el-row>
+      </el-col>
+    )
+  },
   raw(h, currentItem, index, list) {
     const config = currentItem.__config__
     const child = renderChildren.apply(this, arguments)

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

               @input="setTimeValue($event)"
             />
           </el-form-item>
+          <!-- 标题文字 -->
+          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题文字">
+            <el-input v-model="activeData.titleText" placeholder="请输入标题文字" />
+          </el-form-item>
+          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题大小">
+            <el-input v-model.number="activeData.fontSize" type="number" placeholder="请输入标题文字大小" />
+          </el-form-item>
+          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题颜色">
+            <el-color-picker v-model="activeData.fontColor" />
+          </el-form-item>
+          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="是否加粗">
+            <el-switch v-model="activeData.fontWeight" />
+          </el-form-item>
+          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="对齐方式">
+            <el-radio-group v-model="activeData.textAlign">
+              <el-radio-button label="left">
+                居左
+              </el-radio-button>
+              <el-radio-button label="center">
+                居中
+              </el-radio-button>
+              <el-radio-button label="right">
+                居右
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
           <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag) > -1">
             <el-divider>选项</el-divider>
             <draggable

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

 import JsonDrawer from './JsonDrawer'
 import RightPanel from './RightPanel'
 import {
-  inputComponents, selectComponents, layoutComponents, formConf
+  inputComponents, selectComponents, layoutComponents, formConf, showComponents
 } from '@/utils/generator/config'
 import {
   exportDefault, beautifierConf, isNumberStr, titleCase, deepClone, isObjectObject
       inputComponents,
       selectComponents,
       layoutComponents,
+      showComponents, 
       labelWidth: 100,
       drawingList: drawingDefault,
       drawingData: {},
         {
           title: '布局型组件',
           list: layoutComponents
-        }
+        },{
+          title: "展示型组件",						// 这里也要新增
+          list: showComponents,
+        },
       ],
       formOpen: false,
       formTitle: "",
       if (i > -1) this.$set(this.drawingList, i, component)
     },
     fetchData(component) {
+      debugger
       const { dataType, method, url } = component.__config__
       if (dataType === 'dynamic' && method && url) {
         this.setLoading(component, true)