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.
 
 

907 lines
29 KiB

<template>
<div class="address_edit">
<!-- 导航栏 -->
<!-- <div class="header_body">
<header-nav
:slefBack="true"
@goBack="goBack"
:titelText="`在线投诉`"
>
</header-nav>
</div>-->
<!-- 中间 -->
<div v-if="submitData.comOrOpi==1">
<van-form @failed="onFailed" @submit="submit">
<van-cell-group>
<view v-if="data.isSelect=='true'">
<van-field
v-model="submitData.lawEnforcementIncidentText"
label="相关事项"
placeholder="请选择"
readonly
required
:rules="[{ required: true, message: '请选择相关事项' }]"
clickable
is-link
@click="showPopup"
/>
</view>
<view v-else>
<van-field
v-model="submitData.lawEnforcementIncidentText"
label="相关事项"
placeholder="请选择"
readonly
required
:rules="[{ required: true, message: '请选择相关事项' }]"
clickable
is-link
/>
</view>
<Popup :visible="popupVisible" :content="popupContent" @close="closePopup" @reciveData="reciveData"/>
<van-divider class="divdsty"/>
<van-field
v-model="submitData.problemDescription"
rows="5"
autosize
label="意见|建议"
type="textarea"
maxlength="100"
placeholder="请输入"
required
:rules="[{ required: true, message: '请输入意见|建议' }]"
show-word-limit
/>
<van-divider class="divdsty"/>
<van-field
v-model="submitData.linkman"
label="联系人"
placeholder="联系人"
required
:rules="[{ required: true, message: '请填写联系人' }]"
/>
<van-field
v-model="submitData.linkmanTel"
label="联系电话"
placeholder="联系电话"
required
:rules="[{ validator, message: '请输入正确内容' }]"
/>
<div class="agree-box">
<span class="remsty">是否授权</span>
<span class="accept-item"><input class="checksty" type="checkbox" name="" value=""
v-model="data.isCheckedon" @click="selectCh(1)">同意</span>
<span class="accept-item"><input class="checksty" type="checkbox" name="" value=""
v-model="data.isCheckedoff" @click="selectCh(0)">不同意</span>
</div>
<div class="agree-remark">
<span class="accept-item">注:选择“同意”,处置部门将通过登记的联系人、联系电话与您联系,并对您的个人信息严格保密。</span>
</div>
</van-cell-group>
<van-action-bar>
<!-- <van-action-bar-button color="#1367fe" text="提交" @click="submit"/>-->
<van-button round block type="info" native-type="submit">提交</van-button>
</van-action-bar>
</van-form>
</div>
<div v-else class="warp_body">
<!-- <span class="rigbtn" @click="toNoScanView">入企不扫码投诉</span> -->
<van-form @failed="onFailed" @submit="submit">
<van-cell-group>
<view v-if="data.isSelect=='true'">
<van-field
v-model="submitData.lawEnforcementIncidentText"
label="投诉事项"
placeholder="请选择"
readonly
required
:rules="[{ required: true, message: '请选择投诉事项' }]"
clickable
is-link
@click="showPopup"
/>
</view>
<view v-else>
<van-field
v-model="submitData.lawEnforcementIncidentText"
label="投诉事项"
placeholder="请选择"
readonly
:rules="[{ required: true, message: '请选择投诉事项' }]"
rows="1"
autosize
type="textarea"
/>
</view>
<Popup :visible="popupVisible" :content="popupContent" @close="closePopup" @reciveData="reciveData"/>
<van-field
v-model="submitData.enforceTypeText"
required
:rules="[{ required: true, message: '请选择投诉类型' }]"
label="投诉类型"
placeholder="请选择"
is-link
readonly
clickable
/>
<!-- @click="selectType" -->
<van-popup v-model:show="data.showPicker" position="bottom">
<van-picker
v-model="data.selectTypeValue"
:columns="data.columns"
@cancel="data.showPicker = false"
@confirm="onConfirm"
/>
</van-popup>
<div v-if="data.uniteCheck != '' && data.uniteCheck != null" v-for="(item, index) in data.depts" :key="index">
<van-field
v-model="item.text"
label="执法部门"
readonly
required
clickable
:right-icon="(data.depts.length - index ) == 1 ? 'add-o' : 'close'"
@click-right-icon="(data.depts.length - index ) == 1 ? addDept(index) : cancelDept(index)"
:rules="[{ required: true, message: '请选择执法部门' }]"
placeholder="请选择执法部门"
@click-input="showPopup(index)"
/>
</div>
<van-divider class="divdsty"/>
<van-field
label="投诉内容"
required
/>
<van-field class="complaint-cont"
v-model="submitData.problemDescription"
rows="5"
autosize
type="textarea"
maxlength="100"
show-word-limit
placeholder="请输入投诉内容"
:rules="[{ required: true, message: '请输入投诉内容' }]"
/>
<van-divider class="divdsty"/>
<div class="file-upload">
<div class="file-upload-center">
<label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label> <span>(不多于 8张)</span>
</div>
<van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="8"
:after-read="uploadFiles" :before-delete="deleteFile">
<template #preview-cover="{ file }">
<div class="preview-cover van-ellipsis">{{ file.name }}</div>
</template>
</van-uploader>
</div>
<van-divider class="divdsty"/>
<van-field
v-model="submitData.enterpriseAddress"
rows="3"
autosize
label="涉事地址"
type="textarea"
placeholder="请填写详细地址"
required
:rules="[{ required: true, message: '请填写详细地址' }]"
show-word-limit
/>
<van-divider class="divdsty"/>
<van-field
v-model="submitData.linkman"
label="联系人"
placeholder="联系人"
required
:rules="[{ required: true, message: '请填写联系人' }]"
/>
<van-field
v-model="submitData.linkmanTel"
label="联系电话"
placeholder="联系电话"
required
:rules="[{ validator, message: '请输入正确内容' }]"
/>
<div class="agree-box">
<span class="remsty">是否授权</span>
<span class="accept-item"><input class="checksty" type="checkbox" name="" value=""
v-model="data.isCheckedon" @click="selectCh(1)">同意</span>
<span class="accept-item"><input class="checksty" type="checkbox" name="" value=""
v-model="data.isCheckedoff" @click="selectCh(0)">不同意</span>
</div>
<div class="agree-remark">
<span class="accept-item">注:选择“同意”,处置部门将通过登记的联系人、联系电话与您联系,并对您的个人信息严格保密。</span>
</div>
</van-cell-group>
<van-action-bar>
<!-- <van-action-bar-button color="#1367fe" text="提交" @click="submit"/>-->
<van-button round block type="info" native-type="submit">提交</van-button>
</van-action-bar>
</van-form>
</div>
</div>
<UniteDept :visible="data.popupVisible" :deptList="data.dataList" @close="closePopup" @reciveData="reciveDept"/>
</template>
<script setup name="register">
import {showSuccessToast, showLoadingToast, closeToast, Toast} from 'vant';
import {addEnterpriseComplaint,selectRegistrationList} from '@/api/enterprise'
import {getDict} from '@/api/Home'
import {uploadFile} from '@/util/fileUpload'
import {reactive, ref} from "vue";
import * as w6s from 'szient-js-sdk';
import UniteDept from '@/views/enterprise/compaint/uniteDept.vue';
const {useCommon, useMy} = $globalStore
const router = useRouter();
const route = useRoute();
let queryaddressId = ref("");
const data = reactive({
searchResult: [],
showPicker: false,
columns: [],
selectTypeValue: ref[0],
isSelect: true,
isCheckedon: false,
isCheckedoff: false,
popupVisible: false,
depts: [[{text: "", id: ""}]],
uniteCheck:"",
dataList: [],
});
//保存参数
const submitData = reactive({
// 用户id
userId: ref(useCommon.userId),
//关联事项ID
relId: "",
//事项名称
lawEnforcementIncidentText: "",
lawEnforcementIncident: "",
//企业名称
enterpriseName: "",
//纳税识别号
enterpriseNumber: "",
//执法投诉
enforceType: "",
enforceTypeText: "",
//投诉内容
problemDescription: "",
//涉事地址
enterpriseAddress: "",
//联系人
linkman: "",
//联系电话
linkmanTel: "",
// 是否授权
authorization: 1,
//后台保存图片列表
fileList: [],
//vant组件上传照片列表
fileListObj: [],
comOrOpi: 0,
complaintDepartmentIds:"",
complaintDepartments:"",
complaintType: 1,
})
// 返回
const goBack = () => {
router.go(-1);
};
const validator = (val) => /^1[34578]\d{9}$/.test(val);
const onFailed = (errorInfo) => {
console.log('failed', errorInfo);
};
const submit = () => {
submitData.enterpriseNumber = useCommon.enterpriseNumber;
const deptNameArr = [];
const deptIdArr = [];
for (let index = 0; index < data.depts.length; index++) {
const element = data.depts[index];
console.log(element)
deptNameArr.push(element.text);
deptIdArr.push(element.id);
}
submitData.complaintDepartmentIds = deptIdArr.join(",");
submitData.complaintDepartments = deptNameArr.join(",");
addEnterpriseComplaint(submitData, success => {
console.log(success)
//跳转企业二维码地址
if (success.success) {
if(submitData.comOrOpi==1) {
showSuccessToast("建议成功");
} else {
showSuccessToast("投诉成功");
}
console.log("登记成功");
setTimeout(() => {
goBack();
}, 2000);
}
}, error => {
console.log("投诉失败")
})
}
//消息提醒
// const toast = showLoadingToast({
// duration: 0,
// forbidClick: true,
// message: '提交成功',
// });
// let second = 3;
// const timer = setInterval(() => {
// second--;
// if (second) {
// } else {
// clearInterval(timer);
// closeToast();
// }
// }, 1000);
// 保存地址操作
const onSave = () => {
router.replace({name: "addressList"});
};
const onConfirm = (value) => {
data.showPicker = false;
console.log(value)
submitData.enforceType = value.selectedValues[0];
submitData.enforceTypeText = value.selectedOptions[0].text;
}
const selectType = () => {
data.showPicker = true;
// console.log(data)
}
const selectCh = (val) => {
submitData.authorization = val;
if (val == 0) {
data.isCheckedon = false;
data.isCheckedoff = true;
} else {
data.isCheckedon = true;
data.isCheckedoff = false;
}
}
const uploadFiles = (file) => {
if(Array.isArray(file)){
file.forEach((item,index)=>{
uploadFile(item, (res) => {
submitData.fileList.push(res.url)
});
});
}else{
uploadFile(file, (res) => {
submitData.fileList.push(res.url)
});
}
}
const deleteFile = (file, index) => {
// submitData.fileListObj.filter((item, indexs) => {
// if (index.index == indexs) {
// submitData.fileListObj.splice(indexs, 1);//splice 删除
// }
// });
submitData.fileList.filter((item, indexs) => {
if (index.index == indexs) {
submitData.fileList.splice(indexs, 1);//splice 删除
}
});
return true;
}
onMounted(() => {
console.log("================")
console.log(submitData.userId);
console.log("================")
// 如果是直接投诉页面则直接定死字典
if (submitData.comOrOpi!=1) {
submitData.enforceType = 3;
submitData.enforceTypeText = "入企不扫码";
}
submitData.relId = route?.query?.id;
submitData.lawEnforcementIncidentText = route?.query?.lawEnforcementItemText;
submitData.complaintDepartments = route?.query?.complaintDepartments;
submitData.complaintDepartmentIds = route?.query?.complaintDepartmentIds;
data.isSelect = route?.query?.isSelect;
submitData.comOrOpi = route?.query?.comOrOpi;
if(route?.query?.complaintDepartmentIds != null && route?.query?.complaintDepartmentIds != ''){
data.depts = [{text: route?.query?.complaintDepartments,id: route?.query?.complaintDepartmentIds}]
}
getDict({"dictType": "caseType"}, success => {
console.log(success);
success.data.forEach(res => {
console.log(res)
var obj = null;
if (res.dictValue != 3) {
obj = {text: res.dictLabel, value: res.dictValue};
}
if (obj != null) {
data.columns.push(obj)
}
})
}, error => {
})
//查询联合执法部门
data.uniteCheck = route?.query?.uniteCheck;
if(data.uniteCheck!= null && data.uniteCheck != ''){
selectRegistrationList({"uniteCheck":data.uniteCheck},success =>{
console.log(success.data);
for (let index = 0; index < success.data.length; index++) {
const element = success.data[index];
var obj = {
"deptName": element.bureauDeptName,
"deptId": element.bureauDeptId,
}
data.dataList.push(obj)
}
},error =>{
})
}
});
const toNoScanView = () => {
router.push({
path: "/enterprise/complaintNoScan"
})
}
const reciveData = (item) => {
console.log(item)
submitData.lawEnforcementIncidentText = item.lawEnforcementItemText;
submitData.lawEnforcementIncident = item.lawEnforcementItem;
submitData.relId = item.id;
}
const getAddressInfo = () => {
console.log(url);
const access_key = '6374106c5eb449a4ad6c2430f30796e6';
const access_secret = '434fec85aa5846e88bbeb8fac6cf6d7f';
// generateRandomNumber()
const nonce = "887954";
const timestamp = `${Date.now()}`;
const str = [access_secret, nonce, timestamp]
.sort()
.reduce((str, item) => str += item, '');
// 最终还需要转成全小写
const signature = sha1(str).toString().toLowerCase();
var siqObject = {
access_key: access_key,
nonce: nonce,
timestamp: timestamp,
signature: signature,
};
console.log(siqObject);
//深i企鉴权
w6s.config(siqObject)
.then((res) => {
// 成功
console.log("鉴权成功", res);
w6s.ready(() => {
w6s.location.getLocation({
success: function (res) {
console.log(res)
},
fail: function (err) {
},
});
});
})
.catch((err) => {
// 失败
// console.log(err)
console.log("鉴权失败", err);
});
}
const showPopup = () => {
data.popupVisible = true;
}
const closePopup = () => {
data.popupVisible = false;
}
const reciveDept = (item) =>{
console.log(item);
var text = '';
var code_id = '';
const arr = [];
for (let index = 0; index < item.length; index++) {
const element = item[index];
console.log(element)
var obj = {text: element.deptName, id: element.deptId}
arr.push(obj);
text += element.deptName + ',';
code_id += element.deptId + ',';
}
console.log(arr)
data.depts = arr;
submitData.lawEnforcementIncidentText = text.substring(0, text.length-1);
submitData.complaintItemCodes = code_id.substring(0, code_id.length-1);
console.log(data.depts.value)
}
const cancelDept = (index) => {
data.depts.splice(index, 1);
}
const addDept = (index) => {
data.depts.push({text: "", id: ""});
}
</script>
<style lang="less" scoped>
.address_edit {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background-color: #ebf3fb;
}
.warp_body {
margin: 0 3%;
padding-bottom: 1rem;
width: 94%;
height: calc(100% - 1.15rem);
background-color: #fff;
overflow-y: auto;
margin-top: 0.15rem;
}
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
.van-popup.van-toast {
background: var(--van-toast-background) !important;
box-sizing: content-box !important;
/* 下面3条css,影响不大 */
transition: all var(--van-duration-fast) !important;
width: var(--van-toast-default-width) !important;
max-width: var(--van-toast-max-width) !important;
}
.van-popup.van-toast .van-toast__icon {
font-size: var(--van-toast-icon-size) !important;
}
.divdsty {
margin: auto;
width: 100%;
height: 0.25rem;
background-color: #f4f4f4;
border: 0;
}
.file-upload {
position: relative;
min-height: 3.0rem;
max-height: 6.5rem;
padding: 1rem 0.27rem 0.27rem 0.43rem;
box-sizing: border-box;
}
.file-upload-center {
position: absolute;
top: 0.27rem;
left: 0.43rem;
width: 90%;
height: 0.65rem;
font-size: 0.37rem;
span {
font-size: 0.32rem;
color: #b9b9b9;
}
}
.file {
position: relative;
width: 100%;
height: calc(100% - 1.5rem);
}
/deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
width: 1.95rem !important;
}
.preview-cover {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: 4px;
color: #fff;
font-size: 0.32rem;
text-align: center;
background: rgba(0, 0, 0, 0.3);
}
.rigbtn {
float: right;
position: relative;
z-index: 1;
margin: 0.3rem 0.5rem;
padding: 0.2rem 0.3rem;
background-color: #e9f2fb;
color: #1367fe;
border-radius: 1rem;
font-size: 0.3rem;
}
.popup {
position: fixed;
z-index: 999;
top: 3rem;
left: 0;
width: 100%;
height: calc(100% - 3rem);
background: #fff;
overflow: hidden;
}
.popup-title {
margin: 0.3rem 0 0;
width: 100%;
height: 1rem;
border-bottom: 1px solid #f3f4f5;
text-align: center;
font-size: 0.45rem;
font-weight: 600;
}
.close-button {
position: absolute;
top: 0.15rem;
right: 0.1rem;
width: 0.8rem;
height: 0.8rem;
background-color: rgba(255, 255, 255, .5);
border: 0.05rem solid rgba(255, 255, 255, .7);
border-radius: 50%;
transform: rotate(45deg);
}
.close-button:before,
.close-button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
height: 0.4rem;
width: 0.02rem;
}
.close-button:after {
height: 0.02rem;
width: 0.4rem;
}
.popup-content {
margin: 0.25rem 3% 0;
padding-bottom: 3rem;
width: 94%;
height: calc(100% - 1.6rem);
overflow-y: auto;
font-size: 0.37rem;
}
.subsearch {
width: 100%;
height: 1.25rem;
}
.searchbox {
margin: 2% 3%;
padding: 0.15rem 0.3rem 0.1rem 1.15rem;
width: 94%;
height: 1.0rem;
background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
background-position: left 0.5rem center;
background-size: auto 50%;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 0.5rem;
color: #999999;
outline: none;
}
.subtitle {
margin: 0.5rem 0 0.25rem;
font-size: 0.4rem;
font-weight: 600;
}
.quick-item {
display: flex;
}
.quick-item span {
display: inline-block;
margin: 1% 0 2% 3.5%;
padding: 2% 3.75%;
background: #f2f3f4;
border: 0;
border-radius: 8px;
color: #4c4c4c;
}
.quick-item span.seled {
background: #e9f2fb;
color: #1367fe;
}
.btnbox {
display: flex;
justify-content: center;
margin: 5% 2%;
width: 96%;
height: 1.0rem;
}
.btn-reset,
.btn-search {
display: inline-block;
margin: 0 2%;
padding: 0;
width: 60%;
color: #fff;
font-size: 0.35rem;
border-radius: 1rem;
background: #1367fe;
border: 1px solid #1367fe;
text-align: center;
}
.btn-reset {
width: 35%;
background-color: #fff;
border-color: rgba(19, 103, 254, .7);
color: #1367fe;
}
.search-result {
width: 100%;
padding-bottom: 2rem;
}
.case-item {
margin: 3% 2%;
padding: 2% 0;
width: 96%;
font-size: 0.35rem;
border-bottom: 1px solid #f4f4f4;
color: #999;
line-height: 2;
}
.case-title {
margin: 2% 0;
font-size: 0.42rem;
color: #333;
line-height: 1.25;
}
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
.van-popup.van-toast {
background: var(--van-toast-background) !important;
box-sizing: content-box !important;
/* 下面3条css,影响不大 */
transition: all var(--van-duration-fast) !important;
width: var(--van-toast-default-width) !important;
max-width: var(--van-toast-max-width) !important;
}
.van-popup.van-toast .van-toast__icon {
font-size: var(--van-toast-icon-size) !important;
}
.agree-box {
display: flex;
align-items: center;
height: 1.5rem;
}
.agree-box .remsty {
margin: 0.5rem 0.5rem;
padding-left: 0.85rem;
background: url("../../assets/images/icon_remind.png") no-repeat left center;
background-size: auto 100%;
font-size: 0.5rem;
font-weight: 600;
}
.accept-item {
display: flex;
align-items: center;
margin: 0 0.15rem;
font-size: 0.42rem;
}
.checksty {
margin: 0 0.25rem;
width: 0.5rem;
height: 0.5rem;
}
.agree-remark {
.accept-item {
font-size: 0.3rem;
padding: 0px 10px;
width: 80%;
color: #969799
}
height: 1.4rem;
}
/deep/ .van-button {
margin: 5% 3%;
padding: 0;
width: 94%;
height: 1rem;
color: #fff;
font-size: 0.4rem;
border-radius: 1rem;
background: #1367fe;
border: 0.01rem solid #1367fe;
text-align: center;
}
/deep/ .van-action-bar {
box-shadow: 0 0 0.27rem #e5e5e5;
}
.complaint-cont {
margin: -5px 0.43rem 2%;
padding: 0.1rem 0.2rem;
width: calc(100% - 0.86rem);
border: 1px solid #f5f6f7;
border-radius: 0.15rem;
box-sizing: border-box;
line-height: 1.5;
font-size: 0.37rem;
}
/deep/ .complaint-cont textarea.van-field__control {
padding: 0.1rem;
text-align: justify;
}
/deep/ .van-picker-column__item--selected {
background: #e5eef9;
color: #000;
font-weight: 600;
}
/deep/ .van-field .van-field__control {
color: #666;
}
/deep/ .van-field__label--required:before {
margin-left: -0.2rem;
}
/deep/ .van-field textarea.van-field__control {
line-height: 1.5;
}
</style>