eoss-ui 0.5.84 → 0.5.85

package/packages/data-table/src/main.vue

@@ -36,14 +36,14 @@
     ></es-toolbar>
     <p v-if="title" ref="title" class="es-table-title" v-html="title"></p>
     <div
-      style="styles"
+      v-if="show"
+      :style="styles"
       class="es-data-table-content"
       :class="{
         'es-table-border-none': border == 'none',
         'es-table-plus': mode == 'plus'
       }"
       ref="esTableContent"
-      v-if="show"
     >
       <el-table
         ref="oaTable"
@@ -85,39 +85,44 @@
               v-if="item.type === 'sort'"
               width="32"
               prop="id"
-              :key="item.key || index"
+              :key="item.key || item.label || item.title || index"
               label=" "
             >
               <template slot-scope="scope">
-                <es-icon class="es-move" :contents="dragSortIcon"></es-icon>
+                <es-icon
+                  v-if="!scope.row.fixed"
+                  class="es-move"
+                  :contents="dragSortIcon"
+                ></es-icon>
               </template>
             </el-table-column>
             <el-table-column
               v-else-if="item.type === 'index' || item.type === 'selection'"
-              :key="item.key || index"
+              :key="item.key || item.label || item.title || index"
               v-bind="dragSort ? { ...item, fixed: false } : item"
             ></el-table-column>
-            <children
-              v-else
-              :key="item.label || item.title"
-              :tag="item.tag"
-              v-bind="{
-                mode: mode,
-                name: name,
-                indexs: index,
-                form: form,
-                readonly: readonly,
-                optionData: optionDatas,
-                dragSort: dragSort,
-                ...(dragSort ? { ...item, fixed: false } : item)
-              }"
-              v-on="{
-                handleClick: handleClick,
-                formBlur: formBlur,
-                formFocus: formFocus,
-                formChange: formChange
-              }"
-            ></children>
+            <template v-else>
+              <children
+                :tag="item.tag"
+                v-bind="{
+                  mode: mode,
+                  name: name,
+                  indexs: index,
+                  form: form,
+                  readonly: readonly,
+                  optionData: optionDatas,
+                  dragSort: dragSort,
+                  key: item.key || item.label || item.title || index,
+                  ...(dragSort ? { ...item, fixed: false } : { ...item })
+                }"
+                v-on="{
+                  handleClick: handleClick,
+                  formBlur: formBlur,
+                  formFocus: formFocus,
+                  formChange: formChange
+                }"
+              ></children>
+            </template>
           </template>
         </template>
         <slot name="prefix"></slot>
@@ -172,11 +177,22 @@
       <slot name="dialog"></slot>
       <slot name="other"></slot>
     </div>
-    <sizer ref="sizer" :data="theads" :mode="mode"></sizer>
+    <es-dialog v-if="theads.length" title="列表设置" :visible.sync="showSizer">
+      <sizer
+        v-if="showSizer"
+        :data="theads"
+        :mode="mode"
+        @confirm="mergeThead"
+      ></sizer>
+    </es-dialog>
   </component>
 </template>
 <script>
-import { findSysCode, getDictList } from 'eoss-ui/src/config/api.js';
+import {
+  findSysCode,
+  getDictList,
+  formContents
+} from 'eoss-ui/src/config/api.js';
 import { debounce } from 'throttle-debounce';
 import children from './children.vue';
 import sizer from './sizer.vue';
@@ -184,12 +200,13 @@ import util from 'eoss-ui/src/utils/util';
 import bus from 'eoss-ui/src/utils/bus';
 import qs from 'qs';
 const systemMode = util.win.top.systemMode || util.win.systemMode || 'default';
+const pageView = util.getParams('pageView');
 export default {
   name: 'EsDataTable',
   inheritAttrs: false,
   components: {
-    [children.name]: children,
-    [sizer.name]: sizer
+    children,
+    sizer
   },
   provide() {
     return {
@@ -209,6 +226,14 @@ export default {
     }
   },
   props: {
+    viewCode: {
+      type: String,
+      default: pageView
+    },
+    contentsUrl: {
+      type: String,
+      default: formContents
+    },
     mode: {
       type: String,
       default: systemMode
@@ -443,12 +468,14 @@ export default {
       type: String,
       default: 'es-icon-caidan'
     },
-    fields: Boolean
+    isFieldsEncryption: Boolean
   },
   data() {
     return {
+      isEncryption: this.isFieldsEncryption,
       requests: [],
       toolbars: [],
+      hasThead: false,
       theadData: [],
       list: [],
       tableLoading: this.loading,
@@ -474,10 +501,12 @@ export default {
       selected: null,
       options: {},
       icon: true,
-      show: true,
       sysCodes: [],
       infiniteDisabled: this.infiniteScroll,
-      isReload: false
+      isReload: false,
+      pageView: null,
+      showSizer: false,
+      show: true
     };
   },
   computed: {
@@ -499,9 +528,8 @@ export default {
     },
     theads: {
       get() {
-        let thead = [];
-        let addfilter = false;
-        let types = this.theadData
+        let types;
+        types = this.theadData
           .filter((item) => {
             return (
               item.type == 'selection' ||
@@ -512,6 +540,8 @@ export default {
           .map((item) => {
             return item.type;
           });
+        let thead = [];
+        let addfilter = false;
         if (this.dragSort && !types.includes('sort')) {
           addfilter = true;
           thead.push({
@@ -564,7 +594,7 @@ export default {
         }
         if (this.theadData.length) {
           thead = [...thead, ...this.theadData];
-        } else {
+        } else if (this.show) {
           thead = [...thead, ...this.thead];
         }
         return thead;
@@ -663,6 +693,15 @@ export default {
     }
   },
   watch: {
+    viewCode: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.hasThead = true;
+          this.getContents();
+        }
+      }
+    },
     showToolbar() {
       this.resetHeight();
       this.doLayout();
@@ -705,13 +744,8 @@ export default {
       deep: true,
       handler(val) {
         this.getOptions(val);
-
-        if (
-          Array.isArray(val) &&
-          val.length &&
-          this.fields &&
-          this.datas.length == 0
-        ) {
+        this.chekOpenTotalArea();
+        if (Array.isArray(val) && val.length && this.datas.length == 0) {
           this.getTableData();
         }
       }
@@ -779,15 +813,9 @@ export default {
   created() {
     if (Array.isArray(this.thead) && this.thead.length) {
       this.getOptions(this.thead);
-      if (this.fields) {
-        this.immediate && this.getTableData();
-        this.chekOpenTotalArea();
-      }
-    }
-    if (!this.fields) {
       this.immediate && this.getTableData();
-      this.chekOpenTotalArea();
     }
+    this.chekOpenTotalArea();
   },
   mounted() {
     if (this.data.length) {
@@ -824,6 +852,30 @@ export default {
       const { method, url, params, data } = config;
       return [method, url, qs.stringify(params), qs.stringify(data)].join('&');
     },
+    getContents() {
+      util
+        .ajax({
+          url: this.contentsUrl,
+          params: {
+            formId: this.viewCode
+          }
+        })
+        .then((res) => {
+          if (res.rCode == 0) {
+            let {
+              results: { eossFormJson }
+            } = res;
+            eossFormJson = JSON.parse(eossFormJson);
+            if (eossFormJson && eossFormJson.table) {
+              this.isEncryption = true;
+              this.theadData = eossFormJson.table;
+            } else {
+              this.hasThead = false;
+            }
+            this.$emit('init-contents', res.results);
+          }
+        });
+    },
     getOptions(res) {
       let sysCodes = [];
       res.forEach((item) => {
@@ -910,12 +962,20 @@ export default {
         this.showTotal = true;
         return;
       }
+      if (!this.theads) {
+        return;
+      }
       const arr = JSON.parse(JSON.stringify(this.theads));
+      let flag = false;
       arr.forEach((item) => {
         if (item.total) {
+          flag = true;
           this.showTotal = true;
         }
       });
+      if (this.showTotal !== flag) {
+        this.showTotal = flag;
+      }
     },
     rowClick(row, column, event) {
       this.$emit('click', row, column, event);
@@ -996,19 +1056,26 @@ export default {
           newVal.forEach((row) => {
             if (util.isObject(row)) {
               this.$refs.oaTable.toggleRowSelection(row, true);
-            } else
-              this.list.forEach((item) => {
-                if (item[this.checkedKey] === row) {
-                  this.$refs.oaTable.toggleRowSelection(item, true);
-                  return;
-                }
-              });
+            } else {
+              this.setChecked(this.list, row);
+            }
           });
         } else if (newVal === true) {
           this.toggleAllSelection();
         }
       });
     },
+    setChecked(list, row) {
+      list.forEach((item) => {
+        if (item.children && item.children.length) {
+          this.setChecked(item.children, row);
+        }
+        if (item[this.checkedKey] === row) {
+          this.$refs.oaTable.toggleRowSelection(item, true);
+          return;
+        }
+      });
+    },
     getTableDatas(res) {
       let where;
       let first;
@@ -1036,6 +1103,7 @@ export default {
       if (where) {
         reqData = util.extend({}, reqData, where);
       }
+      //if (this.fields)
       if (this.retainSearh || first === false) {
         reqData = util.extend({}, reqData, this.wheres);
       }
@@ -1046,9 +1114,9 @@ export default {
           }
         }
       }
-      if (this.fields) {
+      if (this.isEncryption) {
         let fields = [];
-        this.thead.forEach((item) => {
+        this.theads.forEach((item) => {
           if (item.field || item.prop) {
             fields.push(item.field || item.prop);
           }
@@ -1534,7 +1602,7 @@ export default {
               );
             for (let i = 0; i < this.$el.parentNode.childNodes.length; i++) {
               let ele = this.$el.parentNode.childNodes[i];
-              if (ele !== this.$el && ele.offsetHeight !== undefined) {
+              if (ele.offsetHeight !== undefined) {
                 height =
                   height -
                   ele.offsetHeight -
@@ -1559,6 +1627,9 @@ export default {
             let emptyText = this.$refs.esTableContent.querySelector(
               '.el-table__empty-text'
             );
+            if (this.total) {
+              height -= 1;
+            }
             let eht = 0;
             if (emptyText) {
               eht = emptyText.offsetHeight;
@@ -1594,7 +1665,7 @@ export default {
       }
     },
     handleFilterColumn() {
-      this.$refs.sizer.show();
+      this.showSizer = true;
     },
     handleSortChange(res) {
       if (res.data && res.data.length) {
@@ -1606,11 +1677,24 @@ export default {
       this.$emit('update-drag-sort', data, event);
     },
     mergeThead(res) {
-      this.theadData = res;
+      this.show = false;
+      this.theadData = [];
       this.icon = true;
-      setTimeout(() => {
-        this.show = true;
-      }, 100);
+      this.showSizer = false;
+      // if (!this.showTotal) {
+      //   for (let i = 0; i < res.length; i++) {
+      //     if (res[i].total) {
+      //       this.showTotal = true;
+      //       break;
+      //     }
+      //   }
+      // }
+      this.$nextTick(() => {
+        this.theadData = res;
+        setTimeout(() => {
+          this.show = true;
+        }, 500);
+      });
     },
     setOptions(val, sysCode) {
       this.$set(this.options, sysCode, val);

package/packages/data-table/src/sizer.vue

@@ -1,17 +1,21 @@
 <template>
-  <es-dialog v-if="theads.length" title="设置" :visible.sync="visible">
+  <div class="es-table-sizer">
+    <div class="es-table-sizer-tips">
+      提示：锁定的列排序无效，列的内容是数字才能合计
+    </div>
     <es-data-table
-      v-if="visible"
+      dragSort
       numbers
       form
       row-key="id"
       default-expand-all
-      height="500px"
+      height="480px"
       :mode="mode"
       :data="theads"
       :thead="thead"
       :tree-props="{ children: 'childHead' }"
       @change="handleChange"
+      @update-drag-sort="handleDrag"
     >
     </es-data-table>
     <div class="sizer-btn-box">
@@ -19,7 +23,7 @@
         >确定</el-button
       >
     </div>
-  </es-dialog>
+  </div>
 </template>
 
 <script type="text/babel">
@@ -34,9 +38,9 @@ export default {
     theads: {
       get() {
         if (this.data && this.data.length) {
-          let thead = [];
-          this.getThead(this.data, thead);
-          return thead;
+          let newData = [];
+          this.getThead(this.data, newData);
+          return newData;
         }
         return [];
       }
@@ -47,11 +51,11 @@ export default {
       visible: false,
       thead: [
         {
-          title: '标题',
+          title: '名称',
           field: 'title'
         },
         {
-          title: '列固定位置',
+          title: '锁定列位置',
           field: 'fixed',
           type: 'select',
           clearable: true,
@@ -68,7 +72,7 @@ export default {
           ]
         },
         {
-          title: '显示列',
+          title: '列是否显示',
           field: 'hide',
           type: 'switch',
           width: 160,
@@ -83,10 +87,27 @@ export default {
               name: '显示'
             }
           ]
+        },
+        {
+          title: '是否开启合计',
+          field: 'total',
+          type: 'switch',
+          width: 160,
+          align: 'center',
+          data: [
+            {
+              value: false,
+              name: '关闭'
+            },
+            {
+              value: true,
+              name: '开启'
+            }
+          ]
         }
       ],
-      id: 1,
-      newThead: []
+      newThead: [],
+      nid: 0
     };
   },
   mounted() {
@@ -97,12 +118,8 @@ export default {
       this.visible = true;
     },
     getThead(res, data) {
-      res.forEach((item) => {
-        if (
-          item.type !== 'index' &&
-          item.type !== 'selection' &&
-          item.type !== 'handle'
-        ) {
+      res.forEach((item, index) => {
+        if (item.type !== 'index' && item.type !== 'selection') {
           let { fixed, hide, childHead, children, title, ...other } = item;
           let items = {
             title: title ? title : item.label,
@@ -113,10 +130,9 @@ export default {
                 ? ''
                 : fixed,
             hide: hide ? false : true,
-            id: this.id,
+            id: index,
             ...other
           };
-          this.id++;
           if (childHead && childHead.length) {
             let childHeads = [];
             this.getThead(childHead, childHeads);
@@ -128,6 +144,8 @@ export default {
             items.children = childHeads;
           }
           data.push(items);
+        } else {
+          this.nid++;
         }
       });
     },
@@ -152,10 +170,21 @@ export default {
     handleChange(res) {
       this.setThead(res, this.newThead);
     },
+    handleDrag(res, evt) {
+      let { oldIndex, newIndex } = evt;
+      oldIndex += this.nid;
+      newIndex += this.nid;
+      if (oldIndex > newIndex) {
+        this.newThead.splice(newIndex, 0, this.newThead[oldIndex]);
+        this.newThead.splice(oldIndex + 1, 1);
+      } else {
+        this.newThead.splice(newIndex + 1, 0, this.newThead[oldIndex]);
+        this.newThead.splice(oldIndex, 1);
+      }
+    },
     handleConfirm() {
       this.visible = false;
-      this.$parent.show = false;
-      this.$parent.mergeThead(this.newThead);
+      this.$emit('confirm', this.newThead);
     }
   }
 };