pbl-teacher-table/src/components/pages/testPerson/info/infoDialog/index.vue

<template>
    <el-dialog title="编辑个人信息" :visible.sync="dialogVisibleInfo" :append-to-body="true" width="500px"
        :before-close="handleClose" class="dialog_diy">
        <div style="width:100%;height: 100%;">
            <div class="info_box">
                <div class="img" v-loading="imgLoading">
                    <img :src="info.headportrait ? info.headportrait : avator" alt="">
                    <div class="mask" @click.stop="addImg($event)">
                        <img src="../../../../../assets/icon/test/camera_icon.png" alt="">
                        <input type="file" accept="image/*" capture="camera" style="display: none"
                            @change="beforeUpload($event)" />
                    </div>
                </div>
                <div class="info_span">
                    <span>姓名：</span>
                    <div>
                        <el-input v-model="info.username" placeholder="请输入姓名"></el-input>
                    </div>
                </div>
                <div class="info_span">
                    <span>教研室：</span>
                    <div>
                        <el-select multiple collapse-tags v-model="info.teacherOffice" placeholder="请选择教研室"
                            @change="Ochange" style="width: 100%;">
                            <el-option v-for="(item, index) in classJuri" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </div>
                </div>
                <div v-if="!oidArray.includes(oid)" class="info_span">
                    <span>学科：</span>
                    <div>
                        <el-input v-model="info.subject" placeholder="请输入学科"></el-input>
                    </div>
                </div>
                <div v-if="!oidArray.includes(oid)" class="info_span">
                    <span>职务：</span>
                    <div>
                        <el-input v-model="info.job" placeholder="请输入职务"></el-input>
                    </div>
                </div>
                <div class="info_span">
                    <span>简介：</span>
                    <div>
                        <!-- <el-input v-model="info.intro" placeholder="想说点什么..."></el-input> -->
                        <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="info.intro"
                            placeholder="想说点什么..."></textarea>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirm()">确 认</el-button>
            <el-button @click="close()">关 闭</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
import avator from '../../../../../assets/icon/test/teacher.jpg'
export default {
    props: {
        dialogVisibleInfo: {
            type: Boolean,
            default: false
        },
        userid: {
            type: String
        },
        oid: {
            type: String
        }
    },
    watch: {
        dialogVisibleInfo(newVal) {
            if (newVal) {
                this.getClass2();

            }
        }
    },
    directives: {
        autoHeight: {
            update(el, binding) {
                const { value } = binding
                if (value && typeof value === 'number') {
                    el.style.height = `${value}px`
                } else {
                    el.style.height = 'auto'
                }
            },
            componentUpdated(el) {
                el.style.height = `${el.scrollHeight + 5}px`
            },
        },
    },
    data() {
        return {
            avator: avator,
            info: {},
            imgLoading: false,
            classJuri: [],
            oidArray: ["d67940a5-510c-40ea-9c9a-2631ab03013a"]
        };
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
        close() {
            this.$emit("update:dialogVisibleInfo", false);
        },
        confirm() {
            if (!this.info.username) {
                this.$message.error("姓名不能为空！");
                return
            }
            let params = [{
                userid: this.userid,
                username: this.info.username,
                cclassid: this.info.teacherOffice.join(","),
                job: this.info.job,
                subject: this.info.subject,
                intro: this.info.intro,
                h: this.info.headportrait ? this.info.headportrait : '',
            }]
            this.ajax
                .post(this.$store.state.api + "updateUserInfoText", params)
                .then((res) => {
                    this.$message.success('修改成功')
                    this.$emit("update:dialogVisibleInfo", false);
                })
                .catch((err) => {
                    this.$message.error("网络不佳");
                    console.error(err);
                });
        },
        getData() {
            let params = {
                uid: this.userid,
            };
            this.ajax
                .get(this.$store.state.api + "selectTestUser", params)
                .then((res) => {
                    this.info = res.data[0][0]
                    this.info.teacherOffice = []
                    let array = []
                    for(var i = 0; i < this.classJuri.length; i++){
                        array.push(this.classJuri[i].id)
                    }
                    this.info.teacherOffice = this.arrayToArray(this.info.cclassid.split(','), array)
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        arrayToArray(arrayo, arrayt) {
            let array1 = arrayo;
            let array2 = arrayt;

            let commonElements = [];

            for (let i = 0; i < array1.length; i++) {
                for (let j = 0; j < array2.length; j++) {
                if (array1[i] === array2[j]) {
                    commonElements.push(array1[i]);
                }
                }
            }
            return commonElements;
        },
        addImg(e) {
            var el = e.currentTarget;
            el.getElementsByTagName("input")[0].click();
            e.target.value = "";
        },
        beforeUpload(event, type) {
            // const loading = this.openLoading();
            var file = event.target.files[0];
            var credentials = {
                accessKeyId: "AKIATLPEDU37QV5CHLMH",
                secretAccessKey: "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",
            }; //秘钥形式的登录上传
            window.AWS.config.update(credentials);
            window.AWS.config.region = "cn-northwest-1"; //设置区域

            var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
            var imgA = [
                "png",
                "jpg",
                "jpeg",
                "bmp",
                "gif",
                "webp",
                "psd",
                "svg",
                "tiff",
            ];
            if (imgA.indexOf(file.name.split(".")[file.name.split(".").length - 1]) == -1) {
                this.$message.error("图片格式错误")
                return;
            }
            this.imgLoading = true
            var _this = this;

            if (file) {
                var params = {
                    Key:
                        file.name.split(".")[0] +
                        new Date().getTime() +
                        "." +
                        file.name.split(".")[file.name.split(".").length - 1],
                    ContentType: file.type,
                    Body: file,
                    "Access-Control-Allow-Credentials": "*",
                    ACL: "public-read",
                }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
                var options = {
                    partSize: 2048 * 1024 * 1024,
                    queueSize: 2,
                    leavePartsOnError: true,
                };
                bucket
                    .upload(params, options)
                    .on("httpUploadProgress", function (evt) {
                        //这里可以写进度条
                        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
                    })
                    .send(function (err, data) {
                        _this.imgLoading = false
                        // loading.close();
                        if (err) {
                            _this.$message.error("上传失败");
                        } else {

                            _this.info.headportrait = data.Location
                            _this.$forceUpdate();

                            console.log(_this.checkJson);
                            console.log(data.Location);
                        }
                    });
            }
        },
        //获取教研室列表
        getClass2() {
            let params = {
                oid: this.oid,
            };
            this.ajax
                .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
                .then((res) => {
                    this.classJuri = res.data[0];
                    this.getData();
                })
                .catch((err) => {
                    this.isLoading = false;
                    console.error(err);
                });
        },
        Ochange() {
            this.$forceUpdate()
        }
    }
};
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
    /* height: 100%; */
    margin: 10vh auto !important;
}

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

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

.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;
}


.info_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
}

.info_box>.img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
}

.info_box>.img:hover>.mask {
    display: flex;
}

.info_box>.img>.mask {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* display: flex; */
    align-items: center;
    justify-content: center;
    display: none;
}

.info_box>.img>.mask>img {
    width: 20px;
}

.info_box>.img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    resize: none;
    font-family: 'Microsoft YaHei';
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1px solid #C0C4CC;
}

.binfo_textarea {
    border: 1px solid #C0C4CC;
    font-size: 16px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: 'Microsoft YaHei';
    font-size: 14px;
    color: #606266;
}

.binfo_input:focus-visible {
    border: 1px solid #3681FC !important;
}

.binfo_textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: rgb(192, 196, 204);
}

.binfo_textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgb(192, 196, 204);
}

.binfo_textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgb(192, 196, 204);
}

.binfo_textarea:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: rgb(192, 196, 204);
}

.info_span {
    display: flex;
    margin-top: 10px;
}

.info_span>span:nth-child(1) {
    margin-top: 10px;
    width: 100px;
    text-align: right;
}

.info_span>div {
    width: 250px;
}
</style>