tianheng-ui 0.1.63 → 0.1.65

package/packages/FormMaking/custom/config.js

@@ -109,31 +109,32 @@ export const basicComponents = [
       labelWidth: 100,
       isLabelWidth: false,
       inline: false,
-      defaultValue: "",
       showLabel: false,
+      required: false,
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
+      },
       options: [
         {
-          value: "选值 1",
-          label: "选项 1"
+          label: "选项 1",
+          value: "选值 1"
         },
         {
-          value: "选值 2",
-          label: "选项 2"
+          label: "选项 2",
+          value: "选值 2"
         },
         {
-          value: "选值 3",
-          label: "选项 3"
+          label: "选项 3",
+          value: "选值 3"
         }
       ],
-      required: false,
-      props: {
-        value: "id",
-        label: "name",
-        children: "children"
-      },
-      remote: false,
-      remoteFunc: "",
-      remoteOptions: [],
+      defaultValue: "",
       disabled: false,
       border: false, //边框
       buttonType: false //替换成按钮
@@ -152,31 +153,32 @@ export const basicComponents = [
       labelWidth: 100,
       isLabelWidth: false,
       inline: false,
-      defaultValue: [],
       showLabel: false,
+      required: false,
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
+      },
       options: [
         {
-          value: "选值 1",
-          label: "选项 1"
+          label: "选项 1",
+          value: "选值 1"
         },
         {
-          value: "选值 2",
-          label: "选项 2"
+          label: "选项 2",
+          value: "选值 2"
         },
         {
-          value: "选值 3",
-          label: "选项 3"
+          label: "选项 3",
+          value: "选值 3"
         }
       ],
-      required: false,
-      props: {
-        value: "id",
-        label: "name",
-        children: "children"
-      },
-      remote: false,
-      remoteFunc: "",
-      remoteOptions: [],
+      defaultValue: [],
       disabled: false,
       border: false, //边框
       buttonType: false, //替换成按钮
@@ -259,7 +261,6 @@ export const basicComponents = [
       width: "100%",
       labelWidth: 100,
       isLabelWidth: false,
-      defaultValue: "",
       multiple: false,
       disabled: false,
       clearable: false,
@@ -268,20 +269,18 @@ export const basicComponents = [
       showLabel: false,
       collapseTags: false,
       allowCreate: false,
-      options: [
-        { value: "选值 1", label: "选项 1" },
-        { value: "选值 2", label: "选项 2" },
-        { value: "选值 3", label: "选项 3" }
-      ],
       filterable: false,
-      props: {
-        value: "id",
-        label: "name",
-        children: "children"
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
       },
-      remote: false,
-      remoteFunc: "",
-      remoteOptions: [],
+      options: [{ label: "选项 1", value: "选值 1" }],
+      defaultValue: "",
       hidden: false,
       hideLabel: false
     },
@@ -351,7 +350,6 @@ export const basicComponents = [
     icon: "th-icon-aim",
     options: {
       customClass: "",
-      defaultValue: "Button",
       width: "",
       height: "",
       labelWidth: 100,
@@ -365,7 +363,16 @@ export const basicComponents = [
       buttonIcon: "",
       textAlign: "center",
       tableColumn: false,
-      remote: false,
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
+      },
+      defaultValue: "Button",
       disabled: false,
       loading: false,
       hidden: false,
@@ -494,7 +501,6 @@ export const basicComponents = [
       width: "",
       labelWidth: 100,
       isLabelWidth: false,
-      defaultValue: [],
       size: {
         width: 100,
         height: 100
@@ -509,8 +515,16 @@ export const basicComponents = [
       //isDelete: false,
       min: 0,
       //isEdit: false,
-      remote: false,
-      remoteFunc: "",
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
+      },
+      defaultValue: [],
       action: "https://jsonplaceholder.typicode.com/posts/",
       disabled: false,
       required: false,
@@ -548,7 +562,6 @@ export const basicComponents = [
       width: "",
       labelWidth: 100,
       isLabelWidth: false,
-      defaultValue: [],
       placeholder: "",
       disabled: false,
       clearable: false,
@@ -556,19 +569,22 @@ export const basicComponents = [
       showAllLevels: false, //只显示最后一级
       collapseTags: false,
       filterable: false, //搜索
+      multiple: false,
+      expandTrigger: "hover",
+      checkStrictly: false, //选择任意一级选项
       prepend: "",
       append: "",
-      props: {
-        value: "id",
-        label: "name",
-        children: "children",
-        multiple: false,
-        expandTrigger: "hover",
-        checkStrictly: false //选择任意一级选项
+      remote: {
+        open: true,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
       },
-      remote: true,
-      remoteFunc: "",
-      remoteOptions: [],
+      options: [],
+      defaultValue: "",
       hidden: false,
       hideLabel: false
     },
@@ -675,7 +691,6 @@ export const advanceComponents = [
     type: "tabs",
     icon: "icon-tabs",
     options: {
-      defaultValue: "tab1",
       type: "",
       tabPosition: "top",
       customClass: "",
@@ -695,24 +710,20 @@ export const advanceComponents = [
       labelWidth: 100,
       isLabelWidth: false,
       hideLabel: true,
-      remote: false,
-      remoteFunc: "",
-      remoteOption: [],
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          value: "id",
+          label: "name",
+          children: "children"
+        }
+      },
+      defaultValue: "tab1",
       tableColumn: false
     },
     events: {},
     rules: []
-  },
-  {
-    name: "自定义区域",
-    type: "blank",
-    icon: "th-icon-code",
-    options: {
-      defaultType: "String",
-      required: false
-    },
-    events: {},
-    rules: []
   }
 ];
 
@@ -799,6 +810,239 @@ export const layoutComponents = [
   }
 ];
 
+export const businessComponents = [
+  {
+    name: "自定义区域",
+    type: "blank",
+    icon: "th-icon-code",
+    options: {
+      defaultType: "String",
+      required: false
+    },
+    events: {},
+    rules: []
+  },
+  {
+    name: "描述列表",
+    type: "descriptions",
+    icon: "th-icon-layout",
+    options: {
+      border: false,
+      column: 1,
+      direction: "horizontal",
+      size: "small",
+      colon: true,
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          label: "label",
+          value: "value"
+        }
+      },
+      defaultValue: [
+        {
+          type: "text",
+          label: "审批类型",
+          value: "调休请假",
+          icon: "",
+          options: {
+            showTitle: true,
+            format: "",
+            style: {
+              label: {
+                width: "",
+                customStyle: ""
+              },
+              value: {
+                customStyle: ""
+              }
+            }
+          }
+        },
+        {
+          type: "text",
+          label: "请假时间",
+          value: "2023-05-08 至 2023-05-10",
+          icon: "",
+          options: {
+            showTitle: true,
+            format: "",
+            style: {
+              label: {
+                width: "",
+                customStyle: ""
+              },
+              value: {
+                customStyle: ""
+              }
+            }
+          }
+        },
+        {
+          type: "text",
+          label: "审批备注",
+          value:
+            "家里有急事需要处理,家里有急事需要处理,家里有急事需要处理，家里有急事需要处理家里有急事需要处理",
+          icon: "",
+          options: {
+            showTitle: true,
+            format: "",
+            style: {
+              label: {
+                width: "",
+                customStyle: ""
+              },
+              value: {
+                customStyle: ""
+              }
+            }
+          }
+        },
+        {
+          type: "text",
+          label: "发起人",
+          value: "张三",
+          icon: "",
+          options: {
+            showTitle: true,
+            format: "",
+            style: {
+              label: {
+                width: "",
+                customStyle: ""
+              },
+              value: {
+                customStyle: ""
+              }
+            }
+          }
+        }
+      ],
+      textAlignLast: "justify",
+      labelWidth: "",
+      hideLabel: true
+    },
+    events: {},
+    rules: []
+  },
+  {
+    name: "流程节点",
+    type: "workflow",
+    icon: "th-icon-layout",
+    options: {
+      reverse: false,
+      placement: "right",
+      hideTimestamp: false,
+      remote: {
+        open: false,
+        api: "",
+        props: {
+          label: "label",
+          value: "value"
+        }
+      },
+      defaultValue: {
+        processInstTaskRsps: [
+          {
+            name: "发起审批", // 节点名称
+            icon: "", // 节点图标
+            color: "#409EFF", // 节点颜色
+            // 审批人列表
+            checkPersons: [
+              {
+                avatar:
+                  "https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683478800&t=4568586f1ac2448ad8fb6bb1b79e7201", // 头像
+                name: "张三", // 名称
+                status: "", // 审批人的审批状态
+                description: "", // 审批内容
+                endTime: "" // 审批提交时间
+              }
+            ],
+            timestamp: "2023-05-04 18:00" // 节点时间
+          },
+          {
+            name: "指数领导审批",
+            icon: "",
+            color: "#409EFF",
+            checkPersons: [
+              {
+                avatar:
+                  "https://img0.baidu.com/it/u=4060770951,4069855872&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+                name: "李四",
+                status: "审批通过",
+                description: "请求合理，批准通过",
+                endTime: ""
+              }
+            ],
+            timestamp: "2023-05-05 10:24"
+          },
+          {
+            name: "部门审批",
+            color: "#67C23A",
+            checkPersons: [
+              {
+                avatar:
+                  "https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+                name: "王五",
+                status: "待审批",
+                description: "",
+                endTime: ""
+              },
+              {
+                avatar:
+                  "https://img2.baidu.com/it/u=4144002246,2068868174&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+                name: "王大朗",
+                status: "审批通过",
+                description: "同意",
+                endTime: ""
+              }
+            ],
+            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: ""
+            }
+          }
+        ]
+      },
+      hideLabel: true
+    }
+  }
+];
+
 export const templateComponents = [];
 
 export const baseConfig = {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="configComponents">
+  <div class="component-config">
     <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name"></el-input>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="configComponents">
+  <div class="component-config">
     <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name" clearable></el-input>
@@ -89,7 +89,7 @@
         </el-radio-group> -->
         <el-select
           style="width:100%"
-          v-model="widget.options.remoteFunc"
+          v-model="widget.options.remote.api"
           placeholder="请选择"
           no-data-text="暂无数据，请查阅相关文档说明"
           clearable

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="configComponents">
+  <div class="component-config">
     <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name"></el-input>
@@ -28,10 +28,6 @@
         <el-input v-model="widget.options.placeholder"></el-input>
       </el-form-item>
 
-      <!-- <el-form-item label="默认值">
-        <code-editor v-model="widget.options.defaultValue"></code-editor>
-      </el-form-item> -->
-
       <el-form-item
         label="组件插槽"
         v-if="widget.type === 'input' || widget.type === 'cascader'"
@@ -56,46 +52,71 @@
         </el-input>
       </el-form-item>
 
-      <el-form-item label="远端数据">
-        <el-select
-          style="width:100%"
-          v-model="widget.options.remoteFunc"
-          placeholder="请选择"
-          no-data-text="暂无数据，请查阅相关文档说明"
-          clearable
-          filterable
+      <el-form-item label="数据类型">
+        <el-radio-group
+          v-model="widget.options.remote.open"
+          @input="handleRadioGroupChange"
         >
-          <el-option
-            v-for="item in apiOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
+          <el-radio-button :label="false">静态数据</el-radio-button>
+          <el-radio-button :label="true">远端数据</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label-width="0">
+        <template v-if="widget.options.remote.open">
+          <el-select
+            style="width:100%;margin-bottom:5px;"
+            v-model="widget.options.remote.api"
+            placeholder="请选择"
+            no-data-text="暂无数据，请查阅相关文档说明"
+            clearable
+            filterable
           >
-          </el-option>
-        </el-select>
+            <el-option
+              v-for="item in apiOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
 
-        <el-input v-model="widget.options.props.value">
-          <div slot="prepend" style="width:50px;">值</div>
-        </el-input>
-        <el-input v-model="widget.options.props.label">
-          <div slot="prepend" style="width:50px;">标签</div>
-        </el-input>
-        <el-input v-model="widget.options.props.children">
-          <div slot="prepend" style="width:50px">子选项</div>
-        </el-input>
+          <el-input
+            style="margin-bottom:5px;"
+            v-model="widget.options.remote.props.value"
+          >
+            <div slot="prepend" style="width:50px;">内容</div>
+          </el-input>
+          <el-input
+            style="margin-bottom:5px;"
+            v-model="widget.options.remote.props.label"
+          >
+            <div slot="prepend" style="width:50px;">标签</div>
+          </el-input>
+          <el-input v-model="widget.options.remote.props.children">
+            <div slot="prepend" style="width:50px">子选项</div>
+          </el-input>
+        </template>
+
+        <th-code-editor
+          v-else
+          ref="codeEditorRef"
+          @change="handleCodeEditorChange"
+        ></th-code-editor>
+      </el-form-item>
+
+      <el-form-item label="默认值">
+        <el-input v-model="widget.options.defaultValue"></el-input>
       </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.props.multiple"
-          >支持多选</el-checkbox
-        >
+        <el-checkbox v-model="widget.options.multiple">支持多选</el-checkbox>
         <el-checkbox v-model="widget.options.showAllLevels"
           >仅显示最后一级</el-checkbox
         >
-        <el-checkbox v-model="widget.options.props.checkStrictly"
+        <el-checkbox v-model="widget.options.checkStrictly"
           >选择任意一级选项
         </el-checkbox>
         <el-checkbox v-model="widget.options.filterable"
@@ -128,7 +149,23 @@ export default {
   props: {},
   mixins: [configComponent],
   mounted() {},
-  methods: {}
+  methods: {
+    handleRadioGroupChange(val) {
+      if (!val) {
+        this.$nextTick(() => {
+          this.$refs.codeEditorRef.setValue(
+            JSON.stringify(this.widget.options.options, null, 2)
+          );
+        });
+        this.widget.options.remote.api = "";
+      }
+    },
+    handleCodeEditorChange(val) {
+      try {
+        this.widget.options.options = JSON.parse(val);
+      } catch (error) {}
+    }
+  }
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="configComponents">
+  <div class="component-config">
     <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name"></el-input>