<template>
|
<div class="bodyCont">
|
<el-scrollbar style="width: 100%">
|
<h2 class="h2title">{{ state.dialogData.title }}</h2>
|
<div class="close-icon" @click="closeDialog">
|
<el-icon size="24"><CloseBold color="#fff" /></el-icon>
|
</div>
|
<el-form
|
ref="ruleFormRef"
|
:model="state.basicInfoForm"
|
:rules="rules"
|
class="basic-info-form"
|
label-width="auto"
|
>
|
<el-form-item class="form-item" label="申请人">
|
<span>{{ state.basicInfo.applyUserName }}</span>
|
</el-form-item>
|
<el-form-item class="form-item" label="申请日期">
|
<span>{{ state.basicInfo.applyDate }}</span>
|
</el-form-item>
|
<el-form-item class="form-item" label="产品名称">
|
<span>{{ state.basicInfo.name }}</span>
|
</el-form-item>
|
<el-form-item class="form-item" label="产品介绍">
|
<p v-html="state.basicInfo.describe"></p>
|
</el-form-item>
|
<el-form-item class="form-item" label="行业领域">
|
<span>{{ state.basicInfo.industrialChainName }}</span>
|
</el-form-item>
|
<el-form-item class="form-item" label="单位工程">
|
<span>{{ state.basicInfo.importantAreaName }}</span>
|
</el-form-item>
|
<el-form-item class="form-item" label="授权开始日期">
|
{{ state.basicInfo.applyStartDate }}
|
</el-form-item>
|
<el-form-item class="form-item" label="授权结束日期">
|
{{ state.basicInfo.applyEndDate }}
|
</el-form-item>
|
<el-form-item class="form-item" label="申请理由">
|
{{ state.basicInfo.applyReason }}
|
</el-form-item>
|
<el-form-item class="form-item" label="交易管理">
|
<div class="fileDiv">
|
<span
|
class="filelist"
|
v-for="file in state.basicInfo.customTradeFileList"
|
:key="file.fileId"
|
@click="handleFilePreview(file)"
|
>{{ file.originalName }}</span
|
>
|
</div>
|
</el-form-item>
|
<el-form-item class="form-item" label="审批意见" prop="opinion">
|
<el-input
|
class="ipt"
|
v-model="state.basicInfoForm.opinion"
|
:rows="3"
|
maxlength="250"
|
type="textarea"
|
show-word-limit
|
placeholder="请输入审批意见"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<div class="btnDiv">
|
<el-button size="large" @click="handleCancel">取消</el-button>
|
<el-button
|
type="primary"
|
size="large"
|
:disabled="state.btnLoading"
|
@click="subscriptionPasskt('pass')"
|
>审批通过</el-button
|
>
|
<el-button
|
type="primary"
|
size="large"
|
:disabled="state.btnLoading"
|
plain
|
@click="subscriptionPasskt('rejected')"
|
>驳回</el-button
|
>
|
<el-button type="primary" size="large" @click="traceRow"
|
>追踪</el-button
|
>
|
</div>
|
</el-scrollbar>
|
<filePreview
|
v-if="showfilePreviewDiv"
|
ref="filePreviewHtmlRef"
|
@closePreview="handleClosePreview"
|
></filePreview>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import subscriptionApi from '@/api/subscription'
|
import router from '@/router'
|
|
import {
|
ElNotification,
|
ElMessageBox,
|
FormRules,
|
FormInstance,
|
} from 'element-plus'
|
import _ from 'lodash'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import Base64 from '@/utils/base64'
|
const userStore = useUserInfo() // 用户相关的
|
// 个人信心的基本内容类型设定
|
interface BasicInfoType {
|
id?: string // 客户id
|
}
|
|
const state = reactive<any>({
|
visible: false,
|
dialogData: {
|
title: '产品使用申请',
|
informationEditType: 'apply',
|
id: '',
|
},
|
disabledData: true,
|
basicInfo: {},
|
basicInfoForm: {
|
opinion: '',
|
userUseId: '',
|
},
|
fileId: '', // 文件ID
|
opinion: '',
|
btnLoading: false,
|
})
|
|
// 将子组件的事件触发暴露给父组件
|
const emit = defineEmits(['closeDialog', 'updataFun'])
|
// 关闭弹窗
|
const closeDialog = () => {
|
emit('closeDialog')
|
}
|
// 跟踪
|
const traceRow = () => {
|
const token = userStore.getAdminToken
|
router.push({
|
path: '/approve/tracePage',
|
query: {
|
info: Base64.encode(
|
JSON.stringify({
|
name: '订阅',
|
id: state.dialogData.data.id,
|
flowId: state.dialogData.data.flowId,
|
token: token,
|
})
|
),
|
},
|
})
|
}
|
// 表单的ref
|
const ruleFormRef = ref<FormInstance>()
|
|
// 表单验证规则
|
const rules = reactive<FormRules>({
|
opinion: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
|
})
|
const filePreviewHtmlRef = ref()
|
const showfilePreviewDiv = ref<boolean>(false)
|
|
const handleCancel = () => {
|
emit('closeDialog')
|
}
|
const handleClosePreview = () => {
|
showfilePreviewDiv.value = false
|
}
|
const subscriptionPasskt = (type: string) => {
|
ruleFormRef.value?.validate((valid: any) => {
|
if (valid) {
|
const data = {
|
id: state.dialogData.userUseId,
|
operationType: type,
|
opinion: state.basicInfoForm.opinion,
|
taskId: state.dialogData.data.taskId,
|
}
|
state.btnLoading = true
|
subscriptionApi
|
.setAuditingComplete({ ...data })
|
.then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '操作成功！',
|
})
|
emit('closeDialog', 'refresh')
|
state.btnLoading = false
|
}
|
})
|
.catch(() => {
|
state.btnLoading = false
|
})
|
} else {
|
return false
|
}
|
})
|
}
|
// 保存基本信息
|
// const saveCustomerBasicInfo = (data: any) => {
|
// const params = _.cloneDeep(data)
|
// if (params.id) {
|
// // 编辑- 更新
|
// updateCustomerInfo(params)
|
// } else {
|
// // 新增
|
// addNewInformation(params)
|
// }
|
// }
|
|
// // 新增基本信息-存草稿
|
// const addNewInformation = (data: any) => {
|
// optionService
|
// .optionCreateUrl({
|
// ...data,
|
// })
|
// .then((res) => {
|
// console.log('res------', res)
|
// if (res.code == 200) {
|
// ElNotification({
|
// type: 'success',
|
// message: '信息保存成功',
|
// })
|
|
// state.visible = false
|
|
// // 更新数据
|
// emit('updataFun')
|
// }
|
// })
|
// }
|
|
// 取消
|
const cancelFun = () => {
|
state.visible = false
|
// 更新数据
|
emit('updataFun')
|
}
|
const getDetailInfo = () => {
|
subscriptionApi
|
.getSubscriptionDetail({
|
userUseId: state.dialogData.userUseId,
|
})
|
.then((res: any) => {
|
if (res.code == 200) {
|
state.basicInfo = res.data
|
if (state.basicInfo.fileInfos && state.basicInfo.fileInfos.length > 0) {
|
state.basicInfo.customTradeFileList = []
|
state.basicInfo.customEvaluationFileList = []
|
state.basicInfo.fileInfos.forEach((item: any) => {
|
if (item.fileKind == 'trade') {
|
state.basicInfo.customTradeFileList.push(item)
|
}
|
if (item.fileKind == 'evaluation') {
|
state.basicInfo.customEvaluationFileList.push(item)
|
}
|
})
|
}
|
}
|
})
|
}
|
// 控制弹窗的显示
|
const visibleShow = (data: any) => {
|
state.dialogData = data
|
getDetailInfo()
|
}
|
const handleFilePreview = (file: any) => {
|
if (file.suffix == '.pdf' || file.suffix == '.docx') {
|
showfilePreviewDiv.value = true
|
nextTick(() => {
|
filePreviewHtmlRef.value.visibleShow(file)
|
})
|
}
|
}
|
// 将方法暴露给父组件
|
defineExpose({
|
visibleShow,
|
})
|
|
// 设置侦听器
|
onMounted(() => {})
|
</script>
|
|
<style scoped lang="scss">
|
.bodyCont {
|
z-index: 99;
|
position: absolute;
|
top: 0;
|
right: 0;
|
left: 0;
|
bottom: 0;
|
background-color: #fff;
|
|
.basic-info-form {
|
padding: 10px 20px 60px 20px;
|
}
|
|
.btnDiv {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
bottom: 0;
|
padding-bottom: 15px;
|
left: 0;
|
right: 0;
|
background-color: #fff;
|
z-index: 99;
|
}
|
|
.fileDiv {
|
width: 100%;
|
min-height: 60px;
|
display: flex;
|
flex-direction: column;
|
.filelist {
|
color: #536be2;
|
font-size: 15px;
|
cursor: pointer;
|
max-width: 400px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
&:hover {
|
font-weight: 600;
|
font-size: 15px;
|
}
|
}
|
}
|
}
|
.form-item {
|
margin-bottom: 15px;
|
}
|
.h2title {
|
border-left: 5px solid #35a4ff;
|
font-size: 18px;
|
font-weight: 600;
|
padding-left: 10px;
|
margin: 15px 0 0px 20px;
|
}
|
.close-icon {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 40px;
|
height: 40px;
|
background-color: #3d6bfa;
|
border-bottom-left-radius: 60px;
|
padding-left: 10px;
|
padding-top: 5px;
|
cursor: pointer;
|
z-index: 99;
|
}
|
ul li {
|
list-style-type: none;
|
list-style: none;
|
}
|
</style>
|
