zydx-plus 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/menuTree/index.js

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

package/src/components/menuTree/src/ZydxMenuTree.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="menuTree">
+    <slot></slot>
+    <div v-for="(item, index) in targetTree" :key="index">
+      <zydx-menu-tree-info
+        :nodeSet="nodeSet"
+        :isShowLine="isShowLine"
+        :isShowUpDown="isShowUpDown"
+        :menu-info="item"
+        :selectItem="selectItem"
+        @clickItem="clickItem"
+      ></zydx-menu-tree-info>
+    </div>
+  </div>
+</template>
+
+<script>
+import zydxMenuTreeInfo from "./ZydxMenuTreeInfo";
+export default {
+  name: "zydx-menu-tree",
+  components: {
+    zydxMenuTreeInfo,
+  },
+  props: {
+    // 是否显示展开收起动作
+    isShowUpDown: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示底线
+    isShowLine: {
+      type: Boolean,
+      default: false,
+    },
+    // 节点设置
+    nodeSet: {
+      type: Number,
+      default: 2,
+    },
+    // 选择当前的节点
+    selectItem: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 树数据
+    treeData: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    targetTree: function () {
+      let that = this;
+      let targetTree = [];
+      let minLevel = "";
+      that.treeData.map(function (item) {
+        if (that.isShowUpDown) {
+          // 如果设置收起展开， 添加控制变量
+          that.$set(item, "isShowUpDown", false);
+        } else {
+          that.$set(item, "isShowUpDown", true);
+        }
+        if (minLevel === "") {
+          minLevel = item.level;
+        } else {
+          if (item.level < minLevel) {
+            minLevel = item.level;
+          }
+        }
+      });
+      this.treeData.map(function (item) {
+        if (item.level === minLevel) {
+          targetTree.push(item);
+        }
+      });
+      targetTree.map(function (item) {
+        that.forArr(that.treeData, item);
+      });
+      if (that.isShowUpDown) {
+        for (let i = 0; i < targetTree.length; i++) {
+          this.setIsShowUpDown(targetTree[i], i);
+        }
+      }
+      return targetTree;
+    },
+  },
+  methods: {
+    // 原始目录树转换方法
+    forArr: function (arr, obj) {
+      let that = this;
+      let newArr = [];
+      arr.map(function (item) {
+        if (item.pcatalogId === obj.catalogId) {
+          newArr.push(item);
+        }
+      });
+      if (newArr.length === 0) {
+        return false;
+      }
+      obj.children = newArr;
+      newArr.map(function (item) {
+        that.forArr(arr, item);
+      });
+    },
+    // 点击回调事件
+    clickItem(item) {
+      this.$emit("clickItem", item);
+    },
+    // 递归调用修改状态
+    setIsShowUpDown(item, index) {
+      if (index === 0) {
+        let children = item.children;
+        if (children && children.length !== 0) {
+          this.$set(item, "isShowUpDown", true);
+          for (let i = 0; i < children.length; i++) {
+            this.setIsShowUpDown(children[i], i);
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.menuTree {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0px 10px;
+}
+
+</style>

package/src/components/menuTree/src/ZydxMenuTreeInfo.vue

@@ -0,0 +1,163 @@
+/**
+* @开发者：  zmy
+* @描述：  目录树通用组件
+* @创建时间: 2022-08-16 11:00:00
+* @内容:
+必传值：名字/类型/默认值/作用
+menuInfo 目录树数据
+非必传值：
+nodeSet 传入当前的节点设置， 小于当前节点设置不可点，灰色
+selectItem 传入当前选择的节点，是一个对象
+* @回调事件：
+* clickItem 点击点前节点的回调， 返回点击的节点
+@组件内方法：
+*/
+<template>
+  <div>
+    <div
+      class="lineHeight30"
+      :class="menuInfo.level === 0 ? '' : 'marginLeft14'"
+    >
+      <div
+        style="display: flex; flex-direction: row"
+        :style="this.isShowLine ? 'border-bottom: 1px #CCCCCC dashed;' : ''"
+      >
+        <div
+          class="widthB100 ellipse cursor"
+          :class="menuTitleStyle"
+          @click.stop="clickItem(menuInfo)"
+        >
+          {{ menuInfo.title }}
+        </div>
+        <div v-show="isShowUpDown && menuInfo.children">
+          <span
+            class="iconfont"
+            v-html="defaultFont"
+            @click="clickFont(menuInfo)"
+          ></span>
+        </div>
+      </div>
+      <div v-show="menuInfo.isShowUpDown">
+        <div v-for="(item, index) in menuInfo.children" :key="index">
+          <zydx-menu-tree-info
+            :isShowUpDown="isShowUpDown"
+            :isShowLine="isShowLine"
+            :selectItem="selectItem"
+            :menu-info="item"
+            :nodeSet="nodeSet"
+            @clickItem="clickItem"
+          >
+          </zydx-menu-tree-info>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import zydxMenuTreeInfo from "./ZydxMenuTreeInfo";
+export default {
+  name: "zydx-menu-tree-info",
+  components: {
+    zydxMenuTreeInfo,
+  },
+  props: {
+    // 是否显示展开收起动作
+    isShowUpDown: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示底线
+    isShowLine: {
+      type: Boolean,
+      default: false,
+    },
+    // 节点等级设置
+    nodeSet: {
+      type: Number,
+      required: true,
+    },
+    // 选择当前的节点
+    selectItem: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 树数据
+    menuInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    defaultFont() {
+      if (this.menuInfo.isShowUpDown) {
+        return "&#xeaf5;";
+      }
+      return "&#xeaf3;";
+    },
+    menuTitleStyle() {
+      let ar = [];
+      console.log(this.nodeSet);
+      if (parseInt(this.menuInfo.level) > parseInt(this.nodeSet)) {
+        ar.push("disable");
+      }
+      if (this.selectItem === this.menuInfo) {
+        ar.push("active");
+      }
+      return ar;
+    },
+  },
+  methods: {
+    clickItem(item) {
+      this.$emit("clickItem", item);
+    },
+    clickFont(item) {
+      item.isShowUpDown = !item.isShowUpDown;
+      // if (item.isShowUpDown) {
+      //     this.defaultFont = '&#xeaf5;'
+      // } else {
+      //     this.defaultFont = '&#xeaf3;'
+      // }
+    },
+  },
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: "iconfont";
+  src: url("iconfont.ttf?t=1660878683989") format("truetype");
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+}
+.cursor {
+  cursor: pointer;
+}
+.disable {
+  color: #7c7c7c;
+  pointer-events: none;
+  cursor: default;
+}
+.border_bottom {
+  border-bottom: 1px #cccccc dashed;
+}
+.active {
+  color: #00ff00;
+}
+.ellipse {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.marginLeft14 {
+  margin-left: 14px;
+}
+</style>

package/src/components/tipBox/src/main.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="hello">
+    <div class="tip-popupWindowSearch">
+      <div class="tip-box">
+        <div>
+          <div class="tip-title">{{ title }}</div>
+        </div>
+        <div class="tip-boxContent">
+          <div class="tap-p">
+            <div class="tip-title2" v-if="type === 'text'" :style="{'text-align': (middle)? 'center': 'left' }" v-html="promptContent"></div>
+            <div class="tip-img" v-if="type === 'img'">
+              <img :src="url" />
+            </div>
+          </div>
+        </div>
+        <div class="tip-btnBox">
+          <div @click="submit">确认</div>
+          <div v-if="cancelShow" @click="cancel">取消</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zydx-tip-box',
+  props: {
+    type: { // 弹窗的提示标题
+      type: String,
+      default: 'text'
+    },
+    url: { // 弹窗的提示标题
+      type: String,
+      default: ''
+    },
+    title: { // 弹窗的提示标题
+      type: String,
+      default: '提示'
+    },
+    promptContent: { // 弹窗中间的文字内容
+      type: String,
+      default: '默认文字'
+    },
+    middle: { // 弹窗中间的文字内容是居中 还是居左 默认居中
+      type: Boolean,
+      default: true
+    },
+    cancelShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    submit: function (val) {
+      this.$emit('rheResults', val)
+    },
+    cancel: function () {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style scoped src="./zydxStyle.css"></style>

package/src/components/tipBox/src/zydxStyle.css

@@ -0,0 +1,87 @@
+.tip-popupWindowSearch{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+}
+.tip-box {
+  width: 480px;
+  padding: 40px 40px;
+  background-color: white;
+  border-radius: 5px;
+  border: 5px rgba(0, 0, 0, .1) solid;
+  margin: 0 auto;
+}
+.tip-boxContent{
+  max-height: 600px;
+}
+.tip-boxContent:hover{
+  cursor:default
+}
+
+.tip-closeBtn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 28px;
+  color: #767676;
+}
+.tip-title {
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 700;
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.tip-title1 {
+  font-size: 16px;
+  text-align: left;
+}
+.tip-title2{
+  font-size: 16px;
+  text-align: center;
+  line-height: 30px;
+}
+
+.tip-btnBox {
+margin-top: 20px;
+flex-shrink: 0;
+display: flex;
+justify-content: center;
+align-items: flex-start;
+font-size: 12px;
+}
+
+.tip-btnBox>div {
+  width: 60px;
+  height: 22px;
+  line-height: 22px;
+  margin-right: 10px;
+  border-radius: 3px;
+  border: 1px solid #000000;
+  cursor: pointer;
+  text-align: center;
+}
+.tip-quesTitle{
+  padding-left: 2px;
+  margin-left: -10px!important;
+}
+.tap-p{
+  text-align: center;
+}
+.tip-img{
+  width: 70%;
+  display: inline-block;
+}
+.tip-img>img{
+  width: 100%;
+}

package/src/index.js

@@ -1,7 +1,9 @@
-import Input from './components/input/index';
+import tipBox from './components/tipBox/index';
+import menuTree from './components/menuTree/index';
 
 const components = [
-    Input
+    tipBox,
+    menuTree
 ];
 
 const install = function(Vue, opts = {}) {
@@ -15,7 +17,8 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-    version: '1.0.2',
+    version: '1.0.5',
     install,
-    Input
+    tipBox,
+    menuTree
 };

package/src/components/input/src/main.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>111111</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'zydxInput'
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-</style>