n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcTable/ElTableColumnCustom/index.vue

@@ -1,292 +1,292 @@
-<template>
-  <!-- 多级结构 -->
-  <el-table-column
-      v-if="column.children && column.children.length"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <template v-if="column.explains" v-slot:header>
-      <template v-if="column.explains">
-        <el-button class="explain-txt">
-          {{ column.label }}
-          <el-tooltip class="item" effect="dark" placement="top-start">
-            <div slot="content" v-html="column.explains"/>
-            <!--            <img-->
-            <!--              :src="tipSrc"-->
-            <!--              alt=""-->
-            <!--              class="tipsImg"-->
-            <!--            >-->
-          </el-tooltip>
-        </el-button>
-      </template>
-    </template>
-    <ElTableColumnCustom
-        v-for="subColumn in column.children"
-        :key="`${column.prop || column.label}--${
-        subColumn.prop || subColumn.label
-      }`"
-        :column="subColumn"
-    />
-  </el-table-column>
-
-  <!-- scope注入 -->
-  <el-table-column
-      v-else-if="
-      column[`customSortable`] ||
-      column.component ||
-      column.header ||
-      column.handlers
-    "
-      :key="column.prop || column.label"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <!--  插入组件  -->
-    <template v-if="column.component || column.handlers" v-slot:default="scope">
-      <template v-if="column.handlers">
-        <template v-for="(handler, idx) in getHandlers(column, scope)">
-          <el-link
-              v-if="idx < breakNum && !handler.hidden"
-              :key="idx"
-              type="primary"
-              :disabled="!!handler.disabled"
-              style="margin-right: 10px"
-              @click="handleCommand(handler, scope)"
-          >
-            {{ handler.label }}
-          </el-link>
-        </template>
-
-        <ElDropdown
-            v-if="getHandlers(column, scope).length > breakNum"
-            placement="bottom-start"
-            :options="getHandlers(column, scope).slice(breakNum)"
-            @command="(item) => handleCommand(item, scope)"
-        >
-          <el-link>
-            <i class="el-icon-more"/>
-          </el-link>
-        </ElDropdown>
-      </template>
-
-      <template v-else>
-        <component
-            :is="compile(column.component, column, scope)"
-            v-if="'template' in column.component"
-        />
-        <component
-            :is="column.component"
-            v-else
-            :column="column"
-            :scope="scope"
-        />
-      </template>
-    </template>
-
-    <!--  插入表头  -->
-    <template
-        v-if="column.header || column[`customSortable`]"
-        v-slot:header="scope"
-    >
-      <template v-if="column.header">
-        <component
-            :is="compile(column.header, column, scope)"
-            v-if="'template' in column.header"
-        />
-        <component :is="column.header" v-else :column="column" :scope="scope"/>
-      </template>
-
-      <template v-if="column.customSortable">
-        <span class="sort-btn" @click="descend(column.prop)">
-          {{ column.label }}
-          <i
-              :class="[
-              'icon-anjiangxupailie',
-              'sort-btn-icon',
-              { active: sortProp === column.prop },
-            ]"
-          />
-        </span>
-      </template>
-    </template>
-  </el-table-column>
-
-  <!-- 只显示占比条和百分比 -->
-  <el-table-column
-      v-else-if="column.progress"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <template slot-scope="scope">
-      <el-progress
-          :percentage="scope.row[column.progress.valueKey]"
-          v-bind="column.progress"
-          type="line"
-      />
-    </template>
-  </el-table-column>
-
-  <!--显示原始值与占比条和百分比值 -->
-  <el-table-column
-      v-else-if="column.valueProgress"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-  >
-    <template slot-scope="scope">
-      <span class="progressbar-value">{{
-          scope.row[scope.column.property]
-        }}</span>
-      <el-progress
-          :percentage="scope.row[column.valueProgress.valueKey]"
-          v-bind="column.valueProgress"
-          type="line"
-      />
-    </template>
-  </el-table-column>
-
-  <el-table-column
-      v-else
-      :key="column.prop || column.label"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
-      show-overflow-tooltip
-  />
-</template>
-
-<script>
-import Vue from "vue";
-
-export default {
-  name: "ElTableColumnCustom",
-
-  props: {
-    column: {
-      default: () => {
-      },
-      type: Object,
-    },
-
-    sortProp: {
-      default: "",
-      type: String,
-    },
-
-    breakNum: {
-      type: [Number, String],
-      default: 2,
-    },
-  },
-
-  data() {
-    return {
-      // tipSrc
-    };
-  },
-
-  computed: {
-    headerAlign() {
-      const {headerAlign} = this.column;
-
-      return headerAlign || "center";
-    },
-
-    getHandlers() {
-      return ({handlers, formatHandlers}, scope) => {
-        return formatHandlers ? formatHandlers(handlers, scope) : handlers;
-      };
-    },
-  },
-
-  methods: {
-    compile(component, column, slotScope) {
-      const template = Vue.compile(component.template);
-      const data = {
-        data() {
-          return Object.assign({}, component.data, {
-            column,
-            scope: slotScope,
-          });
-        },
-      };
-      let obj = Object.assign({}, template, data, component);
-      //将传进的propData设置到新建的组件的data里面
-      if (obj.propData) {
-        if (obj.data) {
-          let dataObj = obj.data();
-          let keys = Object.keys(dataObj);
-          if (keys.length > 0) {
-            obj.data = function data() {
-              let map = {};
-              keys.forEach((key) => {
-                map[key] = dataObj[key];
-              });
-              //把传进的propData也塞进去
-              map = {...map, ...obj.propData};
-              return map;
-            };
-          }
-        }
-      }
-      return obj;
-    },
-
-    descend(prop) {
-      this.$emit("sortPropChange", prop);
-    },
-
-    async handleCommand(item, scope) {
-      try {
-        item.disabled = true;
-
-        item.handler && (await item.handler(scope));
-      } catch (err) {
-        console.error(err);
-      } finally {
-        // eslint-disable-next-line require-atomic-updates
-        item.disabled = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.sort-btn {
-  display: inline-block;
-  width: 100%;
-  // padding: 0 10px 0 0;
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  font-size: inherit;
-  font-weight: inherit;
-  min-width: 100%;
-  position: relative;
-  white-space: normal;
-
-  &-icon {
-    cursor: pointer;
-    color: #c8cdde;
-    position: absolute;
-    right: -4px;
-    top: 58%;
-    transform: translateY(-50%);
-
-    &.active {
-      color: #258ff8;
-    }
-
-    &:hover {
-      color: #258ff8;
-    }
-  }
-}
-</style>
+<template>
+  <!-- 多级结构 -->
+  <el-table-column
+      v-if="column.children && column.children.length"
+      :key="column.prop"
+      v-bind="column"
+      :header-align="headerAlign"
+      :align="column.align"
+  >
+    <template v-if="column.explains" v-slot:header>
+      <template v-if="column.explains">
+        <el-button class="explain-txt">
+          {{ column.label }}
+          <el-tooltip class="item" effect="dark" placement="top-start">
+            <div slot="content" v-html="column.explains"/>
+            <!--            <img-->
+            <!--              :src="tipSrc"-->
+            <!--              alt=""-->
+            <!--              class="tipsImg"-->
+            <!--            >-->
+          </el-tooltip>
+        </el-button>
+      </template>
+    </template>
+    <ElTableColumnCustom
+        v-for="subColumn in column.children"
+        :key="`${column.prop || column.label}--${
+        subColumn.prop || subColumn.label
+      }`"
+        :column="subColumn"
+    />
+  </el-table-column>
+
+  <!-- scope注入 -->
+  <el-table-column
+      v-else-if="
+      column[`customSortable`] ||
+      column.component ||
+      column.header ||
+      column.handlers
+    "
+      :key="column.prop || column.label"
+      v-bind="column"
+      :header-align="headerAlign"
+      :align="column.align"
+  >
+    <!--  插入组件  -->
+    <template v-if="column.component || column.handlers" v-slot:default="scope">
+      <template v-if="column.handlers">
+        <template v-for="(handler, idx) in getHandlers(column, scope)">
+          <el-link
+              v-if="idx < breakNum && !handler.hidden"
+              :key="idx"
+              type="primary"
+              :disabled="!!handler.disabled"
+              style="margin-right: 10px"
+              @click="handleCommand(handler, scope)"
+          >
+            {{ handler.label }}
+          </el-link>
+        </template>
+
+        <ElDropdown
+            v-if="getHandlers(column, scope).length > breakNum"
+            placement="bottom-start"
+            :options="getHandlers(column, scope).slice(breakNum)"
+            @command="(item) => handleCommand(item, scope)"
+        >
+          <el-link>
+            <i class="el-icon-more"/>
+          </el-link>
+        </ElDropdown>
+      </template>
+
+      <template v-else>
+        <component
+            :is="compile(column.component, column, scope)"
+            v-if="'template' in column.component"
+        />
+        <component
+            :is="column.component"
+            v-else
+            :column="column"
+            :scope="scope"
+        />
+      </template>
+    </template>
+
+    <!--  插入表头  -->
+    <template
+        v-if="column.header || column[`customSortable`]"
+        v-slot:header="scope"
+    >
+      <template v-if="column.header">
+        <component
+            :is="compile(column.header, column, scope)"
+            v-if="'template' in column.header"
+        />
+        <component :is="column.header" v-else :column="column" :scope="scope"/>
+      </template>
+
+      <template v-if="column.customSortable">
+        <span class="sort-btn" @click="descend(column.prop)">
+          {{ column.label }}
+          <i
+              :class="[
+              'icon-anjiangxupailie',
+              'sort-btn-icon',
+              { active: sortProp === column.prop },
+            ]"
+          />
+        </span>
+      </template>
+    </template>
+  </el-table-column>
+
+  <!-- 只显示占比条和百分比 -->
+  <el-table-column
+      v-else-if="column.progress"
+      :key="column.prop"
+      v-bind="column"
+      :header-align="headerAlign"
+      :align="column.align"
+  >
+    <template slot-scope="scope">
+      <el-progress
+          :percentage="scope.row[column.progress.valueKey]"
+          v-bind="column.progress"
+          type="line"
+      />
+    </template>
+  </el-table-column>
+
+  <!--显示原始值与占比条和百分比值 -->
+  <el-table-column
+      v-else-if="column.valueProgress"
+      :key="column.prop"
+      v-bind="column"
+      :header-align="headerAlign"
+      :align="column.align"
+  >
+    <template slot-scope="scope">
+      <span class="progressbar-value">{{
+          scope.row[scope.column.property]
+        }}</span>
+      <el-progress
+          :percentage="scope.row[column.valueProgress.valueKey]"
+          v-bind="column.valueProgress"
+          type="line"
+      />
+    </template>
+  </el-table-column>
+
+  <el-table-column
+      v-else
+      :key="column.prop || column.label"
+      v-bind="column"
+      :header-align="headerAlign"
+      :align="column.align"
+      show-overflow-tooltip
+  />
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  name: "ElTableColumnCustom",
+
+  props: {
+    column: {
+      default: () => {
+      },
+      type: Object,
+    },
+
+    sortProp: {
+      default: "",
+      type: String,
+    },
+
+    breakNum: {
+      type: [Number, String],
+      default: 2,
+    },
+  },
+
+  data() {
+    return {
+      // tipSrc
+    };
+  },
+
+  computed: {
+    headerAlign() {
+      const {headerAlign} = this.column;
+
+      return headerAlign || "center";
+    },
+
+    getHandlers() {
+      return ({handlers, formatHandlers}, scope) => {
+        return formatHandlers ? formatHandlers(handlers, scope) : handlers;
+      };
+    },
+  },
+
+  methods: {
+    compile(component, column, slotScope) {
+      const template = Vue.compile(component.template);
+      const data = {
+        data() {
+          return Object.assign({}, component.data, {
+            column,
+            scope: slotScope,
+          });
+        },
+      };
+      let obj = Object.assign({}, template, data, component);
+      //将传进的propData设置到新建的组件的data里面
+      if (obj.propData) {
+        if (obj.data) {
+          let dataObj = obj.data();
+          let keys = Object.keys(dataObj);
+          if (keys.length > 0) {
+            obj.data = function data() {
+              let map = {};
+              keys.forEach((key) => {
+                map[key] = dataObj[key];
+              });
+              //把传进的propData也塞进去
+              map = {...map, ...obj.propData};
+              return map;
+            };
+          }
+        }
+      }
+      return obj;
+    },
+
+    descend(prop) {
+      this.$emit("sortPropChange", prop);
+    },
+
+    async handleCommand(item, scope) {
+      try {
+        item.disabled = true;
+
+        item.handler && (await item.handler(scope));
+      } catch (err) {
+        console.error(err);
+      } finally {
+        // eslint-disable-next-line require-atomic-updates
+        item.disabled = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.sort-btn {
+  display: inline-block;
+  width: 100%;
+  // padding: 0 10px 0 0;
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  font-size: inherit;
+  font-weight: inherit;
+  min-width: 100%;
+  position: relative;
+  white-space: normal;
+
+  &-icon {
+    cursor: pointer;
+    color: #c8cdde;
+    position: absolute;
+    right: -4px;
+    top: 58%;
+    transform: translateY(-50%);
+
+    &.active {
+      color: #258ff8;
+    }
+
+    &:hover {
+      color: #258ff8;
+    }
+  }
+}
+</style>