tianheng-ui 0.0.2 → 0.0.3

package/src/component/icons/index.vue

@@ -0,0 +1,360 @@
+<template>
+  <div>
+    <el-popover
+      placement="bottom-start"
+      title="Element图标库"
+      :width="width || 400"
+      trigger="click"
+    >
+      <el-input
+        slot="reference"
+        :value="value"
+        placeholder="请选择图标"
+        clearable
+        @clear="handleInputClear"
+      >
+        <div v-if="value" class="input-prefix" slot="prefix">
+          <i :class="value" class="icon"> </i>
+        </div>
+      </el-input>
+
+      <div class="th-icons">
+        <i
+          class="icon"
+          v-for="(icon, index) in icons"
+          :key="index"
+          :class="icon"
+          @click="handleIconClick(icon)"
+        ></i>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'ThIcons',
+  props: ["value", "width"],
+  data() {
+    return {
+      icons: [
+        "el-icon-platform-eleme",
+        "el-icon-eleme",
+        "el-icon-delete-solid",
+        "el-icon-delete",
+        "el-icon-s-tools",
+        "el-icon-setting",
+        "el-icon-user-solid",
+        "el-icon-user",
+        "el-icon-phone",
+        "el-icon-phone-outline",
+        "el-icon-more",
+        "el-icon-more-outline",
+        "el-icon-star-on",
+        "el-icon-star-off",
+        "el-icon-s-goods",
+        "el-icon-goods",
+        "el-icon-warning",
+        "el-icon-warning-outline",
+        "el-icon-question",
+        "el-icon-info",
+        "el-icon-remove",
+        "el-icon-circle-plus",
+        "el-icon-success",
+        "el-icon-error",
+        "el-icon-zoom-in",
+        "el-icon-zoom-out",
+        "el-icon-remove-outline",
+        "el-icon-circle-plus-outline",
+        "el-icon-circle-check",
+        "el-icon-circle-close",
+        "el-icon-s-help",
+        "el-icon-help",
+        "el-icon-minus",
+        "el-icon-plus",
+        "el-icon-check",
+        "el-icon-close",
+        "el-icon-picture",
+        "el-icon-picture-outline",
+        "el-icon-picture-outline-round",
+        "el-icon-upload",
+        "el-icon-upload2",
+        "el-icon-download",
+        "el-icon-camera-solid",
+        "el-icon-camera",
+        "el-icon-video-camera-solid",
+        "el-icon-video-camera",
+        "el-icon-message-solid",
+        "el-icon-bell",
+        "el-icon-s-cooperation",
+        "el-icon-s-order",
+        "el-icon-s-platform",
+        "el-icon-s-fold",
+        "el-icon-s-unfold",
+        "el-icon-s-operation",
+        "el-icon-s-promotion",
+        "el-icon-s-home",
+        "el-icon-s-release",
+        "el-icon-s-ticket",
+        "el-icon-s-management",
+        "el-icon-s-open",
+        "el-icon-s-shop",
+        "el-icon-s-marketing",
+        "el-icon-s-flag",
+        "el-icon-s-comment",
+        "el-icon-s-finance",
+        "el-icon-s-claim",
+        "el-icon-s-custom",
+        "el-icon-s-opportunity",
+        "el-icon-s-data",
+        "el-icon-s-check",
+        "el-icon-s-grid",
+        "el-icon-menu",
+        "el-icon-share",
+        "el-icon-d-caret",
+        "el-icon-caret-left",
+        "el-icon-caret-right",
+        "el-icon-caret-bottom",
+        "el-icon-caret-top",
+        "el-icon-bottom-left",
+        "el-icon-bottom-right",
+        "el-icon-back",
+        "el-icon-right",
+        "el-icon-bottom",
+        "el-icon-top",
+        "el-icon-top-left",
+        "el-icon-top-right",
+        "el-icon-arrow-left",
+        "el-icon-arrow-right",
+        "el-icon-arrow-down",
+        "el-icon-arrow-up",
+        "el-icon-d-arrow-left",
+        "el-icon-d-arrow-right",
+        "el-icon-video-pause",
+        "el-icon-video-play",
+        "el-icon-refresh",
+        "el-icon-refresh-right",
+        "el-icon-refresh-left",
+        "el-icon-finished",
+        "el-icon-sort",
+        "el-icon-sort-up",
+        "el-icon-sort-down",
+        "el-icon-rank",
+        "el-icon-loading",
+        "el-icon-view",
+        "el-icon-c-scale-to-original",
+        "el-icon-date",
+        "el-icon-edit",
+        "el-icon-edit-outline",
+        "el-icon-folder",
+        "el-icon-folder-opened",
+        "el-icon-folder-add",
+        "el-icon-folder-remove",
+        "el-icon-folder-delete",
+        "el-icon-folder-checked",
+        "el-icon-tickets",
+        "el-icon-document-remove",
+        "el-icon-document-delete",
+        "el-icon-document-copy",
+        "el-icon-document-checked",
+        "el-icon-document",
+        "el-icon-document-add",
+        "el-icon-printer",
+        "el-icon-paperclip",
+        "el-icon-takeaway-box",
+        "el-icon-search",
+        "el-icon-monitor",
+        "el-icon-attract",
+        "el-icon-mobile",
+        "el-icon-scissors",
+        "el-icon-umbrella",
+        "el-icon-headset",
+        "el-icon-brush",
+        "el-icon-mouse",
+        "el-icon-coordinate",
+        "el-icon-magic-stick",
+        "el-icon-reading",
+        "el-icon-data-line",
+        "el-icon-data-board",
+        "el-icon-pie-chart",
+        "el-icon-data-analysis",
+        "el-icon-collection-tag",
+        "el-icon-film",
+        "el-icon-suitcase",
+        "el-icon-suitcase-1",
+        "el-icon-receiving",
+        "el-icon-collection",
+        "el-icon-files",
+        "el-icon-notebook-1",
+        "el-icon-notebook-2",
+        "el-icon-toilet-paper",
+        "el-icon-office-building",
+        "el-icon-school",
+        "el-icon-table-lamp",
+        "el-icon-house",
+        "el-icon-no-smoking",
+        "el-icon-smoking",
+        "el-icon-shopping-cart-full",
+        "el-icon-shopping-cart-1",
+        "el-icon-shopping-cart-2",
+        "el-icon-shopping-bag-1",
+        "el-icon-shopping-bag-2",
+        "el-icon-sold-out",
+        "el-icon-sell",
+        "el-icon-present",
+        "el-icon-box",
+        "el-icon-bank-card",
+        "el-icon-money",
+        "el-icon-coin",
+        "el-icon-wallet",
+        "el-icon-discount",
+        "el-icon-price-tag",
+        "el-icon-news",
+        "el-icon-guide",
+        "el-icon-male",
+        "el-icon-female",
+        "el-icon-thumb",
+        "el-icon-cpu",
+        "el-icon-link",
+        "el-icon-connection",
+        "el-icon-open",
+        "el-icon-turn-off",
+        "el-icon-set-up",
+        "el-icon-chat-round",
+        "el-icon-chat-line-round",
+        "el-icon-chat-square",
+        "el-icon-chat-dot-round",
+        "el-icon-chat-dot-square",
+        "el-icon-chat-line-square",
+        "el-icon-message",
+        "el-icon-postcard",
+        "el-icon-position",
+        "el-icon-turn-off-microphone",
+        "el-icon-microphone",
+        "el-icon-close-notification",
+        "el-icon-bangzhu",
+        "el-icon-time",
+        "el-icon-odometer",
+        "el-icon-crop",
+        "el-icon-aim",
+        "el-icon-switch-button",
+        "el-icon-full-screen",
+        "el-icon-copy-document",
+        "el-icon-mic",
+        "el-icon-stopwatch",
+        "el-icon-medal-1",
+        "el-icon-medal",
+        "el-icon-trophy",
+        "el-icon-trophy-1",
+        "el-icon-first-aid-kit",
+        "el-icon-discover",
+        "el-icon-place",
+        "el-icon-location",
+        "el-icon-location-outline",
+        "el-icon-location-information",
+        "el-icon-add-location",
+        "el-icon-delete-location",
+        "el-icon-map-location",
+        "el-icon-alarm-clock",
+        "el-icon-timer",
+        "el-icon-watch-1",
+        "el-icon-watch",
+        "el-icon-lock",
+        "el-icon-unlock",
+        "el-icon-key",
+        "el-icon-service",
+        "el-icon-mobile-phone",
+        "el-icon-bicycle",
+        "el-icon-truck",
+        "el-icon-ship",
+        "el-icon-basketball",
+        "el-icon-football",
+        "el-icon-soccer",
+        "el-icon-baseball",
+        "el-icon-wind-power",
+        "el-icon-light-rain",
+        "el-icon-lightning",
+        "el-icon-heavy-rain",
+        "el-icon-sunrise",
+        "el-icon-sunrise-1",
+        "el-icon-sunset",
+        "el-icon-sunny",
+        "el-icon-cloudy",
+        "el-icon-partly-cloudy",
+        "el-icon-cloudy-and-sunny",
+        "el-icon-moon",
+        "el-icon-moon-night",
+        "el-icon-dish",
+        "el-icon-dish-1",
+        "el-icon-food",
+        "el-icon-chicken",
+        "el-icon-fork-spoon",
+        "el-icon-knife-fork",
+        "el-icon-burger",
+        "el-icon-tableware",
+        "el-icon-sugar",
+        "el-icon-dessert",
+        "el-icon-ice-cream",
+        "el-icon-hot-water",
+        "el-icon-water-cup",
+        "el-icon-coffee-cup",
+        "el-icon-cold-drink",
+        "el-icon-goblet",
+        "el-icon-goblet-full",
+        "el-icon-goblet-square",
+        "el-icon-goblet-square-full",
+        "el-icon-refrigerator",
+        "el-icon-grape",
+        "el-icon-watermelon",
+        "el-icon-cherry",
+        "el-icon-apple",
+        "el-icon-pear",
+        "el-icon-orange",
+        "el-icon-coffee",
+        "el-icon-ice-tea",
+        "el-icon-ice-drink",
+        "el-icon-milk-tea",
+        "el-icon-potato-strips",
+        "el-icon-lollipop",
+        "el-icon-ice-cream-square",
+        "el-icon-ice-cream-round"
+      ]
+    };
+  },
+  created() {},
+  methods: {
+    handleIconClick(icon) {
+      this.$emit("input", icon);
+    },
+    handleInputClear() {
+      this.$emit("input", "");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.input-prefix {
+  height: 100%;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  .icon {
+    font-size: 20px;
+  }
+}
+.th-icons {
+  height: 300px;
+  overflow-y: scroll;
+  .icon {
+    padding: 8px;
+    font-size: 20px;
+    border-radius: 2px;
+  }
+  .icon:hover {
+    cursor: pointer;
+    background-color: #f2f2f2;
+    // transition: .3s;
+  }
+}
+</style>

package/src/component/table/action.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <template v-for="(item, index) in actions">
+      <el-button
+        v-if="item.act_type === 'edit'"
+        :key="index"
+        :style="{ color: item.btn_disabled ? '' : item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doEdit(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-else-if="item.act_type === 'look'"
+        :key="index"
+        :style="{ color: item.btn_disabled ? '' : item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doLook(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-popover
+        class="action-popover"
+        v-else-if="item.act_type === 'delete'"
+        :key="index"
+        v-model="pop"
+        placement="top"
+        title=""
+        width="180"
+        trigger="manual"
+      >
+        <p>{{ item.btn_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
+          >
+        </div>
+        <el-button
+          :style="{ color: item.btn_disabled ? '' : item.btn_color }"
+          slot="reference"
+          :disabled="loadingDel || item.btn_disabled"
+          :type="item.btn_type"
+          :icon="item.btn_icon"
+          @click="toDelete"
+          >{{ item.btn_name }}</el-button
+        >
+      </el-popover>
+      <el-button
+        v-else
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doEval(item)"
+        >{{ item.btn_name }}</el-button
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    actions: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    permission: {
+      type: Object,
+      required: false,
+    },
+    msg: {
+      type: String,
+      default: "确定删除本条数据吗？",
+    },
+  },
+  data() {
+    return {
+      pop: false,
+      loadingDel: false,
+    };
+  },
+  methods: {
+    toDelete() {
+      this.pop = true;
+    },
+    doCancel() {
+      this.pop = false;
+    },
+    doEval(item) {
+      this.$emit("on-eval", item);
+    },
+    doEdit(item) {
+      this.$emit("on-edit", item);
+    },
+    doLook(item) {
+      this.$emit("on-look", item);
+    },
+    doDelete(item) {
+      this.loadingDel = true;
+      const callback = (bool) => {
+        this.loadingDel = false;
+        this.pop = !bool;
+      };
+      this.$emit("on-delete", item, callback);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.el-button + .action-popover {
+  margin-left: 10px !important;
+}
+</style>

package/src/component/table/column.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="!item.hide">
+        <el-table-column
+          v-if="item.type"
+          :key="index"
+          :type="item.type"
+          :label="item.label"
+          width="50"
+        >
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.children"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+          :fixed="item.fixed"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          show-overflow-tooltip
+        >
+          <TableColumn :key="index" :options="item.children"></TableColumn>
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+          :fixed="item.fixed"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <slot v-if="item.slot" name="slot" :scope="scope" :option="item" />
+            <div v-else>{{ scope.row[item.prop] }}</div>
+          </template>
+        </el-table-column>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TableColumn",
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  created(){
+    /**
+     * 
+     * <template v-if={!item.hide}>
+            <el-table-column
+              v-if={item.type}
+              type={item.type}
+              label={item.label}
+              width="50"
+            ></el-table-column>
+            <el-table-column
+              v-else-if={item.children}
+              prop={item.prop}
+              label={item.label}
+              width={item.width}
+              align={item.align}
+              fixed={item.fixed}
+              sortable={item.sortable}
+              sort-method={item.sortMethod}
+              show-overflow-tooltip
+            >
+              {this.dynamicItem(item.children)}
+            </el-table-column>
+            <el-table-column
+              v-else
+              prop={item.prop}
+              label={item.label}
+              width={item.width}
+              align={item.align}
+              fixed={item.fixed}
+              sortable={item.sortable}
+              sort-method={item.sortMethod}
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <slot
+                  v-if={item.slot}
+                  name="slot"
+                  scope={scope}
+                  option={item}
+                />
+                <div v-else>{scope.row[item.prop]}</div>
+              </template>
+            </el-table-column>
+          </template>
+     */
+    console.log(this.options)
+  }
+};
+</script>
+
+<style></style>

package/src/component/table/index.js

@@ -0,0 +1,8 @@
+import Table from "./index.vue";
+
+/* istanbul ignore next */
+Table.install = function(Vue) {
+  Vue.component(Table.name, Table);
+};
+
+export default Table;