You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
11 KiB
420 lines
11 KiB
<template>
|
|
<div class="edit-address">
|
|
<div class="edit-address-box" v-if="transferAccountsType == 1">
|
|
<div class="edit-address-title-hd">{{ itemList.msgText }}</div>
|
|
<div class="edit-address-edit-box" v-if="networkPickShow">
|
|
<van-field
|
|
readonly
|
|
clickable
|
|
label-class="edit-box-cell"
|
|
name="picker"
|
|
v-model="selectedNetwork"
|
|
label="业务类型"
|
|
placeholder="请选择业务类型"
|
|
right-icon="arrow"
|
|
:disabled="disabled"
|
|
@click.stop="!disabled && (selectedNetworkShow = true)"
|
|
>
|
|
</van-field>
|
|
<div v-if="networkPickShowtishi" style="text-align: right; color: red; font-size: 12rem">
|
|
请选择业务类型
|
|
</div>
|
|
</div>
|
|
|
|
<div class="edit-address-edit-box" v-if="areaListPickShow">
|
|
<van-field
|
|
readonly
|
|
clickable
|
|
label-class="edit-box-cell"
|
|
name="picker"
|
|
v-model="selectedCompany"
|
|
label="所在地区"
|
|
placeholder="点击此处选择分公司/支公司"
|
|
right-icon="arrow"
|
|
:disabled="disabled"
|
|
@click.stop="areaListPickClick"
|
|
>
|
|
</van-field>
|
|
<div v-if="areaListPickShowtishi" style="text-align: right; color: red; font-size: 12rem">
|
|
请选择所在分、支公司
|
|
</div>
|
|
</div>
|
|
|
|
<div class="van-address-edit-btn">
|
|
<van-button
|
|
round
|
|
block
|
|
color="#025cea"
|
|
:disabled="submitDisabled || disabled"
|
|
:loading="submitLoad"
|
|
loading-text="变更中..."
|
|
@click.stop="submitInfo"
|
|
>确 认</van-button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="networkInfo" v-else>
|
|
<template v-if="networkInfo && networkInfo.infos && networkInfo.infos.length > 0">
|
|
<div>
|
|
<div
|
|
class="networkInfo-title displayleft"
|
|
style="margin: 10rem 0; font-size: 16rem; align-items: center"
|
|
>
|
|
<img
|
|
src="../assets/images/company.png"
|
|
style="width: 19rem; height: 17rem; margin-right: 8rem"
|
|
alt=""
|
|
/>
|
|
<div>{{ networkInfo.orgName }}</div>
|
|
</div>
|
|
|
|
<div
|
|
v-for="(items, indexs) in networkInfo.infos"
|
|
:key="indexs"
|
|
:style="{ 'border-top': indexs > 0 ? '1rem dashed #666' : '' }"
|
|
>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 80rem; color: #f58019">账户类型：</div>
|
|
<div style="color: #f58019; flex: 1; font-size: 12rem">
|
|
{{ items.accountType }}
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 80rem">转账银行：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
{{ items.transBank }}
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 80rem">转账时效：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
{{ items.transTime }}
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0" v-if="items.remark">
|
|
<div style="width: 80rem">备<span style="opacity: 0">备注</span>注：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
{{ items.remark }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div style="text-align: left; font-size: 14rem; color: #666">暂无数据</div>
|
|
</template>
|
|
</div>
|
|
|
|
<van-popup
|
|
class="edit-address-popup-box"
|
|
v-model:show="isEditShow"
|
|
teleport="body"
|
|
position="bottom"
|
|
:duration="0.2"
|
|
>
|
|
<van-picker
|
|
show-toolbar
|
|
:columns="columns"
|
|
:columns-field-names="{ text: 'name' }"
|
|
:item-height="40"
|
|
@cancel="onCompanyCancel"
|
|
@confirm="onCompanyConfirm"
|
|
@change="companyChange"
|
|
/>
|
|
</van-popup>
|
|
|
|
<van-popup
|
|
class="edit-address-popup-box"
|
|
v-model:show="selectedNetworkShow"
|
|
teleport="body"
|
|
position="bottom"
|
|
:duration="0.2"
|
|
>
|
|
<van-picker
|
|
show-toolbar
|
|
:columns="selectedNetworkColums"
|
|
:columns-field-names="{ text: 'title' }"
|
|
:item-height="40"
|
|
@cancel="selectedNetworkShow = false"
|
|
@confirm="onNetworkConfirm"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick, onMounted } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useAppStore } from '@/store/app.js'
|
|
import { Post } from '@/utils/https'
|
|
|
|
const props = defineProps({
|
|
disabled: { type: Boolean, default: false },
|
|
itemList: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const store = useAppStore()
|
|
const { userId, sessionId, source, mescrollContent } = storeToRefs(store)
|
|
|
|
// cmd -> 业务类型 id 映射
|
|
const Networkinf = {
|
|
yhzzsx: 0,
|
|
fhzzsx: 2,
|
|
scjzzsx: 3,
|
|
wnzhzzsx: 4,
|
|
tbzzsx: 6,
|
|
dkzzsx: 1,
|
|
lpzzsx: 5,
|
|
}
|
|
|
|
const isEditShow = ref(false)
|
|
const columns = ref([])
|
|
const changeCompany_fen = ref('')
|
|
const company_fen = ref('')
|
|
const company_zhi = ref('')
|
|
const selectedCompany = ref('')
|
|
const submitLoad = ref(false)
|
|
const submitDisabled = ref(false)
|
|
const networkInfo = ref([])
|
|
const selectedNetwork = ref('')
|
|
const businessType = ref('')
|
|
const selectedNetworkShow = ref(false)
|
|
const selectedNetworkColums = ref([])
|
|
const networkPickShow = ref(false)
|
|
const areaListPickShow = ref(true)
|
|
const transferAccountsType = ref(1)
|
|
const networkPickShowtishi = ref(false)
|
|
const areaListPickShowtishi = ref(false)
|
|
|
|
function scrollTopBody() {
|
|
setTimeout(() => {
|
|
// 滚动到底部
|
|
try {
|
|
const el = mescrollContent.value
|
|
if (el) el.scrollTop = el.scrollHeight || 0
|
|
} catch (error) {
|
|
console.log(error.message)
|
|
}
|
|
}, 300)
|
|
}
|
|
|
|
function verification() {
|
|
if (networkPickShow.value && !selectedNetwork.value) {
|
|
networkPickShowtishi.value = true
|
|
return false
|
|
}
|
|
|
|
if (areaListPickShow.value && !selectedCompany.value) {
|
|
areaListPickShowtishi.value = true
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
// 选择业务类型确认
|
|
function onNetworkConfirm({ selectedOptions }) {
|
|
const value = selectedOptions[0] || {}
|
|
selectedNetwork.value = value.title
|
|
businessType.value = value.id
|
|
selectedNetworkShow.value = false
|
|
networkPickShowtishi.value = false
|
|
initPages({ queryType: 1, businessType: businessType.value })
|
|
}
|
|
|
|
// 公司选择确认
|
|
function onCompanyConfirm({ selectedOptions }) {
|
|
const fen = selectedOptions[0] || {}
|
|
const zhi = selectedOptions[1] || {}
|
|
|
|
company_fen.value = fen.name || ''
|
|
company_zhi.value = zhi.name || ''
|
|
selectedCompany.value = `${fen.name || ''}${zhi.name || ''}`
|
|
isEditShow.value = false
|
|
areaListPickShowtishi.value = false
|
|
}
|
|
|
|
// 公司选择取消
|
|
function onCompanyCancel() {
|
|
isEditShow.value = false
|
|
}
|
|
|
|
function companyChange({ columnIndex, selectedOptions }) {
|
|
if (columnIndex !== 0) return
|
|
const fen = selectedOptions[0]
|
|
if (!fen || fen.name === changeCompany_fen.value) return
|
|
changeCompany_fen.value = fen.name
|
|
|
|
const param = { queryType: 2, businessType: 1, branchName: fen.name }
|
|
Post('transTimeQuery/queryOrg', param)
|
|
.then((res) => {
|
|
// vant 4 Picker 没有 setColumnValues 实例方法，直接改响应式 columns 数据刷新子级
|
|
fen.children = (res.data.infos || []).map((element) => ({ name: element }))
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
function submitInfo() {
|
|
if (!verification()) {
|
|
return
|
|
}
|
|
const info = {
|
|
cmd: '$zzsx-da',
|
|
customerServiceName: null,
|
|
evaluation: null,
|
|
fromFlag: 2,
|
|
imgUrl: null,
|
|
intentId: '',
|
|
intents: [],
|
|
msgSource: 1,
|
|
msgText: {
|
|
businessType: businessType.value,
|
|
orgName: company_zhi.value,
|
|
userInfoId: userId.value,
|
|
},
|
|
msgType: '01',
|
|
qaId: props.itemList.qaId,
|
|
reason: null,
|
|
reasonDesc: null,
|
|
reqAndResType: '05',
|
|
seatNum: '洋洋机器人',
|
|
sessionId: sessionId.value,
|
|
source: source.value,
|
|
timestamp: Date.now(),
|
|
userId: 408,
|
|
userName: null,
|
|
voiceData: null,
|
|
voiceUrl: null,
|
|
}
|
|
store.setChatList(info)
|
|
scrollTopBody()
|
|
}
|
|
|
|
function areaListPickClick() {
|
|
if (props.disabled) return
|
|
if (props.itemList.cmd == 'yhzzsx' && selectedNetwork.value == '') {
|
|
networkPickShowtishi.value = true
|
|
return
|
|
}
|
|
isEditShow.value = true
|
|
}
|
|
|
|
function getfenCompany(infoArray) {
|
|
if (!infoArray || !infoArray.length) return
|
|
company_fen.value = infoArray[0].name
|
|
changeCompany_fen.value = infoArray[0].name
|
|
const param = { queryType: 2, businessType: 1, branchName: infoArray[0].name }
|
|
Post('transTimeQuery/queryOrg', param)
|
|
.then((res) => {
|
|
infoArray[0].children = (res.data.infos || []).map((element) => ({ name: element }))
|
|
columns.value = infoArray
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
function initPages(param) {
|
|
if (props.disabled) return
|
|
Post('transTimeQuery/queryOrg', param)
|
|
.then((res) => {
|
|
selectedNetworkColums.value = res.data.business
|
|
const info = (res.data.infos || []).map((element) => ({ name: element }))
|
|
getfenCompany(info)
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
async function initTransferAccounts() {
|
|
submitDisabled.value = props.disabled
|
|
nextTick(() => scrollTopBody())
|
|
|
|
// 银行转账时效处理
|
|
if (props.itemList.cmd == 'yhzzsx') {
|
|
networkPickShow.value = true
|
|
initPages({ queryType: 1, businessType: 0 })
|
|
} else if (props.itemList.cmd == '$zzsx-da') {
|
|
transferAccountsType.value = 0
|
|
try {
|
|
const res = await Post('transTimeQuery/queryInfo', {
|
|
...(props.itemList.msgText || {}),
|
|
qaId: props.itemList.qaId,
|
|
})
|
|
networkInfo.value = res.data
|
|
scrollTopBody()
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
} else {
|
|
networkPickShow.value = false
|
|
businessType.value = Networkinf[props.itemList.cmd]
|
|
initPages({ queryType: 1, businessType: businessType.value })
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
initTransferAccounts()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.displayleft {
|
|
display: flex;
|
|
/* align-items: center; */
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.edit-address-title-hd {
|
|
font-family: NotoSansHans-Regular;
|
|
font-size: 14rem;
|
|
line-height: 21rem;
|
|
font-weight: 700;
|
|
color: #333333;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
padding-bottom: 15rem;
|
|
}
|
|
|
|
.edit-address-edit-box .van-cell {
|
|
padding: 10rem 0;
|
|
}
|
|
|
|
.edit-address-edit-box .van-cell:not(:last-child)::after {
|
|
left: 0;
|
|
}
|
|
|
|
.edit-address-edit-box :deep(.van-field__label.edit-box-cell) {
|
|
width: 75rem;
|
|
}
|
|
|
|
.code-btn.code-btn-disabled {
|
|
color: #fff !important;
|
|
opacity: 1;
|
|
border: 0;
|
|
background-color: rgba(1, 193, 96, 0.5);
|
|
}
|
|
|
|
.edit-box-checkbox-item {
|
|
padding: 20rem 0 0 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.edit-box-checkbox-item :deep(.van-checkbox__label) {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.edit-address-popup-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.edit-address-box .van-address-edit-btn {
|
|
padding: 30rem 0 10rem 0;
|
|
}
|
|
</style>
|
|
|