pbl-teacher-table/src/components/pages/teacherSource/dialog.vue

<template>
    <div class="pb_content" style="background: unset">
        <div class="pb_content_body" style="
          background: #fff;
          padding: 0px 25px;
          box-sizing: border-box;
          border-radius: 5px;
        ">
            <div class="reBox">
                <div class="reTop">
                    <div>分类筛选</div>
                    <div>
                        <!-- @click="getCourse" -->
                        <div class="search">
                            <img src="../../../assets/icon/search.png" alt="" />
                        </div>
                        <input class="sInput" type="text" placeholder="请输入关键字" v-model="sourceName"
                            @keyup.enter="getSource" />
                    </div>
                </div>
                <div class="choose">
                    <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
                        :style="{ margin: !CourseTypeJson[item.id].length && 0 }">
                        <span v-if="CourseTypeJson[item.id].length">{{ item.name }}:</span>
                        <div class="typeCss" v-if="CourseTypeJson[item.id].length">
                            <div class="cName" @click="getCourse2(item.name, '', item.id, 1)"
                                :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''">
                                全部
                            </div>
                            <div v-for="(item1, index1) in CourseTypeJson[item.id]" :key="index + '-' + index1"
                                :label="item1.id" @click="getCourse2(item.name, item.id, item1.id, 2)">
                                <div class="cName" :class="typea == item1.id || typeb == item1.id
                                        ? 'isCType'
                                        : ''
                                    ">
                                    {{ item1.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pb_content_body">
            <div class="student_table" v-loading="loading">
                <div class="source-box" v-for="(item, index) in res" :key="index">
                    <img class="checkImg" src="../../../assets/icon/source/checka.png" @click="checka(item)" v-if="json[item.id]"/>
                    <img class="checkImg" src="../../../assets/icon/source/check.png" @click="checka(item)" v-else/>
                    <div class="iamge"><img src="../../../assets/icon/source/image.png" alt=""></div>
                    <div class="title"><span>{{ item.name }}</span></div>
                    <div class="detail">{{ item.detail }}</div>
                    <div class="label"><span v-for="(k, ki) in item.label.split(',')" :key="index + '-' + ki">{{ k ? k : "无" }}</span>
                    </div>
                    <div class="button"><span @click="check(item.url)">查看</span></div>
                </div>
                <div v-if="!res.length" style="text-align: center; width: 100%;">暂无数据</div>
            </div>
            <div class="student_page">
                <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" v-if="page && total"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="添加资源" :visible.sync="dialogVisible" :append-to-body="true" width="800px"
            :before-close="handleClose" class="dialog_diy">
            <div class="add-box">
                <div class="span-box">
                    <span><span style="color: red">*</span>工具名称</span><el-input class="input" v-model="s_title"
                        placeholder="请输入工具名称"></el-input>
                </div>
                <div class="type-box">
                    <div class="both">
                        <div class="choose2">
                            <div class="all_choose2" v-for="(item, index) in CourseType[0]" :key="index">
                                <span v-if="CourseTypeJson[item.id].length > 0
                                    ">{{ item.name }}</span>
                                <el-checkbox-group v-model="courseTypeId2" v-if="CourseTypeJson[item.id].length > 0
                                    ">
                                    <el-checkbox v-for="item1 in CourseTypeJson[item.id]" :key="item1.id"
                                        :label="item1.id">{{ item1.name }}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span-box">
                    <span><span style="color: red">*</span>网址来源</span><el-input class="input" v-model="s_url"
                        placeholder="请输入网址来源"></el-input>
                </div>
                <div class="span-box">
                    <span><span style="color: red">*</span>工具描述</span><el-input class="input" type="textarea" resize="none"
                        rows="5" v-model="s_detail" placeholder="请输入工具描述"></el-input>
                </div>
                <div class="span-box">
                    <span>标签</span><el-select class="input" v-model="s_label" multiple placeholder="请选择标签">
                        <el-option label="无需登录" value="无需登录"></el-option>
                        <el-option label="扫码登录" value="扫码登录"></el-option>
                        <el-option label="注册登录" value="注册登录"></el-option>
                        <el-option label="免费" value="免费"></el-option>
                        <el-option label="付费" value="付费"></el-option>
                        <el-option label="中文" value="中文"></el-option>
                        <el-option label="英文" value="英文"></el-option>
                    </el-select>

                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            page: 1,
            pageSize: 20,
            total: 0,
            isLoading: false,
            dialogVisible: false,
            title: "",
            tableData: [],
            res: [],
            userid: this.$route.query.userid,
            org: this.$route.query.org,
            oid: this.$route.query.oid,
            CourseType: [],
            CourseTypeJson: {},
            courseTypeId: {},
            courseTypeSon: [],
            isChoose: 0,
            sourceName: "",
            typea: "",
            typeb: "",
            typeE: [],
            courseTypeId2: [],
            s_title: "",
            s_url: "",
            s_detail: "",
            s_label: [],
            json:{}
        };
    },
    mounted() {
        this.selectAllType();
    },
    methods: {
        checka(item){
            if(this.json[item.id]){
                delete this.json[item.id]
            }else{
                this.json[item.id] = item
            }
            this.$forceUpdate()
            this.$emit("update",this.json)
        },
        check(url){
            window.open(url)
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getSource();
        },
        handleClose(done) {
            done();
        },
        selectAllType() {
            let params = {
                org: this.org && this.org != "" ? this.org : "",
                oid: this.oid && this.oid != "" ? this.oid : "",
            };
            this.ajax
                .get(this.$store.state.api + "selectAllSourceType", params)
                .then((res) => {
                    this.CourseType = res.data;
                    for (var i = 0; i < res.data[0].length; i++) {
                        if (!this.cid) {
                            this.courseTypeId[res.data[0][i].id] = [];
                        }
                        if (!this.CourseTypeJson[res.data[0][i].id]) {
                            this.CourseTypeJson[res.data[0][i].id] = [];
                        }

                        if (res.data[2].length == 0 && res.data[3].length == 0) {
                            for (var j = 0; j < res.data[1].length; j++) {
                                if (res.data[0][i].id == res.data[1][j].pid) {
                                    this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                                }
                            }
                        } else {
                            if (res.data[2].length > 0) {
                                for (var j = 0; j < res.data[2].length; j++) {
                                    if (res.data[0][i].id == res.data[2][j].pid) {
                                        this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                                    }
                                }
                            }
                            if (res.data[3].length > 0) {
                                for (var j = 0; j < res.data[3].length; j++) {
                                    if (res.data[0][i].id == res.data[3][j].pid) {
                                        this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                                    }
                                }
                            }
                        }
                    }
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        getCourse2(typeName, ftypeId, typeid, type) {
            this.page = 1;
            if (typeName == "场景") {
                if (type == 1) {
                    if (this.typeE.indexOf(typeid) != -1) {
                        this.typeE.splice(this.typeE.indexOf(typeid), 1);
                    } else {
                        this.typeE.push(typeid);
                        if (this.typea != "") {
                            this.typea = "";
                        }
                    }
                } else {
                    if (this.typea == typeid) {
                        this.typea = "";
                    } else {
                        this.typea = typeid;
                        if (this.typeE.indexOf(ftypeId) != -1) {
                            this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
                        }
                    }
                }
            } else if (typeName == "类型") {
                if (type == 1) {
                    if (this.typeE.indexOf(typeid) != -1) {
                        this.typeE.splice(this.typeE.indexOf(typeid), 1);
                    } else {
                        this.typeE.push(typeid);
                        if (this.typeb != "") {
                            this.typeb = "";
                        }
                    }
                } else {
                    if (this.typeb == typeid) {
                        this.typeb = "";
                    } else {
                        this.typeb = typeid;
                        if (this.typeE.indexOf(ftypeId) != -1) {
                            this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
                        }
                    }
                }
            }
            this.getSource();
        },
        getSource() {
            this.loading = true
            let params = {
                uid: this.userid,
                oid: this.oid,
                org: this.org,
                typea: this.typea != undefined ? this.typea : "",
                typeb: this.typeb != undefined ? this.typeb : "",
                typeE: this.typeE.join(","),
                cn: this.sourceName,
                page: this.page,
                pageSize: this.pageSize,
            };
            this.ajax
                .get(this.$store.state.api + "selectSource", params)
                .then((res) => {
                    this.loading = false
                    this.res = res.data[0];
                    this.total = res.data[0].length ? res.data[0][0].num : 0;
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        addSource() {
            this.courseTypeId2 = []
            this.s_title = ""
            this.s_url = ""
            this.s_detail = ""
            this.s_label = []
            this.dialogVisible = true
        },
        add() {
            if (this.s_title == '') {
                this.$message.error('请填写工具名称')
                return
            }
            if (this.s_url == '') {
                this.$message.error('请填写网址来源')
                return
            }
            if (this.s_detail == '') {
                this.$message.error('请填写工具描述')
                return
            }
            let params = [{
                name: this.s_title,
                url: this.s_url,
                detail: this.s_detail,
                label: this.s_label.join(","),
                userid: this.userid,
                courseType: JSON.stringify(this.courseTypeId2)
            }]
            this.ajax
                .post(this.$store.state.api + "addSource", params)
                .then((res) => {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.dialogVisible = false
                    this.getSource();
                })
                .catch((err) => {
                    this.$message.error("网络不佳");
                    console.error(err);
                });
        }
    },
    created() {
        this.getSource();
    },
};
</script>
  
<style scoped>
.pb_head {
    display: flex;
    justify-content: space-between;
}

.student_head {
    margin-bottom: 20px;
}

.student_page {
    margin-top: 10px;
}

.pb_head {
    margin: 0 !important;
    width: 100% !important;
}

.bgColor {
    background: #466b99;
}

.reBox {
    background: #fff;
    margin: 0 auto;
    padding: 10px 5px;
    box-sizing: border-box;
}

.reTop {
    padding: 0 0 5px;
    /* padding: 20px 0 0 0; */
    /* border-bottom: 1px solid #eee; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.reTop>div:nth-child(1) {
    font-weight: bold;
    /* width: 40px; */
    /* border-bottom: 1px solid #205cc6; */
    /* padding-bottom: 20px; */
    color: #205cc6;
    /* font-size: 20px; */
}

.reTop>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #ccced3;
    width: 300px;
    border-radius: 8px;
    padding: 5px 0;
    /* margin-bottom: 10px; */
    background: #fafafa;
}

.search {
    width: 20px;
    padding: 0 5px;
}

.search>img {
    width: 100%;
    height: 100%;
}

.sInput {
    border: none;
    width: 85%;
    background: #fafafa;
}

.sInput:focus-visible {
    outline: none;
}

.typeCss {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.choose {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 10px 0;
}

.all_choose {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin: 2px 0;
    width: 100%;
}

.all_choose>span {
    min-width: 80px;
    display: block;
    letter-spacing: 14px;
}

.all_choose>span:nth-child(1) {
    font-weight: bold;
}


.cName {
    cursor: pointer;
    margin: 0 10px 5px 0;
    color: #b9b6b9;
    min-width: 80px;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isCType {
    color: #6282c2;
}

.dialog_diy>>>.el-dialog {
    height: 100% !important;
    margin: 0 auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #3c3c3c !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 125px);
    box-sizing: border-box;
}


.both {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    margin: 15px 0;
}

.all_choose2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.all_choose2>span {
    min-width: 100px;
    display: block;
    letter-spacing: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.all_choose2>span:nth-child(1) {
    font-weight: bold;
}

.all_choose2>>>.el-checkbox-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-top: 3px;
}

.all_choose2>.el-checkbox-group>>>.el-checkbox {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.all_choose2>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
    min-width: 80px;
    overflow: hidden;
    width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.all_choose2>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
    width: auto;
}

.choose2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-evenly;
    align-items: flex-start;
}

.add-box {
    height: 100%;
    overflow: auto;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
}

.span-box {
    display: flex;
    margin-bottom: 20px;
}

.span-box>span {
    font-weight: bold;
    min-width: 100px;
}

.span-box>.input {
    width: 100%;
}

.type-box {
    width: 100%;
}

.student_table {
    display: flex;
    flex-wrap: wrap;
}

.source-box {
    width: calc(100% / 4 - 15px);
    background: #fff;
    overflow: hidden;
    margin: 0 20px 20px 0;
    position: relative;
}
.source-box:nth-child(4n){
    margin-right: 0;
}
.checkImg{
    position: absolute;
    top: 10px;
    z-index: 10;
    right: 10px;
    cursor: pointer;
}
.source-box .iamge {
    width: 208px;
    height: 180px;
    margin: 0 auto;
}

.source-box .iamge>img {
    width: 100%;
    height: 100%;
}

.source-box .title {
    width: 90%;
    font-size: 18px;
    text-align: center;
    margin: 5px auto;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height:24px;
}

.source-box .detail {
    text-align: center;
    width: 90%;
    margin: 5px auto;
    color: #acacac;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 42px;
}

.source-box .label {
    width: 90%;
    margin: 10px auto 5px;
    display: flex;
    flex-wrap: wrap;
}

.source-box .label>span {
    padding: 5px 10px;
    background: rgb(98, 180, 238);
    color: #fff;
    border-radius: 5px;
    margin: 0 0 5px 5px;
}

.source-box .button {
    width: 100%;
    text-align: center;
    display: flex;
    height: 40px;
    background: rgb(244, 244, 244);
}

.source-box .button>span {
    width: 100%;
    cursor: pointer;
    height: 100%;
    line-height: 40px;
}</style>