n20-common-lib 1.2.0 → 1.2.3

package/src/components/ShowColumn/index.vue

@@ -1,188 +1,204 @@
-<template>
-  <dialog-wrap
-    ref="dialog"
-    v-bind="$attrs"
-    :visible.sync="visible"
-    width="800px"
-    :title="isExport ? '导出' : '设置显示列'"
-    @open="popOpen"
-  >
-    <div class="dialog-view" style="margin-top: -16px">
-      <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>{{ isExport ? '导出' : '显示列' }}</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 columns"
-                :key="i"
-                :label="column[labelKey]"
-                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" />
-          </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
-    },
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    pageId: {
-      type: String,
-      default: undefined
-    },
-    autoSave: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dragList: [],
-      userNo: sessionStorage.getItem('userNo')
-    }
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.dialogVisible
-      },
-      set(val) {
-        this.$emit('update:dialogVisible', val)
-      }
-    },
-    setState() {
-      return this.columns.length && this.columns.length === this.dragList.length
-    }
-  },
-  methods: {
-    popOpen() {
-      this.dragList = [...this.checkColumns]
-    },
-    setAll() {
-      if (this.setState) {
-        this.dragList = []
-      } else {
-        this.dragList = [...this.columns]
-      }
-    },
-    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 = JSON.parse(JSON.stringify(this.checkColumns || []))
-    },
-    setChange() {
-      if (this.dragList.length < 1) {
-        this.$message.error('至少设置显示一列!')
-        return
-      }
-      // 自动保存设置的显示列
-      !this.isExport && this.autoSave && this.saveColumns()
-
-      this.$emit('setColumns', this.dragList)
-      this.visible = false
-    },
-    saveColumns() {
-      axios.post(
-        '/bems/prod_1.0/user/pageHabit',
-        {
-          userNo: this.userNo,
-          pageId: this.pageId,
-          showStructure: JSON.stringify(this.dragList)
-        },
-        { 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)
-              resolve(_data.length ? _data : null)
-            } else {
-              resolve(null)
-            }
-          })
-          .catch((err) => {
-            reject(err)
-          })
-      })
-    }
-  }
-}
-</script>
+<template>
+  <dialog-wrap
+    ref="dialog"
+    v-bind="$attrs"
+    :visible.sync="visible"
+    width="800px"
+    :title="isExport ? '导出' : '设置显示列'"
+    @open="popOpen"
+  >
+    <div class="dialog-view" style="margin-top: -16px">
+      <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>{{ isExport ? '导出' : '显示列' }}</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" />
+          </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
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    pageId: {
+      type: String,
+      default: undefined
+    },
+    autoSave: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dragList: [],
+      userNo: sessionStorage.getItem('userNo')
+    }
+  },
+  computed: {
+    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('至少设置显示一列!')
+        return
+      }
+      // 自动保存设置的显示列
+      !this.isExport && this.autoSave && this.saveColumns()
+
+      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.$emit('setColumns', list)
+      this.visible = false
+    },
+    saveColumns() {
+      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)
+
+      axios.post(
+        '/bems/prod_1.0/user/pageHabit',
+        {
+          userNo: this.userNo,
+          pageId: this.pageId,
+          showStructure: JSON.stringify(list)
+        },
+        { 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)
+              resolve(_data.length ? _data : null)
+            } else {
+              resolve(null)
+            }
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
+    }
+  }
+}
+</script>

package/src/components/Sifting/index.vue

@@ -1,99 +1,99 @@
-<template>
-  <cl-dialog
-    class="p-t-0 p-b-0"
-    :title="title"
-    :width="50"
-    :dialog-visible="dialogVisible"
-    :before-close="beforeClose"
-  >
-    <div class="n20-sifting-box">
-      <div class="n20-sifting-left">
-        <!--top-->
-        <div class="n20-sifting-left-top">
-          <div class="n20-sifting-left-top-left">
-            <span class="n20-sifting-left-top-title">{{ title }}</span>
-            <span class="n20-sifting-opt-text">已选 </span>
-            <span class="n20-sifting-opt">4</span>
-          </div>
-          <span
-            class="n20-sifting-opt n20-sifting-cursor"
-            @click="handleCheckAll"
-            >全部选中</span
-          >
-        </div>
-        <!--end-->
-        <!--content-->
-        <div v-for="item in list" :key="item.title">
-          <span class="n20-sifting-group-title">{{ item.title }}</span>
-          <el-checkbox-group
-            v-model="checkedCities"
-            @change="handleCheckedCitiesChange"
-          >
-            <el-checkbox
-              v-for="(city, index) in item.children"
-              :key="index"
-              class="el-checkbox-class"
-              :label="city.name"
-              >{{ city.name }}</el-checkbox
-            >
-          </el-checkbox-group>
-        </div>
-        <!--end-->
-      </div>
-      <div class="n20-sifting-right">
-        <cl-drag-list :list="checkedCities" />
-      </div>
-    </div>
-    <div slot="footerBtn" class="n20-sifting-footer">
-      <el-button @click="beforeClose">取消</el-button>
-      <el-button type="primary" @click="handlAffirm">确认</el-button>
-    </div>
-  </cl-dialog>
-</template>
-
-<script>
-export default {
-  name: 'Sifting',
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    beforeClose: {
-      type: Function,
-      default: () => {}
-    },
-    list: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      checkedCities: []
-    }
-  },
-  methods: {
-    handleCheckAll() {
-      this.checkedCities = this.list
-        .map((c) => c.children)
-        .flat()
-        .map((r) => r.name)
-      console.log(this.checkedCities)
-    },
-    handlAffirm() {
-      this.$emit('Affirm', this.checkedCities)
-    },
-    handleCheckedCitiesChange(val) {
-      console.log(val)
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>
+<template>
+  <cl-dialog
+    class="p-t-0 p-b-0"
+    :title="title"
+    :width="50"
+    :dialog-visible="dialogVisible"
+    :before-close="beforeClose"
+  >
+    <div class="n20-sifting-box">
+      <div class="n20-sifting-left">
+        <!--top-->
+        <div class="n20-sifting-left-top">
+          <div class="n20-sifting-left-top-left">
+            <span class="n20-sifting-left-top-title">{{ title }}</span>
+            <span class="n20-sifting-opt-text">已选 </span>
+            <span class="n20-sifting-opt">4</span>
+          </div>
+          <span
+            class="n20-sifting-opt n20-sifting-cursor"
+            @click="handleCheckAll"
+            >全部选中</span
+          >
+        </div>
+        <!--end-->
+        <!--content-->
+        <div v-for="item in list" :key="item.title">
+          <span class="n20-sifting-group-title">{{ item.title }}</span>
+          <el-checkbox-group
+            v-model="checkedCities"
+            @change="handleCheckedCitiesChange"
+          >
+            <el-checkbox
+              v-for="(city, index) in item.children"
+              :key="index"
+              class="el-checkbox-class"
+              :label="city.name"
+              >{{ city.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+        <!--end-->
+      </div>
+      <div class="n20-sifting-right">
+        <cl-drag-list :list="checkedCities" />
+      </div>
+    </div>
+    <div slot="footerBtn" class="n20-sifting-footer">
+      <el-button @click="beforeClose">取消</el-button>
+      <el-button type="primary" @click="handlAffirm">确认</el-button>
+    </div>
+  </cl-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Sifting',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    beforeClose: {
+      type: Function,
+      default: () => {}
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      checkedCities: []
+    }
+  },
+  methods: {
+    handleCheckAll() {
+      this.checkedCities = this.list
+        .map((c) => c.children)
+        .flat()
+        .map((r) => r.name)
+      console.log(this.checkedCities)
+    },
+    handlAffirm() {
+      this.$emit('Affirm', this.checkedCities)
+    },
+    handleCheckedCitiesChange(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>