eoss-ui 0.4.17 → 0.4.19

package/packages/data-table-form/src/radio.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="el-radio-group">
+    <label
+      class="el-radio"
+      v-for="(item, index) in options"
+      :key="index"
+      @change="handeChange(item)"
+    >
+      <input type="radio" :name="_name" :checked="isChecked(item)" />{{
+        labelKey ? item[labelKey] : item.name || item.label
+      }}
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'EoRadio',
+  props: {
+    field: {
+      required: true,
+      type: String
+    },
+    prop: String,
+    index: Number,
+    labelKey: String,
+    valueKey: String,
+    data: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    value: {}
+  },
+  data() {
+    return {
+      _value: this.value
+    };
+  },
+  computed: {
+    _name() {
+      if (this.index !== undefined) {
+        return `${this.field || this.prop}[${this.index}]`;
+      }
+      return this.field || this.prop;
+    }
+  },
+  methods: {
+    isChecked(res) {
+      return this.valueKey
+        ? this.value == res[this.valueKey]
+        : this.value == res.value;
+    },
+    handeChange(res) {
+      this.$emit('input', this.valueKey ? res[this.valueKey] : res.value);
+    }
+  }
+};
+</script>

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

@@ -29,8 +29,25 @@
     ></es-pagination>
     <template v-if="types && options">
       <template v-for="(item, index) in types">
+        <es-dialog
+          v-if="item.type === 'selector' && selectorShow"
+          :title="item.title || '公用选择器'"
+          :visible.sync="selectorShow"
+          :css="false"
+          :append-to-body="true"
+          :close-on-click-modal="false"
+          class="es-selector-dialog"
+        >
+          <es-selector-panel
+            v-model="selectorValue"
+            v-bind="exclAttribute({ data: item, attrs: 'type' })"
+            width="100%"
+            height="100%"
+            @confirm="handleConfirm"
+          ></es-selector-panel>
+        </es-dialog>
         <es-select
-          v-if="item.type === 'select' && selectShow"
+          v-else-if="item.type === 'select' && selectShow"
           class="es-data-table-form-handle"
           v-bind="exclAttribute({ data: item, attrs: 'width' })"
           v-model="selectValue"
@@ -39,8 +56,8 @@
           :data="options[item.field || item.prop]"
           @hide-menu="selectShow = false"
           @change="
-            value => {
-              handleChange('date', value);
+            (value) => {
+              handleChange('select', value);
             }
           "
         ></es-select>
@@ -59,7 +76,7 @@
               item.type == 'monthrange' ||
               item.type == 'quarter' ||
               item.type == 'halfyear') &&
-              dateShow
+            dateShow
           "
           class="es-data-table-form-handle"
           v-bind="exclAttribute({ data: item, attrs: 'width' })"
@@ -68,7 +85,7 @@
           :style="style"
           @hidePicker="dateShow = false"
           @change="
-            value => {
+            (value) => {
               handleChange('date', value);
             }
           "
@@ -127,7 +144,9 @@ export default {
       field: null,
       style: {},
       dateValue: '',
-      dateShow: false
+      dateShow: false,
+      selectorShow: false,
+      selectorValue: ''
     };
   },
   watch: {
@@ -160,6 +179,10 @@ export default {
           this.dateValue = value;
           this.dateShow = true;
           break;
+        case 'selector':
+          this.selectorValue = value;
+          this.selectorShow = true;
+          break;
       }
     },
     setStyle(res, data, field) {
@@ -183,6 +206,11 @@ export default {
           break;
       }
     },
+    handleConfirm(res) {
+      this.selectorValue = '';
+      this.selectorShow = false;
+      this.target[this.field] = res;
+    },
     sizeChange() {},
     currentChange() {},
     preClick() {},

package/packages/data-table-form/src/tbody.vue

@@ -6,9 +6,9 @@
         <template
           v-if="
             readonly ||
-              items.canEdit === false ||
-              (items.cantEditKey &&
-                items.cantEditKey.indexOf(item.field || item.prop) > -1)
+            items.canEdit === false ||
+            (items.cantEditKey &&
+              items.cantEditKey.indexOf(item.field || item.prop) > -1)
           "
         >
           <expand-dom
@@ -28,17 +28,31 @@
           </div>
         </template>
         <template v-else>
+          <eo-radio
+            v-if="item.type === 'radio'"
+            v-bind="item"
+            v-model="items[item.field || item.prop]"
+            :index="indexs"
+            :options="options[item.field || item.prop]"
+          ></eo-radio>
+          <eo-checkbox
+            v-if="item.type === 'checkbox'"
+            v-bind="item"
+            v-model="items[item.field || item.prop]"
+            :index="indexs"
+            :options="options[item.field || item.prop]"
+          ></eo-checkbox>
           <textarea
-            v-if="item.type === 'textarea'"
+            v-else-if="item.type === 'textarea'"
             class="el-textarea__inner"
             v-model.lazy="items[item.field]"
             @blur="
-              event => {
+              (event) => {
                 handleBlur({ item: item, event: event, data: items });
               }
             "
             @focus="
-              event => {
+              (event) => {
                 handleFocus({
                   item: item,
                   event: event,
@@ -47,7 +61,7 @@
               }
             "
             @change="
-              value => {
+              (value) => {
                 handleChange({
                   name: item.field || item.prop,
                   value: value,
@@ -58,27 +72,90 @@
           ></textarea>
           <div v-else class="es-input-box">
             <div
-              v-if="item.type === 'select'"
-              class="el-input__inner input-label"
+              v-if="item.type === 'select' || item.type === 'selector'"
+              class="el-input__inner es-select"
+              :class="{
+                'es-select-multiple':
+                  item.type === 'select'
+                    ? item.multiple
+                    : item.multiple !== false
+              }"
+              @click="
+                (event) => {
+                  handeClick({ item: item, event: event, data: items });
+                }
+              "
             >
-              {{ getLabels(items, item) }}
+              <template
+                v-if="
+                  item.type === 'select'
+                    ? item.multiple
+                    : item.multiple !== false
+                "
+              >
+                <template v-if="item.collapseTags">
+                  <span class="el-tag el-tag--info el-tag--small el-tag--light">
+                    <span class="el-select__tags-text">{{
+                      showLabel(getLabels(items, item, true)[0], item.labelKey)
+                    }}</span>
+                    <i
+                      class="el-tag__close el-icon-close"
+                      @click.stop="
+                        handleDelete(
+                          items,
+                          item,
+                          0,
+                          getLabels(items, item, true)[0]
+                        )
+                      "
+                    ></i
+                  ></span>
+                  <span
+                    class="el-tag el-tag--info el-tag--small el-tag--light"
+                    v-if="getLabels(items, item, true).length > 1"
+                  >
+                    <span class="el-select__tags-text"
+                      >+ {{ getLabels(items, item, true).length - 1 }}</span
+                    ></span
+                  >
+                </template>
+                <template v-else>
+                  <span
+                    class="el-tag el-tag--info el-tag--small el-tag--light"
+                    v-for="(ele, x) in getLabels(items, item, true)"
+                    :key="x"
+                  >
+                    <span class="el-select__tags-text">{{
+                      showLabel(ele, item.labelKey)
+                    }}</span>
+                    <i
+                      class="el-tag__close el-icon-close"
+                      @click.stop="handleDelete(items, item, x, ele)"
+                    ></i>
+                  </span>
+                </template>
+              </template>
+              <template v-else>
+                {{ getLabels(items, item) }}
+              </template>
             </div>
             <input
+              v-else
               class="el-input__inner"
               :readonly="item.type && item.type !== 'text'"
               v-model.lazy="items[item.field]"
               @click="
-                event => {
+                (event) => {
                   handeClick({ item: item, event: event, data: items });
                 }
               "
               @blur="
-                event => {
+                (event) => {
                   handleBlur({ item: item, event: event, data: items });
                 }
               "
               @focus="
-                event => {
+                (event) => {
                   handleFocus({
                     item: item,
                     event: event,
@@ -87,7 +164,7 @@
                 }
               "
               @change="
-                value => {
+                (value) => {
                   handleChange({
                     name: item.field || item.prop,
                     value: value,
@@ -105,10 +182,14 @@
 <script>
 // import rules from 'eoss-ui/src/utils/rules.js';
 import util from 'eoss-ui/src/utils/util';
+import eoRadio from './radio.vue';
+import eoCheckbox from './checkbox.vue';
 export default {
   name: 'EoTbody',
   inject: ['eoTable'],
   components: {
+    [eoRadio.name]: eoRadio,
+    [eoCheckbox.name]: eoCheckbox,
     expandDom: {
       functional: true,
       props: {
@@ -166,25 +247,34 @@ export default {
           : item.type;
       this.eoTable.changeData(type, data[item.field || item.prop]);
     },
-    getLabels(data, col) {
+    getLabels(data, col, multiple) {
       let value = data[col.field || col.prop];
       if (col.label === false) {
         return Array.isArray(value) ? value.join(',') : value;
       }
       let option = this.options[col.field || col.prop];
       if (util.isObject(value)) {
+        if (multiple) {
+          return [value];
+        }
         return (
-          data[col.field][col.labelKey] ||
-          data[col.field]['name'] ||
-          data[col.field]['label']
+          value[col.labelKey] ||
+          value['name'] ||
+          value['label'] ||
+          value['showname']
         );
       } else if (Array.isArray(value)) {
-        let label = value.map(item => {
+        let label = value.map((item) => {
           if (util.isObject(item)) {
-            return item[col.labelKey] || item.name || item.label;
+            if (multiple) {
+              return item;
+            }
+            return (
+              item[col.labelKey] || item.name || item.label || item.showname
+            );
           } else {
             if (option) {
-              let str = this.getLabel(item, option, col);
+              let str = this.getLabel(item, option, col, multiple);
               if (str) {
                 return str;
               }
@@ -193,26 +283,50 @@ export default {
             }
           }
         });
-        return label.join(',');
+        return multiple ? label : label.join(',');
       } else {
         if (option) {
-          return this.getLabel(value, option, col);
+          return this.getLabel(value, option, col, multiple);
         } else {
+          if (multiple) {
+            return [value];
+          }
           return value;
         }
       }
     },
-    getLabel(value, option, col) {
+    getLabel(value, option, col, multiple) {
       for (let i = 0; i < option.length; i++) {
         let item = option[i];
         if (value == item) {
           return value;
         }
         if (value == item[col.valueKey] || value == item.value) {
-          return item[col.labelKey] || item.name || item.label;
+          if (multiple) {
+            return item;
+          }
+          return item[col.labelKey] || item.name || item.label || item.showname;
         }
       }
       return '';
+    },
+    showLabel(res, labelKey) {
+      return typeof res === 'string'
+        ? res
+        : res[labelKey] || res.name || res.label || res.showname;
+    },
+    handleDelete(data, col, index, res) {
+      let value = data[col.field];
+      value = value.filter((item) => {
+        let target = util.isObject(item)
+          ? item[col.labelKey] || item.name || item.label || item.showname
+          : item;
+        let val = util.isObject(res)
+          ? res[col.labelKey] || res.name || res.label || res.showname
+          : res;
+        return target != val;
+      });
+      data[col.field] = value;
     }
   }
 };

package/packages/dialog/src/main.vue

@@ -8,12 +8,15 @@
     :close-on-click-modal="shadeClose"
     :fullscreen="full"
     :drag="drag"
+    :modal-append-to-body="modalAppendToBody"
     v-bind="$attrs"
     v-on="$listeners"
     :class="{ 'is-middle': middle }"
     :append-to-body="appendToBody"
     :id="wujieName"
     :ref="wujieName"
+    @close="handleClosed"
+    @scale="handleScale"
   >
     <slot></slot>
     <template v-if="contents">
@@ -28,6 +31,7 @@
                 attrs: ['events', 'visible', 'type', 'model']
               })
             "
+            :zoom="zoom"
             :model.sync="item.model"
             v-on="{ ...item.events }"
           ></es-form>
@@ -40,6 +44,7 @@
                 attrs: ['events', 'visible', 'type']
               })
             "
+            :zoom="zoom"
             v-on="item.events"
           >
             <template v-if="item.dialog" slot="dialog">
@@ -83,6 +88,7 @@
                 attrs: ['events', 'visible', 'type']
               })
             "
+            :zoom="zoom"
             v-on="{ ...item.events }"
           ></es-tree-group>
           <es-flow-group
@@ -106,6 +112,7 @@
                 attrs: ['events', 'visible', 'type']
               })
             "
+            :zoom="zoom"
             v-on="{ ...item.events }"
           ></es-tabs>
           <es-dialog
@@ -156,6 +163,7 @@
               attrs: ['events', 'visible', 'type', 'model']
             })
           "
+          :zoom="zoom"
           :model.sync="contents.model"
           v-on="{ ...contents.events }"
         ></es-form>
@@ -167,6 +175,7 @@
               attrs: ['events', 'visible', 'type']
             })
           "
+          :zoom="zoom"
           v-on="contents.events"
         >
           <template v-if="contents.dialog" slot="dialog">
@@ -209,6 +218,7 @@
               attrs: ['events', 'visible', 'type']
             })
           "
+          :zoom="zoom"
           v-on="{ ...contents.events }"
         ></es-tree-group>
         <es-flow-group
@@ -219,6 +229,7 @@
               attrs: ['events', 'visible', 'type']
             })
           "
+          :zoom="zoom"
           v-on="{ ...contents.events }"
         ></es-flow-group>
         <es-tabs
@@ -230,6 +241,7 @@
               attrs: ['events', 'visible', 'type']
             })
           "
+          :zoom="zoom"
           v-on="{ ...contents.events }"
         ></es-tabs>
         <iframe
@@ -268,7 +280,8 @@ export default {
   inheritAttrs: false,
   provide() {
     return {
-      esDialog: this
+      esDialog: this,
+      scale: this.zoom
     };
   },
   inject: {
@@ -307,6 +320,10 @@ export default {
       type: Boolean,
       default: true
     },
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    },
     appendToBody: {
       type: [Boolean, String],
       default: true
@@ -325,7 +342,8 @@ export default {
     drag: {
       type: Boolean,
       default: true
-    }
+    },
+    closeParent: Boolean
   },
   computed: {
     wujieName() {
@@ -357,7 +375,9 @@ export default {
       show: this.visible,
       defaultProps: {},
       wd: '',
-      ht: ''
+      ht: '',
+      zoom: 1,
+      scale: {}
     };
   },
   created() {
@@ -376,7 +396,7 @@ export default {
       this.ht = this.height ? this.height : this.sizes[this.size]['height'];
     }
     if (this.busEvent) {
-      mbus.$on(this.busEvent, async res => {
+      mbus.$on(this.busEvent, async (res) => {
         this.titles = res.title;
         this.handler && (await this.handler(res, this));
         this.handleShow();
@@ -425,6 +445,13 @@ export default {
     handleShow() {
       this.show = true;
     },
+    handleClosed(res) {
+      this.show = false;
+      this.$emit('close', res, this);
+      if (this.closeParent && this.esDialog) {
+        this.esDialog.handleClosed(res);
+      }
+    },
     handleClose(reload = true) {
       this.$refs[this.wujieName].hide();
       if (this.isReload !== false && reload !== 0 && reload !== false) {
@@ -436,6 +463,10 @@ export default {
           }
         }
       }
+    },
+    handleScale(res) {
+      this.zoom = res;
+      this.$emit('scale', res);
     }
   }
 };