zydx-plus 1.4.23 → 1.6.25

package/package.json

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

package/src/components/buttonGroup/index.js

@@ -0,0 +1,6 @@
+import main from './src/buttonGroup';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/buttonGroup/src/buttonGroup.vue

@@ -0,0 +1,215 @@
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'zydx-button-group',
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+    accordian: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      active_state: [],
+      is_show_search: false,
+    }
+  },
+  mounted() {
+    this.active_state = this.buttons.map(() => false)
+  },
+  methods: {
+    trackClick(idx) {
+      if (this.accordian) {
+        this.active_state = this.active_state.map((_, i) => {
+          if (i === idx) {
+            return this.active_state[i] = !this.active_state[i]
+          } else {
+            return false
+          }
+        })
+      } else {
+        this.active_state[idx] = !this.active_state[idx]
+      }
+
+    },
+    onInputChange({ event, accept = '*', file_size = 2, cb }) {
+      let file = event.target.files[0]
+      let accept_list = accept.split(',')
+      if (file.size > file_size * 1024 * 1024) {
+        this.$messages({
+          title: '提示',
+          promptContent: `文件大小不能超过${file_size}M`,
+          cancelShow: false,
+        })
+        return
+      }
+      if (!accept_list.includes(file.type)) {
+        this.$messages({
+          title: '提示',
+          promptContent: `请选择${accept_list.join('、')}格式的文件`,
+          cancelShow: false,
+        })
+        return
+      }
+      cb(file)
+    },
+    showSearch: function () {
+      this.is_show_search = true
+    },
+    handleClose: function () {
+      this.is_show_search = false
+    },
+    handleSearch: function () {
+      this.$emit('search', this.$el.querySelector('.search_input').value)
+    },
+  },
+  render() {
+    const { trackClick, onInputChange, showSearch, handleSearch, handleClose, is_show_search } = this
+    const render = ({ type, name, accept = '', file_size, flip = null, onClick, disabled, idx }) => {
+      let active_name = flip ? flip : name
+      switch (type) {
+        case 'button':
+          return <button
+            class={this.active_state[idx] ? 'z-button active' : 'z-button'}
+            onClick={() => { onClick(); trackClick(idx) }
+            }
+            disabled={disabled}
+          >
+            {this.active_state[idx] ? active_name : name}
+          </button>
+        case 'file':
+          return <label class="z-button">
+            <span>{name}</span>
+            <input type="file" class="hidden" onClick={(e) => e.target.value = null} onChange={(e) => onInputChange({ event: e, accept, file_size, cb: onClick })}></input>
+          </label>
+        case 'search':
+          return is_show_search
+            ?
+            <div class="search_container">
+              <input type="text" class="search_input"></input>
+              <div class="icons">
+                <span class="search" onClick={handleSearch}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#333" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z" /></svg>
+                </span>
+                <span class="separator"></span>
+                <span class="close" onClick={handleClose}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#333" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6Z" /></svg>
+                </span>
+              </div>
+            </div>
+            : <button
+              class="z-button"
+              onClick={showSearch}
+            >
+              {name}
+            </button>
+      }
+    }
+    return (
+      <div class="z-button-group">
+        {
+          this.buttons
+            .map(({ onClick, disabled, file_size, accept, flip, type = "button", name }, idx) => {
+              return render({ type, name, accept, file_size, flip, onClick, disabled, idx })
+            }
+            )
+        }
+      </div>
+    )
+  }
+})
+</script>
+
+<style  scoped>
+.z-button-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: 30px;
+}
+
+.z-button {
+  margin: 1px;
+  width: auto;
+  min-width: 60px;
+  max-width: 60px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 20px;
+  background-color: #FFFFFF;
+  color: #000000;
+  border: #000000 1px solid;
+  line-height: 18px;
+  border-radius: 3px;
+  font-size: 12px !important;
+  letter-spacing: 0px !important;
+  text-align: center;
+  cursor: pointer;
+  padding: 0 5px;
+  font-weight: normal;
+}
+
+.search_container {
+  width: 180px;
+  height: 20px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding-right: 40px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+}
+
+.search_container .icons {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 18px;
+  width: 40px;
+  gap: 3px;
+  display: flex;
+  align-items: center;
+}
+
+.search_container .icons .separator {
+  width: 1px;
+  height: 14px;
+  background-color: #ccc;
+}
+
+.search_container .icons .search,
+.search_container .icons .close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.search_input {
+  width: 100%;
+  height: 18px;
+  border: none;
+}
+
+.z-button.active {
+  color: #00ff00 !important;
+}
+
+.z-button:disabled {
+  background-color: #ffffff;
+  color: #717171;
+  border: #717171 1px solid;
+}
+
+.hidden {
+  display: none;
+}
+</style>

package/src/components/tipBox/index.js

@@ -13,16 +13,14 @@ const Confirm = ({ type, url ,title, promptContent, middle, cancelShow, inputArr
     return new Promise((resolve, reject) => {
         // 2. 点击确认按钮，触发resolve同时销毁组件
         const submit = () => {
-            let val = '点击确认'
+            let val = []
             if(type === 'input') {
-                if(inputArr.type === 'input') {
-                    val = inputArr.map(x => {
-                        return x.value
-                    })
-                }else {
-                    val = inputArr.map(x => {
-                        return x.selectValue
-                    })
+                for(let i=0; i< inputArr.length; i++) {
+                    if(inputArr[i].type === 'input' || inputArr[i].type === 'calender') {
+                        val.push(inputArr[i].value)
+                    }else {
+                        val.push(inputArr[i].selectValue)
+                    }
                 }
             }
             render(null, container)

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

@@ -15,7 +15,13 @@
               <div class="tip-input" v-for="(item,index) in inputArr" :key="index">
                 <span>{{ item.name }}</span>
                 <input v-if="item.type === 'input'" type="text" :placeholder="item.placeholder" v-model="item.value" :disabled="item.disabled" />
-                <Select v-if="item.type === 'select'" :options="item.option" v-model:value="item.selectValue"></Select>
+                <div style="display: inline-block;">
+                  <Select v-if="item.type === 'select'" :options="item.option" v-model:value="item.selectValue"></Select>
+                </div>
+                <div class="cal" v-if="item.type === 'calender'">
+                  <input type="text" :placeholder="item.placeholder" @focus="focus" v-model="item.value" :disabled="item.disabled" />
+                  <Calendar v-if="tip" style="top: 35px;" @confirm="confirm($event,item)"></Calendar>
+                </div>
                 <div v-if="item.type === 'text'" class="text">{{ item.value }}</div>
               </div>
             </div>
@@ -32,9 +38,15 @@
 
 <script>
 import Select from '../../select/src/select.vue'
+import Calendar from '../../calendar/src/Calendar'
 export default {
   name: 'zydx-tip-box',
-  components: {Select},
+  components: {Select,Calendar},
+  data() {
+    return {
+      tip: false
+    }
+  },
   props: {
     type: { // 弹窗的提示标题
       type: String,
@@ -73,6 +85,15 @@ export default {
       type: Function,
       default: () => {}
     }
+  },
+  methods: {
+    focus() {
+      this.tip = true
+    },
+    confirm(e,data) {
+      data.value = e.start
+      this.tip = false
+    },
   }
 }
 </script>

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

@@ -100,14 +100,16 @@ font-size: 12px;
   line-height: 30px;
   padding-right: 10px;
 }
-.tip-input>input{
-  width: 210px;
-  height: 30px;
+.tip-input input{
+  width: 211px;
+  height: 32px;
   box-sizing: border-box;
   font-size: 16px;
   outline: none;
   padding-left: 10px;
   border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
 }
 .tip-input>select{
   width: 210px;
@@ -124,3 +126,7 @@ font-size: 12px;
   width: 210px;
   text-align: left;
 }
+.cal{
+  display: inline-block;
+  position: relative;
+}

package/src/components/treeList/index.js

@@ -0,0 +1,6 @@
+import main from './src/treeList';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/treeList/src/treeList.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="list">
+    <div class="list-cont">
+      <div class="list-li" @click="listTap(item,index)" :class="{'list-active': active === index}" v-for="(item,index) in list" :key="index">
+        <div class="list-title">
+          <span>{{ index + 1 }}. {{ item[column[0].label] }}</span>
+          <button v-if="delShow" @click="del(item)">删除</button>
+        </div>
+        <div class="list-li-cont" v-if="active === index">
+          <p v-for="(it,ind) in column.slice(1, column.length)" :key="ind">{{ it.name }}：{{ item[it.label] }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "zydx-tree-list",
+  data() {
+    return {
+      active: 0,
+    }
+  },
+  props: {
+    list: { // 数据列表
+      type: Array,
+      default: () => []
+    },
+    column: { // 数据列表
+      type: Array,
+      default: () => []
+    },
+    delShow: { //是否显示取消按钮
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    del() {
+      this.$emit('del',data)
+    },
+    listTap(data,index) {
+      this.active = index
+      this.$emit('confirm',data)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.list-title{
+  display: flex;
+  justify-content: center;
+  line-height: 30px;
+}
+.list-title>span{
+  flex: 1;
+}
+.list-title>button{
+  margin-left: 5px;
+  margin-top: 4px;
+  font-size: 12px;
+  background-color: transparent;
+  border: 1px solid #000;
+  border-radius: 3px;
+  padding: 2px 5px;
+  cursor: pointer;
+  height: 22px;
+  min-width: 60px;
+}
+.list{
+  padding: 0 10px;
+  cursor: pointer;
+}
+.list-li>span{
+  font-size: 16px;
+  line-height: 30px;
+}
+.list-li-cont{
+  font-size: 14px;
+  padding-left: 10px;
+}
+.list-active{
+  color: #e20808;
+}
+</style>

package/src/index.js

@@ -8,6 +8,9 @@ import Pagination from './components/pagination/index';
 import Select from './components/select/index';
 import Year from './components/year/index';
 import Table from './components/data_table/index';
+import buttonGroup from './components/buttonGroup/index';
+import spinner from './components/spinner/index';
+import treeList from './components/treeList/index';
 
 const components = [
     Calendar,
@@ -18,7 +21,9 @@ const components = [
     Pagination,
     Select,
     Year,
-    Table
+    Table,
+    buttonGroup,
+    treeList
 ];
 
 function install(app) {
@@ -26,13 +31,15 @@ function install(app) {
         app.component(component.name, component);
     });
     app.config.globalProperties.$message = Message
+    app.config.globalProperties.$spinner = spinner
 }
 
 export default {
-    version: '1.4.23',
+    version: '1.6.25',
     install,
     Calendar,
     Message,
+    spinner,
     Switch,
     menuTree,
     coloring,
@@ -40,6 +47,8 @@ export default {
     Pagination,
     Select,
     Year,
-    Table
+    Table,
+    buttonGroup,
+    treeList
 };