|
|
@@ -1,40 +1,50 @@
|
|
|
var cateComponentTemplate = `<div class="j-container">
|
|
|
<div class="j-main unitTab">
|
|
|
<van-tabs type="card" class="unitType">
|
|
|
- <van-tab title="全部">内容 3</van-tab>
|
|
|
- <van-tab v-for="(item, index) in Object.keys(list)" :key="index">
|
|
|
+ <van-tab title="全部">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ clickable
|
|
|
+ type="primary"
|
|
|
+ title="全选"
|
|
|
+ @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">
|
|
|
- {{item}}
|
|
|
+ {{Object.keys(item)[0]}}
|
|
|
</div>
|
|
|
- <div class="optionnum">36/51</div>
|
|
|
+ <div class="optionnum">36/{{item[Object.keys(item)[0]].length}}</div>
|
|
|
</template>
|
|
|
- <van-checkbox-group v-model="result" ref="checkboxGroup">
|
|
|
- <van-cell-group>
|
|
|
- <van-cell
|
|
|
- v-model="checked"
|
|
|
+ <van-cell
|
|
|
clickable
|
|
|
- type="primary"
|
|
|
title="全选"
|
|
|
- @click="checkAll"
|
|
|
+ @click="checkAll(item)"
|
|
|
>
|
|
|
<template #right-icon>
|
|
|
- <van-checkbox checked-color="#2ABED1"></van-checkbox>
|
|
|
+ <van-checkbox checked-color="#2ABED1" :bind-group="false" v-model="item[Object.keys(item)[1]]"></van-checkbox>
|
|
|
</template>
|
|
|
- </van-cell>
|
|
|
- <van-cell
|
|
|
- v-for="(con, i) in list[item]"
|
|
|
- clickable
|
|
|
- :key="i"
|
|
|
- :title="con"
|
|
|
- @click="toggle(index)"
|
|
|
- >
|
|
|
- <template #right-icon>
|
|
|
- <van-checkbox checked-color="#2ABED1" :name="con" ref="checkboxes" />
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </van-checkbox-group>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ v-for="(iitem, i) in item[Object.keys(item)[0]]"
|
|
|
+ clickable
|
|
|
+ label-disabled="false"
|
|
|
+ :key="i"
|
|
|
+ :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>
|
|
|
@@ -52,29 +62,128 @@ var cateComponent = {
|
|
|
template: cateComponentTemplate,
|
|
|
data:function () {
|
|
|
return {
|
|
|
- result: [],
|
|
|
- list: {
|
|
|
- "党政机关事业单位": ['人大', '政协', '党委办','组织', '宣传', '统战', '纪委', '政府办', '发改委','财政','教育','科技','工信','民政', '民宗', '人社', '公安', '检察院','法院', '司法', '应急管理', '军队', '自然资源', '生态环境','住建', '市政', '城管', '交通', '水利','农业','气象','文旅', '卫健委','医疗','学校','档案', '体育', '政务中心', '机关事务', '国资委','海关','税务', '市场监管', '商务','人行', '银保监', '证监', '审计', '出版广电','统计', '公共资源交易', '社会团体','气象'],
|
|
|
- "企业": ['传媒','采矿业', '电信行业', '金融业', '建筑业', '能源化工', '农林牧渔','批发零售', '信息技术', '运输物流', '制造业', '住宿餐饮']
|
|
|
- },
|
|
|
- checked: true
|
|
|
+ tablist: [
|
|
|
+ {
|
|
|
+ "党政机关事业单位": ['人大', '政协', '党委办','组织', '宣传', '统战', '纪委', '政府办', '发改委','财政','教育','科技','工信','民政', '民宗', '人社', '公安', '检察院','法院', '司法', '应急管理', '军队', '自然资源', '生态环境','住建', '市政', '城管', '交通', '水利','农业','气象','文旅', '卫健委','医疗','学校','档案', '体育', '政务中心', '机关事务', '国资委','海关','税务', '市场监管', '商务','人行', '银保监', '证监', '审计', '出版广电','统计', '公共资源交易', '社会团体','气象'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "企业": ['传媒','采矿业', '电信行业', '金融业', '建筑业', '能源化工', '农林牧渔','批发零售', '信息技术', '运输物流', '制造业', '住宿餐饮']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ checkedAll: false
|
|
|
}
|
|
|
},
|
|
|
+ created () {
|
|
|
+ this.getIndustryData()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- checkAll: function(){
|
|
|
- console.log(this.checked)
|
|
|
- if(this.checked){
|
|
|
- this.checked = false
|
|
|
- this.$refs.checkboxGroup.toggleAll(true);
|
|
|
+ // 获取行业数据
|
|
|
+ getIndustryData: function(){
|
|
|
+ const _this = this
|
|
|
+ let maxarr = []
|
|
|
+ _this.tablist.forEach(function(item,index) {
|
|
|
+ let minarr = []
|
|
|
+ let keyname = Object.keys(item)[0]
|
|
|
+ let eachArr = item[Object.keys(item)[0]]
|
|
|
+ eachArr.forEach(function(data, i){
|
|
|
+ data = {
|
|
|
+ name: data,
|
|
|
+ type: false
|
|
|
+ }
|
|
|
+ minarr.push(data)
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ [keyname]: minarr,
|
|
|
+ type: false
|
|
|
+ }
|
|
|
+ maxarr.push(obj)
|
|
|
+ })
|
|
|
+ _this.tablist = maxarr
|
|
|
+ },
|
|
|
+ // 总全选
|
|
|
+ checkBoxAll:function() {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 模块全选
|
|
|
+ checkAll: function(data){
|
|
|
+ console.log(data)
|
|
|
+ let selectBool = data[Object.keys(data)[1]]
|
|
|
+ let dataArr = data[Object.keys(data)[0]]
|
|
|
+ console.log(selectBool, dataArr)
|
|
|
+ if(selectBool) {
|
|
|
+ dataArr.forEach(function(item, index){
|
|
|
+ item.type = false
|
|
|
+ })
|
|
|
}else{
|
|
|
- this.checked = true
|
|
|
- this.$refs.checkboxGroup.toggleAll(false);
|
|
|
+ dataArr.forEach(function(item, index){
|
|
|
+ item.type = true
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
- resetAll:function() {},
|
|
|
- onConfirm:function() {},
|
|
|
- toggle: function (index) {
|
|
|
- this.$refs.checkboxes[index].toggle()
|
|
|
+ // 模块单选
|
|
|
+ toggleCheck: function (data, item) {
|
|
|
+ if(data.type){
|
|
|
+ data.type = false
|
|
|
+ }else{
|
|
|
+ data.type = true
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模块全部选中，全选自动勾选
|
|
|
+ const allselect = item[Object.keys(item)[0]].some(function(sum, index){
|
|
|
+ if(sum.type == false){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item[Object.keys(item)[1]] = !allselect
|
|
|
+
|
|
|
+ // 只要有一个没有选中，总全选不勾选
|
|
|
+ let industryAll = this.tablist.some(function(itemall, index){
|
|
|
+ if(itemall.type == false) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.checkedAll = !industryAll
|
|
|
+ },
|
|
|
+ resetAll:function() {
|
|
|
+ let params = {
|
|
|
+ name: 'industryItem',
|
|
|
+ data: ''
|
|
|
+ }
|
|
|
+ this.$emit('cancel', params)
|
|
|
+ },
|
|
|
+ // 确定按钮
|
|
|
+ onConfirm:function() {
|
|
|
+ let cateArr = []
|
|
|
+ this.tablist.forEach(function(item, index){
|
|
|
+ item[Object.keys(item)[0]].forEach(function(data, i) {
|
|
|
+ if(data.type){
|
|
|
+ console.log(data)
|
|
|
+ let str = Object.keys(item)[0] +'_'+data.name
|
|
|
+ cateArr.push(str)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let params = {
|
|
|
+ name: 'cateItem',
|
|
|
+ data: cateArr
|
|
|
+ }
|
|
|
+ this.$emit('confirm', params)
|
|
|
}
|
|
|
}
|
|
|
}
|
