feat:商机管理app

public/.vscode/settings.json

@@ -5,6 +5,6 @@
     "liveServer.settings.proxy": {
         "enable": true,
         "baseUri": "/entniche",
-        "proxyUri": "http://192.168.3.207:811/entniche"
+        "proxyUri": "https://app4-jytest.jydev.jianyu360.com/entniche"
     }
 }

src/api/home.ts

@@ -251,12 +251,12 @@ export function addClient (data: any) {
 }
 
 // 客户信息
-export function getClientInfo (data: any) {
-  data = qs.stringify(data)
+export function getClientInfo (params: any) {
+  // data = qs.stringify(data)
   return request({
     url: '/entniche/customer/detail',
-    method: 'post',
-    data
+    method: 'GET',
+    params
   })
 }
 
@@ -353,3 +353,12 @@ export function clearReportState (data: any) {
     data
   })
 }
+
+// 行业数据
+export function getIndustryState (data: any) {
+  return request({
+    url: '/publicapply/free/getindustrys',
+    method: 'post',
+    data
+  })
+}

src/assets/js/china-map-min.ts

@@ -0,0 +1,76 @@
+// 简易版
+// src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/js/mapArea.js
+// src/web/staticres/vipsubscribe/js/mapArea.js
+/**
+ * @file china-map.json
+ * @author wangshan 简易版2019-11-21
+ */
+const chinaMapJSON = [{
+  安徽: ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市']
+}, {
+  澳门: ['澳门']
+}, {
+  北京: ['北京市']
+}, {
+  重庆: ['重庆市']
+}, {
+  福建: ['福州市', '厦门市', '宁德市', '莆田市', '泉州市', '漳州市', '龙岩市', '三明市', '南平市']
+}, {
+  广东: ['广州市', '汕尾市', '阳江市', '揭阳市', '茂名市', '惠州市', '江门市', '韶关市', '梅州市', '汕头市', '深圳市', '珠海市', '佛山市', '肇庆市', '湛江市', '中山市', '河源市', '清远市', '云浮市', '潮州市', '东莞市']
+}, {
+  广西: ['防城港市', '南宁市', '崇左市', '来宾市', '柳州市', '桂林市', '梧州市', '贺州市', '贵港市', '玉林市', '百色市', '钦州市', '河池市', '北海市']
+}, {
+  贵州: ['贵阳市', '遵义市', '安顺市', '黔南布依族苗族自治州', '黔东南苗族侗族自治州', '铜仁市', '毕节市', '六盘水市', '黔西南布依族苗族自治州']
+}, {
+  甘肃: ['兰州市', '金昌市', '白银市', '天水市', '嘉峪关市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州']
+}, {
+  河北: ['邯郸市', '石家庄市', '秦皇岛市', '保定市', '张家口市', '承德市', '唐山市', '廊坊市', '沧州市', '衡水市', '邢台市']
+}, {
+  湖北: ['武汉市', '襄阳市', '鄂州市', '孝感市', '黄冈市', '黄石市', '咸宁市', '荆州市', '宜昌市', '恩施土家族苗族自治州', '神农架林区', '十堰市', '随州市', '荆门市', '仙桃市', '天门市', '潜江市']
+}, {
+  黑龙江: ['哈尔滨市', '齐齐哈尔市', '鸡西市', '牡丹江市', '七台河市', '佳木斯市', '鹤岗市', '双鸭山市', '绥化市', '黑河市', '大兴安岭地区', '伊春市', '大庆市']
+}, {
+  海南: ['海口市', '三亚市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '澄迈县', '定安县', '屯昌县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县', '三沙市']
+}, {
+  河南: ['商丘市', '郑州市', '安阳市', '新乡市', '许昌市', '平顶山市', '信阳市', '南阳市', '开封市', '洛阳市', '济源市', '焦作市', '鹤壁市', '濮阳市', '周口市', '漯河市', '驻马店市', '三门峡市']
+}, {
+  湖南: ['岳阳市', '长沙市', '湘潭市', '株洲市', '衡阳市', '郴州市', '常德市', '益阳市', '娄底市', '邵阳市', '湘西土家族苗族自治州', '张家界市', '怀化市', '永州市']
+}, {
+  吉林: ['长春市', '吉林市', '延边朝鲜族自治州', '四平市', '通化市', '白城市', '辽源市', '松原市', '白山市']
+}, {
+  江苏: ['南京市', '无锡市', '镇江市', '苏州市', '南通市', '扬州市', '盐城市', '徐州市', '淮安市', '连云港市', '常州市', '泰州市', '宿迁市']
+}, {
+  江西: ['鹰潭市', '新余市', '南昌市', '九江市', '上饶市', '抚州市', '宜春市', '吉安市', '赣州市', '景德镇市', '萍乡市']
+}, {
+  辽宁: ['沈阳市', '铁岭市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '朝阳市', '盘锦市', '葫芦岛市']
+}, {
+  内蒙古: ['呼伦贝尔市', '呼和浩特市', '包头市', '乌海市', '乌兰察布市', '通辽市', '赤峰市', '鄂尔多斯市', '巴彦淖尔市', '锡林郭勒盟', '兴安盟', '阿拉善盟']
+}, {
+  宁夏: ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市']
+}, {
+  青海: ['海北藏族自治州', '西宁市', '海东市', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州']
+}, {
+  山西: ['朔州市', '忻州市', '太原市', '大同市', '阳泉市', '晋中市', '长治市', '晋城市', '临汾市', '吕梁市', '运城市']
+}, {
+  陕西: ['西安市', '咸阳市', '延安市', '榆林市', '渭南市', '商洛市', '安康市', '汉中市', '宝鸡市', '铜川市']
+}, {
+  上海: ['上海市']
+}, {
+  山东: ['菏泽市', '济南市', '青岛市', '淄博市', '德州市', '烟台市', '潍坊市', '济宁市', '泰安市', '临沂市', '滨州市', '东营市', '威海市', '枣庄市', '日照市', '聊城市']
+}, {
+  四川: ['成都市', '攀枝花市', '自贡市', '绵阳市', '南充市', '达州市', '遂宁市', '广安市', '巴中市', '泸州市', '宜宾市', '资阳市', '内江市', '乐山市', '眉山市', '凉山彝族自治州', '雅安市', '甘孜藏族自治州', '阿坝藏族羌族自治州', '德阳市', '广元市']
+}, {
+  天津: ['天津市']
+}, {
+  台湾: ['台湾省']
+}, {
+  西藏: ['拉萨市', '日喀则市', '山南市', '林芝市', '昌都市', '那曲市', '阿里地区']
+}, {
+  新疆: ['塔城地区', '哈密市', '和田地区', '阿勒泰地区', '克孜勒苏柯尔克孜自治州', '博尔塔拉蒙古自治州', '克拉玛依市', '乌鲁木齐市', '石河子市', '昌吉回族自治州', '五家渠市', '吐鲁番市', '巴音郭楞蒙古自治州', '阿克苏地区', '阿拉尔市', '喀什地区', '图木舒克市', '伊犁哈萨克自治州', '北屯市', '铁门关市', '双河市', '可克达拉市', '昆玉市', '胡杨河市']
+}, {
+  香港: ['香港']
+}, {
+  云南: ['西双版纳傣族自治州', '德宏傣族景颇族自治州', '昭通市', '昆明市', '大理白族自治州', '红河哈尼族彝族自治州', '曲靖市', '保山市', '文山壮族苗族自治州', '玉溪市', '楚雄彝族自治州', '普洱市', '临沧市', '怒江傈僳族自治州', '迪庆藏族自治州', '丽江市']
+}, {
+  浙江: ['舟山市', '衢州市', '杭州市', '湖州市', '嘉兴市', '宁波市', '绍兴市', '温州市', '丽水市', '金华市', '台州市']
+}]

src/components/searchFilter/areaFilterPicker.vue

@@ -0,0 +1,445 @@
+<template>
+  <div class="j-container areapicker">
+    <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: 'areapicker',
+  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: 'areaItem',
+      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: 'areaItem',
+      data: cateArr,
+      t: t
+    }
+    this.$emit('confirm', params)
+    return params
+  }
+}
+</script>
+
+<style lang="scss">
+.areapicker{
+    width: 100%;
+}
+
+/* 采购单位类型 */
+.areapicker .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;
+      padding-left: 0;
+      overflow-y: auto;
+      .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;
+        }
+      }
+    }
+}
+.areapicker .unitTab .van-tabs__content{
+  width: 100%;
+    height: 100%;
+    overflow: auto;
+    flex: 1;
+}
+.areapicker .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/industryFilterPicker.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="j-container industrypicker">
+    <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-show="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'
+import { mapState, mapActions } from 'vuex'
+
+@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
+  },
+  computed: {
+    active () {
+      return 1
+    }
+  },
+  methods: {
+    ...mapActions({
+      getIndustryState: 'home/getIndustryState'
+    })
+  }
+})
+
+export default class extends Vue {
+  protected getIndustryState!: any
+  @Prop({
+    type: Array,
+    required: false,
+    default: []
+  }) selectindustrylist;
+
+  @Prop({
+    type: Boolean,
+    required: false,
+    default: false
+  }) onlyshowsome;
+
+  tablist = []
+  checkedAll = false
+  canClick = true
+  industryData = []
+
+  created () {
+    this.getIndustryData('1')
+    this.getbBtnClick()
+  }
+
+  // 获取行业数据
+  getIndustryData (datas) {
+    this.getIndustryState().then(res => {
+      console.log(res)
+      if (res.error_code === 0) {
+        this.industryData = res.data
+        this.formatIndustryData(datas)
+      }
+    })
+  }
+
+  formatIndustryData (datas) {
+    // if (!this.onlyshowsome && !datas) {
+    //   datas = this.industryData
+    // }
+    datas = this.industryData
+    if (!datas) return
+    const maxarr = []
+    datas.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
+    this.setState()
+  }
+
+  // 回显数据
+  setState (data) {
+    const indArr = data || this.selectindustrylist
+    const newindArr = []
+    let bool = true
+    if (indArr && indArr.length === 0) {
+      this.tablist.forEach(function (item) {
+        item[Object.keys(item)[0]].forEach(function (data) {
+          data.type = false
+        })
+      })
+      this.canClick = bool
+    } else {
+      indArr.forEach(function (sum) {
+        newindArr.push(sum.split('_')[1])
+      })
+      // console.log(newindArr)
+      this.tablist.forEach(function (item) {
+        item[Object.keys(item)[0]].forEach(function (data) {
+          newindArr.forEach(function (sum) {
+            if (data.name === sum) {
+              data.type = true
+              bool = false
+            }
+          })
+        })
+      })
+      this.canClick = bool
+    }
+  }
+
+  // 总全选
+  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) {
+    console.log(data)
+    const selectBool = data[Object.keys(data)[1]]
+    const dataArr = data[Object.keys(data)[0]]
+    console.log(selectBool, dataArr)
+    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) {
+          // console.log(data)
+          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: 'industryItem',
+      data: ''
+    }
+    this.setState()
+    this.$emit('cancel', params)
+    return params
+  }
+
+  // 确定按钮
+  onConfirm () {
+    const industryArr = []
+    let t = ''
+    this.tablist.forEach(function (item, index) {
+      item[Object.keys(item)[0]].forEach(function (data, i) {
+        if (data.type) {
+          const str = Object.keys(item)[0] + '_' + data.name
+          industryArr.push(str)
+        }
+      })
+    })
+    t = '行业' + industryArr.length
+    const params = {
+      name: 'industryItem',
+      data: industryArr,
+      t: t
+    }
+    this.$emit('confirm', params)
+    return params
+  }
+}
+</script>
+
+<style lang="scss">
+.industrypicker{
+    width: 100%;
+}
+
+/* 采购单位类型 */
+.industrypicker .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;
+      overflow-y: auto;
+      .van-tab{
+        flex: none;
+        padding-left: 0;
+        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;
+        }
+      }
+    }
+}
+.industrypicker .unitTab .van-tabs__content{
+  width: 100%;
+    height: 100%;
+    overflow: auto;
+    flex: 1;
+}
+.industrypicker .unitType {
+    height: 100%;
+    /* overflow: auto; */
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    .van-tabs__nav {
+      padding: 0
+    }
+}
+
+</style>

src/components/searchFilter/infoTypeFilterPicker.vue

@@ -84,13 +84,15 @@ export default class extends Vue {
   @Prop({
     type: Array,
     required: false,
-    default: []
+    default () {
+      return []
+    }
   }) selectcatelist;
 
   active = 1
   tablist = [
     {
-      党政机关事业单位: ['人大', '政协', '党委办', '组织', '宣传', '统战', '纪委', '政府办', '发改委', '财政', '教育', '科技', '工信', '民政', '民宗', '人社', '公安', '检察院', '法院', '司法', '应急管理', '军队', '自然资源', '生态环境', '住建', '市政', '城管', '交通', '水利', '农业', '气象', '文旅', '卫健委', '医疗', '学校', '档案', '体育', '政务中心', '机关事务', '国资委', '海关', '税务', '市场监管', '商务', '人行', '银保监', '证监', '审计', '出版广电', '统计', '公共资源交易', '社会团体', '气象']
+      党政机关事业单位: ['人大', '政协', '党委办', '组织', '宣传', '统战', '纪委', '政府办', '发改委', '财政', '教育', '科技', '工信', '民政', '民宗', '人社', '公安', '检察院', '法院', '司法', '应急管理', '军队', '自然资源', '生态环境', '住建', '市政', '城管', '交通', '水利', '农业', '气象', '文旅', '卫健委', '医疗', '学校', '档案', '体育', '政务中心', '机关事务', '国资委', '海关', '税务', '市场监管', '商务', '人行', '银保监', '证监', '审计', '出版广电', '统计', '公共资源交易', '社会团体']
     },
     {
       企业: ['传媒', '采矿业', '电信行业', '金融业', '建筑业', '能源化工', '农林牧渔', '批发零售', '信息技术', '运输物流', '制造业', '住宿餐饮']

src/store/modules/home.ts

@@ -36,7 +36,8 @@ import {
   postedPattern,
   signout,
   getReportState,
-  clearReportState
+  clearReportState,
+  getIndustryState
 } from '@/api/home'
 
 export default {
@@ -307,6 +308,13 @@ export default {
         const res = await clearReportState(data)
         return res.data
       } catch (error) {}
+    },
+    // 清除订阅报告弹窗显示
+    async getIndustryState (state: any, data: any) {
+      try {
+        const res = await getIndustryState(data)
+        return res.data
+      } catch (error) {}
     }
   },
   getters: {}

src/views/business/admin/BusinessHome.vue

@@ -2,43 +2,133 @@
   <div class="home-push-list">
     <header class="j-header push-list-header van-hairline--bottom">
       <div class="header-top">
-        <router-link tag="span" to="/ent/switch" class="ent-name-box">
+        <p class="ent-name">{{ ent.ent_name }}</p>
+        <!-- <router-link tag="span" to="/ent/switch" class="ent-name-box">
           <p class="ent-name">{{ ent.ent_name }}</p>
           <i class="j-icon icon-exchange"></i>
-        </router-link>
-        <router-link tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
-          <img src="@/assets/image/setting.png">
-          <span>功能管理</span>
-        </router-link>
+        </router-link> -->
+        <div class="header-bot">
+          <router-link tag="button" class="manage" :to="'/ent/switch?t=' + new Date().getTime()">
+            <i class="j-icon icon-exchange"></i>
+            <span>切换企业</span>
+          </router-link>
+          <router-link style="margin-left:24px" tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
+            <img style="width:20px;height:20px" src="@/assets/image/icon-meau.png">
+            <span>过程管理</span>
+          </router-link>
+          <router-link style="margin-left:24px" tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
+            <img style="width:20px;height:20px" src="@/assets/image/icon-blue-setting.png">
+            <span>功能设置</span>
+          </router-link>
+        </div>
+        <div class="home-ipt">
+          <van-cell-group>
+            <van-field
+              v-model="iptvalue"
+              clearable
+              placeholder="请输入企业的客户名称"
+            >
+              <template #left-icon>
+                <van-icon name="search" color="#C0C4CC" />
+              </template>
+            </van-field>
+          </van-cell-group>
+        </div>
       </div>
-      <div class="tabbar-container" v-if="listState.subscribe">
+      <div class="tabbar-container collection" v-if="listState.subscribe">
         <van-dropdown-menu active-color="#2ABED1">
           <van-dropdown-item
-            :title="dropdownItemText.time"
-            :title-class="dropdownItemText.time === '时间' ? '' : 'van-dropdown-item__selected'"
-            ref="timeRef"
+            :title="dropdownItemText.alloca"
+            :title-class="dropdownItemText.alloca === '分配状态' ? '' : 'van-dropdown-item__selected'"
+            ref="alloacRef"
             >
-            <date-time-dropdown-picker
-              :recoverTime="filterTimeOptions.value"
-              @onConfirm="timeConfirm"
-              @onReset="timeReset"
-            ></date-time-dropdown-picker>
+            <areaDropdownPicker
+            :recover="this.screenState.area.split(',')"
+              :multiple="true"
+              @onConfirm="provinceConfirm"
+              @onReset="provinceReset"
+              ></areaDropdownPicker>
+          </van-dropdown-item>
+          <van-dropdown-item
+            :title="dropdownItemText.clientsource"
+            :title-class="dropdownItemText.clientsource === '客户来源' ? '' : 'van-dropdown-item__selected'"
+            ref="alloacRef"
+            >
+            <areaDropdownPicker
+            :recover="this.screenState.area.split(',')"
+              :multiple="true"
+              @onConfirm="provinceConfirm"
+              @onReset="provinceReset"
+              ></areaDropdownPicker>
           </van-dropdown-item>
           <van-dropdown-item
             :title="dropdownItemText.area"
             :title-class="dropdownItemText.area === '地区' ? '' : 'van-dropdown-item__selected'"
             ref="areaRef"
           >
-            <provinceFilterPicker
-              :recover="this.area.split(',')"
+            <!-- <provinceFilterPicker
+              :recover="this.screenState.area.split(',')"
               :multiple="true"
               @onConfirm="provinceConfirm"
               @onReset="provinceReset"
-            ></provinceFilterPicker>
+            ></provinceFilterPicker> -->
+            <areaDropdownPicker
+            :recover="this.screenState.area.split(',')"
+              :multiple="true"
+              @onConfirm="provinceConfirm"
+              @onReset="provinceReset"
+              ></areaDropdownPicker>
+          </van-dropdown-item>
+          <van-dropdown-item
+            :title="dropdownItemText.industry"
+            :title-class="dropdownItemText.industry === '行业' ? '' : 'van-dropdown-item__selected'"
+            ref="industryRef"
+            >
+            <industry-dropdown-picker @confirm="onConfirm" @cancel="resetAll"></industry-dropdown-picker>
+          </van-dropdown-item>
+          <van-dropdown-item
+            :close-on-click-outside="false"
+            :close-on-click-overlay="false"
+            class="selectMore"
+            :title="dropdownItemText.more"
+            :title-class="dropdownItemText.more === '更多筛选' ? '' : 'van-dropdown-item__selected'">
+            <div class="j-container">
+              <div class="j-main">
+                <van-cell-group>
+                  <van-cell @click="setClientSelect" title="客户分类" is-link>
+                    <template #default>
+                      <div class="select clientselect">已选：{{clientClass}}</div>
+                    </template>
+                  </van-cell>
+                  <van-cell title="业务范围" is-link @click="setBusuness">
+                    <template #default>
+                      <div class="select rageselect">已选：全部</div>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </div>
+              <div class="j-footer">
+                <div class="j-button-group">
+                  <button class="j-button-cancel" @click="resetAll">重置</button>
+                  <button class="j-button-confirm" @click="onConfirm">确认</button>
+                </div>
+              </div>
+            </div>
           </van-dropdown-item>
-          <van-dropdown-item disabled></van-dropdown-item>
-          <van-dropdown-item disabled></van-dropdown-item>
         </van-dropdown-menu>
+        <van-popup v-model="infoTypeShow" round position="bottom">
+          <div class="j-container">
+            <div class="area-pop-title-group">
+              <span style="">请选择客户类型</span>
+              <div class="padding-icon" @click="closeClientPopup">
+                <img src="@/assets/image/delete_gray.png" class="j-icon" />
+              </div>
+            </div>
+            <div class="j-main">
+              <infoDropdownPicker @cancel="resetAll" @confirm="onConfirm"></infoDropdownPicker>
+            </div>
+          </div>
+        </van-popup>
       </div>
     </header>
     <div class="focus j-main" ref="listContainer" v-if="listState.subscribe">
@@ -53,14 +143,26 @@
       >
         <ul class="list-container">
           <li class="list-item" v-for="(item, i) in listState.listData" :key="i" :class="item.ca_isvisit == 1 ? 'visited' : ''" @click="goDetail(item)">
-            <p class="item-title van-multi-ellipsis--l2" v-html="highlightKey(item.title, item.matchkeys)"></p>
+            <div class="list-head">
+              <img src="@/assets/image/company.png" alt="">
+              <p class="item-title van-multi-ellipsis--l2" v-html="highlightKey(item.title, item.matchkeys)"></p>
+            </div>
             <div class="item-footer">
               <div class="tags-container">
-                <button class="tags" v-if="item.area">{{ item.area }}</button>
-                <button class="tags" v-if="item.buyerclass">{{ item.buyerclass }}</button>
-                <button class="tags" v-if="item.type">{{ item.type }}</button>
+                <div class="item_num">项目数量：{{item.ptcoms?item.ptcoms.PNCount: '-'}}</div>
+                <div class="item_num" style="margin-left:24px">项目总金额：{{item.ptcoms?item.ptcoms.Budget: '-'}}</div>
+                <div class="item_num">所在地：{{item.area?item.area: '-'}} {{item.ptcoms?item.ptcoms.WCity: '-'}}</div>
+              </div>
+              <div class="optionAction">
+                <div class="transfer tran-left">
+                  <img src="@/assets/image/transfer.png" alt="">
+                  <span>划转</span>
+                </div>
+                <div class="transfer">
+                  <img src="@/assets/image/Property-blue.png" alt="">
+                  <span>已认领</span>
+                </div>
               </div>
-              <i class="date">{{ item.publishtime * 1000 | dateFromNow }}</i>
             </div>
           </li>
         </ul>
@@ -80,11 +182,14 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Button, DropdownItem, DropdownMenu, List } from 'vant'
+import { Button, DropdownItem, DropdownMenu, List, CellGroup, Field, Icon, Cell, Popup } from 'vant'
 import { mapState, mapActions, mapMutations } from 'vuex'
 import { dateFormatter, replaceKeyword } from '@/utils/globalFunctions'
 import provinceFilterPicker from '@/components/searchFilter/provinceFilterPicker.vue'
 import dateTimeDropdownPicker from '@/components/searchFilter/dateTimeDropdownPicker.vue'
+import industryDropdownPicker from '@/components/searchFilter/industryFilterPicker.vue'
+import infoDropdownPicker from '@/components/searchFilter/infoTypeFilterPicker.vue'
+import areaDropdownPicker from '@/components/searchFilter/areaFilterPicker.vue'
 import empty from '@/components/common/Empty.vue'
 
 declare const JyObj: any
@@ -96,11 +201,20 @@ declare const JyObj: any
     [DropdownItem.name]: DropdownItem,
     [DropdownMenu.name]: DropdownMenu,
     [List.name]: List,
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell,
+    [Field.name]: Field,
+    [Icon.name]: Icon,
+    [Popup.name]: Popup,
     empty,
     provinceFilterPicker,
-    dateTimeDropdownPicker
+    dateTimeDropdownPicker,
+    industryDropdownPicker,
+    infoDropdownPicker,
+    areaDropdownPicker
   },
   methods: {
+    ...mapState(['layoutConf']),
     ...mapActions({
       pushList: 'sub/push',
       entInfo: 'sub/entInfo',
@@ -110,12 +224,14 @@ declare const JyObj: any
       pushListState: (state: any) => state.pushList
     }),
     ...mapMutations({
+      updateHeader: 'updateLayoutConfig',
       savePushListState: 'listState/savePushListState',
       clearPushListState: 'listState/clearPushListState'
     })
   }
 })
 export default class PushList extends Vue {
+  protected updateHeader!: any
   protected pushList!: any
   protected entInfo!: any
   protected pushVisit!: any
@@ -134,13 +250,31 @@ export default class PushList extends Vue {
     loaded: false
   }
 
+  // 筛选条件
+  screenState = {
+    // 筛选地区
+    distribution: '',
+    area: '',
+    industry: '',
+    client: '',
+    scope: ''
+  }
+
+  clientClass = '全部'
+
+  infoTypeShow = false
+
+  iptvalue = '' // 企业的客户名称
+
   ent = {}
-  // 筛选地区
-  area = ''
+
   // 筛选条件显示
   dropdownItemText = {
-    time: '时间',
-    area: '地区'
+    alloca: '分配状态',
+    clientsource: '客户来源',
+    industry: '行业',
+    area: '地区',
+    more: '更多筛选'
   }
 
   beforeEnt: any = {}
@@ -149,16 +283,6 @@ export default class PushList extends Vue {
     value: 0
   }
 
-  // 筛选时间
-  get time () {
-    const unix13 = +new Date(this.filterTimeOptions.value) + ''
-    if ((this.dropdownItemText.time as any) === '时间') {
-      return ''
-    } else {
-      return unix13.slice(0, 10)
-    }
-  }
-
   beforeRouteLeave (to, form, next) {
     this.savePageStatus()
     next()
@@ -179,12 +303,19 @@ export default class PushList extends Vue {
         history.replaceState({}, '', location.pathname)
       }
     }
+    this.updateHeader({
+      actionRightText: '我的客户',
+      actionRightStyle: {
+        color: '#2ABED1'
+      },
+      actionRightCallback: this.actionRightCallback
+    })
 
     // 如果有就先恢复时间
-    if (selectTime && notNaN) {
-      this.filterTimeOptions.value = (selectTime as any) * 1000
-      ;(this.dropdownItemText.time as any) = dateFormatter(this.filterTimeOptions.value, 'yyyy.MM.dd')
-    }
+    // if (selectTime && notNaN) {
+    //   this.filterTimeOptions.value = (selectTime as any) * 1000
+    //   ;(this.dropdownItemText.time as any) = dateFormatter(this.filterTimeOptions.value, 'yyyy.MM.dd')
+    // }
 
     // 再恢复数据
     const recover = this.recoverPageStatus()
@@ -194,10 +325,19 @@ export default class PushList extends Vue {
     }
   }
 
+  actionRightCallback () {
+    this.$router.replace('/business/my')
+  }
+
+  // 业务范围
+  setBusuness () {
+    location.href = '/jyapp/big/page/set_scope'
+  }
+
   savePageStatus () {
     const listContainer: any = this.$refs.listContainer
     const saveJSON = {
-      area: this.area,
+      area: this.screenState.area,
       dropdownItemText: this.dropdownItemText,
       ent: this.ent,
       filterTimeOptions: this.filterTimeOptions,
@@ -213,12 +353,12 @@ export default class PushList extends Vue {
       console.log('recover data from sessionStorage')
       const tempD: any = this.$refs.listContainer
       const { area, dropdownItemText, ent, /* filterTimeOptions, */ listState, scrollTop } = pushList
-      this.area = area
+      this.screenState.area = area
       this.dropdownItemText = dropdownItemText
       this.ent = ent
       this.beforeEnt = ent
-      const oldTime = dropdownItemText.time.length ? dropdownItemText.time.replace(/\./g, '/') : false
-      this.filterTimeOptions.value = oldTime ? +new Date(oldTime) : +new Date()
+      // const oldTime = dropdownItemText.time.length ? dropdownItemText.time.replace(/\./g, '/') : false
+      // this.filterTimeOptions.value = oldTime ? +new Date(oldTime) : +new Date()
       // this.filterTimeOptions = filterTimeOptions
       this.listState = listState
       this.$nextTick(() => {
@@ -232,6 +372,14 @@ export default class PushList extends Vue {
     }
   }
 
+  setClientSelect () {
+    this.infoTypeShow = true
+  }
+
+  closeClientPopup () {
+    this.infoTypeShow = false
+  }
+
   getEntInfo () {
     this.entInfo().then((res: any) => {
       if (res.error_code === 0) {
@@ -267,7 +415,7 @@ export default class PushList extends Vue {
       this.listState.loaded = false
     }
     this.listState.loading = true
-    this.pushList(`time=${time}&area=${area}&pagenum=${page}`).then((res: any) => {
+    this.pushList(`area=${area}&pagenum=${page}`).then((res: any) => {
       if (page === 1) {
         this.listState.subscribe = res.data.subscribe
       }
@@ -300,7 +448,7 @@ export default class PushList extends Vue {
   }
 
   onLoad () {
-    this.getPushList(this.time, this.area, this.listState.pageNum)
+    this.getPushList('', this.screenState.area, this.listState.pageNum)
   }
 
   highlightKey (title: string, matchkeys: any) {
@@ -314,6 +462,27 @@ export default class PushList extends Vue {
     return title
   }
 
+  resetAll (data) {
+    console.log(data)
+    switch (data.name) {
+      case 'industryItem':
+        break
+      case 'cateItem':
+        this.clientClass = '全部'
+        this.infoTypeShow = false
+    }
+  }
+
+  onConfirm (data) {
+    switch (data.name) {
+      case 'industryItem':
+        break
+      case 'cateItem':
+        this.clientClass = data.data.join('、')
+        this.infoTypeShow = false
+    }
+  }
+
   // 筛选逻辑 ============================>
   // 重置时间
   timeReset () {
@@ -321,7 +490,7 @@ export default class PushList extends Vue {
     this.dropdownItemText.time = '时间'
     ;(this.$refs.timeRef as any).toggle(false)
     this.listState.pageNum = 1
-    this.getPushList('', this.area, this.listState.pageNum)
+    this.getPushList('', this.screenState.area, this.listState.pageNum)
   }
 
   // 时间确定
@@ -330,7 +499,7 @@ export default class PushList extends Vue {
     ;(this.dropdownItemText.time as any) = dateFormatter(time, 'yyyy.MM.dd')
     ;(this.$refs.timeRef as any).toggle(false)
     this.listState.pageNum = 1
-    this.getPushList(this.time, this.area, this.listState.pageNum)
+    this.getPushList('', this.screenState.area, this.listState.pageNum)
   }
 
   provinceConfirm (value) {
@@ -342,18 +511,18 @@ export default class PushList extends Vue {
     }
 
     this.dropdownItemText.area = t
-    this.area = value.join(',')
+    this.screenState.area = value.join(',')
     this.listState.pageNum = 1
-    this.getPushList(this.time, this.area, this.listState.pageNum)
+    this.getPushList('', this.screenState.area, this.listState.pageNum)
     ;(this.$refs.areaRef as any).toggle(false)
   }
 
   provinceReset (v) {
     ;(this.$refs.areaRef as any).toggle(false)
     this.dropdownItemText.area = '地区'
-    this.area = v.join(',')
+    this.screenState.area = v.join(',')
     this.listState.pageNum = 1
-    this.getPushList(this.time, '', this.listState.pageNum)
+    this.getPushList('', '', this.listState.pageNum)
   }
 
   goDetail (item: any) {
@@ -409,10 +578,39 @@ export default class PushList extends Vue {
     }
     .header-top {
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      align-items: flex-start;
       justify-content: space-between;
-      height: 54px;
       padding: 0 16px;
+      .header-bot{
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        padding-bottom: 12px;
+      }
+      .home-ipt{
+        width: 100%;
+        height: 40px;
+        .van-cell {
+          height: 40px;
+          background: #F5F6F7;
+          border-radius: 8px 8px 8px 8px;
+          opacity: 1;
+          border: 1px solid rgba(0, 0, 0, 0.05000000074505806);
+        }
+      }
+    }
+    .ent-name {
+      padding: 12px 0;
+      font-size: 16px;
+      font-family: PingFang SC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #171826;
+      line-height: 24px;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     // 企业名称
     .ent-name-box {
@@ -427,12 +625,6 @@ export default class PushList extends Vue {
       color: #2ABED1;
       line-height: 20px;
       font-size: 13px;
-      .ent-name {
-        flex: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
       .icon-exchange {
         width: 12px;
         height: 12px;
@@ -455,6 +647,45 @@ export default class PushList extends Vue {
     .van-dropdown-item__content {
       max-height: unset;
     }
+    .selectMore{
+      .van-dropdown-item__content{
+        height: 100%;
+        .van-cell{
+          padding: 15px 16px;
+        }
+      }
+    }
+
+    .area-pop-title-group  {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+        padding-top: 22px;
+        padding-bottom: 12px;
+        padding-left: 16px;
+    }
+    .area-pop-title-group .padding-icon {
+        padding: 4px 16px;
+        display: inline-block;
+    }
+    .area-pop-title-group span {
+        font-size: 20px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 500;
+        text-align: left;
+        color: #171826;
+        line-height: 30px;
+    }
 
     .tabbar-container{
       display: flex;
@@ -472,15 +703,10 @@ export default class PushList extends Vue {
         position: relative;
         z-index: 99;
         background: #fff;
-        flex: none;
-        padding: 0 8px;
       }
       .van-dropdown-menu__item:nth-child(3),
       .van-dropdown-menu__item:nth-child(4) {
         flex: 1;
-        .van-dropdown-menu__title::after{
-          display: none;
-        }
       }
     }
   }
@@ -520,6 +746,13 @@ export default class PushList extends Vue {
             color: #9B9CA3;
           }
         }
+        .list-head{
+          display: flex;
+          img{
+            width: 24px;
+            height: 24px;
+          }
+        }
         .item-title {
           font-size: 16px;
           line-height: 24px;
@@ -530,11 +763,13 @@ export default class PushList extends Vue {
           display: flex;
           justify-content: space-between;
           align-content: center;
+          flex-direction: column;
           padding-top: 12px;
           font-size: 12px;
           color:  #5F5E64;
           .tags-container {
-            flex-direction: column;
+            display: flex;
+            // flex-direction: column;
             box-sizing:border-box;
             .tags {
               background: #F7F9FA;
@@ -551,6 +786,23 @@ export default class PushList extends Vue {
             color: #9B9CA3;
           }
         }
+        .optionAction{
+          display: flex;
+          justify-content: flex-end;
+          margin-top: 14px;
+          .transfer{
+            display: flex;
+            align-items: center;
+            img{
+              margin-right: 4px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+          .tran-left{
+            margin-right: 24px;
+          }
+        }
       }
     }
   }

src/views/business/admin/EntBusinessList.vue

@@ -1,54 +1,107 @@
 <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">
-        <!-- 分配 -->
-        <van-dropdown-item :title="allotOptionsText"
-          v-model="filter.alloc_flag"
-          :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>
+      <p class="ent-name">{{ ent.ent_name }}</p>
+      <!-- <router-link tag="span" to="/ent/switch" class="ent-name-box">
+        <p class="ent-name">{{ ent.ent_name }}</p>
+        <i class="j-icon icon-exchange"></i>
+      </router-link> -->
+      <div class="header-bot">
+        <router-link tag="button" class="manage" :to="'/ent/switch?t=' + new Date().getTime()">
+          <i class="j-icon icon-exchange"></i>
+          <span>切换企业</span>
+        </router-link>
+        <router-link style="margin-left:24px" tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
+          <img style="width:20px;height:20px" src="@/assets/image/icon-meau.png">
+          <span>过程管理</span>
+        </router-link>
+        <router-link style="margin-left:24px" tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
+          <img style="width:20px;height:20px" src="@/assets/image/icon-blue-setting.png">
+          <span>功能设置</span>
+        </router-link>
+      </div>
+      <van-search class="clientsearch" v-model="filter.query_name" name="ios-input-ent" @input="getSerch" placeholder="请输入企业的客户名称" />
+      <div class="tabbar-container collection" style="width:100%">
+        <van-dropdown-menu active-color="#2ABED1">
+          <van-dropdown-item
+            :title="dropdownItemText.alloca"
+            :title-class="dropdownItemText.alloca === '分配状态' ? '' : 'van-dropdown-item__selected'"
+            ref="alloacRef"
+            >
+            <areaDropdownPicker
+            :recover="this.screenState.area.split(',')"
+              :multiple="true"
+              ></areaDropdownPicker>
+          </van-dropdown-item>
+          <van-dropdown-item
+            :title="dropdownItemText.area"
+            :title-class="dropdownItemText.area === '地区' ? '' : 'van-dropdown-item__selected'"
+            ref="areaRef"
+          >
+            <!-- <provinceFilterPicker
+              :recover="this.screenState.area.split(',')"
+              :multiple="true"
+              @onConfirm="provinceConfirm"
+              @onReset="provinceReset"
+            ></provinceFilterPicker> -->
+            <areaDropdownPicker
+            :recover="this.screenState.area.split(',')"
+              :multiple="true"
+              @onConfirm="provinceConfirm"
+              @onReset="provinceReset"
+              ></areaDropdownPicker>
+          </van-dropdown-item>
+          <van-dropdown-item
+            :title="dropdownItemText.industry"
+            :title-class="dropdownItemText.industry === '行业' ? '' : 'van-dropdown-item__selected'"
+            ref="industryRef"
+            >
+            <industry-dropdown-picker @confirm="onConfirm" @cancel="resetAll"></industry-dropdown-picker>
+          </van-dropdown-item>
+          <van-dropdown-item
+            :close-on-click-outside="false"
+            :close-on-click-overlay="false"
+            class="selectMore"
+            :title="dropdownItemText.more"
+            :title-class="dropdownItemText.more === '更多筛选' ? '' : 'van-dropdown-item__selected'">
+            <div class="j-container">
+              <div class="j-main">
+                <van-cell-group>
+                  <van-cell @click="setClientSelect" title="客户分类" is-link>
+                    <template #default>
+                      <div class="select clientselect">已选：{{clientClass}}</div>
+                    </template>
+                  </van-cell>
+                  <van-cell title="业务范围" is-link @click="setBusuness">
+                    <template #default>
+                      <div class="select rageselect">已选：全部</div>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </div>
+              <div class="j-footer">
+                <div class="j-button-group">
+                  <button class="j-button-cancel" @click="resetAll">重置</button>
+                  <button class="j-button-confirm" @click="onConfirm">确认</button>
+                </div>
+              </div>
+            </div>
+          </van-dropdown-item>
+        </van-dropdown-menu>
+        <van-popup v-model="infoTypeShow" round position="bottom">
+          <div class="j-container">
+            <div class="area-pop-title-group">
+              <span style="">请选择客户类型</span>
+              <div class="padding-icon" @click="closeClientPopup">
+                <img src="@/assets/image/delete_gray.png" class="j-icon" />
+              </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">
-            <div>
-              <div class="time-text">{{ filterText.timeTop }}</div>
-              <div class="time-text">{{ filterText.timeBottom }}</div>
+            <div class="j-main">
+              <infoDropdownPicker @cancel="resetAll" @confirm="onConfirm"></infoDropdownPicker>
             </div>
-          </template>
-          <timeFilterPicker :recover="recoverFilter.time" @onConfirm="timeFilterConfirm" ref="timePicker"></timeFilterPicker>
-        </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>
-      </van-dropdown-menu>
+          </div>
+        </van-popup>
+      </div>
       <div class="b-b-c"></div>
     </div>
     <div class="j-main" ref="vanListContainer">
@@ -59,21 +112,36 @@
         :offset="listState.offset"
         :immediate-check="false"
         @load="getList"
-        class="more-list calc-height-1px"
+        class="more-list"
         ref="vanList"
       >
-        <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>
+        <ul class="list-container">
+          <li class="list-item" v-for="(item, i) in listState.list" :key="i" :class="item.ca_isvisit == 1 ? 'visited' : ''" @click="goInfo(item)">
+            <div class="list-head">
+              <img src="@/assets/image/company.png" alt="">
+              <p class="item-title van-multi-ellipsis--l2" v-html="highlightKey(item.customer_name, item.matchkeys)"></p>
+            </div>
             <div class="item-footer">
-              <div>
-                <span v-if="item.alloc_status !== 1">未分配</span>
-                <span class="allot-active" v-else>已分配： {{item.staff_names}}</span>
+              <div class="tags-container">
+                <div class="item_num">项目数量：{{item.ptcoms?item.ptcoms.PNCount: '-'}}</div>
+                <div class="item_num" style="margin-left:24px">项目总金额：{{item.ptcoms?item.ptcoms.Budget: '-'}}</div>
+              </div>
+              <div class="tags-container container-2">
+                <div class="item_num">所在地：<span style="color:#2ABED1">{{item.area?item.area: '-'}} {{item.ptcoms?item.ptcoms.WCity: '-'}}</span></div>
+              </div>
+              <div class="optionAction">
+                <div class="transfer tran-left">
+                  <img src="@/assets/image/transfer.png" alt="">
+                  <span>划转</span>
+                </div>
+                <div class="transfer">
+                  <img src="@/assets/image/Property-blue.png" alt="">
+                  <span>已认领</span>
+                </div>
               </div>
-              <span class="tip-time" v-show="item.updatetime">{{ item.updatetime * 1000 | dateFromNow }}有更新</span>
             </div>
-          </div>
-        </div>
+          </li>
+        </ul>
         <empty v-if="listState.list.length === 0 && listState.finished">
           <div class="tip-sub-text">暂无客户信息</div>
           <div class="tip-sub-text max-width80">订阅分发设置影响客户信息的提取，请确保分发规则的准确性。</div>
@@ -111,14 +179,16 @@
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
-import { Search, Button, DropdownItem, DropdownMenu, List, Dialog } from 'vant'
+import { Search, Button, DropdownItem, DropdownMenu, List, Dialog, Popup, CellGroup, Cell } 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 { dateFormatter, inputFocusHideFooter, replaceKeyword } from '@/utils/globalFunctions'
+import infoDropdownPicker from '@/components/searchFilter/infoTypeFilterPicker.vue'
+import industryDropdownPicker from '@/components/searchFilter/industryFilterPicker.vue'
+import areaDropdownPicker from '@/components/searchFilter/areaFilterPicker.vue'
 import moment from 'moment'
 
 @Component({
@@ -130,15 +200,21 @@ import moment from 'moment'
     [Dialog.Component.name]: Dialog.Component,
     [List.name]: List,
     [Button.name]: Button,
+    [Popup.name]: Popup,
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell,
     timeFilterPicker,
     moneyFilterPicker,
     provinceFilterPicker,
-    infoTypeFilterPicker,
+    infoDropdownPicker,
+    industryDropdownPicker,
+    areaDropdownPicker,
     empty
   },
   methods: {
     ...mapState(['layoutConf']),
     ...mapActions({
+      entInfoData: 'sub/entInfo',
       ajaxList: 'home/busList',
       getReportState: 'home/getReportState',
       clearReportState: 'home/clearReportState'
@@ -165,6 +241,7 @@ export default class extends Vue {
   protected clearReportState!: any
   protected saveCID!: any
   protected entInfo!: any
+  protected entInfoData!: any
   protected toggleSelectTas!: any
   protected toggleAdminAdd!: any
   // list数据缓存
@@ -201,8 +278,30 @@ export default class extends Vue {
     money: '金额'
   }
 
+  // 筛选条件显示
+  dropdownItemText = {
+    alloca: '分配状态',
+    industry: '行业',
+    area: '地区',
+    more: '更多筛选'
+  }
+
   footerBtnClass = '.j-button-group.j-footer'
 
+  // 筛选条件
+  screenState = {
+    // 筛选地区
+    distribution: '',
+    area: '',
+    industry: '',
+    client: '',
+    scope: ''
+  }
+
+  clientClass = '全部'
+
+  infoTypeShow = false
+
   timer = 0
 
   refreshFlag = true
@@ -212,15 +311,19 @@ export default class extends Vue {
     time: {}
   }
 
+  ent = {}
+
   filter = {
     query_name: '',
     start_time: '',
     end_time: '',
     area: '',
-    alloc_flag: 0,
+    alloc_flag: 999,
     manage: 1,
     busopp: 0,
-    mycli: 0
+    mycli: 0,
+    sourceType: 999,
+    followStatus: 999
   }
 
   listState = {
@@ -262,6 +365,10 @@ export default class extends Vue {
     console.log(newval, oldval)
   }
 
+  created () {
+    this.getEntInfo()
+  }
+
   mounted () {
     this.toggleAdminAdd(true)
     this.updateHeader({
@@ -284,6 +391,66 @@ export default class extends Vue {
     inputFocusHideFooter(input, this.$refs.footer)
   }
 
+  highlightKey (title: string, matchkeys: any) {
+    if (!Array.isArray(matchkeys)) {
+      matchkeys = []
+    }
+    matchkeys.forEach(function (s) {
+      // title = title.replace(s, `<span class="highlight-text">${s}</span>`)
+      title = replaceKeyword(title, s, `<span class="highlight-text">${s}</span>`)
+    })
+    return title
+  }
+
+  // 业务范围
+  setBusuness () {
+    location.href = '/jyapp/big/page/set_scope'
+  }
+
+  getEntInfo () {
+    this.entInfoData().then((res: any) => {
+      if (res.error_code === 0) {
+        this.ent = res.data
+      }
+    })
+  }
+
+  provinceReset (v) {
+    ;(this.$refs.areaRef as any).toggle(false)
+    this.dropdownItemText.area = '地区'
+    this.screenState.area = v.join(',')
+    this.listState.pageNum = 1
+  }
+
+  setClientSelect () {
+    this.infoTypeShow = true
+  }
+
+  closeClientPopup () {
+    this.infoTypeShow = false
+  }
+
+  resetAll (data) {
+    console.log(data)
+    switch (data.name) {
+      case 'industryItem':
+        break
+      case 'cateItem':
+        this.clientClass = '全部'
+        this.infoTypeShow = false
+    }
+  }
+
+  onConfirm (data) {
+    switch (data.name) {
+      case 'industryItem':
+        break
+      case 'cateItem':
+        this.clientClass = data.data.join('、')
+        this.infoTypeShow = false
+    }
+  }
+
   beforeRouteLeave (to, form, next) {
     this.savePageStatus()
     next()
@@ -396,6 +563,8 @@ export default class extends Vue {
     this.ajaxList({
       page_index: this.listState.pageNum,
       page_size: this.listState.pageSize,
+      ent_id: '70',
+      entUserId: '171',
       ...this.filter
     }).then(res => {
       if (res.error_code === 0 && res.data.list && Array.isArray(res.data.list)) {
@@ -502,6 +671,123 @@ export default class extends Vue {
     .van-search {
       width: 100%;
     }
+    .header-bot{
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      padding-bottom: 12px;
+      padding-right: 16px;
+    }
+    // 企业名称
+    .ent-name-box {
+      display: flex;
+      align-items: center;
+      max-width: 200px;
+      padding: 3px 8px;
+      background: rgba(42, 190, 209, 0.08);
+      border: 0.5px solid rgba(42, 190, 209, 0.16);
+      box-sizing: border-box;
+      border-radius: 44px;
+      color: #2ABED1;
+      line-height: 20px;
+      font-size: 13px;
+      .icon-exchange {
+        width: 12px;
+        height: 12px;
+        margin-left: 4px;
+      }
+    }
+    .selectMore{
+      .van-dropdown-item__content{
+        height: 100%;
+        .van-cell{
+          padding: 15px 16px;
+        }
+      }
+    }
+    .area-pop-title-group  {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+        padding-top: 22px;
+        padding-bottom: 12px;
+        padding-left: 16px;
+    }
+    .area-pop-title-group .padding-icon {
+        padding: 4px 16px;
+        display: inline-block;
+    }
+    .area-pop-title-group span {
+        font-size: 20px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 500;
+        text-align: left;
+        color: #171826;
+        line-height: 30px;
+    }
+    .ent-name {
+      width: 100%;
+      padding: 12px 0 12px 16px;
+      font-size: 16px;
+      font-family: PingFang SC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #171826;
+      line-height: 24px;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .manage{
+      display: flex;
+      align-items: center;
+      background: transparent;
+      font-size: 14px;
+      line-height: 20px;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
+    }
+    .van-search.clientsearch {
+      padding: 7px 16px;
+      width: 100%;
+      height: 54px;
+      background: #ffffff;
+      .van-search__content{
+        border-radius: 8px 8px 8px 8px;
+        height: 100%;
+        background: #F5F6F7;
+        .van-field__left-icon, .van-cell__value {
+          line-height: 40px;
+        }
+        .van-field__body{
+          height: 100%;
+        }
+        .van-icon.van-icon-search {
+          height: 100%;
+          line-height: 32px;
+        }
+        &::placeholder{
+          font-size: 14px;
+          font-family: PingFang SC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #9B9CA3;
+          line-height: 40px;
+        }
+      }
+    }
   }
 
   .time-text {
@@ -515,6 +801,9 @@ export default class extends Vue {
   .van-dropdown-menu {
     display: flex;
     width: 100%;
+    .van-dropdown-menu__bar{
+      flex: auto;
+    }
   }
 
   .van-dropdown-item__selected {
@@ -535,9 +824,6 @@ export default class extends Vue {
     background: #fff;
     flex: 1;
   }
-  .van-dropdown-menu {
-    padding: 0 16px;
-  }
   .van-dropdown-item__content {
     max-height: unset;
   }
@@ -545,8 +831,7 @@ export default class extends Vue {
     position: relative;
     z-index: 99;
     background: #fff;
-    justify-content: flex-start;
-    flex: none;
+    justify-content: center;
     padding: 0 8px;
     &:nth-child(1),
     &:nth-child(4) {
@@ -585,42 +870,74 @@ export default class extends Vue {
     background: #f5f6f7;
   }
   .list-item {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    align-items: flex-start;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background-color: #fff;
-    // min-height: 88px;
+    min-height: 94px;
+    border-bottom: 1px solid #eee;
+    padding: 18px 16px;
     box-sizing: border-box;
+    &.visited {
+      .item-title {
+        color: #9B9CA3;
+      }
+    }
+    .list-head{
+      display: flex;
+      img{
+        width: 24px;
+        height: 24px;
+      }
+    }
+    .item-title {
+      margin-left: 4px;
+      font-size: 16px;
+      line-height: 24px;
+      color: #171826;
+    }
+
     .item-footer {
-      flex: 1;
-      width: 100%;
-      margin-top: 13px;
       display: flex;
-      flex-direction: row;
       justify-content: space-between;
-      align-items: center;
-      span {
-        font-size: 12px;
-        display: inline-block;
-        line-height: 20px;
-        padding: 0 8px;
-        box-sizing: border-box;
-        border: 1px solid transparent;
-        background: #FF9F40;
-        border-radius: 4px;
-        color: #fff;
+      align-content: center;
+      flex-direction: column;
+      padding-top: 12px;
+      font-size: 12px;
+      color:  #5F5E64;
+      .tags-container {
+        display: flex;
+        // flex-direction: column;
+        box-sizing:border-box;
+        .tags {
+          background: #F7F9FA;
+          border: 0.5px solid rgba(0, 0, 0, 0.05);
+          box-sizing: border-box;
+          border-radius: 4px;
+          padding: 1px 8px;
+          margin-right: 4px;
+        }
       }
-      .allot-active {
-        color: #5F5E64;
-        background: #F7F9FA;
-        border: 1px solid rgba(0, 0, 0, 0.05);
+      .container-2{
+        margin-top: 4px;
       }
-      .tip-time {
+      .date {
+        display: flex;
+        align-items: center;
         color: #9B9CA3;
-        background: transparent;
-        padding-right: 0;
+      }
+    }
+    .optionAction{
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 14px;
+      .transfer{
+        display: flex;
+        align-items: center;
+        img{
+          margin-right: 4px;
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .tran-left{
+        margin-right: 24px;
       }
     }
   }

src/views/business/admin/MyBusinessList.vue

@@ -1,25 +1,102 @@
 <template>
     <div class="my-bus-page">
       <div class="j-header ent-header hideBorder">
-        <van-search v-model="filter.query_name" name="ios-input-my" @input="getSerch" placeholder="搜索客户名称" />
-        <van-dropdown-menu active-color="#2ABED1">
-          <!-- 时间 -->
-          <van-dropdown-item v-if="refreshFlag" title="时间" ref="timeFilter" :title-class="filterText.timeTop === '时间' ? '' : 'van-dropdown-item__selected'">
-            <template slot="title">
-              <div>
-                <div class="time-text">{{ filterText.timeTop }}</div>
-                <div class="time-text">{{ filterText.timeBottom }}</div>
+        <!-- <router-link tag="span" to="/ent/switch" class="ent-name-box">
+          <p class="ent-name">{{ ent.ent_name }}</p>
+          <i class="j-icon icon-exchange"></i>
+        </router-link> -->
+        <div class="header-bot">
+          <router-link style="margin-left:24px" tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
+            <img style="width:20px;height:20px" src="@/assets/image/icon-meau.png">
+            <span>过程管理</span>
+          </router-link>
+          <router-link style="margin-left:24px" tag="button" class="manage" :to="'/business/manage?t=' + new Date().getTime()">
+            <img style="width:20px;height:20px" src="@/assets/image/icon-blue-setting.png">
+            <span>功能设置</span>
+          </router-link>
+        </div>
+        <van-search class="clientsearch" v-model="filter.query_name" name="ios-input-my" @input="getSerch" placeholder="请输入企业的客户名称" />
+        <div class="tabbar-container collection" style="width:100%">
+          <van-dropdown-menu active-color="#2ABED1">
+            <van-dropdown-item
+              :title="dropdownItemText.clientsource"
+              :title-class="dropdownItemText.clientsource === '客户来源' ? '' : 'van-dropdown-item__selected'"
+              ref="alloacRef"
+              >
+              <areaDropdownPicker
+              :recover="this.screenState.area.split(',')"
+                :multiple="true"
+                ></areaDropdownPicker>
+            </van-dropdown-item>
+            <van-dropdown-item
+              :title="dropdownItemText.area"
+              :title-class="dropdownItemText.area === '地区' ? '' : 'van-dropdown-item__selected'"
+              ref="areaRef"
+            >
+              <!-- <provinceFilterPicker
+                :recover="this.screenState.area.split(',')"
+                :multiple="true"
+                @onConfirm="provinceConfirm"
+                @onReset="provinceReset"
+              ></provinceFilterPicker> -->
+              <areaDropdownPicker
+              :recover="this.screenState.area.split(',')"
+                :multiple="true"
+                @onConfirm="provinceConfirm"
+                @onReset="provinceReset"
+                ></areaDropdownPicker>
+            </van-dropdown-item>
+            <van-dropdown-item
+              :title="dropdownItemText.industry"
+              :title-class="dropdownItemText.industry === '行业' ? '' : 'van-dropdown-item__selected'"
+              ref="industryRef"
+              >
+              <industry-dropdown-picker @confirm="onConfirm" @cancel="resetAll"></industry-dropdown-picker>
+            </van-dropdown-item>
+            <van-dropdown-item
+              :close-on-click-outside="false"
+              :close-on-click-overlay="false"
+              class="selectMore"
+              :title="dropdownItemText.more"
+              :title-class="dropdownItemText.more === '更多筛选' ? '' : 'van-dropdown-item__selected'">
+              <div class="j-container">
+                <div class="j-main">
+                  <van-cell-group>
+                    <van-cell @click="setClientSelect" title="客户分类" is-link>
+                      <template #default>
+                        <div class="select clientselect">已选：{{clientClass}}</div>
+                      </template>
+                    </van-cell>
+                    <van-cell title="业务范围" is-link @click="setBusuness">
+                      <template #default>
+                        <div class="select rageselect">已选：全部</div>
+                      </template>
+                    </van-cell>
+                  </van-cell-group>
+                </div>
+                <div class="j-footer">
+                  <div class="j-button-group">
+                    <button class="j-button-cancel" @click="resetAll">重置</button>
+                    <button class="j-button-confirm" @click="onConfirm">确认</button>
+                  </div>
+                </div>
+              </div>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+          <van-popup v-model="infoTypeShow" round position="bottom">
+            <div class="j-container">
+              <div class="area-pop-title-group">
+                <span style="">请选择客户类型</span>
+                <div class="padding-icon" @click="closeClientPopup">
+                  <img src="@/assets/image/delete_gray.png" class="j-icon" />
+                </div>
+              </div>
+              <div class="j-main">
+                <infoDropdownPicker @cancel="resetAll" @confirm="onConfirm"></infoDropdownPicker>
               </div>
-            </template>
-            <timeFilterPicker :recover="recoverFilter.time" @onConfirm="timeFilterConfirm" ref="timePicker"></timeFilterPicker>
-          </van-dropdown-item>
-          <!-- 地区 -->
-          <van-dropdown-item :title="filterText.area" ref="areaFilter" :title-class="filterText.area === '地区' ? '' : 'van-dropdown-item__selected'">
-            <provinceFilterPicker :multiple="true" :recover="recoverFilter.area" @onConfirm="provinceConfirm"></provinceFilterPicker>
-          </van-dropdown-item>
-          <van-dropdown-item disabled=""></van-dropdown-item>
-          <van-dropdown-item disabled=""></van-dropdown-item>
-        </van-dropdown-menu>
+            </div>
+          </van-popup>
+        </div>
         <div class="b-b-c"></div>
       </div>
       <div class="j-main" ref="vanListContainer">
@@ -33,18 +110,23 @@
           class="more-list calc-height-1px"
           ref="vanList"
         >
-          <div class="list-container">
-            <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>
+          <ul class="list-container">
+            <li class="list-item" v-for="(item, i) in listState.list" :key="i" :class="item.ca_isvisit == 1 ? 'visited' : ''" @click="goInfo(item)">
+              <div class="list-head">
+                <img src="@/assets/image/company.png" alt="">
+                <p class="item-title van-multi-ellipsis--l2" v-html="highlightKey(item.customer_name, item.matchkeys)"></p>
+              </div>
               <div class="item-footer">
-                <div>
-                  <span class="allot-active" v-if="item.alloc_status === 1">已分配： {{item.staff_names}}</span>
-                  <span v-if="item.alloc_status === 2">未分配</span>
+                <div class="tags-container">
+                  <div class="item_num">项目数量：{{item.ptcoms?item.ptcoms.PNCount: '-'}}</div>
+                  <div class="item_num" style="margin-left:24px">项目总金额：{{item.ptcoms?item.ptcoms.Budget: '-'}}</div>
                 </div>
-                <span class="tip-time" v-show="item.updatetime">{{ item.updatetime * 1000 | dateFromNow }}有更新</span>
+                <div class="tags-container container-2">
+                <div class="item_num">所在地：<span style="color:#2ABED1">{{item.area?item.area: '-'}} {{item.ptcoms?item.ptcoms.WCity: '-'}}</span></div>
               </div>
-            </div>
-          </div>
+              </div>
+            </li>
+          </ul>
           <empty v-if="listState.list.length === 0 && listState.finished">
             <div class="tip-sub-text">暂无客户信息</div>
             <div class="tip-sub-text max-width80">订阅分发设置影响客户信息的提取，请确保分发规则的准确性。</div>
@@ -59,11 +141,14 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Search, Button, DropdownItem, DropdownMenu, List } from 'vant'
+import { Search, Button, DropdownItem, DropdownMenu, List, Popup, CellGroup, Cell } from 'vant'
 import { mapState, mapActions, mapMutations } from 'vuex'
 import timeFilterPicker from '@/components/searchFilter/timeFilterPicker.vue'
 import provinceFilterPicker from '@/components/searchFilter/provinceFilterPicker.vue'
-import { dateFormatter, inputFocusHideFooter } from '@/utils/globalFunctions'
+import { dateFormatter, inputFocusHideFooter, replaceKeyword } from '@/utils/globalFunctions'
+import infoDropdownPicker from '@/components/searchFilter/infoTypeFilterPicker.vue'
+import industryDropdownPicker from '@/components/searchFilter/industryFilterPicker.vue'
+import areaDropdownPicker from '@/components/searchFilter/areaFilterPicker.vue'
 import empty from '@/components/common/Empty.vue'
 
 @Component({
@@ -74,8 +159,14 @@ import empty from '@/components/common/Empty.vue'
     [DropdownMenu.name]: DropdownMenu,
     [List.name]: List,
     [Button.name]: Button,
+    [Popup.name]: Popup,
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell,
     timeFilterPicker,
     provinceFilterPicker,
+    infoDropdownPicker,
+    industryDropdownPicker,
+    areaDropdownPicker,
     empty
   },
   methods: {
@@ -87,6 +178,7 @@ import empty from '@/components/common/Empty.vue'
       myBusinessList: (state: any) => state.myBusinessList
     }),
     ...mapActions({
+      entInfoData: 'sub/entInfo',
       ajaxList: 'home/busList'
     }),
     ...mapMutations({
@@ -102,6 +194,7 @@ import empty from '@/components/common/Empty.vue'
 export default class extends Vue {
   protected ajaxList: any
   protected updateHeader!: any
+  protected entInfoData!: any
   protected clearLayoutConfig!: any
   protected saveCID!: any
   protected entInfo!: any
@@ -132,7 +225,11 @@ export default class extends Vue {
     start_time: '',
     end_time: '',
     area: '',
-    manage: null
+    manage: null,
+    alloc_flag: 999,
+    mycli: 0,
+    sourceType: 999,
+    followStatus: 999
   }
 
   // 选择器状态,用来恢复页面状态
@@ -141,6 +238,14 @@ export default class extends Vue {
     area: []
   }
 
+  // 筛选条件显示
+  dropdownItemText = {
+    clientsource: '客户来源',
+    industry: '行业',
+    area: '地区',
+    more: '更多筛选'
+  }
+
   listState = {
     list: [],
     loading: false,
@@ -151,6 +256,22 @@ export default class extends Vue {
     scrollTop: 0
   }
 
+  // 筛选条件
+  screenState = {
+    // 筛选地区
+    distribution: '',
+    area: '',
+    industry: '',
+    client: '',
+    scope: ''
+  }
+
+  clientClass = '全部'
+
+  infoTypeShow = false
+
+  ent = {}
+
   mounted () {
     // ;(window as any).savePageStatus = this.savePageStatus
     this.toggleAdminAdd(false)
@@ -183,6 +304,59 @@ export default class extends Vue {
     next()
   }
 
+  created () {
+    this.getEntInfo()
+  }
+
+  getEntInfo () {
+    this.entInfoData().then((res: any) => {
+      if (res.error_code === 0) {
+        this.ent = res.data
+      }
+    })
+  }
+
+  provinceReset (v) {
+    ;(this.$refs.areaRef as any).toggle(false)
+    this.dropdownItemText.area = '地区'
+    this.screenState.area = v.join(',')
+    this.listState.pageNum = 1
+  }
+
+  setClientSelect () {
+    this.infoTypeShow = true
+  }
+
+  closeClientPopup () {
+    this.infoTypeShow = false
+  }
+
+  // 业务范围
+  setBusuness () {
+    location.href = '/jyapp/big/page/set_scope'
+  }
+
+  resetAll (data) {
+    console.log(data)
+    switch (data.name) {
+      case 'industryItem':
+        break
+      case 'cateItem':
+        this.clientClass = '全部'
+        this.infoTypeShow = false
+    }
+  }
+
+  onConfirm (data) {
+    switch (data.name) {
+      case 'industryItem':
+        break
+      case 'cateItem':
+        this.clientClass = data.data.join('、')
+        this.infoTypeShow = false
+    }
+  }
+
   addClientPage () {
     this.$router.push('/business/client/add?from=my')
   }
@@ -248,6 +422,17 @@ export default class extends Vue {
     this.$router.push('/business/client/' + item.customer_id + '/default?from=my')
   }
 
+  highlightKey (title: string, matchkeys: any) {
+    if (!Array.isArray(matchkeys)) {
+      matchkeys = []
+    }
+    matchkeys.forEach(function (s) {
+      // title = title.replace(s, `<span class="highlight-text">${s}</span>`)
+      title = replaceKeyword(title, s, `<span class="highlight-text">${s}</span>`)
+    })
+    return title
+  }
+
   getSerch () {
     clearTimeout(this.timer)
     this.timer = setTimeout(() => {
@@ -266,6 +451,8 @@ export default class extends Vue {
     this.ajaxList({
       page_index: this.listState.pageNum,
       page_size: this.listState.pageSize,
+      ent_id: '70',
+      entUserId: '171',
       ...this.filter
     }).then(res => {
       if (res.error_code === 0 && res.data.list && Array.isArray(res.data.list)) {
@@ -335,8 +522,108 @@ export default class extends Vue {
 
   .ent-header {
     flex-direction: column;
-    .van-search {
+    .header-bot{
+      display: flex;
+      justify-content: flex-end;
       width: 100%;
+      padding: 12px 16px 0 0;
+    }
+    // 企业名称
+    .ent-name-box {
+      display: flex;
+      align-items: center;
+      max-width: 200px;
+      padding: 3px 8px;
+      background: rgba(42, 190, 209, 0.08);
+      border: 0.5px solid rgba(42, 190, 209, 0.16);
+      box-sizing: border-box;
+      border-radius: 44px;
+      color: #2ABED1;
+      line-height: 20px;
+      font-size: 13px;
+      .icon-exchange {
+        width: 12px;
+        height: 12px;
+        margin-left: 4px;
+      }
+    }
+    .selectMore{
+      .van-dropdown-item__content{
+        height: 100%;
+        .van-cell{
+          padding: 15px 16px;
+        }
+      }
+    }
+    .area-pop-title-group  {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+        padding-top: 22px;
+        padding-bottom: 12px;
+        padding-left: 16px;
+    }
+    .area-pop-title-group .padding-icon {
+        padding: 4px 16px;
+        display: inline-block;
+    }
+    .area-pop-title-group span {
+        font-size: 20px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 500;
+        text-align: left;
+        color: #171826;
+        line-height: 30px;
+    }
+    .manage{
+      display: flex;
+      align-items: center;
+      background: transparent;
+      font-size: 14px;
+      line-height: 20px;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
+    }
+    .van-search.clientsearch {
+      padding: 7px 16px;
+      width: 100%;
+      height: 54px;
+      background: #ffffff;
+      .van-search__content{
+        border-radius: 8px 8px 8px 8px;
+        height: 100%;
+        background: #F5F6F7;
+        .van-field__left-icon, .van-cell__value {
+          line-height: 40px;
+        }
+        .van-field__body{
+          height: 100%;
+        }
+        .van-icon.van-icon-search {
+          height: 100%;
+          line-height: 32px;
+        }
+        &::placeholder{
+          font-size: 14px;
+          font-family: PingFang SC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #9B9CA3;
+          line-height: 40px;
+        }
+      }
     }
   }
 
@@ -352,13 +639,12 @@ export default class extends Vue {
     text-align: center;
   }
 
-  .van-dropdown-menu {
-    padding: 0 16px;
-  }
-
   .van-dropdown-menu {
     display: flex;
     width: 100%;
+    .van-dropdown-menu__bar{
+      flex: auto;
+    }
   }
 
   .more-list {
@@ -374,8 +660,7 @@ export default class extends Vue {
     position: relative;
     z-index: 99;
     background: #fff;
-    justify-content: flex-start;
-    flex: none;
+    justify-content: center;
     padding: 0 10px;
     &:nth-child(1) {
       padding-left: 12px;
@@ -383,9 +668,6 @@ export default class extends Vue {
     &:nth-child(3),
     &:nth-child(4) {
       flex: 1;
-      .van-dropdown-menu__title::after{
-        display: none;
-      }
     }
   }
   .b-b-c {
@@ -394,43 +676,57 @@ export default class extends Vue {
     background: #f5f6f7;
   }
   .list-item {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    padding: 16px;
-    background-color: #fff;
-    // min-height: 88px;
+    min-height: 94px;
+    border-bottom: 1px solid #eee;
+    padding: 18px 16px;
     box-sizing: border-box;
+    &.visited {
+      .item-title {
+        color: #9B9CA3;
+      }
+    }
+    .list-head{
+      display: flex;
+      img{
+        width: 24px;
+        height: 24px;
+      }
+    }
+    .item-title {
+      margin-left: 4px;
+      font-size: 16px;
+      line-height: 24px;
+      color: #171826;
+    }
+
     .item-footer {
-      flex: 1;
-      width: 100%;
-      margin-top: 13px;
       display: flex;
-      flex-direction: row;
       justify-content: space-between;
-      align-items: center;
-      span {
-        font-size: 12px;
-        display: inline-block;
-        line-height: 20px;
-        padding: 0 8px;
-        box-sizing: border-box;
-        border: 1px solid transparent;
-        background: #FF9F40;
-        border-radius: 4px;
-        color: #fff;
+      align-content: center;
+      flex-direction: column;
+      padding-top: 12px;
+      font-size: 12px;
+      color:  #5F5E64;
+      .tags-container {
+        display: flex;
+        // flex-direction: column;
+        box-sizing:border-box;
+        .tags {
+          background: #F7F9FA;
+          border: 0.5px solid rgba(0, 0, 0, 0.05);
+          box-sizing: border-box;
+          border-radius: 4px;
+          padding: 1px 8px;
+          margin-right: 4px;
+        }
       }
-      .allot-active {
-        color: #5F5E64;
-        background: #F7F9FA;
-        border: 1px solid rgba(0, 0, 0, 0.05);
+      .container-2{
+        margin-top: 4px;
       }
-      .tip-time {
+      .date {
+        display: flex;
+        align-items: center;
         color: #9B9CA3;
-        flex-shrink: 0;
-        background: transparent;
-        padding-right: 0;
       }
     }
   }

src/views/business/client/ClientAdd.vue

@@ -7,21 +7,29 @@
             v-model="clientInfo.name"
             required
             label="客户名称"
-            placeholder="输入客户企业名称"
+            placeholder="请输入客户企业名称"
             class="infoName"
           />
           <van-field
             v-model="clientInfo.business"
             label="客户行业"
-            placeholder="选择客户所属行业"
+            placeholder="选择行业"
             right-icon="arrow"
             readonly
             @click="openSList"
           />
+          <van-field
+            v-model="clientInfo.business"
+            label="客户区域"
+            placeholder="选择区域"
+            right-icon="arrow"
+            readonly
+            @click="openAreaList"
+          />
           <van-field
             v-model="clientInfo.address"
-            label="客户地址"
-            placeholder="输入客户地址"
+            label="详细地址"
+            placeholder="请填写客户地址"
           />
         </van-cell-group>
         <van-popup
@@ -30,26 +38,36 @@
           :lazy-render="false"
           get-container="body"
           position="bottom"
-          class="chooseBus"
+          class="chooseBus collection"
         >
           <div class="pop-header r-c-box">
-            <span class="title-span">选择客户行业</span>
+            <span class="title-span">请选择客户行业</span>
             <span class="j-icon icon-del-grey" @click="showBus = false"></span>
           </div>
-          <div class="pop-main" v-if="isIOSBug">
-            <div class="items" v-for="(item, index) in business" :key="index">
-              <h4>{{index}}</h4>
-              <div class="cardBox">
-                <div class="cardItem" v-for="(val, index) in item" :key="index" @click="busIndex = val" :class="{active: busIndex === val}">{{val}}</div>
-              </div>
-            </div>
-          </div>
-          <div class="pop-footer j-button-group">
-            <button class="j-button-cancel" @click="busCancel">取消</button>
-            <button class="j-button-confirm" @click="busConfirm">确认</button>
+          <industry-dropdown-picker @confirm="busConfirm" @cancel="busCancel"></industry-dropdown-picker>
+        </van-popup>
+        <van-popup
+          v-model="showAreaBus"
+          round
+          :lazy-render="false"
+          get-container="body"
+          position="bottom"
+          class="chooseBus collection"
+        >
+          <div class="pop-header r-c-box">
+            <span class="title-span">请选择客户区域</span>
+            <span class="j-icon icon-del-grey" @click="showAreaBus = false"></span>
           </div>
+          <areaDropdownPicker @confirm="busConfirm" @cancel="busCancel"></areaDropdownPicker>
         </van-popup>
       </div>
+      <div class="van-cell-group__title">添加标签</div>
+      <div class="tag_content">
+        <div class="addTags">
+          <div class="tag_lable">选择标签</div>
+          <div class="tag_select">请选择</div>
+        </div>
+      </div>
       <div class="van-cell-group__title">客户联系人</div>
       <div v-for="(item, index) in contacts" :key="index" class="contactsInfo">
         <van-cell-group>
@@ -89,6 +107,8 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Button, Cell, CellGroup, Field, Popup, Icon, Toast } from 'vant'
 import { mapActions, mapMutations, mapState } from 'vuex'
 import BusiessData from '@/utils/data2json/business'
+import industryDropdownPicker from '@/components/searchFilter/industryFilterPicker.vue'
+import areaDropdownPicker from '@/components/searchFilter/areaFilterPicker.vue'
 
 @Component({
   components: {
@@ -97,7 +117,9 @@ import BusiessData from '@/utils/data2json/business'
     [CellGroup.name]: CellGroup,
     [Field.name]: Field,
     [Popup.name]: Popup,
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    industryDropdownPicker,
+    areaDropdownPicker
   },
   methods: {
     ...mapActions({
@@ -128,6 +150,7 @@ export default class extends Vue {
   protected saveEntBusinessListState: any
 
   showBus = false
+  showAreaBus = false
   isIOSBug = true
   busIndex = '';
   clientInfo = {
@@ -164,6 +187,17 @@ export default class extends Vue {
     }, 555)
   }
 
+  openAreaList () {
+    setTimeout(() => {
+      this.showAreaBus = true
+      this.isIOSBug = false
+      this.$nextTick(() => {
+        this.showAreaBus = true
+        this.isIOSBug = true
+      })
+    }, 555)
+  }
+
   addContact () {
     if (this.contacts.every(v => v.name !== '' && v.phoneNumber !== '')) {
       const contact = {
@@ -174,12 +208,14 @@ export default class extends Vue {
     }
   }
 
-  busCancel () {
+  busCancel (data) {
     this.busIndex = ''
     this.showBus = false
   }
 
-  busConfirm () {
+  busConfirm (data) {
+    debugger
+    console.log(data)
     this.clientInfo.business = this.busIndex
     this.showBus = false
   }
@@ -353,6 +389,36 @@ export default class extends Vue {
     .van-cell-group__title {
       font-size: 16px;
     }
+    .tag_content{
+      padding: 0 12px;
+      width: 100%;
+      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05000000074505806), 16px 0px 0px 1px #FFFFFF;
+      border-radius: 0px 0px 0px 0px;
+      box-sizing: border-box;
+      .addTags{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 0  16px;
+        background: #fff;
+        min-height: 54px;
+        opacity: 1;
+        .tag_lable{
+          width: 80px;
+          font-size: 15px;
+          font-family: PingFang SC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #5F5E64;
+        }
+        .tag_select{
+          margin-left: 10px;
+          font-size: 16px;
+          font-family: PingFang SC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #2ABED1;
+        }
+      }
+    }
     background: #f5f6f7;
     .client-info {
       margin-top: 16px;

src/views/business/client/ClientList.vue

@@ -221,7 +221,8 @@ export default class extends Vue {
     this.baseInfo.customer_name = this.selectCID().customer_name
     this.staff_names = this.selectCID().staff_names || ''
     this.ajaxGetClient({
-      manage: this.showClient ? null : 1,
+      entId: 70,
+      entUserId: 171,
       customer_id: this.$route.params.cid || null
     }).then(res => {
       if (res.error_code === 0) {

tsconfig.json

@@ -10,6 +10,7 @@
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "esModuleInterop": true,
+    "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
@@ -29,6 +30,7 @@
     ]
   },
   "include": [
+    "src/**/*.js",  // 导入js
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",

vue.config.js

@@ -48,17 +48,23 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '^/entbase': {
-        target: 'https://app-i1.jianyu360.cn',
+        target: 'https://app4-jytest.jydev.jianyu360.com/',
         changeOrigin: true,
         logLevel: 'debug'
       },
       '^/entniche': {
-        target: 'https://app-i1.jianyu360.cn',
+        target: 'http://192.168.20.53:812',
+        // target: 'https://app4-jytest.jydev.jianyu360.com/',
+        changeOrigin: true,
+        logLevel: 'debug'
+      },
+      '^/publicapply': {
+        target: 'https://app4-jytest.jydev.jianyu360.com/',
         changeOrigin: true,
         logLevel: 'debug'
       },
       '^/testServer': {
-        target: 'https://app-i1.jianyu360.cn',
+        target: 'https://app4-jytest.jydev.jianyu360.com/',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
@@ -66,7 +72,7 @@ module.exports = {
         }
       },
       '^/jypay': {
-        target: 'https://app-i1.jianyu360.cn',
+        target: 'https://app4-jytest.jydev.jianyu360.com/',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {