1. Die Kombination von include() und indexOf() löst das Löschproblem.
Da einige unserer Listen signMark-Werte haben und andere nicht,
Ich verwende die Map-Methode, um bestimmte Werte des entsprechenden Arrays zurückzugeben und einige neue Arrays zurückzugeben. Wenn [undefiniert] nicht zurückgegeben wird, beträgt unsere Länge zu diesem Zeitpunkt 1, sodass wir arr.indexOf (undefiniert) verwenden können, um anzugeben, ob Es gibt diesen Wert. Verwenden Sie include(), um festzustellen, ob das Array bestimmte Werte enthält. Verwenden Sie zur Beurteilung die Methode map(), include() und indexOf().
Tatsächlich kann auch Includes() anstelle von IndexOf() verwendet werden, und auch Includes(undefiniert) kann verwendet werden. IndexOf(undefiniert)>=0 bedeutet dasselbe.
2. 解决内容过长 提示语显示不全的问题 2023/11/30
dev-bugfix
全局src/style/index.scss.el-tooltip__popper { maximale Breite: 300 Pixel; } Schalten Sie dies auf oder brechen Sie es ab
3. Es gibt eine Situation, in der beim Einreichen einer Geschäftsbewertung festgestellt wird, dass ein Problem vorliegt, die Konsole einen Fehler meldet und der Vorgang nicht fortgesetzt werden kann.
Nachdem ich mir die Konsole angesehen hatte, war der Grund für das Erscheinen, dass das Feld fileUrl nicht abgerufen werden konnte. Da das Backend eine Entscheidung getroffen hat und eine Eingabeaufforderung angezeigt wurde, habe ich gesucht und festgestellt, dass es in der Unterkomponente eine ClearFile-Methode gibt, die initialisiert wird Der Wert von fileUrl. null, aber wenn wir die übergeordnete Komponente beurteilen, beurteilen wir anhand der leeren Zeichenfolge, sodass dieses Problem auftritt.
Weisen Sie also einfach den Wert von fileUrl '' zu.
4. Problem mit der Anzeige des Unterticketintervalls
if(rowData.billRange&&rowData.billRange.indexOf(",") != -1) { label = rowData.billRange.replace(/\,/g, "-")}
5. Mixin-Fall 1 Um einige relevante Informationen zu erhalten
import Api from '@api/modules/busiCenter'
export default {
data() {
return {
boundUKeyType: '工商',
boundUKeyList: [],
boundAllUKeyList: [],
usbKeyForms: {
ukeyIssuingAuthority: 6,
SerialNumber: '',
SubjectCN: '',
IssuerDN: ''
},
endorsedRecordStatus: [
{ code: 6, label: 'CFCA' }
]
}
},
mounted() {
this.getUkeyInfo()
},
methods: {
bussinessDia(boundRecord) {
if (boundRecord.remitterBankName && boundRecord.remitterBankName.indexOf('中信') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.remitterBankName && boundRecord.remitterBankName.indexOf('上海浦东') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('CNCB') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('SPD') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('ICBC') >= 0) {
this.boundUKeyType = '工商'
// } else if (boundRecord.acceptorBankName && boundRecord.acceptorBankName.indexOf('中信') >= 0) {
// this.boundUKeyType = 'cfca'
// } else if (boundRecord.acceptorBankName && boundRecord.acceptorBankName.indexOf('上海浦东') >= 0) {
// this.boundUKeyType = 'cfca'
} else {
this.boundUKeyType = '工商'
}
const boundUKeyList = []
for (var i = 0; i < this.boundAllUKeyList.length; i++) {
if (this.boundUKeyType == '工商' && this.boundAllUKeyList[i].ukeyIssuingAuthority == 1) {
boundUKeyList.push(this.boundAllUKeyList[i])
}
if (this.boundUKeyType == 'cfca' && this.boundAllUKeyList[i].ukeyIssuingAuthority != 1) {
if (this.boundAllUKeyList[i].serialNo) {
boundUKeyList.push(this.boundAllUKeyList[i])
}
}
}
this.boundUKeyList = boundUKeyList
// this.getUkeyInfo();
this.boundUKeyDialog = true
},
getUkeyInfo() {
Api.getUkeyInfo().then((resp) => {
if (resp.code == 200) {
const respdata = resp.data
this.boundAllUKeyList = respdata
}
})
},
closeBoundUkey() {
this.boundUKeyDialog = false
this.doInit()
},
confirmBoundUkey() {
if (this.boundUKeyType == 'cfca') {
this.usbKeyDialog = true
if (this.$refs.usbKeyForm) {
this.$refs.usbKeyForm.clearform()
}
} else {
this.usbKeyVarity()
}
}
}
}
6. Mixin Case 2 Bestimmen Sie, ob das Schild gültig ist
import Api from '@api/modules/busiCenter'
export default{
data(){
return {
usbKeyDialog:false,
boundUKeyDialog: false,
dialogHTMLVisible: false
}
},
methods:{
dialogHTMLShow(){
this.dialogHTMLVisible = true;
},
closeNotHasUkey(){
this.dialogHTMLVisible = false;
},
usbKeyVarity(val){
this.usbKeyDialog = false
this.boundUKeyDialog = false
// console.log(val);
this.register()
},
async addUsbkey() {
const varity={
serialNo:this.usbKeyForms.SerialNumber, //序列号
issuerDn:this.usbKeyForms.IssuerDN //颁发者DN
}
const resp = await Api.getUkeyVerify(varity)
if(resp.code==200){
const respdata=resp.data
if(respdata.status=='0'){
if(this.usbKeyForms.CSPName.indexOf('Ucan')>-1){
const billData = this.multipleSelections[0];
let source = '<?xml version="1.0" encoding="utf-8"?><T><D><M>'+
'<k>人名称</k><v>'+ billData.remitterName+
'</v></M><M><k>账号</k><v>'+ billData.remitterAcctNo+
'</v></M><M><k>金额</k><v>'+ billData.billAmount+
'</v></M><M><k>姓名</k><v>'+ billData.payeeName+
'</v></M></D></T>'
this.$refs.usbKeyForm.SignOnClick512(source);
}else{
this.usbKeyVarity();
}
}else if(respdata.status=='1'){
this.$message.error('已过期，请使用其他')
}else if(respdata.status=='2'){
this.$message.error('已吊销，请使用其他')
}else if(respdata.status=='3'){
this.$message.error('匹配失败，请使用其他')
}
// this.usbKeyDialog = false
}
},
usbKeyFormFn(val){
this.usbKeyForms=JSON.parse(JSON.stringify(val))
// this.usbKeyForms.ukeyIssuingAuthority=6
},
}
}
7. Melden Sie sich ab und leeren Sie den Cache des Vuex-Protokolls
methods: {
...mapActions({
clearUserInfo: 'clearUserInfo'
clearTreaty: 'clearTreaty'
}),
this.clearTreaty()
}
export default {
state: {
user: sessionStorage.getItem('user') && JSON.parse(sessionStorage.getItem('user')) || {},
signStatus: sessionStorage.getItem('signStatus'),
signXpStatus: sessionStorage.getItem('signXpStatus'),
signZcStatus: sessionStorage.getItem('signZcStatus')
},
mutations: {
saveUser(state, user) {
state.user = user
sessionStorage.setItem('user', JSON.stringify(user))
sessionStorage.setItem('authorization', user.token)
},
signStatus(state, status) {
state.signStatus = status
sessionStorage.setItem('signStatus', status)
},
signXpStatus(state, status) {
state.signXpStatus = status
sessionStorage.setItem('signXpStatus', status)
},
signZcStatus(state, status) {
state.signZcStatus = status
sessionStorage.setItem('signZcStatus', status)
},
clearXy(state) {
state.signStatus = ''
state.signXpStatus = ''
state.signZcStatus = ''
}
},
actions: {
clearUserInfo(context) {
context.commit('saveUser', {})
},
clearTreaty(context) {
context.commit('clearXy')
},
saveSignStatus(context, signStatus) {
context.commit('signStatus', signStatus)
},
saveXpStatus(context, signStatus) {
context.commit('signXpStatus', signStatus)
},
saveZcStatus(context, signStatus) {
context.commit('signZcStatus', signStatus)
}
},
getters: {
getUser(state) {
return state.user
}
}
}
8. Verwenden Sie Mixins global
Wir legen oft viele Mixins im src-Ordner ab, also denken Sie bitte darüber nach. Wenn eine einzelne Komponente einzeln referenziert wird, können wir das tun. Was ist, wenn sie global ist?
Schritt eins: main.js
import commonMixin from './mixin/commonMixin'
Vue.mixin(commonMixin)Schritt 2: Erstellen Sie diese js-Datei im Mixin
export default {
methods: {
showChangeIngAlert() {
console.log('走这里吗？')
const enterpriseInfo = JSON.parse(sessionStorage.getItem('enterpriseInfo')) || {companyDto: {}}
const { updateStage } = enterpriseInfo.companyDto
// updateStage 0---无事发生 1---提交待审核 2---审核通过（名称修改了） 3---信息认证 4---认证完成 5---审核不通过
if(updateStage == '1') {
this.$alert('变更审核中，暂时不能做该业务', '提示', {
confirmButtonText: '确定',
type: 'warning',
center: true
})
return true
}
return false
}
}
}
Schritt 3: Verwenden Sie es direkt in der Datei
// 提交复核
applyClick() {
if(this.showChangeIngAlert()) { return }
if (this.multipleSelections.length > 1) {
this.$message.error('只能选择一条数据')
} else if (this.multipleSelections.length > 0) {
this.$emit('applyClick', this.multipleSelections)
} else {
this.$message.error('请至少选择一条数据')
}
},9. Gehen Sie durch die Übermittlung weiter im Kreis, um die TradeInfoId zu erhalten und ein Urteil abzugeben.
Das Problem besteht darin, dass eine Schaltfläche zum Senden des Geschäfts angezeigt wird. Dieses Problem tritt auf, weil die Konsole einen Fehler meldet und nicht fortfahren kann.
tradeInfoId，因为不存在这个键，怎么会不报错呢？
tradeInfoId: getMybjObj.tradeInfoDto.tradeInfoId || ''Schauen Sie sich diese Codezeile an. Wenn kein Wert vorhanden ist, tritt ein Fehler auf.
Lass es uns ändern
let tradeInfoId = ''
if (getMybjObj.tradeInfoDto && getMybjObj.tradeInfoDto.tradeInfoId) {
tradeInfoId = getMybjObj.tradeInfoDto.tradeInfoId
} else {
tradeInfoId = ''
}
tradeInfoId: tradeInfoId10. Die Anzeige kann lokal umgekehrt werden, online treten jedoch Probleme auf. Die Probleme sind wie folgt:
TypeError: Eigenschaften von undefiniert können nicht gelesen werden (es wird „replace“ gelesen)
Klicken Sie dann auf die erste Datei, um auf diese Codezeile zu verweisen
query.billRange==0?"0-0":query.billRange.replace(/\,/g,'-')Lass uns darüber nachdenken
Wenn es keine query.billRange gibt, wird die Ersetzungsmethode definitiv nicht verwendet. Dann denken wir darüber nach. Sie kann lokal, aber nicht online verwendet werden. Was ist der Unterschied zwischen lokal und online? Das ist das Problem bei asynchronen Aufgaben. Manchmal treten Probleme auf, wenn sie schnell ausgeführt werden, daher wird this.$nextTick angezeigt. Wenn wir also den Wert erhalten, weisen wir direkt andere Werte zu und verwenden dann den neuen Wert, um dieses Problem zu lösen . Frage. Code wie folgt anzeigen:
if (this.query.billRange) {
this.billRange = this.query.billRange
} else {
this.billRange = ''
}
billRange==0?"0-0":billRange.replace(/\,/g,'-')11. Laden Sie die Anpassung der Anzeigegröße des Firmenlogos hoch
<div class="navbar-left-font" :class="{'logoPathDiv': logoPath}">
.navbar-left-font.logoPathDiv {
width: 180px;
height: 50px;
img{
width: 180px;
height: 50px;
}
}
12. Das Stilproblem von el-date-picker unter Ie (der äußere Rand ist intermittierend)
.el-date-editor .el-range-input{
Höhe: 98 % !wichtig;
}
Weil die Höhe der Box zu hoch ist, um sie abzudecken
13. Einige deaktivierte Effekte werden online angezeigt und sind ungültig.
Übergeben Sie den Wert durch die übergeordnete Komponente, um zu bestimmen, ob true angegeben ist. Wir haben jedoch festgestellt, dass das Problem besteht, dass true gelegentlich nicht vorhanden ist. Der Wert wird berechnet. Die Lösung besteht darin, true direkt anzugeben, ohne den Wert zu übergeben, da es sich um diese Komponente handelt ist zum einmaligen Gebrauch bestimmt, beeinträchtigt nicht,
Darüber sollten wir darüber nachdenken. Unter normalen Umständen gibt es kein Problem, wenn wir den Wert übergeben. Wenn es ein Problem mit dem allgemeinen Wert gibt, ist es in Ordnung, this.$nextTick zu verwenden. Der Kern des Problems besteht darin der entsprechende Wert wird nicht ermittelt.
14. Auf der Werkbank liegt ein Problem vor.
Als das Problem auftrat, stellten wir fest, dass unsere Konsole einen Fehler meldete, was wahrscheinlich bedeutete, dass eine getInfo-Methode nicht gefunden werden konnte. Dann suchten wir nach dem relevanten Code und stellten fest, dass diese Methode aufgerufen wurde, die Methode jedoch auskommentiert war. Später Durch die Kommunikation wurde es nicht mehr benötigt. Daher muss auch der Aufrufcode entfernt werden.
Hat keinen Einfluss auf nachfolgende Anrufe.
15. Was soll ich tun, wenn die Wirkung der Bildlaufleiste nicht zufriedenstellend ist?
function smoothScroll(targetPosition) {
const startPosition = window.pageYOffset
const distance = targetPosition - startPosition
const duration = 1000 // 滚动时间
let start = null
function step(timestamp) {
if (!start) start = timestamp
const progress = timestamp - start
const scrollY = progress / duration * distance + startPosition
window.scrollTo(0, scrollY)
if (progress < duration) {
window.requestAnimationFrame(step)
}
}
window.requestAnimationFrame(step)
},
// 在滚动事件中调用smoothScroll函数，传入目标位置
window.addEventListener('wheel', (e) => {
e.preventDefault()
const targetPosition = window.pageYOffset + e.deltaY * 800
console.log('获取的数据是', targetPosition)
this.smoothScroll(targetPosition)
})Verwenden Sie die obige Methode mit Vorsicht, da es Standardereignisse für das Scrollen mit der Maus gibt. Wir müssen jedoch wissen, dass sie ausgeführt werden kann. Einer der beiden darin enthaltenen Parameter ist die Verzögerungszeit und der Ort, an den gescrollt werden soll.
16. Titeländerungen an Webseiten (Vue-Projekt)
Im Projekt gibt es zwei Funktionsmenüs mit gemeinsamen Komponenten. Beim Einrichten eines einzelnen Seitenroutings ist der Titel derselbe, was zu demselben angezeigten Inhalt führt. Anschließend überprüfen wir den entsprechenden Code im hinteren Teil.
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
NProgress.configure({ showSpinner: false })
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'hash',
routes
})
router.afterEach((to) => {
if (to.meta.title) {
document.title = '平台-' + to.meta.title
}
NProgress.done()
})
router.beforeEach((to, from, next) => {
NProgress.start()
})
export default routerDie Nachhut ist eingestellt.
Wir haben zwei Lösungen gegeben
1. Schreiben Sie eine neue Route und benennen Sie sie um. Der Name und der Titel sind unterschiedlich, aber die referenzierten Komponenten sind dieselben.
2. Treffen Sie Urteile und Änderungen im Post Guard. Der Code lautet wie folgt.
if (to.name == 'billAuditExaminApprove') {
const urls = decodeURIComponent(to.fullPath.split('?')[1].split('=')[1])
if (JSON.parse(urls).billBeh === 'BB03') {
document.title = '平台-' + '贴现业务审核-审批'
} else {
document.title = '平台-' + to.meta.title
}
} else {
document.title = '平台-' + to.meta.title
}Verlängerung
decodeURIComponent()
Die Funktion decodeURIComponent() dekodiert einen URI, der von der Funktion encodeURIComponent() codiert wurde.
17. Der native CSS-Stil der Tabelle erlaubt keine Anpassung des Inhalts an die Breite
table{
table-layout:fixed;
word-break:break-all;
}18. Wenn der Inhalt von el-description Zahlen enthält, ist er unter IE ungültig.
Der erste Schritt besteht darin, ein div-Tag für den Inhalt festzulegen.
Schritt 2: Geben Sie der Beschriftung einen Attributstil
Zeilenumbruch:alles umbrechen;
19. Eine El-Radio-Eingabeaufforderung erscheint aus unerklärlichen Gründen.
Aus den Zweigen, die ich kannte, stellte ich fest, dass es keinen relevanten Code gab, fragte dann nach den Zweigen der relevanten Funktionsumgebung und stellte fest, dass es sich um den Code eines bestimmten Zweigs handelte, und fand ihn dann. Ich stellte fest, dass ein Kollege hinzugefügt hatte Überprüfungsbedingungen, aber die Überprüfung Die Variablen sind gleich, daher gibt es Ergebnisse mit unterschiedlichen Funktionen, aber denselben Überprüfungs- und Übermittlungsfunktionen.
Die Lösung für den Test besteht darin, die Verifizierung auf die Komponente zu übertragen, deren Verifizierung zu verwenden und sie separat zu verifizieren.