评价功能开发
This commit is contained in:
a0049873
parent
ea66cc2228
commit
d5b2125f39
|
|
@ -1,13 +1,13 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2023-01-03 11:24:07
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2023-01-10 10:04:38
|
||||
* @Description: 系统静态参数配置
|
||||
*/
|
||||
var _global = {}
|
||||
var CONFIGITEM = {
|
||||
version: 'qingdao', //青岛
|
||||
version: 'dev', //青岛
|
||||
// version: 'dev', // 西海岸
|
||||
// version: 'dev', // 开发
|
||||
// version: 'zhanTingDev', // 展厅dev (2022-09-13:姜永超让添加)
|
||||
|
|
|
|||
|
|
@ -379,3 +379,37 @@ export function treminders(data) {
|
|||
data,
|
||||
})
|
||||
}
|
||||
// 评分列表
|
||||
export function pageForScore(params) {
|
||||
return request({
|
||||
url: '/processForm/tabilityapplication/page_for_score',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 评分
|
||||
export function resourcescoreInsert(data) {
|
||||
return request({
|
||||
url: '/resourcescore/insert',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 评分修改
|
||||
export function resourcescoreUpdate(data) {
|
||||
return request({
|
||||
url: '/resourcescore/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 评分查询
|
||||
export function resourcescoreSelect(data) {
|
||||
return request({
|
||||
url: '/resourcescore/select/' + data,
|
||||
method: 'get',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,715 @@
|
|||
<template>
|
||||
<div class="on-the-right-side-of-the-list">
|
||||
<div class="title" style="margin-bottom: 0.2rem">能力评价</div>
|
||||
<!--类型-->
|
||||
<div class="top-title" v-show="chooseTab == 0">
|
||||
<div
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
:class="index === typeIndex ? 'sel' : ''"
|
||||
@click="changeType(item, index)"
|
||||
>
|
||||
<span
|
||||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="contentList.data.length > 0">
|
||||
<div class="content">
|
||||
<div
|
||||
class="content-body"
|
||||
v-for="item in contentList.data"
|
||||
:key="item.index"
|
||||
>
|
||||
<div class="content-body-title">
|
||||
<span>
|
||||
申请单号：{{
|
||||
item.applyNumber || item.GUID || item.BSNUM || '--'
|
||||
}}
|
||||
</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ item.system }}
|
||||
</template>
|
||||
<div class="content-body-title">
|
||||
<span>名称：{{ item.system }}</span>
|
||||
<div></div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="content-body-content">
|
||||
<p class="content-body-content-son">
|
||||
审核结果：{{ item.approveStatus }}
|
||||
</p>
|
||||
<div>
|
||||
申请日期：{{
|
||||
item.createDate ||
|
||||
item.startTime ||
|
||||
item.tbsj ||
|
||||
(item.CREATE_TIME &&
|
||||
moment(item.CREATE_TIME.time + 480 * 60 * 1000).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
))
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<div class="button" @click="showDetail(item)">查看详情</div>
|
||||
<div
|
||||
class="button"
|
||||
@click="showEvaluate(item, '评价')"
|
||||
v-if="typeName === '待评价' && item.approveStatus === '通过'"
|
||||
>
|
||||
评价
|
||||
</div>
|
||||
<div
|
||||
class="button"
|
||||
@click="showEvaluate(item, '修改')"
|
||||
v-else-if="typeName === '已评价'"
|
||||
>
|
||||
修改
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<a-pagination
|
||||
size="small"
|
||||
pageSize="4"
|
||||
:total="total"
|
||||
:current="page"
|
||||
:showTotal="(total) => `共 ${total} 项`"
|
||||
@change="handleCurrentChange"
|
||||
:showSizeChanger="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 640px; background: #fff; padding-top: 200px" v-else>
|
||||
<a-empty />
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
width="40%"
|
||||
:title="type"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<div class="modal">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="fromData"
|
||||
name="formRef"
|
||||
:label-col="{ span: 8 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-item
|
||||
label="综合评价"
|
||||
name="score"
|
||||
:rules="[{ required: true, message: '请填写综合评价！' }]"
|
||||
>
|
||||
<a-rate v-model:value="fromData.score" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="resourceTYpe === '应用资源'"
|
||||
label="产品质量"
|
||||
name="qualityScore"
|
||||
:rules="[{ required: true, message: '请填写产品质量！' }]"
|
||||
>
|
||||
<a-rate v-model:value="fromData.qualityScore" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-else-if="resourceTYpe === '智能算法'"
|
||||
label="算法准确度"
|
||||
name="algorithmExactScore"
|
||||
:rules="[{ required: true, message: '请填写算法准确度！' }]"
|
||||
>
|
||||
<a-rate v-model:value="fromData.algorithmExactScore" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-else
|
||||
label="组件服务质量"
|
||||
name="assemblyQualityScore"
|
||||
:rules="[{ required: true, message: '请填写组件服务质量！' }]"
|
||||
>
|
||||
<a-rate v-model:value="fromData.assemblyQualityScore" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="评价内容"
|
||||
name="comment"
|
||||
:rules="[{ required: true, message: '请填写评价内容！' }]"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="fromData.comment"
|
||||
placeholder="请输入评价内容"
|
||||
:auto-size="{ minRows: 3, maxRows: 3 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- <div>
|
||||
<span>综合评价</span>
|
||||
<a-rate v-model:value="fromData.score" />
|
||||
</div>
|
||||
<div v-if="resourceTYpe === '应用资源'">
|
||||
<span>产品质量</span>
|
||||
<a-rate v-model:value="fromData.qualityScore" />
|
||||
</div>
|
||||
<div v-else-if="resourceTYpe === '智能算法'">
|
||||
<span>算法准确度</span>
|
||||
<a-rate v-model:value="fromData.algorithmExactScore" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>组件服务质量</span>
|
||||
<a-rate v-model:value="fromData.assemblyQualityScore" />
|
||||
</div>
|
||||
<div>
|
||||
<span>评价内容</span>
|
||||
<a-textarea
|
||||
v-model:value="fromData.comment"
|
||||
placeholder="请输入评价内容"
|
||||
:auto-size="{ minRows: 3, maxRows: 3 }"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, defineProps } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
import {
|
||||
pageForScore,
|
||||
resourcescoreInsert,
|
||||
resourcescoreUpdate,
|
||||
resourcescoreSelect,
|
||||
} from '@/api/personalCenter'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import * as moment from 'moment'
|
||||
|
||||
const props = defineProps({
|
||||
tabTypeName: { type: String, default: '' },
|
||||
})
|
||||
const router = useRouter()
|
||||
const userName = ref('')
|
||||
getUserInfo().then((res) => {
|
||||
userName.value = res.data.data.username
|
||||
})
|
||||
const formState = ref({ name: '' })
|
||||
//选择展示的Tab页
|
||||
let chooseTab = ref(0)
|
||||
let typeList = ref([
|
||||
{
|
||||
photo: require('@/assets/newHome/nengli1.png'),
|
||||
name: '待评价',
|
||||
},
|
||||
{
|
||||
photo: require('@/assets/newHome/nengli2.png'),
|
||||
name: '已评价',
|
||||
},
|
||||
])
|
||||
const contentList = reactive({ data: [] })
|
||||
let tabIndex = ref(0)
|
||||
let typeIndex = ref(0)
|
||||
let typeName = ref('待评价')
|
||||
|
||||
if (router.currentRoute.value.query.tabTypeName) {
|
||||
typeName.value = router.currentRoute.value.query.tabTypeName
|
||||
}
|
||||
const numFlag = ref(true)
|
||||
|
||||
const num = ref({
|
||||
finished: 0,
|
||||
unfinished: 0,
|
||||
})
|
||||
const total = ref('')
|
||||
const showType = ref('')
|
||||
const page = ref('1')
|
||||
const ended = ref('')
|
||||
|
||||
// 选择类型
|
||||
const changeType = (item, index) => {
|
||||
contentList.data = []
|
||||
formState.value.name = ''
|
||||
numFlag.value = true
|
||||
num.value = []
|
||||
showType.value = ''
|
||||
tabIndex.value = 0
|
||||
ended.value = ''
|
||||
page.value = 1
|
||||
typeIndex.value = index
|
||||
typeName.value = item.name
|
||||
getApplyList()
|
||||
}
|
||||
|
||||
const getApplyList = () => {
|
||||
pageForScore({
|
||||
page: page.value,
|
||||
limit: 4,
|
||||
score: typeName.value === '已评价',
|
||||
}).then((res) => {
|
||||
console.log('评分列表', res.data.data)
|
||||
contentList.data = res.data.data.list
|
||||
total.value = res.data.data.total
|
||||
})
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
console.log('切换', val)
|
||||
page.value = val
|
||||
getApplyList()
|
||||
}
|
||||
|
||||
const showDetail = (item) => {
|
||||
if (typeName.value === '待评价' && item.approveStatus !== '通过') {
|
||||
mybus.emit('selectMenu', {
|
||||
title: '我的申请',
|
||||
img: require('@/assets/personalCenter/apply.png'),
|
||||
imgActive: require('@/assets/personalCenter/applyactive.png'),
|
||||
key: 'apply',
|
||||
})
|
||||
} else {
|
||||
console.log(item)
|
||||
const detailPage = router.resolve({
|
||||
path: '/details', // 跳转的页面路由
|
||||
query: {
|
||||
id: item.resourceId,
|
||||
hiddenBackFlag: true,
|
||||
},
|
||||
})
|
||||
window.open(detailPage.href, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
// 评分
|
||||
const formRef = ref()
|
||||
const visible = ref(false)
|
||||
const type = ref('')
|
||||
const resourceTYpe = ref('')
|
||||
const fromData = ref({
|
||||
resourceId: '',
|
||||
score: null,
|
||||
qualityScore: null,
|
||||
algorithmExactScore: null,
|
||||
assemblyQualityScore: null,
|
||||
comment: '',
|
||||
})
|
||||
const showEvaluate = (item, str) => {
|
||||
type.value = str
|
||||
resourceTYpe.value = item.resourceTYpe
|
||||
fromData.value.resourceId = item.resourceId
|
||||
if (str === '修改') {
|
||||
resourcescoreSelect(item.resourceId).then((res) => {
|
||||
fromData.value.id = res.data.data.id
|
||||
fromData.value.score = res.data.data.score
|
||||
fromData.value.qualityScore = res.data.data.qualityScore
|
||||
fromData.value.algorithmExactScore = res.data.data.algorithmExactScore
|
||||
fromData.value.assemblyQualityScore = res.data.data.assemblyQualityScore
|
||||
fromData.value.comment = res.data.data.comment
|
||||
visible.value = true
|
||||
})
|
||||
} else {
|
||||
visible.value = true
|
||||
}
|
||||
}
|
||||
const handleOk = () => {
|
||||
console.log(fromData.value, type.value)
|
||||
formRef.value.validate().then(() => {
|
||||
if (type.value === '评价') {
|
||||
resourcescoreInsert(fromData.value).then((res) => {
|
||||
if (res.data.code != 0) {
|
||||
message.warning('评价失败！')
|
||||
return
|
||||
}
|
||||
message.success('评价成功！')
|
||||
handleCancel()
|
||||
page.value = 1
|
||||
getApplyList()
|
||||
})
|
||||
} else {
|
||||
resourcescoreUpdate(fromData.value).then((res) => {
|
||||
if (res.data.code != 0) {
|
||||
message.warning('评价失败！')
|
||||
return
|
||||
}
|
||||
message.success('评价成功！')
|
||||
handleCancel()
|
||||
page.value = 1
|
||||
getApplyList()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
fromData.value = {
|
||||
resourceId: '',
|
||||
score: null,
|
||||
qualityScore: null,
|
||||
algorithmExactScore: null,
|
||||
assemblyQualityScore: null,
|
||||
comment: '',
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getApplyList()
|
||||
|
||||
if (props.tabTypeName) {
|
||||
let _index = typeList.value.findIndex((v) => v == props.tabTypeName)
|
||||
changeType(props.tabTypeName, _index != -1 ? _index : 0)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-title {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
color: #000000;
|
||||
line-height: 0.34rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.photo {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 0 0.4rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
|
||||
.sel {
|
||||
font-weight: 600;
|
||||
color: #0058e1;
|
||||
border-bottom: 0.024rem solid #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
.queryButton {
|
||||
background: #0058e1;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
margin-left: 20px;
|
||||
border: 1px solid #0058e1;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.on-the-right-side-of-the-list {
|
||||
background: #fff;
|
||||
padding: 20px 0px 30px 20px;
|
||||
position: absolute;
|
||||
width: 1087px;
|
||||
height: 810px;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
justify-content: left;
|
||||
|
||||
.second-title {
|
||||
background: #f4f5f8;
|
||||
margin-left: 100px;
|
||||
margin-top: 30px;
|
||||
// margin-bottom: 22px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
width: 820px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: table;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.second-title div {
|
||||
border-right: 1px solid #d9d9d9;
|
||||
}
|
||||
.second-title div:first-child {
|
||||
border-left: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.chooseStyle {
|
||||
display: table-cell;
|
||||
width: 200px;
|
||||
color: #fff;
|
||||
border: 1px solid #0058e1;
|
||||
background-color: #0058e1;
|
||||
}
|
||||
|
||||
.noChooseStyle {
|
||||
display: table-cell;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sousuokuang {
|
||||
margin: 20px 0px 21px 0px;
|
||||
|
||||
.ant-input-search {
|
||||
max-width: 490px;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
width: 400px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
color: #b2b2b2;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
:deep(.ant-input-group-addon) {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
|
||||
.ant-input-search-button {
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
|
||||
padding-top: 24px;
|
||||
//margin-left: 16px;
|
||||
border-bottom: 1px solid #0058e1;
|
||||
|
||||
div {
|
||||
background: #eeeff1;
|
||||
|
||||
height: 40px;
|
||||
width: 180px;
|
||||
line-height: 40px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #212121;
|
||||
border-left: 1px solid #dddee1;
|
||||
}
|
||||
|
||||
.tabclass {
|
||||
background: #fff;
|
||||
border-left: 1px solid #0087ff;
|
||||
border-right: 1px solid #0087ff;
|
||||
border-top: 1px solid #0087ff;
|
||||
}
|
||||
}
|
||||
|
||||
.content-cloud {
|
||||
padding: 0px 10px;
|
||||
overflow-y: scroll;
|
||||
height: 658px;
|
||||
|
||||
background: #fff;
|
||||
margin-left: 16px;
|
||||
.content-cloud-body {
|
||||
margin-bottom: 10px;
|
||||
height: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
|
||||
.content-body-left {
|
||||
width: 85%;
|
||||
float: left;
|
||||
|
||||
.content-body-left-one {
|
||||
display: table;
|
||||
height: 50px;
|
||||
width: 80%;
|
||||
|
||||
div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-body-left-two {
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
display: table;
|
||||
|
||||
div {
|
||||
display: table-cell;
|
||||
width: 30%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body-right {
|
||||
width: 15%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 16px;
|
||||
padding-left: 12px;
|
||||
padding-right: 10px;
|
||||
height: 610px;
|
||||
overflow-y: scroll;
|
||||
background: #fff;
|
||||
.content-body {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
margin-right: 10px;
|
||||
height: 130px;
|
||||
border-bottom: #cccccc 1px solid;
|
||||
position: relative;
|
||||
|
||||
.content-body-title {
|
||||
min-width: 100px;
|
||||
max-width: 900px;
|
||||
width: fit-content;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content-body-content {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 40px;
|
||||
/* width: 720px; */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.content-body-content-son {
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
// text-overflow: -o-ellipsis-lastline;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: 3;
|
||||
// -webkit-box-orient: vertical;
|
||||
display: flex;
|
||||
color: #999999;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
max-width: 8.1rem;
|
||||
line-height: 24px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.content-body-bottom {
|
||||
display: flex;
|
||||
color: #cccccc;
|
||||
font-size: 12px;
|
||||
|
||||
div:first-child {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
margin: 5px 0;
|
||||
background: #0058e1;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
border-radius: 1px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttonAgree {
|
||||
background-color: #49c988;
|
||||
}
|
||||
|
||||
.backToFirst {
|
||||
background-color: rgb(214, 91, 91);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-badge-count) {
|
||||
top: -5px;
|
||||
right: -10px;
|
||||
}
|
||||
.modal {
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
& > span {
|
||||
width: 100px;
|
||||
}
|
||||
textarea {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,154 +1,180 @@
|
|||
<template>
|
||||
<div id="aside-menu-container">
|
||||
<a-menu id="aside-menu" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline">
|
||||
<a-menu-item class="aside-menu-item" v-for="item in menuList" :key="item.key" @click="handleClick(item)">
|
||||
<i class="icon" :style="{
|
||||
backgroundImage:
|
||||
selectedKeys == item.key
|
||||
? 'url(' + item.imgActive + ')'
|
||||
: 'url(' + item.img + ')',
|
||||
}"></i>
|
||||
<a-menu
|
||||
id="aside-menu"
|
||||
v-model:openKeys="openKeys"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
mode="inline"
|
||||
>
|
||||
<a-menu-item
|
||||
class="aside-menu-item"
|
||||
v-for="item in menuList"
|
||||
:key="item.key"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<i
|
||||
class="icon"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
selectedKeys == item.key
|
||||
? 'url(' + item.imgActive + ')'
|
||||
: 'url(' + item.img + ')',
|
||||
}"
|
||||
></i>
|
||||
<span>{{ item.title }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
setup() {
|
||||
const itShowXiHaiAn = whoShow.itShowXiHaiAn;
|
||||
const car = {
|
||||
title: '申购车',
|
||||
img: require('@/assets/personalCenter/demand.png'),
|
||||
imgActive: require('@/assets/personalCenter/demandactive.png'),
|
||||
key: 'PurchaseVehicle',
|
||||
}
|
||||
const apply = {
|
||||
title: '我的申请',
|
||||
img: require('@/assets/personalCenter/apply.png'),
|
||||
imgActive: require('@/assets/personalCenter/applyactive.png'),
|
||||
key: 'apply',
|
||||
}
|
||||
const push = {
|
||||
title: '我的发布',
|
||||
img: require('@/assets/personalCenter/push.png'),
|
||||
imgActive: require('@/assets/personalCenter/pushactive.png'),
|
||||
key: 'push',
|
||||
}
|
||||
let menuList = [
|
||||
car,
|
||||
apply,
|
||||
push,
|
||||
{
|
||||
title: '我的收藏',
|
||||
img: require('@/assets/personalCenter/collect.png'),
|
||||
imgActive: require('@/assets/personalCenter/collectactive.png'),
|
||||
key: 'collect',
|
||||
},
|
||||
{
|
||||
title: '我的浏览',
|
||||
img: require('@/assets/personalCenter/recent.png'),
|
||||
imgActive: require('@/assets/personalCenter/recentactive.png'),
|
||||
key: 'recent',
|
||||
},
|
||||
{
|
||||
title: '我的需求',
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
setup() {
|
||||
const itShowXiHaiAn = whoShow.itShowXiHaiAn
|
||||
const car = {
|
||||
title: '申购车',
|
||||
img: require('@/assets/personalCenter/demand.png'),
|
||||
imgActive: require('@/assets/personalCenter/demandactive.png'),
|
||||
key: 'demand',
|
||||
},
|
||||
{
|
||||
title: '我的评论',
|
||||
img: require('@/assets/personalCenter/remark.png'),
|
||||
imgActive: require('@/assets/personalCenter/remarkactive.png'),
|
||||
key: 'remark',
|
||||
},
|
||||
]
|
||||
// 西海岸
|
||||
if (itShowXiHaiAn) {
|
||||
menuList = [car, apply, push]
|
||||
}
|
||||
const selectedKeys = ref(['apply'])
|
||||
|
||||
const type = JSON.parse(window.sessionStorage.getItem('type'))
|
||||
if (type) {
|
||||
selectedKeys.value = [type]
|
||||
console.log('selectedKeys------------>', selectedKeys);
|
||||
|
||||
}
|
||||
const handleClick = (item) => {
|
||||
console.log('click', item)
|
||||
mybus.emit('tabsChange', item)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (type) {
|
||||
console.log('type---------->', type)
|
||||
let _obj = menuList.find(v => v.key == type)
|
||||
handleClick(_obj)
|
||||
} else {
|
||||
if (menuList[1]) {
|
||||
handleClick(menuList[1])
|
||||
} else {
|
||||
handleClick(menuList[0])
|
||||
}
|
||||
key: 'PurchaseVehicle',
|
||||
}
|
||||
})
|
||||
const apply = {
|
||||
title: '我的申请',
|
||||
img: require('@/assets/personalCenter/apply.png'),
|
||||
imgActive: require('@/assets/personalCenter/applyactive.png'),
|
||||
key: 'apply',
|
||||
}
|
||||
const push = {
|
||||
title: '我的发布',
|
||||
img: require('@/assets/personalCenter/push.png'),
|
||||
imgActive: require('@/assets/personalCenter/pushactive.png'),
|
||||
key: 'push',
|
||||
}
|
||||
let menuList = [
|
||||
car,
|
||||
apply,
|
||||
{
|
||||
title: '能力评价',
|
||||
img: require('@/assets/personalCenter/remark.png'),
|
||||
imgActive: require('@/assets/personalCenter/remarkactive.png'),
|
||||
key: 'evaluate',
|
||||
},
|
||||
push,
|
||||
{
|
||||
title: '我的收藏',
|
||||
img: require('@/assets/personalCenter/collect.png'),
|
||||
imgActive: require('@/assets/personalCenter/collectactive.png'),
|
||||
key: 'collect',
|
||||
},
|
||||
{
|
||||
title: '我的浏览',
|
||||
img: require('@/assets/personalCenter/recent.png'),
|
||||
imgActive: require('@/assets/personalCenter/recentactive.png'),
|
||||
key: 'recent',
|
||||
},
|
||||
{
|
||||
title: '我的需求',
|
||||
img: require('@/assets/personalCenter/demand.png'),
|
||||
imgActive: require('@/assets/personalCenter/demandactive.png'),
|
||||
key: 'demand',
|
||||
},
|
||||
{
|
||||
title: '我的评论',
|
||||
img: require('@/assets/personalCenter/remark.png'),
|
||||
imgActive: require('@/assets/personalCenter/remarkactive.png'),
|
||||
key: 'remark',
|
||||
},
|
||||
]
|
||||
// 西海岸
|
||||
if (itShowXiHaiAn) {
|
||||
menuList = [car, apply, push]
|
||||
}
|
||||
const selectedKeys = ref(['apply'])
|
||||
|
||||
return {
|
||||
menuList,
|
||||
selectedKeys,
|
||||
handleClick,
|
||||
}
|
||||
},
|
||||
})
|
||||
const type = JSON.parse(window.sessionStorage.getItem('type'))
|
||||
if (type) {
|
||||
selectedKeys.value = [type]
|
||||
console.log('selectedKeys------------>', selectedKeys)
|
||||
}
|
||||
const handleClick = (item) => {
|
||||
console.log('click', item)
|
||||
mybus.emit('tabsChange', item)
|
||||
}
|
||||
|
||||
mybus.on('selectMenu', (obj) => {
|
||||
selectedKeys.value = [obj.key]
|
||||
console.log('selectMenu', obj)
|
||||
handleClick(obj)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('selectMenu')
|
||||
})
|
||||
onMounted(() => {
|
||||
if (type) {
|
||||
console.log('type---------->', type)
|
||||
let _obj = menuList.find((v) => v.key == type)
|
||||
handleClick(_obj)
|
||||
} else {
|
||||
if (menuList[1]) {
|
||||
handleClick(menuList[1])
|
||||
} else {
|
||||
handleClick(menuList[0])
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
menuList,
|
||||
selectedKeys,
|
||||
handleClick,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#aside-menu-container {
|
||||
margin-top: 20px;
|
||||
height: 790px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
#aside-menu-container {
|
||||
margin-top: 20px;
|
||||
height: 790px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.ant-menu-item) {
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
:deep(.ant-menu-item) {
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
color: #0087ff;
|
||||
&:hover {
|
||||
color: #0087ff;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu-title-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: no-repeat center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item-selected) {
|
||||
background-color: #edf4fc;
|
||||
color: #0087ff;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu-title-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: no-repeat center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
#aside-menu-container::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item-selected) {
|
||||
background-color: #edf4fc;
|
||||
color: #0087ff;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#aside-menu-container::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
></my-apply-xha>
|
||||
<my-apply v-else :tabTypeName="tabTypeName"></my-apply>
|
||||
</template>
|
||||
<Evaluate v-else-if="showFlag === 'evaluate'"></Evaluate>
|
||||
<!-- 我的发布 -->
|
||||
<my-publish v-if="showFlag === 'push'"></my-publish>
|
||||
<!-- 申购车 -->
|
||||
|
|
@ -40,6 +41,7 @@
|
|||
import asideMenu from '@/views/personalCenter/components/asideMenu'
|
||||
// import OnTheRightSideOfTheList from './OnTheRightSideOfTheList'
|
||||
import MyApply from '@/views/personalCenter/components/MyApply'
|
||||
import Evaluate from '@/views/personalCenter/components/Evaluate'
|
||||
import MyApplyXha from '@/views/personalCenter/components/MyApplyXha'
|
||||
import MyApplication from '@/views/personalCenter/components/MyApplication'
|
||||
import MyComments from '@/views/personalCenter/components/MyComments'
|
||||
|
|
|
|||
Loading…
Reference in New Issue