eoss-ui 0.3.97

package/packages/tabs/src/main.vue

@@ -0,0 +1,749 @@
+<template>
+  <el-tabs
+    class="es-tabs"
+    v-bind="{ type: mold, ...$attrs }"
+    v-on="$listeners"
+    v-model="activeName"
+    ref="elTab"
+    :before-leave="handleBefore"
+    :class="{ 'es-tabs-full': isFull }"
+    :style="style"
+  >
+    <slot></slot>
+    <template v-for="(items, indexs) in tabs">
+      <el-tab-pane
+        v-if="!items.hide"
+        :key="indexs"
+        :label="items.label"
+        :immediate="items.immediate"
+        :name="items.name || String(indexs)"
+      >
+        <template slot="label" v-if="items.title">
+          <span>
+            <template v-if="typeof items.title === 'object'">
+              <i v-if="items.title.icon" :class="items.title.icon"></i>
+              <el-badge
+                v-if="
+                  Object.prototype.hasOwnProperty.call(items.title, 'count')
+                "
+                type="primary"
+                :value="items.title.count"
+                :max="99"
+              >
+              </el-badge>
+              {{ items.title.text }}
+            </template>
+            <template v-else>{{ items.title }}</template>
+          </span>
+        </template>
+        <es-tabs-panel v-bind="items" :show="activeName === String(indexs)">
+          <template slot-scope="{ contents, average, data, title, show }">
+            <template v-if="Array.isArray(contents)">
+              <template v-for="(item, index) in contents">
+                <div class="es-tab-pane-list" :key="index" v-if="average">
+                  <div class="es-tab-pane-main">
+                    <template v-if="item.htmlType">
+                      <template v-if="item.htmlType === 'h1'">
+                        <h1
+                          v-if="item.html"
+                          :style="item.style"
+                          v-html="item.html"
+                        ></h1>
+                        <h1 v-else :style="item.style">
+                          {{ item.text }}
+                        </h1>
+                      </template>
+                      <template v-if="item.htmlType === 'h2'">
+                        <h2
+                          v-if="item.html"
+                          :style="item.style"
+                          v-html="item.html"
+                        ></h2>
+                        <h2 v-else :style="item.style">
+                          {{ item.text }}
+                        </h2>
+                      </template>
+                      <ul v-if="item.htmlType === 'ul'" :style="item.style">
+                        <template v-for="(liItem, liIndex) in data">
+                          <li
+                            v-if="liitems.html"
+                            :key="liIndex"
+                            v-html="liitems.html"
+                          ></li>
+                          <li v-else :key="liIndex">
+                            {{ liItem }}
+                          </li>
+                        </template>
+                      </ul>
+                      <img
+                        v-if="
+                          item.htmlType === 'image' || item.htmlType === 'img'
+                        "
+                        :src="item.url"
+                        :style="item.style"
+                      />
+                      <template v-if="item.htmlType === 'p'">
+                        <p
+                          v-if="item.html"
+                          :style="item.style"
+                          v-html="item.html"
+                        ></p>
+                        <p v-else :style="item.style">
+                          {{ item.text }}
+                        </p>
+                      </template>
+                      <template v-if="item.htmlType === 'div'">
+                        <div
+                          v-if="item.html"
+                          :style="item.style"
+                          v-html="item.html"
+                        ></div>
+                        <div v-else :style="item.style">
+                          {{ item.text }}
+                        </div>
+                      </template>
+                    </template>
+                    <template v-else>
+                      <es-data-table
+                        v-if="
+                          item.type === 'data-table' ||
+                            item.type === 'dataTable' ||
+                            item.type === 'flow-list' ||
+                            item.type === 'flowList'
+                        "
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['events', 'visible', 'type']
+                          })
+                        "
+                        :display="show"
+                        :class="{
+                          'es-flow-group-data-table':
+                            item.type === 'data-table' ||
+                            item.type === 'dataTable',
+                          'es-flow-list':
+                            item.type === 'flow-list' ||
+                            item.type === 'flowList'
+                        }"
+                        v-on="item.events"
+                      >
+                        <template v-if="item.dialog" slot="dialog">
+                          <template v-if="Array.isArray(item.dialog)">
+                            <es-dialog
+                              v-for="(ele, ids) in item.dialog"
+                              :isReload="true"
+                              v-bind="
+                                handleExclAttribute({
+                                  data: ele,
+                                  attrs: ['visible']
+                                })
+                              "
+                              :key="ids"
+                              :visible.sync="ele.visible"
+                              v-on="{ ...ele.events }"
+                            >
+                            </es-dialog>
+                          </template>
+                          <es-dialog
+                            v-else
+                            :isReload="true"
+                            v-bind="
+                              handleExclAttribute({
+                                data: item.dialog,
+                                attrs: ['visible']
+                              })
+                            "
+                            :visible.sync="item.dialog.visible"
+                            v-on="{ ...item.dialog.events }"
+                          >
+                          </es-dialog>
+                        </template>
+                      </es-data-table>
+                      <es-tree-group
+                        v-if="
+                          item.type === 'tree-group' ||
+                            item.type === 'treeGroup'
+                        "
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['events', 'visible', 'type']
+                          })
+                        "
+                        :display="show"
+                        v-on="{ ...item.events }"
+                      ></es-tree-group>
+                      <iframe
+                        v-if="item.type === 'iframe' && !item.blank"
+                        :id="item.id || item.name"
+                        :name="item.name"
+                        frameborder="0"
+                        width="100%"
+                        height="100%"
+                        :src="
+                          handleUrlJoinParams({
+                            url: item.url,
+                            param: item.param || {}
+                          })
+                        "
+                      ></iframe>
+                      <es-upload
+                        v-if="item.type === 'attachment'"
+                        :file-count.sync="title.count"
+                        height="auto"
+                        class="es-attachment"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['events', 'type']
+                          })
+                        "
+                        :display="show"
+                        v-on="{ ...item.events }"
+                      ></es-upload>
+                    </template>
+                  </div>
+                </div>
+                <template v-else>
+                  <template v-if="item.htmlType === 'h1'">
+                    <h1
+                      v-if="item.html"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                      v-html="item.html"
+                    ></h1>
+                    <h1
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                    >
+                      {{ item.text }}
+                    </h1>
+                  </template>
+                  <template v-if="item.htmlType === 'h2'">
+                    <h2
+                      v-if="item.html"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                      v-html="item.html"
+                    ></h2>
+                    <h2
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                    >
+                      {{ item.text }}
+                    </h2>
+                  </template>
+                  <template v-if="item.htmlType === 'ul'">
+                    <ul
+                      v-if="item.html"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                      v-html="item.html"
+                    ></ul>
+                    <ul
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                    >
+                      <template v-for="(liItem, liIndex) in data">
+                        <li
+                          v-if="liitems.html"
+                          :key="liIndex"
+                          v-html="liitems.html"
+                        ></li>
+                        <li v-else :key="liIndex">
+                          {{ liItem }}
+                        </li>
+                      </template>
+                    </ul>
+                  </template>
+                  <template
+                    v-if="item.htmlType === 'image' || item.htmlType === 'img'"
+                  >
+                    <img
+                      :key="index"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType', 'src']
+                        })
+                      "
+                      :src="item.url || item.src"
+                    />
+                  </template>
+                  <template v-if="item.htmlType === 'p'">
+                    <p
+                      v-if="item.html"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                      v-html="item.html"
+                    ></p>
+                    <p
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['text', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                    >
+                      {{ item.text }}
+                    </p>
+                  </template>
+                  <template v-if="item.htmlType === 'div'">
+                    <div
+                      v-if="item.html"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                      v-html="item.html"
+                    ></div>
+                    <div
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['html', 'htmlType']
+                        })
+                      "
+                      :key="index"
+                    >
+                      {{ item.text }}
+                    </div>
+                  </template>
+                  <es-form
+                    v-if="item.type === 'form'"
+                    ref="esFlowForm"
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['events', 'visible', 'model', 'type', 'ref']
+                      })
+                    "
+                    full
+                    :model.sync="item.model"
+                    :display="show"
+                    :key="index"
+                    :closeDialog="false"
+                    v-on="{ ...item.events }"
+                  ></es-form>
+                  <es-data-table
+                    v-if="
+                      item.type === 'data-table' ||
+                        item.type === 'dataTable' ||
+                        item.type === 'flow-list' ||
+                        item.type === 'flowList'
+                    "
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['events', 'visible', 'type']
+                      })
+                    "
+                    :class="{
+                      'es-flow-group-data-table':
+                        item.type === 'data-table' || item.type === 'dataTable',
+                      'es-flow-list':
+                        item.type === 'flow-list' || item.type === 'flowList'
+                    }"
+                    :display="show"
+                    :key="index"
+                    v-on="item.events"
+                  >
+                    <template v-if="item.dialog" slot="dialog">
+                      <template v-if="Array.isArray(item.dialog)">
+                        <es-dialog
+                          v-for="(ele, ids) in item.dialog"
+                          :isReload="true"
+                          v-bind="
+                            handleExclAttribute({
+                              data: ele,
+                              attrs: ['visible']
+                            })
+                          "
+                          :key="ids"
+                          :visible.sync="ele.visible"
+                          v-on="{ ...ele.events }"
+                        >
+                        </es-dialog>
+                      </template>
+                      <es-dialog
+                        v-else
+                        :isReload="true"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.dialog,
+                            attrs: ['visible']
+                          })
+                        "
+                        :visible.sync="item.dialog.visible"
+                        v-on="{ ...item.dialog.events }"
+                      >
+                      </es-dialog>
+                    </template>
+                  </es-data-table>
+                  <es-tree-group
+                    v-if="
+                      item.type === 'tree-group' || item.type === 'treeGroup'
+                    "
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['events', 'visible', 'type']
+                      })
+                    "
+                    :key="index"
+                    :display="show"
+                    v-on="{ ...item.events }"
+                  ></es-tree-group>
+                  <iframe
+                    v-if="item.type === 'iframe' && !item.blank"
+                    frameborder="0"
+                    width="100%"
+                    height="100%"
+                    :key="index"
+                    :id="item.id || item.name"
+                    :name="item.name"
+                    :src="
+                      handleUrlJoinParams({
+                        url: item.url,
+                        param: item.param || {}
+                      })
+                    "
+                  ></iframe>
+                  <es-upload
+                    v-if="item.type === 'attachment'"
+                    height="auto"
+                    class="es-attachment"
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['events', 'type']
+                      })
+                    "
+                    :file-count.sync="title.count"
+                    :key="index"
+                    :display="show"
+                    v-on="{ ...item.events }"
+                  ></es-upload>
+                  <es-dialog
+                    v-if="item.type === 'dialog'"
+                    :isReload="true"
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['visible', 'type']
+                      })
+                    "
+                    :key="index"
+                    :visible.sync="item.visible"
+                    v-on="{ ...item.events }"
+                  >
+                  </es-dialog>
+                </template>
+              </template>
+            </template>
+            <template v-else>
+              <es-form
+                v-if="contents.type === 'form'"
+                ref="esFlowForm"
+                v-bind="
+                  handleExclAttribute({
+                    data: contents,
+                    attrs: ['events', 'visible', 'model', 'type', 'ref']
+                  })
+                "
+                full
+                :model.sync="contents.model"
+                :display="show"
+                :closeDialog="false"
+                v-on="{ ...contents.events }"
+              ></es-form>
+              <es-data-table
+                v-if="
+                  contents.type === 'data-table' ||
+                    contents.type === 'dataTable' ||
+                    contents.type === 'flow-list' ||
+                    items.contents.type === 'flowList'
+                "
+                v-bind="
+                  handleExclAttribute({
+                    data: contents,
+                    attrs: ['events', 'visible', 'type']
+                  })
+                "
+                :class="{
+                  'es-flow-group-data-table':
+                    contents.type === 'data-table' ||
+                    items.contents.type === 'dataTable',
+                  'es-flow-list':
+                    contents.type === 'flow-list' ||
+                    contents.type === 'flowList'
+                }"
+                :display="show"
+                v-on="contents.events"
+              >
+                <template v-if="contents.dialog" slot="dialog">
+                  <template v-if="Array.isArray(contents.dialog)">
+                    <es-dialog
+                      v-for="(ele, ids) in contents.dialog"
+                      :isReload="true"
+                      v-bind="
+                        handleExclAttribute({
+                          data: ele,
+                          attrs: ['visible']
+                        })
+                      "
+                      :key="ids"
+                      :visible.sync="ele.visible"
+                      v-on="{ ...ele.events }"
+                    >
+                    </es-dialog>
+                  </template>
+                  <es-dialog
+                    v-else
+                    :isReload="true"
+                    v-bind="
+                      handleExclAttribute({
+                        data: contents.dialog,
+                        attrs: ['visible']
+                      })
+                    "
+                    :visible.sync="contents.dialog.visible"
+                    v-on="{ ...contents.dialog.events }"
+                  >
+                  </es-dialog>
+                </template>
+              </es-data-table>
+              <es-tree-group
+                v-if="
+                  contents.type === 'tree-group' ||
+                    contents.type === 'treeGroup'
+                "
+                v-bind="
+                  handleExclAttribute({
+                    data: contents,
+                    attrs: ['events', 'visible', 'type']
+                  })
+                "
+                :display="show"
+                v-on="{ ...contents.events }"
+              ></es-tree-group>
+              <iframe
+                v-if="contents.type === 'iframe' && !contents.blank"
+                :id="contents.id || contents.name"
+                :name="contents.name"
+                frameborder="0"
+                width="100%"
+                height="100%"
+                :src="
+                  handleUrlJoinParams({
+                    url: contents.url,
+                    param: contents.param || {}
+                  })
+                "
+              ></iframe>
+              <es-upload
+                v-if="contents.type === 'attachment'"
+                v-bind="
+                  handleExclAttribute({
+                    data: contents,
+                    attrs: ['events', 'type']
+                  })
+                "
+                :display="show"
+                :file-count.sync="title.count"
+                height="auto"
+                class="es-attachment"
+                v-on="{ ...contents.events }"
+              ></es-upload>
+            </template>
+          </template>
+        </es-tabs-panel>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsTabs',
+  inheritAttrs: false,
+  provide() {
+    return {
+      esTabs: this
+    };
+  },
+  props: {
+    mold: String,
+    full: {
+      type: Boolean,
+      default: undefined
+    },
+    height: String,
+    value: {
+      type: String,
+      default: '0'
+    },
+    isSubmit: Boolean,
+    multiple: Boolean,
+    // 页面主体内容
+    contents: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  watch: {
+    activeName(val) {
+      this.$emit('input', val);
+    },
+    tabs: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val.length) {
+          if (this.isSubmit) {
+            let obj = {};
+            val.forEach((item, index) => {
+              let key = item.name || String(index);
+              if (Array.isArray(item.contents)) {
+                obj[key] = true;
+                for (let i = 0; i < item.contents.length; i++) {
+                  if (item.contents[i].type === 'form') {
+                    obj[key] = Object.prototype.hasOwnProperty.call(
+                      item.contents[i],
+                      'isSubmit'
+                    )
+                      ? item.contents[i].isSubmit
+                      : this.isSubmit
+                      ? false
+                      : true;
+                    break;
+                  }
+                }
+              } else {
+                obj[key] =
+                  item.contents.type === 'form'
+                    ? (obj[key] = Object.prototype.hasOwnProperty.call(
+                        item.contents,
+                        'isSubmit'
+                      )
+                        ? item.contents.isSubmit
+                        : this.isSubmit
+                        ? false
+                        : true)
+                    : true;
+              }
+            });
+            this.state = obj;
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    tabs() {
+      return this.contents ? this.contents : [];
+    },
+    isFull() {
+      return this.full !== undefined ? this.full : this.fill;
+    },
+    style() {
+      return {
+        height: this.height ? this.height : this.full || this.fill ? '100%' : ''
+      };
+    }
+  },
+  data() {
+    return {
+      activeName: this.value,
+      state: {},
+      id: null,
+      fill: false
+    };
+  },
+  mounted() {
+    if (
+      this.$el.parentNode.children.length == 1 &&
+      util.getStyle(this.$el.parentNode, 'height')
+    ) {
+      this.fill = true;
+    }
+  },
+  methods: {
+    handleExclAttribute({ data, attrs }) {
+      return util.exclAttribute({
+        data: data,
+        attrs: attrs
+      });
+    },
+    handleUrlJoinParams({ url, param }) {
+      return util.urlJoinParams({ url, param });
+    },
+    handleBefore(active, old) {
+      return new Promise((resolve, reject) => {
+        if (this.isSubmit && old !== undefined && !this.state[old]) {
+          reject();
+          this.$alert('请先保存基本信息', '提示!', {
+            confirmButtonText: '确定'
+          }).catch(() => {});
+        } else {
+          resolve();
+        }
+      });
+    },
+    handleTabState(res) {
+      this.isSubmit && this.$set(this.state, this.activeName, res);
+    },
+    handleChangeData(res) {
+      this.$emit('changeData', res);
+    }
+  }
+};
+</script>