工作中的小记录

1、在element的el-dialog中上传附件后在另一个el-form-item下的input输入框中获取该附件名 使用v-model无法双向绑定。使用this.$set

 this.$set(this.formData,"属性名","属性值")

2、后端传来文件地址，点击直接下载

 getCaseId(this.$route.query.id).then((res) => {
                    if (res.code === 200) {
                        // console.log(111);
                        let xhr = new XMLHttpRequest();
                        xhr.open('get', res.data.accidentFile, true); // 第二个参数是网络路径
                        if (this.fileType === '0') {
                            xhr.setRequestHeader('Content-Type', `application/.pdf`)
                        }
                        if (this.fileType === '1') {
                            xhr.setRequestHeader('Content-Type', 'application/msword'); // 修改 Content-Type
                        }
                        if (this.fileType === '2') {
                            xhr.setRequestHeader('Content-Type', 'image/jpeg'); // 修改 Content-Type
                        }
                        xhr.responseType = 'blob';
                        const self = this;
                        xhr.onload = function () {
                            if (this.status === 200) {
                                // 接受二进制文件流
                                const blob = this.response;
                                let downloadElement = document.createElement('a');
                                let href = blob;
                                if (typeof blob == 'string') {
                                    downloadElement.target = '_blank';
                                } else {
                                    href = window.URL.createObjectURL(blob); // 创建下载的链接
                                }
                                downloadElement.href = href;
                                if (self.fileType === '0') {
                                    downloadElement.download = self.fileName + '.pdf' //下载后文件名
                                }
                                if (self.fileType === '1') {
                                    downloadElement.download = self.fileName + '.doc'; // 修改文件名扩展名为 .doc
                                }
                                if (self.fileType === '2') {
                                    downloadElement.download = self.fileName + '.jpg'; // 修改文件名扩展名为图片格式的扩展名
                                }
                                document.body.appendChild(downloadElement);
                                downloadElement.click(); // 点击下载
                                document.body.removeChild(downloadElement); // 下载完成移除元素
                                if (typeof blob != 'string') {
                                    window.URL.revokeObjectURL(href); // 释放掉 blob 对象
                                }
                            }
                        };
                        xhr.send();
                        this.dialogVisible = false;
                        this.$message.success({
                            title: '成功',
                            message: '下载成功',
                        });
                    }
                    if (res.code === 400) {
                        this.dialogVisible = false
                        this.$message.error(res.message);
                    }
                })

3、不需要把所有的字段都传到后端时，并且搜索返回结果高亮显示

//封装的代码
  getSearchList(data) {
            const requestData = {};
            // 遍历 search 对象的属性
            for (const key in data) {
                // 只有在属性值非空的情况下添加到请求参数中
                if (data[key] !== '') {
                    requestData[key] = data[key];
                }
            }
            getListPopular(requestData).then(res => {
                if (res.code === 200) {
                    // console.log(res.data)
                    res.data.records.forEach(item => {
                        const {grade} = item;
                        item.grade = grade === this.lvList[grade + 1].id ? this.lvList[grade + 1].name : grade;
                    });
                    if (this.keyName !== "") {
                        res.data.records.map(item => {
                            // 使用正则表达式创建一个全局匹配的正则，不区分大小写
                            const regex = new RegExp(this.keyName, "gi");
                            // 替换匹配到的关键字并加上高亮样式
                            item.accidentName = item.accidentName.replace(regex, match => `${match}`);
                        });
                    }
                    // console.log(this.searchList)
                    this.searchList = res.data

                }
            })
        },