tianheng-ui 0.1.63 → 0.1.65

package/packages/FormMaking/custom/items/list_dev.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="list">
+  <div class="component-list">
     <draggable
       v-model="widget.options.columns"
       :no-transition-on-drag="true"
       v-bind="{
         group: 'people',
-        ghostClass: 'ghost',
+        ghostClass: 'draggable-ghost',
         animation: 200,
         handle: '.drag-widget'
       }"
       @add="handleWidgetAdd($event)"
     >
-      <transition-group name="fade" tag="div" class="list">
+      <transition-group name="fade" tag="div" class="draggable-list">
         <div
-          v-for="(element, elementIndex) in widget.options.columns"
-          class="list-item"
+          v-for="(element, elementIndex) in widget.options.columns.filter(
+            item => {
+              return item.key;
+            }
+          )"
           :key="element.key"
           @click.stop="selectWidget = element"
         >
@@ -65,6 +68,7 @@ export default {
   },
   methods: {
     handleWidgetAdd($event) {
+      console.log("handleWidgetAdd =>", $event);
       const newIndex = $event.newIndex;
       const oldIndex = $event.oldIndex;
       const newComponent = JSON.parse(
@@ -95,23 +99,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list {
-  background: #fff;
-
-  .list {
-    min-height: 50px;
-    border: 1px dashed #ccc;
-    .list-item {
-      width: 100%;
-    }
-    .list-item:nth-child(1) {
-      display: flex;
-      > div:first-child {
-        flex: 1;
-      }
-    }
-  }
-
+.component-list {
   .tools {
     text-align: right;
   }

package/packages/FormMaking/custom/items/radio.vue

@@ -10,14 +10,12 @@
         :style="{
           display: widget.options.inline ? 'inline-block' : 'block'
         }"
-        v-for="(item, index) in widget.options.remote
-          ? widget.options.remoteOptions
-          : widget.options.options"
+        v-for="(item, index) in widget.options.options"
         :key="index"
         :label="item.value"
         :border="widget.options.border"
       >
-        <template v-if="widget.options.remote">{{ item.label }}</template>
+        <template v-if="widget.options.remote.open">{{ item.label }}</template>
         <template v-else>{{
           widget.options.showLabel ? item.label : item.value
         }}</template>
@@ -28,14 +26,12 @@
         :style="{
           display: widget.options.inline ? 'inline-block' : 'block'
         }"
+        v-for="(item, index) in widget.options.options"
+        :key="index"
         :label="item.value"
         :border="widget.options.border"
-        v-for="(item, index) in widget.options.remote
-          ? widget.options.remoteOptions
-          : widget.options.options"
-        :key="index"
       >
-        <template v-if="widget.options.remote">{{ item.label }}</template>
+        <template v-if="widget.options.remote.open">{{ item.label }}</template>
         <template v-else>{{
           widget.options.showLabel ? item.label : item.value
         }}</template>

package/packages/FormMaking/custom/items/select.vue

@@ -14,13 +14,11 @@
     @blur="handleEventAction(widget.events.onBlur)"
   >
     <el-option
-      v-for="item in widget.options.remote
-        ? widget.options.remoteOptions
-        : widget.options.options"
+      v-for="item in widget.options.options"
       :key="item.value"
       :value="item.value"
       :label="
-        widget.options.showLabel || widget.options.remote
+        widget.options.showLabel || widget.options.remote.open
           ? item.label
           : item.value
       "

package/packages/FormMaking/custom/items/tableH5_dev.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="tableH5">
+  <div class="component-tableH5">
     <draggable
       v-model="widget.options.columns"
       :no-transition-on-drag="true"
       v-bind="{
         group: 'people',
-        ghostClass: 'ghost',
+        ghostClass: 'draggable-ghost',
         animation: 200,
         handle: '.drag-widget'
       }"
       @add="handleWidgetAdd($event)"
     >
-      <transition-group name="fade" tag="div" class="tableH5-list">
+      <transition-group name="fade" tag="div" class="draggable-list">
         <div
           v-for="(element, elementIndex) in widget.options.columns"
-          class="tableH5-list-item"
+          class="draggable-list-item"
           :key="element.key"
           @click.stop="selectWidget = element"
         >
@@ -97,20 +97,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tableH5 {
-  background: #fff;
-
-  .tableH5-list {
-    min-height: 50px;
-    border: 1px dashed #ccc;
-    .tableH5-list-item {
-      width: 100%;
-    }
-    .tableH5-list-item:nth-child(1) {
-      display: flex;
-      > div:first-child {
-        flex: 1;
-      }
+.component-tableH5 {
+  .draggable-list-item:nth-child(1) {
+    display: flex;
+    > div:first-child {
+      flex: 1;
     }
   }
 

package/packages/FormMaking/custom/items/table_dev.vue

@@ -1,16 +1,17 @@
 <template>
   <draggable
+    class="component-table"
     v-model="widget.options.columns"
     :no-transition-on-drag="true"
     v-bind="{
       group: 'people',
-      ghostClass: 'ghost',
+      ghostClass: 'draggable-ghost',
       animation: 200,
       handle: '.drag-widget'
     }"
     @add="handleWidgetAdd($event, widget)"
   >
-    <transition-group name="fade" tag="div" class="widget-table-list">
+    <transition-group name="fade" tag="div" class="draggable-list">
       <widget-form-item
         v-for="(element, elementIndex) in widget.options.columns.filter(
           item => {
@@ -83,4 +84,13 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.component-table {
+  .draggable-list {
+    display: -webkit-box;
+    overflow: hidden;
+    overflow-x: scroll;
+    white-space: nowrap;
+  }
+}
+</style>

package/packages/FormMaking/custom/items/tabs_dev.vue

@@ -1,5 +1,6 @@
 <template>
   <el-tabs
+    class="component-tabs"
     v-model="widget.options.defaultValue"
     :type="widget.options.type"
     :tab-position="widget.options.tabPosition"
@@ -15,13 +16,13 @@
         :no-transition-on-drag="true"
         v-bind="{
           group: 'people',
-          ghostClass: 'ghost',
+          ghostClass: 'draggable-ghost',
           animation: 200,
           handle: '.drag-widget'
         }"
         @add="handleWidgetAdd($event, widget, columnIndex)"
       >
-        <transition-group name="fade" tag="div" class="widget-col-list">
+        <transition-group name="fade" tag="div" class="draggable-list">
           <widget-form-item
             v-for="(element, elementIndex) in column.list.filter(item => {
               return item.key;

package/packages/FormMaking/custom/items/workflow.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="component-workflow">
+    <div
+      v-if="widget.name"
+      class="component-header_title"
+      v-html="widget.name"
+    ></div>
+
+    <el-timeline
+      v-if="dataModel.processInstTaskRsps.length"
+      :reverse="widget.options.reverse"
+    >
+      <el-timeline-item
+        class="workflow-item"
+        v-for="(item, index) in dataModel.processInstTaskRsps"
+        :key="index"
+        :type="item.type"
+        :icon="item.icon"
+        :color="item.color"
+        :placement="widget.options.placement"
+        :timestamp="item.timestamp"
+        :hide-timestamp="
+          widget.options.hideTimestamp || widget.options.placement === 'right'
+        "
+      >
+        <div>
+          <div class="workflow-item-header">
+            <div class="title">{{ item.name }}</div>
+            <div
+              v-if="
+                !widget.options.hideTimestamp &&
+                  widget.options.placement === 'right'
+              "
+              class="timestamp"
+            >
+              {{ item.timestamp }}
+            </div>
+          </div>
+          <div class="workflow-item-content th-is_border">
+            <th-cell
+              v-for="(persons, pIndex) in item.checkPersons"
+              :key="pIndex"
+              :title="persons.name"
+              :value="persons.status"
+              :label="persons.description"
+              hover
+            >
+              <img
+                v-if="persons.avatar"
+                class="persons-avatar"
+                slot="icon"
+                :src="persons.avatar"
+                alt=""
+              />
+            </th-cell>
+          </div>
+          <div class="workflow-item-footer"></div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+    <div v-if="dataModel.processInstButtons.length" class="footer">
+      <el-button
+        v-for="(item, index) in dataModel.processInstButtons"
+        :key="index"
+        :style="item.options.customStyle"
+        :type="item.options.type"
+        :icon="item.options.icon"
+        :plain="item.options.plain"
+        :round="item.options.round"
+        :circle="item.options.circle"
+        :size="item.options.size"
+        :disabled="item.options.disabled"
+        :loading="item.options.loading"
+        @click="handleActionClick(item)"
+        >{{ item.name }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { itemsComponent, eventMixin } from "../mixins/index";
+export default {
+  mixins: [itemsComponent, eventMixin],
+  methods: {
+    handleActionClick(item) {
+      this.$emit("button-submit", item);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.component-workflow {
+  .el-timeline {
+    padding: 0px;
+  }
+  .workflow-item-header {
+    margin-bottom: 5px;
+    height: 20px;
+    line-height: 20px;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      // font-weight: bold;
+    }
+    .timestamp {
+      color: #909399;
+    }
+  }
+  .workflow-item-content {
+    border-radius: 4px;
+    overflow: hidden;
+    .persons-avatar {
+      margin-right: 10px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+  .workflow-item-footer {
+  }
+
+  .footer {
+    display: flex;
+
+    .el-button {
+      flex: 1;
+    }
+  }
+}
+</style>

package/packages/FormMaking/custom/register.js

@@ -1,5 +1,10 @@
 //在此注册组件
-import { basicComponents, advanceComponents, layoutComponents } from "./config";
+import {
+  basicComponents,
+  advanceComponents,
+  layoutComponents,
+  businessComponents
+} from "./config";
 
 let compsData = {};
 for (const config of basicComponents) {
@@ -26,4 +31,13 @@ for (const config of layoutComponents) {
     content: null
   };
 }
+for (const config of businessComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+
 export default compsData;

package/packages/FormMaking/index.vue

@@ -17,17 +17,13 @@
             :list="getBasicComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
-              sort: false,
-              ghostClass: 'ghost'
+              sort: false
             }"
           >
             <li
               v-for="(item, index) in getBasicComponents"
               class="fields-label"
-              :class="{
-                'no-put': item.type == 'divider',
-                [item.type]: true
-              }"
+              :class="[[item.type]]"
               :key="index"
             >
               <a>
@@ -47,19 +43,13 @@
             :list="getAdvanceComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
-              sort: false,
-              ghostClass: 'ghost'
+              sort: false
             }"
           >
             <li
               v-for="(item, index) in getAdvanceComponents"
-              class="fields-label"
-              :class="{
-                'no-put': ['table', 'tableH5', 'list', 'tabs'].includes(
-                  item.type
-                ),
-                [item.type]: true
-              }"
+              class="fields-label no-put"
+              :class="[[item.type]]"
               :key="index"
             >
               <a>
@@ -79,8 +69,7 @@
             :list="getLayoutComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
-              sort: false,
-              ghostClass: 'ghost'
+              sort: false
             }"
           >
             <li
@@ -99,6 +88,32 @@
             </li>
           </draggable>
         </el-collapse-item>
+        <el-collapse-item
+          v-if="businessFields.length"
+          title="业务组件"
+          name="group-business"
+        >
+          <draggable
+            tag="ul"
+            :list="getBusinessComponents"
+            v-bind="{
+              group: { name: 'people', pull: 'clone', put: false },
+              sort: false
+            }"
+          >
+            <li
+              v-for="(item, index) in getBusinessComponents"
+              class="fields-label"
+              :class="[[item.type]]"
+              :key="index"
+            >
+              <a>
+                <i class="icon iconfont" :class="item.icon"></i>
+                <span>{{ item.name }}</span>
+              </a>
+            </li>
+          </draggable>
+        </el-collapse-item>
       </el-collapse>
     </div>
 
@@ -152,6 +167,7 @@ import {
   basicComponents,
   advanceComponents,
   layoutComponents,
+  businessComponents,
   baseConfig
 } from "./custom/config";
 import generateCode from "./util/generateCode.js";
@@ -212,24 +228,34 @@ export default {
     },
     advanceFields: {
       type: Array,
-      default: () => ["table", "tableH5", "list", "tabs", "blank"]
+      default: () => ["table", "tableH5", "list", "tabs"]
     },
     layoutFields: {
       type: Array,
       default: () => ["grid", "filler", "divider"]
+    },
+    businessFields: {
+      type: Array,
+      default: () => ["blank", "descriptions", "workflow"]
     }
   },
   data() {
     this.basicComponents = basicComponents;
     this.advanceComponents = advanceComponents;
     this.layoutComponents = layoutComponents;
+    this.businessComponents = businessComponents;
     this.baseConfig = deepClone(baseConfig);
     return {
       formConfig: this.baseConfig,
       widgetFormSelect: {},
       configTab: "form",
       apiConfig: {},
-      collapseValue: ["group-basic", "group-advance", "group-layout"]
+      collapseValue: [
+        "group-basic",
+        "group-advance",
+        "group-layout",
+        "group-business"
+      ]
     };
   },
   computed: {
@@ -250,6 +276,12 @@ export default {
         return this.layoutFields.includes(e.type);
       });
       return list;
+    },
+    getBusinessComponents() {
+      const list = this.businessComponents.filter(e => {
+        return this.businessFields.includes(e.type);
+      });
+      return list;
     }
   },
   watch: {
@@ -316,13 +348,15 @@ export default {
             });
           } else if (item.type === "table" || item.type === "tableH5") {
             initList(item.options.columns);
-          } else if (item.options.remote || item.options.remoteFunc) {
-            fieldsApi[item.model] = item.options.remoteFunc;
+          } else if (item.type === "workflow") {
+            initList(item.options.defaultValue.processInstButtons);
+          } else if (item.options.remote?.open || item.options.remote?.api) {
+            fieldsApi[item.model] = item.options.remote.api;
           }
         }
       };
       initList(this.formConfig.list);
-      
+
       const initParams = (paramsList, pAlias, bool) => {
         paramsList.forEach(item => {
           if (bool) {
@@ -441,8 +475,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$primary-color: #409eff;
-$primary-background-color: #ecf5ff;
+@import "../../lib/theme-chalk/styles/variable.scss";
+
 .th-formMaking {
   height: 100%;
   background-color: white;
@@ -476,11 +510,11 @@ $primary-background-color: #ecf5ff;
       transition: 0.25s;
 
       &:hover {
-        color: $primary-color !important;
-        border: 1px dashed $primary-color;
+        color: $color-parimary-active !important;
+        border: 1px dashed $color-parimary-active;
 
         a {
-          color: $primary-color !important;
+          color: $color-parimary-active !important;
         }
       }