eoss-ui 0.5.81-beta19 → 0.5.81-beta20

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

@@ -0,0 +1,430 @@
+<template>
+  <el-form-item
+    :name="name"
+    :prop="field || prop"
+    :rules="rules"
+    :index="index"
+  >
+    <es-select
+      v-if="type == 'select'"
+      v-bind="formOption"
+      :data="option"
+      v-model="model"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    ></es-select>
+    <es-cascader
+      v-else-if="getType('cascader', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    >
+    </es-cascader>
+    <es-select-ganged
+      v-else-if="getType('ganged', scope)"
+      v-bind="formOption"
+      :data="init(option, config)"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            item: item
+          });
+        }
+      "
+    ></es-select-ganged>
+    <es-radio-group
+      v-else-if="getType('radio', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-radio-group>
+    <es-checkbox-group
+      v-else-if="getType('checkbox', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-checkbox-group>
+    <es-switch
+      v-else-if="getType('switch', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-switch>
+    <es-date-picker
+      v-else-if="
+        config.date ||
+        getType(
+          type,
+          [
+            'date',
+            'year',
+            'month',
+            'date',
+            'dates',
+            'week',
+            'datetime',
+            'datetimerange',
+            'daterange',
+            'monthrange',
+            'quarter',
+            'halfyear'
+          ],
+          scope
+        )
+      "
+      v-bind="formOption"
+      v-model="scope.row[field || prop]"
+      :type="type"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    ></es-date-picker>
+    <es-input-number
+      v-else-if="getType('number', scope)"
+      v-bind="formOption"
+      v-model="scope.row[field || prop]"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    ></es-input-number>
+    <es-selector
+      v-else-if="getType('selector', scope)"
+      v-bind="formOption"
+      v-model="scope.row[field || prop]"
+      v-on="
+        exclAttribute({
+          data: events,
+          attrs: 'change'
+        })
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-selector>
+    <template v-else-if="getType(['text', 'input', 'textarea'])">
+      <template v-if="config.lazy">
+        <input
+          v-if="getType(['text', 'input'], scope)"
+          class="el-input__inner"
+          v-bind="formOption"
+          v-model.lazy="scope.row[field]"
+          @blur="
+            (event) => {
+              handleBlur({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @focus="
+            (event) => {
+              handleFocus({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @change="
+            (value) => {
+              handleChange({
+                item: config,
+                name: field || prop,
+                value: value,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+        />
+        <textarea
+          v-else
+          class="el-textarea__inner"
+          v-bind="formOption"
+          v-model.lazy="scope.row[field]"
+          @blur="
+            (event) => {
+              handleBlur({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @focus="
+            (event) => {
+              handleFocus({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @change="
+            (value) => {
+              handleChange({
+                item: config,
+                name: field || prop,
+                value: value,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+        ></textarea>
+      </template>
+      <es-input
+        v-else
+        v-bind="formOption"
+        :type="type"
+        :scope="scope"
+        v-model="scope.row[field || prop]"
+        @blur="
+          (event) => {
+            handleBlur({
+              item: config,
+              event: event,
+              data: scope.row,
+              scope: scope
+            });
+          }
+        "
+        @focus="
+          (event) => {
+            handleFocus({
+              item: config,
+              event: event,
+              data: scope.row,
+              scope: scope
+            });
+          }
+        "
+        @change="
+          (value) => {
+            handleChange({
+              item: config,
+              name: field || prop,
+              value: value,
+              data: scope.row,
+              scope: scope
+            });
+          }
+        "
+      ></es-input>
+    </template>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  name: 'FormItem',
+  components: {},
+  props: {
+    scope: {},
+    type: String,
+    name: String,
+    value: {},
+    index: [String, Number],
+    labelKey: String,
+    valueKey: String,
+    field: String,
+    prop: String,
+    rules: [Array, Object]
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    getType(target, data) {
+      let type = this.type;
+      if (this.setType) {
+        let obj = this.setType(data);
+        if (util.isObject(obj)) {
+          type = obj.type;
+          this.options = obj.data;
+        } else {
+          type = obj;
+        }
+      }
+      return Array.isArray(target) ? target.includes(type) : type == target;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/main/src/default/index.vue

@@ -230,7 +230,9 @@ export default {
   inheritAttrs: false,
   provide() {
     return {
-      esMain: this
+      esMain: this,
+      refresh: this.handleRefresh,
+      jumpMenu: this.jumpMenu
     };
   },
   components: {

package/packages/main/src/main.vue

@@ -13,18 +13,44 @@
       ref="main"
       v-on="$listeners"
     ></main-default>
+
+    <!-- 公用弹窗 -->
+    <es-dialog
+      v-for="(item, index) in dialogs"
+      :visible.sync="visibles[index]"
+      :key="item.id || item.name || index"
+      size="md"
+      v-bind="
+        exclAttribute({
+          data: item,
+          attrs: ['visible', 'url']
+        })
+      "
+      @closed="handleClosed(item, index)"
+    >
+      <iframe
+        v-if="visibles[index]"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        :src="item.url"
+      ></iframe>
+    </es-dialog>
+    <!-- 公用弹窗 end -->
   </div>
 </template>
 <script>
 import Simplicity from './simplicity/index.vue';
 import MainDefault from './default/index.vue';
 import util from 'eoss-ui/src/utils/util';
+import WujieVue from 'wujie-vue2';
+const { bus } = WujieVue;
 export default {
   name: 'EsMain',
   inheritAttrs: false,
   provide() {
     return {
-      esMain: this
+      reLogin: this.handleReLogin
     };
   },
   components: {
@@ -39,13 +65,16 @@ export default {
   data() {
     return {
       appCode: '',
-      params: {}
+      params: {},
+      dialogs: [],
+      visibles: []
     };
   },
   created() {
     this.params = util.getParams() || {};
     this.appCode = this.params.appCode;
     this.getConfig(this.params);
+    // 主应用监听事件
   },
   mounted() {
     if (util.win.$wujie) {
@@ -53,10 +82,52 @@ export default {
         util.updateTheme(res);
       });
     }
+
     util.win.reLogin = this.handleReLogin;
     util.win.windowOpen = this.openPage;
     util.win.refresh = this.$refs.main.handleRefresh;
     util.win.jumpMenu = this.$refs.main.jumpMenu;
+    bus.$on('reLogin', this.handleReLogin);
+    bus.$on('refresh', this.$refs.main.handleRefresh);
+    bus.$on('jumpMenu', this.$refs.main.jumpMenu);
+    bus.$on('emit', function (method, args) {
+      // 主应用发送事件
+      bus.$emit(method, args);
+    });
+
+    window.addEventListener('message', (method, args) => {
+      switch (method) {
+        case 'reLogin':
+          this.handleReLogin(args);
+          break;
+        case 'refresh':
+          this.$refs.main.handleRefresh(args);
+          break;
+        case 'jumpMenu':
+          this.$refs.main.jumpMenu(args);
+          break;
+        case 'emit':
+          let origin = args.origin || '*';
+          window.postMessage(args, origin);
+          break;
+        case 'openDialog':
+          this.dialogs.push(args);
+          let index = this.visibles.length;
+          this.visibles.push(false);
+          this.$nextTick(() => {
+            this.$set(this.visibles, index, true);
+          });
+          break;
+        case 'closeDialog':
+          for (let i = 0; i < this.dialogs.length; i++) {
+            let item = this.dialogs[i];
+            if (item.url == args.url) {
+              this.$set(this.visibles, i, false);
+            }
+          }
+          break;
+      }
+    });
   },
   methods: {
     /**
@@ -208,6 +279,23 @@ export default {
       } else {
         return util.win.open(src);
       }
+    },
+    /**
+     * @desc:排除属性
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    exclAttribute({ data, attrs }) {
+      return util.exclAttribute({ data, attrs });
+    },
+    /**
+     * @desc:关闭dialog
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    handleClosed(res, index) {
+      this.dialogs.splice(index, 1);
+      this.visibles.splice(index, 1);
     }
   },
   beforeDestroy() {}

package/packages/main/src/simplicity/index.vue

@@ -98,22 +98,6 @@
       </div>
     </div>
     <div class="es-simplicity-main">
-      <!-- 菜单 -->
-      <sub-menu
-        :mode="mode"
-        :visible.sync="showMenu"
-        :closed.sync="fold"
-        :size="menuWidth"
-        :title="title"
-        :color="menuColor"
-        :backgroundColor="menuBackgroundColor"
-        :menu-icon="menuIcon"
-        :active="subActive"
-        v-bind="subMenus"
-        @command="handlerClickMenu"
-      ></sub-menu>
-      <!-- 菜单 end -->
-
       <!-- 应用 -->
       <apps
         :visible.sync="showApps"
@@ -212,6 +196,7 @@
         @tab-remove="handleRemove"
         @tab-contextmenu="handleContextmenu"
       >
+        <!-- 操作栏 -->
         <handler
           slot="append"
           v-bind="handleConfig"
@@ -224,6 +209,23 @@
           :notice-num="notice"
           @click="handleClick"
         ></handler>
+        <!-- 操作栏 end-->
+
+        <!-- 菜单 -->
+        <sub-menu
+          :mode="mode"
+          :visible.sync="showMenu"
+          :closed.sync="fold"
+          :size="menuWidth"
+          :title="title"
+          :color="menuColor"
+          :backgroundColor="menuBackgroundColor"
+          :menu-icon="menuIcon"
+          :active="subActive"
+          v-bind="subMenus"
+          @command="handlerClickMenu"
+        ></sub-menu>
+        <!-- 菜单 end -->
         <el-tab-pane
           v-for="item in tabs"
           :key="item.id"
@@ -382,6 +384,13 @@ let events = [
 ];
 export default {
   name: 'Simplicity',
+  provide() {
+    return {
+      esMain: this,
+      refresh: this.handleRefresh,
+      jumpMenu: this.jumpMenu
+    };
+  },
   components: {
     avatar,
     handler,
@@ -1288,19 +1297,26 @@ export default {
         }
         if (set && res.code) {
           let subMenus = this.getMenu(this.menus, res.code, 'appCode');
-          this.title = res.text || res.name;
-          this.subMenus = subMenus ? subMenus : null;
-          this.showMenu = subMenus !== false;
-          this.showApps = false;
-          if (subMenus && subMenus.url) {
-            let i = util.indexOfObj(this.tabs, subMenus, 'id');
-            this.activeName = subMenus.id;
-            if (i == -1) {
-              let tab = this.setIframeType(subMenus);
-              this.tabs.push(tab);
-            } else {
-              if (subMenus.method == 'iframe') {
-                subMenus.url = util.handlerUrl(subMenus.url);
+          if (!subMenus && !res.url) {
+            this.$alert('没有关联菜单，请联系管理员！', '提示', {
+              confirmButtonText: '确定',
+              type: 'warning'
+            }).catch(() => {});
+          } else {
+            this.title = res.text || res.name;
+            this.subMenus = subMenus ? subMenus : null;
+            this.showMenu = subMenus !== false;
+            this.showApps = false;
+            if (subMenus && subMenus.url) {
+              let i = util.indexOfObj(this.tabs, subMenus, 'id');
+              this.activeName = subMenus.id;
+              if (i == -1) {
+                let tab = this.setIframeType(subMenus);
+                this.tabs.push(tab);
+              } else {
+                if (subMenus.method == 'iframe') {
+                  subMenus.url = util.handlerUrl(subMenus.url);
+                }
               }
             }
           }