tianheng-ui 0.0.21 → 0.0.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.21",
+  "version": "0.0.24",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/cell/index.vue

@@ -16,7 +16,7 @@
       <div
         v-if="title"
         class="th-cell-title"
-        :class="[titleClass, active ? titleActive : '', hover ? titleHover : 'title-color']"
+        :class="[titleClass, active ? titleActive : '', hover ? titleHover : '']"
         :style="titleStyle"
       >
         {{ title }}

package/packages/table/action.vue

@@ -1,29 +1,29 @@
 <template>
-  <div>
+  <div class="thTable-action" @click.stop>
     <template v-for="(item, index) in actions">
       <el-button
-        v-if="item.act_type === 'edit'"
+        v-if="item.act === 'edit'"
         :key="index"
-        :style="{ color: btnDisabled(item) ? '' : item.btn_color }"
-        :type="item.btn_type"
-        :icon="item.btn_icon"
+        :style="item.style"
+        :type="item.type"
+        :icon="item.icon"
         :disabled="btnDisabled(item)"
         @click="doEdit(item)"
-        >{{ item.btn_name }}</el-button
+        >{{ item.name }}</el-button
       >
       <el-button
-        v-else-if="item.act_type === 'look'"
+        v-else-if="item.act === 'look'"
         :key="index"
-        :style="{ color: btnDisabled(item) ? '' : item.btn_color }"
-        :type="item.btn_type"
-        :icon="item.btn_icon"
+        :style="item.style"
+        :type="item.type"
+        :icon="item.icon"
         :disabled="btnDisabled(item)"
         @click="doLook(item)"
-        >{{ item.btn_name }}</el-button
+        >{{ item.name }}</el-button
       >
       <el-popover
         class="action-popover"
-        v-else-if="item.act_type === 'delete'"
+        v-else-if="item.act === 'delete'"
         :key="index"
         v-model="pop"
         placement="top"
@@ -31,37 +31,62 @@
         width="180"
         trigger="manual"
       >
-        <p>{{ item.btn_delmsg || msg }}</p>
+        <p>{{ item.delmsg || msg }}</p>
         <div style="text-align: right; margin: 0">
           <el-button type="text" :disabled="loadingDel" @click="doCancel"
             >取消</el-button
           >
-          <el-button
-            :loading="loadingDel"
-            type="primary"
-            @click="doDelete(item)"
+          <el-button type="text" :loading="loadingDel" @click="doDelete(item)"
             >确定</el-button
           >
         </div>
         <el-button
-          :style="{ color: btnDisabled(item) ? '' : item.btn_color }"
+          :style="item.style"
           slot="reference"
           :disabled="loadingDel || btnDisabled(item)"
-          :type="item.btn_type"
-          :icon="item.btn_icon"
+          :type="item.type"
+          :icon="item.icon"
           @click="toDelete"
-          >{{ item.btn_name }}</el-button
+          >{{ item.name }}</el-button
         >
       </el-popover>
+      <el-dropdown
+        v-else-if="item.act === 'more'"
+        :key="index"
+        trigger="click"
+        @command="
+          (value) => {
+            doMore(value, index, item);
+          }
+        "
+      >
+        <el-button
+          :style="item.style"
+          :disabled="loadingDel || btnDisabled(item)"
+          :type="item.type"
+          :icon="item.icon"
+          >{{ item.name }}</el-button
+        >
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="(btnItem, btnIndex) in item.children"
+            :key="btnIndex"
+            :style="btnItem.style"
+            :command="btnItem.act"
+            :icon="btnItem.icon"
+            >{{ btnItem.name }}</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
       <el-button
         v-else
         :key="index"
-        :style="{ color: item.btn_color }"
-        :type="item.btn_type"
-        :icon="item.btn_icon"
+        :style="item.style"
+        :type="item.type"
+        :icon="item.icon"
         :disabled="btnDisabled(item)"
         @click="doEval(item)"
-        >{{ item.btn_name }}</el-button
+        >{{ item.name }}</el-button
       >
     </template>
   </div>
@@ -75,34 +100,34 @@ export default {
       type: Array,
       default: () => {
         return [];
-      }
+      },
     },
     scope: {
       type: Object | String,
     },
     permission: {
       type: Object,
-      required: false
+      required: false,
     },
     msg: {
       type: String,
-      default: "确定删除本条数据吗？"
-    }
+      default: "确定删除本条数据吗？",
+    },
   },
   data() {
     return {
       pop: false,
-      loadingDel: false
+      loadingDel: false,
     };
   },
   computed: {
     btnDisabled() {
       return (item) => {
-        if (item.btn_disabled instanceof Boolean) {
-          return item.btn_disabled
+        if (item.disabled instanceof Boolean) {
+          return item.disabled;
         }
-        if (item.btn_disabled instanceof Function) {
-          return item.btn_disabled(this.scope);
+        if (item.disabled instanceof Function) {
+          return item.disabled(this.scope);
         }
       };
     },
@@ -125,18 +150,38 @@ export default {
     },
     doDelete(item) {
       this.loadingDel = true;
-      const callback = bool => {
+      const callback = (bool) => {
         this.loadingDel = false;
         this.pop = !bool;
       };
       this.$emit("on-delete", item, callback);
-    }
-  }
+    },
+    doMore(value, index, item) {
+      for (let i = 0; i < item.children.length; i++) {
+        const element = item.children[i];
+        if (element.act === value) {
+          this.$emit("on-more", element);
+          break;
+        }
+      }
+    },
+  },
 };
 </script>
 
 <style lang="less">
-.el-button + .action-popover {
-  margin-left: 10px !important;
+.thTable-action {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .el-button + .el-button {
+    margin-left: 0px;
+  }
 }
+
+// .el-button + .action-popover {
+//   margin-left: 10px !important;
+// }
 </style>