refactor(admin): 六页对齐 bsch/ysch 应用页规范（09-18 升级补入库，与 flow-center 同批次）
build / build (push) Successful in 1m58s
build / build (push) Successful in 1m58s
- types/index.ts 补 OperatorEnum（此前 import 悬空，接入 TablePage* 即构建失败）
- TablePageAlovaNew 对齐 flow-center 版：页长记忆 localStorage.customPageCount
+ 重载清空勾选 + watch(tableHeight) 跟随页面侧 ResizeObserver 重算
- ServiceItemList/ApplyManage：三段式骨架 + search-wrap（下拉+关键字 200px
即输即搜）+ TablePageAlovaNew + Utils.operatingHandle 图标操作列（编辑/发布
icon-fasong/下架 icon-stop/删除/详情 icon-browse）+ MyConfirm + 增删后智能翻页
- ServiceDictManage：tabs-wrapper + card Tabs 双容器 v-show + 定高 + 弹窗校验
统一文案「请填写红色星号内容！」
- ServiceFormManage：无分页定高 + 前端过滤 + 按状态条件图标
- ServiceItemEdit：page-wrapper 根容器 + 必填红星
- 状态 Tag 色常量迁 api 层（APPLY_STATUS_COLOR/ITEM_STATUS_COLOR）
- dataApi 返回 alova Method 不调 .send()；分页 formatResponse 适配 {total,list}
- vite build 通过（27s）
This commit is contained in:
chenxing
+195
-181
@@ -17,6 +17,13 @@ import RichTextEditor from "@/components/RichTextEditor.vue";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { currentSiteCode, loadSites } = useSite();
|
||||
const formRef = ref<any>(null);
|
||||
|
||||
// 必填校验（bsch应用页规范 §1：校验失败提示统一"请填写红色星号内容！"）
|
||||
const saveRules = {
|
||||
itemCode: [{ required: true, message: "请填写红色星号内容！", trigger: "blur" }],
|
||||
title: [{ required: true, message: "请填写红色星号内容！", trigger: "blur" }],
|
||||
};
|
||||
|
||||
const form = ref<SvcItemSaveRequest & Record<string, any>>({
|
||||
siteCode: "",
|
||||
@@ -109,6 +116,11 @@ async function uploadGuide(file: File) {
|
||||
}
|
||||
|
||||
async function save(publishAfter: boolean) {
|
||||
const valid = await new Promise<boolean>(resolve => formRef.value?.validate(resolve));
|
||||
if (!valid) {
|
||||
Message.warning("请填写红色星号内容！");
|
||||
return;
|
||||
}
|
||||
const payload: SvcItemSaveRequest = {
|
||||
...form.value,
|
||||
id: route.query.id ? Number(route.query.id) : undefined,
|
||||
@@ -139,195 +151,197 @@ onMounted(loadAll);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<Card :bordered="false" dis-hover>
|
||||
<template #title>{{ pageTitle }}</template>
|
||||
<Form :label-width="130">
|
||||
<Divider orientation="left">基本信息</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<FormItem label="事项编码" required>
|
||||
<Input v-model="form.itemCode" placeholder="字母/数字/下划线/中划线，2~64 位" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="事项名称" required>
|
||||
<Input v-model="form.title" :maxlength="200" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<FormItem label="一句话简介">
|
||||
<Input v-model="form.summary" type="textarea" :rows="2" :maxlength="500" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="服务对象">
|
||||
<Select v-model="form.objectKey" clearable>
|
||||
<Option v-for="d in objects" :key="d.dictKey" :value="d.dictKey">{{ d.dictName }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="事项类别">
|
||||
<Select v-model="form.categoryKey" clearable>
|
||||
<Option v-for="d in categories" :key="d.dictKey" :value="d.dictKey">{{ d.dictName }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="服务部门">
|
||||
<Select v-model="form.deptGroupId" clearable>
|
||||
<Option v-for="d in deptOptions" :key="d.id" :value="d.id">{{ d.label }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="page-wrapper">
|
||||
<div class="main-container">
|
||||
<Card :bordered="false" dis-hover>
|
||||
<template #title>{{ pageTitle }}</template>
|
||||
<Form ref="formRef" :model="form" :rules="saveRules" :label-width="130">
|
||||
<Divider orientation="left">基本信息</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<FormItem label="事项编码" prop="itemCode">
|
||||
<Input v-model="form.itemCode" placeholder="字母/数字/下划线/中划线，2~64 位" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="事项名称" prop="title">
|
||||
<Input v-model="form.title" :maxlength="200" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<FormItem label="一句话简介">
|
||||
<Input v-model="form.summary" type="textarea" :rows="2" :maxlength="500" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="服务对象">
|
||||
<Select v-model="form.objectKey" clearable>
|
||||
<Option v-for="d in objects" :key="d.dictKey" :value="d.dictKey">{{ d.dictName }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="事项类别">
|
||||
<Select v-model="form.categoryKey" clearable>
|
||||
<Option v-for="d in categories" :key="d.dictKey" :value="d.dictKey">{{ d.dictName }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="服务部门">
|
||||
<Select v-model="form.deptGroupId" clearable>
|
||||
<Option v-for="d in deptOptions" :key="d.id" :value="d.id">{{ d.label }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left">办理信息</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="8">
|
||||
<FormItem label="办理方式">
|
||||
<RadioGroup v-model="form.handleMode">
|
||||
<Radio :label="1">线上</Radio>
|
||||
<Radio :label="2">线下</Radio>
|
||||
<Radio :label="3">线上线下</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="可在线办理">
|
||||
<Switch v-model="form.onlineFlag" :true-value="1" :false-value="0" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="办理地点">
|
||||
<Input v-model="form.handlePlace" :maxlength="200" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="办理时限">
|
||||
<Input v-model="form.handleTimeLimit" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="承诺时限">
|
||||
<Input v-model="form.promiseTimeLimit" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="咨询电话">
|
||||
<Input v-model="form.contactPhone" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="监督投诉电话">
|
||||
<Input v-model="form.supervisePhone" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider orientation="left">办理信息</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="8">
|
||||
<FormItem label="办理方式">
|
||||
<RadioGroup v-model="form.handleMode">
|
||||
<Radio :label="1">线上</Radio>
|
||||
<Radio :label="2">线下</Radio>
|
||||
<Radio :label="3">线上线下</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="可在线办理">
|
||||
<Switch v-model="form.onlineFlag" :true-value="1" :false-value="0" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="办理地点">
|
||||
<Input v-model="form.handlePlace" :maxlength="200" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="办理时限">
|
||||
<Input v-model="form.handleTimeLimit" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="承诺时限">
|
||||
<Input v-model="form.promiseTimeLimit" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="咨询电话">
|
||||
<Input v-model="form.contactPhone" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="监督投诉电话">
|
||||
<Input v-model="form.supervisePhone" :maxlength="64" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left">在线办理绑定</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<FormItem label="办理流程">
|
||||
<div class="flow-select">
|
||||
<Select v-model="form.flowGuid" clearable :disabled="flowDisabled" placeholder="流程中心流程">
|
||||
<Option v-for="f in flows" :key="f.flowGuid" :value="f.flowGuid">
|
||||
{{ f.name }}（v{{ f.version }}）
|
||||
<Divider orientation="left">在线办理绑定</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<FormItem label="办理流程">
|
||||
<div class="flow-select">
|
||||
<Select v-model="form.flowGuid" clearable :disabled="flowDisabled" placeholder="流程中心流程">
|
||||
<Option v-for="f in flows" :key="f.flowGuid" :value="f.flowGuid">
|
||||
{{ f.name }}（v{{ f.version }}）
|
||||
</Option>
|
||||
</Select>
|
||||
<Button v-if="form.flowGuid" size="small" @click="openFlowDiagram">流程图</Button>
|
||||
</div>
|
||||
<div v-if="flowDisabled" class="tip">{{ flowDisabledReason || "流程中心未接入，暂只能配置线下事项" }}</div>
|
||||
<div v-else class="tip">可在线办理的事项必须绑定流程</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="办理表单">
|
||||
<Select v-model="form.formCode" clearable placeholder="该事项发起时填写的自定义表单">
|
||||
<Option v-for="f in forms" :key="f.code" :value="f.code">
|
||||
{{ f.name }}{{ f.status !== 1 ? `（${f.status === 2 ? "已停用" : "草稿"}）` : "" }}
|
||||
</Option>
|
||||
</Select>
|
||||
<Button v-if="form.flowGuid" size="small" @click="openFlowDiagram">流程图</Button>
|
||||
</div>
|
||||
<div v-if="flowDisabled" class="tip">{{ flowDisabledReason || "流程中心未接入，暂只能配置线下事项" }}</div>
|
||||
<div v-else class="tip">可在线办理的事项必须绑定流程</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="办理表单">
|
||||
<Select v-model="form.formCode" clearable placeholder="该事项发起时填写的自定义表单">
|
||||
<Option v-for="f in forms" :key="f.code" :value="f.code">
|
||||
{{ f.name }}{{ f.status !== 1 ? `（${f.status === 2 ? "已停用" : "草稿"}）` : "" }}
|
||||
</Option>
|
||||
</Select>
|
||||
<div v-if="selectedFormDraft" class="tip" style="color: #ed4014">
|
||||
该表单尚未发布，发布后才能在发起页实际填写；请到「表单管理」发布。
|
||||
</div>
|
||||
<div v-else class="tip">发起页按表单编码取最新已发布版本渲染</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<FormItem label="我要办理外链">
|
||||
<Input v-model="form.applyUrl" placeholder="http(s):// 完整地址；填写后优先于自动生成地址" />
|
||||
<div class="tip">优先级：本外链 > 办事大厅自动生成 > 不显示按钮</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<div v-if="selectedFormDraft" class="tip" style="color: #ed4014">
|
||||
该表单尚未发布，发布后才能在发起页实际填写；请到「表单管理」发布。
|
||||
</div>
|
||||
<div v-else class="tip">发起页按表单编码取最新已发布版本渲染</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<FormItem label="我要办理外链">
|
||||
<Input v-model="form.applyUrl" placeholder="http(s):// 完整地址；填写后优先于自动生成地址" />
|
||||
<div class="tip">优先级：本外链 > 办事大厅自动生成 > 不显示按钮</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left">关联栏目与资产</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="8">
|
||||
<FormItem label="常见问题栏目">
|
||||
<InputNumber v-model="form.faqCategoryId" :min="1" style="width: 100%" placeholder="CMS 栏目 id" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="公告信息栏目">
|
||||
<InputNumber v-model="form.noticeCategoryId" :min="1" style="width: 100%" placeholder="CMS 栏目 id" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="文件规定栏目">
|
||||
<InputNumber v-model="form.ruleCategoryId" :min="1" style="width: 100%" placeholder="CMS 栏目 id" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="事项封面">
|
||||
<div class="cover">
|
||||
<img v-if="form.coverImage" :src="form.coverImage" class="cover-img" />
|
||||
<Upload :before-upload="uploadCover" :show-upload-list="false" accept="image/*">
|
||||
<Button :loading="uploadingCover" icon="ios-image-outline">上传封面</Button>
|
||||
</Upload>
|
||||
<Button v-if="form.coverImage" size="small" type="text" @click="form.coverImage = ''">移除</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<FormItem label="排序值">
|
||||
<InputNumber v-model="form.sortNo" style="width: 100%" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider orientation="left">关联栏目与资产</Divider>
|
||||
<Row :gutter="16">
|
||||
<Col span="8">
|
||||
<FormItem label="常见问题栏目">
|
||||
<InputNumber v-model="form.faqCategoryId" :min="1" style="width: 100%" placeholder="CMS 栏目 id" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="公告信息栏目">
|
||||
<InputNumber v-model="form.noticeCategoryId" :min="1" style="width: 100%" placeholder="CMS 栏目 id" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<FormItem label="文件规定栏目">
|
||||
<InputNumber v-model="form.ruleCategoryId" :min="1" style="width: 100%" placeholder="CMS 栏目 id" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<FormItem label="事项封面">
|
||||
<div class="cover">
|
||||
<img v-if="form.coverImage" :src="form.coverImage" class="cover-img" />
|
||||
<Upload :before-upload="uploadCover" :show-upload-list="false" accept="image/*">
|
||||
<Button :loading="uploadingCover" icon="ios-image-outline">上传封面</Button>
|
||||
</Upload>
|
||||
<Button v-if="form.coverImage" size="small" type="text" @click="form.coverImage = ''">移除</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<FormItem label="排序值">
|
||||
<InputNumber v-model="form.sortNo" style="width: 100%" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left">指南内容</Divider>
|
||||
<FormItem label="办理流程">
|
||||
<RichTextEditor v-model="form.processHtml" placeholder="办理流程说明" />
|
||||
</FormItem>
|
||||
<FormItem label="所需材料">
|
||||
<RichTextEditor v-model="form.materialHtml" placeholder="所需材料说明" />
|
||||
</FormItem>
|
||||
<FormItem label="注意事项">
|
||||
<RichTextEditor v-model="form.noticeHtml" placeholder="注意事项" />
|
||||
</FormItem>
|
||||
<FormItem label="指南附件">
|
||||
<Upload :before-upload="uploadGuide" :show-upload-list="false">
|
||||
<Button icon="ios-cloud-upload-outline">上传附件</Button>
|
||||
</Upload>
|
||||
<div class="att-list">
|
||||
<div v-for="a in attachments" :key="a.id" class="att-item">
|
||||
<a :href="a.fileUrl" target="_blank" rel="noopener">{{ a.fileName }}</a>
|
||||
<Button size="small" type="text" style="color: #ed4014"
|
||||
@click="attachments = attachments.filter(x => x.id !== a.id)">移除</Button>
|
||||
<Divider orientation="left">指南内容</Divider>
|
||||
<FormItem label="办理流程">
|
||||
<RichTextEditor v-model="form.processHtml" placeholder="办理流程说明" />
|
||||
</FormItem>
|
||||
<FormItem label="所需材料">
|
||||
<RichTextEditor v-model="form.materialHtml" placeholder="所需材料说明" />
|
||||
</FormItem>
|
||||
<FormItem label="注意事项">
|
||||
<RichTextEditor v-model="form.noticeHtml" placeholder="注意事项说明" />
|
||||
</FormItem>
|
||||
<FormItem label="指南附件">
|
||||
<Upload :before-upload="uploadGuide" :show-upload-list="false">
|
||||
<Button icon="ios-cloud-upload-outline">上传附件</Button>
|
||||
</Upload>
|
||||
<div class="att-list">
|
||||
<div v-for="a in attachments" :key="a.id" class="att-item">
|
||||
<a :href="a.fileUrl" target="_blank" rel="noopener">{{ a.fileName }}</a>
|
||||
<Button size="small" type="text" style="color: #ed4014"
|
||||
@click="attachments = attachments.filter(x => x.id !== a.id)">移除</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormItem>
|
||||
|
||||
<div class="actions">
|
||||
<Button type="primary" :loading="false" @click="save(false)">保存</Button>
|
||||
<Button type="success" @click="save(true)">保存并发布</Button>
|
||||
<Button @click="router.back()">返回</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
<div class="actions">
|
||||
<Button type="primary" :loading="false" @click="save(false)">保存</Button>
|
||||
<Button type="success" @click="save(true)">保存并发布</Button>
|
||||
<Button @click="router.back()">返回</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user