tianheng-ui 0.1.63 → 0.1.65

package/packages/FormMaking/custom/configs/checkbox.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>
@@ -24,13 +24,6 @@
         <el-input v-model="widget.options.width"></el-input>
       </el-form-item>
 
-      <el-form-item label="布局方式">
-        <el-radio-group v-model="widget.options.inline">
-          <el-radio-button :label="false">块级</el-radio-button>
-          <el-radio-button :label="true">inline</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-
       <el-form-item label="设置范围">
         <div style="display: flex;">
           <div style="width: 80px;">最小勾选：</div>
@@ -44,12 +37,19 @@
         </div>
       </el-form-item>
 
+      <el-form-item label="布局方式">
+        <el-radio-group v-model="widget.options.inline">
+          <el-radio-button :label="false">块级</el-radio-button>
+          <el-radio-button :label="true">inline</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
       <el-form-item label="数据类型">
         <el-radio-group
-          v-model="widget.options.remote"
+          v-model="widget.options.remote.open"
           @input="
             val => {
-              if (!val) widget.options.remoteFunc = '';
+              if (!val) widget.options.remote.api = '';
             }
           "
         >
@@ -58,77 +58,74 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label-width="0">
-        <template v-if="widget.options.remote">
+        <template v-if="widget.options.remote.open">
           <el-select
-          style="width:100%"
-          v-model="widget.options.remoteFunc"
-          placeholder="请选择"
-          no-data-text="暂无数据，请查阅相关文档说明"
-          clearable
-          filterable
-        >
-          <el-option
-            v-for="item in apiOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
+            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
+            style="margin-bottom:5px;"
+            v-model="widget.options.remote.props.value"
+          >
+            <div slot="prepend">内容</div>
           </el-input>
-          <el-input v-model="widget.options.props.label">
-            <div slot="prepend" style="width:50px;">标签</div>
+          <el-input
+            style="margin-bottom:5px;"
+            v-model="widget.options.remote.props.label"
+          >
+            <div slot="prepend">标签</div>
           </el-input>
-          <el-input v-model="widget.options.props.children">
-            <div slot="prepend" style="width:50px">子选项</div>
+          <el-input
+            style="margin-bottom:5px;"
+            v-model="widget.options.remote.props.children"
+          >
+            <div slot="prepend">子选项</div>
           </el-input>
         </template>
         <template v-else>
-          <el-switch
-            v-model="widget.options.showLabel"
-            active-text="显示标签"
-            inactive-text="隐藏标签"
+          <el-checkbox-group
+            style="width: 100%;"
+            v-model="widget.options.defaultValue"
           >
-          </el-switch>
-          <el-checkbox-group v-model="widget.options.defaultValue">
             <draggable
-              tag="ul"
               :list="widget.options.options"
               v-bind="{
                 group: { name: 'options' },
                 ghostClass: 'ghost',
-                handle: '.drag-item'
+                handle: '.drag'
               }"
-              handle=".drag-item"
+              handle=".drag"
             >
-              <li v-for="(item, index) in widget.options.options" :key="index">
-                <el-checkbox :label="item.value" style="margin-right: 5px;">
-                  <el-input
-                    :style="{
-                      width: widget.options.showLabel ? '90px' : '180px'
-                    }"
-                    v-model="item.value"
-                    :disabled="
-                      widget.options.defaultValue.indexOf(item.value) !== -1
-                    "
-                  ></el-input>
+              <div
+                v-for="(item, index) in widget.options.options"
+                class="draggable-item"
+                :key="index"
+              >
+                <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
+                <el-checkbox :label="item.value"><span></span></el-checkbox>
+                <div class="content">
                   <el-input
-                    v-if="widget.options.showLabel"
-                    style="width:90px;"
+                    v-show="widget.options.showLabel"
                     v-model="item.label"
                   >
                   </el-input>
-                </el-checkbox>
-                <i
-                  class="drag-item"
-                  style="font-size: 16px;margin: 0 5px;cursor: move;"
-                  ><i class="iconfont icon-icon_bars"></i
-                ></i>
+                  <el-input v-model="item.value"></el-input>
+                </div>
                 <el-button
-                  style="padding: 2px;margin-left: 5px;"
+                  class="delete"
                   type="danger"
                   icon="el-icon-minus"
                   circle
@@ -138,11 +135,19 @@
                   "
                   @click="handleOptionsRemove(index)"
                 ></el-button>
-              </li>
+              </div>
             </draggable>
           </el-checkbox-group>
 
-          <div style="margin-left: 22px;">
+          <div
+            style="display: flex;align-items: center; justify-content: space-between;"
+          >
+            <el-switch
+              v-model="widget.options.showLabel"
+              active-text="显示标签"
+              inactive-text="隐藏标签"
+            >
+            </el-switch>
             <el-button type="text" @click="handleAddOption">添加选项</el-button>
           </div>
         </template>
@@ -150,7 +155,7 @@
 
       <el-form-item label="默认值">
         <el-input
-          :value="JSON.stringify(widget.options.defaultValue || [])"
+          :value="JSON.stringify(widget.options.defaultValue)"
           readonly
         ></el-input>
       </el-form-item>
@@ -194,4 +199,30 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.draggable-item {
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  .el-checkbox {
+    margin-right: 0;
+    padding-left: 10px;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    margin-right: 5px;
+    > div {
+      margin: 0 2px;
+    }
+  }
+  .drag {
+    font-size: 16px;
+    cursor: move;
+  }
+  .delete {
+    padding: 4px;
+  }
+}
+</style>

package/packages/FormMaking/custom/configs/color.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/date.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/descriptions.vue

@@ -0,0 +1,314 @@
+<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-input v-model="widget.options.labelWidth" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="标题排列">
+        <el-radio-group v-model="widget.options.textAlignLast">
+          <el-radio-button label="left">靠左</el-radio-button>
+          <el-radio-button label="center">居中</el-radio-button>
+          <el-radio-button label="right">靠右</el-radio-button>
+          <el-radio-button label="justify">两端</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="每行列数">
+        <el-input-number
+          v-model="widget.options.column"
+          controls-position="right"
+          :min="1"
+          :max="4"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="排列方向">
+        <el-radio-group v-model="widget.options.direction">
+          <el-radio-button label="vertical">纵向</el-radio-button>
+          <el-radio-button label="horizontal">横向</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="尺寸">
+        <el-radio-group v-model="widget.options.size">
+          <el-radio-button label="medium">medium</el-radio-button>
+          <el-radio-button label="small">small</el-radio-button>
+          <el-radio-button label="mini">mini</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="显示边框">
+        <el-switch v-model="widget.options.border"></el-switch>
+      </el-form-item>
+      <el-form-item label="自带冒号">
+        <el-switch v-model="widget.options.colon"></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 label-width="0">
+        <div 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
+              v-for="item in apiOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div v-else>
+          <draggable
+            :list="widget.options.defaultValue"
+            v-bind="{
+              group: { name: 'options' },
+              ghostClass: 'ghost',
+              handle: '.drag'
+            }"
+            handle=".drag"
+          >
+            <div
+              v-for="(item, index) in widget.options.defaultValue"
+              class="draggable-item"
+              :key="index"
+            >
+              <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
+              <div class="content">
+                <el-input v-model="item.label" placeholder="标题" clearable>
+                </el-input>
+                <el-input
+                  v-model="item.value"
+                  placeholder="内容"
+                  clearable
+                ></el-input>
+              </div>
+              <el-button
+                class="action"
+                type="primary"
+                size="mini"
+                icon="el-icon-set-up"
+                circle
+                plain
+                @click="handleDetailOption(index)"
+              ></el-button>
+
+              <el-button
+                class="action"
+                type="danger"
+                size="mini"
+                icon="el-icon-minus"
+                circle
+                plain
+                @click="handleRemoveOption(index)"
+              ></el-button>
+            </div>
+          </draggable>
+
+          <div style="margin-left: 22px;">
+            <el-button type="text" @click="handleAddOption">添加选项</el-button>
+          </div>
+        </div>
+      </el-form-item>
+    </el-collapse-item>
+
+    <th-dialog
+      v-model="dialog.show"
+      title="数据配置"
+      :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="box-header th-sticky_top">
+            <div>数据列表</div>
+            <el-button
+              type="text"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAddOption"
+              >添加</el-button
+            >
+          </div>
+          <div
+            v-for="(item, index) in widget.options.defaultValue"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active': dialog.data && dialog.data.label === item.label
+            }"
+            :key="index"
+            @click="dialog.data = item"
+          >
+            <div class="list-item-value">{{ item.label }}</div>
+            <el-popconfirm
+              :title="`是否确定删除 ${item.label}`"
+              confirm-button-text="删除"
+              confirm-button-type="danger"
+              @confirm="handleRemoveOption(index)"
+            >
+              <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.label"></el-input>
+            </el-form-item>
+            <el-form-item label="内容">
+              <el-input v-model="dialog.data.value"></el-input>
+            </el-form-item>
+            <el-form-item label="图标">
+              <th-icons v-model="dialog.data.icon"></th-icons>
+            </el-form-item>
+            <el-form-item label="标题宽度">
+              <el-input
+                v-model="dialog.data.options.style.label.width"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="数据类型">
+              <el-select
+                style="width:100%"
+                v-model="dialog.data.type"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in valueTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="dialog.data.type === 'date'" label="格式化">
+              <el-input v-model="dialog.data.options.format"></el-input>
+            </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 {
+      valueTypeOptions: [{ label: "文本", value: "text" }],
+      dialog: { show: false, data: "", index: "" }
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleAddOption() {
+      this.widget.options.defaultValue.push({
+        type: "text", //数据类型
+        label: `标题 ${this.widget.options.defaultValue.length + 1}`, //支持HTML标签
+        value: `内容 ${this.widget.options.defaultValue.length + 1}`, //支持HTML标签
+        icon: "", //标题左侧图标
+        options: {
+          showTitle: true, //显示标题
+          format: "", //type=date 时选填
+          //样式对象
+          style: {
+            label: { width: "", customStyle: "" }, // 标题样式
+            value: { customStyle: "" } // 内容样式
+          }
+        }
+      });
+    },
+    handleRemoveOption(index) {
+      this.widget.options.defaultValue.splice(index, 1);
+    },
+    handleRemoteChange(val) {
+      if (val) return;
+      this.widget.options.remote.api = "";
+    },
+    handleDetailOption(index) {
+      this.dialog = {
+        show: true,
+        data: this.widget.options.defaultValue[index],
+        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;
+  }
+}
+</style>

package/packages/FormMaking/custom/configs/divider.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/editor.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/filler.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/grid.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>
@@ -14,39 +14,32 @@
 
       <el-form-item label="列配置项">
         <draggable
-          tag="ul"
           :list="widget.options.columns"
           v-bind="{
             group: { name: 'options' },
             ghostClass: 'ghost',
-            handle: '.drag-item'
+            handle: '.drag'
           }"
-          handle=".drag-item"
+          handle=".drag"
         >
-          <li v-for="(item, index) in widget.options.columns" :key="index">
-            <el-input
-              placeholder="栅格值"
-              style="width: 100px;"
-              type="number"
-              v-model.number="item.span"
-            >
-            </el-input>
-            <i
-              class="drag-item"
-              style="font-size: 16px;margin: 0 5px;cursor: move;"
-              ><i class="iconfont icon-icon_bars"></i
-            ></i>
+          <div
+            v-for="(item, index) in widget.options.columns"
+            class="draggable-item"
+            :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-button
-              @click="handleOptionsRemove(index)"
+              class="delete"
               circle
               plain
               type="danger"
               icon="el-icon-minus"
-              style="padding: 3px;margin-left: 5px;"
+              @click="handleOptionsRemove(index)"
             ></el-button>
-          </li>
+          </div>
         </draggable>
-        <div style="margin-left: 22px;">
+        <div style="margin-left: 22px;text-align: right;">
           <el-button type="text" @click="handleAddOption">添加列</el-button>
         </div>
       </el-form-item>
@@ -108,4 +101,22 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.draggable-item {
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+
+  .el-input {
+    margin: 0 5px;
+  }
+
+  .drag {
+    font-size: 16px;
+    cursor: move;
+  }
+  .delete {
+    padding: 4px;
+  }
+}
+</style>

package/packages/FormMaking/custom/configs/image.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/input.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>