tianheng-ui 0.1.35 → 0.1.37

package/packages/TableMaking/widgetConfig.vue

@@ -57,7 +57,7 @@
             <el-form-item required prop="table.fieldsType">
               <el-tooltip
                 slot="label"
-                effect="dark"
+                effect="light"
                 content="字段的配置方式"
                 placement="top"
               >
@@ -72,7 +72,7 @@
             ><el-form-item required prop="table.mounted.api">
               <el-tooltip
                 slot="label"
-                effect="dark"
+                effect="light"
                 content="列表初始化完成后，调用该接口获取列表数据"
                 placement="top"
               >
@@ -135,14 +135,75 @@
             <el-form-item label="开启分页">
               <el-switch v-model="config.table.pageInfo.show"> </el-switch>
             </el-form-item>
-            <el-form-item v-if="config.table.pageInfo.show" label="分页条数">
-              <el-radio-group v-model="config.table.pageInfo.options.pageSize">
-                <el-radio-button :label="20">20条</el-radio-button>
-                <el-radio-button :label="50">50条</el-radio-button>
-                <el-radio-button :label="100">100条</el-radio-button>
-                <el-radio-button :label="500">500条</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
+            <template v-if="config.table.pageInfo.show">
+              <el-form-item label="初始页码">
+                <el-input-number
+                  class="pageInfo-currentPage"
+                  v-model="config.table.pageInfo.options.currentPage"
+                  controls-position="right"
+                  :min="1"
+                ></el-input-number>
+              </el-form-item>
+              <el-form-item label="分页条数">
+                <el-radio-group
+                  v-model="config.table.pageInfo.options.pageSize"
+                >
+                  <el-radio-button
+                    v-for="size in config.table.pageInfo.options.sizes"
+                    :key="size"
+                    :label="size"
+                    >{{ size }}条</el-radio-button
+                  >
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip slot="label" effect="light" placement="top">
+                  <div slot="content">
+                    <div>组件布局，子组件名用逗号分隔。</div>
+                    <div v-for="item in pageInfoLayout" :key="item.value">
+                      {{ item.value }} : {{ item.label }}
+                    </div>
+                  </div>
+                  <span style="color: #409EFF;">组件布局</span>
+                </el-tooltip>
+                <el-input
+                  v-model="config.table.pageInfo.options.layout"
+                  type="textarea"
+                  :rows="2"
+                  placeholder="请输入"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="对齐方式">
+                <el-radio-group
+                  v-model="config.table.pageInfo.style.align"
+                >
+                  <el-radio-button
+                    v-for="item in pageInfoAlign"
+                    :key="item.value"
+                    :label="item.value"
+                    >{{ item.label }}</el-radio-button
+                  >
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="小型样式">
+                <el-switch v-model="config.table.pageInfo.style.small">
+                </el-switch>
+              </el-form-item>
+              <el-form-item label="背景色">
+                <el-switch v-model="config.table.pageInfo.style.background">
+                </el-switch>
+              </el-form-item>
+              <el-form-item label="是否禁用">
+                <el-switch v-model="config.table.pageInfo.style.disabled">
+                </el-switch>
+              </el-form-item>
+              <el-form-item label="一页隐藏">
+                <el-switch
+                  v-model="config.table.pageInfo.style.hideOnSinglePage"
+                >
+                </el-switch>
+              </el-form-item>
+            </template>
           </el-collapse-item>
           <el-collapse-item title="提示语配置" name="group-hint">
             <el-form-item label="空数据">
@@ -187,7 +248,7 @@
             </div>
           </el-collapse-item>
           <el-collapse-item name="group-style_table">
-            <el-tooltip slot="title" effect="dark" placement="top">
+            <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
                 <span>显示边框: border</span><br />
                 <span>高度: height</span><br />
@@ -201,7 +262,7 @@
             <el-form-item>
               <el-tooltip
                 slot="label"
-                effect="dark"
+                effect="light"
                 content="Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。"
                 placement="top"
               >
@@ -215,7 +276,7 @@
             </el-form-item>
           </el-collapse-item>
           <el-collapse-item name="group-style_cell">
-            <el-tooltip slot="title" effect="dark" placement="top">
+            <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
                 <span>外边框: margin</span><br />
                 <span>内边框: padding</span><br />
@@ -256,7 +317,7 @@
             </el-form-item>
           </el-collapse-item>
           <el-collapse-item name="group-style_title">
-            <el-tooltip slot="title" effect="dark" placement="top">
+            <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
                 <span>外边框: margin</span><br />
                 <span>内边框: padding</span><br />
@@ -313,7 +374,7 @@
             </el-form-item>
           </el-collapse-item>
           <el-collapse-item name="group-style_value">
-            <el-tooltip slot="title" effect="dark" placement="top">
+            <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
                 <span>外边框: margin</span><br />
                 <span>内边框: padding</span><br />
@@ -443,7 +504,7 @@
             <el-form-item>
               <el-tooltip
                 slot="label"
-                effect="dark"
+                effect="light"
                 content="按钮点击事件绑定的弹窗表单"
                 placement="top"
               >
@@ -468,7 +529,7 @@
             <el-form-item>
               <el-tooltip
                 slot="label"
-                effect="dark"
+                effect="light"
                 content="弹窗表单的确认事件绑定的接口，如果关联表单中有配置按钮的提交请求，请勿重复关联"
                 placement="top"
               >
@@ -477,7 +538,6 @@
               <el-select
                 v-model="dialog.data.api"
                 style="width:100%"
-                value-key="id"
                 clearable
                 placeholder="如关联表单中已配置接口，请勿重复关联"
                 no-data-text="暂无接口，请前往【接口模块】创建"
@@ -486,7 +546,7 @@
                   v-for="item in apiOptions"
                   :key="item.id"
                   :label="item.label"
-                  :value="item"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>
@@ -499,8 +559,10 @@
 </template>
 
 <script>
+import Draggable from "vuedraggable";
 import { deepClone } from "../FormMaking/util";
 export default {
+  components: { Draggable },
   props: {
     config: {
       type: Object,
@@ -536,6 +598,19 @@ export default {
         "group-network",
         "group-button"
       ],
+      pageInfoLayout: [
+        { label: "总条数", value: "total" },
+        { label: "分页条数", value: "sizes" },
+        { label: "上一页", value: "prev" },
+        { label: "页码", value: "pager" },
+        { label: "下一页", value: "next" },
+        { label: "跳转", value: "jumper" }
+      ],
+      pageInfoAlign: [
+        { label: "左对齐", value: "left" },
+        { label: "居中对齐", value: "center" },
+        { label: "右对齐", value: "right" }
+      ],
       formRules: {
         "table.fieldsType": [
           { required: true, message: "请选择字段类型", trigger: "change" }
@@ -786,5 +861,12 @@ export default {
   .el-radio-button__inner {
     padding: 7px;
   }
+
+  .pageInfo-currentPage {
+    width: 100%;
+    .el-input__inner {
+      text-align: left;
+    }
+  }
 }
 </style>

package/packages/TableMaking/widgetTable.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="widgetTable">
     <div class="table-title">查询字段</div>
-    <div class="tableList searchList">
+    <div
+      class="tableList searchList"
+      v-loading="!config.search.show"
+      element-loading-text="已关闭查询区"
+      :element-loading-spinner="elementLoading.spinner"
+      :element-loading-background="elementLoading.background"
+    >
       <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
@@ -73,7 +79,7 @@
       <div v-else class="search-content"></div>
     </div>
     <div class="table-title">列表字段</div>
-    <div class="tableList" style="height: calc(100% - 240px);">
+    <div class="tableList" style="height: calc(100% - 340px);">
       <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
@@ -132,6 +138,29 @@
       </draggable>
     </div>
 
+    <div class="table-title">分页控件</div>
+    <div
+      class="tableList pageInfo"
+      v-loading="!config.table.pageInfo.show"
+      element-loading-text="已关闭分页"
+      :element-loading-spinner="elementLoading.spinner"
+      :element-loading-background="elementLoading.background"
+    >
+      <el-pagination
+        :style="{ 'text-align': config.table.pageInfo.style.align }"
+        :current-page="config.table.pageInfo.options.currentPage"
+        :small="config.table.pageInfo.style.small"
+        :background="config.table.pageInfo.style.background"
+        :disabled="config.table.pageInfo.style.disabled"
+        :hide-on-single-page="config.table.pageInfo.style.hideOnSinglePage"
+        :page-size="config.table.pageInfo.options.pageSize"
+        :page-sizes="config.table.pageInfo.options.sizes"
+        :layout="config.table.pageInfo.options.layout"
+        :total="1000"
+      >
+      </el-pagination>
+    </div>
+
     <th-dialog
       v-model="dialog.visible"
       :title="dialog.title"
@@ -163,7 +192,11 @@ export default {
         { label: "右对齐", value: "right" }
       ],
       dialog: { visible: false, title: "", data: null },
-      codeEditorValue: ""
+      codeEditorValue: "",
+      elementLoading: {
+        spinner: "el-icon-warning",
+        background: "rgba(0, 0, 0, 0.6)"
+      }
     };
   },
   mounted() {},
@@ -203,7 +236,7 @@ export default {
     }
   }
   .tableList {
-    margin-top: 10px;
+    margin: 10px 0;
     border: 1px solid #dcdfe6;
 
     .table-header {
@@ -252,6 +285,11 @@ export default {
     }
   }
 
+  .pageInfo {
+    padding: 10px 0;
+    height: 52px;
+  }
+
   // .table-content:hover::-webkit-scrollbar-thumb {
   //   background-color: rgba(69, 90, 100, 0.2);
   // }