bxs-tools-ui 3.3.2 → 3.4.0

package/src/components/profession-list/index.less

@@ -0,0 +1,182 @@
+.bxt-profession {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  overflow: hidden;
+
+  &-head {
+    flex-shrink: 0;
+  }
+
+  &-title {
+    position: relative;
+    box-sizing: border-box;
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px;
+    border-bottom: 1px solid var(--bxt-line-split);
+
+    &-center {
+      font-size: 14px;
+      color: var(--bxt-text-primary);
+      letter-spacing: 0;
+    }
+  }
+
+  &-selected {
+    background-color: var(--bxt-bg-minor);
+    padding: 15px;
+
+    &-sel {
+      font-size: 13px;
+      color: var(--bxt-text-primary);
+      line-height: 16px;
+    }
+
+    &-text {
+      box-sizing: border-box;
+      font-size: 13px;
+      color: var(--bxt-text-primary);
+      line-height: 18px;
+      margin-top: 6px;
+    }
+  }
+
+  &-err {
+    font-size: 13px;
+    color: var(--bxt-type-danger);
+    line-height: 15px;
+    margin-top: 6px;
+  }
+
+  &-right {
+    font-size: 13px;
+    color: var(--bxt-type-primary);
+    line-height: 15px;
+    margin-top: 6px;
+  }
+
+  &-menu {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 45px;
+    padding: 0 15px;
+    margin: 0;
+    display: block;
+    overflow: hidden;
+    border-bottom: 1px solid var(--bxt-line-split);
+
+    &-item {
+      box-sizing: border-box;
+      float: left;
+      height: 45px;
+      min-width: 60px;
+      max-width: 33%;
+      line-height: 45px;
+      display: block;
+      padding: 0 7.5px;
+      color: var(--bxt-text-primary);
+      font-size: 14px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &.active {
+        position: relative;
+        color: var(--bxt-type-primary);
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 1px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 4px;
+          background: var(--bxt-type-primary);
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+
+  &-list {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &-li {
+      box-sizing: border-box;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-height: 45px;
+      padding: 14.5px 10px 13.5px 0;
+      margin-left: 15px;
+      font-size: 14px;
+      color: var(--bxt-text-primary);
+      line-height: 17px;
+      border-bottom: 1px solid var(--bxt-line-split);
+    }
+  }
+
+  &-highlight {
+    color: var(--bxt-type-primary);
+  }
+}
+
+.bxt-profession-search {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+
+  &-bar {
+    position: relative;
+    z-index: 1;
+  }
+
+  &-content {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &-result {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &-item {
+    position: relative;
+    padding: 10px 15px;
+    background: #fff;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--bxt-line-split);
+  }
+
+  &-name {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--bxt-text-primary);
+  }
+
+  &-job-type {
+    margin-top: 6px;
+    font-size: 12px;
+    line-height: 12px;
+    color: var(--bxt-type-default);
+  }
+}
+
+.bxt-text-warn {
+  color: var(--bxt-type-warning);
+}

package/src/components/profession-list/index.vue

@@ -0,0 +1,443 @@
+<template>
+  <van-popup
+    v-model="visible"
+    position="right"
+    :style="{ width: '80%', height: '100%' }"
+    get-container="body"
+    :lock-scroll="true"
+    @opened="onOpened"
+    @closed="onClosed"
+  >
+    <div class="bxt-profession">
+      <div ref="professionHead" class="bxt-profession-head">
+        <div class="bxt-profession-title">
+          <van-icon name="arrow-left" size="24px" color="#ccc" @click="back" />
+          <span class="bxt-profession-title-center">职业类别</span>
+          <van-icon name="cross" size="24px" color="#ccc" @click="closeMe" />
+        </div>
+        <div @click="searchShow">
+          <van-search placeholder="请输入关键字" disabled background="#f2f2f2" />
+        </div>
+        <div class="bxt-profession-selected">
+          <div class="bxt-profession-selected-sel">已选：</div>
+          <div v-if="selected && selected.length" class="bxt-profession-selected-text">
+            {{ selectedStr }}
+          </div>
+          <div v-if="isLeafLevel && isComplaint" class="bxt-profession-right">类别：{{ professionType }}类（符合投保条件）</div>
+          <div v-if="isLeafLevel && !isComplaint" class="bxt-profession-err">类别：拒保{{ professionType }}类（不符合投保条件）</div>
+        </div>
+        <ul class="bxt-profession-menu">
+          <li
+            v-for="(menu, index) in menuList"
+            :key="'menu' + index"
+            class="bxt-profession-menu-item"
+            :class="{ active: index + 1 === menuList.length }"
+            @click="onClickMenu(index)"
+          >
+            {{ menu.des }}
+          </li>
+        </ul>
+      </div>
+
+      <div class="bxt-profession-list" :style="listStyle">
+        <ul v-if="professionObj && professionObj.length > 0">
+          <li
+            v-for="(item, index) in professionObj"
+            :key="item.id || item.code || index"
+            class="bxt-profession-list-li"
+            :class="{
+              'bxt-profession-highlight':
+                selected && selected.length && selected[selected.length - 1].des !== undefined && selected[selected.length - 1].des === item.des
+            }"
+            @click="professionChoose(item)"
+          >
+            <span>{{ item.des }}</span>
+            <van-icon v-if="!item.code" name="arrow" size="18px" color="#ccc" />
+          </li>
+        </ul>
+      </div>
+
+      <van-popup
+        v-model="isShowSearch"
+        position="right"
+        :style="{ width: '100%', height: '100%' }"
+        get-container="body"
+        :lock-scroll="true"
+        @opened="enterSearchPage"
+      >
+        <div class="bxt-profession-search">
+          <div ref="professionSearchBar" class="bxt-profession-search-bar">
+            <van-search v-model="searchValue" placeholder="请输入关键字" show-action @search="search" @cancel="searchCancel" @clear="searchClear" />
+          </div>
+          <div class="bxt-profession-search-content" :style="searchListStyle">
+            <div v-if="searchs.length > 0" class="bxt-profession-search-result">
+              <div v-for="(item, index) in searchs" :key="item.code || index" class="bxt-profession-search-item" @click="searchAndChooseItem(item)">
+                <div class="bxt-profession-search-name">{{ item.name }}</div>
+                <div class="bxt-profession-search-job-type" :class="{ 'bxt-text-warn': !item.flag }">
+                  {{ item.val }}类
+                  {{ item.flag ? '（符合投保条件）' : '（不符合投保条件）' }}
+                </div>
+              </div>
+            </div>
+            <van-empty v-else description="暂无数据" />
+          </div>
+        </div>
+      </van-popup>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import { Popup, Search, Icon, Empty, Toast } from 'vant'
+import { getProfession } from '../../api'
+import { PROFESSION_LEVEL_DIGIT, DEFAULT_MENU_LIST } from './constant'
+import {
+  asyncColumnsParamsValidator,
+  formatColumn,
+  getAllNames,
+  treeTranArray,
+  findProfessionByCode,
+  buildSelectedStr,
+  buildMenuFromSelected,
+  hasProfessionCategory
+} from './handler'
+import './index.less'
+
+export default {
+  name: 'BxtProfessionList',
+  components: {
+    [Popup.name]: Popup,
+    [Search.name]: Search,
+    [Icon.name]: Icon,
+    [Empty.name]: Empty
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    asyncColumnsParams: {
+      type: Object,
+      validator: asyncColumnsParamsValidator
+    },
+    childrenKeyName: {
+      type: String,
+      default: 'children'
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    initialSelection: {
+      type: Object,
+      default: () => null
+    },
+    verifyProfess: {
+      type: Function,
+      default: () => true
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      totalLevels: 1,
+      isLeafLevel: false,
+      isComplaint: false,
+      selected: [],
+      currSelect: {},
+      professionType: '',
+      professionObj: null,
+      isShowSearch: false,
+      searchValue: '',
+      searchs: [],
+      menuList: DEFAULT_MENU_LIST.slice(),
+      listStyle: null,
+      searchListStyle: null,
+      parentId: '',
+      professionList: []
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedStr() {
+      return buildSelectedStr(this.selected, this.asyncColumns)
+    },
+    asyncColumns() {
+      return !!this.asyncColumnsParams
+    }
+  },
+  methods: {
+    getIsDev() {
+      if (this.asyncColumnsParams && (this.asyncColumnsParams.isDev === true || this.asyncColumnsParams.isDev === false)) {
+        return this.asyncColumnsParams.isDev
+      }
+      return undefined
+    },
+    fetchProfession() {
+      if (!asyncColumnsParamsValidator(this.asyncColumnsParams)) {
+        Toast('职业类别参数缺失')
+        return Promise.resolve([])
+      }
+      const urlParams = { ...this.asyncColumnsParams.urlParams }
+      const params = JSON.parse(JSON.stringify(this.asyncColumnsParams.postParams))
+      if (this.parentId && !this.searchValue) {
+        params.parentId = this.parentId
+      }
+      if (this.searchValue) {
+        params.searchKey = this.searchValue
+      }
+      return getProfession(urlParams, params, this.getIsDev())
+        .then(response => formatColumn((response && response.data) || []))
+        .catch(error => {
+          Toast('职业类别数据获取失败')
+          console.log('职业类别请求API报错:', error)
+          return []
+        })
+    },
+    calculateListStyle() {
+      this.$nextTick(() => {
+        if (this.$refs.professionHead) {
+          this.listStyle = {
+            height: `${window.innerHeight - this.$refs.professionHead.offsetHeight}px`
+          }
+        }
+      })
+    },
+    onClickMenu(idx) {
+      if (this.selected.length > idx) {
+        this.isLeafLevel = false
+        this.isComplaint = false
+        if (this.selected.length !== this.menuList.length) {
+          this.selected = this.selected.slice(0, idx + 1 - this.totalLevels)
+        } else {
+          this.selected = this.selected.slice(0, idx - this.totalLevels)
+        }
+        this.professionObj = this.selected.length > 0 ? this.selected[this.selected.length - 1][this.childrenKeyName] : this.professionList
+      }
+    },
+    professionChoose(val) {
+      this.currSelect = val
+      this.professionAddSelected(val)
+      if (!val.code) {
+        if (this.asyncColumns) {
+          this.parentId = val.id
+          this.fetchProfession().then(res => {
+            const children = res || []
+            this.$set(this.currSelect, this.childrenKeyName, children)
+            this.professionObj = children
+          })
+        } else {
+          this.professionObj = val[this.childrenKeyName]
+        }
+      } else if (this.verifyProfess(this.currSelect)) {
+        this.isLeafLevel = true
+        this.isComplaint = true
+        this.professionType = this.asyncColumns ? val.category : val.val
+        if (!this.readonly) {
+          this.$emit('select', this.selected[this.selected.length - 1])
+          this.closeMe()
+        }
+      } else {
+        this.isLeafLevel = true
+        this.isComplaint = false
+        this.professionType = this.asyncColumns ? val.category : val.val
+      }
+    },
+    professionAddSelected(val) {
+      if (this.asyncColumns) {
+        if (!this.selected.length) {
+          this.selected.push(val)
+        } else {
+          const lastItem = this.selected[this.selected.length - 1]
+          if (hasProfessionCategory(lastItem)) {
+            this.selected.pop()
+            this.selected.push(val)
+          } else {
+            this.selected.push(val)
+          }
+        }
+        return
+      }
+      if (
+        !this.selected.length ||
+        (this.selected.length < this.totalLevels &&
+          this.selected[this.selected.length - 1][this.childrenKeyName] &&
+          this.selected[this.selected.length - 1][this.childrenKeyName].some(item => item.des === val.des))
+      ) {
+        this.selected.push(val)
+      } else {
+        this.selected.pop()
+        this.selected.push(val)
+      }
+    },
+    back() {
+      this.isLeafLevel = false
+      if (this.selected && this.selected.length > 0) {
+        this.selected.pop()
+        this.professionObj = this.selected.length > 0 ? this.selected[this.selected.length - 1][this.childrenKeyName] : this.professionList
+      } else {
+        this.closeMe()
+      }
+    },
+    closeMe() {
+      this.visible = false
+    },
+    onOpened() {
+      if (this.asyncColumns) {
+        this.fetchProfession().then(res => {
+          this.professionList = res || []
+          this.totalLevels = 1
+          this.professionObj = this.professionList
+        })
+      } else {
+        this.professionList = this.columns || []
+        this.totalLevels = 1
+        let targetObj = this.professionList
+        while (targetObj[0] && targetObj[0][this.childrenKeyName] && typeof targetObj[0][this.childrenKeyName] === 'object') {
+          this.totalLevels += 1
+          if (targetObj[0] && targetObj[0][this.childrenKeyName]) {
+            targetObj = targetObj[0][this.childrenKeyName]
+          }
+        }
+        if (this.initialSelection && this.initPreProfession(this.initialSelection)) {
+          this.professionObj = this.selected[this.selected.length - 2][this.childrenKeyName]
+        } else {
+          this.professionObj = this.professionList
+        }
+      }
+      this.calculateListStyle()
+    },
+    onClosed() {
+      this.isLeafLevel = false
+      this.isComplaint = false
+      this.selected = []
+      this.professionType = ''
+      this.isShowSearch = false
+      this.searchClear()
+      this.menuList = DEFAULT_MENU_LIST.slice()
+      this.totalLevels = 1
+      this.professionObj = null
+      this.professionList = []
+      if (this.asyncColumns) {
+        this.parentId = ''
+      }
+    },
+    enterSearchPage() {
+      this.$nextTick(() => {
+        if (!this.searchListStyle && this.$refs.professionSearchBar) {
+          this.searchListStyle = {
+            height: `${window.innerHeight - this.$refs.professionSearchBar.offsetHeight}px`
+          }
+        }
+      })
+    },
+    searchShow() {
+      this.isShowSearch = true
+    },
+    search() {
+      if (this.asyncColumns) {
+        this.fetchProfession().then(res => {
+          this.searchs = []
+          const professionList = res || []
+          professionList.forEach(item => {
+            const temp = {
+              des: item.name,
+              code: item.code,
+              val: item.category,
+              category: item.category,
+              name: getAllNames(item, [])
+                .map(it => it.name)
+                .join('-'),
+              flag: this.verifyProfess({
+                des: item.name,
+                code: item.code,
+                val: item.category,
+                category: item.category
+              })
+                ? 1
+                : 0
+            }
+            this.searchs.push(temp)
+          })
+        })
+      } else {
+        this.searchs = []
+        const result = treeTranArray(this.professionList, '', [], this.childrenKeyName)
+        result.forEach(item => {
+          if (item.des.indexOf(this.searchValue) !== -1) {
+            const desArr = item.des.split('-')
+            const temp = {
+              des: desArr[desArr.length - 1],
+              code: item.code,
+              val: item.val,
+              name: item.des,
+              flag: this.verifyProfess({
+                des: desArr[desArr.length - 1],
+                code: item.code,
+                val: item.val
+              })
+                ? 1
+                : 0
+            }
+            this.searchs.push(temp)
+          }
+        })
+      }
+    },
+    searchCancel() {
+      this.isShowSearch = false
+      this.searchClear()
+    },
+    searchClear() {
+      this.searchs = []
+      this.searchValue = ''
+    },
+    searchAndChooseItem(params) {
+      const temp = { ...params }
+      if (params.flag) {
+        temp.val = parseFloat(params.val)
+        this.$emit('select', temp)
+        if (!this.readonly) {
+          this.closeMe()
+          this.searchCancel()
+        } else {
+          Toast('符合投保条件')
+        }
+      } else {
+        Toast('该职业不符合投保条件')
+      }
+    },
+    initPreProfession(profess) {
+      const result = findProfessionByCode(this.professionList, profess.code, profess.des, profess.val, this.childrenKeyName)
+      this.selected = result ? result.nodes : []
+      if (!this.selected.length) {
+        Toast('暂无该职业或职业类别有误')
+        return false
+      }
+      this.currSelect = this.selected[this.selected.length - 1]
+      this.isLeafLevel = true
+      this.professionType = this.currSelect.val
+      this.isComplaint = !!this.verifyProfess(this.currSelect)
+      return true
+    }
+  },
+  watch: {
+    selected(val) {
+      const { menuList, totalLevels } = buildMenuFromSelected(val, this.asyncColumns, this.totalLevels, PROFESSION_LEVEL_DIGIT)
+      this.menuList = menuList
+      this.totalLevels = totalLevels
+      this.calculateListStyle()
+    }
+  }
+}
+</script>