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.
287 lines
9.1 KiB
287 lines
9.1 KiB
<template>
|
|
<div :class="[prefixCls, 'flex']">
|
|
<mai-tab :active="current.id" :data-source="tabs" @change="handleChange"/>
|
|
<div :class="`${prefixCls}-content`">
|
|
<h2>{{ current.title }}</h2>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form v-if="current.type === 1" ref="form" :model="formData" :rules="rules1"
|
|
label-position="left"
|
|
label-width="120px">
|
|
<el-form-item prop="country" label="通报国家">
|
|
<el-input v-model="formData.country" placeholder="全部"/>
|
|
</el-form-item>
|
|
<el-form-item prop="number" label="通报号">
|
|
<el-input v-model="formData.number" placeholder="请输入通报号"/>
|
|
</el-form-item>
|
|
<el-form-item prop="title" label="通报标题">
|
|
<el-input v-model="formData.title" placeholder="请输入通报标题"/>
|
|
</el-form-item>
|
|
<el-form-item prop="content" label="评议意见">
|
|
<el-input v-model="formData.content" type="textarea" row="5"
|
|
placeholder="请输入评议意见"/>
|
|
</el-form-item>
|
|
<el-form-item label="附件">
|
|
<el-upload
|
|
v-model:file-list="formData.fileList"
|
|
action="/api/common/upload"
|
|
:http-request="handleUpload"
|
|
accept=".jpg,.png,.bmp,.jpeg,.gif,.webp,.zip,.rar,.wav,.mp4,.mp3,.webm,.pdf"
|
|
>
|
|
<div class="mai-upload">
|
|
<el-icon size="68">
|
|
<el-icon-plus></el-icon-plus>
|
|
</el-icon>
|
|
<div style="margin-top: 8px">点击上传</div>
|
|
</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item prop="author" label="提交人">
|
|
<el-input v-model="formData.author" placeholder="请输入提交人"/>
|
|
</el-form-item>
|
|
<el-form-item prop="contact" label="联系方式">
|
|
<el-input v-model="formData.contact" placeholder="请输入联系方式"/>
|
|
</el-form-item>
|
|
<el-form-item label-width="500px">
|
|
<el-button @click="handleSubmit" type="primary">提交</el-button>
|
|
<!-- <el-button style="margin-left: 10px">关闭</el-button>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form v-else ref="form" :model="consultFormData" :rules="rules2" label-position="left"
|
|
label-width="120px">
|
|
<el-form-item prop="title" label="标题">
|
|
<el-input v-model="consultFormData.title" placeholder="请输入标题"/>
|
|
</el-form-item>
|
|
<el-form-item prop="content" label="内容">
|
|
<el-input v-model="consultFormData.content" type="textarea" placeholder="请输入内容"/>
|
|
</el-form-item>
|
|
<el-form-item label="附件">
|
|
<el-upload
|
|
v-model:file-list="consultFormData.fileList"
|
|
action="/api/common/upload"
|
|
:http-request="handleUpload"
|
|
accept=".jpg,.png,.bmp,.jpeg,.gif,.webp,.zip,.rar,.wav,.mp4,.mp3,.webm,.pdf"
|
|
>
|
|
<div class="mai-upload">
|
|
<el-icon size="68">
|
|
<el-icon-plus></el-icon-plus>
|
|
</el-icon>
|
|
<div style="margin-top: 8px">点击上传</div>
|
|
</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item prop="author" label="提交人">
|
|
<el-input v-model="consultFormData.author" placeholder="请输入提交人"/>
|
|
</el-form-item>
|
|
<el-form-item prop="contact" label="联系方式">
|
|
<el-input v-model="consultFormData.contact" placeholder="请输入联系方式"/>
|
|
</el-form-item>
|
|
<el-form-item label-width="500px">
|
|
<el-button @click="handleSubmit" type="primary">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {randomUUID} from '~~/utils';
|
|
definePageMeta({
|
|
name: '通报评议',
|
|
headerHost: false,
|
|
order: 7,
|
|
})
|
|
useHead({
|
|
title:'通报评议'
|
|
})
|
|
const {prefixCls} = useDesign('mai-wrap');
|
|
const {setBannerTitle} = useAppStore();
|
|
const {commonApi, commentApi} = useApi()
|
|
const tabs = ref([
|
|
{
|
|
name: '通报评议',
|
|
id: randomUUID(),
|
|
children: [
|
|
{name: "我要评议", id: randomUUID(), type: 1},
|
|
{name: "我要咨询", id: randomUUID(), type: 2},
|
|
],
|
|
},
|
|
]);
|
|
const formData = ref({
|
|
fileList: [],
|
|
country: '',
|
|
number: '',
|
|
title: '',
|
|
content: '',
|
|
attachfile: '',
|
|
author: '',
|
|
contact: '',
|
|
});
|
|
const consultFormData = ref({
|
|
fileList: [],
|
|
title: '',
|
|
content: '',
|
|
attachfile: '',
|
|
author: '',
|
|
contact: '',
|
|
})
|
|
const rules1 = ref({
|
|
country: {message: '请输入通报国家', required: true, trigger: 'blur'},
|
|
number: {message: '请输入通报号', required: true, trigger: 'blur'},
|
|
title: {message: '请输入通报标题', required: true, trigger: 'blur'},
|
|
content: {message: '请输入评议意见', required: true, trigger: 'blur'},
|
|
author: {message: '请输入提交人', required: true, trigger: 'blur'},
|
|
contact: {message: '请输入联系方式', required: true, trigger: 'blur'},
|
|
})
|
|
const rules2 = ref({
|
|
title: {message: '请输入标题', required: true, trigger: 'blur'},
|
|
content: {message: '请输入意见', required: true, trigger: 'blur'},
|
|
author: {message: '请输入提交人', required: true, trigger: 'blur'},
|
|
contact: {message: '请输入联系方式', required: true, trigger: 'blur'},
|
|
})
|
|
const form = ref(null);
|
|
const current = ref(tabs.value[0].children[0]);
|
|
console.log('_tabs[0].children[0].id>>>', tabs.value[0].children[0].id);
|
|
|
|
function handleChange(data) {
|
|
current.value = data;
|
|
setBannerTitle(data.name);
|
|
}
|
|
|
|
handleChange(tabs.value[0].children[0]);
|
|
|
|
function handleUpload(options) {
|
|
if (current.value.type === 1) {
|
|
const index = formData.value.fileList.findIndex(i => i.uid === options.file.uid);
|
|
commonApi.handleUpload(options.file).then(res => {
|
|
formData.value.fileList.splice(index, 1, {
|
|
...formData.value.fileList[0],
|
|
url: res.data.fullurl
|
|
})
|
|
}).catch(res => {
|
|
if (!res.data) {
|
|
formData.value.fileList.splice(index, 1)
|
|
}
|
|
})
|
|
}else {
|
|
const index = consultFormData.value.fileList.findIndex(i => i.uid === options.file.uid);
|
|
commonApi.handleUpload(options.file).then(res => {
|
|
consultFormData.value.fileList.splice(index, 1, {
|
|
...consultFormData.value.fileList[0],
|
|
url: res.data.fullurl
|
|
})
|
|
}).catch(res => {
|
|
if (!res.data) {
|
|
consultFormData.value.fileList.splice(index, 1)
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
function handleSubmit() {
|
|
form.value.validate((val) => {
|
|
if (val) {
|
|
console.log(formData.value)
|
|
console.log('val: >>>>>', val)
|
|
const origin = import.meta.env.VITE_GLOB_ORIGIN
|
|
if (current.value.type === 1) {
|
|
const params = Object.assign({}, formData.value)
|
|
params.attachfile = params.fileList.map(it=> it.url.replace(origin, '')).join(',')
|
|
delete params.fileList;
|
|
commentApi.submitComment(params).then(()=> {ElMessage.success('提交成功'); form.value.resetFields(); formData.value.fileList = []})
|
|
}else {
|
|
const params = Object.assign({}, consultFormData.value)
|
|
params.attachfile = params.fileList.map(it=> it.url.replace(origin, '')).join(',')
|
|
delete params.fileList;
|
|
commentApi.submitConsult(params).then(()=> {ElMessage.success('提交成功'); form.value.resetFields(); consultFormData.value.fileList = []})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$prefix-cls: '#{$name-prefix}-mai-wrap';
|
|
|
|
.#{$prefix-cls} {
|
|
:deep(.el-form) {
|
|
padding: 20px 0 0 20px;
|
|
margin: -36px 0 0 -20px;
|
|
border-left: 1px solid #ddd;
|
|
|
|
.el-form-item__label {
|
|
font-size: 20px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.el-input__wrapper, .el-textarea {
|
|
height: 60px;
|
|
font-size: 20px;
|
|
//border: 1px solid #02294F;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 0 1px #02294F;
|
|
|
|
//&:focus{;}
|
|
}
|
|
|
|
.is-error .el-input__wrapper,
|
|
.is-error .el-textarea {
|
|
box-shadow: 0 0 0 1px var(--el-color-danger);
|
|
}
|
|
|
|
.el-textarea, .el-textarea__inner {
|
|
//box-shadow: unset;
|
|
height: 300px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
resize: none;
|
|
}
|
|
|
|
.el-upload-list-picture-card-container {
|
|
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.el-upload {
|
|
border: unset;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.el-button {
|
|
width: 150px;
|
|
height: 60px;
|
|
font-size: 20px;
|
|
border-radius: 10px;
|
|
|
|
&--primary {
|
|
background: #022950;
|
|
}
|
|
}
|
|
|
|
.mai-upload {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid #022950;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
font-size: 16px;
|
|
color: #9a9a9a;
|
|
|
|
.anticon {
|
|
font-size: 60px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|