|
@@ -0,0 +1,220 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div v-for="(item,index) in customFields" :key="index">
|
|
|
+ <div class="leibie">
|
|
|
+ <p class="leiName">{{item.title}}</p>
|
|
|
+ <!-- <span class="jutixiang">
|
|
|
+ <a-checkbox
|
|
|
+ :value="index"
|
|
|
+ name="type"
|
|
|
+ @change="isSelectAll($event,index)"
|
|
|
+ :checked="item.checkall"
|
|
|
+ >全选</a-checkbox>
|
|
|
+ </span> -->
|
|
|
+ <!-- {{item.form}} -->
|
|
|
+ <a-checkbox-group v-model="item.form" >
|
|
|
+ <span class="jutixiang" v-for="(zhi,num) in item.specificFields " :key="num">
|
|
|
+ <a-checkbox :value="zhi.dataIndex" name="type" @change="checkboxClick(zhi)">
|
|
|
+ <a-tooltip
|
|
|
+ class="select-component"
|
|
|
+ placement="top"
|
|
|
+ :title="zhi.tip"
|
|
|
+ :overlayClassName="tooltipShow"
|
|
|
+ >{{zhi.title}}</a-tooltip>
|
|
|
+ </a-checkbox>
|
|
|
+ </span>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import customFields from '../../columnConst/accountConst'
|
|
|
+// let customFields=customFields
|
|
|
+export default {
|
|
|
+ props: ['showCol','fixedCol'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // customFields,
|
|
|
+ customFields:[...customFields],
|
|
|
+ quanxuanflag: [],
|
|
|
+ hovered: false,
|
|
|
+ tooltipShow: 'tooltipShow',
|
|
|
+ toParentArr: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ showCol(n) {
|
|
|
+ console.log(n)
|
|
|
+ //
|
|
|
+ if (this.showCol.length == this.fixedCol.length) {
|
|
|
+
|
|
|
+ for (let i = 0; i < this.customFields.length; i++) {
|
|
|
+ this.customFields[i].form=[]
|
|
|
+ }
|
|
|
+ this.showCol.map((item, index) => {
|
|
|
+ this.customFields.map((it, ind) => {
|
|
|
+ it.specificFields.map((i, d) => {
|
|
|
+ if (i.dataIndex === item.dataIndex) {
|
|
|
+ it.form.push(item.dataIndex)
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+
|
|
|
+ for (let i = 0; i < this.customFields.length; i++) {
|
|
|
+ this.customFields[i].form=[]
|
|
|
+
|
|
|
+ }
|
|
|
+ n.map((item, index) => {
|
|
|
+ this.customFields.map((it, ind) => {
|
|
|
+ it.specificFields.map((i, d) => {
|
|
|
+ if (i.dataIndex === item.dataIndex) {
|
|
|
+ it.form.push(item.dataIndex)
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // console.log(this.form)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ for (let i = 0; i < customFields.length; i++) {
|
|
|
+ this.customFields[i].form=[]
|
|
|
+ }
|
|
|
+ // console.log(1)
|
|
|
+ this.showCol.map((item, index) => {
|
|
|
+ this.customFields.map((it, ind) => {
|
|
|
+ it.specificFields.map((i, d) => {
|
|
|
+ if (i.dataIndex === item.dataIndex) {
|
|
|
+ it.form.push(item.dataIndex)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // console.log(this.customFields)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hide() {
|
|
|
+ this.clicked = false
|
|
|
+ this.hovered = false
|
|
|
+ },
|
|
|
+ handleHoverChange(visible) {
|
|
|
+ this.clicked = false
|
|
|
+ this.hovered = visible
|
|
|
+ },
|
|
|
+ getPopupContainer() {
|
|
|
+ console.log(this)
|
|
|
+ },
|
|
|
+
|
|
|
+ //全选框 判断是否全选
|
|
|
+ isSelectAll(e, val) {
|
|
|
+ //像父元素传递
|
|
|
+ console.log(e, val)
|
|
|
+ let arr=JSON.parse(JSON.stringify(this.customFields[val].specificFields))
|
|
|
+ let valArr={
|
|
|
+ flag:true,
|
|
|
+ arr
|
|
|
+ }
|
|
|
+ this.customFields[val].checkall = e.target.checked
|
|
|
+ console.log(this.customFields[val].checkall)
|
|
|
+
|
|
|
+ if (this.customFields[val].checkall) {
|
|
|
+
|
|
|
+ this.customFields[val].form=[]
|
|
|
+
|
|
|
+ this.customFields[val].specificFields.map((item, index) => {
|
|
|
+
|
|
|
+ this.customFields[val].form.push(item.dataIndex)
|
|
|
+
|
|
|
+ })
|
|
|
+ valArr.flag=true;
|
|
|
+ this.$emit('getshowlist', valArr)
|
|
|
+ } else {
|
|
|
+ console.log(this.customFields[val])
|
|
|
+ this.customFields[val].form=[];
|
|
|
+ valArr.flag=false;
|
|
|
+ console.log(this.customFields[val].form=[])
|
|
|
+ this.$emit('getshowlist', valArr)
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.form[val])
|
|
|
+ },
|
|
|
+
|
|
|
+ onChange(){
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //复选框的点击事件
|
|
|
+ checkboxClick(val) {
|
|
|
+ // console.log(val)
|
|
|
+ // this.$emit('update:count',)
|
|
|
+ this.$emit('getshowlist', val)
|
|
|
+ // console.log(val,this.customFields[0].form)
|
|
|
+ // this.customFields[val].checkall=!this.customFields[val].checkall
|
|
|
+ // for (let i = 0; i < this.customFields.length; i++) {
|
|
|
+ // // console.log(this.customFields[0].form,this.customFields[i].specificFields.length)
|
|
|
+ // if(this.customFields[i].form.length==this.customFields[i].specificFields.length-1){
|
|
|
+ // this.customFields[i].checkall=true;
|
|
|
+ // }else{
|
|
|
+ // this.customFields[i].checkall=false;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.tooltipShow {
|
|
|
+ max-width: 30%;
|
|
|
+}
|
|
|
+.tooltipShow .ant-tooltip-content .ant-tooltip-inner {
|
|
|
+ background: white;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.ant-tooltip-content .ant-tooltip-arrow::before {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.leibie {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .leiName {
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.jutixiang {
|
|
|
+ display: inline-block;
|
|
|
+ width: 32%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 3px;
|
|
|
+ height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-tooltip-content .tooltipShow {
|
|
|
+ background: #eee;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-checkbox-group {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|