eta_front/src/views/dataEntry_manage/databaseComponents/edbCollectDia.vue

<template>
  <div class="edbCollectDia-container">
    <el-dialog
      :visible.sync="show"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="收藏"
      @close="cancelHandle"
      custom-class="dialog"
      center
      width="560px"
      v-dialogDrag
    >
      <div class="dialog-min">
        <div class="classify-cont">
          <el-tag
            v-for="item in classifyArr"
            :class="['classify-tag',{'act': checkedClassifys.includes(item.ClassifyId)}]"
            :key="item.ClassifyId"
            type="info"
            effect="plain"
            @click="chooseClassify(item.ClassifyId)"
          >
            {{ item.ClassifyName }}
          </el-tag>
        </div>
        <div class="add-cont" @click="$parent.handleOpenCollectClassify">
          <i class="el-icon-circle-plus-outline" />新增
        </div>

        <p>提示：收藏后的指标，请在{{collectPath}}查看</p>
      </div>
      <div class="dia-bot">
        <el-button type="primary" style="margin-right: 20px" plain @click="cancelHandle">{{$t('Dialog.cancel_btn')}}</el-button>
        
        <el-button type="primary" @click="saveHandle"
          >{{$t('Dialog.confirm_save_btn')}}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { edbCollectInterface,chartBaseV2Interface } from '@/api/modules/chartApi'
export default {
	name:'',
	props: {
		show: {
			type: Boolean,
		},
    id: {
      type: Number,
    },
    add_ids: {
      type: Array,
      default: []
    },
    source: { //指标或图库 edb chart
      type: String,
      default: 'edb'
    },
	},
  computed: {
    collectPath() {
      return this.source === 'edb' ? '指标加工/我的指标/收藏指标' : '图库/我的图表/收藏图表'
    }
  },
	watch: {
		show(newval) {
			if(newval) {
				this.getClassify();
			}
		}
	},
	data () {
		return {
			classifyArr:[],//分类列表
      checkedClassifys: [],
			addRules: {
				name:[
					{ required: true, message: /* '分类名称不能为空' */this.$t('Chart.Vailds.classify_msg'), trigger: 'blur' },
				],
			}
		};
	},
	methods: {
		/* 获取分类列表 */
		async getClassify() {
			const res = this.source ==='edb'
        ? await edbCollectInterface.getEdbCollectClassifyOne()
        : await chartBaseV2Interface.getChartCollectClassifyOne();

        if(res.Ret !== 200) return
        this.classifyArr = res.Data || [];
        this.checkedClassifys = _.cloneDeep(this.add_ids);

		},

    chooseClassify(id) {
      if(this.checkedClassifys.includes(id)) {
        let index = this.checkedClassifys.indexOf(id);
        this.checkedClassifys.splice(index, 1);
      }else {
        this.checkedClassifys.push(id);
      }
    },

    /* 加入收藏 */
    async saveHandle() {
      if(!this.checkedClassifys.length) return this.$message.warning('请选择分类');

      const res = this.source === 'edb'
        ? await edbCollectInterface.edbCollect({
            EdbInfoId: this.id,
            ClassifyIdList: this.checkedClassifys
          })
        : await chartBaseV2Interface.chartCollect({
            ChartInfoId: this.id,
            ClassifyIdList: this.checkedClassifys
          })
        if(res.Ret !== 200) return 
        this.$message.success('收藏成功')

        this.$emit('confirm',this.checkedClassifys);
        this.cancelHandle();
    },
    
		cancelHandle() {
      this.checkedClassifys = [];
			this.$emit('update:show')
		}
	},
}
</script>
<style lang="scss">
.edbCollectDia-container {
  .el-dialog--center .el-dialog__body {
    padding: 25px 25px 30px !important;
  }
  .dialog-min {
    .classify-cont {
      padding: 30px 10px;
      border: 1px dashed #999;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .classify-tag {
        margin: 5px;
        padding: 0 20px;
        cursor: pointer;
        &.act {
          background: #0052D9;
          color: #fff;
        }
      }
    }
    .add-cont {
      color: #0052D9;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
}
</style>