123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240 |
- <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" :disabled="zhi.disabled" 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 {TTcustomFields ,KScustomFields} from '../../utils/columnConst/accountConst'
- // let customFields=customFields
- export default {
- props: ['showCol','fixedCol','mediaType'],
- data() {
- return {
- // 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() {
- if(this.mediaType==1){
- //头条自定义列
- this.customFields=TTcustomFields
- }else if(this.mediaType==2){
- //快手自定义列
- this.customFields=KScustomFields
- }
- for (let i = 0; i < this.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)
- }
- })
- })
- })
- this.fixedCol.map((item, index) => {
- this.customFields.map((it, ind) => {
- it.specificFields.map((i, d) => {
- if (i.dataIndex === item.dataIndex) {
- i.disabled=true;
- }
- })
- })
- })
- // 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>
|