选择教师专长弹窗

src/components/project/AddContent.vue

@@ -0,0 +1,254 @@
+<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">选择教师专长</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,
+    },
+  },
+  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 = []
+      }
+    });
+    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("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>

src/views/lecturer/InsideLecturer.vue

@@ -259,6 +259,7 @@
             :options="getTeacherExpertiseByPidList">
           </a-select>
           <span v-if="teacherdialog1 == 1" class=display1>{{ formParam.expertise }}</span>
+          <div class="add_content" @click="addContentData">+</div>
         </div>
               <div class="del_btnbox"  v-if="teacherdialog1 == 0">
                 <a-button class="del_btn btn1" @click="cancelTeacherDialog" style="margin-right: 32px;">取消</a-button>
@@ -377,6 +378,7 @@
       </a-modal>
     </div>
     <!-- <div> <Upload/> </div>         -->
+    <AddContent v-model:showContent="showContent" @AddContentList="AddContentList" />
   </div>
 </template>
 <script lang="jsx">
@@ -384,6 +386,7 @@ import { reactive, toRefs, ref ,watch} from "vue";
 import Editor from "@/components/project/Editor";
 import Upload from "@/components/project/Upload";
 import { message } from "ant-design-vue";
+import AddContent from "@/components/project/AddContent";
 import {getTeacherSystemList , getTeacherList,getTeacherPayRollPriceList, getLevel,insertTeacher,deleteInTeacher,updateInTeacher,getTeacherById, updateTeacherState,getTeacherCourseList , getTeacherExpertise,getTeacherExpertiseByPid ,infoteacher,getTeacherLogList } from "../../api/Lecturer";
 // import {getProjSt} from "../../api/indexProjStu";
 // import AddTeacher from "../../components/drawers/project/AddTeacher"
@@ -392,10 +395,12 @@ export default {
   components: {
     // AddTeacher,
     Editor,
-    Upload
+    Upload,
+    AddContent
   },
   setup() {
     const state = reactive({
+      showContent: false,
       byPid:null,
       currentPage1: 1,
       pageSize1: 10,
@@ -532,7 +537,36 @@ export default {
     { value: 1, label: "专业力"  , children: [{value: 0, label: "管理团队"  ,value: 1, label: "专业力"  ,value: 2, label: "专业力"   }]},
     { value: 2, label: "通用力"  , children: [{value: 0, label: "管理团队"  ,value: 1, label: "通用力"  ,value: 2, label: "通用力"   }]},
     ])
-
+    const addContentData = () => {
+      state.showContent = true
+    }
+    const AddContentList = (data) => {
+      console.log(data,'treedatalist')
+      //组件获取返回的所有值，调用以前接口，现环境不可用，示例：
+      // [{
+      //   "id": "966459050400600064",
+      //   "sysCreateAid": "952948872212635648",
+      //   "sysCreateBy": "董瑞华",
+      //   "sysCreateTime": "2022-04-20 22:03:13",
+      //   "sysUpdateTime": "2022-04-20 22:03:13",
+      //   "sysUpdateBy": "董瑞华",
+      //   "sysVersion": 0,
+      //   "deleted": false,
+      //   "name": "研发",
+      //   "parentId": "966458733088919552",
+      //   "filter": true,
+      //   "orderIndex": 2,
+      //   "origin": 2,
+      //   "status": 1,
+      //   "total": 0,
+      //   "sysResType": 1,
+      //   "children": "",
+      //   "parentName": "专业力",
+      //   "resDataManager": "",
+      //   "code": "966459050400600064",
+      //   "value": "966459050400600064"
+      // }]
+    }
     //获取讲师父 专长
     const TeacherExpertiseList = ref([
     ]);
@@ -1238,6 +1272,8 @@ export default {
       getTeacherExpertiseByPida,
       infoteacherList,
       getinfoteacher,
+      addContentData,
+      AddContentList,
     }
   },
 };
@@ -1255,6 +1291,17 @@ export default {
   display: inline-block;
   width: 200px;
 }
+.add_content{
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: #4ea6ff;
+  text-align: center;
+  line-height: 40px;
+  color: #ffffff;
+  font-size: 26px;
+}
 
 // .display0{
 // display:inline-block ;