|
@@ -0,0 +1,154 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-modal
|
|
|
|
+ title="自定义列表"
|
|
|
|
+ :visible="visible"
|
|
|
|
+ dialog-class="custom-columns-modal"
|
|
|
|
+ @ok="handleOk"
|
|
|
|
+ @cancel="handleCancel"
|
|
|
|
+ >
|
|
|
|
+ <div class="custom-modal-content">
|
|
|
|
+ <a-input-search class="input-search" placeholder="请输入指标名称" @change="onChange" />
|
|
|
|
+ <div class="modal-content-table">
|
|
|
|
+ <div class="select-class-left">
|
|
|
|
+ <div class="class-left-header">可添加的列</div>
|
|
|
|
+ <div class="class-left-main">
|
|
|
|
+ <div class="left-main-left">
|
|
|
|
+ <div
|
|
|
|
+ class="main-left-select"
|
|
|
|
+ v-for="(item, index) in selectLeftList"
|
|
|
|
+ :key="index"
|
|
|
|
+ :class="{active: cur === index}"
|
|
|
|
+ @click="handleSelectNum(index)"
|
|
|
|
+ >
|
|
|
|
+ {{item}}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="left-main-right">
|
|
|
|
+ <div v-show="isConNumOne" class="main-right-class">
|
|
|
|
+ <p class="check-box-p">展示数据</p>
|
|
|
|
+ <div class="check-box-select-muster">
|
|
|
|
+ <a-checkbox-group @change="handleChangeBox">
|
|
|
|
+ <span
|
|
|
|
+ class="check-box-class"
|
|
|
|
+ v-for="(item, index) in selectCheckboxData"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <a-checkbox :value="item">{{ item }}</a-checkbox>
|
|
|
|
+ </span>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-show="isConNumTwo" class="main-right-class">内容二</div>
|
|
|
|
+ <div v-show="isConNumThree" class="main-right-class">内容三</div>
|
|
|
|
+ <div v-show="isConNumFour" class="main-right-class">内容四</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="select-class-right">
|
|
|
|
+ <div class="class-left-header">
|
|
|
|
+ <span>已选100个</span>
|
|
|
|
+ <span><a @click="handleClearAll">清空全部</a></span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="applyTypeOption.length" class="class-left-content">
|
|
|
|
+ <div class="apply-right-tree" v-for="(item, index) in applyTypeOption" :key="index">
|
|
|
|
+ <p class="left-content-p">
|
|
|
|
+ <a-tooltip placement="left">
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <span>{{ item }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ {{ item }}
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </p>
|
|
|
|
+ <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="no-data-class">暂无数据</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ name: 'custom-columns',
|
|
|
|
+ props: {
|
|
|
|
+ // treeData: {
|
|
|
|
+ // type: Array,
|
|
|
|
+ // default: () => []
|
|
|
|
+ // },
|
|
|
|
+ // searchValue: {
|
|
|
|
+ // type: String,
|
|
|
|
+ // default: ''
|
|
|
|
+ // },
|
|
|
|
+ visible: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ selectCheckboxData: ['花费', '封面曝光数', '行为数', '举报书', '拉黑数', '评论数'],
|
|
|
|
+ selectLeftList: ['111', '222', '333', '444'],
|
|
|
|
+ cur: 0,
|
|
|
|
+ isConNumOne: true,
|
|
|
|
+ isConNumTwo: true,
|
|
|
|
+ isConNumThree: true,
|
|
|
|
+ isConNumFour: true,
|
|
|
|
+ applyTypeOption: []
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleDelTree(item) {
|
|
|
|
+ console.log(item, 'item');
|
|
|
|
+ this.applyTypeOption = [];
|
|
|
|
+ },
|
|
|
|
+ handleChangeBox(val) {
|
|
|
|
+ console.log(val, 'checkboc111');
|
|
|
|
+ this.applyTypeOption = val;
|
|
|
|
+ },
|
|
|
|
+ handleSelectNum(index) {
|
|
|
|
+ this.cur = index;
|
|
|
|
+ if (index === 0) {
|
|
|
|
+ this.isConNumOne = true;
|
|
|
|
+ this.isConNumTwo = true;
|
|
|
|
+ this.isConNumThree = true;
|
|
|
|
+ this.isConNumFour = true;
|
|
|
|
+ }
|
|
|
|
+ else if (index === 1) {
|
|
|
|
+ this.isConNumOne = false;
|
|
|
|
+ this.isConNumTwo = true;
|
|
|
|
+ this.isConNumThree = true;
|
|
|
|
+ this.isConNumFour = true;
|
|
|
|
+ }
|
|
|
|
+ else if (index === 2) {
|
|
|
|
+ this.isConNumOne = false;
|
|
|
|
+ this.isConNumTwo = false;
|
|
|
|
+ this.isConNumThree = true;
|
|
|
|
+ this.isConNumFour = true;
|
|
|
|
+ }
|
|
|
|
+ else if (index === 3) {
|
|
|
|
+ this.isConNumOne = false;
|
|
|
|
+ this.isConNumTwo = false;
|
|
|
|
+ this.isConNumThree = false;
|
|
|
|
+ this.isConNumFour = true;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleOk() {
|
|
|
|
+ console.log('这个是确定按钮');
|
|
|
|
+ },
|
|
|
|
+ handleCancel() {
|
|
|
|
+ console.log('这个是取消按钮');
|
|
|
|
+ this.$emit('cancelClick', false);
|
|
|
|
+ },
|
|
|
|
+ onChange(e) {
|
|
|
|
+ console.log(e.target.value, '---------');
|
|
|
|
+ },
|
|
|
|
+ handleClearAll() {
|
|
|
|
+ console.log('清空全部按钮事件');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+ @import "custom-columns";
|
|
|
|
+</style>
|