n20-common-lib 1.1.98

package/src/components/Filters/index.vue

@@ -0,0 +1,358 @@
+<template>
+  <el-popover
+    v-model="showPop"
+    trigger="manual"
+    :width="width"
+    title="筛选"
+    placement="bottom-end"
+    @show="showPopC = true"
+    @after-leave="
+      showPopC = false
+      showMore = false
+    "
+  >
+    <template slot="reference">
+      <el-button
+        icon="n20-icon-iconfontshaixuan"
+        plain
+        onlyicon
+        size="mini"
+        @click="clickBtn"
+      />
+    </template>
+
+    <el-form
+      v-if="showPopC"
+      v-click-outside="clickOut"
+      class="n20-filter p-a-s p-b-0"
+      :label-width="labelWidth"
+      @submit.native.prevent
+    >
+      <el-form-item v-for="(item, i) in minList" :key="i" :label="item.label">
+        <slot v-if="item.slotName" :name="item.slotName"></slot>
+        <el-input
+          v-else-if="item.type === 'text' || item.type === undefined"
+          v-model="form[item.value]"
+          :clearable="item | clearableF"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <el-select
+          v-else-if="item.type === 'select'"
+          v-model="form[item.value]"
+          :clearable="item | clearableF"
+          :multiple="item.multiple"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        >
+          <template
+            v-if="item.props && item.props.labelKey && item.props.valueKey"
+          >
+            <el-option
+              v-for="(c, i) in item.options"
+              :key="i"
+              :label="c[item.props.labelKey]"
+              :value="c[item.props.valueKey]"
+              :disabled="c.disabled"
+            />
+          </template>
+          <template v-else>
+            <el-option
+              v-for="c in item.options"
+              :key="c.value + '_' + c.label"
+              :label="c.label"
+              :value="c.value"
+              :disabled="c.disabled"
+            />
+          </template>
+        </el-select>
+        <inputNumber
+          v-else-if="item.type === 'number'"
+          v-model="form[item.value]"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <inputNumberRange
+          v-else-if="item.type === 'numberrange'"
+          :start-value.sync="form[item.startValue]"
+          :end-value.sync="form[item.endValue]"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <datePickerPor
+          v-else-if="item.type === 'date'"
+          v-model="form[item.value]"
+          type="date"
+          :clearable="item | clearableF"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <datePickerPor
+          v-else-if="item.type === 'daterange'"
+          type="daterange"
+          :start-date.sync="form[item.startDate]"
+          :end-date.sync="form[item.endDate]"
+          :clearable="item | clearableF"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <el-checkbox-group
+          v-else-if="item.type === 'checkbox'"
+          v-model="form[item.value]"
+          v-bind="item.props"
+          v-on="item.on"
+        >
+          <el-checkbox
+            v-for="c in item.options"
+            :key="c.value"
+            :label="c.value"
+            :disabled="c.disabled"
+            >{{ c.label }}</el-checkbox
+          >
+        </el-checkbox-group>
+        <el-radio-group
+          v-else-if="item.type === 'radio'"
+          v-model="form[item.value]"
+          v-bind="item.props"
+          v-on="item.on"
+        >
+          <el-radio
+            v-for="c in item.options"
+            :key="c.value"
+            :label="c.value"
+            :disabled="c.disabled"
+            >{{ c.label }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="filterList.length > defaultShow">
+        <div :style="{ paddingLeft: labelWidth }">
+          <el-button
+            class="p-t-0 m-b-s color-primary"
+            type="text"
+            @click="showMore = !showMore"
+            ><span>更多条件</span
+            ><i
+              :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+            ></i
+          ></el-button>
+        </div>
+        <el-collapse-transition>
+          <div v-if="showMore">
+            <el-form-item
+              v-for="(item, i) in moreList"
+              :key="i"
+              :label="item.label"
+            >
+              <slot v-if="item.slotName" :name="item.slotName"></slot>
+              <el-input
+                v-else-if="item.type === 'text' || item.type === undefined"
+                v-model="form[item.value]"
+                :clearable="item | clearableF"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <el-select
+                v-else-if="item.type === 'select'"
+                v-model="form[item.value]"
+                :clearable="item | clearableF"
+                :multiple="item.multiple"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              >
+                <template
+                  v-if="
+                    item.props && item.props.labelKey && item.props.valueKey
+                  "
+                >
+                  <el-option
+                    v-for="(c, i) in item.options"
+                    :key="i"
+                    :label="c[item.props.labelKey]"
+                    :value="c[item.props.valueKey]"
+                    :disabled="c.disabled"
+                  />
+                </template>
+                <template v-else>
+                  <el-option
+                    v-for="c in item.options"
+                    :key="c.value + '_' + c.label"
+                    :label="c.label"
+                    :value="c.value"
+                    :disabled="c.disabled"
+                  />
+                </template>
+              </el-select>
+              <inputNumber
+                v-else-if="item.type === 'number'"
+                v-model="form[item.value]"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <inputNumberRange
+                v-else-if="item.type === 'numberrange'"
+                :start-value.sync="form[item.startValue]"
+                :end-value.sync="form[item.endValue]"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <datePickerPor
+                v-else-if="item.type === 'date'"
+                v-model="form[item.value]"
+                type="date"
+                :clearable="item | clearableF"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <datePickerPor
+                v-else-if="item.type === 'daterange'"
+                type="daterange"
+                :start-date.sync="form[item.startDate]"
+                :end-date.sync="form[item.endDate]"
+                :clearable="item | clearableF"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <el-checkbox-group
+                v-else-if="item.type === 'checkbox'"
+                v-model="form[item.value]"
+                v-bind="item.props"
+                v-on="item.on"
+              >
+                <el-checkbox
+                  v-for="c in item.options"
+                  :key="c.value"
+                  :label="c.value"
+                  :disabled="c.disabled"
+                  >{{ c.label }}</el-checkbox
+                >
+              </el-checkbox-group>
+              <el-radio-group
+                v-else-if="item.type === 'radio'"
+                v-model="form[item.value]"
+                v-bind="item.props"
+                v-on="item.on"
+              >
+                <el-radio
+                  v-for="c in item.options"
+                  :key="c.value"
+                  :label="c.value"
+                  :disabled="c.disabled"
+                  >{{ c.label }}</el-radio
+                >
+              </el-radio-group>
+            </el-form-item>
+          </div>
+        </el-collapse-transition>
+      </template>
+      <footerBox class="text-c">
+        <el-button type="primary" @click="filter">筛选</el-button>
+        <el-button plain @click="clear">重置</el-button>
+      </footerBox>
+    </el-form>
+  </el-popover>
+</template>
+
+<script>
+import inputNumber from '../InputNumber/index.vue'
+import inputNumberRange from '../InputNumber/numberRange.vue'
+import datePickerPor from '../DatePicker/por.vue'
+import footerBox from '../FooterBox/index.vue'
+export default {
+  name: 'Filters',
+  components: {
+    inputNumber,
+    inputNumberRange,
+    datePickerPor,
+    footerBox
+  },
+  filters: {
+    clearableF(item) {
+      if (item.props && item.props.clearable === false) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  props: {
+    width: {
+      type: Number,
+      default: 310
+    },
+    defaultShow: {
+      type: Number,
+      default: 5
+    },
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: '5em'
+    }
+  },
+  data() {
+    return {
+      showPop: false,
+      showPopC: false,
+      showMore: false
+    }
+  },
+  computed: {
+    minList() {
+      return this.filterList.slice(0, this.defaultShow)
+    },
+    moreList() {
+      return this.filterList.slice(this.defaultShow)
+    }
+  },
+  methods: {
+    clear() {
+      this.$emit('clear')
+    },
+    filter() {
+      this.$emit('filter')
+      this.$nextTick(() => {
+        this.showPop = false
+      })
+    },
+    clickBtn() {
+      if (!this.showPop) {
+        setTimeout(() => {
+          this.showPop = true
+        }, 60)
+      }
+    },
+    clickOut() {
+      let elPoppers = []
+      document
+        .querySelectorAll('.el-popper,.el-dialog__wrapper')
+        .forEach((e) => {
+          e.style.display !== 'none' && elPoppers.push(e)
+        })
+
+      if (elPoppers.length <= 1) {
+        this.showPop = false
+      }
+    }
+  }
+}
+</script>

package/src/components/Filters/indexO.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-popover
+    :width="width"
+    placement="bottom-end"
+    title="筛选"
+    v-model="showPop"
+    @after-leave="
+      showMore = false
+    "
+    trigger="manual"
+  >
+    <span slot="reference">
+      <el-button  @click="clickBtn" icon="n20-icon-iconfontshaixuan" plain onlyicon size="mini"
+    /></span>
+
+    <div class="n20-filter p-a-s" v-click-outside="clickOut">
+      <slot></slot>
+      <el-button
+        v-if="$slots.more"
+        class="p-t-0 m-b-s"
+        type="text"
+        @click="showMore = !showMore"
+        ><span>{{ showMore ? '收起' : '更多' }}条件</span
+        ><i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i
+      ></el-button>
+      <el-collapse-transition v-if="$slots.more">
+        <div v-show="showMore">
+          <slot name="more"></slot>
+        </div>
+      </el-collapse-transition>
+    </div>
+    <div class="text-c m-t m-b">
+      <slot name="actions">
+        <el-button
+          size="mini"
+          type="primary"
+          style="width: 76px"
+          @click="filter"
+        >
+          {{ filterText }}
+        </el-button>
+        <el-button size="mini" plain style="width: 76px" @click="clear">
+          {{ clearText }}
+        </el-button>
+      </slot>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'FiltersO',
+  props: {
+    clearText: {
+      type: String,
+      default: '重置'
+    },
+    filterText: {
+      type: String,
+      default: '筛选'
+    },
+    width: {
+      type: Number,
+      default: 310
+    }
+  },
+  data() {
+    return {
+      showMore: false,
+      showPop:false
+    }
+  },
+  mounted() {},
+  methods: {
+    clear() {
+      this.$emit('clear')
+    },
+    filter() {
+      this.showPop = false
+      this.$emit('filter')
+    },
+    clickBtn() {
+      if (!this.showPop) {
+        setTimeout(() => {
+          this.showPop = true
+        }, 60)
+      }
+    },
+    clickOut() {
+      let elPoppers = []
+      document
+          .querySelectorAll('.el-popper,.el-dialog__wrapper')
+          .forEach((e) => {
+            e.style.display !== 'none' && elPoppers.push(e)
+          })
+
+      if (elPoppers.length <= 1) {
+        this.showPop = false
+      }
+    }
+  }
+}
+</script>
+

package/src/components/FlowStep/index.vue

@@ -0,0 +1,69 @@
+<template>
+   <div class="n20-steps-area">
+    <div class="n20-steps">
+     <div
+        :class="['n20-steps-item',
+      { 'finished': current > n,
+       'process': current === n && n !== totalSteps,
+       'last-process': current === totalSteps && n === totalSteps,
+       'middle-wait': current < n && n !== totalSteps,
+       'last-wait': current < n && n === totalSteps,
+      }
+     ]"
+        v-for="n in totalSteps"
+        :key="n"
+        @click="onChange(n)">
+      <div class="n20-steps-icon">
+       <span :class="['n20-u-icon',{'n20-icon-danxuankuang-yixuanzhong': current === n && n !== totalSteps||  current === totalSteps && n === totalSteps},]" v-if="current<=n"></span>
+       <span class="n20-u-icon n20-icon-fankui-chenggongkongxin" v-else></span>
+      </div>
+      <div class="n20-steps-content">
+       <div class="n20-steps-title">{{ stepsLabel[n-1] || 'S ' + n }}</div>
+       <div class="n20-steps-description">{{ stepsDesc[n-1] || 'Desc ' + n }}</div>
+      </div>
+     </div>
+    </div>
+   </div>
+</template>
+<script>
+export default {
+  name: 'FlowStep',
+  props: {
+    stepsLabel: { // 步骤title数组
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    stepsDesc: { // 步骤description数组
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    totalSteps: { // 总的步骤数
+      type: Number,
+      default: 3
+    },
+    currentStep: { // 当前选中的步骤
+      type: Number,
+      default: 1
+    }
+  },
+  data () {
+    return {
+      // 若当前选中步骤超过总步骤数，则默认选择步骤1
+      current: this.currentStep > this.totalSteps ? 1 : this.currentStep
+    }
+  },
+  methods: {
+    onChange (index) { // 点击切换选择步骤
+      console.log('index:', index)
+      if (this.current !== index) {
+        this.current = index
+        this.$emit('change', index)
+      }
+    }
+  }
+}
+</script>

package/src/components/FooterBox/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="n20-footer-box">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FooterBox',
+  mounted() {
+    if (this.$el.parentNode) {
+      this.$el.parentNode.classList.add('n20-footer-parent')
+    }
+  },
+  beforeDestroy() {
+    if (this.$el.parentNode) {
+      this.$el.parentNode.classList.remove('n20-footer-parent')
+    }
+  }
+}
+</script>

package/src/components/GeneralCard/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="general-card">
+    <div class="card-top">
+      <slot name="title"></slot>
+      <slot name="day"></slot>
+    </div>
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeneralCard'
+}
+</script>