商机管理页面修改

public/page/subsetting/sub_entrance.html

@@ -109,11 +109,17 @@
                             </div>
                         </a>
                         <a class="j-cell" href="javascript:;">
-                            <div class="j-cell_left">项目匹配<span class="iconfont icon-wenhao"></span></div>
+                            <div class="j-cell_left">项目匹配<span class="iconfont icon-wenhao project_wh"></span></div>
                             <div class="j-cell_right">
                                 <input class="j-switch" type="checkbox">
                             </div>
                         </a>
+                        <a class="j-cell" href="javascript:;">
+                          <div class="j-cell_left">允许员工进行订阅范围扩展<span class="iconfont icon-wenhao sub_wh"></span></div>
+                          <div class="j-cell_right">
+                              <input class="j-switch" type="checkbox">
+                          </div>
+                      </a>
                     </div>
                     <div class="j-cells without-icon" style="margin: 0.2rem auto;">
                         <a class="j-cell" href="./vip_viewPage.html">

src/components/searchFilter/infoTypeFilterPicker.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="j-container infotypepicker">
+    <div class="j-main">
+      <div class="unitTab">
+        <van-tabs type="card" class="unitType" v-model="active">
+          <van-tab title="全部">
+            <van-cell-group>
+              <van-cell
+              clickable
+              type="primary"
+              title="全选"
+              :class="{checkActive:checkedAll==true}"
+              @click="checkBoxAll"
+              >
+              <template #right-icon>
+                <van-checkbox checked-color="#2ABED1" :bind-group="false" v-model="checkedAll"></van-checkbox>
+              </template>
+              </van-cell>
+            </van-cell-group>
+          </van-tab>
+          <van-tab v-for="(item, index) in tablist" :key="index">
+            <template #title>
+              <div class="tabtitle">
+                {{Object.keys(item)[0]}}
+              </div>
+              <div class="optionnum" v-if="selectNum(item)!=0">{{selectNum(item)}}/{{item[Object.keys(item)[0]].length}}</div>
+            </template>
+            <van-cell
+                clickable
+                title="全选"
+                :class="{checkActive:item[Object.keys(item)[1]]==true}"
+                @click="checkAll(item)"
+                >
+                <template #right-icon>
+                  <van-checkbox checked-color="#2ABED1" :bind-group="false" v-model="item[Object.keys(item)[1]]"></van-checkbox>
+                </template>
+            </van-cell>
+            <van-cell-group>
+              <van-cell
+                v-for="(iitem, i) in item[Object.keys(item)[0]]"
+                clickable
+                label-disabled="false"
+                :key="i"
+                :class="{checkActive:iitem.type==true}"
+                :title="iitem.name"
+                @click="toggleCheck(iitem, item)"
+              >
+                <template #right-icon>
+                  <van-checkbox checked-color="#2ABED1" :bind-group="false" v-model="iitem.type" :name="iitem.name" ref="checkboxes" />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+    <div class="j-footer">
+      <div class="j-button-group">
+        <button class="j-button-cancel" @click="resetAll">重置</button>
+        <button class="j-button-confirm" :disabled="canClick" @click="onConfirm">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { DatetimePicker, Tabs, Tab, Cell, CellGroup, Checkbox, CheckboxGroup } from 'vant'
+
+@Component({
+  name: 'infotypepicker',
+  components: {
+    [DatetimePicker.name]: DatetimePicker,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup
+  }
+})
+
+export default class extends Vue {
+  @Prop({
+    type: Array,
+    required: false,
+    default: []
+  }) selectcatelist;
+
+  active = 1
+  tablist = [
+    {
+      党政机关事业单位: ['人大', '政协', '党委办', '组织', '宣传', '统战', '纪委', '政府办', '发改委', '财政', '教育', '科技', '工信', '民政', '民宗', '人社', '公安', '检察院', '法院', '司法', '应急管理', '军队', '自然资源', '生态环境', '住建', '市政', '城管', '交通', '水利', '农业', '气象', '文旅', '卫健委', '医疗', '学校', '档案', '体育', '政务中心', '机关事务', '国资委', '海关', '税务', '市场监管', '商务', '人行', '银保监', '证监', '审计', '出版广电', '统计', '公共资源交易', '社会团体', '气象']
+    },
+    {
+      企业: ['传媒', '采矿业', '电信行业', '金融业', '建筑业', '能源化工', '农林牧渔', '批发零售', '信息技术', '运输物流', '制造业', '住宿餐饮']
+    }
+  ]
+
+  checkedAll = false
+  canClick = true
+
+  created () {
+    this.getData()
+    this.setState()
+    this.getbBtnClick()
+  }
+
+  setState () {
+    const arr = this.selectcatelist || []
+    if (!this.selectcatelist) {
+      this.selectcatelist = []
+    }
+    if (this.selectcatelist.length !== 0) {
+      this.tablist.forEach(function (item) {
+        item[Object.keys(item)[0]].forEach(function (data) {
+          arr.forEach(function (sum) {
+            if (data.name === sum) {
+              data.type = true
+            }
+          })
+        })
+      })
+      this.canClick = false
+    } else {
+      this.tablist.forEach(function (item) {
+        item[Object.keys(item)[0]].forEach(function (data) {
+          data.type = false
+        })
+      })
+      console.log(this.tablist)
+    }
+  }
+
+  // 获取数据
+  getData () {
+    const _this = this
+    const maxarr = []
+    _this.tablist.forEach(function (item, index) {
+      const minarr = []
+      const keyname = Object.keys(item)[0]
+      const eachArr = item[Object.keys(item)[0]]
+      eachArr.forEach(function (data, i) {
+        data = {
+          name: data,
+          type: false
+        }
+        minarr.push(data)
+      })
+      const obj = {
+        [keyname]: minarr,
+        type: false
+      }
+      maxarr.push(obj)
+    })
+    _this.tablist = maxarr
+  }
+
+  // 总全选
+  checkBoxAll () {
+    if (this.checkedAll) {
+      this.tablist.forEach(function (item, index) {
+        item[Object.keys(item)[0]].forEach(function (data, i) {
+          item.type = false
+          data.type = false
+        })
+      })
+      this.checkedAll = false
+    } else {
+      this.tablist.forEach(function (item, index) {
+        item[Object.keys(item)[0]].forEach(function (data, i) {
+          item.type = true
+          data.type = true
+        })
+      })
+      this.checkedAll = true
+    }
+    this.getbBtnClick()
+  }
+
+  // 模块全选
+  checkAll (data) {
+    const selectBool = data[Object.keys(data)[1]]
+    const dataArr = data[Object.keys(data)[0]]
+    console.log(selectBool)
+    if (selectBool) {
+      data[Object.keys(data)[1]] = false
+      dataArr.forEach(function (item, index) {
+        item.type = false
+      })
+    } else {
+      data[Object.keys(data)[1]] = true
+      dataArr.forEach(function (item, index) {
+        item.type = true
+      })
+    }
+    this.getbBtnClick()
+  }
+
+  // 模块单选
+  toggleCheck (data, item) {
+    if (data.type) {
+      data.type = false
+    } else {
+      data.type = true
+      this.selectNum(item)
+    }
+
+    // 模块全部选中，全选自动勾选
+    const allselect = item[Object.keys(item)[0]].some(function (sum, index) {
+      if (sum.type === false) {
+        return true
+      }
+    })
+    item[Object.keys(item)[1]] = !allselect
+
+    // 只要有一个没有选中，总全选不勾选
+    const industryAll = this.tablist.some(function (itemall, index) {
+      if (itemall.type === false) {
+        return true
+      }
+    })
+    this.checkedAll = !industryAll
+    this.getbBtnClick()
+  }
+
+  // 选择的数量
+  selectNum (item) {
+    const numArr = []
+    item[Object.keys(item)[0]].forEach(function (data) {
+      if (data.type) {
+        numArr.push(data.type)
+      }
+    })
+    return numArr.length
+  }
+
+  // 只要有一个选中，确认按钮可点击
+  getbBtnClick () {
+    let boolnum = -1
+    const boolArr = []
+    this.tablist.forEach(function (itemall, index) {
+      itemall[Object.keys(itemall)[0]].forEach(function (data) {
+        let bool = true + ''
+        if (data.type) {
+          bool = false + ''
+        }
+        boolArr.push(bool)
+      })
+    })
+    boolnum = boolArr.indexOf('false')
+    if (boolnum === -1) {
+      this.canClick = true
+    } else {
+      this.canClick = false
+    }
+  }
+
+  // 重置按钮
+  resetAll () {
+    this.canClick = true
+    const params = {
+      name: 'cateItem',
+      data: ''
+    }
+    this.$emit('cancel', params)
+    return params
+  }
+
+  // 确定按钮
+  onConfirm () {
+    const cateArr = []
+    let t = 0
+    this.tablist.forEach(function (item, index) {
+      item[Object.keys(item)[0]].forEach(function (data: { type: any; name: any }, i: any) {
+        if (data.type) {
+          cateArr.push(data.name)
+        }
+      })
+    })
+    t = cateArr.length
+    const params = {
+      name: 'cateItem',
+      data: cateArr,
+      t: t
+    }
+    this.$emit('confirm', params)
+    return params
+  }
+}
+</script>
+
+<style lang="scss">
+.infotypepicker{
+    width: 100%;
+}
+
+/* 采购单位类型 */
+.infotypepicker .unitTab{
+    height: 325px;
+    overflow: hidden;
+    -webkit-box-flex: 0;
+    -webkit-flex: none;
+    flex: none;
+    .van-tabs__wrap{
+      width: 125px;
+      height: 100%;
+    }
+    .van-tabs__wrap .van-tabs__nav.van-tabs__nav--card{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+      border: none;
+      .van-tab{
+        flex: none;
+        min-height: 40px;
+        background: #F4F5F7;
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+        font-size: 15px;
+        font-family: PingFang SC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #161826;
+        line-height: 22px;
+        border: none;
+        .van-tab__text{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          padding:9px 0 9px 16px;
+          .optionnum{
+              display: -webkit-box;
+              display: -webkit-flex;
+              display: flex;
+              -webkit-box-pack: center;
+              -webkit-justify-content: center;
+              justify-content: center;
+              -webkit-box-align: center;
+              -webkit-align-items: center;
+              align-items: center;
+              padding: 0 4px;
+              height: 15px;
+              background: #2abed1;
+              border: 1px solid #ffffff;
+              border-radius: 40px;
+              font-size: 11px;
+              font-weight: 500;
+              text-align: CENTER;
+              color: #ffffff;
+          }
+        }
+        &.van-tab--active {
+          background: #FFFFFF;
+          font-size: 15px;
+          font-family: PingFang SC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #2ABDD1;
+          line-height: 22px;
+        }
+      }
+    }
+}
+.infotypepicker .unitTab .van-tabs__content{
+  width: 100%;
+    height: 100%;
+    overflow: auto;
+    flex: 1;
+}
+.infotypepicker .unitType {
+    height: 100%;
+    /* overflow: auto; */
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+</style>

src/components/searchFilter/moneyFilterPicker.vue

@@ -0,0 +1,458 @@
+<template>
+  <div class="time-filter">
+    <div class="filter-top">
+      <div class="all-button-box">
+        <button
+          v-for="(item, i) in time"
+          :key="i" @click="selecteTime(item)"
+          class="j-button j-button-select"
+          :class="item.selected ? 'active' : ''"
+          >{{ item.name }}</button>
+      </div>
+      <div class="time-box">
+        <div class="time" :class="accurateTimeSelected ? 'active' : ''" @click="accurateTimeSelected = true">
+          <div class="start-time">
+            <div><input class="moneyiptval" type="text"><span style="margin-right:10px">万元</span></div>
+          </div>
+          <div class="end-time">
+            <div><input class="moneyiptval" type="text"><span style="margin-right:10px">万元</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="j-button-group bottom-btns">
+      <button class="j-button-cancel" @click="resetTime">重置</button>
+      <button class="j-button-confirm" @click="onConfirm">确认</button>
+    </div>
+
+    <!-- 设置起始时间 -->
+    <van-popup
+      v-model="startTimeOptions.show" round
+      get-container="body"
+      position="bottom"
+      class="date-time-picker-popup">
+      <div class="pop-header r-c-box">
+        <span class="title-span">{{ startTimeOptions.title }}</span>
+        <span class="j-icon icon-del-grey" @click.stop="startTimeOptions.show = false"></span>
+      </div>
+      <van-datetime-picker
+        v-model="startTimeOptions.value"
+        ref="startDatePicker"
+        type="date"
+        :show-toolbar="false"
+        :formatter="formatterYMD"
+        :min-date="startTimeOptions.minDate"
+        :max-date="startTimeOptions.maxDate"
+        swipe-duration="60"
+        @change="pickerChange($event, 'start')" />
+      <div class="pop-footer j-button-group">
+        <button class="j-button-cancel" @click.stop="pickerReset('start')">重置</button>
+        <button class="j-button-confirm" @click.stop="pickerConfirm('start')">确定</button>
+      </div>
+    </van-popup>
+    <!-- 设置结束时间 -->
+    <van-popup
+      v-model="endTimeOptions.show" round
+      get-container="body"
+      position="bottom"
+      class="date-time-picker-popup">
+      <div class="pop-header r-c-box">
+        <span class="title-span">{{ endTimeOptions.title }}</span>
+        <span class="j-icon icon-del-grey" @click.stop="endTimeOptions.show = false"></span>
+      </div>
+      <van-datetime-picker
+        v-model="endTimeOptions.value"
+        ref="startDatePicker"
+        type="date"
+        :show-toolbar="false"
+        :formatter="formatterYMD"
+        :min-date="endTimeOptions.minDate"
+        :max-date="endTimeOptions.maxDate"
+        swipe-duration="60"
+        @change="pickerChange($event, 'end')" />
+      <div class="pop-footer j-button-group">
+        <button class="j-button-cancel" @click.stop="pickerReset('end')">重置</button>
+        <button class="j-button-confirm" @click.stop="pickerConfirm('end')">确定</button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+import { DatetimePicker, Popup } from 'vant'
+
+// @ is an alias to /src
+@Component({
+  name: 'date-filter',
+  components: {
+    [DatetimePicker.name]: DatetimePicker,
+    [Popup.name]: Popup
+  }
+})
+
+export default class TimeFilterPicker extends Vue {
+  @Prop() recover: any | undefined;
+
+  accurateTimeSelected = false
+  startTime: any = 0
+  endTime: any = 0
+
+  startTimeOptions = {
+    value: new Date(),
+    show: false,
+    title: '选择起始时间',
+    // 10年前
+    minDate: new Date('2015-01-01'),
+    // 2年后
+    maxDate: new Date(+new Date() + 61633290485)
+  }
+
+  endTimeOptions = {
+    value: new Date(),
+    show: false,
+    title: '选择结束时间',
+    minDate: new Date('2015-01-01'),
+    maxDate: new Date(+new Date() + 61633290485)
+  }
+
+  time = [
+    { name: '全部', value: '', selected: true }
+  ]
+
+  @Watch('accurateTimeSelected')
+  onAccurateTimeSelectedChange (newVal) {
+    if (newVal) {
+      this.time.forEach(item => {
+        item.selected = false
+      })
+    }
+  }
+
+  created () {
+    this.recoverTime()
+  }
+
+  selecteTime (item) {
+    // 点击的时候如果是被选中的，则让全部选中
+    if (item.selected) {
+      this.time.forEach(item => {
+        if (item.name === '全部') {
+          item.selected = true
+        } else {
+          item.selected = false
+        }
+      })
+    } else {
+      this.time.forEach(item => {
+        item.selected = false
+      })
+      item.selected = true
+    }
+    this.accurateTimeSelected = false
+    this.onChange()
+  }
+
+  formatterYMD (type, value) {
+    if (type === 'year') {
+      return `${value}年`
+    } else if (type === 'month') {
+      return `${value}月`
+    } else if (type === 'day') {
+      return `${value}日`
+    }
+    return value
+  }
+
+  showTimePicker (which) {
+    this.accurateTimeSelected = true
+    if (which === 'start') {
+      this.startTimeOptions.show = true
+    } else if (which === 'end') {
+      this.endTimeOptions.show = true
+    }
+  }
+
+  pickerChange (picker, which) {
+    if (which === 'start') {
+      // this.startTimeOptions.show = true
+    } else if (which === 'end') {
+      // this.endTimeOptions.show = true
+    }
+    // console.log(picker.getValues())
+  }
+
+  pickerReset (which) {
+    if (which === 'start') {
+      this.startTimeOptions.show = false
+      this.startTime = 0
+    } else if (which === 'end') {
+      this.endTimeOptions.show = false
+      this.endTime = 0
+    }
+  }
+
+  pickerConfirm (which) {
+    // 判断是哪个picker提交的
+    if (which === 'start') {
+      // 动态设置endPicker的起始范围
+      this.startTime = this.startTimeOptions.value
+      this.endTimeOptions.minDate = (this.startTime) as any
+      this.startTimeOptions.show = false
+    } else if (which === 'end') {
+      this.endTime = this.endTimeOptions.value
+      this.startTimeOptions.maxDate = (this.endTime) as any
+      this.endTimeOptions.show = false
+    }
+    this.onChange()
+  }
+
+  // 重置所有时间
+  resetTime () {
+    this.time.forEach(item => {
+      item.selected = false
+    })
+    this.accurateTimeSelected = false
+    this.time[0].selected = true
+  }
+
+  onConfirm () {
+    // 整理并获取时间
+    this.$emit('onConfirm', this.getResult())
+  }
+
+  onChange () {
+    // 整理并获取时间
+    this.$emit('onChange', this.getResult())
+  }
+
+  // 将ms级时间戳转为m级时间戳
+  getSecondsStamp (stamp) {
+    return stamp.toString().substr(0, 10) - 0
+  }
+
+  getResult () {
+    if (this.accurateTimeSelected) {
+      return {
+        startTime: this.startTime === 0 ? this.startTime : +new Date(this.startTime) / 1000,
+        endTime: this.endTime === 0 ? this.endTime : +new Date(this.endTime) / 1000 + (24 * 60 * 60 - 1),
+        accurate: true,
+        options: {
+          start: this.optionsDataToJSON(this.startTimeOptions),
+          end: this.optionsDataToJSON(this.endTimeOptions)
+        }
+      }
+    } else {
+      const current = this.time.filter(function (item) {
+        return item.selected
+      })[0]
+
+      const temp = {
+        value: current,
+        accurate: false,
+        options: {
+          start: this.optionsDataToJSON(this.startTimeOptions),
+          end: this.optionsDataToJSON(this.endTimeOptions)
+        }
+      }
+
+      if (current.duration) {
+        if (current.duration === -1) {
+          // 最近7天和最近30天
+          // 先获取当前时间的年份
+          const thisYear = new Date().getFullYear()
+          ;(temp as any).startTime = this.getSecondsStamp(+new Date(`${thisYear - 1}/01/01`))
+          ;(temp as any).endTime = this.getSecondsStamp(+new Date(`${thisYear}/01/01`))
+        } else {
+          ;(temp as any).startTime = this.getSecondsStamp(+new Date() - current.duration)
+          ;(temp as any).endTime = this.getSecondsStamp(+new Date())
+        }
+      }
+
+      return temp
+    }
+  }
+
+  optionsDataToJSON (d: any) {
+    const temp = {
+      value: new Date(),
+      show: false,
+      title: '选择时间',
+      minDate: new Date('2015-01-01'),
+      maxDate: new Date()
+    }
+    temp.value = d.value.getTime()
+    temp.show = d.show
+    temp.title = d.title
+    temp.minDate = d.minDate.getTime()
+    temp.maxDate = d.maxDate.getTime()
+    return temp
+  }
+
+  optionsJSONToData (j: any) {
+    const temp = {
+      value: new Date(),
+      show: false,
+      title: '选择时间',
+      minDate: new Date('2015-01-01'),
+      maxDate: new Date()
+    }
+    temp.value = new Date(j.value)
+    temp.show = j.show
+    temp.title = j.title
+    temp.minDate = new Date(j.minDate)
+    temp.maxDate = new Date(j.maxDate)
+    return temp
+  }
+
+  recoverTime () {
+    const r = this.recover
+    if (!r) return
+    if (Object.keys(r).length === 0) return
+    if (r.accurate) {
+      this.accurateTimeSelected = true
+      this.setPickerTime(r)
+    } else {
+      this.accurateTimeSelected = false
+      this.time.forEach((item: any) => {
+        if (r.value.name === item.name) {
+          item.selected = true
+        } else {
+          item.selected = false
+        }
+      })
+    }
+  }
+
+  setPickerTime (r: any) {
+    console.log(r)
+    // 恢复视图
+    this.startTime = r.startTime === 0 ? 0 : new Date(r.startTime * 1000)
+    this.endTime = r.endTime === 0 ? 0 : new Date(r.endTime * 1000)
+
+    // 恢复pickerOptions
+    this.startTimeOptions = this.optionsJSONToData(r.options.start)
+    this.endTimeOptions = this.optionsJSONToData(r.options.end)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.time-filter {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0 15px;
+  background-color: #fff;
+  min-height: 45vh;
+  .all-button-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 68px;
+  }
+  .time-box {
+    .time-title {
+      margin-bottom: 5px;
+      color: #686868;
+      font-size: 16px;
+    }
+    .time {
+      box-sizing: border-box;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px;
+      height: 52px;
+      background-color: #F4F4F9;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 13px;
+        height: 1px; /* no */
+        background-color: #727273;
+        transform: translate(-50%,-50%);
+      }
+      .start-time,
+      .end-time {
+        position: relative;
+        width: 50%;
+        height: 100%;
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 90%;
+          height: 100%;
+          font-size: 16px;
+          border-radius: 4px;
+          background-color: #fff;
+          .moneyiptval{
+            width: 100%;
+            flex: 1;
+          }
+        }
+      }
+      .end-time {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  .bottom-btns {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.date-time-picker-popup {
+  .pop-header {
+    justify-content: space-between;
+    padding: 0 16px;
+    font-size: 16px;
+    height: 64px;
+    .title-span {
+      min-width: 80px;
+    }
+    i {
+      text-align: right;
+      color: #C0C4CC;
+      &::before {
+        background: #C0C4CC;
+        color: white;
+        border-radius: 50%;
+      }
+    }
+    .hight-span {
+      flex: 1;
+      color: #2ABED1;
+      font-size: 14px;
+      text-align: center;
+    }
+    .title-span {
+      color: #171826;
+      font-size: 20px;
+    }
+  }
+  .pop-footer {}
+  .r-c-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .van-picker__frame {
+    background: rgba(42, 190, 209, 0.05);
+    &::after, &::before {
+      border: none;
+    }
+  }
+  .van-picker-column__item--selected {
+    color: #2ABED1;
+    font-size: 20px;
+  }
+}
+</style>

src/views/business/admin/EntBusinessList.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="ent-bus-page">
+    <div class="ent-per-screen">
+      <van-dropdown-menu style="padding:0" class="">
+        <van-dropdown-item v-model="filter.busopp" :options="busopport" />
+        <van-dropdown-item v-model="filter.mycli" :options="myclient" />
+      <div class="van-dropdown-menu__item c-item" @click="goToReportList">
+        <div class="van-dropdown-menu__title report-btn" v-if="entInfo().admin_system">报告</div>
+        <span class="red-dot" v-if="entInfo().admin_system && reportState.dotTipShow"></span>
+      </div>
+      </van-dropdown-menu>
+    </div>
     <div class="j-header ent-header hideBorder">
       <van-search v-model="filter.query_name" name="ios-input-ent" @input="getSerch" placeholder="搜索客户名称" />
       <van-dropdown-menu active-color="#2ABED1">
@@ -9,6 +19,20 @@
           :title-class="filter.alloc_flag === 0 ? '' : 'van-dropdown-item__selected'"
           :options="allotOptions"
           @change="allocOptionChange" />
+          <!-- 行业 -->
+        <van-dropdown-item :title="filterText.industry" ref="industryFilter" :title-class="filterText.industry === '行业' ? '' : 'van-dropdown-item__selected'">
+          <infoTypeFilterPicker></infoTypeFilterPicker>
+        </van-dropdown-item>
+        <!-- 金额 -->
+        <van-dropdown-item v-if="refreshFlag" ref="moneyFilter" :title-class="filterText.money === '金额' ? '' : 'van-dropdown-item__selected'">
+          <template slot="title">
+            <div>
+              <div class="time-text">{{ filterText.money }}</div>
+              <div class="time-text">{{ filterText.timeBottom }}</div>
+            </div>
+          </template>
+          <moneyFilterPicker :recover="recoverFilter.time" @onConfirm="timeFilterConfirm" ref="timePicker"></moneyFilterPicker>
+        </van-dropdown-item>
         <!-- 时间 -->
         <van-dropdown-item v-if="refreshFlag" ref="timeFilter" :title-class="filterText.timeTop === '时间' ? '' : 'van-dropdown-item__selected'">
           <template slot="title">
@@ -21,12 +45,9 @@
         </van-dropdown-item>
         <!-- 地区 -->
         <van-dropdown-item :title="filterText.area" ref="areaFilter" :title-class="filterText.area === '地区' ? '' : 'van-dropdown-item__selected'">
+          <!-- <infoTypeFilterPicker></infoTypeFilterPicker> -->
           <provinceFilterPicker :multiple="true" :recover="recoverFilter.area" @onConfirm="provinceConfirm"></provinceFilterPicker>
         </van-dropdown-item>
-        <div class="van-dropdown-menu__item c-item" @click="goToReportList">
-          <div class="van-dropdown-menu__title report-btn" v-if="entInfo().admin_system">跟踪报告</div>
-          <span class="red-dot" v-if="entInfo().admin_system && reportState.dotTipShow"></span>
-        </div>
       </van-dropdown-menu>
       <div class="b-b-c"></div>
     </div>
@@ -41,7 +62,7 @@
         class="more-list calc-height-1px"
         ref="vanList"
       >
-        <div class="list-container">
+        <div class="list-container" ref="listContainer">
           <div class="list-item" @click="goInfo(item)" v-for="(item, i) in listState.list" :key="i">
             <div class="item-content van-multi-ellipsis--l2">{{item.customer_name}}</div>
             <div class="item-footer">
@@ -89,11 +110,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { Search, Button, DropdownItem, DropdownMenu, List, Dialog } from 'vant'
 import { mapState, mapActions, mapMutations } from 'vuex'
 import timeFilterPicker from '@/components/searchFilter/timeFilterPicker.vue'
+import moneyFilterPicker from '@/components/searchFilter/moneyFilterPicker.vue'
 import provinceFilterPicker from '@/components/searchFilter/provinceFilterPicker.vue'
+import infoTypeFilterPicker from '@/components/searchFilter/infoTypeFilterPicker.vue'
 import empty from '@/components/common/Empty.vue'
 import { dateFormatter, inputFocusHideFooter } from '@/utils/globalFunctions'
 import moment from 'moment'
@@ -108,7 +131,9 @@ import moment from 'moment'
     [List.name]: List,
     [Button.name]: Button,
     timeFilterPicker,
+    moneyFilterPicker,
     provinceFilterPicker,
+    infoTypeFilterPicker,
     empty
   },
   methods: {
@@ -147,16 +172,33 @@ export default class extends Vue {
   protected saveEntBusinessListState!: any
 
   allotOptions = [
-    { text: '全部', value: 0 },
-    { text: '已分配', value: 1 },
-    { text: '未分配', value: 2 }
+    { text: '时间降序', value: 0 },
+    { text: '时间升序', value: 1 },
+    { text: '金额降序', value: 2 },
+    { text: '金额升序', value: 3 },
+    { text: '数量降序', value: 4 },
+    { text: '数量升序', value: 5 }
   ]
 
-  allotOptionsText = '分配'
+  busopport = [
+    { text: '商机', value: 0 },
+    { text: '公告', value: 1 }
+  ]
+
+  myclient = [
+    { text: '企业客户', value: 0 },
+    { text: '我的客户', value: 1 },
+    { text: '企业渠道', value: 2 },
+    { text: '我的渠道', value: 3 }
+  ]
+
+  allotOptionsText = '排序'
   filterText: any = {
     timeTop: '时间',
     timeBottom: '',
-    area: '地区'
+    area: '地区',
+    industry: '行业',
+    money: '金额'
   }
 
   footerBtnClass = '.j-button-group.j-footer'
@@ -176,7 +218,9 @@ export default class extends Vue {
     end_time: '',
     area: '',
     alloc_flag: 0,
-    manage: 1
+    manage: 1,
+    busopp: 0,
+    mycli: 0
   }
 
   listState = {
@@ -200,6 +244,8 @@ export default class extends Vue {
     }
   }
 
+  listScrollTop = 0
+
   get reportTime () {
     if (!this.reportState.tip) return ''
     if (this.reportState.tip.type === 2) {
@@ -211,6 +257,11 @@ export default class extends Vue {
     }
   }
 
+  @Watch('listScrollTop')
+  onListScroll (newval: any, oldval: any) {
+    console.log(newval, oldval)
+  }
+
   mounted () {
     this.toggleAdminAdd(true)
     this.updateHeader({

src/views/business/client/ClientList.vue

@@ -109,6 +109,13 @@
               </div>
             </div>
           </van-tab>
+          <van-tab title="划转记录">
+            <div class="list-container">
+              <empty v-if="CustomerList.length === 0">
+                <div class="tip-sub-text">暂无划转记录</div>
+              </empty>
+            </div>
+          </van-tab>
         </van-tabs>
       </div>
     </div>