tianheng-ui 0.1.37 → 0.1.38

package/packages/TableMaking/widgetConfig.vue

@@ -1,49 +1,53 @@
 <template>
-  <div class="widgetConfig">
-    <div class="tabs">
+  <div class="tableWidgetConfig">
+    <div class="tabs ">
       <div
         v-for="(item, index) in tabsMenus"
         :key="index"
         class="tabs-item"
         :class="{ 'tabs-item__active': activeTab.value === item.value }"
-        @click="handleTabsSelect(item)"
+        @click="activeTab = item"
       >
         {{ item.title }}
       </div>
     </div>
-    <div v-if="activeTab.value === 0" class="fields">
-      <el-checkbox
-        v-model="searchField.isCheckAll"
-        :indeterminate="searchField.isIndeterminate"
-        @change="val => handleCheckAllChange(val, 'searchField')"
-        >全选</el-checkbox
-      >
-      <el-checkbox
-        v-for="item in fields"
-        :label="item.prop"
-        :key="`searchField-${item.prop}-${item.isSearch}`"
-        :checked="item.isSearch"
-        @change="val => handleCheckboxChange(val, 'searchField', item)"
-        >{{ item.label }}</el-checkbox
-      >
-    </div>
-    <div v-if="activeTab.value === 1" class="fields">
-      <el-checkbox
-        v-model="tableField.isCheckAll"
-        :indeterminate="tableField.isIndeterminate"
-        @change="val => handleCheckAllChange(val, 'tableField')"
-        >全选</el-checkbox
-      >
-      <el-checkbox
-        v-for="item in fields"
-        :label="item.prop"
-        :key="`tableField-${item.prop}-${item.isTable}`"
-        :checked="item.isTable"
-        @change="val => handleCheckboxChange(val, 'tableField', item)"
-        >{{ item.label }}</el-checkbox
-      >
+    <div v-if="activeTab.value === 'field'" class="configItem fieldsView">
+      <el-collapse v-model="collapseValue">
+        <el-collapse-item title="查询字段" name="group-fields_search">
+          <el-checkbox
+            v-model="searchField.isCheckAll"
+            :indeterminate="searchField.isIndeterminate"
+            @change="val => handleCheckAllChange(val, 'searchField')"
+            >全选</el-checkbox
+          >
+          <el-checkbox
+            v-for="item in fields"
+            :label="item.prop"
+            :key="`searchField-${item.prop}-${item.isSearch}`"
+            :checked="item.isSearch"
+            @change="val => handleCheckboxChange(val, 'searchField', item)"
+            >{{ item.label }}</el-checkbox
+          >
+        </el-collapse-item>
+        <el-collapse-item title="列表字段" name="group-fields_list">
+          <el-checkbox
+            v-model="tableField.isCheckAll"
+            :indeterminate="tableField.isIndeterminate"
+            @change="val => handleCheckAllChange(val, 'tableField')"
+            >全选</el-checkbox
+          >
+          <el-checkbox
+            v-for="item in fields"
+            :label="item.prop"
+            :key="`tableField-${item.prop}-${item.isTable}`"
+            :checked="item.isTable"
+            @change="val => handleCheckboxChange(val, 'tableField', item)"
+            >{{ item.label }}</el-checkbox
+          >
+        </el-collapse-item>
+      </el-collapse>
     </div>
-    <div v-if="activeTab.value === 2 && config.table" class="tableConfig">
+    <div v-if="activeTab.value === 'table' && config.table" class="configItem">
       <el-form
         :model="config"
         label-position="left"
@@ -174,9 +178,7 @@
                 ></el-input>
               </el-form-item>
               <el-form-item label="对齐方式">
-                <el-radio-group
-                  v-model="config.table.pageInfo.style.align"
-                >
+                <el-radio-group v-model="config.table.pageInfo.style.align">
                   <el-radio-button
                     v-for="item in pageInfoAlign"
                     :key="item.value"
@@ -247,6 +249,19 @@
               <i class="el-icon-set-up" @click="handleActionConfig(item)"></i>
             </div>
           </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </div>
+    <div v-if="activeTab.value === 'css' && config.table" class="configItem">
+      <el-form
+        :model="config"
+        label-position="left"
+        label-width="80px"
+        size="small"
+        :rules="formRules"
+        ref="formRef"
+      >
+        <el-collapse v-model="collapseValue">
           <el-collapse-item name="group-style_table">
             <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
@@ -254,7 +269,7 @@
                 <span>高度: height</span><br />
                 <!-- <span>自定义: 可自定义填写css样式</span><br /> -->
               </div>
-              <span style="color: #409EFF;">table 样式配置（电脑端）</span>
+              <span style="color: #409EFF;">table 样式（电脑端）</span>
             </el-tooltip>
             <el-form-item label="显示边框">
               <el-switch v-model="config.table.style.table.border"> </el-switch>
@@ -275,6 +290,26 @@
               ></el-input>
             </el-form-item>
           </el-collapse-item>
+          <el-collapse-item name="group-style_pageInfo">
+            <el-tooltip slot="title" effect="light" placement="top">
+              <div slot="content">
+                <span>外边框: margin</span><br />
+                <span>内边框: padding</span><br />
+                <span>自定义: 可自定义填写css样式</span><br />
+              </div>
+              <span style="color: #409EFF;">分页控件 样式（电脑端）</span>
+            </el-tooltip>
+          </el-collapse-item>
+          <el-collapse-item name="group-style_list">
+            <el-tooltip slot="title" effect="light" placement="top">
+              <div slot="content">
+                <span>外边框: margin</span><br />
+                <span>内边框: padding</span><br />
+                <span>自定义: 可自定义填写css样式</span><br />
+              </div>
+              <span style="color: #409EFF;">list 样式（移动端）</span>
+            </el-tooltip>
+          </el-collapse-item>
           <el-collapse-item name="group-style_cell">
             <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
@@ -283,7 +318,7 @@
                 <span>分割线: border-bottom</span><br />
                 <span>自定义: 可自定义填写css样式</span><br />
               </div>
-              <span style="color: #409EFF;">cell 样式配置（移动端）</span>
+              <span style="color: #409EFF;">cell 样式（移动端）</span>
             </el-tooltip>
             <el-form-item label="外边距">
               <el-input
@@ -326,7 +361,7 @@
                 <span>颜色: color</span><br />
                 <span>自定义: 可自定义填写css样式</span><br />
               </div>
-              <span style="color: #409EFF;">title 样式配置（移动端）</span>
+              <span style="color: #409EFF;">title 样式（移动端）</span>
             </el-tooltip>
             <el-form-item label="外边距">
               <el-input
@@ -383,7 +418,7 @@
                 <span>颜色: color</span><br />
                 <span>自定义: 可自定义填写css样式</span><br />
               </div>
-              <span style="color: #409EFF;">value 样式配置（移动端）</span>
+              <span style="color: #409EFF;">value 样式（移动端）</span>
             </el-tooltip>
             <el-form-item label="外边距">
               <el-input
@@ -576,11 +611,11 @@ export default {
   data() {
     return {
       tabsMenus: [
-        { title: "查询字段", value: 0 },
-        { title: "列表字段", value: 1 },
-        { title: "列表属性", value: 2 }
+        { title: "字段配置", value: "field" },
+        { title: "列表属性", value: "table" },
+        { title: "样式设置", value: "css" }
       ],
-      activeTab: { title: "列表属性", value: 2 },
+      activeTab: { title: "列表属性", value: "table" },
       fields: [],
       searchField: {
         isCheckAll: false,
@@ -674,9 +709,6 @@ export default {
           this.tableActiveFields.length !== this.fields.length
       };
     },
-    handleTabsSelect(val) {
-      this.activeTab = val;
-    },
     handleCheckAllChange(bool, action) {
       if (action === "searchField") {
         this.fields.forEach(item => {
@@ -769,7 +801,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.widgetConfig {
+.tableWidgetConfig {
   background-color: white;
   .tabs {
     position: sticky;
@@ -793,25 +825,14 @@ export default {
     }
   }
 
-  .fields {
-    height: calc(100% - 45px);
-    .fields-item {
-      padding: 0 10px;
-      height: 30px;
-      margin-right: 0;
-      line-height: 30px;
-    }
-
+  .fieldsView {
     .el-checkbox {
-      padding: 0 10px;
-      margin-right: 0;
       width: 100%;
       height: 30px;
       line-height: 30px;
     }
   }
-
-  .tableConfig {
+  .configItem {
     height: calc(100% - 45px);
 
     .collapse-title {
@@ -848,7 +869,7 @@ export default {
 </style>
 
 <style lang="scss">
-.tableConfig {
+.tableWidgetConfig {
   .el-collapse-item__header {
     padding: 0 10px;
     height: 40px;