zydx-plus 1.19.88 → 1.19.90

package/package.json

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

package/src/components/data_table/src/data_table.vue

@@ -4,7 +4,7 @@ import tableHead from './table_head.vue'
 import tableRow from './table_row.vue'
 import { defineComponent } from 'vue';
 export function getColKey(col) {
-  if (col.type === 'checkbox') return '__n_checkbox__'
+  if (col.type === 'checkbox') return 'checkbox'
   return col.key
 }
 function getRowsAndCols(
@@ -135,18 +135,14 @@ export default defineComponent({
       rows: [],
       cols: [],
       checkbox_state: [],
-      draggable_state: []
+      draggable_state: [],
+      matrix: []
     }
   },
-  emits: ['update:model-value'],
+  emits: ['selected'],
   mounted() {
-    const { rows, cols } = getRowsAndCols(this.columns)
-    this.rows = rows
-    this.cols = cols
     this.draggable_state = [...this.data]
-    if (this.columns[0]?.type === 'checkbox') {
-      this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => { return false })
-    }
+    this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => { return false })
   },
   methods: {
     onDragEnd: function (payload) {
@@ -167,16 +163,78 @@ export default defineComponent({
         }
       } else {
         this.checkbox_state[idx] = !this.checkbox_state[idx]
+        if (this.checkbox_state.slice(1).some((v) => !v)) {
+          this.checkbox_state[0] = false
+        } else {
+          this.checkbox_state[0] = true
+        }
+      }
+      this.$emit('selected', this.checked_row)
+    },
+    draw_matrix: function ({ key, row, colSpan, rowSpan }) {
+      let column_index = this.matrix[row].findIndex(col => col.key === key)
+      this.matrix[row][column_index].rowSpan = rowSpan
+      this.matrix[row][column_index].colSpan = colSpan
+    },
+    traverse_matrix: function () {
+      // todo:优化traverse matrix 算法, 目前是O(n^3)
+      for (let i = 0; i < this.matrix.length; i++) {
+        for (let j = 0; j < this.matrix[i].length; j++) {
+          const { rowSpan, colSpan } = this.matrix[i][j]
+          if (rowSpan > 1) {
+            for (let r = 1; r < rowSpan; r++) {
+              this.matrix[i + r][j].rowSpan = 0
+              this.matrix[i + r][j].colSpan = 0
+            }
+          }
+          if (colSpan > 1) {
+            for (let r = 0; r < rowSpan; r++) {
+              for (let k = 1; k < colSpan; k++) {
+                this.matrix[i + r][j + k].colSpan = 0
+                this.matrix[i + r][j + k].rowSpan = 0
+              }
+            }
+          }
+        }
       }
-      this.$emit('update:checkedRow', this.checked_row)
     }
   },
-
   provide() {
     return {
       onCheckboxClick: this.onCheckboxClick,
     }
   },
+  watch: {
+    data: {
+      handler: function (v) {
+        if (!v) return
+        const { rows, cols } = getRowsAndCols(this.columns)
+        this.rows = rows
+        this.cols = cols
+        this.matrix = Array.from({ length: v.length }, () => {
+          return Array.from({ length: this.cols.length },
+            (_, idx) => {
+              return { key: this.cols[idx].key, row: 1, colSpan: 1, rowSpan: 1 }
+            })
+        })
+        v.forEach((row, row_idx) => {
+          this.cols.forEach((col) => {
+            const { column } = col
+            const { key, colSpan = () => 1, rowSpan = () => 1 } = column
+            this.draw_matrix({
+              key: key,
+              row: row_idx,
+              rowSpan: rowSpan(row, row_idx + 1),
+              colSpan: colSpan(row, row_idx + 1)
+            })
+          })
+        })
+        this.traverse_matrix()
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   computed: {
     getHeight() {
       if (this.maxHeight) {
@@ -206,7 +264,7 @@ export default defineComponent({
     }
   },
   render() {
-    const { draggable, rows, cols, data, getHeight, getWidth, onDragEnd, checkbox_state } = this
+    const { draggable, rows, cols, data, getHeight, getWidth, onDragEnd, checkbox_state, matrix } = this
     return (
       <div class="table_wrapper" style={[getHeight, getWidth]}>
         {
@@ -217,7 +275,7 @@ export default defineComponent({
                   <table-head rows={rows} checked={checkbox_state[0]}></table-head>
                   {
                     data.map((row, idx) => (
-                      <table-row checked={checkbox_state[idx + 1]} cols={cols} row={row} draggable={draggable} data_row={idx + 1} />
+                      <table-row rowInfo={matrix[idx]} checked={checkbox_state[idx + 1]} cols={cols} row={row} draggable={draggable} data_row={idx + 1} />
                     ))
                   }
                 </VueDraggableNext>
@@ -229,7 +287,7 @@ export default defineComponent({
                 <tbody class="table_body">
                   {
                     data.map((row, idx) => (
-                      <table-row checked={checkbox_state[idx + 1]} cols={cols} row={row} draggable={draggable} data_row={idx + 1} />
+                      <table-row rowInfo={matrix[idx]} checked={checkbox_state[idx + 1]} cols={cols} row={row} draggable={draggable} data_row={idx + 1} />
                     ))
                   }
                 </tbody>

package/src/components/data_table/src/table_head.vue

@@ -3,14 +3,14 @@
     <tr v-for=" (row, idx) in rows"
         class="table_row"
         :key="idx">
-      <th v-for="({ key, rowSpan, colSpan, column }) in row"
+      <th v-for="({ key, rowSpan, colSpan, column }, row_idx) in row"
           :key="key"
           class="table_cell"
           :data-col-key="key"
           :rowspan="rowSpan"
           :colspan="colSpan"
-          :style="sticky({ level: idx, column: column })">
-        <template v-if="column.type === 'checkbox'">
+          :style="sticky({ level: idx, column: column, row: row, idx: row_idx })">
+        <template v-if="column.key === 'checkbox'">
       <td class="checkbox_container table_cell">
         <input type="checkbox"
                @click="() => onCheckboxClick(0)"
@@ -47,12 +47,14 @@ export default defineComponent({
   },
   inject: ['onCheckboxClick'],
   methods: {
-    sticky: function ({ level, column }) {
+    sticky: function ({ level, column, row, idx }) {
+      const left = row.slice(0, idx).reduce((acc, cur) => (cur.column.width + acc), 0)
       return `  background: white;
   position: sticky;
   z-index: 5;
   min-width: ${column.width}px;
   max-width: ${column.width}px;
+  left: ${left}px;
   top: ${level * 31}px;}`
     }
   }
@@ -101,6 +103,7 @@ td {
   text-align: center;
   text-align: center;
   line-height: 30px;
+  font-size: 14px;
 }
 
 th {

package/src/components/data_table/src/table_row.vue

@@ -7,6 +7,10 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    rowInfo: {
+      type: Array,
+      default: () => []
+    },
     cols: {
       type: Array,
       default: () => []
@@ -26,31 +30,43 @@ export default defineComponent({
   },
   inject: ['onCheckboxClick'],
   render() {
-    const { cols, row, data_row, draggable, checked, onCheckboxClick } = this
+    const { cols, row, data_row, draggable, checked, onCheckboxClick, rowInfo } = this
     const { renderExpand, expandable } = row
     const renderCell = () => {
-      return cols.map(({ column, key }) => {
-        const { width, type } = column
+      return cols.map(({ column, key }, idx) => {
+        const { width } = column
+        const { colSpan, rowSpan } = rowInfo[idx]
+        const mergeCell = ({ rowSpan, colSpan, renderFn = false }) => {
+          return rowSpan >= 1 && colSpan >= 1
+            ? renderFn
+              ?
+              (
+                <td class="table_cell" style={`min-width:${width}px; max-width:${width}px; `} rowspan={rowSpan} colspan={colSpan} data-col-key={key}>
+                  {row[key](row)}
+                </td>
+              )
+              : (
+                <td class="table_cell" style={`min-width:${width}px; max-width:${width}px;`} rowspan={rowSpan} colspan={colSpan} data-col-key={key}>
+                  {row[key]}
+                </td>
+              )
+            : null
+
+
+        }
         return typeof row[key] === 'function'
           ?
           (
-            <td class="table_cell" style={`min-width:${width}px; max-width:${width}px;`} rowspan={1} colspan={1} data-col-key={key}>
-              {row[key](row)}
-            </td>
+            mergeCell({ rowSpan, colSpan, renderFn: true })
           )
           :
-          type === 'checkbox'
-
+          key === 'checkbox'
             ? (
               <td class="checkbox_container table_cell">
                 <input type="checkbox" checked={checked} onClick={() => onCheckboxClick(data_row)} />
               </td>
             )
-            : (
-              <td class="table_cell" style={`min-width:${width}px; max-width:${width}px;`} rowspan={1} colspan={1} data-col-key={key}>
-                {row[key]}
-              </td>
-            )
+            : mergeCell({ rowSpan, colSpan })
       })
     }
     const renderExpandable = () => {
@@ -115,6 +131,7 @@ export default defineComponent({
   text-align: center;
   text-align: center;
   line-height: 30px;
+  font-size: 14px;
 }
 
 th,

package/src/components/editor2/src/editor.vue

@@ -144,7 +144,7 @@ export default {
         },
         uploadType: {
             type: Boolean,
-            default: true
+            default: false
         },
         info: {
             type: String,
@@ -201,19 +201,19 @@ export default {
         see(index) {
             this.$emit('see', this.uploadAttData[index])
         },
-        uploadFile(file) {
+        uploadFile(file,data) {
             return new Promise((rl,re) => {
-                const meta = Object.keys(this.uploadImage.meta)
+                const meta = Object.keys(data.meta)
                 const param = new FormData()
                 param.append('file', file)
                 for(let i = 0; i < meta.length; i++) {
-                    param.append(meta[i], this.uploadImage.meta[meta[i]])
+                    param.append(meta[i], data.meta[meta[i]])
                 }
                 const xhr = new XMLHttpRequest()
-                xhr.open('POST', this.uploadImage.server)
-                const headers = Object.keys(this.uploadImage.headers)
+                xhr.open('POST', data.server)
+                const headers = Object.keys(data.headers)
                 for(let i = 0; i < headers.length; i++) {
-                    xhr.setRequestHeader(headers[i], this.uploadImage.headers[headers[i]])
+                    xhr.setRequestHeader(headers[i], data.headers[headers[i]])
                 }
                 xhr.onreadystatechange = () => {
                     if(xhr.readyState === 4) {
@@ -229,9 +229,10 @@ export default {
             const file = e.target.files[0]
             if(this.uploadType) {
                 if(v === 'uploadAtt') {
+                    file.active = true
                     this.uploadAttData.push(file)
                 }else {
-                    this.uploadFile(file).then(r => {
+                    this.uploadFile(file,this.uploadImage).then(r => {
                         const url = this.uploadImage.url + r.data
                         const html = [
                             {
@@ -251,7 +252,7 @@ export default {
                     })
                 }
             }else {
-                this.uploadFile(file).then(r => {
+                this.uploadFile(file,(v === 'uploadAtt')? this.uploadAttachment: this.uploadImage).then(r => {
                     if(v === 'uploadAtt') {
                         r.data.active = true
                         this.uploadAttData.push(r.data)

package/src/components/read/src/read.vue

@@ -31,14 +31,14 @@ export default {
             fileType: null,
             PdfJs: null,
             svgArr: [],
-            container: null
+            container: null,
+            pdfPages: 0
         }
     },
     props: {
         url: {
             type: String,
             default: '',
-            pdfPages: 0
         }
     },
     mounted() {

package/src/components/select/src/select.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="wrapper">
-    <!-- <div id='custom-select-status'
-         class='hidden-visually'
-         aria-live="polite"></div> -->
     <div class="custom-select">
       <input stype="text"
              :value="selected"
+             :placeholder="placeholder"
              :readonly="true"
              @click="toggleDropDown"
              class="select-css" />
@@ -24,7 +22,7 @@
       </span>
       <transition>
         <ul v-if="isOpen"
-            class="custom-select-options">
+            :class="{ 'custom-select-options': true, 'scroll': maxHeight > 0 }">
           <li v-for="(option, idx) in options"
               :key="idx"
               @click="handleClick(option)">{{ option.label }}</li>
@@ -46,6 +44,14 @@ export default defineComponent({
     value: {
       type: String,
       default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    maxHeight: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -72,12 +78,21 @@ export default defineComponent({
     },
     style: function () {
       return 'transition: all 0.2s ease;'
+    },
+    _maxHeight: function () {
+      return this.maxHeight > 0
+        ? `${this.maxHeight}px`
+        : ''
     }
   },
   watch: {
     value: {
       handler: function (v) {
-        const { label } = this.options.find(option => option.value === v)
+        if (!v || !this.options.length) {
+          this.selected = ''
+          return
+        }
+        const { label } = this.options.find(option => option.value === v) || { label: '' }
         this.selected = label
       },
       immediate: true
@@ -132,8 +147,6 @@ export default defineComponent({
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
-  position: relative;
-  z-index: 10;
   outline: none;
 }
 
@@ -152,10 +165,9 @@ export default defineComponent({
 
 .custom-select-icons {
   position: absolute;
-  top: 0.5em;
-  right: 0.5em;
-  z-index: 20;
-  border: 1px solid white;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-30%);
   background: transparent;
 }
 
@@ -169,12 +181,21 @@ export default defineComponent({
   list-style-type: none;
   font-weight: normal;
   cursor: pointer;
-  z-index: 2;
+  z-index: 100;
   position: absolute;
   width: calc(100% - 1px);
   background-color: #ffffff;
 }
 
+.custom-select-options.scroll {
+  max-height: v-bind(_maxHeight);
+  overflow-y: scroll;
+}
+
+.custom-select-options::-webkit-scrollbar {
+  display: none;
+}
+
 .custom-select-options li {
   padding: 0 20px;
   font-size: 14px;

package/src/index.js

@@ -57,7 +57,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.19.88',
+    version: '1.19.90',
     install,
     Calendar,
     Message,