xianniu-ui 0.1.3 → 0.1.4

package/packages/style/src/tree.scss

@@ -0,0 +1,87 @@
+.xn-tree {
+    width: 100%;
+    .el-tree > .el-tree-node:after {
+        border-top: none;
+    }
+    .el-tree-node {
+        position: relative;
+        z-index: 9;
+        padding-left: 16px;
+    }
+    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
+    .el-tree-node__expand-icon.is-leaf {
+        display: none;
+    }
+    .el-tree-node__children {
+        padding-left: 16px;
+    }
+
+    .el-tree-node :last-child::before {
+        height: 38px;
+    }
+
+    .el-tree > .el-tree-node::before {
+        border-left: none;
+    }
+
+    .el-tree > .el-tree-node:after {
+        border-top: none;
+    }
+
+    .el-tree-node::before {
+        content: "";
+        left: -4px;
+        position: absolute;
+        right: auto;
+        border-width: 1px;
+    }
+
+    .el-tree-node:after {
+        content: "";
+        left: -4px;
+        position: absolute;
+        right: auto;
+        border-width: 1px;
+    }
+
+    .el-tree-node::before {
+        border-left: 1px dashed #dcdfe6;
+        bottom: 0px;
+        height: 100%;
+        top: -26px;
+        width: 1px;
+    }
+
+    .el-tree-node:after {
+        border-top: 1px dashed #dcdfe6;
+        height: 20px;
+        top: 12px;
+        width: 18px;
+    }
+    .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    .el-tree .el-icon-caret-right::before {
+        content: "\e723";
+        font-size: 16px;
+        color: #ff745c;
+        position: absolute;
+        left: -4px;
+        top: -3px;
+    }
+    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right::before {
+        content: "\e722";
+        font-size: 16px;
+        color: #ff745c;
+        position: absolute;
+        left: -4px;
+        top: -3px;
+    }
+    .el-tree-node__content {
+        padding-left: 8px !important;
+    }
+    .el-tree-node__content:hover {
+        background-color: #fff;
+    }
+}

package/packages/style/src/upload.scss

@@ -0,0 +1,46 @@
+.xn-upload {
+    border: 1px solid red;
+    .el-upload-list__item{
+        img{
+            object-fit: cover;
+        }
+    }
+    // &.is-disabled {
+    //     border: 1px solid red;
+    //     .el-upload.el-upload--picture-card {
+    //         cursor: not-allowed;
+    //         background-color: #f4f4f5;
+    //         &:hover {
+    //             border-color: #c0ccda;
+    //             color: #c0ccda;
+    //         }
+    //         .upload-limit {
+    //             i,
+    //             span {
+    //                 color: #bcbec2;
+    //             }
+    //         }
+    //     }
+    // }
+    // &-main{
+    //     border: 1px solid red;
+    // }
+    // &--slot{
+    //     height: 100%;
+        
+    //     &__ext {
+    //         position: absolute;
+    //         bottom: 0;
+    //         right: 0;
+    //         z-index: 1000;
+    //         background: rgba($color: #000000, $alpha: 0.4);
+    //         height: 20px;
+    //         line-height: 20px;
+    //         color: #fff;
+    //         font-size: 12px;
+    //         padding: 0 5px;
+    //         border-radius: 0 0 0 0;
+    //     }
+    // }
+
+}

package/packages/table/column.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-table-column v-bind="$attrs" v-if="isShowColumn($attrs)">
+  <el-table-column v-bind="$attrs" v-on="$listeners" v-if="isShowColumn($attrs)">
+
     <template v-if="$attrs.labelMsg">
       <template slot="header">
         <el-tooltip
@@ -15,7 +16,7 @@
     <template slot-scope="{ row, $index }">
       <expandDom
         v-if="$attrs.render"
-        :column="item"
+        :column="row"
         :row="row"
         :render="$attrs.render"
         :index="$index"
@@ -27,7 +28,7 @@
       <template v-if="$attrs.more && $attrs.more.options.length">
         <template v-for="(itemBtn, idxBtn) in $attrs.more.options">
           <expand-dom
-            v-if="itemBtn.render"
+            v-if="itemBtn.render && itemBtn.show && itemBtn.show(row)"
             :key="idxBtn"
             :column="itemBtn"
             :row="row"
@@ -35,21 +36,36 @@
             :index="idxBtn"
           />
           <template v-else>
-            <el-button
-              v-if="itemBtn.show ? itemBtn.show(row) : true"
+            <el-popconfirm
+              v-if="itemBtn.isPopConfirm"
+              :title="itemBtn.options.title || `确定${label(itemBtn, row)}吗？`"
               :key="idxBtn"
-              :disabled="itemBtn.disabled ? itemBtn.disabled(row) : false"
-              :type="itemBtn.type || 'text'"
-              :size="itemBtn.size || 'mini'"
-              :icon="itemBtn.icon"
-              :plain="itemBtn.plain"
-              @click="handleClick(itemBtn.method, row, $index)"
-              >{{
-                typeof itemBtn.label === "function"
-                  ? itemBtn.label(row)
-                  : itemBtn.label
-              }}</el-button
+              :confirm-button-text="itemBtn.options.confirmButtonText"
+              class="ml-10"
+              @confirm="handleClick(itemBtn.method, row, $index)"
             >
+              <el-button
+                :type="itemBtn.type || 'text'"
+                :size="itemBtn.size || 'mini'"
+                :icon="itemBtn.icon"
+                :plain="itemBtn.plain"
+                slot="reference"
+                >{{ label(itemBtn, row) }}</el-button
+              >
+            </el-popconfirm>
+            <template v-else>
+              <el-button
+                v-if="itemBtn.show ? itemBtn.show(row) : true"
+                :key="idxBtn"
+                :disabled="itemBtn.disabled ? itemBtn.disabled(row) : false"
+                :type="itemBtn.type || 'text'"
+                :size="itemBtn.size || 'mini'"
+                :icon="itemBtn.icon"
+                :plain="itemBtn.plain"
+                @click="handleClick(itemBtn.method, row, $index)"
+                >{{ label(itemBtn, row) }}</el-button
+              >
+            </template>
           </template>
         </template>
       </template>
@@ -82,14 +98,17 @@ export default {
     },
   },
   computed: {
+    label() {
+      return (itemBtn, row) => {
+        return typeof itemBtn.label === "function"
+          ? itemBtn.label(row)
+          : itemBtn.label;
+      };
+    },
     isShowColumn() {
       return (row) => {
-        if (row.show !== undefined) {
-          if (typeof row.show === "function") {
-            return row.show();
-          } else {
-            return row.show;
-          }
+        if (row.show != undefined) {
+         return typeof row.show === "function" ?  row.show() : row.show;
         }
         return true;
       };
@@ -99,7 +118,7 @@ export default {
   watch: {},
   methods: {
     handleClick(method, row, index) {
-      if(this.$parent){
+      if (this.$parent) {
         this.$parent.$emit("on-buttons", { method, row, index });
       }
     },

package/packages/table/main.vue

@@ -1,25 +1,79 @@
 <template>
   <div class="xn-table-box">
-    <div
-      class="xn-table-box-tools"
-      v-if="isTools"
-      :class="{ 'is-border': !border }"
-    >
+    <div class="xn-table-box-tools" :class="{ 'is-border': !border }">
       <slot name="tools">
-        <el-button
-          circle
-          size="mini"
-          @click="$emit('on-refresh')"
-          icon="el-icon-refresh"
-        ></el-button>
+        <el-button-group>
+          <el-tooltip
+            v-for="(item, idx) in tools"
+            :key="idx"
+            :content="item.label"
+            placement="bottom"
+            effect="dark"
+          >
+            <el-button
+              size="mini"
+              :icon="item.icon"
+              @click="handleToolsItem(item, idx)"
+            >
+            {{item.label}}
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="刷新列表" placement="bottom" effect="dark">
+            <el-button
+              size="mini"
+              @click="$emit('on-refresh')"
+              icon="el-icon-refresh"
+            ></el-button>
+          </el-tooltip>
+          <el-popover
+            placement="bottom-end"
+            popper-class="xn-table-box-tools__pop"
+            class="ml-10"
+            trigger="hover"
+          >
+            <el-scrollbar
+              class="xn-table-box-tools__coll"
+              wrap-style="overflow-x:hidden;"
+            >
+              <div v-for="(item, idx) in columns" :key="idx" class="mb-5">
+                <el-checkbox
+                  :value="item.checked"
+                  :checked="item.checked"
+                  @change="handleChangeToolshow(item)"
+                  >{{ item.label }}</el-checkbox
+                >
+              </div>
+            </el-scrollbar>
+            <el-button
+              size="mini"
+              icon="el-icon-setting"
+              slot="reference"
+            ></el-button>
+          </el-popover>
+        </el-button-group>
       </slot>
     </div>
+    <!-- <el-button
+      circle
+      size="mini"
+      @click="$emit('on-export')"
+      icon="el-icon-files"
+    ></el-button>
+    <el-button
+      circle
+      size="mini"
+      @click="$emit('on-refresh')"
+      icon="el-icon-refresh"
+    ></el-button> -->
+
     <el-table
+      ref="table"
       :data="data"
       v-on="$listeners"
       v-bind="$attrs"
       :border="border"
       :stripe="stripe"
+      @row-click="singleElection"
     >
       <el-table-column
         v-if="selection && data.length"
@@ -28,28 +82,38 @@
         width="50px"
         align="center"
       ></el-table-column>
+      <el-table-column v-bind="$attrs" v-if="radio" width="50px" align="center">
+        <template slot-scope="{ row }">
+          <el-radio v-model="radioSelected" :label="row.id">&nbsp;</el-radio>
+        </template>
+      </el-table-column>
       <el-table-column
         width="50px"
         label="序号"
         v-if="index && data.length"
         type="index"
       ></el-table-column>
+
       <slot name="column">
-        <column
-          v-for="(item, idx) in columns"
-          :key="idx"
-          v-bind="item"
-        ></column>
+        <template v-for="(item, idx) in columns">
+          <column
+            :key="idx"
+            v-if="item.checked === true"
+            v-bind="item"
+          ></column>
+        </template>
       </slot>
     </el-table>
-    <xn-page
-      :hidden="!showPage"
-      :total="pageConfig.total"
-      :page.sync="pageConfig.pageNum"
-      :limit.sync="pageConfig.pageSize"
-      @pagination="getList"
-      layout="total, prev, pager, next, jumper"
-    ></xn-page>
+
+    <template v-if="!$utils.isEmpty(pageConfig)">
+      <xn-page
+        :total="pageConfig.total"
+        :page.sync="pageConfig.pageNum"
+        :limit.sync="pageConfig.pageSize"
+        @pagination="getList"
+        layout="total, prev, pager, next, jumper"
+      ></xn-page>
+    </template>
   </div>
 </template>
 
@@ -59,9 +123,13 @@ export default {
   name: "XnTable",
   components: { column },
   props: {
+    tools: {
+      type: Array,
+      default: () => [],
+    },
     data: {
       type: Array,
-      default: () => {},
+      default: () => [],
     },
     border: {
       type: Boolean,
@@ -73,29 +141,52 @@ export default {
     },
     stripe: Boolean,
     selection: Boolean,
+    radio: Boolean,
+
     showPage: Boolean,
+    pageLayout: {
+      type: String,
+      default: "total, prev, pager, next, jumper",
+    },
     pageConfig: {
       type: Object,
-      default: () => {
-        return {
-          pageSize: 15,
-          pageNum: 1,
-        };
-      },
+      default: () => {},
     },
     index: Boolean,
     expand: Boolean,
     isTools: Boolean,
   },
-  computed: {
-    isObj() {
-      return typeof this.pageConfig === "object";
-    },
+  data() {
+    return {
+      radioSelected: "",
+    };
+  },
+  computed: {},
+  created() {
+    this.columns.length &&
+      this.columns.forEach((item) => {
+        this.$set(item, "checked", true);
+      });
   },
   methods: {
     getList(val) {
       this.$emit("on-page", val);
     },
+
+    singleElection(val) {
+      if (!this.radio) return;
+      this.radioSelected = val.id;
+      const res = this.data.filter((item) => item.id === val.id);
+      this.$emit("on-single", res);
+    },
+    handleToolsItem(row, idx) {
+      console.log(row, idx);
+    },
+    handleChangeToolshow(item) {
+      item.checked = item.checked === true ? false : true;
+      this.$refs.table.doLayout();
+      console.log(this.$root);
+    },
   },
 };
 </script>

package/packages/tip/index.js

@@ -0,0 +1,7 @@
+import XnTip from './main.vue'
+
+XnTip.install = function (Vue) {
+  Vue.component(XnTip.name, XnTip)
+}
+
+export default XnTip

package/packages/tip/main.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="xn-tip" :class="[`xn-tip--${type}`]">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XnTip',
+  props: {
+    type: {
+      type: String,
+      default: 'primary',
+      validator: (val) => {
+        return ['primary', 'warning', 'success', 'danger', 'info'].includes(
+          val
+        )
+      }
+    }
+  }
+}
+</script>

package/packages/tree/index.js

@@ -0,0 +1,7 @@
+import XnTree from './main.vue'
+
+XnTree.install = function (Vue) {
+  Vue.component(XnTree.name, XnTree)
+}
+
+export default XnTree

package/packages/tree/main.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="xn-tree">
+    <el-tree
+      ref="tree"
+      class="xn-tree-main"
+      :data="data"
+      :indent="0"
+      default-expand-all
+      :check-strictly="true"
+      :props="defaultProps"
+      :node-key="nodeKey"
+      show-checkbox
+      :render-content="renderContent"
+      @check="clickDeal"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XnTree',
+  props: {
+    data: {
+      type: Array,
+      default: () => {}
+    },
+    nodeKey: {
+      type: String,
+      default: 'menuId'
+    },
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'bossApplicationMenuVOS',
+          label: 'menuName'
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.changeTreeClass()
+    })
+  },
+  methods: {
+    getCheckedKeys() {
+      return this.$refs.tree
+        .getCheckedKeys()
+        .concat(this.$refs.tree.getHalfCheckedKeys())
+    },
+    setCheckedKeys(data = []) {
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(data)
+      })
+    },
+    renderContent(h, { data }) {
+      let className = ''
+      // let className1 = ''
+      // perms这个是后台数据区分普通tree节点和横向tree节点的标志各位要根据实际情况做相对应的修改
+      if (
+        data.parentId &&
+        data.parentId !== 0 &&
+        !data[this.defaultProps.children].length
+      ) {
+        className = 'especially'
+      }
+      // if (!node.isLeaf) {
+      //   node.parent.className1 = 'pl-20'
+      // } else {
+      //   className1 = 'pl-0'
+      // }
+      return (
+        // 在需要做横向排列的模块做标记
+        <div class={[className]}>{data[this.defaultProps.label]}</div>
+      )
+    },
+
+    // 改变tree节点样式
+
+    changeTreeClass() {
+      // 找到之前做标记的class
+      // var classDomList = document.getElementsByClassName('especially')
+      // // 改变这几个样式
+      // for (var i = 0; i < classDomList.length; i++) {
+      //   // classDomList[i].parentNode.style.cssText = 'float: left'
+      //   classDomList[i].parentNode.className =
+      //     'el-tree-node__content option-wrapper'
+      //   classDomList[i].parentNode.style.marginLeft =
+      //     '-25px'
+      // }
+    },
+    clickDeal(currentObj, treeStatus) {
+      this.clickCheck(currentObj, treeStatus, this.$refs.tree)
+    },
+    clickCheck(currentObj, treeStatus, ref) {
+      // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
+      const selected = treeStatus.checkedKeys.indexOf(currentObj[this.nodeKey]) // -1未选中
+      // 选中
+      if (selected !== -1) {
+        // 子节点只要被选中父节点就被选中
+        this.selectedParent(currentObj, ref)
+        // 统一处理子节点为相同的勾选状态
+        this.uniteChildSame(currentObj, true, ref)
+      } else {
+        // 取消子节点的选中状态触发
+        if (currentObj.parentId !== -1) {
+          this.removeParent(currentObj, ref)
+        }
+
+        // 未选中 处理子节点全部未选中
+        if (
+          currentObj[this.defaultProps.children] &&
+          currentObj[this.defaultProps.children].length !== 0
+        ) {
+          this.uniteChildSame(currentObj, false, ref)
+        }
+      }
+      this.$emit('on-check', this.getCheckedKeys())
+    },
+    /**   统一处理子节点为相同的勾选状态  **/
+    uniteChildSame(treeList, isSelected, ref) {
+      const treeListData = treeList[this.defaultProps.children] || []
+      const len = treeListData.length
+
+      ref.setChecked(treeList[this.nodeKey], isSelected)
+
+      for (let i = 0; i < len; i++) {
+        this.uniteChildSame(treeListData[i], isSelected, ref)
+      }
+    },
+
+    /**    统一处理父节点为选中    **/
+    selectedParent(currentObj, ref) {
+      const currentNode = ref.getNode(currentObj)
+      if (currentNode.parent.key !== undefined) {
+        ref.setChecked(currentNode.parent, true)
+        return this.selectedParent(currentNode.parent, ref)
+      }
+    },
+
+    /**    子节点全没选中取消父级的选中状态   **/
+    removeParent(currentObj, ref) {
+      let a = 0
+      let b = 0
+      const currentNode = ref.getNode(currentObj)
+      if (currentNode.parent !== null) {
+        if (currentNode.parent.key !== undefined) {
+          ref.setChecked(currentNode.parent, true) // 根节点
+          this.removeParent(currentNode.parent, ref) // 递归判断子节点
+        }
+      }
+
+      // 不为0表示为父节点
+      if (currentNode.childNodes.length !== 0) {
+        // 循环判断父节点下的子节点
+        for (let i = 0; i < currentNode.childNodes.length; i++) {
+          // 判断父节点下的子节点是否全为false
+          if (currentNode.childNodes[i].checked === false) {
+            ++a
+
+            // a === currentNode.childNodes.length 表明子节点全为false
+            if (a === currentNode.childNodes.length) {
+              // 等于 undefined 跳过,不等于继续执行
+              if (currentNode.childNodes[i].parent.key !== undefined) {
+                ref.setChecked(currentNode.childNodes[i].parent, false) // 父元素设置为false
+                // 循环上级父节点下的子节点
+                for (let i = 0; i < currentNode.parent.childNodes.length; i++) {
+                  // 判断父节点下的子节点是否全为false
+                  if (currentNode.parent.childNodes[i].checked === false) {
+                    ++b
+
+                    // b === currentNode.parent.childNodes.length 表明子节点全为false
+                    if (b === currentNode.parent.childNodes.length) {
+                      ref.setChecked(currentNode.parent.key, false) // 父元素设置为false
+                      return this.removeParent(currentNode.parent, ref) // 继续递归循环判断
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>