tianheng-ui 0.1.72 → 0.1.74

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/Card/index.vue

@@ -29,7 +29,7 @@ export default {
   computed: {
     seflClass() {
       let className = `${this.shadow}-shadow`;
-      if (this.border) className = `${className} th-is_border`;
+      if (this.border) className = `${className} th-border`;
       return className;
     }
   }

package/packages/Cell/index.vue

@@ -51,11 +51,11 @@ export default {
     selfCellClass() {
       let className = "th-cell";
       if (this.customClass) className = `${className} ${this.customClass}`;
-      if (this.center) className = `${className} th-is_alignItems_center`;
+      if (this.center) className = `${className} th-alignItems_center`;
       if (this.active)
-        className = `${className} ${this.activeClass || "th-is_active"}`;
+        className = `${className} ${this.activeClass || "th-active"}`;
       if (this.hover)
-        className = `${className} ${this.hoverClass || "th-is_hover"}`;
+        className = `${className} ${this.hoverClass || "th-hover"}`;
       return className;
     }
   },

package/packages/FormMaking/WidgetConfig.vue

@@ -314,7 +314,7 @@
       :modal-append-to-body="false"
       @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
     >
-      <div class="eventsSetting th-flex_box th-is_border">
+      <div class="eventsSetting th-flex_box th-border">
         <div class="list th-flex_aside">
           <div class="events-header">
             <div>动作库</div>
@@ -328,9 +328,9 @@
           </div>
           <div
             v-for="(item, index) in dialog.data"
-            class="list-item th-is_hover"
+            class="list-item th-hover"
             :class="{
-              'th-is_active':
+              'th-active':
                 dialog.active && dialog.active.label === item.label
             }"
             :key="item.key"

package/packages/FormMaking/custom/configs/descriptions.vue

@@ -132,8 +132,8 @@
       :modal-append-to-body="false"
       :showFooter="false"
     >
-      <div class="th-flex_box th-is_border">
-        <div class="box-list th-flex_aside th-is_border_right">
+      <div class="th-flex_box th-border">
+        <div class="box-list th-flex_aside th-border_right">
           <div class="box-header th-sticky_top">
             <div>数据列表</div>
             <el-button
@@ -146,9 +146,9 @@
           </div>
           <div
             v-for="(item, index) in widget.options.defaultValue"
-            class="list-item th-is_hover"
+            class="list-item th-hover"
             :class="{
-              'th-is_active': dialog.data && dialog.data.label === item.label
+              'th-active': dialog.data && dialog.data.label === item.label
             }"
             :key="index"
             @click="dialog.data = item"

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

@@ -170,9 +170,9 @@
     >
       <div
         v-if="dialog.action === 'processInstTaskRsps'"
-        class="th-flex_box th-is_border"
+        class="th-flex_box th-border"
       >
-        <div class="box-list th-flex_aside th-is_border_right">
+        <div class="box-list th-flex_aside th-border_right">
           <div class="box-header th-sticky_top">
             <div>节点列表</div>
             <el-button
@@ -186,9 +186,9 @@
           <div
             v-for="(item, index) in widget.options.defaultValue
               .processInstTaskRsps"
-            class="list-item th-is_hover"
+            class="list-item th-hover"
             :class="{
-              'th-is_active': dialog.data && dialog.data.name === item.name
+              'th-active': dialog.data && dialog.data.name === item.name
             }"
             :key="index"
             @click="dialog.data = item"
@@ -238,9 +238,9 @@
       </div>
       <div
         v-if="dialog.action === 'processInstButtons'"
-        class="th-flex_box th-is_border"
+        class="th-flex_box th-border"
       >
-        <div class="box-list th-flex_aside th-is_border_right">
+        <div class="box-list th-flex_aside th-border_right">
           <div class="box-header th-sticky_top">
             <div>操作列表</div>
             <el-button
@@ -253,9 +253,9 @@
           </div>
           <div
             v-for="(item, index) in widget.options.buttons"
-            class="list-item th-is_hover"
+            class="list-item th-hover"
             :class="{
-              'th-is_active': dialog.data && dialog.data.name === item.name
+              'th-active': dialog.data && dialog.data.name === item.name
             }"
             :key="index"
             @click="dialog.data = item"

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

@@ -36,7 +36,7 @@
               {{ item.timestamp }}
             </div>
           </div>
-          <div class="workflow-item-content th-is_border">
+          <div class="workflow-item-content th-border">
             <th-cell
               v-for="(persons, pIndex) in item.checkPersons"
               :key="pIndex"

package/packages/FormMaking/index.vue

@@ -2,7 +2,7 @@
   <div class="th-formMaking th-flex_box">
     <!-- 左侧字段区 -->
     <div
-      class="formMaking-fields th-flex_aside th-is_border_right"
+      class="formMaking-fields th-flex_aside th-border_right"
       style="width:250px"
     >
       <div class="fields-header th-sticky_top">组件列表</div>
@@ -127,7 +127,7 @@
     </div>
 
     <!-- 右侧配置区 -->
-    <div class="th-flex_aside th-is_border_left" style="width:300px">
+    <div class="th-flex_aside th-border_left" style="width:300px">
       <widget-config
         :data="widgetFormSelect"
         :config="formConfig.config"

package/packages/Grid/index.vue

@@ -19,7 +19,7 @@ export default {
   computed: {
     seflClass() {
       let className = `${this.shadow}-shadow`;
-      if (this.border) className = `${className} th-is_border_top th-is_border_left`;
+      if (this.border) className = `${className} th-border_top th-border_left`;
       return className;
     }
   },

package/packages/Icons/index.vue

@@ -14,41 +14,43 @@
         @clear="handleInputClear"
       >
         <div v-if="icon" class="input-prefix" slot="prefix">
-          <i :class="icon" class="icon" />
+          <i
+            v-if="icon.indexOf('th-icon') > -1 || icon.indexOf('el-icon') > -1"
+            :class="`icon ${icon}`"
+          />
+          <a-icon v-else class="icon" :type="icon" />
         </div>
       </el-input>
 
-      <el-tabs v-model="tabsActiveName" type="border-card">
+      <el-tabs v-model="activeName" type="border-card">
         <el-tab-pane label="Tianheng图标库" name="tianheng"> </el-tab-pane>
         <el-tab-pane v-if="element" label="Element图标库" name="element">
         </el-tab-pane>
         <el-tab-pane v-if="antDesign" label="AntDesign图标库" name="antDesign">
         </el-tab-pane>
-        <div v-if="tabsActiveName === 'tianheng'" class="th-icons-content">
+        <div v-if="activeName === 'tianheng'" class="th-icons-content">
           <i
-            v-for="(icon, index) in tianhengIcons"
-            class="icon"
-            :class="icon"
+            v-for="(item, index) in tianhengIcons"
+            :class="`icon ${item}`"
             :key="index"
-            @click="handleIconClick(icon)"
+            @click="handleIconClick(item)"
           />
         </div>
-        <div v-if="tabsActiveName === 'element'" class="th-icons-content">
+        <div v-if="activeName === 'element'" class="th-icons-content">
           <i
-            v-for="(icon, index) in elementIcons"
-            class="icon"
-            :class="icon"
+            v-for="(item, index) in elementIcons"
+            :class="`icon ${item}`"
             :key="index"
-            @click="handleIconClick(icon)"
+            @click="handleIconClick(item)"
           />
         </div>
-        <div v-if="tabsActiveName === 'antDesign'" class="th-icons-content">
+        <div v-if="activeName === 'antDesign'" class="th-icons-content">
           <a-icon
-            v-for="(icon, index) in antDesignIcons"
+            v-for="(item, index) in antDesignIcons"
             class="icon"
-            type="step-backward"
+            :type="item"
             :key="index"
-            @click="handleIconClick(icon)"
+            @click="handleIconClick(item)"
           />
         </div>
       </el-tabs>
@@ -80,24 +82,41 @@ export default {
     antDesign: {
       type: Boolean,
       default: false
+    },
+    active: {
+      type: String,
+      default: "tianheng"
     }
   },
   data() {
     return {
       icon: this.value,
-      tabsActiveName: "tianheng",
+      activeName: this.active,
       tianhengIcons: tianhengIcons,
       elementIcons: elementIcons,
       antDesignIcons: antDesignIcons
     };
   },
   watch: {
+    value(val) {
+      if (val.indexOf("th-icon") > -1) {
+        this.activeName = "tianheng";
+      } else if (val.indexOf("el-icon") > -1) {
+        this.activeName = "element";
+      } else {
+        this.activeName = "antDesign";
+      }
+      this.icon = val;
+    },
     icon(val) {
       this.$emit("input", val);
       this.$emit("update:value", val);
     },
-    value(val) {
-      this.icon = val;
+    active(val) {
+      this.activeName = val;
+    },
+    activeName(val) {
+      this.$emit("update:active", val);
     }
   },
   created() {},
@@ -119,7 +138,10 @@ export default {
   display: flex;
   align-items: center;
   .icon {
+    width: 20px;
+    height: 20px;
     font-size: 20px;
+    color: #666;
   }
 }
 .th-icons-content {

package/packages/TableMaking/index.vue

@@ -13,7 +13,7 @@
         :config="tableConfig"
       ></widget-table>
     </div>
-    <div class="th-flex_aside th-is_border_left" style="width:300px">
+    <div class="th-flex_aside th-border_left" style="width:300px">
       <widget-config
         :config="tableConfig"
         :formOptions="formOptions"

package/packages/TableMaking/util/bus.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default new Vue();

package/packages/TableMaking/widgetConfig.vue

@@ -518,7 +518,7 @@
       :modal-append-to-body="false"
       :showFooter="false"
     >
-      <div class="eventsSetting th-flex_box th-is_border">
+      <div class="eventsSetting th-flex_box th-border">
         <div class="list th-flex_aside">
           <div class="events-header th-sticky_top">
             <div>按钮库</div>
@@ -528,9 +528,9 @@
           </div>
           <div
             v-for="item in Object.values(config.tools || [])"
-            class="list-item th-is_hover"
+            class="list-item th-hover"
             :class="{
-              'th-is_active': dialog.data && dialog.data.name === item.name
+              'th-active': dialog.data && dialog.data.name === item.name
             }"
             :key="item.type"
             @click="dialog.data = item"
@@ -661,6 +661,7 @@
 <script>
 import Draggable from "vuedraggable";
 import { deepClone } from "../FormMaking/util";
+import bus from "./util/bus";
 export default {
   components: { Draggable },
   props: {
@@ -802,7 +803,20 @@ export default {
       return data;
     }
   },
-  mounted() {},
+  mounted() {
+    bus.$on("fieldsInParamsActive", activeParams => {
+      const data = this.fieldsData.inParams.filter(item => {
+        return activeParams.includes(item.id);
+      });
+      this.config.search.options = data;
+    });
+    bus.$on("fieldsOutParamsActive", activeParams => {
+      const data = this.fieldsData.outParams.filter(item => {
+        return activeParams.includes(item.id);
+      });
+      this.config.table.options = data;
+    });
+  },
   methods: {
     handleResetTableFields() {
       this.config.search.options = [];
@@ -845,6 +859,7 @@ export default {
             initParams(this.fieldsData.inParams);
             this.fieldsData.outParams = deepClone(res.outParams || []);
             initParams(this.fieldsData.outParams);
+            bus.$emit("fieldsData", this.fieldsData);
           }
         };
         this.$emit("remote-params", apiId, callback);
@@ -856,6 +871,7 @@ export default {
           initParams(this.fieldsData.inParams);
           this.fieldsData.outParams = deepClone(api.outParams || []);
           initParams(this.fieldsData.outParams);
+          bus.$emit("fieldsData", this.fieldsData);
         }
       }
     },

package/packages/TableMaking/widgetGuide.vue

@@ -3,17 +3,17 @@
     <el-steps :active="step" finish-status="success" simple>
       <el-step title="列表配置" icon="el-icon-s-operation" description="">
       </el-step>
-      <!-- <el-step
+      <el-step
         title="字段配置"
         icon="el-icon-c-scale-to-original"
         description=""
-      ></el-step> -->
+      ></el-step>
       <el-step title="按钮配置" icon="el-icon-set-up" description=""></el-step>
     </el-steps>
     <div class="content">
       <el-form :model="config" label-width="80px" size="small">
         <div v-show="step === 0">
-          <el-form-item size="small">
+          <el-form-item>
             <el-tooltip
               slot="label"
               effect="light"
@@ -42,10 +42,10 @@
             <el-tooltip
               slot="label"
               effect="light"
-              content="列表初始化完成后，调用该接口获取列表数据"
+              content="列表初始化完成后，调用该接口获取字段数据"
               placement="top"
             >
-              <span style="color: #409EFF;">列表接口</span>
+              <span style="color: #409EFF;">字段接口</span>
             </el-tooltip>
             <el-select
               v-model="config.table.mounted.api"
@@ -70,11 +70,58 @@
               placeholder="请输入"
             ></el-input>
           </el-form-item>
+          <el-form-item label="是否分页">
+            <el-switch v-model="config.table.pageInfo.show"> </el-switch>
+          </el-form-item>
         </div>
         <div v-show="step === 1">
+          <el-tabs tab-position="left">
+            <el-tab-pane label="查询字段">
+              <el-transfer
+                v-model="inParamsActive"
+                filter-placeholder="请输入城市拼音"
+                :data="fieldsData.inParams"
+                :props="{ key: 'id' }"
+                :titles="['字段列表', '已选字段']"
+                @change="handleInParamsChange"
+              >
+                <div class="fields-item" slot-scope="{ option }">
+                  <span>{{ option.label }}</span>
+                  <span>{{ option.pAlias }}</span>
+                  <span>{{ option.javaType }}</span>
+                </div>
+              </el-transfer>
+            </el-tab-pane>
+            <el-tab-pane label="列表字段">
+              <el-transfer
+                v-model="outParamsActive"
+                filter-placeholder="请输入城市拼音"
+                :data="fieldsData.outParams"
+                :props="{ key: 'id' }"
+                :titles="['字段列表', '已选字段']"
+                @change="handleOutParamsChange"
+              >
+                <div class="fields-item" slot-scope="{ option }">
+                  <span>{{ option.label }}</span>
+                  <span>{{ option.pAlias }}</span>
+                  <span>{{ option.javaType }}</span>
+                </div>
+              </el-transfer>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-show="step === 2">
           <el-form-item label="">
-            <div v-for="item in Object.values(config.tools)" :key="item.type">
-              <el-checkbox v-model="item.show" :label="item.name"></el-checkbox>
+            <div
+              class="tools-item"
+              v-for="item in Object.values(config.tools)"
+              :key="item.type"
+            >
+              <el-checkbox
+                v-model="item.show"
+                :label="item.name"
+                border
+              ></el-checkbox>
             </div>
           </el-form-item>
         </div>
@@ -92,7 +139,7 @@
           >上一步</el-button
         >
         <el-button
-          v-if="step !== 1"
+          v-if="step !== 2"
           type="primary"
           size="small"
           @click="handleNext"
@@ -108,12 +155,15 @@
 </template>
 
 <script>
+import bus from "./util/bus";
 export default {
   props: { config: Object, apiOptions: Array },
   data() {
     return {
       step: 0,
-      formData: {}
+      fieldsData: { inParams: [], outParams: [] },
+      inParamsActive: [],
+      outParamsActive: []
     };
   },
   computed: {
@@ -122,16 +172,53 @@ export default {
     }
   },
   created() {},
-  mounted() {},
+  mounted() {
+    bus.$on("fieldsData", data => {
+      const initParams = (list, params) => {
+        list.map(item => {
+          params.push(item);
+          if (item.children) {
+            initParams(item.children, params);
+            return;
+          }
+        });
+      };
+      const inParams = [];
+      initParams(data.inParams, inParams);
+      const outParams = [];
+      initParams(data.outParams, outParams);
+      this.fieldsData = { inParams, outParams };
+    });
+  },
   methods: {
     handleBack() {
       this.step--;
+      if (this.step === 1) {
+        this.handleParamsActive();
+      }
     },
     handleNext() {
       this.step++;
+      if (this.step === 1) {
+        this.handleParamsActive();
+      }
     },
     handleSave() {
       this.$emit("save");
+    },
+    handleParamsActive() {
+      this.inParamsActive = this.config.search.options.map(item => {
+        return item.id;
+      });
+      this.outParamsActive = this.config.table.options.map(item => {
+        return item.id;
+      });
+    },
+    handleInParamsChange() {
+      bus.$emit("fieldsInParamsActive", this.inParamsActive);
+    },
+    handleOutParamsChange() {
+      bus.$emit("fieldsOutParamsActive", this.outParamsActive);
     }
   }
 };
@@ -145,6 +232,10 @@ export default {
   .content {
     height: calc(100% - 96px);
     padding-top: 10px;
+
+    .tools-item {
+      margin-bottom: 10px;
+    }
   }
   .footer {
     height: 50px;
@@ -156,5 +247,35 @@ export default {
     .stepView {
     }
   }
+  .fields-item {
+    span {
+      padding: 0px 8px 2px 8px;
+      border-radius: 4px;
+    }
+    span:nth-child(1) {
+      color: #1890ff;
+      background-color: #e8f4ff;
+    }
+    span:nth-child(2) {
+      color: #13ce66;
+      background-color: #e7faf0;
+    }
+    span:nth-child(3) {
+      color: #909399;
+      background-color: #f4f4f5;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.widgetGuide {
+  .el-transfer {
+    display: flex;
+    align-items: center;
+  }
+  .el-transfer-panel {
+    flex: 1;
+  }
 }
 </style>