n20-common-lib 1.3.46 → 1.3.49

package/src/components/ShowColumn/index.vue

@@ -1,252 +1,252 @@
-<template>
-  <dialog-wrap
-    ref="dialog"
-    class="p-t-0"
-    v-bind="$attrs"
-    :visible.sync="visible"
-    :width="width"
-    :title="title"
-    @open="popOpen"
-  >
-    <div class="dialog-view">
-      <div class="flex-box">
-        <div class="left-c flex-column p-t-m bd-r">
-          <div class="flex-box flex-v p-r m-b">
-            <span>{{ header }}</span>
-            <span class="m-l-m color-999">
-              已选
-              <span class="color-main">{{ dragList.length }}</span>
-            </span>
-            <el-link
-              :underline="false"
-              type="primary"
-              class="m-l-auto"
-              @click="setAll"
-              >{{ setState ? '全部清空' : '全部选中' }}</el-link
-            >
-          </div>
-          <div class="flex-item p-r" style="height: 50%; overflow: auto">
-            <el-checkbox-group :value="dragList.map((d) => d[labelKey])">
-              <el-checkbox
-                v-for="(column, i) in columnsAs"
-                :key="i"
-                :label="column[labelKey]"
-                :disabled="column.checked"
-                class="m-t"
-                @change="(val) => checkChange(val, column)"
-                >{{ column[labelKey] }}</el-checkbox
-              >
-            </el-checkbox-group>
-          </div>
-        </div>
-        <div class="right-c flex-column p-t-m">
-          <div class="m-b">
-            当前选定项
-            <el-link type="primary" style="visibility: hidden"
-              >当前选定项</el-link
-            >
-          </div>
-          <div class="flex-1 overflow-y">
-            <drag-list
-              :list="dragList"
-              :label-key="labelKey"
-              :in-show-column="true"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div slot="footer" class="text-c">
-      <el-button type="primary" @click="setChange">确定</el-button>
-      <el-button plain @click="reset">恢复默认</el-button>
-    </div>
-  </dialog-wrap>
-</template>
-<script>
-import axios from '../../utils/axios'
-import dialogWrap from '../Dialog/index.vue'
-import dragList from '../DragList/index.vue'
-export default {
-  name: 'ShowColumn',
-  components: { dialogWrap, dragList },
-  inheritAttrs: false,
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    checkColumns: {
-      type: Array,
-      default: () => []
-    },
-    isExport: {
-      type: Boolean,
-      default: false
-    },
-    isFilter: {
-      type: Boolean,
-      default: false
-    },
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    pageId: {
-      type: String,
-      default: undefined
-    },
-    autoSave: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: String,
-      default: '800px'
-    }
-  },
-  data() {
-    return {
-      dragList: [],
-      userNo: sessionStorage.getItem('userNo')
-    }
-  },
-  computed: {
-    title() {
-      if (this.isExport) {
-        return '导出'
-      } else if (this.isFilter) {
-        return '筛选'
-      } else {
-        return '设置显示列'
-      }
-    },
-    header() {
-      if (this.isExport) {
-        return '导出'
-      } else if (this.isFilter) {
-        return '筛选'
-      } else {
-        return '显示列'
-      }
-    },
-    visible: {
-      get() {
-        return this.dialogVisible
-      },
-      set(val) {
-        this.$emit('update:dialogVisible', val)
-      }
-    },
-    setState() {
-      return (
-        this.columnsAs.length && this.columnsAs.length === this.dragList.length
-      )
-    },
-    columnsAs() {
-      return this.columns.filter((col) => !col.static)
-    }
-  },
-  methods: {
-    popOpen() {
-      this.dragList = this.checkColumns.filter((col) => !col.static)
-    },
-    setAll() {
-      if (this.setState) {
-        this.dragList = this.dragList.filter((c) => c.checked)
-      } else {
-        this.dragList = [...this.columnsAs]
-      }
-    },
-    checkChange(val, column) {
-      if (val === false) {
-        let index = this.dragList.findIndex(
-          (d) => d[this.labelKey] === column[this.labelKey]
-        )
-        index !== -1 && this.dragList.splice(index, 1)
-      } else {
-        this.dragList.push(column)
-      }
-    },
-    reset() {
-      this.dragList = this.checkColumns.filter((col) => !col.static)
-    },
-    setChange() {
-      if (this.dragList.length < 1) {
-        this.$message.error(
-          `至少设置${
-            this.isExport
-              ? '一列导出数据'
-              : this.isFilter
-              ? '一个筛选条件'
-              : '一列显示列'
-          }!`
-        )
-        return
-      }
-
-      let list = []
-      let preCols = this.columns.filter((col) => col.static === 'pre')
-      let nextCols = this.columns.filter((col) => col.static === 'next')
-      list.push(...preCols, ...this.dragList, ...nextCols)
-
-      // 自动保存设置的显示列
-      !this.isExport && this.autoSave && this.saveColumns(list)
-
-      this.$emit('setColumns', list)
-      this.visible = false
-    },
-    saveColumns(list) {
-      let labels = list.map((c) => c[this.labelKey] || c)
-      axios.post(
-        '/bems/prod_1.0/user/pageHabit',
-        {
-          userNo: this.userNo,
-          pageId: this.pageId,
-          showStructure: JSON.stringify(labels)
-        },
-        { loading: false }
-      )
-    },
-    getColumns(pageId) {
-      return new Promise((resolve, reject) => {
-        axios
-          .post(
-            '/bems/prod_1.0/user/pageHabit/list',
-            {
-              userNo: this.userNo,
-              pageId: pageId || this.pageId
-            },
-            { loading: false }
-          )
-          .then(({ data }) => {
-            if (data) {
-              let _data = JSON.parse(data)
-              if (_data && _data.length > 0) {
-                let columns = []
-                _data.forEach((d) => {
-                  if (typeof d === 'string') {
-                    let column = this.columns.find(
-                      (c) => c[this.labelKey] === d
-                    )
-                    column && columns.push(column)
-                  } else if (typeof d === 'object') {
-                    columns.push(d)
-                  }
-                })
-                return resolve(columns)
-              }
-            }
-            return resolve(undefined)
-          })
-          .catch((err) => {
-            reject(err)
-          })
-      })
-    }
-  }
-}
-</script>
+<template>
+  <dialog-wrap
+    ref="dialog"
+    class="p-t-0"
+    v-bind="$attrs"
+    :visible.sync="visible"
+    :width="width"
+    :title="title"
+    @open="popOpen"
+  >
+    <div class="dialog-view">
+      <div class="flex-box">
+        <div class="left-c flex-column p-t-m bd-r">
+          <div class="flex-box flex-v p-r m-b">
+            <span>{{ header }}</span>
+            <span class="m-l-m color-999">
+              已选
+              <span class="color-main">{{ dragList.length }}</span>
+            </span>
+            <el-link
+              :underline="false"
+              type="primary"
+              class="m-l-auto"
+              @click="setAll"
+              >{{ setState ? '全部清空' : '全部选中' }}</el-link
+            >
+          </div>
+          <div class="flex-item p-r" style="height: 50%; overflow: auto">
+            <el-checkbox-group :value="dragList.map((d) => d[labelKey])">
+              <el-checkbox
+                v-for="(column, i) in columnsAs"
+                :key="i"
+                :label="column[labelKey]"
+                :disabled="column.checked"
+                class="m-t"
+                @change="(val) => checkChange(val, column)"
+                >{{ column[labelKey] }}</el-checkbox
+              >
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="right-c flex-column p-t-m">
+          <div class="m-b">
+            当前选定项
+            <el-link type="primary" style="visibility: hidden"
+              >当前选定项</el-link
+            >
+          </div>
+          <div class="flex-1 overflow-y">
+            <drag-list
+              :list="dragList"
+              :label-key="labelKey"
+              :in-show-column="true"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="text-c">
+      <el-button type="primary" @click="setChange">确定</el-button>
+      <el-button plain @click="reset">恢复默认</el-button>
+    </div>
+  </dialog-wrap>
+</template>
+<script>
+import axios from '../../utils/axios'
+import dialogWrap from '../Dialog/index.vue'
+import dragList from '../DragList/index.vue'
+export default {
+  name: 'ShowColumn',
+  components: { dialogWrap, dragList },
+  inheritAttrs: false,
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    checkColumns: {
+      type: Array,
+      default: () => []
+    },
+    isExport: {
+      type: Boolean,
+      default: false
+    },
+    isFilter: {
+      type: Boolean,
+      default: false
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    pageId: {
+      type: String,
+      default: undefined
+    },
+    autoSave: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: '800px'
+    }
+  },
+  data() {
+    return {
+      dragList: [],
+      userNo: sessionStorage.getItem('userNo')
+    }
+  },
+  computed: {
+    title() {
+      if (this.isExport) {
+        return '导出'
+      } else if (this.isFilter) {
+        return '筛选'
+      } else {
+        return '设置显示列'
+      }
+    },
+    header() {
+      if (this.isExport) {
+        return '导出'
+      } else if (this.isFilter) {
+        return '筛选'
+      } else {
+        return '显示列'
+      }
+    },
+    visible: {
+      get() {
+        return this.dialogVisible
+      },
+      set(val) {
+        this.$emit('update:dialogVisible', val)
+      }
+    },
+    setState() {
+      return (
+        this.columnsAs.length && this.columnsAs.length === this.dragList.length
+      )
+    },
+    columnsAs() {
+      return this.columns.filter((col) => !col.static)
+    }
+  },
+  methods: {
+    popOpen() {
+      this.dragList = this.checkColumns.filter((col) => !col.static)
+    },
+    setAll() {
+      if (this.setState) {
+        this.dragList = this.dragList.filter((c) => c.checked)
+      } else {
+        this.dragList = [...this.columnsAs]
+      }
+    },
+    checkChange(val, column) {
+      if (val === false) {
+        let index = this.dragList.findIndex(
+          (d) => d[this.labelKey] === column[this.labelKey]
+        )
+        index !== -1 && this.dragList.splice(index, 1)
+      } else {
+        this.dragList.push(column)
+      }
+    },
+    reset() {
+      this.dragList = this.checkColumns.filter((col) => !col.static)
+    },
+    setChange() {
+      if (this.dragList.length < 1) {
+        this.$message.error(
+          `至少设置${
+            this.isExport
+              ? '一列导出数据'
+              : this.isFilter
+              ? '一个筛选条件'
+              : '一列显示列'
+          }!`
+        )
+        return
+      }
+
+      let list = []
+      let preCols = this.columns.filter((col) => col.static === 'pre')
+      let nextCols = this.columns.filter((col) => col.static === 'next')
+      list.push(...preCols, ...this.dragList, ...nextCols)
+
+      // 自动保存设置的显示列
+      !this.isExport && this.autoSave && this.saveColumns(list)
+
+      this.$emit('setColumns', list)
+      this.visible = false
+    },
+    saveColumns(list) {
+      let labels = list.map((c) => c[this.labelKey] || c)
+      axios.post(
+        '/bems/prod_1.0/user/pageHabit',
+        {
+          userNo: this.userNo,
+          pageId: this.pageId,
+          showStructure: JSON.stringify(labels)
+        },
+        { loading: false }
+      )
+    },
+    getColumns(pageId) {
+      return new Promise((resolve, reject) => {
+        axios
+          .post(
+            '/bems/prod_1.0/user/pageHabit/list',
+            {
+              userNo: this.userNo,
+              pageId: pageId || this.pageId
+            },
+            { loading: false }
+          )
+          .then(({ data }) => {
+            if (data) {
+              let _data = JSON.parse(data)
+              if (_data && _data.length > 0) {
+                let columns = []
+                _data.forEach((d) => {
+                  if (typeof d === 'string') {
+                    let column = this.columns.find(
+                      (c) => c[this.labelKey] === d
+                    )
+                    column && columns.push(column)
+                  } else if (typeof d === 'object') {
+                    columns.push(d)
+                  }
+                })
+                return resolve(columns)
+              }
+            }
+            return resolve(undefined)
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
+    }
+  }
+}
+</script>