n20-common-lib 2.4.5 → 2.4.7

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

@@ -1,18 +1,18 @@
 <template>
   <!-- 多级结构 -->
   <el-table-column
-      v-if="column.children && column.children.length"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
+    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"/>
+            <div slot="content" v-html="column.explains" />
             <!--            <img-->
             <!--              :src="tipSrc"-->
             <!--              alt=""-->
@@ -23,92 +23,65 @@
       </template>
     </template>
     <ElTableColumnCustom
-        v-for="subColumn in column.children"
-        :key="`${column.prop || column.label}--${
-        subColumn.prop || subColumn.label
-      }`"
-        :column="subColumn"
+      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"
+    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)"
+            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)"
+          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"/>
+            <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"
-        />
+        <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 || 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"/>
+        <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 },
-            ]"
-          />
+          <i :class="['icon-anjiangxupailie', 'sort-btn-icon', { active: sortProp === column.prop }]" />
         </span>
       </template>
     </template>
@@ -116,146 +89,135 @@
 
   <!-- 只显示占比条和百分比 -->
   <el-table-column
-      v-else-if="column.progress"
-      :key="column.prop"
-      v-bind="column"
-      :header-align="headerAlign"
-      :align="column.align"
+    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"
-      />
+      <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"
+    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"
-      />
+      <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
+    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";
+import Vue from 'vue'
 
 export default {
-  name: "ElTableColumnCustom",
+  name: 'ElTableColumnCustom',
 
   props: {
     column: {
-      default: () => {
-      },
-      type: Object,
+      default: () => {},
+      type: Object
     },
 
     sortProp: {
-      default: "",
-      type: String,
+      default: '',
+      type: String
     },
 
     breakNum: {
       type: [Number, String],
-      default: 2,
-    },
+      default: 2
+    }
   },
 
   data() {
     return {
       // tipSrc
-    };
+    }
   },
 
   computed: {
     headerAlign() {
-      const {headerAlign} = this.column;
+      const { headerAlign } = this.column
 
-      return headerAlign || "center";
+      return headerAlign || 'center'
     },
 
     getHandlers() {
-      return ({handlers, formatHandlers}, scope) => {
-        return formatHandlers ? formatHandlers(handlers, scope) : handlers;
-      };
-    },
+      return ({ handlers, formatHandlers }, scope) => {
+        return formatHandlers ? formatHandlers(handlers, scope) : handlers
+      }
+    }
   },
 
   methods: {
     compile(component, column, slotScope) {
-      const template = Vue.compile(component.template);
+      const template = Vue.compile(component.template)
       const data = {
         data() {
           return Object.assign({}, component.data, {
             column,
-            scope: slotScope,
-          });
-        },
-      };
-      let obj = Object.assign({}, template, data, component);
+            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);
+          let dataObj = obj.data()
+          let keys = Object.keys(dataObj)
           if (keys.length > 0) {
             obj.data = function data() {
-              let map = {};
+              let map = {}
               keys.forEach((key) => {
-                map[key] = dataObj[key];
-              });
+                map[key] = dataObj[key]
+              })
               //把传进的propData也塞进去
-              map = {...map, ...obj.propData};
-              return map;
-            };
+              map = { ...map, ...obj.propData }
+              return map
+            }
           }
         }
       }
-      return obj;
+      return obj
     },
 
     descend(prop) {
-      this.$emit("sortPropChange", prop);
+      this.$emit('sortPropChange', prop)
     },
 
     async handleCommand(item, scope) {
       try {
-        item.disabled = true;
+        item.disabled = true
 
-        item.handler && (await item.handler(scope));
+        item.handler && (await item.handler(scope))
       } catch (err) {
-        console.error(err);
+        console.error(err)
       } finally {
         // eslint-disable-next-line require-atomic-updates
-        item.disabled = false;
+        item.disabled = false
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss">

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

@@ -4,12 +4,7 @@
   创建时间： 2021-02-05
 -->
 <template>
-  <div
-    :class="[
-      'element-table-custom',
-      { 'vertical-header-el-table': isVerticalHeader }
-    ]"
-  >
+  <div :class="['element-table-custom', { 'vertical-header-el-table': isVerticalHeader }]">
     <el-table
       ref="elTable"
       v-bind="$attrs"
@@ -293,9 +288,7 @@ export default {
     },
 
     eleSort() {
-      !this.sortCustom &&
-        this.sortProp &&
-        this.$refs.table.sort(this.sortProp, 'descending')
+      !this.sortCustom && this.sortProp && this.$refs.table.sort(this.sortProp, 'descending')
     },
 
     // 合计
@@ -349,10 +342,7 @@ export default {
             this.mergeSpanRow.push(this.mergeSpan[i][`row`])
           }
         }
-        if (
-          this.mergeSpanCol.includes(columnIndex) &&
-          this.mergeSpanRow.includes(rowIndex)
-        ) {
+        if (this.mergeSpanCol.includes(columnIndex) && this.mergeSpanRow.includes(rowIndex)) {
           const temp = this.mergeSpan.filter((i) => {
             return i.col === columnIndex && i.row === rowIndex
           })
@@ -369,9 +359,7 @@ export default {
     },
 
     setDrag() {
-      const $tbody = this.$refs.elTable.$el.querySelectorAll(
-        '.el-table__body-wrapper > table > tbody'
-      )[0]
+      const $tbody = this.$refs.elTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
 
       this.sortable = Sortable.create($tbody, {
         ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
@@ -457,4 +445,3 @@ export default {
   }
 }
 </style>
-

package/nstc-g6/components/NstcTableSet/NstcTableSet.vue

@@ -1,11 +1,5 @@
 <template>
-  <NstcDialog
-    v-model="_value"
-    :title="pageTitle"
-    :custom-class="cName"
-    :show-footer="false"
-    :width="dialogWidth"
-  >
+  <NstcDialog v-model="_value" :title="pageTitle" :custom-class="cName" :show-footer="false" :width="dialogWidth">
     <div :class="`${cName}-inner`">
       <div :class="{ [`${cName}-left`]: true }">
         <!-- 顶部标题以及全选按钮 -->
@@ -20,21 +14,14 @@
         </div>
         <!-- checkBox -->
         <div :class="`${cName}-inner-content`">
-          <div
-            v-for="(group, index) in options"
-            :key="index"
-            class="table-columns-set-group"
-          >
+          <div v-for="(group, index) in options" :key="index" class="table-columns-set-group">
             <div :class="`${cName}-group-name`">
               {{ group.groupName }}
               <!-- <i v-if="showCollapse" :class="['el-icon-arrow-up', 'arrow-up',arrowStates[index]?'arrow-down':'']" @click="upDown(index)"></i> -->
             </div>
             <CheckboxCustom
               v-model="model[index]"
-              :class="[
-                arrowStates[index] ? 'arrowwz-change' : '',
-                'show-group'
-              ]"
+              :class="[arrowStates[index] ? 'arrowwz-change' : '', 'show-group']"
               :options="group.children"
               hover-show-title
               @change="(_) => handleLeftChange(group.children)"
@@ -43,17 +30,10 @@
         </div>
       </div>
       <!-- 右边排序部分 -->
-      <div
-        v-show="['set', 'export', 'condition'].includes(type)"
-        :class="`${cName}-right`"
-      >
+      <div v-show="['set', 'export', 'condition'].includes(type)" :class="`${cName}-right`">
         <div :class="`${cName}-inner-title`">当前选定项</div>
         <div ref="table_columns_set_result" :class="`${cName}-inner-content`">
-          <div
-            v-for="(item, index) in result"
-            :key="item.id"
-            :class="`${cName}-result-item`"
-          >
+          <div v-for="(item, index) in result" :key="item.id" :class="`${cName}-result-item`">
             <span>{{ item.name }}</span>
             <!-- <el-button
                 v-if="!item.isRequired"
@@ -81,17 +61,8 @@
         >
           {{ footerHandlers.confirm.text }}
         </el-button>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="重置本次操作"
-          placement="top-start"
-        >
-          <el-button
-            v-if="footerHandlers.cancel"
-            :class="footerHandlers.cancel.className || ''"
-            @click="handleReset"
-          >
+        <el-tooltip class="item" effect="dark" content="重置本次操作" placement="top-start">
+          <el-button v-if="footerHandlers.cancel" :class="footerHandlers.cancel.className || ''" @click="handleReset">
             {{ footerHandlers.cancel.text }}
           </el-button>
         </el-tooltip>
@@ -269,10 +240,7 @@ export default {
      */
     handleLeftChange(options) {
       const resultIds = this.result.map((item) => item.id)
-      const leftCheckedArr = this.model.reduce(
-        (total, next) => [...total, ...next],
-        []
-      )
+      const leftCheckedArr = this.model.reduce((total, next) => [...total, ...next], [])
 
       if (leftCheckedArr.length > resultIds.length) {
         // 添加列
@@ -282,9 +250,7 @@ export default {
         this.result.push(changeItem)
       } else {
         // 删除列
-        const changeIndex = resultIds.findIndex(
-          (id) => !leftCheckedArr.includes(id)
-        )
+        const changeIndex = resultIds.findIndex((id) => !leftCheckedArr.includes(id))
 
         this.result.splice(changeIndex, 1)
       }
@@ -368,9 +334,7 @@ export default {
         let model = []
 
         if (group.children) {
-          model = group.children
-            .map((item) => item.id)
-            .filter((id) => ids.includes(id))
+          model = group.children.map((item) => item.id).filter((id) => ids.includes(id))
         }
 
         return model
@@ -402,9 +366,7 @@ export default {
           reset == 'reset' ? (key = 'userUnitList') : ''
           this.defaultList = data[`defaultUnitList`]
         } else if (this.type === 'condition') {
-          key = data[`userConditionList`]
-            ? 'userConditionList'
-            : 'defaultConditionList'
+          key = data[`userConditionList`] ? 'userConditionList' : 'defaultConditionList'
           this.defaultList = data[`defaultConditionList`]
         } else if (this.type === 'export') {
           // 导出的字段在付款这边默认勾选是列显示的字段
@@ -435,23 +397,20 @@ export default {
 
         this.handleDefaultSet(userUnit || [])
 
-        this.sortableInstance = new Sortable(
-          this.$refs[`table_columns_set_result`],
-          {
-            setData(dataTransfer) {
-              // to avoid Firefox bug
-              // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-              dataTransfer.setData('Text', '')
-            },
-            onEnd: (evt) => {
-              const targetRow = this.result.splice(evt.oldIndex, 1)[0]
-
-              this.$nextTick(() => {
-                this.result.splice(evt.newIndex, 0, targetRow)
-              })
-            }
+        this.sortableInstance = new Sortable(this.$refs[`table_columns_set_result`], {
+          setData(dataTransfer) {
+            // to avoid Firefox bug
+            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+            dataTransfer.setData('Text', '')
+          },
+          onEnd: (evt) => {
+            const targetRow = this.result.splice(evt.oldIndex, 1)[0]
+
+            this.$nextTick(() => {
+              this.result.splice(evt.newIndex, 0, targetRow)
+            })
           }
-        )
+        })
         // type
         this[`hasInit_${this.type}`] = true
         //
@@ -495,8 +454,7 @@ export default {
       let result = await axios({
         url: this.exportExcelConfig.url,
         method: this.exportExcelConfig.httpMethod,
-        [`${this.exportExcelConfig.httpMethod === 'get' ? 'params' : 'data'}`]:
-          this.exportExcelConfig.searchObj
+        [`${this.exportExcelConfig.httpMethod === 'get' ? 'params' : 'data'}`]: this.exportExcelConfig.searchObj
       })
 
       this._value = false
@@ -504,8 +462,7 @@ export default {
       result = result[`list`] || result
 
       // 格式化导出数据
-      this.exportExcelConfig.formatData &&
-        (result = this.exportExcelConfig.formatData(result))
+      this.exportExcelConfig.formatData && (result = this.exportExcelConfig.formatData(result))
 
       // 拼接导出结构
       console.log('result', this.result)
@@ -546,9 +503,7 @@ export default {
         })
         let cellStyle = {}
         if (that.exportExcelConfig.cellStyle) {
-          let cellStyleColName = this.result.filter(
-            (i) => that.exportExcelConfig.cellStyle[i.id]
-          )
+          let cellStyleColName = this.result.filter((i) => that.exportExcelConfig.cellStyle[i.id])
           let cellStyleMap = {}
           cellStyleColName.forEach((i) => {
             if (that.exportExcelConfig.cellStyle[i.id]) {

package/nstc-g6/components/NstcThemePicker/NstcThemePicker.vue

@@ -5,10 +5,10 @@
 -->
 <template>
   <el-color-picker
-      v-model="theme"
-      :predefine="['#4E94A8', '#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-      class="theme-picker"
-      popper-class="theme-picker-dropdown"
+    v-model="theme"
+    :predefine="['#4E94A8', '#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d']"
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
   />
 </template>
 
@@ -31,7 +31,7 @@ export default {
   },
   watch: {
     defaultTheme: {
-      handler: function(val) {
+      handler: function (val) {
         this.theme = val
       },
       immediate: true
@@ -78,12 +78,11 @@ export default {
 
       chalkHandler()
 
-      const styles = [].slice.call(document.querySelectorAll('style'))
-          .filter(style => {
-            const text = style.innerText
-            return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
-          })
-      styles.forEach(style => {
+      const styles = [].slice.call(document.querySelectorAll('style')).filter((style) => {
+        const text = style.innerText
+        return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
+      })
+      styles.forEach((style) => {
         const { innerText } = style
         if (typeof innerText !== 'string') return
         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
@@ -105,7 +104,7 @@ export default {
     },
 
     getCSSString(url, variable) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         const xhr = new XMLHttpRequest()
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4 && xhr.status === 200) {
@@ -125,7 +124,8 @@ export default {
         let green = parseInt(color.slice(2, 4), 16)
         let blue = parseInt(color.slice(4, 6), 16)
 
-        if (tint === 0) { // when primary color is in its rgb space
+        if (tint === 0) {
+          // when primary color is in its rgb space
           return [red, green, blue].join(',')
         } else {
           red += Math.round(tint * (255 - red))
@@ -183,4 +183,3 @@ export default {
   display: none;
 }
 </style>
-