fe-manage/src/components/project/AddContent.vue

<template>
  <div class="twoDimensionalCode">
    <!--选择教师专长页面 -->
    <a-modal
      :visible="showContent"
      :footer="null"
      :closable="closableQR"
      wrapClassName="codeModal"
      style="margin-top: 400px"
      :zIndex="9999"
      @cancel="qr_exit"
    >
      <div class="QR">
        <div class="qr_header"></div>
        <div class="qr_main">
          <div class="qrm_header">
            <span style="title">{{Addtitle}}</span>
            <div class="close_exit" @click="closeCodeModal"></div>
          </div>
          <div class="line"></div>
          <div class="content">
            <div class="left">
              <a-tree
                checkable
                :tree-data="treeData"
                v-model:expandedKeys="expandedKeys"
                v-model:selectedKeys="selectedKeys"
                v-model:checkedKeys="checkedKeys"
                @check="onCheck"
                :fieldNames="{
                  key: 'id',
                  title: 'name',
                  value: 'name',
                }"
              >
                <!-- <template #title0010><span style="color: #1890ff">sss</span></template> -->
              </a-tree>
            </div>
            <div class="right">
              <div class="headers">
                <div>已选择标签<span style="color: #4ea6ff;margin-left:5px;">{{treeAddData?.length}}</span>个</div>
                <div class="header_right" @click="clearTree">清空</div>
              </div>
              <div class="tags">
                <div
                  class="tag"
                  v-for="(item, index) in treeAddData"
                  :key="index"
                >
                  <div>{{ item?.name }}</div>
                  <div @click="deleteTree(item)" class="tag_delete">+</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <a-button style="margin-right: 20px;" @click="closeCodeModal">取消</a-button>
          <a-button type="primary" @click="queryCreate">确定</a-button>
        </div>
      </div>
    </a-modal>
    <!--二维码页面 -->
  </div>
</template>
<script>
import { reactive, toRefs, watch,ref,computed } from "vue";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
export default {
  name: "AddContent",
  components: {

  },
  props: {
    showContent: {
      type: Boolean,
      default: false,
    },
    Addtitle:{
      type:String,
      default: true,
    },
    AddContentList:{
      type:Array,
      default: ()=>[],
    }
  },
  setup(props, ctx) {
    const state = reactive({
      qrcodeSize: 800,
      codeInfo: {},
      courseUrl: "https://www.baidu.com/",
      showUrl: false,
      domain: location.protocol+'//'+location.host,
      treeAddData:[],
    });
    const store = useStore();
    const treeData = computed(() => store.state.content_type)
    watch(()=>props.showContent, (val) => {
      if(!val){
        expandedKeys.value = []
        selectedKeys.value = []
        checkedKeys.value = []
      }else{
        state.treeAddData = props?.AddContentList
        checkedKeys.value = props?.AddContentList?.map(item=>item.id)
      }
    });
    const onCheck = (checkedKeys, {checked: bool, checkedNodes, node, event}) => {
      state.treeAddData = checkedNodes.filter(node => !node.children || node.children.length === 0);
      console.log(state.treeAddData,'state.treeAddData')
    }
    const deleteTree = (item) => {
      state.treeAddData = state.treeAddData.filter(node => node.id !== item.id);
      checkedKeys.value = state.treeAddData.map(item=>item.id)
    }
    const clearTree = () => {
      state.treeAddData = [];
      checkedKeys.value = [];
    }
    const queryCreate = () => {
      ctx.emit("update:AddContentList", state.treeAddData);
      closeCodeModal()
    }
    const closeCodeModal = () => {
      ctx.emit("update:showContent", false);
    };
    const expandedKeys = ref([]);
    const selectedKeys = ref([]);
    const checkedKeys = ref([]);
    return {
      ...toRefs(state),
      closeCodeModal,
      queryCreate,
      deleteTree,
      clearTree,
      onCheck,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      treeData,
    };
  },
};
</script>
<style scoped lang="scss">
.twoDimensionalCode {
}
.codeModal {
  .ant-modal {
    .ant-modal-content {
      width: 479px !important;
      .ant-modal-body {
        .QR {
          z-index: 9999;
          width: 700px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .qr_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            // background: linear-gradient(
            //   rgba(78, 166, 255, 0.2) 0%,
            //   rgba(78, 166, 255, 0) 100%
            // );
          }
          .qr_main {
            width: 100%;
            position: relative;
            .qrm_header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .title {
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 22px;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .line{
              height: 1px;
              margin-top: 16px;
              background-color: #666666;
            }
            .content{
              display: flex;
              min-height: 500px;
              .left{
                width: 50%;
                border-right: 1px solid #666666;
                padding: 30px 15px;
                max-height: 600px;
                overflow-y: auto;
              }
              .right{
                width: 50%;
                // max-height: 600px;
                // overflow-y: auto;
                .headers{
                  display: flex;
                  justify-content: space-between;
                  margin: 30px 15px;
                  .header_right{
                    color: #666666;
                    cursor: pointer;
                  }
                }
                .tags{
                  max-height: 500px;
                  overflow-y: auto;
                  padding: 0 15px;
                  .tag{
                    height: 44px;
                    padding: 0 15px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .tag_delete{
                      display: none;
                      color: #4ea6ff;
                      transform: rotate(45deg);
                      font-size: 26px;
                      cursor: pointer;
                    }
                  }
                  .tag:hover .tag_delete {
                    display: block;
                  }
                  .tag:hover {
                    background-color: aliceblue;
                  }
                }
              }
            }
          }
          .footer{
            height: 60px;
            text-align: right;
            padding: 13px 30px;
            border-top: 1px solid #666666;
          }
        }
      }
    }
  }
}
</style>