|
|
@ -102,17 +102,55 @@ |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
<el-dialog class="addForm" v-model="addFormisible" width="500px"> |
|
|
|
<el-form> |
|
|
|
<el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm"> |
|
|
|
<el-form class="addForm" label-width="4vw" label-position="left"> |
|
|
|
<el-form-item label="精网号" required> |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入驳回理由" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="客户姓名" required> |
|
|
|
<el-input v-model="addFormData.userName" placeholder="请输入客户姓名" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属地区" required> |
|
|
|
<el-input disabled="true" v-model="addFormData.market" placeholder="请输入所属地区" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="活动名称" required> |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="产品名称" required> |
|
|
|
<el-select placeholder="请选择产品名称" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款币种" required> |
|
|
|
<el-select placeholder="请选择付款币种" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款金额" required> |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="支付方式" required> |
|
|
|
<el-select placeholder="请选择支付方式" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款时间" required> |
|
|
|
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="转账凭证" required> |
|
|
|
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" |
|
|
|
list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload" |
|
|
|
:on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload"> |
|
|
|
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar" |
|
|
|
style="height: 100%; width: 100%; object-fit: cover;" /> |
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
<Plus /> |
|
|
|
</el-icon> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="驳回理由" required> |
|
|
|
<el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" |
|
|
|
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" |
|
|
|
show-word-limit /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button @click="addFormisible = false">取消</el-button> |
|
|
|
<el-button type="primary" @click="handleReject">确定</el-button> |
|
|
|
<el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button> |
|
|
|
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
@ -120,20 +158,85 @@ |
|
|
|
</template> |
|
|
|
<script setup> |
|
|
|
import { ref } from 'vue'; |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import API from '@/util/http.js' |
|
|
|
|
|
|
|
//================= 客服新增弹窗 ================== |
|
|
|
const addFormData = ref({ |
|
|
|
|
|
|
|
}) |
|
|
|
const addFormisible = ref(false) |
|
|
|
const uploadRef = ref() |
|
|
|
const openAddForm = () => { |
|
|
|
addFormisible.value = true |
|
|
|
} |
|
|
|
const addFormData = ref({ |
|
|
|
const closeAddForm=()=>{ |
|
|
|
addFormisible.value = false |
|
|
|
addFormData.value={} |
|
|
|
} |
|
|
|
|
|
|
|
const handleImgSuccess = (response, uploadFile) => { |
|
|
|
try { |
|
|
|
console.log('11', response) |
|
|
|
addFormData.value.imageUrl = response.data.url |
|
|
|
console.log('22', response.data.url) |
|
|
|
} catch (error) { |
|
|
|
console.log('报错信息', error) |
|
|
|
ElMessage.error(response.msg || '图片上传失败') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handelImgErr = (err) => { |
|
|
|
console.log(err); |
|
|
|
addFormData.value.imageUrl = null |
|
|
|
ElMessage.error("图片上传失败") |
|
|
|
} |
|
|
|
const beforeUpload = (rawFile) => { |
|
|
|
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') { |
|
|
|
ElMessage.error('图片必须是jpg或png类型!') |
|
|
|
return false |
|
|
|
} else if (rawFile.size / 1024 / 1024 > 1) { |
|
|
|
ElMessage.error('图片大小不能超过 1MB!') |
|
|
|
return false |
|
|
|
} |
|
|
|
return true |
|
|
|
} |
|
|
|
const handleImageChange = (file) => { |
|
|
|
uploadRef.value.submit() |
|
|
|
} |
|
|
|
|
|
|
|
const customUpload = async (options) => { |
|
|
|
try { |
|
|
|
const formData = new FormData() |
|
|
|
formData.append('file', options.file) |
|
|
|
|
|
|
|
const response = await API({ |
|
|
|
url: 'https://api.homilychart.com/hljw/api/aws/upload', |
|
|
|
method: 'POST', |
|
|
|
data: formData, |
|
|
|
headers: { |
|
|
|
'Content-Type': 'multipart/form-data' |
|
|
|
} |
|
|
|
}) |
|
|
|
if (response.code === 200 && response.data) { |
|
|
|
handleImgSuccess(response, options.file) |
|
|
|
ElMessage.success(response.msg || '上传成功') |
|
|
|
} else { |
|
|
|
options.onError(response) |
|
|
|
ElMessage.error(response.msg || '上传失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('上传错误:', error) |
|
|
|
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) |
|
|
|
} |
|
|
|
} |
|
|
|
//========================分页相关================== |
|
|
|
const pageInfo = ref({ |
|
|
|
pageSize: 10, |
|
|
|
pageNum: 1 |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const total = ref(0) |
|
|
|
const tableData = [ |
|
|
|
{ |
|
|
@ -252,8 +355,31 @@ const tableData = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.addForm ::v-deep .el-dialog__body{ |
|
|
|
:deep(.adddialog) { |
|
|
|
min-width: 450px; |
|
|
|
background-color: #E7F4FD !important; |
|
|
|
|
|
|
|
.addForm { |
|
|
|
padding: 0 3vw 1vh 1vw; |
|
|
|
|
|
|
|
.el-date-editor { |
|
|
|
display: flex; |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.dialog-footer{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
padding-bottom: 1.5vh; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.adddialog .el-form-item__label) { |
|
|
|
min-width: 80px; |
|
|
|
width: auto; |
|
|
|
font-weight: 800; |
|
|
|
padding-bottom: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |