<template>
<view>
<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '问题诉求情况'">
<block slot="backText">返回</block>
<block slot="content">问题诉求情况</block>
</cu-custom>
<form @submit="formSubmit" class="cu-list menu">
<view class="titlebg2">
<view class="titlet1" ></view>
<view class="titlet2" >企业信息</view>
</view>
<view class="textbg">
<view class="text12">
企业名称
</view>
<view class="text22">
{{inputForm.name}}
</view>
</view>
<view class="textbg">
<view class="text12">
属地
</view>
<view class="text22">
{{inputForm.qySd}}
</view>
</view>
<view class="textbg">
<view class="text12">
企业负责人
</view>
<view class="text22">
{{inputForm.lxr}}
</view>
</view>
<view class="textbg">
<view class="text12">
负责人号码
</view>
<view class="text22">
{{inputForm.phone}}
</view>
</view>
<view style="height: 30rpx;background-color: white;"></view>
<view class="titlebg2" style="margin-top:10rpx ;">
<view class="titlet1" ></view>
<view class="titlet2" >挂钩干部</view>
</view>
<view class="textbg">
<view class="text12">
姓名
</view>
<view class="text22">
{{inputForm.bz5}}
</view>
</view>
<view style="height: 30rpx;background-color: white;"></view>
<view class="titlebg2" style="margin-top:10rpx ;">
<view class="titlet1" ></view>
<view class="titlet2" >主要问题诉求</view>
</view>
<view v-for="(item, index2) in questionList">
<view style="display: flex;background-color: #ffffff;justify-content: space-between; align-items: center;">
<view class="titlebb">
问题{{index2+1}}
</view>
<!-- <icon v-if="index2!=0" @click="del(index2)" type="cancel" style="padding-right: 15rpx;padding-top: 5rpx;padding-left: 100rpx;"></icon> -->
</view>
<view class="input1">
<view class="title">
问题名称
</view>
<input v-model="item.qname" placeholder="请填写问题名称" disabled="true" ></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">
问题类型
</view>
<view class="input2">{{item.qtype||'请选择问题类型'}}</view>
</view>
<view class="cu-form-group margin-top" v-if="item.t1!=''">
<view class="title">
{{item.t1}}
</view>
<input style="width: 200rpx;" v-model="item.gaps" :placeholder="item.t1s" disabled="true"></input>{{item.t1d}}
</view>
<view class="cu-form-group margin-top" style="border-bottom: 3px solid #eee;">
<view class="title">
问题描述
</view>
<textarea v-model="item.des" placeholder="请填写问题描述" disabled="true" ></textarea>
</view>
<!-- 挂钩干部 -->
<view class="cu-form-group margin-top" v-if="roleIds=='1910141956174053377'" >
<view class="title">
问题处理
</view>
<radio-group @change="(e) => radioChange(e, index2)" class="radiog">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item3, index3) in dels" :key="item3">
<view>
<radio :value="item3" :checked="index3 === item.current" :disabled="index3 != item.current&&!item.cansubmit" />
</view>
<view style="padding-left: 15rpx;">{{item3}}</view>
</label>
</radio-group>
</view>
<!-- 大走访办公室 -->
<view class="cu-form-group margin-top" v-if="roleIds=='1910175386924417025'" >
<view class="title">
问题处理
</view>
<radio-group @change="(e) => radioChange(e, index2)" class="radiog">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item3, index3) in dels2" :key="item3">
<view>
<radio :value="item3" :checked="index3 === item.current" :disabled="index3 != item.current&&!item.cansubmit"/>
</view>
<view style="padding-left: 15rpx;">{{item3}}</view>
</label>
</radio-group>
</view>
<!-- 挂钩干部或大走访办公室 -->
<view class="cu-form-group margin-top" v-if="roleIds=='1910175386924417025'||roleIds=='1910141956174053377'" >
<view class="title">
预计办结时间
</view>
<picker mode="date" class="title2" @change="(e) => onDateChange(e, index2)" v-if="item.cansubmit" >
<view class="input2">{{item.finishdate||'请选择'}}</view>
</picker>
<view class="input2" v-if="!item.cansubmit">{{item.finishdate||'请选择'}}</view>
</view>
<view v-if="showjbdw" class="cu-form-group margin-top" >
<view class="title">
交办单位
</view>
<zqs-select
class="input2"
:multiple="true"
:list="pickerData"
label-key="label"
value-key="value"
placeholder=" 请选择"
title="请选择交办单位"
clearable
v-model="item.checkUserList"
@search="searchEvent"
@change="selectChange2"
></zqs-select>
</view>
<view class="cu-form-group margin-top" v-if="(roleIds=='1910175386924417025'||roleIds=='1910141956174053377')&&showjbdw">
<view class="title">
交办要求
</view>
<textarea v-model="item.delyj" placeholder="请填写交办要求" ></textarea>
</view>
<view class="cu-form-group margin-top" v-if="(roleIds=='1910175386924417025'||roleIds=='1910141956174053377')&&!showjbdw">
<view class="title">
处理建议
</view>
<textarea v-model="item.delyj" placeholder="请填写处理建议" :disabled="!item.cansubmit" ></textarea>
</view>
<!-- <view class="cu-form-group2 margin-top" style="border-bottom: 3px solid #eee;">
<view class="title">
附件：
</view>
<button @click="addfj" style="height: 30px;width: 240rpx;margin-left: 55rpx;" class="cu-btn block bg-blue margin-tb-sm lg">+上传附件</button>
</view>
<view v-for="(item3, index3) in item.fj">
<view style="display: flex;background-color: #ffffff;justify-content: space-between; align-items: center;">
<view class="titlebb">
{{item3.fjname}}
</view>
<icon @click="del(index3)" type="cancel" style="padding-right: 15rpx;padding-top: 5rpx;padding-left: 100rpx;"></icon>
</view>
</view> -->
<view class="cu-form-group margin-top" style="border-bottom: 3px solid #eee;" v-if="roleIds=='1910175386924417025'||roleIds=='1910141956174053377'">
<uni-file-picker style="margin-bottom: 10px;" limit="3" ref="picFile" v-model="item.fj"
fileMediatype="all" mode="grid" title="附件上传" :auto-upload="autoUpload" @select="select"
@progress="progress" @success="success" @fail="fail" @delete="deleteFile"
:imageStyles="imageStyles" :disabled="ischeck">
</uni-file-picker>
</view>
<!-- 流程展示 -->
<view v-for="(record, index4) in item.oplist" :key="index4" class="record-item" @click="viewDetails(record)" style="border-bottom: 6px solid #eee;">
<view style="display: flex; flex-direction:row;align-items: center; ">
<view v-if="item.oplist.length!=1" :class="index4 === item.oplist.length - 1 ? 'record-p2' : 'record-p1'"></view>
<view v-if="item.oplist.length==1" class="record-p1"></view>
<text class="record-time">{{ record.opTypeName }}</text>
</view>
<view style="display: flex; flex-direction:row;align-items: center; ">
<view class="submit-time">
<text v-if="record.des6!=''&&record.des6!=undefined" >处理建议：{{ record.des6 }}</text>
<text v-if="record.des5!=''&&record.des5!=undefined" >预计办结时间：{{ record.des5 }}</text>
<text >{{ record.roleName }}-{{ record.des2 }} {{ record.updateDate }}</text>
</view>
</view>
</view>
</view>
<!-- <view style="width: 400rpx;margin-left: 20rpx;">
<button @click="addp" style="height: 30px;" class="cu-btn block bg-blue margin-tb-sm lg">+增加问题</button>
</view> -->
<view style="height: 40rpx;"></view>
<view class="flexC" v-if="cansubmit">
<button v-if="roleIds=='38a14f1f42ed424eab4cb5d489596b0d'" @click="save" class="bt1 block margin-tb-sm lg">暂存</button>
<button form-type="submit" class="bt1 cu-btn block bg-blue margin-tb-sm lg">提交</button>
</view>
<view style="height: 40rpx;"></view>
</form>
</view>
</template>
<script>
var graceChecker = require("@/common/graceChecker.js");
import revenueListService from '@/api/revenue/revenueListService'
import loginService from '@/api/auth/loginService.js'
import * as $auth from "../../common/auth"
export default {
components: {
},
data() {
return {
title: '问题诉求情况',
cansubmit: false,
roleIds:'',
uid:'',
inputForm: {
id:'',
name: '',
industry: '',
lxr: '',
phone: '',
bz1: '',
bz2: '',
bz3: '',
bz4: '',
bz5: '',
bz6: '',
des1: '',
des2: '',
des3: '',
des4: '',
des6: '',
des10: '',
},
t1: '可供产品',
t1s: '请填写可供产品',
t2: '可供数量',
t2s: '请填写可供数量',
t3: '详细描述',
t3s: '请填写详细描述',
autoUpload: false,
picLists: [],
picUrl: [],
imageStyles: {
width: 90,
height: 90
},
parkList: [ "用工人才", "资金需求", "土地厂房", "订单及配套", "政策兑现", "创新及品牌", "审批手续", "水电气供应", "安全环保消防", "其他（需详细说明）"],
questionList:[{qname:"",qtype:"",qTypeindex:"",gaps:"",des:"",t1:"",t1s:""}],
dels:["办结","反馈大走访活动办","正在办理","难以化解","持续跟踪","提请会办"],
dels2:["办结","交办"],
index:0,
ischeck: false,
showjbdw: false,
importUserId: [],
pickerData: [],
pickerDataOld: [],
selectedValues: []
}
},
computed: {
// 动态计算选中的 label
selectedLabels() {
return this.item.checkUserList
.map((value) => {
const item = this.pickerData.find((option) => option.value === value);
return item ? item.label : value; // 如果找不到，返回 value
})
.join(", ");
},
},
onShow() {
this.$auth.checkLogin()
loginService.getDictList({
dictTypeId:"1907700775364263937"
}).then(({data}) => {
this.pickerData = data
this.pickerDataOld = data
//默认第一个选项
//this.checkUserList=this.pickerData[0].value;
}).catch(e => {
})
},
watch: {
value2(val) {
console.log('我是更新后的选中数据', val)
},
},
created() {
},
mounted() {
},
async onLoad(query) {
this.uid= $auth.getUserInfo().id;
if(query.ischeck!=undefined&&query.ischeck=='1'){
//查看
this.ischeck=true;
let data2 = await loginService.getdzfQuestionqueryById({id:query.id})
this.inputForm.id = data2.data.id;
this.inputForm.name = data2.data.qyName;
this.inputForm.qySd = data2.data.qySd;
this.inputForm.lxr = data2.data.qyFzr;
this.inputForm.phone = data2.data.phone;
this.inputForm.bz5 = data2.data.officer;
//判断是否显示提交，暂存按钮
if(data2.data.states=='1'&&data2.data.des1.includes($auth.getUserInfo().loginName)){
this.cansubmit=true;
}
//将流程的最后一步设置到查看（问题处理，预计办结时间，处理建议）
for (let i = 0; i < data2.data.dzfQuestionDetilDTOList.length; i++) {
let opsize=data2.data.dzfQuestionDetilDTOList[i].oplist.length;
for (let j = 0; j < opsize; j++) {
//当前登录人
if (data2.data.dzfQuestionDetilDTOList[i].oplist[j].createBy.id === this.uid) {
//问题处理
if(data2.data.dzfQuestionDetilDTOList[i].oplist[j].opType=='3'){
data2.data.dzfQuestionDetilDTOList[i].current=0
}else if(data2.data.dzfQuestionDetilDTOList[i].oplist[j].opType=='4'){
data2.data.dzfQuestionDetilDTOList[i].current=1
}else if(data2.data.dzfQuestionDetilDTOList[i].oplist[j].opType=='5'){
data2.data.dzfQuestionDetilDTOList[i].current=2
}else if(data2.data.dzfQuestionDetilDTOList[i].oplist[j].opType=='6'){
data2.data.dzfQuestionDetilDTOList[i].current=3
}else if(data2.data.dzfQuestionDetilDTOList[i].oplist[j].opType=='7'){
data2.data.dzfQuestionDetilDTOList[i].current=4
}else if(data2.data.dzfQuestionDetilDTOList[i].oplist[j].opType=='8'){
data2.data.dzfQuestionDetilDTOList[i].current=5
}
//处理建议
data2.data.dzfQuestionDetilDTOList[i].delyj=data2.data.dzfQuestionDetilDTOList[i].oplist[j].des6
}
}
//办结时间就是显示最后一条处理意见的办结时间
if(data2.data.dzfQuestionDetilDTOList[i].oplist[opsize-1].des5!=undefined&&data2.data.dzfQuestionDetilDTOList[i].oplist[opsize-1].des5!=''){
data2.data.dzfQuestionDetilDTOList[i].finishdate=data2.data.dzfQuestionDetilDTOList[i].oplist[opsize-1].des5
}
//每条问题是否需要提交
if(data2.data.dzfQuestionDetilDTOList[i].des1!=undefined){
let nextuser=data2.data.dzfQuestionDetilDTOList[i].des1+",";
if(nextuser.includes($auth.getUserInfo().loginName+",")){
data2.data.dzfQuestionDetilDTOList[i].cansubmit=true;
}else{
data2.data.dzfQuestionDetilDTOList[i].cansubmit=false;
}
}else{
data2.data.dzfQuestionDetilDTOList[i].cansubmit=false;
}
data2.data.dzfQuestionDetilDTOList[i].checkUserList=[];
}
this.questionList=data2.data.dzfQuestionDetilDTOList;
this.roleIds= $auth.getUserInfo().roleIds;
}else{
//新增
let data2 = await loginService.queryByUserName()
this.inputForm = this.recover(this.inputForm, data2.data)
this.inputForm.id="";
}
},
methods: {
//交办单位
selectChange2() {
// 此处为点击的事件
this.pickerData=this.pickerDataOld;
},
searchEvent(val) {
this.pickerData=this.filteredItems(val);
},
filteredItems(searchQuery) {
const query = searchQuery.trim();
if (!query) return this.pickerDataOld;
return this.pickerDataOld.filter(item => {
return item.label.toString().includes(query);
});
},
//交办单位结束
onDateChange(e,index2) {
this.$set(this.questionList[index2], 'finishdate', e.detail.value);
},
radioChange: function(evt,index2) {
//大走访办公室角色时
if(this.roleIds=='1910175386924417025'){
if(evt.detail.value=='办结'){
this.showjbdw=false;
this.questionList[index2].delyj="";
}else if(evt.detail.value=='交办'){
this.showjbdw=true;
this.questionList[index2].delyj="请2日内回应，10内反馈办理结果，如办结请上传加盖公章的书面材料";
}
for (let i = 0; i < this.dels2.length; i++) {
if (this.dels2[i] === evt.detail.value) {
this.questionList[index2].current = i;
break;
}
}
//其他选择
}else{
console.log("选择："+evt.detail.value);
for (let i = 0; i < this.dels.length; i++) {
if (this.dels[i] === evt.detail.value) {
this.questionList[index2].current = i;
break;
}
}
}
},
addfj(){
},
addp(){
this.questionList.push({qname:"",qtype:"",qTypeindex:"",gaps:"",des:"",t1:"",t1s:""})
},
del(index2){
this.questionList.splice(index2, 1);
},
bindPickerChange: function(e,index2) {
if(e.detail.value==0){
this.questionList[index2].t1='缺口数';
this.questionList[index2].t1s= '请填写缺口数';
this.questionList[index2].t1d= '人';
}else if(e.detail.value==1){
this.questionList[index2].t1='缺口数';
this.questionList[index2].t1s= '请填写缺口数';
this.questionList[index2].t1d= '万元';
}else if(e.detail.value==2){
this.questionList[index2].t1='缺口数';
this.questionList[index2].t1s= '请填写缺口数';
this.questionList[index2].t1d= '';
}else{
this.questionList[index2].t1='';
this.questionList[index2].t1s= '';
this.questionList[index2].t1d= '';
}
this.questionList[index2].qTypeindex = e.detail.value;
this.questionList[index2].qtype=this.parkList[e.detail.value]
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
// 上传成功
success(e) {
console.log('上传成功')
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
},
deleteFile(e) {
this.picUrl.splice(e.index, 1)
},
// 获取上传状态
select(e) {
console.log('选择文件：', e)
var _this = this
var i = 0
upload()
function upload() {
if (i >= e.tempFiles.length) {
return;
}
var item = e.tempFiles[i]
uni.showLoading({
title: "上传中",
mask: true
});
uni.uploadFile({
url: '/yd_qycpfb/file/upload?uploadPath=userdir', // 仅为示例，非真实的接口地址
filePath: item.url,
name: 'file',
formData: {
'fileName': item.name
},
header: {
'token': _this.$auth.getUserToken()
},
success: (res) => {
var data = res.data
if (typeof data['error'] != "undefined") {
uni.showToast({
icon: 'none',
title: '上传失败，请联系开发！'
});
_this.$refs.picFile.clearFiles(_this.picLists.length)
} else {
_this.picUrl.push({
url: data,
uuid: item.uuid
})
i++;
upload()
}
},
fail: () => {
uni.hideLoading();
uni.showToast({
icon: 'none',
title: '上传失败，请联系开发！'
});
_this.$refs.picFile.clearFiles(_this.picLists.length)
},
complete: function() {
uni.hideLoading();
}
});
}
},
save(){
console.log("交办单位："+this.checkUserList)
// this.inputForm.des10="";
// this.inputForm.dzfQuestionDetilDTOList=this.questionList;
// this.checkinput();
},
formSubmit: function(e) {
//将交办单位的名称带出
for (let i = 0; i < this.questionList.length; i++) {
if (this.questionList[i].checkUserList != []) {
this.questionList[i].checkUserListName=this.questionList[i].checkUserList.map((value) => {
const item = this.pickerData.find((option) => option.value === value);
return item ? item.label : value; // 如果找不到，返回 value
})
.join(", ");
}
this.questionList[i].checkUserList=this.questionList[i].checkUserList.join(",");
}
this.inputForm.dzfQuestionDetilDTOList=this.questionList;
this.checkinput();
},
checkinput(){
if(this.hasDuplicateQName(this.questionList)){
uni.showToast({
icon: 'none',
title: '问题名称不能重复！'
});
}else{
uni.showLoading()
loginService.save2OpRecord(this.inputForm).then(({
data
}) => {
uni.hideLoading();
uni.showToast({
title: "提交成功！",
icon: "success"
});
uni.navigateTo({
url: '/pages/question/questionList'
})
}).catch((e) => {
uni.hideLoading();
})
}
},
hasDuplicateQName(array) {
const seen = new Set();
for (const item of array) {
if (seen.has(item.qname)) {
return true; // 找到重复的 qName
}
seen.add(item.qname);
}
return false; // 没有重复的 qName
}
}
}
</script>
<style>
/* .file-title) {
font-size: 17px !important;
} */
input,textarea{
color: #8799a3;
}
.input1{
background-color: #ffffff;
padding: 1upx 40upx;
display: flex;
align-items: center;
padding-top: 20upx;
border-bottom: 1px solid #eee;
}
.input1 .title {
text-align: justify;
padding-right: 30upx;
font-size: 30upx;
position: relative;
height: 60upx;
line-height: 60upx;
border: ;
}
.title2{
width: 75%;
text-align: left;
}
.input2 {
flex: 1;
font-size: 30upx;
color: #555;
padding-right: 20upx;
width: 500rpx;
}
.uni-input{
}
.textbg{
display: flex;
background-color: white;
padding-top: 29rpx;
}
.text12{
width: 200rpx;
margin-left: 30rpx;
color: #000000;
font-size: 29rpx;
}
.text2{
flex: 1;
color: #000000;
font-size: 30rpx;
padding-bottom: 2rpx;
}
.text22{
flex: 1;
color: #666666;
font-size: 29rpx;
padding-bottom: 2rpx;
align-self: flex-end;
}
.titlebg2{
display: flex;
background-color: white;
padding-left: 22rpx;
padding-top: 35rpx;
padding-bottom: 25rpx;
margin-bottom: 2rpx;
}
.titlet1{
width: 7rpx;
margin-top: 7rpx;
margin-bottom: 7rpx;
background-color: #2752eb;
margin-right: 8rpx;
}
.titlet2{
font-weight: 800;
color: #2752eb;
}
.titlebb{
color: #000000;
font-weight: 800;
padding-left: 40rpx;
background-color: #ffffff;
padding-top: 20rpx;
}
.flexC{
display: flex;
}
.bt1{
flex:1;
margin: 30rpx;
}
.bt2{
flex:1;
margin: 30rpx;
}
.radiog{
flex:1;
margin: 10rpx;
}
.uni-list-cell{
display: flex;
}
.cu-form-group2{
background-color: #ffffff;
padding: 0.5px 22px;
display: flex;
align-items: center;
min-height: 44px;
}
.modal-content {
padding: 20px;
}
.record-item {
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.record-p1{
width: 10px;
height: 10px;
border-radius: 100px;
background-color: rgb(60, 156, 255);
}
.record-p2{
width: 10px;
height: 10px;
border-radius: 100px;
background-color: rgb(150, 151, 153);
}
.record-x1{
width: 20rpx;
height: 100%;
background-color: rgb(150, 151, 153);
}
.record-name {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
margin-left: 10rpx;
}
.record-time {
font-size: 28rpx;
margin-left: 10rpx;
color: #666;
margin-bottom: 10rpx;
}
.submit-time {
font-size: 14px;
color: #666;
margin-left: 28rpx;
position: relative;
display: flex;
flex-direction:column;
}
.submit-time::before {
content: '';
position: absolute;
left: -10px;
top: 0;
height: 100%;
width: 1px;
background-color:rgb(150, 151, 153);
}
</style>