n20-common-lib 1.1.98

package/src/components/Sifting/index.vue

@@ -0,0 +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>

package/src/components/Statis/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div v-if="size !== 'mini'" class="flex-box p-t-s p-b-s">
+      <statisItem type="当页合计" :list="pageList" :show-w="showW" />
+      <statisItem type="全部合计" :list="totalList" :show-w="showW" />
+    </div>
+    <div v-else class="n20-statis p-t-s p-b-s">
+      <span class="m-r">
+        当页:<span class="n20-primary">{{ pageSum }}</span
+        >条
+      </span>
+      <span class="m-r">
+        全部:<span class="n20-primary">{{ totalSun }}</span
+        >条
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import statisItem from './statisItem.vue'
+export default {
+  name: 'Statis',
+  components: {
+    statisItem
+  },
+  props: {
+    pageSum: {
+      type: Number,
+      default: 0
+    },
+    pageAmount: {
+      type: Number,
+      default: undefined
+    },
+    totalSun: {
+      type: Number,
+      default: 0
+    },
+    totalAmount: {
+      type: Number,
+      default: undefined
+    },
+    showW: {
+      type: Boolean,
+      default: false
+    },
+    showU: {
+      type: [Boolean, String],
+      default: false
+    },
+    size: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    unitAs() {
+      if (!this.showU) {
+        return undefined
+      } else if (this.showU === true) {
+        return '元'
+      } else {
+        return this.showU
+      }
+    },
+    pageList() {
+      if (this.pageAmount !== undefined) {
+        return [
+          { label: '笔数', value: this.pageSum },
+          {
+            label: '金额',
+            value: this.pageAmount,
+            unit: this.unitAs
+          }
+        ]
+      } else {
+        return [{ label: '笔数', value: this.pageSum }]
+      }
+    },
+    totalList() {
+      if (this.totalAmount !== undefined) {
+        return [
+          { label: '笔数', value: this.totalSun },
+          {
+            label: '金额',
+            value: this.totalAmount,
+            unit: this.unitAs
+          }
+        ]
+      } else {
+        return [{ label: '笔数', value: this.totalSun }]
+      }
+    }
+  }
+}
+</script>

package/src/components/Statis/statisItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="n20-statis">
+    <span v-if="title" class="p-r text-r stati-item-cell">{{ title }}</span
+    ><span class="stati-type stati-item-cell">{{ type }}</span
+    ><span class="n20-statis-division p-l-s p-r-s stati-item-cell">|</span
+    ><span v-for="(item, i) in list" :key="i" class="p-r stati-item-cell"
+      >{{ item.label }}:<span class="n20-primary">{{
+        item | numerify('0,0.00', showW)
+      }}</span></span
+    >
+  </div>
+</template>
+
+<script>
+import numerify from 'numerify'
+const n = 10000
+
+export default {
+  name: 'StatisItem',
+  filters: {
+    numerify({ label, value, unit = '' }, f, w) {
+      if (label === '笔数') {
+        return value
+      } else if (!w) {
+        return numerify(value, f) + unit
+      } else {
+        if (value > n) {
+          return numerify(value / n, f) + '万' + unit
+        } else {
+          return numerify(value, f) + unit
+        }
+      }
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      default: undefined
+    },
+    type: {
+      type: String,
+      default: undefined
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    showW: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

package/src/components/Statis/statisPopover.vue

@@ -0,0 +1,55 @@
+<template>
+  <div v-if="lists.length == 1" class="flex-box p-t-s p-b-s">
+    <statisItem
+      v-for="(item, i) in lists[0]['statis']"
+      :key="i"
+      :title="i === 0 ? lists[0].title : undefined"
+      :type="item.type"
+      :list="item.list"
+    />
+  </div>
+
+  <el-popover
+    v-else-if="lists.length > 1"
+    trigger="hover"
+    placement="bottom-start"
+    :visible-arrow="false"
+    popper-class="n20-statis-pop"
+  >
+    <div slot="reference" class="flex-box p-t-s p-b-s">
+      <statisItem
+        v-for="(item, i) in lists[0]['statis']"
+        :key="i"
+        :title="i === 0 ? lists[0].title : undefined"
+        :type="item.type"
+        :list="item.list"
+      />
+    </div>
+
+    <div>
+      <div v-for="(group, j) in lists" :key="j" class="n20-statis-group">
+        <statisItem
+          v-for="(item, i) in group['statis']"
+          :key="i"
+          :title="i === 0 ? group.title : undefined"
+          :type="item.type"
+          :list="item.list"
+        />
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import statisItem from './statisItem.vue'
+export default {
+  name: 'StatisPopover',
+  components: { statisItem },
+  props: {
+    lists: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>

package/src/components/Step/index.vue

@@ -0,0 +1,38 @@
+
+<template>
+  <el-steps
+    :direction="direction"
+    :align-center="direction === 'horizontal' ? true : undefined"
+    :active="active"
+    v-bind="$attrs"
+  >
+    <el-step
+      v-for="(item, i) of dataSource"
+      :key="i"
+      :icon="item.icon"
+      :title="item.title"
+      :description="item.description"
+      @click.native="$emit('click', i)"
+    />
+  </el-steps>
+</template>
+
+<script>
+export default {
+  name: 'Step',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    active: {
+      type: Number,
+      default: 1
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>

package/src/components/Suspend/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div v-move="moveFn" class="n20-suspend" :style="{ top: topAs }">
+    <el-tooltip
+      effect="dark"
+      :content="text"
+      placement="top-end"
+      offset="20"
+      :disabled="!text"
+    >
+      <div>
+        <i
+          class="n20-icon-liucheng m-r-ss color-primary"
+          @click="(ev) => $emit('click', ev)"
+        ></i>
+        <span class="n20-suspend-text" @click="(ev) => $emit('click', ev)">
+          <slot></slot>
+        </span>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Suspend',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    top: {
+      type: Number,
+      default: 15
+    },
+    icon: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      winH: 1080,
+      moveY: 0
+    }
+  },
+  computed: {
+    topAs() {
+      let top = this.top * this.winH * 0.01 + this.moveY
+      if (top <= 0) {
+        return 0
+      } else if (top >= document.documentElement.clientHeight - 46) {
+        return document.documentElement.clientHeight - 46 + 'px'
+      }
+      return top + 'px'
+    }
+  },
+  mounted() {
+    this.resizeFn()
+    window.addEventListener('resize', this.resizeFn)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeFn)
+  },
+  methods: {
+    resizeFn() {
+      this.winH = document.documentElement.clientHeight
+    },
+    moveFn(ev) {
+      this.moveY = this.moveY + ev.pageYc
+    }
+  }
+}
+</script>

package/src/components/Table/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-table
+    v-if="!pageObj"
+    ref="el-table"
+    :header-cell-style="{ 'text-align': 'center' }"
+    :data="data"
+    :height="height"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-for="(item, i) in columns">
+      <slot v-if="item.slotName" :name="item.slotName"></slot>
+      <el-table-column
+        v-else-if="item.render"
+        :key="'cl-table-' + i"
+        v-bind="item"
+      >
+        <columnRender slot-scope="{ row }" :c-render="item.render" :row="row" />
+      </el-table-column>
+      <el-table-column v-else :key="'cl-table-' + i" v-bind="item" />
+    </template>
+  </el-table>
+
+  <div v-else :style="{ height: heightW }">
+    <el-table
+      ref="el-table"
+      :header-cell-style="{ 'text-align': 'center' }"
+      style="width: 100%"
+      :data="data"
+      v-bind="$attrs"
+      :height="heightC"
+      v-on="$listeners"
+    >
+      <template v-for="(item, i) in columns">
+        <slot v-if="item.slotName" :name="item.slotName"></slot>
+        <el-table-column
+          v-else-if="item.render"
+          :key="'cl-table-' + i"
+          v-bind="item"
+        >
+          <columnRender
+            slot-scope="{ row }"
+            :c-render="item.render"
+            :row="row"
+          />
+        </el-table-column>
+        <el-table-column v-else :key="'cl-table-' + i" v-bind="item" />
+      </template>
+    </el-table>
+    <div v-if="pageObj" class="flex-box flex-r m-t-s">
+      <Pagination
+        :page-obj="pageObj"
+        :page-key="pageKey"
+        @change="(obj) => $emit('pageChange', obj)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '../Pagination/index.vue'
+
+const columnRender = {
+  props: {
+    cRender: {
+      type: Function
+    },
+    row: {
+      type: Object
+    }
+  },
+  render(h) {
+    return this.cRender(h, this.row)
+  }
+}
+
+export default {
+  name: 'Table',
+  components: {
+    Pagination,
+    columnRender
+  },
+  props: {
+    column: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: undefined
+    },
+    columns: {
+      type: Array,
+      require: true,
+      default: () => []
+    },
+    pageObj: {
+      type: Object,
+      default: undefined
+    },
+    pageKey: {
+      type: Object,
+      default: undefined
+    },
+    height: {
+      type: [String, Number],
+      default: undefined
+    }
+  },
+  computed: {
+    heightW() {
+      if (this.height === undefined) {
+        return undefined
+      }
+      if (/\D/.test(this.height)) {
+        return this.height
+      } else {
+        return this.height + 'px'
+      }
+    },
+    heightC() {
+      return this.pageObj ? 'calc(100% - 38px)' : '100%'
+    }
+  },
+  created() {
+    if (this.column) {
+      console.warn('调整列顺序,请使用ShowColumn组件')
+    }
+  }
+}
+</script>

package/src/components/Table/indexO.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-table
+    v-if="!pagination"
+    ref="el-table"
+    :header-cell-style="{ 'text-align': 'center' }"
+    :data="data"
+    :height="height"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-for="(item, i) in columns">
+      <slot v-if="item.slotName" :name="item.slotName"></slot>
+      <el-table-column
+        v-else-if="item.render"
+        :key="'cl-table-' + i"
+        v-bind="item"
+      >
+        <columnRender slot-scope="{ row }" :c-render="item.render" :row="row" />
+      </el-table-column>
+      <el-table-column v-else :key="'cl-table-' + i" v-bind="item" />
+    </template>
+  </el-table>
+
+  <div v-else :style="{ height: heightW }">
+    <el-table
+      ref="el-table"
+      :header-cell-style="{ 'text-align': 'center' }"
+      style="width: 100%"
+      :data="data"
+      v-bind="$attrs"
+      :height="heightC"
+      v-on="$listeners"
+    >
+      <template v-for="(item, i) in columns">
+        <slot v-if="item.slotName" :name="item.slotName"></slot>
+        <el-table-column
+          v-else-if="item.render"
+          :key="'cl-table-' + i"
+          v-bind="item"
+        >
+          <columnRender
+            slot-scope="{ row }"
+            :c-render="item.render"
+            :row="row"
+          />
+        </el-table-column>
+        <el-table-column v-else :key="'cl-table-' + i" v-bind="item" />
+      </template>
+    </el-table>
+    <div v-if="pagination" class="flex-box flex-r m-t-s">
+      <Pagination
+        :page-obj="paginationOption"
+        :page-key="{ no: 'page', size: 'pageSize', total: 'total' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '../Pagination/index.vue'
+const columnRender = {
+  props: {
+    cRender: {
+      type: Function
+    },
+    row: {
+      type: Object
+    }
+  },
+  render(h) {
+    return this.cRender(h, this.row)
+  }
+}
+
+export default {
+  name: 'TableO',
+  components: {
+    Pagination,
+    columnRender
+  },
+  props: {
+    column: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: undefined
+    },
+    columns: {
+      type: Array,
+      require: true,
+      default: () => []
+    },
+    pagination: {
+      type: Boolean,
+      default: false
+    },
+    paginationOption: {
+      type: Object,
+      default: () => ({
+        page: 1,
+        total: 0,
+        pageSize: 20
+      })
+    },
+    height: {
+      type: [String, Number],
+      default: undefined
+    }
+  },
+  computed: {
+    heightW() {
+      if (this.height === undefined) {
+        return undefined
+      }
+      if (/\D/.test(this.height)) {
+        return this.height
+      } else {
+        return this.height + 'px'
+      }
+    },
+    heightC() {
+      return this.pageObj ? 'calc(100% - 38px)' : '100%'
+    }
+  },
+  watch: {
+    'paginationOption.page': {
+      handler(val) {
+        if (this.pagination) {
+          this.$emit('changePage', val)
+        }
+      }
+    },
+    'paginationOption.pageSize': {
+      handler(val) {
+        if (this.pagination) {
+          this.$emit('changePageSize', val)
+        }
+      }
+    }
+  },
+  created() {
+    if (this.column) {
+      console.warn('调整列顺序,请使用ShowColumn组件')
+    }
+  }
+}
+</script>