tianheng-ui 0.1.37 → 0.1.39

package/packages/FormMaking/WidgetTools.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widgetTools">
+  <div class="widgetTools th-sticky_top">
     <div class="left">
       <slot> </slot>
     </div>
@@ -215,6 +215,7 @@
       title="获取数据"
       :modal-append-to-body="false"
       :showFooter="false"
+      :z-index="99999"
       @on-close="dialogResultData.show = false"
       @on-fullscreen="$refs.dataCodeEditor.resize()"
     >
@@ -505,7 +506,7 @@ export default {
   width: 100%;
   height: 45px;
   padding: 0 15px;
-  border-bottom: solid 2px #e4e7ed;
+  z-index: 999;
 
   .left {
   }

package/packages/FormMaking/index.vue

@@ -1,181 +1,150 @@
 <template>
-  <div class="formMaking">
-    <el-container
-      v-if="Object.keys(formConfig.config).length"
-      class="container-box"
+  <div class="th-formMaking th-flex_box">
+    <!-- 左侧字段区 -->
+    <div
+      class="formMaking-fields th-flex_aside th-is_border_right"
+      style="width:250px"
     >
-      <el-main>
-        <el-container>
-          <!-- 左侧字段区 -->
-          <el-aside width="250px">
-            <div class="components-list">
-              <div v-if="basicFields.length">
-                <div class="widget-cate">基础字段</div>
-                <draggable
-                  tag="ul"
-                  :list="getBasicComponents"
-                  v-bind="{
-                    group: { name: 'people', pull: 'clone', put: false },
-                    sort: false,
-                    ghostClass: 'ghost'
-                  }"
-                >
-                  <li
-                    v-for="(item, index) in getBasicComponents"
-                    class="form-edit-widget-label"
-                    :class="{
-                      'no-put': item.type == 'divider',
-                      [item.type]: true
-                    }"
-                    :key="index"
-                  >
-                    <a>
-                      <i class="icon iconfont" :class="item.icon"></i>
-                      <span>{{ item.name }}</span>
-                    </a>
-                  </li>
-                </draggable>
-              </div>
-
-              <div v-if="advanceFields.length">
-                <div class="widget-cate">高级字段</div>
-                <draggable
-                  tag="ul"
-                  :list="getAdvanceComponents"
-                  v-bind="{
-                    group: { name: 'people', pull: 'clone', put: false },
-                    sort: false,
-                    ghostClass: 'ghost'
-                  }"
-                >
-                  <li
-                    v-for="(item, index) in getAdvanceComponents"
-                    class="form-edit-widget-label"
-                    :class="{
-                      'no-put': ['table', 'tableH5', 'tabs'].includes(
-                        item.type
-                      ),
-                      [item.type]: true
-                    }"
-                    :key="index"
-                  >
-                    <a>
-                      <i class="icon iconfont" :class="item.icon"></i>
-                      <span>{{ item.name }}</span>
-                    </a>
-                  </li>
-                </draggable>
-              </div>
-
-              <div v-if="layoutFields.length">
-                <div class="widget-cate">布局字段</div>
-                <draggable
-                  tag="ul"
-                  :list="getLayoutComponents"
-                  v-bind="{
-                    group: { name: 'people', pull: 'clone', put: false },
-                    sort: false,
-                    ghostClass: 'ghost'
-                  }"
-                >
-                  <li
-                    v-for="(item, index) in getLayoutComponents"
-                    class="form-edit-widget-label"
-                    :class="{
-                      'no-put': ['alliance'].includes(item.type),
-                      [item.type]: true
-                    }"
-                    :key="index"
-                  >
-                    <a>
-                      <i class="icon iconfont" :class="item.icon"></i>
-                      <span>{{ item.name }}</span>
-                    </a>
-                  </li>
-                </draggable>
-              </div>
-            </div>
-          </el-aside>
-
-          <!-- 中间视图区 -->
-          <el-container class="center-container" direction="vertical">
-            <!-- 操作区 -->
-            <widget-tools
-              :baseConfig="baseConfig"
-              :permissions="permissions"
-              :client.sync="client"
-              :basicComponents="basicComponents"
-              :layoutComponents="layoutComponents"
-              :formData="formConfig"
-              :formValue="widgetValue"
-              :oauthConfig="oauthConfig"
-              :apiOptions="apiOptions"
-              @click="handleWidgetToolsChange"
+      <div class="fields-header th-sticky_top">组件列表</div>
+      <el-collapse v-model="collapseValue">
+        <el-collapse-item
+          v-if="basicFields.length"
+          title="基础组件"
+          name="group-basic"
+        >
+          <draggable
+            tag="ul"
+            :list="getBasicComponents"
+            v-bind="{
+              group: { name: 'people', pull: 'clone', put: false },
+              sort: false,
+              ghostClass: 'ghost'
+            }"
+          >
+            <li
+              v-for="(item, index) in getBasicComponents"
+              class="fields-label"
+              :class="{
+                'no-put': item.type == 'divider',
+                [item.type]: true
+              }"
+              :key="index"
+            >
+              <a>
+                <i class="icon iconfont" :class="item.icon"></i>
+                <span>{{ item.name }}</span>
+              </a>
+            </li>
+          </draggable>
+        </el-collapse-item>
+        <el-collapse-item
+          v-if="advanceFields.length"
+          title="高级组件"
+          name="group-advance"
+        >
+          <draggable
+            tag="ul"
+            :list="getAdvanceComponents"
+            v-bind="{
+              group: { name: 'people', pull: 'clone', put: false },
+              sort: false,
+              ghostClass: 'ghost'
+            }"
+          >
+            <li
+              v-for="(item, index) in getAdvanceComponents"
+              class="fields-label"
+              :class="{
+                'no-put': ['table', 'tableH5', 'tabs'].includes(item.type),
+                [item.type]: true
+              }"
+              :key="index"
             >
-              <slot name="action"></slot>
-            </widget-tools>
+              <a>
+                <i class="icon iconfont" :class="item.icon"></i>
+                <span>{{ item.name }}</span>
+              </a>
+            </li>
+          </draggable>
+        </el-collapse-item>
+        <el-collapse-item
+          v-if="layoutFields.length"
+          title="布局组件"
+          name="group-layout"
+        >
+          <draggable
+            tag="ul"
+            :list="getLayoutComponents"
+            v-bind="{
+              group: { name: 'people', pull: 'clone', put: false },
+              sort: false,
+              ghostClass: 'ghost'
+            }"
+          >
+            <li
+              v-for="(item, index) in getLayoutComponents"
+              class="fields-label"
+              :class="{
+                'no-put': ['alliance'].includes(item.type),
+                [item.type]: true
+              }"
+              :key="index"
+            >
+              <a>
+                <i class="icon iconfont" :class="item.icon"></i>
+                <span>{{ item.name }}</span>
+              </a>
+            </li>
+          </draggable>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+    <!-- 中间视图区 -->
+    <div class="formMaking-drawing th-fiex_content">
+      <!-- 操作区 -->
+      <widget-tools
+        :baseConfig="baseConfig"
+        :permissions="permissions"
+        :basicComponents="basicComponents"
+        :layoutComponents="layoutComponents"
+        :formData="formConfig"
+        :formValue="widgetValue"
+        :oauthConfig="oauthConfig"
+        :apiOptions="apiOptions"
+        @click="handleWidgetToolsChange"
+      >
+        <slot name="action"></slot>
+      </widget-tools>
 
-            <!-- 工作区 -->
-            <el-main>
-              <widget-form
-                ref="widgetForm"
-                :data="formConfig"
-                :select.sync="widgetFormSelect"
-                :client="client"
-              >
-              </widget-form>
-            </el-main>
-          </el-container>
+      <!-- 工作区 -->
+      <widget-form
+        :data="formConfig"
+        :select.sync="widgetFormSelect"
+        ref="widgetForm"
+      >
+      </widget-form>
+    </div>
 
-          <!-- 右侧配置区 -->
-          <el-aside class="config-container">
-            <el-container>
-              <el-header height="45px">
-                <div
-                  class="config-tab"
-                  :class="{ active: configTab == 'widget' }"
-                  @click="handleConfigSelect('widget')"
-                >
-                  字段属性
-                </div>
-                <div
-                  class="config-tab"
-                  :class="{ active: configTab == 'form' }"
-                  @click="handleConfigSelect('form')"
-                >
-                  表单属性
-                </div>
-              </el-header>
-              <el-main class="config-container-content">
-                <widget-config
-                  v-if="configTab == 'widget'"
-                  :data="widgetFormSelect"
-                  :config="formConfig.config"
-                  :fields="fields"
-                  :apiConfig="apiConfig"
-                  @update="handleWidgetConfigUpdate"
-                >
-                </widget-config>
-                <form-config
-                  v-if="configTab == 'form'"
-                  :config="formConfig.config"
-                  :apiConfig="apiConfig"
-                  @fieldsChange="handleFieldsChange"
-                  ref="formConfigRef"
-                ></form-config>
-              </el-main>
-            </el-container>
-          </el-aside>
-        </el-container>
-      </el-main>
-    </el-container>
+    <!-- 右侧配置区 -->
+    <div class="th-flex_aside th-is_border_left" style="width:300px">
+      <widget-config
+        :data="widgetFormSelect"
+        :config="formConfig.config"
+        :fields="fields"
+        :apiConfig="apiConfig"
+        ref="configRef"
+        @fieldsChange="handleFieldsChange"
+        @update="handleWidgetConfigUpdate"
+      >
+      </widget-config>
+    </div>
   </div>
 </template>
 
 <script>
 import Draggable from "vuedraggable";
 import WidgetConfig from "./WidgetConfig";
-import FormConfig from "./FormConfig";
 import WidgetTools from "./WidgetTools";
 import WidgetForm from "./WidgetForm";
 import GenerateForm from "./GenerateForm";
@@ -193,7 +162,6 @@ export default {
   components: {
     Draggable,
     WidgetConfig,
-    FormConfig,
     WidgetTools,
     WidgetForm,
     GenerateForm
@@ -261,9 +229,9 @@ export default {
       widgetFormSelect: {},
       widgetValue: {},
       configTab: "form",
-      client: "monitor",
       fields: [],
-      apiConfig: {}
+      apiConfig: {},
+      collapseValue: ["group-basic", "group-advance", "group-layout"]
     };
   },
   computed: {
@@ -358,12 +326,6 @@ export default {
     },
     handleWidgetToolsChange(val, data) {
       switch (val) {
-        case "mobile":
-          this.client = val;
-          break;
-        case "monitor":
-          this.client = val;
-          break;
         case "import-excel":
         case "import-json":
         case "import-template":
@@ -372,7 +334,6 @@ export default {
         case "clear":
           this.handleClear();
           break;
-
         default:
           break;
       }
@@ -398,9 +359,10 @@ export default {
       this.handleClear();
     },
     getConfig() {
-      if (this.$refs.formConfigRef) {
-        return new Promise((resolve, reject) =>
-          this.$refs.formConfigRef.formValidate().then(res => {
+      return new Promise((resolve, reject) =>
+        this.$refs.configRef
+          .formValidate()
+          .then(res => {
             if (res) {
               const data = deepClone(this.formConfig);
               data.config.network = this.apiConfig;
@@ -409,29 +371,27 @@ export default {
               reject();
             }
           })
-        );
-      } else {
-        return new Promise((resolve, reject) => {
-          if (!this.formConfig.config.fieldsType) {
-            this.$message.warning("请选择字段类型");
-            return reject();
-          }
-          if (
-            this.formConfig.config.fieldsType === "fieldsApi" &&
-            !this.formConfig.config.fieldsApi 
-          ) {
-            this.$message.warning("请选择字段接口");
-            return reject();
-          }
-          if (!this.formConfig.config.title) {
-            this.$message.warning("请填写表单标题");
-            return reject();
-          }
-          const data = deepClone(this.formConfig);
-          data.config.network = this.apiConfig;
-          resolve(data);
-        });
-      }
+          .catch(err => {
+            if (!this.formConfig.config.fieldsType) {
+              this.$message.warning("请选择字段类型");
+              return reject();
+            }
+            if (
+              this.formConfig.config.fieldsType === "fieldsApi" &&
+              !this.formConfig.config.fieldsApi
+            ) {
+              this.$message.warning("请选择字段接口");
+              return reject();
+            }
+            if (!this.formConfig.config.title) {
+              this.$message.warning("请填写表单标题");
+              return reject();
+            }
+            const data = deepClone(this.formConfig);
+            data.config.network = this.apiConfig;
+            resolve(data);
+          })
+      );
     },
     getHtml() {
       return generateCode(JSON.stringify(this.formConfig));
@@ -448,3 +408,86 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+$primary-color: #409eff;
+$primary-background-color: #ecf5ff;
+.th-formMaking {
+  height: 100%;
+  background-color: white;
+  border: 1px solid #dcdfe6;
+
+  .formMaking-fields {
+    .fields-header {
+      display: flex;
+      align-items: center;
+      height: 45px;
+      padding: 0 15px;
+    }
+    ul {
+      position: relative;
+      overflow: hidden;
+      padding: 5px;
+      margin: 0;
+    }
+    .fields-label {
+      margin: 0 3px;
+      width: calc(50% - 6px);
+      line-height: 26px;
+      font-size: 12px;
+      color: #333;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border: 1px solid #f4f6fc;
+      box-sizing: border-box;
+      transition: 0.25s;
+
+      &:hover {
+        color: $primary-color !important;
+        border: 1px dashed $primary-color;
+
+        a {
+          color: $primary-color !important;
+        }
+      }
+
+      & > a {
+        color: #333;
+        display: block;
+        cursor: move;
+        background: #f4f6fc;
+        border: 1px solid #f4f6fc;
+        transition: 0.25s;
+
+        .icon {
+          margin-right: 6px;
+          margin-left: 8px;
+          font-size: 14px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        span {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .formMaking-drawing {
+  }
+}
+</style>
+
+<style lang="scss">
+.formMaking-fields {
+  .el-collapse-item__header {
+    padding: 0 10px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #f5f7f9;
+  }
+}
+</style>