lanan-app/pages/rescue/initiateSurvey.vue

1382 lines
34 KiB
Vue
Raw Normal View History

2025-09-24 10:20:09 +08:00
<!-- 发起订单 -->
<template>
<view class="content">
<VNavigationBarVue :title="title"></VNavigationBarVue>
<view class="dil">
<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址</view>
<!-- 发起救援 头部-->
<view class="top">
<view style="flex: 1;width: 0;">
<!-- -->
<view class="top-box">
<view class="tb-left">
<image class="uicon" src="@/static/icons/initiate/start.png" mode="aspectFit"></image>
<view @click="getmap()" style="width: 100%;">
<view class="text1" v-show="four == ''">请选择救援地址</view>
<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
<view class="hong1" v-show="four == ''">*必填请填写详细地址</view>
<view class="hong2" v-show="four != ''">
<input type="text" style="width: 100%;" :placeholder="four">
</view>
</view>
</view>
</view>
</view>
<image class="start-end" src="@/static/icons/initiate/qiehuan.png" mode="aspectFit">
</image>
</view>
<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址备注</view>
<view class="jyxx">
<view class="jyxx-tinput">
<view class="text1">救援地址备注</view>
<view class="you">
<textarea auto-height v-model="remarkRescuePosition" placeholder="请输入救援地址备注"
placeholder-style="color: #929292;font-size:24rpx"
style="width:100%;min-height:100rpx;"></textarea>
</view>
</view>
</view>
<view style="color: #000;font-size: 34rpx;font-weight: bold;padding: 24rpx 0;">救援信息</view>
<!-- 填空 -->
<view class="jyxx">
<view class="jyxx-tinput">
<view class="text1">故障车经办人<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入故障车经办人"
v-model="connectionName">
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">经办人手机号<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入经办人手机号"
v-model="connectionPhone">
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">车牌号<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车牌号"
v-model="licenseNum">
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">车型(品牌)<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车型"
v-model="carBrand">
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">车辆类型<text style="color: #7e7e7e;">(选填)</text></view>
<view class="xz">
<view :class="{'xlan':carzhi == index}" class="kuang" v-for="(item,index) in car" :key="index"
@click="getzhi(index,item.value)">
<view class="">{{item.label}}</view>
</view>
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">故障类型选择<text style="color: #7e7e7e;">(选填)</text></view>
<view class="channel-container">
<view :class="{'channel-item-selected': selectedFaultTypeId === item.id}" class="channel-item"
v-for="(item,index) in faultTypeOptions" :key="index" @click="chooseFaultType(item)">
<view class="channel-text">{{item.name}}</view>
</view>
</view>
</view>
<view class="xinput-fault" v-if="selectedFaultTypeId">
<view class="text1">故障现象选择<text style="color: #7e7e7e;">(选填)</text></view>
<view class="source-container">
<view :class="{'source-item-selected': selectedPhenomenonId === item.id}" class="source-item"
v-for="(item,index) in filteredPhenomenonOptions" :key="index"
@click="choosePhenomenon(item)">
<view class="source-text">{{item.name}}</view>
</view>
<!-- 新增来源按钮 -->
<view class="source-item source-add-button" @click="showAddPhenomenonDialog">
<text>+</text>
</view>
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">故障现象备注<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<textarea auto-height v-model="faultPhenomenon" placeholder="请输入故障现象备注"
placeholder-style="color: #929292;font-size:24rpx"
style="width:100%;min-height:100rpx;"></textarea>
</view>
</view>
<view class="jyxx-tinput">
<view class="text1">救援需求<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<textarea auto-height v-model="rescueNeeds" placeholder="请输入救援需求"
placeholder-style="color: #929292;font-size:24rpx"
style="width:100%;min-height:100rpx;"></textarea>
</view>
</view>
</view>
<view class="xinput">
<view class="text1"> <text class="hong1">*</text> 业务渠道选择<text style="color: #7e7e7e;">(选填)</text></view>
<view class="channel-container">
<view :class="{'channel-item-selected': selectedChannelId === item.id}" class="channel-item"
v-for="(item,index) in channelOptions" :key="index" @click="chooseChannel(item)">
<view class="channel-text">{{item.name}}</view>
</view>
<!-- 新增渠道按钮 -->
<view class="channel-item channel-add-button" @click="showAddChannelDialog">
<text>+</text>
</view>
</view>
</view>
<view class="xinput" v-if="selectedChannelId">
<view class="text1">来源选择<text style="color: #7e7e7e;">(选填)</text></view>
<view class="source-container">
<view :class="{'source-item-selected': selectedSourceId === item.id}" class="source-item"
v-for="(item,index) in filteredSourceOptions" :key="index" @click="chooseSource(item)">
<view class="source-text">{{item.name}}</view>
</view>
<!-- 新增来源按钮 -->
<view class="source-item source-add-button" @click="showAddSourceDialog">
<text>+</text>
</view>
</view>
</view>
<view class="tinput">
<view class="text1" style="flex-shrink: 0;"> 备注<text style="color: #7e7e7e;">(选填)</text></view>
<view class="you">
<input type="text" placeholder-style="color: #929292;font-size: 24rpx" placeholder="添加备注"
v-model="rescueDetail">
</view>
</view>
<u-datetime-picker :show="show" v-model="value1" @confirm="confirms" @cancel="cancels"
mode="datetime"></u-datetime-picker>
<view class="anniu" @click="postadd()">
<text>发起救援</text>
</view>
<view style="width: 100%; height: 60px;"></view>
</view>
<view class="">
<u-picker :show="shows" :columns="columns" @confirm="confirmm" @cancel="cancelm" keyName="label"></u-picker>
</view>
<view class="">
<u-picker :show="roadVisible" :columns="roadOptions" @confirm="roadConfirm" @cancel="roadCancel"
keyName="dictValue"></u-picker>
</view>
<view class="">
<!-- 新增来源弹窗 -->
<u-modal :show="showAddChannelModal" title="新增渠道" @confirm="addNewChannel" @cancel="handleCancelAddChannel"
:showCancelButton="true">
<view class="modal-content">
<view class="modal-input-item">
<text class="modal-label">渠道名称</text>
<u-input v-model="newChannelName" placeholder="请输入渠道名称" />
</view>
</view>
</u-modal>
<u-modal :show="showAddSourceModal" :title="'新增来源 - ' + selectedChannelName" @confirm="addNewSource"
@cancel="handleCancelAddSource" :showCancelButton="true">
<view class="modal-content">
<view class="modal-input-item">
<text class="modal-label">来源名称</text>
<u-input v-model="newSourceName" placeholder="请输入来源名称" />
</view>
<view class="modal-channel-info">
<text>所属渠道{{selectedChannelName}}</text>
</view>
</view>
</u-modal>
<u-modal :show="showAddPhenomenonModal" :title="'新增故障现象 - ' + selectedFaultTypeName"
@confirm="addNewPhenomenon" @cancel="handleCancelAddPhenomenon" :showCancelButton="true">
<view class="modal-content">
<view class="modal-input-item">
<text class="modal-label">故障现象名称</text>
<u-input v-model="newPhenomenonName" placeholder="请输入故障现象名称" />
</view>
<view class="modal-channel-info">
<text>所属故障类型{{selectedFaultTypeName}}</text>
</view>
</view>
</u-modal>
</view>
<tabBar msg="1"></tabBar>
</view>
</template>
<script>
import tabBar from '../../components/tabBar/tabBar.vue'
import VNavigationBarVue from '../../components/VNavigationBar.vue'
import request from '../../utils/request'
import config from '@/config'
import upload from '@/utils/upload.js'
import {
getTenantId,
hasRole
} from "@/utils/auth";
export default {
data() {
return {
// isWeiXiu: '0',
isKouChe: '0',
show: false,
value1: Number(new Date()),
rescueLongitude: '',
rescueLatitude: '',
connectionName: '',
connectionPhone: '',
carOwner: '',
carOwnerPhone: '',
rescuePosition: '',
rescueDetail: '',
rescueType: '',
baseUrl: this.$baseUrl,
carType: 1,
feeType: null,
sourceType: 1,
licenseNum: '',
carBrand: '',
remarkDestinationInfo: '',
remarkRescuePosition: '',
faultPhenomenon: '',
rescueNeeds: '',
estimateDownCar: '',
estimateMoney: '',
isAppointment: 0,
fileList1: [],
imageList: [],
rescueSceneImage: [],
rescueTime: '请选择约定时间',
carzhi: null,
source: '',
channel: '',
car: [{
text: '大',
id: 1
},
{
text: '中',
id: 2
},
{
text: '小',
id: 3
}
],
maneizhi: null,
manei: [{
text: '挂账',
id: 1
},
{
text: '现金',
id: 2
},
],
onAccount: null,
ifOnAccount: [{
label: '挂账',
value: 1
},
{
label: '不挂账',
value: 2
},
],
province: '',
city: '',
area: '',
four: '',
province1: '',
city1: '',
area1: '',
four1: '',
shows: false,
kcname: '',
columns: [
],
title: '救援',
roadOptions: [],
seletedRoad: '',
selectChannel: '',
roadVisible: false,
showAddSourceModal: false, // 控制新增来源弹窗显示
newSourceName: '', // 新来源名称
// 渠道和来源相关字段
selectedChannelId: null,
selectedChannelName: '',
selectedSourceId: null,
selectedSourceName: null,
showAddChannelModal: false,
newChannelName: '',
channelOptions: [], //数组包含id和name
sourceOptions: [], //数组包含id、name和pid
selectedFaultTypeId: null,
selectedFaultTypeName: '',
selectedPhenomenonId: null,
selectedPhenomenonName: null,
faultTypeOptions: [],
phenomenonOptions: [],
showAddPhenomenonModal: false,
newPhenomenonName: '',
ifNewEnergy: '',
userinfo: {},
}
},
onLoad(option) {
console.log('option123', option)
this.rescueType = option.id
switch (option.id) {
case '1':
this.title = '拖车'
break;
case '2':
this.title = '送油'
break;
case '3':
this.title = '搭电'
break;
case '4':
this.title = '换胎'
break;
case '5':
this.title = '扣车'
break;
case '8':
this.title = '现场查勘'
break;
default:
break;
}
this.newtwo()
this.isAppointment = option.isAppointment
/* if (hasRole('jjdd')) {
this.kcdd()
} */
this.kcdd()
},
components: {
tabBar,
VNavigationBarVue
},
computed: {
// 根据选择的渠道筛选来源
filteredSourceOptions() {
if (!this.selectedChannelId) return [];
return this.sourceOptions.filter(item => item.pid == this.selectedChannelId);
},
filteredPhenomenonOptions() {
if (!this.selectedFaultTypeId) return [];
return this.phenomenonOptions.filter(item => item.pid == this.selectedFaultTypeId);
}
},
methods: {
async newtwo() {
request({
url: '/rescue/dict/data/type/fee_type',
method: 'get',
}).then((res) => {
this.manei = res.data
console.log(res);
})
request({
url: '/rescue/dict/data/type/rescue_car_type',
method: 'get',
}).then((res) => {
this.car = res.data
console.log(res);
})
this.userinfo = uni.getStorageSync('userInfo')
await this.loadChannelOptions()
await this.loadSourceOptions()
await this.loadFaultTypeOptions()
await this.loadPhenomenonOptions()
},
kcdd() {
request({
url: '/system/rescueInfo/getKcPosition',
method: 'get',
}).then((res) => {
console.log('kcddres', res)
this.columns.push(res.data)
console.log('kcdd', this.columns);
})
},
confirmm(e) {
console.log(e);
this.kcname = e.value[0].label
this.shows = false
},
cancelm() {
this.shows = false
},
roadConfirm(e) {
console.log('e: ', e);
this.roadVisible = false
},
roadCancel() {
this.roadVisible = false
},
confirms(e) {
console.log(e);
const timestamp = e.value
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
this.rescueTime = `${year}-${month}-${day} ${hours}:${minutes}`
console.log(this.rescueTime);
this.show = false
},
cancels() {
this.show = false
},
postadd() {
this.rescueSceneImage = this.imageList.join(",")
if (typeof this.rescueTime === "number") {} else {
this.rescueTime = ''
}
if (this.isAppointment == 'undefined') {
this.isAppointment = 0
}
if (this.rescueLongitude == "" || this.rescueLatitude == "") {
uni.showToast({
title: '起点位置不能为空',
icon: 'none'
})
return
}
console.log('this.seletedRoad: ', this.seletedRoad);
let data = {
rescueLongitude: this.rescueLongitude,
rescueLatitude: this.rescueLatitude,
destinationLongitude: this.destinationLongitude,
destinationLatitude: this.destinationLatitude,
connectionName: this.connectionName,
connectionPhone: this.connectionPhone,
carOwner: this.carOwner,
carOwnerPhone: this.carOwnerPhone,
rescuePosition: this.rescuePosition,
destinationInfo: this.destinationInfo,
licenseNum: this.licenseNum,
// roadIds: this.seletedRoad,
isAppointment: this.isAppointment,
rescueTime: this.rescueTime,
rescueDetail: this.rescueDetail,
rescueSceneImage: this.rescueSceneImage,
rescueType: this.rescueType,
carType: this.carType,
feeType: '0',
kcPosition: this.kcname,
isKouChe: this.isKouChe,
faultPhenomenon: this.faultPhenomenon,
rescueNeeds: this.rescueNeeds,
estimateDownCar: this.estimateDownCar,
estimateMoney: this.estimateMoney,
isWeiXiu: '0',
carBrand: this.carBrand,
sectionRoad: (this.seletedRoad && this.seletedRoad.length > 0) ? this.seletedRoad[0] : null,
channel: this.selectedChannelName,
source: this.selectedSourceName,
remarkRescuePosition: this.remarkRescuePosition,
remarkDestinationInfo: this.remarkDestinationInfo,
secondDispatchId: this.userinfo.id,
secondDispatchName: this.userinfo.nickname,
secondDispatchPhone: this.userinfo.mobile,
faultType: this.selectedFaultTypeName,
phenomenon: this.selectedPhenomenonName,
ifNewEnergy: this.ifNewEnergy,
}
request({
url: '/app/rescueInfo/add',
method: 'post',
data: data
}).then((res) => {
console.log(res);
if (res.code == 200) {
uni.showToast({
title: '提交成功'
})
setTimeout(() => {
uni.navigateBack({
delta: 1,
})
}, 2000);
}
})
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
console.log('执行了', event);
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
})
})
for (let i = 0; i < lists.length; i++) {
console.log('路径', lists[i].url);
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
uni.compressImage({
src: url,
success: res => {
upload({
url: '/common/upload',
filePath: res.tempFilePath,
}).then((res) => {
console.log('res.fileName', res.data.url)
this.imageList.push(this.$baseImageUrl + res.data.url)
console.log('this.imageList', this.imageList)
console.log(res);
})
}
})
},
// 以下为重点
// 起点经纬
getmap() {
let that = this
console.log('选择位置')
uni.getLocation({
type: 'wgs84',
success: function(getres) {
console.log('当前位置的经度:' + getres.longitude);
console.log('当前位置的纬度:' + getres.latitude);
uni.chooseLocation({
latitude: getres.latitude,
longitude: getres.longitude,
success: function(res) {
console.log(res)
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.rescueLongitude = res.longitude
that.rescueLatitude = res.latitude
that.rescuePosition = res.address
var address = res.address;
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
let addressList = address.match(reg).toString().split(",");
if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
addressList[0] == '天津市' ||
addressList[0] == '上海市') {
that.province = addressList[0];
that.city = '市辖区';
that.area = addressList[1];
that.four = address.replace(that.province, '').replace(that
.city, '').replace(that
.area, '');
} else {
that.province = addressList[0];
that.city = addressList[1];
that.area = addressList[2];
that.four = address.replace(that.province, '').replace(that
.city, '').replace(that
.area, '');
};
console.log(that.four.indexOf(res.name));
if (that.four.indexOf(res.name) < 0) {
that.four = that.four + res.name
that.rescuePosition = that.rescuePosition + res.name
}
},
fail: (err) => {
console.log(err, 'err')
},
complete(res) {
console.log(res, 'cpmplete')
}
});
}
});
},
getmap1() {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(getres) {
console.log('当前位置的经度:' + getres.longitude);
console.log('当前位置的纬度:' + getres.latitude);
uni.chooseLocation({
latitude: getres.latitude,
longitude: getres.longitude,
success: function(res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
console.log(res)
that.destinationLongitude = res.longitude
that.destinationLatitude = res.latitude
that.destinationInfo = res.address
var address = res.address;
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
let addressList = address.match(reg).toString().split(",");
if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
addressList[0] ==
'天津市' ||
addressList[0] == '上海市') {
that.province1 = addressList[0];
that.city1 = '市辖区';
that.area1 = addressList[1];
that.four1 = address.replace(that.province, '').replace(that
.city, '')
.replace(that
.area, '');
} else {
that.province1 = addressList[0];
that.city1 = addressList[1];
that.area1 = addressList[2];
that.four1 = address.replace(that.province, '').replace(that
.city, '')
.replace(that
.area, '');
};
console.log(that.four1);
}
});
}
});
},
getback() {
uni.navigateBack({
delta: 1,
})
},
getzhi(index, id) {
this.carType = id
this.carzhi = index
},
getzhi2(index, id) {
this.feeType = id
this.maneizhi = index
},
getzhi3(index, label) {
this.source = label
},
// 是否挂账选择
getIfOnAccount(index, label) {
this.onAccount = index
},
/**
* 路段选择事件
* @param index
* @param id
*/
/* chooseRoad(index, label) {
if (this.seletedRoad.includes(label)) {
const findIndex = this.seletedRoad.indexOf(label)
this.seletedRoad.splice(findIndex, 1)
} else {
this.seletedRoad.push(label)
}
} */
chooseChannel(item) {
if (this.selectedChannelId === item.id) {
this.selectedChannelId = null;
this.selectedChannelName = '';
this.selectedSourceId = null;
} else {
this.selectedChannelId = item.id;
this.selectedChannelName = item.name;
this.selectedSourceId = null;
}
},
chooseSource(item) {
if (this.selectedSourceId === item.id) {
this.selectedSourceId = null;
this.selectedSourceName = '';
} else {
this.selectedSourceId = item.id;
this.selectedSourceName = item.name;
}
},
chooseFaultType(item) {
if (this.selectedFaultTypeId === item.id) {
this.selectedFaultTypeId = null;
this.selectedFaultTypeName = '';
this.selectedPhenomenonId = null;
} else {
this.selectedFaultTypeId = item.id;
this.selectedFaultTypeName = item.name;
this.selectedPhenomenonId = null;
}
},
choosePhenomenon(item) {
if (this.selectedPhenomenonId === item.id) {
this.selectedPhenomenonId = null;
this.selectedPhenomenonName = '';
} else {
this.selectedPhenomenonId = item.id;
this.selectedPhenomenonName = item.name;
}
},
// 显示新增渠道弹窗
showAddChannelDialog() {
this.newChannelName = '';
this.showAddChannelModal = true;
},
// 取消新增渠道
handleCancelAddChannel() {
this.newChannelName = '';
this.showAddChannelModal = false;
},
// 新增渠道
async addNewChannel() {
if (!this.newChannelName.trim()) {
uni.showToast({
title: '请输入渠道名称',
icon: 'none'
});
return;
}
try {
const response = await request({
url: '/rescue-channel-source/createChannelApp',
method: 'post',
data: {
name: this.newChannelName.trim(),
userId: this.userinfo.id
}
});
if (response.code === 200) {
uni.showToast({
title: '添加成功'
});
// 重新加载渠道选项
await this.loadChannelOptions();
this.showAddChannelModal = false;
// 新增后取消选中状态
this.selectedChannelId = null;
this.selectedChannelName = '';
this.selectedSourceId = null;
} else {
uni.showToast({
title: response.msg || '添加失败',
icon: 'none'
});
}
} catch (error) {
console.error('添加渠道失败:', error);
uni.showToast({
title: '添加失败',
icon: 'none'
});
}
},
// 显示新增来源弹窗
showAddSourceDialog() {
if (!this.selectedChannelId) {
uni.showToast({
title: '请先选择渠道',
icon: 'none'
});
return;
}
this.newSourceName = '';
this.showAddSourceModal = true;
},
// 取消新增来源
handleCancelAddSource() {
this.newSourceName = '';
this.showAddSourceModal = false;
},
// 添加新来源
async addNewSource() {
if (!this.newSourceName.trim()) {
uni.showToast({
title: '请输入来源名称',
icon: 'none'
});
return;
}
try {
const response = await request({
url: '/rescue-channel-source/createSource',
method: 'post',
data: {
name: this.newSourceName.trim(),
pid: this.selectedChannelId
}
});
if (response.code === 200) {
uni.showToast({
title: '添加成功'
});
// 重新加载来源选项
await this.loadSourceOptions();
this.showAddSourceModal = false;
// 新增后取消选中状态
this.selectedSourceId = null;
} else {
uni.showToast({
title: response.msg || '添加失败',
icon: 'none'
});
}
} catch (error) {
console.error('添加来源失败:', error);
uni.showToast({
title: '添加失败',
icon: 'none'
});
}
},
// 显示故障现象来源弹窗
showAddPhenomenonDialog() {
if (!this.selectedFaultTypeId) {
uni.showToast({
title: '请先选择故障类型',
icon: 'none'
});
return;
}
this.newPhenomenonName = '';
this.showAddPhenomenonModal = true;
},
// 取消故障现象来源
handleCancelAddPhenomenon() {
this.newPhenomenonName = '';
this.showAddPhenomenonModal = false;
},
// 添加新故障现象
async addNewPhenomenon() {
if (!this.newPhenomenonName.trim()) {
uni.showToast({
title: '请输入故障现象名称',
icon: 'none'
});
return;
}
try {
const response = await request({
url: '/rescue-type-phenomenon/createPhenomenon',
method: 'post',
data: {
name: this.newPhenomenonName.trim(),
pid: this.selectedFaultTypeId
}
});
if (response.code === 200) {
uni.showToast({
title: '添加成功'
});
// 重新加载故障现象选项
await this.loadPhenomenonOptions();
this.showAddPhenomenonModal = false;
// 新增后取消选中状态
this.selectedPhenomenonId = null;
} else {
uni.showToast({
title: response.msg || '添加失败',
icon: 'none'
});
}
} catch (error) {
console.error('添加来源失败:', error);
uni.showToast({
title: '添加失败',
icon: 'none'
});
}
},
// 加载来源选项方法
async loadSourceOptions() {
try {
const res = await request({
url: '/rescue-channel-source/listByPid',
method: 'get',
params: {
pid: null // 获取所有来源
}
});
if (res.code === 200) {
this.sourceOptions = res.data;
}
} catch (error) {
console.error('加载来源选项失败:', error);
}
},
// 加载渠道选项
async loadChannelOptions() {
try {
const res = await request({
url: '/rescue-channel-source/getChannelListByDispatchId',
method: 'get',
params: {
dispatchId: this.userinfo.id
}
});
if (res.code === 200 && res.data) {
this.channelOptions = res.data;
console.log('channelOptions', this.channelOptions)
}
} catch (error) {
console.error('加载渠道选项失败:', error);
}
},
// 加载故障类型选项
async loadFaultTypeOptions() {
try {
const res = await request({
url: '/rescue-type-phenomenon/typeList',
method: 'get'
});
if (res.code === 200 && res.data) {
this.faultTypeOptions = res.data;
console.log('channelOptions', this.faultTypeOptions)
}
} catch (error) {
console.error('加载故障类型选项失败:', error);
}
},
// 加载故障现象选项方法
async loadPhenomenonOptions() {
try {
const res = await request({
url: '/rescue-type-phenomenon/listPhenomenonByPid',
method: 'get',
params: {
pid: null // 获取所有来源
}
});
if (res.code === 200) {
this.phenomenonOptions = res.data;
}
} catch (error) {
console.error('加载来源选项失败:', error);
}
},
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #F7F8FC;
display: flex;
flex-direction: column;
row-gap: 10rpx;
}
.dil {
flex: 1;
height: 0;
overflow: auto;
box-sizing: border-box;
background-color: #F6F6F6;
padding: 0px 12px;
}
.top {
box-sizing: border-box;
padding: 0px 15px;
background: #FFFFFF;
border-radius: 16rpx;
border: 2rpx solid rgba(50, 125, 251, 0.05);
display: flex;
align-items: center;
column-gap: 28rpx;
.start-end {
width: 44rpx;
height: 44rpx;
}
}
.top-box {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 20px 0px;
}
.tb-left {
height: 100%;
width: 85%;
display: flex;
align-items: flex-start;
}
.uicon {
width: 44rpx;
height: 44rpx;
margin-right: 6px;
}
.tb-right {
width: 20px;
height: 26px;
image {
width: 100%;
height: 100%;
}
}
.text1 {
font-size: 28rpx;
color: #000;
font-weight: bold;
}
.hong1 {
margin-top: 5px;
font-size: 12px;
font-weight: 400;
color: #D42424;
}
.hong2 {
margin-top: 5px;
font-size: 12px;
font-weight: 400;
width: 100%;
overflow: hidden;
input {
width: 100%;
}
}
.jyxx {
background: #FFFFFF;
border-radius: 16rpx;
border: 2rpx solid rgba(50, 125, 251, 0.05);
padding: 14rpx 38rpx;
}
.jyxx-tinput {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 12rpx;
padding: 24rpx 0;
border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);
&:last-child {
border: none;
}
.text1 {
font-size: 28rpx;
color: #000;
font-weight: bold;
}
.you {
flex: 1;
width: 0;
}
}
.tinput {
width: 100%;
display: flex;
background: white;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 16px;
margin-top: 14px;
}
.xinput {
width: 100%;
box-sizing: border-box;
padding: 36rpx;
margin-top: 14px;
background: #FFFFFF;
border-radius: 16rpx;
border: 2rpx solid rgba(50, 125, 251, 0.05);
}
.xinput-fault {
width: 100%;
// box-sizing: border-box;
padding: 0 0 26rpx 0;
margin-top: 14px;
background: #FFFFFF;
// border-radius: 16rpx;
border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);
}
.you {
text-align: right;
}
.xz {
margin-top: 10px;
display: flex;
align-items: center;
}
.kuang {
width: 92rpx;
height: 50rpx;
font-size: 24rpx;
color: #327DFB;
border-radius: 5px;
border: 2rpx solid #327DFB;
display: flex;
justify-content: center;
align-items: center;
margin-right: 24rpx;
border-radius: 24rpx;
}
.xlan {
background: #327DFB;
border: 2rpx solid #327DFB;
color: #fff;
}
.anniu {
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin-top: 30rpx;
background: #327DFB;
border-radius: 12rpx;
}
.add-button {
background-color: #f1f1f1;
font-weight: bold;
font-size: 28rpx;
}
.modal-content {
padding: 20rpx;
}
/* 业务渠道选择专用样式 */
.channel-container {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
margin-top: 20rpx;
}
.channel-item {
min-height: 50rpx;
padding: 0 24rpx;
border-radius: 25rpx;
border: 2rpx solid #327DFB;
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
}
.channel-item-selected {
background: #327DFB;
color: #fff;
}
.channel-text {
font-size: 24rpx;
color: inherit;
max-width: 240rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 来源选择专用样式 */
.source-container {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
margin-top: 20rpx;
}
.source-item {
min-height: 50rpx;
padding: 0 24rpx;
border-radius: 25rpx;
border: 2rpx solid #327DFB;
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
}
.source-item-selected {
background: #327DFB;
color: #fff;
}
.source-text {
font-size: 24rpx;
color: inherit;
max-width: 240rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-add-button {
background-color: #f1f1f1;
font-weight: bold;
font-size: 28rpx;
width: 50rpx;
padding: 0;
}
/* 保持原有样式不变 */
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #F7F8FC;
display: flex;
flex-direction: column;
row-gap: 10rpx;
}
.dil {
flex: 1;
height: 0;
overflow: auto;
box-sizing: border-box;
background-color: #F6F6F6;
padding: 0px 12px;
}
.channel-add-button {
background-color: #f1f1f1;
font-weight: bold;
font-size: 28rpx;
width: 50rpx;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.modal-input-item {
margin-bottom: 20rpx;
}
.modal-label {
display: block;
margin-bottom: 10rpx;
font-size: 28rpx;
color: #333;
}
.modal-channel-info {
margin-top: 20rpx;
padding: 10rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
font-size: 24rpx;
color: #666;
}
</style>