针对下拉选择框回显的处理
首先循环自己定义的数组,然后判断在接口(信息接口)中获得的对应数据若是与字典值接口获得的id相对应 是其index等于i
<!-- 任务调度表单 -->
<template>
<gracePage :customHeader="false">
<!-- 页面主体 -->
<view slot="gBody" class="grace-body">
<graceHeader :height="120" background="linear-gradient(#0A346E, #0A346E)">
<view class="grace-header-body" style="padding-top: 30upx;margin-left: 10upx;">
<!-- 返回按钮 -->
<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="goback"></view>
<!-- 中间内容 -->
<view class="grace-header-content-noflex grace-text-center" style="display: flex;justify-content: center; color: #FFFFFF;margin-right: 20px;">
<view class="">实效督察登记</view>
</view>
<!-- 设置按钮 -->
<view class=" grace-text-right" style="color: #FFFFFF;margin-right: 20upx;" @click="submit()">提交</view>
</view>
</graceHeader>
<view class="grace-margin">
<view class="grace-form" style="margin-top:25px;">
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督察计划</view>
<view class="input-box" style="width: 80%;background-color: #FFFFFF;">
<picker
style="width: 80%;padding-left: 10upx;"
@change="taskTitleTypeChange"
:value="taskTitleIndex"
:range="taskTitleList"
range-key="name"
mode="selector"
>
<view name="taskTitle" v-model="taskTitle" class="picker-content">
<block v-if="taskTitleList[0]">{{ taskTitleList[taskTitleIndex].name }}</block>
</view>
</picker>
</view>
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督察分类</view>
<view class="input-box" style="width: 80%;background-color: #FFFFFF;">
<picker
style="width: 80%;padding-left: 10upx;"
@change="supervisionTypeChange"
:value="supervisionTypeIndex"
:range="supervisionTypeList"
range-key="name"
mode="selector"
>
<view name="supervisionType" v-model="supervisionType" class="picker-content">
<block v-if="supervisionTypeList">{{ supervisionTypeList[supervisionTypeIndex].name }}</block>
</view>
</picker>
</view>
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督察地点</view>
<input
type="text"
name="taskAddress"
maxlength="20"
id="taskAddress"
v-model="taskAddress"
placeholder="请输入"
placeholder-class="input-placeholder"
class="input-content"
/>
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督察要求</view>
<input
type="text"
name="inspectionRequirements"
maxlength="20"
id="inspectionRequirements"
v-model="inspectionRequirements"
placeholder="请输入"
placeholder-class="input-placeholder"
class="input-content"
/>
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督察时间</view>
<view class="grace-margin-top" style="width: 70%;background-color: #FFFFFF;margin-top: -10upx;padding-top: 10upx;padding-bottom: 10upx;">
<graceDateTime @confirm="confirm1" :value="demo1Val" @change="chang1">
<text class="demo grace-border-radius" style="color: #999999;">
{{ demo1Val }}
</text>
</graceDateTime>
</view>
<!-- <input @tap="showDate1()" type="text" maxlength="20" v-model="date1" placeholder="请选择" placeholder-class="input-placeholder" class="input-content" /> -->
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="" style="width: 80px; padding-left: 5px;">问题描述</view>
<input
type="text"
name="problem"
maxlength="20"
id="problem"
v-model="problem"
placeholder="请输入"
placeholder-class="input-placeholder"
class="input-content"
/>
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督察整改类型</view>
<view class="input-box" style="width: 80%;background-color: #FFFFFF;">
<picker
style="width: 80%;padding-left: 10upx;"
@change="rectificationTypeChange"
:value="rectificationIndex"
:range="rectificationList"
range-key="name"
mode="selector"
>
<view name="rectification" v-model="rectification" class="picker-content">
<block v-if="rectificationList">{{ rectificationList[rectificationIndex].name }}</block>
</view>
</picker>
</view>
</view>
<view v-if="rectification == 1">
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">处置单位</view>
<view class="input-box" style="width: 80%;background-color: #FFFFFF;">
<view class="input-box" style="width: 80%;background-color: #FFFFFF;">
<picker
style="width: 80%;padding-left: 10upx;"
@change="disposalChange"
:value="disposalIndex"
:range="disposalList"
range-key="name"
mode="selector"
>
<view style="width: 200px;" name="taskTitle" v-model="disposal" class="picker-content">
<block>{{ disposalList[disposalIndex].name }}</block>
</view>
</picker>
</view>
<!-- </block> -->
</view>
</view>
<view style="padding-left: 5px;" class="grace-items">
<view class="input-title" style="width: 30%;">督办期限</view>
<input @tap="showDate2()" type="text" maxlength="20" v-model="date2" placeholder="请选择" placeholder-class="input-placeholder" class="input-content" />
</view>
</view>
<view class="grace-nowrap margin-text-row" style="padding-left: 5px;margin-top: 50upx;display: flex;flex-direction: column;">
<view class="uni-uploader-head" style="width: 95%;">
<view class="demo2 " style="color: #000000;">现场照片</view>
<view class="uni-uploader-info">{{ selectedimgs.length }}</view>
</view>
<view style="margin-top:5rpx;">
<graceSelectImgAndUpload
:maxFileNumber="9"
ref="selectimgandupload"
@removeImg="removeImg"
@uploaded="imgLoaded"
@change="imgsChange"
@uploaderror="uploaderror"
uploadServerUrl="http://您的上传服务器api地址"
></graceSelectImgAndUpload>
</view>
</view>
<view v-show="rectification == 0" class="grace-nowrap margin-text-row" style="padding-left: 5px;margin-top: 50upx;display: flex;flex-direction: column;">
<view class="uni-uploader-head" style="width: 95%;">
<view class="demo2 " style="color: #000000;">处置照片</view>
<view class="uni-uploader-info">{{ handlerImgs.length }}/9</view>
</view>
<view style="margin-top:5rpx;">
<graceSelectImgAndUpload
:maxFileNumber="9"
ref="handelimgandupload"
@removeImg="removeImg"
@uploaded="imgLoaded"
@change="handelImgsChange"
@uploaderror="uploaderror"
uploadServerUrl="http://您的上传服务器api地址"
></graceSelectImgAndUpload>
</view>
</view>
</view>
<graceDate
:currentDate="date1"
borderRadius="100rpx"
:isLunar="false"
bgColor="#FFFFFF"
activeBgColor="#FF0036"
@changeDate="changeDate1"
@closeDate="closeDate1"
ref="graceDate1"
></graceDate>
<graceDate
:currentDate="date2"
borderRadius="100rpx"
:isLunar="false"
bgColor="#FFFFFF"
activeBgColor="#FF0036"
@changeDate="changeDate2"
@closeDate="closeDate2"
ref="graceDate2"
></graceDate>
</view>
</view>
</gracePage>
</template>
<script>
import graceDate from '../../graceUI/components/graceDate.vue';
import uniDataPicker from '@/components/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue';
import { pathToBase64, base64ToPath } from '@/common/image-tools/index.js';
import { inspectionCtx, imgCtx,dispatchCtx } from '../../common/urls.js';
import { http } from '@/common/http-request/index.js';
import {tokenAuthorize} from '@/common/token.js';
export default {
components: {
graceDate,
uniDataPicker
},
data() {
return {
disposal: '', //处置单位
disposalIndex: 0,
disposalList: [
{
name: '请选择',
value: ''
}
],
dateShow: false,
date2: '',
date1: '',
datecon1: '请选择',
datecon2: '年/月/日',
taskAddress: '', //督查地点
inspectionRequirements: '', //督察要求
problem: '', //问题描述
rectification: '', //督察整改类型
rectificationIndex: 0,
rectificationList: [
{
id: '0',
name: '当场整改'
},
{
id: '1',
name: '签发告知'
}
],
handleDeptType: '', //处置部门
handleDeptTypeIndex: 0,
handleDeptTree: [], //处置部门数据
supervisionType: '', //督察分类
supervisionTypeIndex: 0,
supervisionTypeList: [
{
id: '',
name: '请选择'
}
],
taskTitle: '', //督查计划
taskTitleIndex: 0,
taskTitleList: [],
imageList: [],
handelImageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
selectedimgs: [],
handlerImgs: [],
userInfo: {}, //用户信息
params: {}, //传递过来的参数
details: {} ,//详情数据
demo1Val: '',
};
},
onShow: async function(){
this.userInfo = await tokenAuthorize(this.userInfo)
},
onLoad: async function(options) {
//获取督查计划选择
let that = this;
if (uni.getStorageSync('USERS_KEY')) {
that.userInfo = JSON.parse(uni.getStorageSync('USERS_KEY'));
} else {
uni.navigateTo({
url: '/pages/login/login'
});
}
that.userInfo = await tokenAuthorize(that.userInfo);
if (options.item) {
that.params = JSON.parse(options.item);
}
that.getDeptmList();
that.getInspectionTypeList();
that.getActualEffectList();
},
onUnload() {
this.imageList = [];
this.sourceTypeIndex = 2;
this.sourceType = ['拍照', '相册', '拍照或相册'];
this.sizeTypeIndex = 2;
this.sizeType = ['压缩', '原图', '压缩或原图'];
this.countIndex = 8;
},
methods: {
getLawPeople() {
uni.navigateTo({
url: '/pagesScene/caseRegistrationList/lawPeople'
});
},
getInspectionTypeList: function() {
let that = this;
let url = inspectionCtx + 'appGateway/inspectionTypeList';
uni.showLoading({
title: '加载中'
});
let data = {
param: {
type: 'inspectionType'
}
};
http.post(url, data).then(res => {
uni.hideLoading();
if (res.data.success) {
let list = res.data.data;
list.forEach(item => {
that.supervisionTypeList.push({
value: item.paramValue,
name: item.paramName
});
});
// that.handleDeptTree = res.data.data;
} else {
uni.hideLoading();
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
});
},
confirm1: function(res) {
this.demo1Val = res[0] + '-' + res[1] + '-' + res[2] + ' ' + res[3] + ':' + res[4] + ':' + res[5];
console.info('demo1Val:'+this.demo1Val)
},
chang1: function(e) {
console.log('e:'+JSON.stringify(e));
},
getEdit: function() {
//获取编辑数据
let that = this;
let url = inspectionCtx + 'appGateway/actualEffectInspectionView';
uni.showLoading({
title: '加载中'
});
let data = {
param: {
id: that.params.id
}
};
http.post(url, data).then(res => {
console.info('进入');
uni.hideLoading();
if (res.data.success) {
console.info('成功');
uni.hideLoading();
that.details = res.data.data;
let details0 = that.details.actualEffect;
that.taskTitle = details0.inspectionPlanId;
for (let i = 0; i < that.taskTitleList.length; i++) {
if (that.taskTitle == that.taskTitleList[i].value) {
that.taskTitleIndex = i;
}
}
for(let i=0;i<that.disposalList.length;i++){
if(details0.handleDept==that.disposalList[i].id){
that.disposalIndex=i
}
}
// that.disposalList[that.disposalIndex].name = details0.handleDeptName;
// that.disposalIndex =
that.disposal = details0.handleDept;
that.supervisionTypeIndex = details0.inspectionType;
that.supervisionType = details0.inspectionType;
that.taskAddress = details0.inspectionAddr;
that.inspectionRequirements = details0.inspectionRequirements;
// that.date1 = details0.inspectionTime.substring(0, 10);
that.demo1Val = details0.inspectionTime;
if (details0.superviseTerm) {
that.date2 = details0.superviseTerm.substring(0, 10);
}
that.problem = details0.inspectionDesc;
that.rectification = details0.inspectionRectificationType;
//处置部门
// that.handleDeptType = details0.handleDept;
// that.disposalList.push({
// value: details0.handleDept,
// name: details0.handleDeptName
// });
// that.disposalList[that.disposalIndex].name = details0.handleDeptName;
// that.disposalIndex = details0.handleDept
// that.disposal = details0.handleDept;
that.rectificationIndex = details0.inspectionRectificationType;
//图片信息
let details1 = that.details.scenePhoto;
if (details1) {
//循环处理图片信息
for (let type of details1) {
if (type.filePath) {
that.imageList.push(imgCtx + type.filePath);
let imgJson = {
url: imgCtx + type.filePath
};
that.selectedimgs.push(imgJson);
}
}
this.$refs.selectimgandupload.setItems(that.imageList);
}
let details2 = that.details.disposalList;
if (details2) {
//循环处理图片信息
for (let type of details2) {
if (type.filePath) {
that.handelImageList.push(imgCtx + type.filePath);
let imgJson = {
url: imgCtx + type.filePath
};
that.handlerImgs.push(imgJson);
}
}
this.$refs.handelimgandupload.setItems(that.handelImageList);
}
} else {
uni.hideLoading();
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
});
},
getDeptmList: function() {
let that = this;
let url = inspectionCtx + 'appGateway/getDeptList';
uni.showLoading({
title: '加载中'
});
let data = {
param: {
deptId: '0'
}
};
http.post(url, data).then(res => {
uni.hideLoading();
if (res.data.success) {
// that.handleDeptTree = res.data.data;
let list = res.data.data;
console.log(list);
console.log(that.disposalList)
list.forEach(item => {
that.disposalList.push({
id: item.id,
name: item.name
});
});
that.getEdit();
} else {
uni.hideLoading();
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
});
},
disposalChange: function(e) {
this.disposalIndex = e.target.value;
this.disposal = this.disposalList[this.disposalIndex].id;
console.info('disposal:' + this.disposal);
},
submit: async function() {
//提交信息
let that = this;
if (!that.supervisionType) {
uni.showToast({
title: '请选择督查分类',
icon: 'none'
});
return;
}
if (!that.taskAddress) {
uni.showToast({
title: '请输入督查地点',
icon: 'none'
});
return;
}
if (!that.inspectionRequirements) {
uni.showToast({
title: '请输入督查要求',
icon: 'none'
});
return;
}
// if (!that.date1) {
// uni.showToast({
// title: '请选择督查时间',
// icon: 'none'
// });
// return;
// }
if (!that.demo1Val) {
uni.showToast({
title: '请选择督查时间',
icon: 'none'
});
return;
}
if (!that.problem) {
uni.showToast({
title: '请输入问题描述',
icon: 'none'
});
return;
}
if (that.selectedimgs.length < 1) {
uni.showToast({
title: '请选择现场图片',
icon: 'none'
});
return;
}
if (that.rectification == 0) {
if (that.handlerImgs.length < 1) {
uni.showToast({
title: '请选择处置图片',
icon: 'none'
});
return;
}
}
let files = [];
for (let i = 0; i < that.selectedimgs.length; i++) {
console.info('开始请求++' + that.selectedimgs[i].url);
var base64 = await pathToBase64(that.selectedimgs[i].url);
let dateLong = new Date().getTime();
var imgData = {
fileName: dateLong + '_' + i + '.jpg',
content: base64.split(',')[1]
};
files = files.concat(imgData);
}
let handFiles = [];
if (that.rectification == 0) {
for (let i = 0; i < that.handlerImgs.length; i++) {
console.log(that.handlerImgs[i].url);
var base64 = await pathToBase64(that.handlerImgs[i].url);
// console.log("base64:" + base64);
let dateLong = new Date().getTime();
var imgData = {
fileName: dateLong + '_' + i + '.jpg',
content: base64.split(',')[1]
};
handFiles = handFiles.concat(imgData);
}
}
let url = inspectionCtx + 'appGateway/actualEffectInspectionUpdate';
uni.showLoading({
title: '提交中'
});
let data = {
param: {
id: that.params.id,
inspectionPlanId: that.taskTitle,
inspectionType: that.supervisionType,
inspectionTime: that.demo1Val,//that.date1,
inspectionAddr: that.taskAddress,
InspectionRequirements: that.inspectionRequirements,
inspectionRectificationType: that.rectification,
// handleDept: that.handleDeptType,
handleDept:that.disposal,
superviseTerm: that.date2,
inspectionDesc: that.problem,
userId: that.userInfo.userId,
disposalFiles: handFiles, //处置照片
files: files //图片
}
};
http.post(url, data).then(res => {
uni.hideLoading();
if (res.data.success) {
uni.hideLoading();
uni.showToast({
title: '提交成功',
icon: 'none'
});
/* uni.navigateTo({
url: '/pagesSupervision/inspectionRegister/inspectionRegister'
}); */
uni.navigateBack({
delta: 1
});
} else {
uni.hideLoading();
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
});
},
//督查计划选择框
getActualEffectList: function() {
let that = this;
let url = inspectionCtx + 'appGateway/actualEffectList';
uni.showLoading({
title: '加载中'
});
let data = {
param: {}
};
http.post(url, data).then(res => {
uni.hideLoading();
if (res.data.success) {
that.taskTitleList = res.data.data;
} else {
uni.hideLoading();
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
});
},
closeDate1: function() {
this.$refs.graceDate1.hide();
},
showDate1: function() {
this.$refs.graceDate1.open();
},
changeDate1: function(e) {
this.date1 = e;
this.closeDate1();
},
closeDate2: function() {
this.$refs.graceDate2.hide();
},
showDate2: function() {
this.$refs.graceDate2.open();
},
changeDate2: function(e) {
this.date2 = e;
this.closeDate2();
},
taskTitleTypeChange: function(e) {
//任务标题
this.taskTitleIndex = e.target.value;
this.taskTitle = this.taskTitleList[this.taskTitleIndex].value;
},
supervisionTypeChange: function(e) {
this.supervisionTypeIndex = e.target.value;
this.supervisionType = this.supervisionTypeList[this.supervisionTypeIndex].id;
},
rectificationTypeChange: function(e) {
this.rectificationIndex = e.target.value;
this.rectification = this.rectificationList[this.rectificationIndex].id;
},
getQuery: function(e) {
//查询
},
goback: function() {
uni.navigateBack({});
},
deleteImg(index) {
let that = this;
uni.showModal({
title: '提示',
content: '您确定删除吗？',
success: res => {
if (res.confirm) {
let list = [];
let mtdr = [];
if (index > 0) {
console.log('222' + that.imageList.length);
console.info('index111:' + index);
mtdr = that.imageList.splice(0, index);
}
if (index != that.imageList.length - 1) {
console.log('3333' + that.imageList.length);
console.info('index:' + index);
mtdr = mtdr.concat(that.imageList.splice(index + 1, that.imageList.length - 1));
}
that.imageList = mtdr;
}
}
});
},
chooseImage: async function() {
console.info('1111111');
if (this.imageList.length === 9) {
let isContinue = await this.isFullImg();
console.log('是否继续?', isContinue);
if (!isContinue) {
return;
}
}
uni.chooseImage({
// sourceType: this.sourceType[this.sourceTypeIndex],
sizeType: this.sizeType[this.sizeTypeIndex],
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: res => {
this.imageList = this.imageList.concat(res.tempFilePaths);
},
fail(err) {
console.info('进入：' + JSON.stringify(err));
}
});
},
isFullImg: function() {
return new Promise(res => {
uni.showModal({
content: '已经有9张图片了,是否清空现有图片？',
success: e => {
if (e.confirm) {
this.imageList1 = [];
res(true);
} else {
res(false);
}
},
fail: () => {
res(false);
}
});
});
},
previewImage1: function(e) {
var current = e.target.dataset.src;
uni.previewImage({
current: current,
urls: this.imageList1
});
},
uploaderror: function() {
console.log('上传过程遇到错误');
},
// 选择图片时引起的数据变化
imgsChange: function(imgs) {
this.selectedimgs = imgs;
},
handelImgsChange: function(imgs) {
this.handlerImgs = imgs;
},
imgLoaded: function(res) {
this.subtxt = '数据提交中';
console.log(res);
console.log(this.textareaVal);
console.info('上传图片显示' + JSON.stringify(this.selectedimgs));
// 提交数据 图片信息保存在 res 内[ 数组形式 ]
// 内容保存在 textareaVal
//连接 api 提交即可
//提交成功页面跳转
},
// 清空图片
clearAllImgs: function() {
this.selectedimgs = [];
this.$refs.selectimgandupload.clearAllImgs();
},
removeImg: function(e) {
console.log('被删除的图片信息');
console.log(e);
},
onnodeclick(e) {},
onpopupopened(e) {
console.log('popupopened' + JSON.stringify(e));
},
onpopupclosed(e) {
console.log('popupclosed' + JSON.stringify(e));
},
onchange(e) {
console.info('数据' + e.detail.value);
console.info('数据' + JSON.stringify(e.detail));
for (let type of e.detail.value) {
if (type.id) {
this.handleDeptType = type.id;
}
}
}
}
};
</script>
<style>
page {
background-color: #fffbfb;
}
.input-content {
padding-top: 10upx;
padding-bottom: 10upx;
padding-left: 10upx;
height: 80upx;
margin-right: 20upx;
width: 75%;
font-size: 26upx;
background-color: #ffffff;
}
.input-placeholder {
background-color: #ffffff;
font-size: 26upx;
padding-top: 10upx;
padding-bottom: 10upx;
padding-left: 10upx;
color: #999999;
}
.but {
margin-top: 10px;
width: 288upx;
height: 78upx;
background: #0a346e;
font-size: 28upx;
color: #ffffff;
}
.input-title {
width: 25%;
height: 80rpx;
font-size: 28rpx;
line-height: 80rpx;
color: #666666;
}
.picker-content {
color: #999999;
width: 80%;
font-size: 26upx;
padding-bottom: 10upx;
padding-left: 10upx;
margin-top: 30upx;
margin-right: 20upx;
background-color: #ffffff;
}
.grace-form-input1 {
width: 100%;
height: 40rpx;
outline: none;
line-height: 40rpx;
margin: 20rpx 0;
background: none;
border: 0;
text-align: center;
color: #333333;
font-size: 26rpx;
background-color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
