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>
        <span class="add-cont" @click="$parent.handleOpenCollectClassify">
          <i class="el-icon-circle-plus-outline" />新增
        </span>
      </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 } from '@/api/modules/chartApi'
export default {
	name:'',
	props: {
		show: {
			type: Boolean,
		},
    edbId: {
      type: Number,
    },
    add_ids: {
      type: Array,
      default: []
    }
	},
	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: {
		/* 获取分类列表 */
		getClassify() {
			edbCollectInterface.getEdbCollectClassifyOne()
				.then(res => {
					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);
      }
    },

    /* 加入收藏 */
    saveHandle() {
      if(!this.checkedClassifys.length) return this.$message.warning('请选择分类');
      edbCollectInterface.edbCollect({
        EdbInfoId: this.edbId,
        ClassifyIdList: this.checkedClassifys
      }).then(res => {
        if(res.Ret !== 200) return 
        this.$message.success('收藏成功')
        this.$emit('success',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;
    }
  }
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
}
</style>