513 lines
15 KiB
Vue
513 lines
15 KiB
Vue
<template>
|
||
<home-header></home-header>
|
||
<div class="main-cont">
|
||
<div class="main">
|
||
<div class="top">
|
||
<div class="form-container">
|
||
<div class="title">基础信息</div>
|
||
<a-form
|
||
ref="formRef"
|
||
:model="formName"
|
||
name="basic"
|
||
:label-col="{ style: { width: '106px' } }"
|
||
:wrapper-col="{ style: { width: '230px' } }"
|
||
labelAlign="left"
|
||
autocomplete="off"
|
||
>
|
||
<div class="base-info">
|
||
<a-form-item
|
||
label="申请人"
|
||
name="applyUserName"
|
||
:rules="[{ required: true, message: '请输入申请人' }]"
|
||
>
|
||
<a-input
|
||
disabled="true"
|
||
placeholder="请输入申请人"
|
||
v-model:value="formName.applyUserName"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
style="margin: 0 22px"
|
||
label="申请人电话"
|
||
name="applyUserPhone"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
pattern: /^1[3456789]\d{9}$/,
|
||
message: '请输入正确的电话号码',
|
||
},
|
||
]"
|
||
>
|
||
<a-input
|
||
disabled="true"
|
||
placeholder="请输入申请人电话"
|
||
v-model:value="formName.applyUserPhone"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="申请单位"
|
||
name="applyUserDeptName"
|
||
:rules="[{ required: true, message: '请输入申请单位' }]"
|
||
>
|
||
<a-input
|
||
disabled="true"
|
||
placeholder="请输入申请单位"
|
||
v-model:value="formName.applyUserDeptName"
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
|
||
<div class="title">需求信息</div>
|
||
|
||
<a-tooltip placement="top" mouseEnterDelay="1">
|
||
<template #title>
|
||
<span>{{ formName.demandSubject }}</span>
|
||
</template>
|
||
<a-form-item
|
||
label="需求标题"
|
||
name="demandSubject"
|
||
style="width: 350px"
|
||
:rules="[{ required: true, message: '请输入需求标题' }]"
|
||
>
|
||
<a-input
|
||
disabled="true"
|
||
placeholder="请输入需求标题"
|
||
v-model:value="formName.demandSubject"
|
||
/>
|
||
</a-form-item>
|
||
</a-tooltip>
|
||
|
||
<a-form-item
|
||
style="margin-bottom: 10px"
|
||
label="需求类型"
|
||
name="请选择需求类型"
|
||
>
|
||
<a-select
|
||
disabled="true"
|
||
ref="select"
|
||
v-model:value="formName.detailsType"
|
||
@focus="focus"
|
||
style="width: 200px"
|
||
>
|
||
<a-select-option value="基础设施">基础设施</a-select-option>
|
||
<a-select-option value="数据资源">数据资源</a-select-option>
|
||
<a-select-option value="组件服务">组件服务</a-select-option>
|
||
<a-select-option value="应用资源">应用资源</a-select-option>
|
||
<a-select-option value="知识库">知识库</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<a-tooltip placement="top" mouseEnterDelay="1">
|
||
<template #title>
|
||
<span>{{ formName.detailsField }}</span>
|
||
</template>
|
||
<a-form-item
|
||
label="应用领域"
|
||
name="detailsField"
|
||
style="width: 350px"
|
||
:rules="[{ required: true, message: '请输入应用领域' }]"
|
||
>
|
||
<a-input
|
||
disabled="true"
|
||
placeholder="请输入应用领域"
|
||
v-model:value="formName.detailsField"
|
||
/>
|
||
</a-form-item>
|
||
</a-tooltip>
|
||
|
||
<a-form-item
|
||
style="margin-bottom: 10px"
|
||
label="需求描述"
|
||
name="demandDetails"
|
||
:rules="[{ required: true, message: '请输入需求描述' }]"
|
||
>
|
||
<a-textarea
|
||
disabled="true"
|
||
style="
|
||
width: 500px;
|
||
height: 150px;
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
color: #333;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
resize: none;
|
||
"
|
||
v-model:value="formName.demandDetails"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="formName.enclosure"
|
||
style="color: #666; font-size: 16px"
|
||
label="附件下载"
|
||
>
|
||
<button
|
||
style="
|
||
width: 100px;
|
||
height: 30px;
|
||
margin-right: 10px;
|
||
background: rgb(237, 244, 252);
|
||
color: rgb(0, 135, 255);
|
||
font-size: 14px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgb(187, 211, 239);
|
||
padding: 0px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
"
|
||
@click="downloadFile(formName.enclosure, '申请附件')"
|
||
>
|
||
下载
|
||
</button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
</div>
|
||
<div class="middle">
|
||
<div class="evaluate">
|
||
<div>
|
||
<a-textarea
|
||
v-model:value="myComment"
|
||
placeholder="写下你的评论..."
|
||
style="width: 500px; height: 50px"
|
||
/>
|
||
</div>
|
||
<a-button
|
||
style="margin-top: 20px"
|
||
type="primary"
|
||
class="btn-first"
|
||
@click="evaluateSubmit"
|
||
>
|
||
发布评论
|
||
</a-button>
|
||
</div>
|
||
<a-list
|
||
class="comment-list"
|
||
:header="`全部${total || 0} 评论`"
|
||
item-layout="horizontal"
|
||
:data-source="evaluateData"
|
||
>
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>
|
||
<a-comment :author="item.name">
|
||
<!-- <template v-if="item.name == user.applyUserName" #actions>
|
||
<a-popconfirm
|
||
title="确定删除评论?"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm="confirm(item)"
|
||
@cancel="cancel"
|
||
>
|
||
<span>删除</span>
|
||
</a-popconfirm>
|
||
</template> -->
|
||
<template #content>
|
||
<p v-if="!evaluateUpdateStatus">
|
||
{{ item.comment }}
|
||
</p>
|
||
<!-- <p v-else>
|
||
<a-input-group compact>
|
||
<a-input
|
||
v-model:value="evaluateUpdateComment"
|
||
style="width: calc(100% - 200px)"
|
||
/>
|
||
<a-button type="primary">提交</a-button>
|
||
</a-input-group>
|
||
</p> -->
|
||
</template>
|
||
<template #datetime>
|
||
<span>{{ item.createDeptName }}</span>
|
||
<a-tooltip :title="item.createDate">
|
||
<span>{{ item.createDate }}</span>
|
||
</a-tooltip>
|
||
</template>
|
||
</a-comment>
|
||
</a-list-item>
|
||
</template>
|
||
<a-pagination
|
||
size="small"
|
||
pageSize="8"
|
||
:total="total"
|
||
v-model:current="page"
|
||
@change="handleCurrentChange"
|
||
/>
|
||
</a-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// import { useStore } from 'vuex'
|
||
import { useRouter } from 'vue-router'
|
||
import { message } from 'ant-design-vue'
|
||
import { onMounted, ref } from 'vue'
|
||
import HomeHeader from '@/views/home/components/header'
|
||
import {
|
||
demandComment,
|
||
demandCommentPage,
|
||
// demandCommentDelete,
|
||
demandCommentApply,
|
||
} from '@/api/demandCenter'
|
||
import { getUser, getUserInfo } from '@/api/home'
|
||
import { getDemandForm } from '@/api/personalCenter'
|
||
const user = {
|
||
applyUserName: '',
|
||
applyUserDeptName: '',
|
||
}
|
||
getUser().then((res) => {
|
||
user.applyUserName = res.data.data.realName
|
||
getUserInfo(res.data.data.id).then((res) => {
|
||
user.applyUserDeptName = res.data.data.deptName
|
||
})
|
||
})
|
||
//删除提示框
|
||
// const confirm = (item) => {
|
||
// console.log(item)
|
||
// evaluateDelete(item)
|
||
// }
|
||
|
||
// const cancel = (e) => {
|
||
// console.log(e)
|
||
// message.error('已取消删除')
|
||
// }
|
||
// const store = useStore()
|
||
const router = useRouter()
|
||
|
||
//表单信息
|
||
const formName = ref({})
|
||
|
||
const evaluateData = ref([])
|
||
|
||
const myComment = ref('')
|
||
const evaluateSubmit = () => {
|
||
if (myComment.value === '') {
|
||
message.error('请填写评价！')
|
||
return
|
||
}
|
||
|
||
demandComment({
|
||
targetId: formName.value.id,
|
||
createDeptName: user.applyUserDeptName,
|
||
comment: myComment.value,
|
||
name: user.applyUserName,
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '0') {
|
||
demandCommentApply({ id: res.data.data.id }).then((res1) => {
|
||
if (res1.data.code == '0') {
|
||
message.success('提交评价成功！')
|
||
myComment.value = ''
|
||
evaluateList()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
// const evaluateUpdateStatus = ref(false)
|
||
// const evaluateUpdateComment = ref('')
|
||
// const evaluateUpdate = () => {
|
||
// evaluateUpdateStatus.value = true
|
||
// demandCommentUpdate({
|
||
// targetId: formName.value.id,
|
||
// createDeptName: user.applyUserDeptName,
|
||
// comment: evaluateUpdateComment.value,
|
||
// name: user.applyUserName,
|
||
// }).then(() => {
|
||
// message.success('修改评价成功！')
|
||
// evaluateUpdateComment.value = ''
|
||
// evaluateList()
|
||
// })
|
||
// }
|
||
|
||
// const evaluateDelete = (item) => {
|
||
// demandCommentDelete([item.id]).then((res) => {
|
||
// if (res.data.code == 0) {
|
||
// message.success('删除评论成功！')
|
||
// }
|
||
// evaluateList()
|
||
// })
|
||
// }
|
||
const evaluateList = () => {
|
||
const params = {
|
||
page: page.value,
|
||
limit: 8,
|
||
targetId: formName.value.id,
|
||
}
|
||
demandCommentPage(params).then((res) => {
|
||
evaluateData.value = res.data.data.list
|
||
total.value = res.data.data.total
|
||
console.log(evaluateData, 'evaluateData')
|
||
})
|
||
}
|
||
|
||
const total = ref()
|
||
const page = ref(1)
|
||
const handleCurrentChange = (val) => {
|
||
console.log(val)
|
||
page.value = val
|
||
evaluateList()
|
||
}
|
||
|
||
const downloadFile = (path, name) => {
|
||
const xhr = new XMLHttpRequest()
|
||
xhr.open('get', path)
|
||
xhr.responseType = 'blob'
|
||
xhr.send()
|
||
xhr.onload = function () {
|
||
if (this.status === 200 || this.status === 304) {
|
||
// 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
|
||
if ('msSaveOrOpenBlob' in navigator) {
|
||
navigator.msSaveOrOpenBlob(this.response, name)
|
||
return
|
||
}
|
||
// const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
|
||
// const url = URL.createObjectURL(blob);
|
||
const url = URL.createObjectURL(this.response)
|
||
const a = document.createElement('a')
|
||
a.style.display = 'none'
|
||
a.href = url
|
||
a.download = name
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// const formData = computed(() => store.getters['home/demandDetailsData'])
|
||
// formName.value = formData.value
|
||
const id = router.currentRoute.value.query.id
|
||
getDemandForm(id).then((res) => {
|
||
console.log(res, 'res')
|
||
const { data } = res.data
|
||
formName.value.applyUserName = data.applyUserName
|
||
formName.value.applyUserPhone = data.applyUserPhone
|
||
formName.value.applyUserDeptName = data.applyUserDeptName
|
||
formName.value.detailsField = data.detailsField
|
||
formName.value.demandDetails = data.demandDetails
|
||
formName.value.detailsType = data.detailsType
|
||
formName.value.demandSubject = data.demandSubject
|
||
formName.value.id = data.id
|
||
formName.value.enclosure = data.enclosure
|
||
evaluateList()
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.main-cont {
|
||
margin-top: 64px;
|
||
width: 100%;
|
||
height: calc(100%-90px);
|
||
background: url('~@/assets/demandCenter/bj.png') no-repeat;
|
||
background-position-x: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
.main {
|
||
width: 1550px;
|
||
height: 100%;
|
||
padding-top: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.top {
|
||
background-color: #ffffff;
|
||
box-shadow: 10px 8px 10px 3px #9dc6ea;
|
||
.ant-card {
|
||
background: transparent;
|
||
border: none;
|
||
.ant-card-grid {
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 30px;
|
||
border: 1px solid #fff;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.middle {
|
||
// height: 850px;
|
||
background-color: #ffffff;
|
||
box-shadow: 10px 8px 10px 3px #9dc6ea;
|
||
padding: 20px;
|
||
.title {
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
color: #1492ff;
|
||
}
|
||
.ant-list {
|
||
// height: 730px;
|
||
overflow-y: scroll;
|
||
:deep(.ant-list-item-meta-title) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.name {
|
||
font-size: 18px;
|
||
color: #1492ff;
|
||
}
|
||
}
|
||
:deep(.ant-list-item-meta-description) {
|
||
display: -webkit-box;
|
||
/*设置为弹性盒子*/
|
||
-webkit-line-clamp: 2;
|
||
/*最多显示2行*/
|
||
overflow: hidden;
|
||
/*超出隐藏*/
|
||
text-overflow: ellipsis;
|
||
/*超出显示为省略号*/
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
// 隐藏滚动条
|
||
.ant-list::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.ant-pagination {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.form-container {
|
||
padding: 20px 20px 30px 20px;
|
||
.title {
|
||
font-size: 20px;
|
||
color: #000;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.base-info {
|
||
display: flex;
|
||
}
|
||
:deep(.ant-form-item-label) {
|
||
label {
|
||
color: #666;
|
||
font-size: 16px;
|
||
&::after {
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-form-item-required) {
|
||
&::before {
|
||
font-size: 8px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-input) {
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
}
|
||
</style>
|