tianheng-ui 0.1.63 → 0.1.65

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

@@ -0,0 +1,494 @@
+<template>
+  <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="排序方向">
+        <el-radio-group v-model="widget.options.reverse">
+          <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="时间位置">
+        <el-radio-group v-model="widget.options.placement">
+          <el-radio-button label="top">顶部</el-radio-button>
+          <el-radio-button label="right">右边</el-radio-button>
+          <el-radio-button label="bottom">底部</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="隐藏时间">
+        <el-switch v-model="widget.options.hideTimestamp"></el-switch>
+      </el-form-item>
+
+      <el-form-item label="节点数据">
+        <el-radio-group
+          v-model="widget.options.remote.open"
+          @input="handleRemoteChange"
+        >
+          <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 v-if="widget.options.remote.open" label-width="0">
+        <el-select
+          style="width:100%;margin-bottom: 5px;"
+          v-model="widget.options.remote.api"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in apiOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="!widget.options.remote.open" label-width="0">
+        <draggable
+          :list="widget.options.defaultValue.processInstTaskRsps"
+          v-bind="{
+            group: { name: 'options' },
+            ghostClass: 'ghost',
+            handle: '.drag'
+          }"
+          handle=".drag"
+        >
+          <div
+            v-for="(item, index) in widget.options.defaultValue
+              .processInstTaskRsps"
+            class="draggable-item"
+            :key="index"
+          >
+            <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
+            <div class="content">
+              <el-input v-model="item.name" placeholder="标题" clearable>
+              </el-input>
+            </div>
+            <el-button
+              class="action"
+              type="primary"
+              size="mini"
+              icon="el-icon-set-up"
+              circle
+              plain
+              @click="handleDetailOption(index, 'processInstTaskRsps')"
+            ></el-button>
+
+            <el-button
+              class="action"
+              type="danger"
+              size="mini"
+              icon="el-icon-minus"
+              circle
+              plain
+              @click="handleRemoveOption(index, 'processInstTaskRsps')"
+            ></el-button>
+          </div>
+        </draggable>
+
+        <div style="margin-left: 22px;">
+          <el-button type="text" @click="handleAddOption('processInstTaskRsps')"
+            >添加节点</el-button
+          >
+        </div>
+      </el-form-item>
+      <el-form-item v-if="!widget.options.remote.open" label-width="0">
+        <draggable
+          :list="widget.options.defaultValue.processInstButtons"
+          v-bind="{
+            group: { name: 'options' },
+            ghostClass: 'ghost',
+            handle: '.drag'
+          }"
+          handle=".drag"
+        >
+          <div
+            v-for="(item, index) in widget.options.defaultValue
+              .processInstButtons"
+            class="draggable-item"
+            :key="index"
+          >
+            <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
+            <div class="content">
+              <el-input v-model="item.name" placeholder="标题" clearable>
+              </el-input>
+            </div>
+            <el-button
+              class="action"
+              type="primary"
+              size="mini"
+              icon="el-icon-set-up"
+              circle
+              plain
+              @click="handleDetailOption(index, 'processInstButtons')"
+            ></el-button>
+
+            <el-button
+              class="action"
+              type="danger"
+              size="mini"
+              icon="el-icon-minus"
+              circle
+              plain
+              @click="handleRemoveOption(index, 'processInstButtons')"
+            ></el-button>
+          </div>
+        </draggable>
+
+        <div style="margin-left: 22px;">
+          <el-button type="text" @click="handleAddOption('processInstButtons')"
+            >添加操作</el-button
+          >
+        </div>
+      </el-form-item>
+    </el-collapse-item>
+
+    <th-dialog
+      v-model="dialog.show"
+      title="数据配置"
+      :modal-append-to-body="false"
+      :showFooter="false"
+    >
+      <div
+        v-if="dialog.action === 'processInstTaskRsps'"
+        class="th-flex_box th-is_border"
+      >
+        <div class="box-list th-flex_aside th-is_border_right">
+          <div class="box-header th-sticky_top">
+            <div>节点列表</div>
+            <el-button
+              type="text"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAddOption('processInstTaskRsps')"
+              >添加</el-button
+            >
+          </div>
+          <div
+            v-for="(item, index) in widget.options.defaultValue
+              .processInstTaskRsps"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active': dialog.data && dialog.data.name === item.name
+            }"
+            :key="index"
+            @click="dialog.data = item"
+          >
+            <div class="list-item-value">{{ item.name }}</div>
+            <el-popconfirm
+              :title="`是否确定删除 ${item.name}`"
+              confirm-button-text="删除"
+              confirm-button-type="danger"
+              @confirm="handleRemoveOption(index, 'processInstTaskRsps')"
+            >
+              <i class="delete el-icon-delete" slot="reference"></i>
+            </el-popconfirm>
+          </div>
+        </div>
+        <div class="box-content th-fiex_content">
+          <div class="box-header th-sticky_top">节点详情</div>
+          <el-form
+            v-if="dialog.data"
+            style="padding:10px"
+            :model="dialog.data"
+            label-width="80px"
+            size="mini"
+          >
+            <el-form-item label="节点标题">
+              <el-input v-model="dialog.data.name"></el-input>
+            </el-form-item>
+            <!-- <el-form-item label="节点状态">
+              <el-input v-model="dialog.data.status"></el-input>
+            </el-form-item> -->
+            <el-form-item label="节点颜色">
+              <el-color-picker
+                v-model="dialog.data.color"
+                :predefine="predefineColors"
+              ></el-color-picker>
+            </el-form-item>
+            <el-form-item label="节点时间">
+              <el-input v-model="dialog.data.timestamp"></el-input>
+            </el-form-item>
+            <el-form-item label="审批人">
+              <th-code-editor
+                v-model="dialog.data.checkPersons"
+              ></th-code-editor>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div
+        v-if="dialog.action === 'processInstButtons'"
+        class="th-flex_box th-is_border"
+      >
+        <div class="box-list th-flex_aside th-is_border_right">
+          <div class="box-header th-sticky_top">
+            <div>操作列表</div>
+            <el-button
+              type="text"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAddOption('processInstButtons')"
+              >添加</el-button
+            >
+          </div>
+          <div
+            v-for="(item, index) in widget.options.defaultValue
+              .processInstButtons"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active': dialog.data && dialog.data.name === item.name
+            }"
+            :key="index"
+            @click="dialog.data = item"
+          >
+            <div class="list-item-value">{{ item.name }}</div>
+            <el-popconfirm
+              :title="`是否确定删除 ${item.name}`"
+              confirm-button-text="删除"
+              confirm-button-type="danger"
+              @confirm="handleRemoveOption(index, 'processInstTaskRsps')"
+            >
+              <i class="delete el-icon-delete" slot="reference"></i>
+            </el-popconfirm>
+          </div>
+        </div>
+        <div class="box-content th-fiex_content">
+          <div class="box-header th-sticky_top">操作详情</div>
+          <el-form
+            v-if="dialog.data"
+            style="padding:10px"
+            :model="dialog.data"
+            label-width="80px"
+            size="mini"
+          >
+            <el-form-item label="按钮模型">
+              <el-button
+                :type="dialog.data.options.type"
+                :icon="dialog.data.options.icon"
+                :plain="dialog.data.options.plain"
+                :round="dialog.data.options.round"
+                :circle="dialog.data.options.circle"
+                :size="dialog.data.options.size"
+                >{{ dialog.data.name }}</el-button
+              >
+            </el-form-item>
+            <el-form-item label="操作标题">
+              <el-input v-model="dialog.data.name"></el-input>
+            </el-form-item>
+            <el-form-item label="按钮类型">
+              <el-radio-group v-model="dialog.data.options.type">
+                <el-radio label="">默认</el-radio>
+                <el-radio label="primary">主要按钮</el-radio>
+                <el-radio label="success">成功按钮</el-radio>
+                <el-radio label="info">信息按钮</el-radio>
+                <el-radio label="warning">警告按钮</el-radio>
+                <el-radio label="danger">危险按钮</el-radio>
+                <el-radio label="text">文字按钮</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="按钮大小">
+              <el-radio-group v-model="dialog.data.options.size" size="mini">
+                <el-radio-button label="medium"></el-radio-button>
+                <el-radio-button label="small"></el-radio-button>
+                <el-radio-button label="mini"></el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item label="是否空心">
+              <el-switch v-model="dialog.data.options.plain"> </el-switch>
+            </el-form-item>
+            <el-form-item label="是否圆角">
+              <el-switch v-model="dialog.data.options.round"> </el-switch>
+            </el-form-item>
+            <el-form-item label="是否圆型">
+              <el-switch v-model="dialog.data.options.circle"> </el-switch>
+            </el-form-item>
+            <el-form-item label="按钮图标">
+              <th-icons v-model="dialog.data.options.icon"></th-icons>
+            </el-form-item>
+            <el-form-item>
+              <el-tooltip
+                slot="label"
+                effect="light"
+                content="当前操作关联的接口请求"
+                placement="top"
+              >
+                <span style="color: #409EFF;">关联接口</span>
+              </el-tooltip>
+              <el-select
+                v-model="dialog.data.options.remote.api"
+                style="width:100%"
+                value-key="id"
+                clearable
+                placeholder=""
+                no-data-text="暂无接口，请前往【接口模块】创建"
+              >
+                <el-option
+                  v-for="item in apiOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </th-dialog>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+export default {
+  components: { Draggable },
+  mixins: [configComponent],
+  data() {
+    return {
+      dialog: { show: false, action: "", data: "", index: "" },
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585",
+        "rgba(255, 69, 0, 0.68)",
+        "rgb(255, 120, 0)",
+        "hsv(51, 100, 98)",
+        "hsva(120, 40, 94, 0.5)",
+        "hsl(181, 100%, 37%)",
+        "hsla(209, 100%, 56%, 0.73)",
+        "#c7158577"
+      ]
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleAddOption(type) {
+      if (type === "processInstTaskRsps") {
+        this.widget.options.defaultValue.processInstTaskRsps.push({
+          name: `节点${this.widget.options.defaultValue.processInstTaskRsps
+            .length + 1}`,
+          status: "",
+          icon: "",
+          color: "",
+          checkPersons: [
+            {
+              avatar: "",
+              name: "审批人",
+              status: "审批状态",
+              description: "审批内容",
+              endTime: ""
+            }
+          ],
+          timestamp: "节点时间"
+        });
+      } else {
+        this.widget.options.defaultValue.processInstButtons.push({
+          name: `操作${this.widget.options.defaultValue.processInstButtons
+            .length + 1}`,
+          options: {
+            remote: {
+              api: ""
+            },
+            type: "",
+            icon: "",
+            size: "small",
+            plain: false,
+            round: false,
+            circle: false,
+            disabled: false,
+            loading: false,
+            customStyle: ""
+          }
+        });
+      }
+    },
+    handleRemoveOption(index, type) {
+      if (type === "processInstTaskRsps")
+        this.widget.options.defaultValue.processInstTaskRsps.splice(index, 1);
+      else this.widget.options.defaultValue.processInstButtons.splice(index, 1);
+    },
+    handleRemoteChange(val) {
+      if (val) return;
+      this.widget.options.remote.api = "";
+    },
+    handleDetailOption(index, action) {
+      const data =
+        action === "processInstTaskRsps"
+          ? this.widget.options.defaultValue.processInstTaskRsps[index]
+          : this.widget.options.defaultValue.processInstButtons[index];
+      this.dialog = {
+        show: true,
+        action,
+        data,
+        index
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.draggable-item {
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+
+  .content {
+    display: flex;
+    margin: 0 5px;
+    > div {
+      margin: 0 2px;
+    }
+  }
+  .drag {
+    font-size: 16px;
+    cursor: move;
+  }
+  .action {
+    padding: 4px;
+  }
+}
+.th-flex_box {
+  .box-list {
+    .list-item {
+      padding: 10px 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: 0.25s;
+
+      .delete {
+        color: #f56c6c;
+        cursor: pointer;
+      }
+      .delete:hover {
+        color: #f78989;
+      }
+    }
+  }
+  .box-content {
+  }
+  .box-header {
+    padding: 0 10px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 99;
+  }
+}
+</style>

package/packages/FormMaking/custom/index.js

@@ -20,11 +20,13 @@ const basicComponents = [
   "editor",
   "cascader"
 ];
-const advanceComponents = ["table", "tableH5", "list", "tabs", "blank"];
+const advanceComponents = ["table", "tableH5", "list", "tabs"];
 const layoutComponents = ["grid", "alliance", "filler", "divider"];
+const businessComponents = ["blank", "descriptions"];
 
 module.exports = {
   basicComponents,
   advanceComponents,
-  layoutComponents
+  layoutComponents,
+  businessComponents
 };

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

@@ -8,8 +8,8 @@
       width: widget.options.width,
       height: widget.options.height
     }"
-    :options="widget.options.remoteOptions"
-    :props="widget.options.props"
+    :options="widget.options.options"
+    :props="widget.options.remote.props"
     :show-all-levels="widget.options.showAllLevels ? false : true"
     :collapse-tags="widget.options.collapseTags"
     :filterable="widget.options.filterable"

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

@@ -12,14 +12,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>
@@ -30,14 +28,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/descriptions.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="component-descriptions">
+    <div
+      v-if="widget.name"
+      class="component-header_title"
+      v-html="widget.name"
+    ></div>
+    <el-descriptions
+      :border="widget.options.border"
+      :column="widget.options.column"
+      :direction="widget.options.direction"
+      :size="widget.options.size"
+      :colon="false"
+    >
+      <el-descriptions-item v-for="(item, index) in dataModel" :key="index">
+        <template slot="label">
+          <div :style="labelStyle(item)">
+            <i :class="item.icon"></i>
+            <span v-html="item.label"></span>
+            <span v-if="widget.options.colon">:</span>
+          </div>
+        </template>
+        <a v-if="item.type === 'url'" :href="item.value">{{ item.value }}</a>
+        <span v-else v-html="item.value"></span>
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+import { itemsComponent, eventMixin } from "../mixins/index";
+export default {
+  mixins: [itemsComponent, eventMixin],
+  computed: {
+    labelStyle() {
+      return item => {
+        let style = {
+          width: this.widget.options.labelWidth,
+          textAlignLast: this.widget.options.textAlignLast
+        };
+        style = Object.assign(style, item.options.style.label);
+        return this.initStyle(style);
+      };
+    }
+  },
+  methods: {
+    initStyle(style) {
+      let styleText = "";
+      let customStyle = "";
+      for (let key of Object.keys(style)) {
+        const value = style[key];
+        if (!value) continue;
+        if (key === "customStyle") {
+          customStyle = value.replace(/{/g, "");
+          customStyle = customStyle.replace(/}/g, "");
+          customStyle = customStyle.replace(/\/n/g, "");
+        } else {
+          styleText += `${key}: ${value};`;
+        }
+      }
+      if (customStyle) styleText += customStyle;
+      styleText = styleText.replace(/rpx/g, "px");
+      return styleText;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.component-descriptions {
+  .el-descriptions {
+    padding: 0px;
+  }
+}
+</style>

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

@@ -15,13 +15,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;