庄锐波
6 months ago
13 changed files with 1112 additions and 42 deletions
@ -0,0 +1 @@ |
|||||
|
CREATE INDEX idx_qymc_tyshxydm ON sszt_jbxx110497_new(QYMC, TYSHXYDM); |
||||
@ -0,0 +1,4 @@ |
|||||
|
package com.zdxt.enforcementcode.controller; |
||||
|
|
||||
|
public class BureauUnitController { |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
import { _get, _post, _put, _delete } from "../../http/index"; |
||||
|
|
||||
|
// region 计划管理接口
|
||||
|
|
||||
|
const planBaseUrl = "/app-enf/cpPlan"; |
||||
|
|
||||
|
// 计划列表（分页）
|
||||
|
export const getPlanList = (params, success, error) => _get(planBaseUrl + "/list", params, success, error); |
||||
|
|
||||
|
// 计划详情
|
||||
|
export const getPlanDetail = (id, success, error) => _get(planBaseUrl + "/" + id, {}, success, error); |
||||
|
|
||||
|
// 新增计划
|
||||
|
export const addPlan = (params, success, error) => _post(planBaseUrl, params, success, error); |
||||
|
|
||||
|
// 编辑计划
|
||||
|
export const editPlan = (params, success, error) => _put(planBaseUrl, params, success, error); |
||||
|
|
||||
|
// 删除计划
|
||||
|
export const deletePlan = (ids, success, error) => _delete(planBaseUrl + "/" + ids, {}, success, error); |
||||
|
|
||||
|
// endregion
|
||||
@ -0,0 +1,437 @@ |
|||||
|
<template> |
||||
|
<div class="plan-edit-page app_content"> |
||||
|
<!-- 顶部导航 --> |
||||
|
<van-nav-bar |
||||
|
:title="isEdit ? '编辑计划' : '新增计划'" |
||||
|
left-arrow |
||||
|
@click-left="onBack" |
||||
|
/> |
||||
|
|
||||
|
<div class="content"> |
||||
|
<!-- 提示条 --> |
||||
|
<van-notice-bar |
||||
|
v-if="showNotice" |
||||
|
left-icon="info-o" |
||||
|
text="请各执法单位，于本月25日前提交次月的计划" |
||||
|
:scrollable="false" |
||||
|
background="#fff9dc" |
||||
|
color="#7d661c" |
||||
|
class="notice-bar" |
||||
|
closeable |
||||
|
@close="showNotice = false" |
||||
|
/> |
||||
|
|
||||
|
<!-- 表单 --> |
||||
|
<div class="form-card"> |
||||
|
<!-- 计划类别 --> |
||||
|
<van-field name="planType" label="计划类别" required> |
||||
|
<template #input> |
||||
|
<van-radio-group v-model="form.planType" direction="horizontal"> |
||||
|
<van-radio :name="1">日常计划</van-radio> |
||||
|
<van-radio :name="2">专项计划</van-radio> |
||||
|
</van-radio-group> |
||||
|
</template> |
||||
|
</van-field> |
||||
|
|
||||
|
<!-- 计划时间 --> |
||||
|
<van-field |
||||
|
v-model="planDateDisplay" |
||||
|
label="计划时间" |
||||
|
placeholder="请选择时间" |
||||
|
required |
||||
|
readonly |
||||
|
is-link |
||||
|
@click="showDatePicker = true" |
||||
|
/> |
||||
|
|
||||
|
<!-- 执行时段 --> |
||||
|
<van-field name="planTime" label="执行时段" required> |
||||
|
<template #input> |
||||
|
<van-radio-group v-model="form.planTime" direction="horizontal"> |
||||
|
<van-radio :name="1">上午</van-radio> |
||||
|
<van-radio :name="2">下午</van-radio> |
||||
|
<van-radio :name="3">其他</van-radio> |
||||
|
</van-radio-group> |
||||
|
</template> |
||||
|
</van-field> |
||||
|
|
||||
|
<!-- 执法事项 --> |
||||
|
<van-field |
||||
|
v-model="form.enforceContent" |
||||
|
label="执法事项" |
||||
|
type="textarea" |
||||
|
placeholder="请输入执法事项" |
||||
|
required |
||||
|
:maxlength="1000" |
||||
|
show-word-limit |
||||
|
rows="3" |
||||
|
autosize |
||||
|
/> |
||||
|
|
||||
|
<!-- 执法单位 --> |
||||
|
<van-field |
||||
|
v-model="form.bureauDeptName" |
||||
|
label="执法单位" |
||||
|
required |
||||
|
readonly |
||||
|
/> |
||||
|
|
||||
|
<!-- 企业名称 --> |
||||
|
<van-field |
||||
|
v-model="form.enterpriseName" |
||||
|
label="企业名称" |
||||
|
placeholder="请输入执法企业" |
||||
|
required |
||||
|
/> |
||||
|
|
||||
|
<!-- 执法人员 --> |
||||
|
<van-field label="执法人员" required> |
||||
|
<template #input> |
||||
|
<div class="person-box"> |
||||
|
<div |
||||
|
v-for="(person, index) in personList" |
||||
|
:key="index" |
||||
|
class="person-line" |
||||
|
> |
||||
|
<span class="person-name">{{ person.name }}</span> |
||||
|
<span class="person-phone">{{ person.phone }}</span> |
||||
|
<van-icon |
||||
|
v-if="personList.length > 1" |
||||
|
name="close" |
||||
|
class="person-remove" |
||||
|
@click="removePerson(index)" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="add-person-line" @click="onAddPerson"> |
||||
|
<span class="placeholder-text">请输入</span> |
||||
|
<van-icon name="add-o" color="#2382cf" size="20" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</van-field> |
||||
|
|
||||
|
<!-- 是否公开 --> |
||||
|
<van-field name="isPublic" label="是否公开" required> |
||||
|
<template #input> |
||||
|
<van-radio-group v-model="form.isPublic" direction="horizontal"> |
||||
|
<van-radio :name="1">是</van-radio> |
||||
|
<van-radio :name="0">否</van-radio> |
||||
|
</van-radio-group> |
||||
|
</template> |
||||
|
</van-field> |
||||
|
|
||||
|
<!-- 参与联合 --> |
||||
|
<van-field name="isUnion" label="参与联合" required> |
||||
|
<template #input> |
||||
|
<van-radio-group v-model="form.isUnion" direction="horizontal"> |
||||
|
<van-radio :name="1">是</van-radio> |
||||
|
<van-radio :name="0">否</van-radio> |
||||
|
</van-radio-group> |
||||
|
</template> |
||||
|
</van-field> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 提交按钮 --> |
||||
|
<div class="submit-wrap"> |
||||
|
<van-button |
||||
|
type="primary" |
||||
|
block |
||||
|
round |
||||
|
:loading="submitting" |
||||
|
loading-text="提交中..." |
||||
|
@click="onSubmit" |
||||
|
> |
||||
|
提交 |
||||
|
</van-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 日期选择器 --> |
||||
|
<van-popup v-model:show="showDatePicker" position="bottom" round> |
||||
|
<van-date-picker |
||||
|
v-model="datePickerValue" |
||||
|
title="选择计划时间" |
||||
|
:min-date="minDate" |
||||
|
@confirm="onDateConfirm" |
||||
|
@cancel="showDatePicker = false" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="cpPlanEdit"> |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
import { showToast } from 'vant'; |
||||
|
import { addPlan, editPlan, getPlanDetail } from '@/api/enforcement/plan'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
|
||||
|
const isEdit = computed(() => !!route.query.id); |
||||
|
const showNotice = ref(true); |
||||
|
const submitting = ref(false); |
||||
|
const showDatePicker = ref(false); |
||||
|
const minDate = new Date(); |
||||
|
|
||||
|
// 表单数据 |
||||
|
const form = ref({ |
||||
|
planType: 1, |
||||
|
planDate: '', |
||||
|
planTime: 1, |
||||
|
planActualDate: '', |
||||
|
planActualTime: 1, |
||||
|
enforceContent: '', |
||||
|
bureauDeptId: '', |
||||
|
bureauDeptName: '', |
||||
|
enterpriseName: '', |
||||
|
enterpriseNumber: '', |
||||
|
enterpriseId: '', |
||||
|
enforceUserNames: '', |
||||
|
enforceUserIds: '', |
||||
|
enforceUserCodes: '', |
||||
|
isPublic: 1, |
||||
|
isUnion: 0, |
||||
|
reserveStatus: 0, |
||||
|
systemReserved: 0, |
||||
|
manualReserved: 0, |
||||
|
editEnable: 1, |
||||
|
organId: '', |
||||
|
organName: '', |
||||
|
deptId: '', |
||||
|
deptName: '', |
||||
|
isDelete: 0, |
||||
|
}); |
||||
|
|
||||
|
// 人员列表 |
||||
|
const personList = ref([]); |
||||
|
|
||||
|
// 日期选择值 |
||||
|
const datePickerValue = ref([ |
||||
|
String(new Date().getFullYear()), |
||||
|
String(new Date().getMonth() + 1).padStart(2, '0'), |
||||
|
String(new Date().getDate()).padStart(2, '0'), |
||||
|
]); |
||||
|
|
||||
|
// 日期显示文本 |
||||
|
const planDateDisplay = computed(() => { |
||||
|
if (!form.value.planDate) return ''; |
||||
|
const timeText = { 1: '上午', 2: '下午', 3: '其他' }; |
||||
|
return form.value.planDate + ' ' + (timeText[form.value.planTime] || ''); |
||||
|
}); |
||||
|
|
||||
|
// 如果是编辑模式，加载详情 |
||||
|
onMounted(() => { |
||||
|
if (isEdit.value) { |
||||
|
loadDetail(route.query.id); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const loadDetail = (id) => { |
||||
|
getPlanDetail(id, (res) => { |
||||
|
if (res.code === 200 && res.data) { |
||||
|
const data = res.data; |
||||
|
Object.keys(form.value).forEach(key => { |
||||
|
if (data[key] !== undefined && data[key] !== null) { |
||||
|
form.value[key] = data[key]; |
||||
|
} |
||||
|
}); |
||||
|
// 解析人员 |
||||
|
if (data.enforceUserNames) { |
||||
|
const names = data.enforceUserNames.split(','); |
||||
|
personList.value = names.map(name => ({ name, phone: '' })); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 日期确认 |
||||
|
const onDateConfirm = ({ selectedValues }) => { |
||||
|
form.value.planDate = selectedValues.join('-'); |
||||
|
form.value.planActualDate = form.value.planDate; |
||||
|
showDatePicker.value = false; |
||||
|
}; |
||||
|
|
||||
|
// 添加人员（暂时简单实现） |
||||
|
const onAddPerson = () => { |
||||
|
// TODO: 后续对接人员选择器 |
||||
|
showToast('人员选择功能开发中'); |
||||
|
}; |
||||
|
|
||||
|
// 移除人员 |
||||
|
const removePerson = (index) => { |
||||
|
personList.value.splice(index, 1); |
||||
|
syncPersonData(); |
||||
|
}; |
||||
|
|
||||
|
// 同步人员数据到表单 |
||||
|
const syncPersonData = () => { |
||||
|
form.value.enforceUserNames = personList.value.map(p => p.name).join(','); |
||||
|
form.value.enforceUserIds = personList.value.map(p => p.id || '').join(','); |
||||
|
form.value.enforceUserCodes = personList.value.map(p => p.code || '').join(','); |
||||
|
}; |
||||
|
|
||||
|
// 返回 |
||||
|
const onBack = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
|
||||
|
// 表单校验 |
||||
|
const validate = () => { |
||||
|
if (!form.value.planDate) { |
||||
|
showToast('请选择计划时间'); |
||||
|
return false; |
||||
|
} |
||||
|
if (!form.value.enforceContent) { |
||||
|
showToast('请输入执法事项'); |
||||
|
return false; |
||||
|
} |
||||
|
if (!form.value.enterpriseName) { |
||||
|
showToast('请输入企业名称'); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
// 提交 |
||||
|
const onSubmit = () => { |
||||
|
if (!validate()) return; |
||||
|
|
||||
|
submitting.value = true; |
||||
|
form.value.planActualTime = form.value.planTime; |
||||
|
|
||||
|
const api = isEdit.value ? editPlan : addPlan; |
||||
|
api( |
||||
|
form.value, |
||||
|
(res) => { |
||||
|
submitting.value = false; |
||||
|
if (res.code === 200) { |
||||
|
showToast(isEdit.value ? '修改成功' : '新增成功'); |
||||
|
router.back(); |
||||
|
} else { |
||||
|
showToast(res.msg || '操作失败'); |
||||
|
} |
||||
|
}, |
||||
|
() => { |
||||
|
submitting.value = false; |
||||
|
showToast('网络错误，请重试'); |
||||
|
} |
||||
|
); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.plan-edit-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background: #eaf4ff; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar) { |
||||
|
background: #347bc3; |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
.van-nav-bar__title { |
||||
|
color: #fff; |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.van-icon { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.notice-bar { |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 12px; |
||||
|
border: 1px solid #f3dfa5; |
||||
|
} |
||||
|
|
||||
|
.form-card { |
||||
|
background: #fff; |
||||
|
border-radius: 14px; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 4px 14px rgba(44, 116, 190, 0.08); |
||||
|
|
||||
|
:deep(.van-field) { |
||||
|
padding: 14px; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-field__label) { |
||||
|
width: 80px; |
||||
|
font-size: 15px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-radio-group--horizontal) { |
||||
|
gap: 24px; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-radio__label) { |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.person-box { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.person-line { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 15px; |
||||
|
color: #666; |
||||
|
gap: 8px; |
||||
|
|
||||
|
.person-name { |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.person-phone { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.person-remove { |
||||
|
margin-left: auto; |
||||
|
color: #999; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.add-person-line { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
color: #c4c9cf; |
||||
|
font-size: 15px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.placeholder-text { |
||||
|
color: #c4c9cf; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit-wrap { |
||||
|
padding: 22px 0 0; |
||||
|
|
||||
|
:deep(.van-button) { |
||||
|
height: 50px; |
||||
|
font-size: 17px; |
||||
|
font-weight: 500; |
||||
|
background: linear-gradient(135deg, #1890ff, #0b63d1); |
||||
|
border: none; |
||||
|
box-shadow: 0 8px 20px rgba(24, 144, 255, 0.28); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<div class="plan-page app_content"> |
||||
|
<!-- 顶部导航 --> |
||||
|
<van-nav-bar |
||||
|
title="计划" |
||||
|
left-arrow |
||||
|
@click-left="onBack" |
||||
|
/> |
||||
|
|
||||
|
<!-- Tab 切换 --> |
||||
|
<van-tabs |
||||
|
v-model:active="activeTab" |
||||
|
title-active-color="#111" |
||||
|
title-inactive-color="#666" |
||||
|
color="#2f8bd3" |
||||
|
line-width="36px" |
||||
|
line-height="2px" |
||||
|
:border="false" |
||||
|
> |
||||
|
<van-tab title="我的计划" name="mine"> |
||||
|
<cp-plan-mine @edit="onEdit" /> |
||||
|
</van-tab> |
||||
|
<van-tab title="其他计划" name="other"> |
||||
|
<cp-plan-other /> |
||||
|
</van-tab> |
||||
|
</van-tabs> |
||||
|
|
||||
|
<!-- 悬浮新增按钮 --> |
||||
|
<div class="add-btn" @click="onAdd"> |
||||
|
<van-icon name="plus" size="22" color="#fff" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="cpPlanList"> |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import CpPlanMine from './cp_plan_mine.vue'; |
||||
|
import CpPlanOther from './cp_plan_other.vue'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const activeTab = ref('mine'); |
||||
|
|
||||
|
const onBack = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
|
||||
|
const onAdd = () => { |
||||
|
router.push({ path: '/enforcement/plan/edit' }); |
||||
|
}; |
||||
|
|
||||
|
const onEdit = (item) => { |
||||
|
router.push({ path: '/enforcement/plan/edit', query: { id: item.id } }); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.plan-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background: #eaf4ff; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar) { |
||||
|
background: #347bc3; |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
.van-nav-bar__title { |
||||
|
color: #fff; |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.van-icon { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.van-tabs) { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-tabs__wrap) { |
||||
|
height: 54px; |
||||
|
background: #fff; |
||||
|
border-bottom: 1px solid #e4edf7; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-tab) { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-tab--active) { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-tabs__content), |
||||
|
:deep(.van-tabs__track), |
||||
|
:deep(.van-tab__panel-wrapper), |
||||
|
:deep(.van-tab__pane) { |
||||
|
flex: 1; |
||||
|
min-height: 0; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-tabs__content) { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.add-btn { |
||||
|
position: fixed; |
||||
|
right: 22px; |
||||
|
bottom: 28px; |
||||
|
width: 56px; |
||||
|
height: 56px; |
||||
|
border-radius: 50%; |
||||
|
background: linear-gradient(135deg, #1890ff, #0b63d1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0 8px 20px rgba(24, 144, 255, 0.38); |
||||
|
z-index: 100; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.96); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,320 @@ |
|||||
|
<template> |
||||
|
<div class="plan-mine"> |
||||
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
||||
|
<van-list |
||||
|
v-model:loading="loading" |
||||
|
:finished="finished" |
||||
|
finished-text="没有更多了" |
||||
|
@load="onLoad" |
||||
|
> |
||||
|
<div class="plan-list"> |
||||
|
<!-- 第一条高亮卡片 --> |
||||
|
<section |
||||
|
v-for="(item, index) in planList" |
||||
|
:key="item.id" |
||||
|
class="plan-card" |
||||
|
:class="index === 0 ? 'primary-card' : 'normal-card'" |
||||
|
> |
||||
|
<div class="card-header"> |
||||
|
<div class="card-type">{{ item.isUnion === 1 ? '联合执法' : '普通执法' }}</div> |
||||
|
<div class="status" :class="index === 0 ? '' : 'blue'"> |
||||
|
{{ getStatusText(item.reserveStatus) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="plan-title">{{ item.enforceContent }}</div> |
||||
|
|
||||
|
<div class="info-row"> |
||||
|
<div class="label" :class="index !== 0 ? 'dark' : ''">执法单位：</div> |
||||
|
<div class="value" :class="index !== 0 ? 'gray' : ''">{{ item.bureauDeptName }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-row"> |
||||
|
<div class="label" :class="index !== 0 ? 'dark' : ''">执法人员：</div> |
||||
|
<div class="value" :class="[index !== 0 ? 'gray' : '', 'multi']"> |
||||
|
<span v-for="(name, i) in getPersonList(item)" :key="i">{{ name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-row"> |
||||
|
<div class="label" :class="index !== 0 ? 'dark' : ''">计划时间：</div> |
||||
|
<div class="value" :class="index !== 0 ? 'gray' : ''"> |
||||
|
{{ item.planDate }} {{ getPlanTimeText(item.planTime) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-row"> |
||||
|
<div class="label" :class="index !== 0 ? 'dark' : ''">企业名称：</div> |
||||
|
<div class="value" :class="index !== 0 ? 'gray' : ''">{{ item.enterpriseName }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-actions" :class="index === 0 ? 'primary-actions' : ''"> |
||||
|
<div |
||||
|
class="action-item" |
||||
|
:class="index !== 0 ? 'blue-action' : ''" |
||||
|
@click="onEditPlan(item)" |
||||
|
> |
||||
|
<van-icon name="edit" /> |
||||
|
<span>编辑</span> |
||||
|
</div> |
||||
|
<div |
||||
|
class="action-item" |
||||
|
:class="index !== 0 ? 'blue-action' : ''" |
||||
|
@click="onDeletePlan(item)" |
||||
|
> |
||||
|
<van-icon name="delete-o" /> |
||||
|
<span>删除</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<van-empty v-if="!loading && planList.length === 0" description="暂无计划" /> |
||||
|
</van-list> |
||||
|
</van-pull-refresh> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="cpPlanMine"> |
||||
|
import { showConfirmDialog, showToast } from 'vant'; |
||||
|
import { getPlanList, deletePlan } from '@/api/enforcement/plan'; |
||||
|
|
||||
|
const emit = defineEmits(['edit']); |
||||
|
|
||||
|
const planList = ref([]); |
||||
|
const loading = ref(false); |
||||
|
const finished = ref(false); |
||||
|
const refreshing = ref(false); |
||||
|
const pageNum = ref(1); |
||||
|
const pageSize = 10; |
||||
|
|
||||
|
// 状态文本映射 |
||||
|
const getStatusText = (status) => { |
||||
|
const map = { 0: '草稿', 1: '待预约', 2: '预约中', 3: '预约完成' }; |
||||
|
return map[status] || '待确认'; |
||||
|
}; |
||||
|
|
||||
|
// 时段文本 |
||||
|
const getPlanTimeText = (time) => { |
||||
|
const map = { 1: '上午', 2: '下午', 3: '其他' }; |
||||
|
return map[time] || ''; |
||||
|
}; |
||||
|
|
||||
|
// 获取人员列表 |
||||
|
const getPersonList = (item) => { |
||||
|
if (!item.enforceUserNames) return []; |
||||
|
return item.enforceUserNames.split(','); |
||||
|
}; |
||||
|
|
||||
|
// 加载数据 |
||||
|
const onLoad = () => { |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// 下拉刷新 |
||||
|
const onRefresh = () => { |
||||
|
pageNum.value = 1; |
||||
|
finished.value = false; |
||||
|
planList.value = []; |
||||
|
fetchList(); |
||||
|
}; |
||||
|
|
||||
|
// 请求列表 |
||||
|
const fetchList = () => { |
||||
|
loading.value = true; |
||||
|
getPlanList( |
||||
|
{ pageNum: pageNum.value, pageSize }, |
||||
|
(res) => { |
||||
|
refreshing.value = false; |
||||
|
loading.value = false; |
||||
|
if (res.code === 200) { |
||||
|
const rows = res.rows || []; |
||||
|
if (pageNum.value === 1) { |
||||
|
planList.value = rows; |
||||
|
} else { |
||||
|
planList.value.push(...rows); |
||||
|
} |
||||
|
if (rows.length < pageSize) { |
||||
|
finished.value = true; |
||||
|
} else { |
||||
|
pageNum.value++; |
||||
|
} |
||||
|
} else { |
||||
|
finished.value = true; |
||||
|
} |
||||
|
}, |
||||
|
() => { |
||||
|
refreshing.value = false; |
||||
|
loading.value = false; |
||||
|
finished.value = true; |
||||
|
} |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 编辑 |
||||
|
const onEditPlan = (item) => { |
||||
|
emit('edit', item); |
||||
|
}; |
||||
|
|
||||
|
// 删除 |
||||
|
const onDeletePlan = (item) => { |
||||
|
showConfirmDialog({ |
||||
|
title: '提示', |
||||
|
message: '确定要删除该计划吗？', |
||||
|
}).then(() => { |
||||
|
deletePlan(item.id, (res) => { |
||||
|
if (res.code === 200) { |
||||
|
showToast('删除成功'); |
||||
|
onRefresh(); |
||||
|
} else { |
||||
|
showToast(res.msg || '删除失败'); |
||||
|
} |
||||
|
}); |
||||
|
}).catch(() => {}); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.plan-mine { |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.plan-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 14px; |
||||
|
} |
||||
|
|
||||
|
/* 卡片通用 */ |
||||
|
.plan-card { |
||||
|
border-radius: 14px; |
||||
|
padding: 16px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 14px; |
||||
|
} |
||||
|
|
||||
|
.card-type { |
||||
|
font-size: 17px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
font-size: 14px; |
||||
|
color: #f5c189; |
||||
|
|
||||
|
&.blue { |
||||
|
color: #1f75c9; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.plan-title { |
||||
|
display: block; |
||||
|
font-size: 17px; |
||||
|
font-weight: 700; |
||||
|
line-height: 1.5; |
||||
|
margin-bottom: 14px; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 8px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
width: 72px; |
||||
|
flex-shrink: 0; |
||||
|
color: rgba(255, 255, 255, 0.95); |
||||
|
font-weight: 500; |
||||
|
|
||||
|
&.dark { |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
flex: 1; |
||||
|
color: rgba(255, 255, 255, 0.72); |
||||
|
|
||||
|
&.gray { |
||||
|
color: #8a8a8a; |
||||
|
} |
||||
|
|
||||
|
&.multi { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 蓝色高亮卡片 */ |
||||
|
.primary-card { |
||||
|
background: linear-gradient(135deg, #0d56c8 0%, #278fe0 100%); |
||||
|
color: #fff; |
||||
|
box-shadow: 0 6px 16px rgba(28, 108, 202, 0.25); |
||||
|
|
||||
|
.card-type { |
||||
|
color: rgba(255, 255, 255, 0.82); |
||||
|
} |
||||
|
|
||||
|
.plan-title { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 普通卡片 */ |
||||
|
.normal-card { |
||||
|
background: #fff; |
||||
|
box-shadow: 0 4px 14px rgba(44, 116, 190, 0.08); |
||||
|
|
||||
|
.card-type { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.plan-title { |
||||
|
color: #111; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 操作区域 */ |
||||
|
.card-actions { |
||||
|
margin-top: 14px; |
||||
|
padding-top: 12px; |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 24px; |
||||
|
|
||||
|
&.primary-actions { |
||||
|
border-top-color: rgba(255, 255, 255, 0.18); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.action-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
font-size: 14px; |
||||
|
color: rgba(255, 255, 255, 0.88); |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&.blue-action { |
||||
|
color: #2382cf; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div class="plan-other"> |
||||
|
<van-empty |
||||
|
image="search" |
||||
|
description="其他计划功能开发中" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="cpPlanOther"> |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.plan-other { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 0; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue