|
|
|
@ -25,8 +25,7 @@ |
|
|
|
v-for="item in reserveList" |
|
|
|
:key="item.id" |
|
|
|
class="reserve-card" |
|
|
|
:class="{ 'approved-card': item.opStatus === 1, 'rejected-card': item.opStatus === 2, 'pending-card': item.opStatus === 3, 'selected-card': selectedId === item.id }" |
|
|
|
@click="onSelectCard(item)" |
|
|
|
:class="{ 'approved-card': item.opStatus === 1, 'rejected-card': item.opStatus === 2, 'pending-card': item.opStatus === 3 }" |
|
|
|
> |
|
|
|
<div class="card-header"> |
|
|
|
<div class="card-label" :class="{ 'sent-label': isSentByMe(item) }"> |
|
|
|
@ -38,9 +37,13 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 预约单位信息 --> |
|
|
|
<div class="unit-section"> |
|
|
|
<div class="unit-section-title">预约单位</div> |
|
|
|
<div class="unit-info"> |
|
|
|
<div class="unit-block"> |
|
|
|
<div class="unit-block-header"> |
|
|
|
<span class="unit-block-tag">预约单位</span> |
|
|
|
</div> |
|
|
|
<div class="unit-block-title">{{ item.enterpriseName || item.bureauDeptName || '-' }}</div> |
|
|
|
<div class="unit-block-subtitle">{{ formatPlanDate(item.planDate) }} {{ getPlanTimeText(item.planTime) }}</div> |
|
|
|
<div class="unit-block-divider"></div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">执法单位:</div> |
|
|
|
<div class="value">{{ item.bureauDeptName || '-' }}</div> |
|
|
|
@ -49,30 +52,20 @@ |
|
|
|
<div class="label">执法人员:</div> |
|
|
|
<div class="value">{{ item.enforceUserNames || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">联系电话:</div> |
|
|
|
<div class="value">{{ item.enforceUserTels || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">计划时间:</div> |
|
|
|
<div class="value">{{ formatPlanDate(item.planDate) }} {{ getPlanTimeText(item.planTime) }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">企业名称:</div> |
|
|
|
<div class="value">{{ item.enterpriseName || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">执法事项:</div> |
|
|
|
<div class="value">{{ item.enforceContent || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-divider"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 被约单位信息 --> |
|
|
|
<div class="unit-section"> |
|
|
|
<div class="unit-section-title">被约单位</div> |
|
|
|
<div class="unit-info"> |
|
|
|
<div class="unit-block unit-block-target"> |
|
|
|
<div class="unit-block-header"> |
|
|
|
<span class="unit-block-tag unit-block-tag-target">被约单位</span> |
|
|
|
</div> |
|
|
|
<div class="unit-block-title">{{ item.targetEnterpriseName || item.targetBureauDeptName || '-' }}</div> |
|
|
|
<div class="unit-block-subtitle">联合单位</div> |
|
|
|
<div class="unit-block-divider"></div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">执法单位:</div> |
|
|
|
<div class="value">{{ item.targetBureauDeptName || '-' }}</div> |
|
|
|
@ -82,32 +75,22 @@ |
|
|
|
<div class="value">{{ item.targetEnforceUserNames || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">联系电话:</div> |
|
|
|
<div class="value">{{ item.targetEnforceUserTels || '-' }}</div> |
|
|
|
<div class="label">执法事项:</div> |
|
|
|
<div class="value">{{ item.targetEnforceContent || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">计划时间:</div> |
|
|
|
<div class="value">{{ formatPlanDate(item.targetPlanDate) }} {{ getPlanTimeText(item.targetPlanTime) }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">企业名称:</div> |
|
|
|
<div class="value">{{ item.targetEnterpriseName || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">执法事项:</div> |
|
|
|
<div class="value">{{ item.targetEnforceContent || '-' }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-divider"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="info-row"> |
|
|
|
<div class="info-row reserve-time-row"> |
|
|
|
<div class="label">预约时间:</div> |
|
|
|
<div class="value">{{ formatDate(item.reserveTime) }}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 选中且待确认状态且收到的预约才显示操作按钮(我发起的不能操作) --> |
|
|
|
<div v-if="item.opStatus === 3 && selectedId === item.id && !isSentByMe(item)" class="card-actions"> |
|
|
|
<!-- 待确认状态且收到的预约才显示操作按钮(我发起的不能操作) --> |
|
|
|
<div v-if="item.opStatus === 3 && !isSentByMe(item)" class="card-actions"> |
|
|
|
<div class="actions-left"> |
|
|
|
<div v-if="item.opMessage" class="action-item message-action" @click.stop="onShowMessage(item)"> |
|
|
|
<van-icon name="chat-o" /> |
|
|
|
@ -141,7 +124,6 @@ import { getReserveList, approveReserveByManual, rejectReserveByManual } from '@ |
|
|
|
import useCommon from '@/store/Common.js'; |
|
|
|
|
|
|
|
const commonStore = useCommon(); |
|
|
|
const selectedId = ref(null); |
|
|
|
const reserveList = ref([]); |
|
|
|
const loading = ref(false); |
|
|
|
const finished = ref(false); |
|
|
|
@ -205,13 +187,10 @@ const isSentByMe = (item) => { |
|
|
|
return String(item.senderId) === String(commonStore.userId); |
|
|
|
}; |
|
|
|
|
|
|
|
// 选中卡片(再次点击取消选中) |
|
|
|
const onSelectCard = (item) => { |
|
|
|
if (item.opStatus !== 3 || isSentByMe(item)) return; // 非待确认或我发起的不可选 |
|
|
|
selectedId.value = selectedId.value === item.id ? null : item.id; |
|
|
|
// 操作后置处理 |
|
|
|
const afterOperate = (item, action) => { |
|
|
|
onRefresh(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 下拉刷新 |
|
|
|
const onRefresh = () => { |
|
|
|
pageNum.value = 1; |
|
|
|
finished.value = false; |
|
|
|
@ -304,13 +283,6 @@ const onReject = (item) => { |
|
|
|
}); |
|
|
|
}).catch(() => {}); |
|
|
|
}; |
|
|
|
|
|
|
|
// 操作后置处理 |
|
|
|
const afterOperate = (item, action) => { |
|
|
|
// TODO: 可在此处扩展后置逻辑,如通知、跳转等 |
|
|
|
selectedId.value = null; |
|
|
|
onRefresh(); |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
@ -352,88 +324,58 @@ const afterOperate = (item, action) => { |
|
|
|
.reserve-card { |
|
|
|
background: #fff; |
|
|
|
border-radius: 14px; |
|
|
|
padding: 16px; |
|
|
|
padding: 0; |
|
|
|
box-shadow: 0 4px 16px rgba(44, 116, 190, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06); |
|
|
|
border: 2.5px solid #1a5fb4; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.approved-card { |
|
|
|
border: 1.5px solid rgba(7, 193, 96, 0.4); |
|
|
|
} |
|
|
|
> .card-header { |
|
|
|
padding: 12px 16px; |
|
|
|
background: linear-gradient(135deg, #0d4fad 0%, #1565c8 50%, #1e7fe0 100%); |
|
|
|
|
|
|
|
.rejected-card { |
|
|
|
border: 1.5px solid rgba(238, 10, 36, 0.35); |
|
|
|
} |
|
|
|
|
|
|
|
.pending-card { |
|
|
|
border: 1.5px solid rgba(35, 130, 207, 0.35); |
|
|
|
} |
|
|
|
|
|
|
|
.selected-card { |
|
|
|
background: radial-gradient(circle at 78% 5%, rgba(65, 188, 255, 0.75) 0, rgba(65, 188, 255, 0.25) 20%, transparent 42%), |
|
|
|
linear-gradient(135deg, #064ec6 0%, #0b63d9 48%, #268ee5 100%) !important; |
|
|
|
border-color: transparent; |
|
|
|
.card-label { |
|
|
|
background: rgba(255, 255, 255, 0.18); |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.card-header .card-label { |
|
|
|
.card-label.sent-label { |
|
|
|
background: rgba(255, 255, 255, 0.15); |
|
|
|
color: rgba(255, 255, 255, 0.85); |
|
|
|
} |
|
|
|
|
|
|
|
.card-header .status { |
|
|
|
color: #f0b66c !important; |
|
|
|
.status { |
|
|
|
color: rgba(255, 255, 255, 0.85) !important; |
|
|
|
} |
|
|
|
|
|
|
|
.plan-title { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.info-row .label { |
|
|
|
color: #fff; |
|
|
|
> .reserve-time-row { |
|
|
|
margin: 0 16px; |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.info-row .value { |
|
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
|
|
|
|
|
&.msg { |
|
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.unit-section { |
|
|
|
border-color: rgba(255, 255, 255, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
.unit-section-title { |
|
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.info-divider { |
|
|
|
border-bottom-color: rgba(255, 255, 255, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
.card-actions { |
|
|
|
border-top-color: rgba(255, 255, 255, 0.18); |
|
|
|
> .card-actions { |
|
|
|
margin: 0 16px; |
|
|
|
padding-bottom: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.message-action { |
|
|
|
color: rgba(255, 255, 255, 0.85); |
|
|
|
} |
|
|
|
.approved-card { |
|
|
|
border-color: #07c160; |
|
|
|
} |
|
|
|
|
|
|
|
.approve-action { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.rejected-card { |
|
|
|
border-color: #ee0a24; |
|
|
|
} |
|
|
|
|
|
|
|
.reject-action { |
|
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
|
} |
|
|
|
.pending-card { |
|
|
|
border-color: #1a5fb4; |
|
|
|
} |
|
|
|
|
|
|
|
.card-header { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 14px; |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.card-label { |
|
|
|
@ -496,29 +438,112 @@ const afterOperate = (item, action) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.unit-section { |
|
|
|
margin-bottom: 12px; |
|
|
|
border: 1px solid #eef2f7; |
|
|
|
border-radius: 10px; |
|
|
|
overflow: hidden; |
|
|
|
.unit-block { |
|
|
|
background: linear-gradient(135deg, #0d4fad 0%, #1565c8 50%, #1e7fe0 100%); |
|
|
|
padding: 14px 16px; |
|
|
|
margin-bottom: 0; |
|
|
|
border-bottom: 1px solid rgba(255,255,255,0.12); |
|
|
|
|
|
|
|
.unit-block-tag { |
|
|
|
background: rgba(255, 255, 255, 0.18); |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-title { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-subtitle { |
|
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-divider { |
|
|
|
border-bottom-color: rgba(255, 255, 255, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
color: rgba(255, 255, 255, 0.85); |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
color: rgba(255, 255, 255, 0.75); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.unit-section-title { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 600; |
|
|
|
.unit-block-target { |
|
|
|
padding: 14px 16px; |
|
|
|
border-bottom: none; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.unit-block-tag { |
|
|
|
background: #fff7e6; |
|
|
|
color: #fa8c16; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-title { |
|
|
|
color: #111; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-subtitle { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-divider { |
|
|
|
border-bottom-color: #eef2f7; |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
color: #8a8a8a; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-header { |
|
|
|
margin-bottom: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-tag { |
|
|
|
display: inline-block; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
color: #1f75c9; |
|
|
|
background: #f0f7ff; |
|
|
|
padding: 8px 12px; |
|
|
|
border-bottom: 1px solid #eef2f7; |
|
|
|
background: #e8f3ff; |
|
|
|
padding: 2px 8px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-tag-target { |
|
|
|
color: #fa8c16; |
|
|
|
background: #fff7e6; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-info { |
|
|
|
padding: 10px 12px; |
|
|
|
.unit-block-title { |
|
|
|
font-size: 15px; |
|
|
|
font-weight: 700; |
|
|
|
color: #111; |
|
|
|
line-height: 1.5; |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-subtitle { |
|
|
|
font-size: 13px; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-block-divider { |
|
|
|
border-bottom: 1px solid #eef2f7; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.info-divider { |
|
|
|
margin-top: 8px; |
|
|
|
border-bottom: 1px dashed #c0c4cc; |
|
|
|
.reserve-time-row { |
|
|
|
margin-top: 0; |
|
|
|
padding-top: 10px; |
|
|
|
padding-bottom: 4px; |
|
|
|
border-top: 1px solid #eef2f7; |
|
|
|
} |
|
|
|
|
|
|
|
.card-actions { |
|
|
|
|