tianheng-ui 0.1.67 → 0.1.69

package/package.json

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

package/packages/FormMaking/GenerateForm.vue

@@ -36,9 +36,10 @@
 </template>
 
 <script>
-import * as Axios from "lib/theme-chalk/js/axios";
-import { deepClone, getProperty, setProperty } from "./util/index";
 import GenetateFormItem from "./GenerateFormItem";
+import * as Axios from "./network/axios";
+import appConfig from "./config/index";
+import { deepClone, getProperty, setProperty } from "./util/index";
 
 export default {
   name: "thFormGenerate",
@@ -95,11 +96,14 @@ export default {
       console.log("watch models =>", this.models);
     }
   },
-  created() {
-    localStorage.setItem("_TH_OauthConfig", JSON.stringify(this.oauthConfig));
-    this.axios = Axios.init(this.oauthConfig);
-  },
+  created() {},
   mounted() {
+    sessionStorage.setItem(
+      appConfig.storageKeys.oauthConfig,
+      JSON.stringify(this.oauthConfig)
+    );
+    this.axios = Axios.init(this.oauthConfig);
+
     this.generateModle(this.formConfig.list, this.models);
     console.log("mounted models =>", this.models);
     this.handleMountedRemotData();
@@ -259,6 +263,7 @@ export default {
       const params = {};
       for (let e of api.inParams) {
         const value =
+          e.defaultValue ||
           getProperty(this.models, e.pAlias) ||
           getProperty(this.query, e.pAlias) ||
           null;
@@ -296,7 +301,10 @@ export default {
           if (item.children) {
             initParams(item.children);
           } else {
-            const value = getProperty(this.models, item.pAlias) || null;
+            const value =
+              item.defaultValue ||
+              getProperty(this.models, item.pAlias) ||
+              null;
             setProperty(params, item.pAlias, value);
           }
         });

package/packages/FormMaking/WidgetConfig.vue

@@ -102,6 +102,7 @@
             :config="config"
             :apiOptions="apiOptions"
             :is="compsData[data.type].content"
+            @remote-params="handleFieldsApiChange"
           ></component>
 
           <el-collapse-item

package/packages/FormMaking/WidgetTools.vue

@@ -224,7 +224,6 @@
 <script>
 import { deepClone } from "./util/index";
 import * as XLSX from "xlsx/xlsx.mjs";
-import request from "./util/request";
 import generateCode from "./util/generateCode.js";
 import GenerateForm from "./GenerateForm";
 export default {
@@ -480,8 +479,10 @@ export default {
             });
           } else if (item.type === "table" || item.type === "tableH5") {
             initList(item.options.columns);
-          } else if (item.options.remote?.open || item.options.remote?.api) {
-            fieldsApi[item.model] = item.options.remote.api;
+          } else if (item.type === "workflow") {
+            initList(item.options.buttons);
+          }  else if (item.options.remote?.open || item.options.remote?.api) {
+            fieldsApi[item.model || item.name] = item.options.remote.api;
           }
         }
       };

package/packages/FormMaking/config/index.js

@@ -1,4 +1,6 @@
 export default {
+  title: "FormMaking",
+  logo: '',
   version: "1.0.0",
   storageKeys: {
     oauthConfig: "_TH_OauthConfig"

package/packages/FormMaking/custom/config.js

@@ -254,7 +254,7 @@ export const basicComponents = [
     rules: []
   },
   {
-    name: "下拉选择框",
+    name: "下拉选择器",
     type: "select",
     icon: "icon-select",
     options: {
@@ -597,7 +597,7 @@ export const basicComponents = [
 
 export const advanceComponents = [
   {
-    name: "子表单",
+    name: "子表格",
     type: "table",
     icon: "th-icon-insertrowabove",
     options: {
@@ -629,7 +629,7 @@ export const advanceComponents = [
     rules: []
   },
   {
-    name: "子表单H5",
+    name: "子表格H5",
     type: "tableH5",
     icon: "th-icon-insertrowleft",
     options: {
@@ -662,7 +662,7 @@ export const advanceComponents = [
     type: "list",
     icon: "th-icon-orderedlist",
     options: {
-      defaultValue: "",
+      defaultValue: [],
       columns: [],
       customClass: "",
       labelWidth: 100,
@@ -825,7 +825,7 @@ export const businessComponents = [
   {
     name: "描述列表",
     type: "descriptions",
-    icon: "th-icon-layout",
+    icon: "th-icon-detail",
     options: {
       border: false,
       column: 1,
@@ -925,7 +925,7 @@ export const businessComponents = [
   {
     name: "流程节点",
     type: "workflow",
-    icon: "th-icon-layout",
+    icon: "th-icon-apartment",
     options: {
       reverse: false,
       placement: "right",
@@ -998,43 +998,44 @@ export const businessComponents = [
             timestamp: "2023-05-05 14:30"
           }
         ],
-        processInstButtons: [
-          {
-            name: "通过",
-            options: {
-              remote: {
-                api: ""
-              },
-              type: "primary",
-              icon: "",
-              size: "small",
-              plain: false,
-              round: false,
-              circle: false,
-              disabled: false,
-              loading: false,
-              customStyle: ""
-            }
-          },
-          {
-            name: "驳回",
-            options: {
-              remote: {
-                api: ""
-              },
-              type: "primary",
-              icon: "",
-              size: "small",
-              plain: false,
-              round: false,
-              circle: false,
-              disabled: false,
-              loading: false,
-              customStyle: ""
-            }
-          }
-        ]
+        processInstButtons: null
       },
+      buttons: [
+        {
+          name: "通过",
+          options: {
+            remote: {
+              api: ""
+            },
+            type: "primary",
+            icon: "",
+            size: "small",
+            plain: false,
+            round: false,
+            circle: false,
+            disabled: false,
+            loading: false,
+            customStyle: ""
+          }
+        },
+        {
+          name: "驳回",
+          options: {
+            remote: {
+              api: ""
+            },
+            type: "primary",
+            icon: "",
+            size: "small",
+            plain: false,
+            round: false,
+            circle: false,
+            disabled: false,
+            loading: false,
+            customStyle: ""
+          }
+        }
+      ],
       hideLabel: true
     },
     events: {},

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

@@ -6,10 +6,12 @@
       </el-form-item>
 
       <el-form-item label="栅格间隔">
-        <el-input
-          type="number"
-          v-model.number="widget.options.gutter"
-        ></el-input>
+        <el-input-number
+          style="width:100%"
+          v-model="widget.options.gutter"
+          controls-position="right"
+          :min="0"
+        ></el-input-number>
       </el-form-item>
 
       <el-form-item label="列配置项">
@@ -28,7 +30,13 @@
             :key="index"
           >
             <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
-            <el-input v-model.number="item.span" type="number"> </el-input>
+            <el-input-number
+              style="width:100%"
+              v-model="item.span"
+              controls-position="right"
+              :min="0"
+              :max="24"
+            ></el-input-number>
             <el-button
               class="delete"
               circle
@@ -39,12 +47,12 @@
             ></el-button>
           </div>
         </draggable>
-        <div style="margin-left: 22px;text-align: right;">
+        <div style="margin-left: 22px;">
           <el-button type="text" @click="handleAddOption">添加列</el-button>
         </div>
       </el-form-item>
 
-      <el-form-item label="水平排列方式">
+      <el-form-item label="水平排列">
         <el-select v-model="widget.options.justify">
           <el-option value="start" label="左对齐"></el-option>
           <el-option value="end" label="右对齐"></el-option>
@@ -54,7 +62,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="垂直排列方式">
+      <el-form-item label="垂直排列">
         <el-select v-model="widget.options.align">
           <el-option value="top" label="顶部对齐"></el-option>
           <el-option value="middle" label="居中"></el-option>
@@ -107,7 +115,7 @@ export default {
   display: flex;
   align-items: center;
 
-  .el-input {
+  .el-input-number {
     margin: 0 5px;
   }
 

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

@@ -1,18 +1,100 @@
 <template>
-  <div>
-     
+  <div class="component-config">
+    <el-collapse-item title="组件配置" name="group-element">
+      <el-form-item label="标题">
+        <el-input v-model="widget.name" clearable></el-input>
+      </el-form-item>
+
+      <el-form-item label="标签宽度">
+        <div style="display: flex;">
+          <el-checkbox v-model="widget.options.isLabelWidth"
+            >自定义</el-checkbox
+          >
+          <el-input-number
+            style="margin-left:5px;"
+            v-model="widget.options.labelWidth"
+            controls-position="right"
+            :min="0"
+            :max="200"
+            :disabled="!widget.options.isLabelWidth"
+          >
+          </el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label-width="0">
+        <div class="config-header">
+          <span class="title">默认值</span>
+          <span class="value" @click="handleAddData">添加数据</span>
+        </div>
+        <code-editor
+          v-model="widget.options.defaultValue"
+          language="json"
+        ></code-editor>
+      </el-form-item>
+
+      <el-form-item label="新增按钮">
+        <el-input v-model.number="widget.options.addButtonText"></el-input>
+      </el-form-item>
+
+      <el-form-item label="删除按钮">
+        <el-input v-model.number="widget.options.deleteButtonText"></el-input>
+      </el-form-item>
+
+      <el-form-item label="可删除的最小索引">
+        <el-input-number v-model="widget.options.deleteIndex" :min="0">
+        </el-input-number>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.disabled">禁用 </el-checkbox>
+        <el-checkbox v-model="widget.options.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+        <el-checkbox v-model="widget.options.isAdd">可新增 </el-checkbox>
+        <el-checkbox v-model="widget.options.isDelete">可删除 </el-checkbox>
+      </el-form-item>
+
+      <el-form-item label="校验">
+        <el-checkbox v-model="widget.options.required">必填</el-checkbox>
+      </el-form-item>
+    </el-collapse-item>
   </div>
 </template>
 
 <script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+import CodeEditor from "ui/CodeEditor/index.vue";
 export default {
-  data() {
-    return {};
+  components: {
+    Draggable,
+    CodeEditor
   },
-  created() {},
+  props: {},
+  mixins: [configComponent],
   mounted() {},
-  methods: {},
+  methods: {
+    handleAddData() {
+      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
+      let dic = {};
+      this.widget.options.columns.forEach(item => {
+        if (item.type === "grid") {
+          for (let i = 0; i < item.options.columns.length; i++) {
+            const element = item.options.columns[i];
+            for (let j = 0; j < element.list.length; j++) {
+              const element2 = element.list[j];
+              dic[element2.model] = element2.options.defaultValue;
+            }
+          }
+        } else {
+          dic[item.model] = item.options.defaultValue;
+        }
+      });
+      defaultValue.push(dic);
+      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

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

@@ -52,7 +52,7 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item v-if="!widget.options.remote.open" label-width="0">
+      <el-form-item v-else label-width="0">
         <draggable
           :list="widget.options.defaultValue.processInstTaskRsps"
           v-bind="{
@@ -101,9 +101,20 @@
           >
         </div>
       </el-form-item>
-      <el-form-item v-if="!widget.options.remote.open" label-width="0">
+
+      <el-form-item>
+        <el-tooltip
+          slot="label"
+          effect="light"
+          content="流程节点的默认操作，可被远端节点数据的 processInstButtons 配置属性覆盖"
+          placement="top"
+        >
+          <span style="color: #409EFF;">操作按钮</span>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label-width="0">
         <draggable
-          :list="widget.options.defaultValue.processInstButtons"
+          :list="widget.options.buttons"
           v-bind="{
             group: { name: 'options' },
             ghostClass: 'ghost',
@@ -112,8 +123,7 @@
           handle=".drag"
         >
           <div
-            v-for="(item, index) in widget.options.defaultValue
-              .processInstButtons"
+            v-for="(item, index) in widget.options.buttons"
             class="draggable-item"
             :key="index"
           >
@@ -242,8 +252,7 @@
             >
           </div>
           <div
-            v-for="(item, index) in widget.options.defaultValue
-              .processInstButtons"
+            v-for="(item, index) in widget.options.buttons"
             class="list-item th-is_hover"
             :class="{
               'th-is_active': dialog.data && dialog.data.name === item.name
@@ -328,17 +337,17 @@
               <el-select
                 v-model="dialog.data.options.remote.api"
                 style="width:100%"
-                value-key="id"
                 clearable
                 placeholder=""
                 filterable
                 no-data-text="暂无接口，请前往【接口模块】创建"
+                @change="handleRemoteApiChange"
               >
                 <el-option
                   v-for="item in apiOptions"
                   :key="item.id"
                   :label="item.name"
-                  :value="item"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>
@@ -400,9 +409,8 @@ export default {
           timestamp: "节点时间"
         });
       } else {
-        this.widget.options.defaultValue.processInstButtons.push({
-          name: `操作${this.widget.options.defaultValue.processInstButtons
-            .length + 1}`,
+        this.widget.options.buttons.push({
+          name: `操作${this.widget.options.buttons.length + 1}`,
           options: {
             remote: {
               api: ""
@@ -423,7 +431,7 @@ export default {
     handleRemoveOption(index, type) {
       if (type === "processInstTaskRsps")
         this.widget.options.defaultValue.processInstTaskRsps.splice(index, 1);
-      else this.widget.options.defaultValue.processInstButtons.splice(index, 1);
+      else this.widget.options.buttons.splice(index, 1);
     },
     handleRemoteChange(val) {
       if (val) return;
@@ -433,13 +441,16 @@ export default {
       const data =
         action === "processInstTaskRsps"
           ? this.widget.options.defaultValue.processInstTaskRsps[index]
-          : this.widget.options.defaultValue.processInstButtons[index];
+          : this.widget.options.buttons[index];
       this.dialog = {
         show: true,
         action,
         data,
         index
       };
+    },
+    handleRemoteApiChange(val) {
+      this.$emit("remote-params", val);
     }
   }
 };

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

@@ -1,18 +1,119 @@
 <template>
-  <div>
-     
+  <div class="component-list">
+    <div
+      v-for="(column, columnIndex) in dataModel"
+      class="tableH5-list"
+      :key="`tableH5_${columnIndex}`"
+    >
+      <div
+        v-for="(element, elementIndex) in widget.options.columns"
+        class="tableH5-list-item"
+        :key="`tableH5_${columnIndex}_${element.key}`"
+      >
+        <generate-form-item
+          style="flex:1;"
+          :widget="element"
+          :model.sync="
+            element.type === 'grid' && !element.options.isEntity
+              ? column
+              : column[element.model]
+          "
+          :models="models"
+          :pModel="
+            pModel
+              ? `${pModel}.${columnIndex}`
+              : `${widget.model}.${columnIndex}`
+          "
+          :config="config"
+          :slotKeys="slotKeys"
+          :componentsData="componentsData"
+        >
+          <template v-for="name in slotKeys" :slot="name">
+            <slot :name="name" />
+          </template>
+        </generate-form-item>
+        <div
+          v-if="
+            widget.options.isDelete &&
+              elementIndex === 0 &&
+              columnIndex >= widget.options.deleteIndex
+          "
+          class="actions"
+        >
+          <el-button
+            type="danger"
+            @click.native.prevent="dataModel.splice(columnIndex, 1)"
+            >{{ widget.options.deleteButtonText }}</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <div v-if="widget.options.isAdd" style="text-align: center;">
+      <el-button
+        type="text"
+        :disabled="widget.options.disabled"
+        @click="handleTableAdd"
+        >{{ widget.options.addButtonText }}</el-button
+      >
+    </div>
   </div>
 </template>
 
 <script>
+import { itemsComponent, eventMixin } from "../mixins/index";
+import GenerateFormItem from "../../GenerateFormItem.vue";
 export default {
+  components: { GenerateFormItem },
+  mixins: [itemsComponent, eventMixin],
+  props: ["models", "prop", "slotKeys", "componentsData"],
   data() {
     return {};
   },
-  created() {},
-  mounted() {},
-  methods: {},
+  methods: {
+    handleTableAdd() {
+      let dic = {};
+      const initData = (list, data) => {
+        for (const item of list) {
+          if (item.type === "grid") {
+            if (item.options.isEntity) data[item.model] = {};
+            for (const column of item.options.columns) {
+              initData(
+                column.list,
+                item.options.isEntity ? data[item.model] : data
+              );
+            }
+          } else {
+            data[item.model] = item.options.defaultValue;
+          }
+        }
+      };
+      initData(this.widget.options.columns, dic);
+      this.dataModel.push(dic);
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.component-list {
+  background: #fff;
+
+  .tableH5-list {
+    .tableH5-list-item {
+      width: 100%;
+    }
+    .tableH5-list-item:nth-child(1) {
+      display: flex;
+      > div:first-child {
+        flex: 1;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+  }
+}
+</style>

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

@@ -54,6 +54,8 @@
 
 <script>
 import { itemsComponent, eventMixin } from "../mixins/index";
+import appConfig from "../../config/index";
+
 export default {
   mixins: [itemsComponent, eventMixin],
   data() {
@@ -65,7 +67,7 @@ export default {
   computed: {
     uploadUrl() {
       if (this.widget.options.remote.open) {
-        const info = sessionStorage.getItem("th_oauth_info");
+        const info = sessionStorage.getItem(appConfig.storageKeys.oauthConfig);
         let baseUrl = "";
         if (info) baseUrl = JSON.parse(info).baseUrl;
         const func = this.config.network[this.widget.options.remote.api];

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

@@ -58,12 +58,14 @@
       </el-timeline-item>
     </el-timeline>
     <div
-      v-if="dataModel.processInstButtons.length"
+      v-if="dataModel.processInstButtons || widget.options.buttons.length"
       class="footer"
       :class="{ sticky: widget.options.buttonsSticky }"
     >
       <el-button
-        v-for="(item, index) in dataModel.processInstButtons"
+        v-for="(item, index) in dataModel.processInstButtons
+          ? dataModel.processInstButtons
+          : widget.options.buttons"
         :key="index"
         :style="item.options.customStyle"
         :type="item.options.type"