feat(签署文书): 统一签署态文书样式并精简演示种子为单份麻精同意书
This commit is contained in:
yelan
@@ -1,4 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文书库的两级筛选条（原型 V10.2 的 #libTabs / #libStatus）。
|
||||
*
|
||||
* 类名刻意沿用原型的 lib-tabs / lib-tab / lib-status / lib-st：这套样式在原型里
|
||||
* 是文档库页面独有的筛选语言（胶囊 + 虚线分隔），与通用 Tabs 组件的观感不同，
|
||||
* 换成通用组件会把「全部（8）」这类计数排版搞丢。
|
||||
*
|
||||
* 用 <button> 而不是原型的 <span onclick>：保留键盘可达与 aria-selected。
|
||||
*/
|
||||
import type { DepartmentTab, DocumentFilterStatus, StatusTab } from '../types'
|
||||
|
||||
defineProps<{
|
||||
@@ -15,14 +24,14 @@ const emit = defineEmits<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filter-card">
|
||||
<div class="department-tabs" role="tablist" aria-label="按科室筛选">
|
||||
<div class="lib-filter">
|
||||
<div class="lib-tabs" role="tablist" aria-label="按科室筛选">
|
||||
<button
|
||||
v-for="tab in departments"
|
||||
:key="tab.key ?? 'all'"
|
||||
type="button"
|
||||
class="department-tab"
|
||||
:class="{ active: department === tab.key }"
|
||||
class="lib-tab"
|
||||
:class="{ on: department === tab.key }"
|
||||
:aria-selected="department === tab.key"
|
||||
role="tab"
|
||||
@click="emit('update:department', tab.key)"
|
||||
@@ -31,25 +40,26 @@ const emit = defineEmits<{
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="status-tabs" role="tablist" aria-label="按状态筛选">
|
||||
<div class="lib-status" role="tablist" aria-label="按状态筛选">
|
||||
<button
|
||||
v-for="tab in statuses"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="status-tab"
|
||||
:class="{ active: status === tab.key }"
|
||||
class="lib-st"
|
||||
:class="{ on: status === tab.key }"
|
||||
:aria-selected="status === tab.key"
|
||||
role="tab"
|
||||
@click="emit('update:status', tab.key)"
|
||||
>
|
||||
{{ tab.label }}<span v-if="tab.count"> · {{ tab.count }}</span>
|
||||
{{ tab.label }}<template v-if="tab.count"> · {{ tab.count }}</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.filter-card {
|
||||
/* 原型把两条页签包在 .card 里（padding:12px 16px; margin-bottom:12px），照抄 */
|
||||
.lib-filter {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
background: var(--card);
|
||||
@@ -57,37 +67,40 @@ const emit = defineEmits<{
|
||||
box-shadow: var(--sh);
|
||||
}
|
||||
|
||||
.department-tabs {
|
||||
/* 原型 .lib-tabs：flex-wrap + gap 8，块间距靠 margin-bottom 交给外层 */
|
||||
.lib-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.department-tab {
|
||||
.lib-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 5px 12px;
|
||||
color: var(--mut);
|
||||
font-size: 12.5px;
|
||||
background: #f4f8fa;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 16px;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
cursor: pointer;
|
||||
transition: 0.15s;
|
||||
}
|
||||
|
||||
.department-tab:hover {
|
||||
.lib-tab:hover {
|
||||
color: var(--brand);
|
||||
background: #eaf2f5;
|
||||
}
|
||||
|
||||
.department-tab.active {
|
||||
.lib-tab.on {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
/* 原型 .lib-status：与科室行之间用一条虚线分开，表达「同一维度下的第二级筛选」 */
|
||||
.lib-status {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
@@ -95,27 +108,27 @@ const emit = defineEmits<{
|
||||
border-top: 1px dashed var(--line);
|
||||
}
|
||||
|
||||
.status-tab {
|
||||
.lib-st {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
cursor: pointer;
|
||||
transition: 0.15s;
|
||||
}
|
||||
|
||||
.status-tab:hover {
|
||||
.lib-st:hover {
|
||||
color: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.status-tab.active {
|
||||
.lib-st.on {
|
||||
color: var(--brand-d);
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
background: var(--brand-l);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { readLibraryStatus } from '../library'
|
||||
import type { DocumentHistoryRow, DocumentTemplate } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
template: DocumentTemplate | null
|
||||
rows: DocumentHistoryRow[]
|
||||
loading: boolean
|
||||
error: boolean
|
||||
/** 演示文库只保存当前版本，弹窗要如实说明，别让科室以为这就是全部历史 */
|
||||
isMock: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
/** 查看某个历史版本的正文（只读） */
|
||||
'view-version': [versionId: string]
|
||||
}>()
|
||||
|
||||
const sub = computed(() => {
|
||||
if (!props.template) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const status = readLibraryStatus(props.template)
|
||||
|
||||
return `${props.template.name} · ${props.template.code || '未编号'} · 当前 ${props.template.version}（${status}）`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="visible && template" class="dialog-mask" @click.self="emit('close')">
|
||||
<section
|
||||
class="dialog-card history-dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="history-dialog-title"
|
||||
>
|
||||
<header class="dialog-header">
|
||||
<div class="dialog-heading">
|
||||
<strong id="history-dialog-title">📄 文档历史记录</strong>
|
||||
<span>{{ sub }}</span>
|
||||
</div>
|
||||
<button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="dialog-body">
|
||||
<p v-if="loading" class="history-state">正在加载历史记录…</p>
|
||||
|
||||
<p v-else-if="error" class="history-state history-state--error">
|
||||
历史记录加载失败，请确认后端模板版本接口可访问后重试。
|
||||
</p>
|
||||
|
||||
<template v-else-if="rows.length">
|
||||
<div class="table-scroll">
|
||||
<table class="history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-version">版本</th>
|
||||
<th class="col-operator">操作人</th>
|
||||
<th class="col-time">时间</th>
|
||||
<th>操作</th>
|
||||
<th>说明</th>
|
||||
<th class="col-action">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in rows" :key="row.id">
|
||||
<td><b>{{ row.version }}</b></td>
|
||||
<td>{{ row.operator }}</td>
|
||||
<td>{{ row.operatedAt || '—' }}</td>
|
||||
<td>{{ row.action }}</td>
|
||||
<td class="cell-note">{{ row.note }}</td>
|
||||
<td>
|
||||
<span v-if="row.isCurrent" class="current-badge">当前</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="row-button"
|
||||
title="只读查看该版本的正文"
|
||||
@click="emit('view-version', row.id)"
|
||||
>
|
||||
查看
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p v-if="isMock" class="history-hint">
|
||||
演示文库只保留当前版本，因此这里只有一条。真实模式下会列出该文书的全部历史版本。
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<p v-else class="history-state">该文书还没有版本记录。</p>
|
||||
</div>
|
||||
|
||||
<footer class="dialog-footer">
|
||||
<span>
|
||||
每次保存 / 发布自动生成一条版本记录（版本号 · 操作人 · 时间 · 说明），全程可追溯、不可删除；
|
||||
已发布版本按任务固化，历史任务仍按当时版本渲染。
|
||||
</span>
|
||||
<button type="button" class="action-button" @click="emit('close')">关闭</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
background: rgb(9 40 52 / 45%);
|
||||
}
|
||||
|
||||
.dialog-card {
|
||||
display: flex;
|
||||
width: 760px;
|
||||
max-width: 96vw;
|
||||
max-height: calc(100vh - 32px);
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--sh-modal);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 12px 18px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.dialog-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.dialog-heading strong {
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.dialog-heading span {
|
||||
overflow: hidden;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
color: var(--mut);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dialog-close:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex: 1;
|
||||
padding: 14px 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.history-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.history-table th,
|
||||
.history-table td {
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.history-table th {
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
background: #f8fbfc;
|
||||
}
|
||||
|
||||
.history-table td {
|
||||
color: var(--ink);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.cell-note {
|
||||
color: var(--mut);
|
||||
}
|
||||
|
||||
.col-version {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.col-operator {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.col-action {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.current-badge {
|
||||
padding: 2px 8px;
|
||||
color: var(--ok);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
background: var(--ok-l);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.row-button {
|
||||
padding: 3px 10px;
|
||||
color: var(--brand);
|
||||
font-size: 11.5px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--brand);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.row-button:hover {
|
||||
background: var(--brand-l);
|
||||
}
|
||||
|
||||
.history-state {
|
||||
padding: 28px 0;
|
||||
margin: 0;
|
||||
color: var(--mut);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-state--error {
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
.history-hint {
|
||||
margin: 12px 0 0;
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 18px;
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
background: #f8fbfc;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0 0 14px 14px;
|
||||
}
|
||||
|
||||
.dialog-footer span {
|
||||
flex: 1;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 16px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: var(--brand);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: var(--brand-d);
|
||||
}
|
||||
</style>
|
||||
@@ -7,10 +7,8 @@ withDefaults(
|
||||
total: number
|
||||
/** 只在演示模式下展示「重置演示数据」：真实环境不该出现这个自测入口 */
|
||||
showReset?: boolean
|
||||
/** 模板包导出接口尚未接入，先只在演示模式展示入口；功能上线后放开这里即可 */
|
||||
showExport?: boolean
|
||||
}>(),
|
||||
{ showReset: false, showExport: false },
|
||||
{ showReset: false },
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -26,42 +24,22 @@ function handleInput(event: Event) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="library-header">
|
||||
<div class="library-title">
|
||||
<h2>文档库管理</h2>
|
||||
<p>
|
||||
按科室分类的知情同意书模板库，支持预览、编辑与版本管理。
|
||||
<span>共 {{ total }} 份模板</span>
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
原型 V10.2：文档库顶部不再重复页面标题（左侧导航已经写着「文档库管理」），
|
||||
只剩一行「搜索框 + 共 N 份模板 + 导出模板包 + ＋新增文档」。
|
||||
-->
|
||||
<div class="lib-header">
|
||||
<input
|
||||
:value="modelValue"
|
||||
class="lib-search"
|
||||
type="search"
|
||||
placeholder="搜索模板名 / 编号 / 科室 / 分类"
|
||||
aria-label="搜索模板名称、编号、科室或分类"
|
||||
@input="handleInput"
|
||||
/>
|
||||
|
||||
<div class="library-tools">
|
||||
<input
|
||||
:value="modelValue"
|
||||
class="library-search"
|
||||
type="search"
|
||||
placeholder="搜索模板名称 / 编号 / 科室"
|
||||
aria-label="搜索模板名称、编号或科室"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<button
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.create"
|
||||
type="button"
|
||||
class="tool-button primary"
|
||||
@click="emit('add')"
|
||||
>
|
||||
<span aria-hidden="true">＋</span>
|
||||
新增文档
|
||||
</button>
|
||||
<button
|
||||
v-if="showExport"
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.export"
|
||||
type="button"
|
||||
class="tool-button secondary"
|
||||
@click="emit('export')"
|
||||
>
|
||||
导出模板包
|
||||
</button>
|
||||
<div class="lib-tools">
|
||||
<span class="lib-count">共 {{ total }} 份模板</span>
|
||||
<button
|
||||
v-if="showReset"
|
||||
type="button"
|
||||
@@ -71,12 +49,29 @@ function handleInput(event: Event) {
|
||||
>
|
||||
重置演示数据
|
||||
</button>
|
||||
<button
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.export"
|
||||
type="button"
|
||||
class="tool-button secondary"
|
||||
@click="emit('export')"
|
||||
>
|
||||
导出模板包
|
||||
</button>
|
||||
<button
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.create"
|
||||
type="button"
|
||||
class="tool-button primary"
|
||||
@click="emit('add')"
|
||||
>
|
||||
<span aria-hidden="true">＋</span>
|
||||
新增文档
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.library-header {
|
||||
.lib-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
@@ -85,40 +80,9 @@ function handleInput(event: Event) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.library-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.library-title h2 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 17px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.library-title p {
|
||||
margin: 0;
|
||||
color: var(--mut);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.library-title p span {
|
||||
margin-left: 8px;
|
||||
color: var(--brand);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.library-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.library-search {
|
||||
width: 240px;
|
||||
.lib-search {
|
||||
flex: 1;
|
||||
max-width: 420px;
|
||||
padding: 6px 12px;
|
||||
color: var(--ink);
|
||||
font-size: 12.5px;
|
||||
@@ -127,16 +91,34 @@ function handleInput(event: Event) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.library-search:focus {
|
||||
.lib-search:focus {
|
||||
outline: none;
|
||||
border-color: var(--brand);
|
||||
box-shadow: 0 0 0 3px rgb(14 110 140 / 10%);
|
||||
}
|
||||
|
||||
.lib-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.lib-count {
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tool-button {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
padding: 7px 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
border-radius: 7px;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
@@ -177,11 +159,12 @@ function handleInput(event: Event) {
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.library-tools {
|
||||
.lib-tools {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.library-search {
|
||||
.lib-search {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
@@ -3,14 +3,17 @@ import { computed, nextTick, ref, watch } from 'vue'
|
||||
|
||||
import {
|
||||
buildSigningDocumentHtml,
|
||||
collectSelectedItemsFromRoot,
|
||||
describeFieldProgress,
|
||||
OPTION_TICK_SELECTOR,
|
||||
readAnswersFromRoot,
|
||||
type SigningDocumentData,
|
||||
toggleOptionAt,
|
||||
type SigningFieldProgress,
|
||||
} from '@/utils/signing-document'
|
||||
|
||||
import { readStatusLabel, readStatusTone } from '../mock'
|
||||
import type { DocumentTemplate } from '../types'
|
||||
import { canInitiateSigning, readLibraryStatus, readStatusTone } from '../library'
|
||||
import { PREVIEW_PATIENT as previewPatient } from '../sample-patient'
|
||||
import type { DocumentLibraryStatus, DocumentTemplate } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
@@ -25,22 +28,8 @@ const emit = defineEmits<{
|
||||
}>()
|
||||
|
||||
/**
|
||||
* 签署预览用的示例患者快照（脱敏演示数据）。
|
||||
*
|
||||
* 创建文书时还没有真实签署任务，用固定示例值让科室看到占位符被填充后的版式；
|
||||
* 真实签署仍以任务创建时的患者/就诊快照为准。
|
||||
* 这份数据只服务于「签署预览」这个演示页签，因此留在组件内，
|
||||
* 不再从页面 mock.ts 导出——那会让"演示数据"渗透到文书库的其它部分。
|
||||
* 签署预览用的示例患者快照见 ../sample-patient（编辑器弹窗的「签署预览」共用同一份）。
|
||||
*/
|
||||
const previewPatient: SigningDocumentData = {
|
||||
patientName: '李某某',
|
||||
sex: '男',
|
||||
age: 46,
|
||||
visitNo: 'V20260914001',
|
||||
visitDate: '2026-09-14',
|
||||
phone: '138****5678',
|
||||
signedAt: '',
|
||||
}
|
||||
|
||||
/** 预览页签：「文书内容」看原始定稿，「签署预览」看占位符填充与勾选交互化后的样子 */
|
||||
const activeTab = ref<'content' | 'signing'>('content')
|
||||
@@ -81,17 +70,22 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
const statusLabel = computed(() => (props.template ? readStatusLabel(props.template) : ''))
|
||||
/** 状态口径统一走 library.ts：卡片、页签、预览三处必须是同一档 */
|
||||
const libraryStatus = computed<DocumentLibraryStatus>(() =>
|
||||
props.template ? readLibraryStatus(props.template) : '草稿',
|
||||
)
|
||||
|
||||
/** 徽标配色与文书卡片同口径：草稿/待审核/已驳回/已发布/已归档各不相同 */
|
||||
const statusTone = computed(() => (props.template ? readStatusTone(props.template) : 'draft'))
|
||||
const statusLabel = computed(() => libraryStatus.value)
|
||||
|
||||
/** 徽标配色与文书卡片同口径（见 library.ts 的 STATUS_TONES） */
|
||||
const statusTone = computed(() => readStatusTone(libraryStatus.value))
|
||||
|
||||
/**
|
||||
* 与文书卡片保持同一口径：只有已发布（后端 APPROVED / PUBLISHED）才能发起签署。
|
||||
* 不放行 review —— 它同时承载待审核与已驳回，两者都未定稿。
|
||||
* 与文书卡片保持同一口径：只有「启用中」的文书能发起签署。
|
||||
* 「需复审」不放行——它同时承载待审核与已驳回，两者都未定稿。
|
||||
*/
|
||||
const canInitiate = computed(
|
||||
() => Boolean(props.template?.contentHtml) && props.template?.status === 'published',
|
||||
() => Boolean(props.template?.contentHtml) && canInitiateSigning(libraryStatus.value),
|
||||
)
|
||||
|
||||
// 预置文书的 contentHtml 是完整 HTML 文档（自带版式样式）；
|
||||
@@ -160,9 +154,27 @@ function syncPreviewFields() {
|
||||
|
||||
const answers = readAnswersFromRoot(body)
|
||||
signingProgress.value = describeFieldProgress(body, answers)
|
||||
signingSelection.value = Array.from(
|
||||
body.querySelectorAll<HTMLInputElement>('input.sign-doc-checkbox:checked'),
|
||||
).map((input) => input.getAttribute('data-sign-item') ?? '')
|
||||
signingSelection.value = collectSelectedItemsFromRoot(body)
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览里的 ☑ / ☐ 就地切换。
|
||||
* 选项渲染成文本（原型口径），不会触发 change 事件，必须自己接 click；
|
||||
* 切换判据在 utils/signing-document 的 toggleOptionAt 里，与签署端共用一份。
|
||||
*/
|
||||
function handlePreviewClick(event: MouseEvent) {
|
||||
const body = signingBodyRef.value
|
||||
const target = event.target
|
||||
|
||||
if (!body || !(target instanceof Element)) {
|
||||
return
|
||||
}
|
||||
|
||||
const option = target.closest<HTMLElement>(OPTION_TICK_SELECTOR)
|
||||
|
||||
if (option && toggleOptionAt(body, option)) {
|
||||
syncPreviewFields()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -224,7 +236,7 @@ function syncPreviewFields() {
|
||||
<template v-else-if="template.contentHtml && activeTab === 'signing'">
|
||||
<p class="preview-note">
|
||||
按签署时效果渲染：占位符已用示例患者「{{ previewPatient.patientName }}」填充，
|
||||
表头含「勾选」的表格已转为勾选框，可直接勾选确认交互效果（预览不保存勾选结果）。
|
||||
空白处是待补录的下划线、☑ / ☐ 可直接点击确认交互效果（预览不保存结果）。
|
||||
</p>
|
||||
<!-- eslint-disable vue/no-v-html -- 内容为本系统定稿的文书 HTML（编辑器产出、仅医务人员可改），非任意用户输入 -->
|
||||
<div
|
||||
@@ -232,6 +244,7 @@ function syncPreviewFields() {
|
||||
class="signing-preview"
|
||||
@change="syncPreviewFields"
|
||||
@input="syncPreviewFields"
|
||||
@click="handlePreviewClick"
|
||||
v-html="signingPreviewHtml"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
@@ -382,9 +395,10 @@ function syncPreviewFields() {
|
||||
background: var(--brand-l);
|
||||
}
|
||||
|
||||
/* 状态徽标配色：与文书卡片同一套色调，草稿/待审核/已驳回不再一律显示成绿色 */
|
||||
/* 状态徽标配色：与文书卡片同一套色调（见 library.ts 的 STATUS_TONES） */
|
||||
.status-badge.tone-draft,
|
||||
.status-badge.tone-archived {
|
||||
.status-badge.tone-archived,
|
||||
.status-badge.tone-stopped {
|
||||
color: #8a9aa3;
|
||||
background: #eceef0;
|
||||
}
|
||||
@@ -394,12 +408,7 @@ function syncPreviewFields() {
|
||||
background: var(--warn-l);
|
||||
}
|
||||
|
||||
.status-badge.tone-rejected {
|
||||
color: var(--err);
|
||||
background: var(--err-l);
|
||||
}
|
||||
|
||||
.status-badge.tone-published {
|
||||
.status-badge.tone-enabled {
|
||||
color: var(--ok);
|
||||
background: var(--ok-l);
|
||||
}
|
||||
@@ -503,37 +512,6 @@ function syncPreviewFields() {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔。
|
||||
四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width），样式里不再写死 */
|
||||
.signing-preview :deep(.sign-doc-header) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 18px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1.5px solid #52646e;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-doc-header__item) {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-doc-header__label) {
|
||||
flex-shrink: 0;
|
||||
color: #52646e;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-doc-header__value) {
|
||||
padding: 0 5px 1px;
|
||||
color: #1c2b33;
|
||||
font-size: 12.5px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #52646e;
|
||||
}
|
||||
|
||||
.signing-preview :deep(table) {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
@@ -557,123 +535,9 @@ function syncPreviewFields() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-doc-checkbox) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
accent-color: var(--brand);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */
|
||||
.signing-preview :deep(.sign-doc-option) {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-doc-signature) {
|
||||
max-width: 150px;
|
||||
max-height: 52px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 填写项：签署预览里按签署时的控件外观渲染，样式与签署端保持一致 */
|
||||
.signing-preview :deep(.sign-field) {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 2px 7px;
|
||||
margin: 0 2px;
|
||||
vertical-align: middle;
|
||||
background: #f7fbfd;
|
||||
border: 1px solid #d4e3e8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__label) {
|
||||
flex-shrink: 0;
|
||||
color: #587786;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__required) {
|
||||
margin-left: 2px;
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__control) {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__input) {
|
||||
width: 9em;
|
||||
min-width: 0;
|
||||
padding: 1px 5px;
|
||||
color: #1c2b33;
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
background: #fff;
|
||||
border: 1px solid #cfe0e6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__input:focus) {
|
||||
border-color: var(--brand);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__choices) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__radio),
|
||||
.signing-preview :deep(.sign-field__checkbox) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
accent-color: var(--brand);
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__signature-empty) {
|
||||
padding: 12px 18px;
|
||||
color: #a96900;
|
||||
font-size: 11px;
|
||||
background: #fff9ec;
|
||||
border: 1px dashed #f0a21a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field--signature) {
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field--signature .sign-field__control) {
|
||||
min-width: 150px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field--abnormal) {
|
||||
background: #fdf0f0;
|
||||
border-color: #efb9bb;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field--abnormal .sign-field__label) {
|
||||
color: #a42e34;
|
||||
}
|
||||
|
||||
.signing-preview :deep(.sign-field__badge) {
|
||||
padding: 1px 6px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
background: var(--err);
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* 填写项胶囊、选项 ☑ / ☐、系统页眉的样式在 styles/signing-document.css（全局）：
|
||||
同一份签署态文书会在文书库预览、签署工作台与编辑器三处出现，各写一份必然漂移。
|
||||
这里只保留预览容器自己的版式。 */
|
||||
|
||||
.signing-selection {
|
||||
padding: 8px 12px;
|
||||
|
||||
@@ -0,0 +1,485 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import type { DepartmentRecord } from '@/api/management/types'
|
||||
|
||||
import { DEFAULT_DOCUMENT_TYPE, DOCUMENT_TYPES, GENERAL_OWNERSHIP } from '../library'
|
||||
import { DOC_TEMPLATE_PERMISSIONS } from '../permissions'
|
||||
import type { DocumentPropsForm, DocumentTemplate } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
/** null 表示新增文档 */
|
||||
template: DocumentTemplate | null
|
||||
/** 可归属的科室（真实模式取组织接口，演示模式取演示字典） */
|
||||
departments: DepartmentRecord[]
|
||||
/**
|
||||
* 是否可以把文档设为「通用（全院）」。
|
||||
*
|
||||
* 原型 canSetGeneral() 只放给系统管理员 / 医务管理；这里由页面判定后传进来，
|
||||
* 弹窗不自己去读角色——弹窗只负责表单。
|
||||
*/
|
||||
canSetGeneral: boolean
|
||||
/**
|
||||
* 演示模式。
|
||||
*
|
||||
* 真实模式下「版本号」是只读展示：版本由后端在每次保存正文时递增生成
|
||||
* （CreateTemplateVersionRequest 的 versionNo 是可选字段，前端不填就由后端编），
|
||||
* 让科室手填一个和后端对不上的号，只会让卡片上的版本显示变成假信息。
|
||||
*/
|
||||
isMock: boolean
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
submit: [form: DocumentPropsForm]
|
||||
}>()
|
||||
|
||||
const isCreate = computed(() => !props.template)
|
||||
const title = computed(() => (isCreate.value ? '新增文档' : '编辑文档属性'))
|
||||
const sub = computed(() =>
|
||||
props.template
|
||||
? `${props.template.name} · ${props.template.code || '未编号'}`
|
||||
: '先创建文书属性，保存后进入「编辑正文」添加 Word 内容',
|
||||
)
|
||||
const submitLabel = computed(() => (isCreate.value ? '创建并编辑正文' : '保存属性'))
|
||||
|
||||
const form = reactive<DocumentPropsForm>({
|
||||
name: '',
|
||||
category: DEFAULT_DOCUMENT_TYPE,
|
||||
versionNo: 'v1.0.0',
|
||||
ownership: [],
|
||||
description: '',
|
||||
})
|
||||
|
||||
/**
|
||||
* 归属勾选列表。
|
||||
* 顺序与原型 docDeptOpts 一致：科室名在前、「通用（全院）」在最后，
|
||||
* 勾了通用（全院）就等于全院可见，其余科室勾选不再参与落库。
|
||||
*/
|
||||
const ownershipOptions = computed(() => {
|
||||
const names = props.departments.map((department) => department.name)
|
||||
|
||||
return props.canSetGeneral ? [...names, GENERAL_OWNERSHIP] : names
|
||||
})
|
||||
|
||||
const generalSelected = computed(() => form.ownership.includes(GENERAL_OWNERSHIP))
|
||||
|
||||
function toggleOwnership(option: string) {
|
||||
if (option === GENERAL_OWNERSHIP) {
|
||||
// 勾上「通用（全院）」就清掉科室勾选，取消则回到空选择——
|
||||
// 两种选择混在一起会让「到底归属哪儿」没有唯一答案
|
||||
form.ownership = generalSelected.value ? [] : [GENERAL_OWNERSHIP]
|
||||
return
|
||||
}
|
||||
|
||||
if (generalSelected.value) {
|
||||
form.ownership = []
|
||||
}
|
||||
|
||||
const index = form.ownership.indexOf(option)
|
||||
|
||||
if (index >= 0) {
|
||||
form.ownership.splice(index, 1)
|
||||
} else {
|
||||
form.ownership.push(option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (!visible) {
|
||||
return
|
||||
}
|
||||
|
||||
const template = props.template
|
||||
|
||||
Object.assign(form, {
|
||||
id: template?.id,
|
||||
name: template?.name ?? '',
|
||||
category: template?.category || DEFAULT_DOCUMENT_TYPE,
|
||||
versionNo: template?.version ?? 'v1.0.0',
|
||||
ownership: template
|
||||
? template.departmentId
|
||||
? [template.departmentName ?? ''].filter(Boolean)
|
||||
: [GENERAL_OWNERSHIP]
|
||||
: // 新增时预选当前用户所属科室（对得上就直接用，对不上就空着让科室自己勾）
|
||||
[],
|
||||
description: template?.description ?? '',
|
||||
})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function submit() {
|
||||
const name = form.name.trim()
|
||||
|
||||
if (!name) {
|
||||
ElMessage.error('请填写文书名称')
|
||||
return
|
||||
}
|
||||
|
||||
if (!form.ownership.length) {
|
||||
ElMessage.error('请至少选择一个归属科室')
|
||||
return
|
||||
}
|
||||
|
||||
emit('submit', {
|
||||
...(form.id ? { id: form.id } : {}),
|
||||
name,
|
||||
category: form.category,
|
||||
versionNo: form.versionNo.trim() || 'v1.0.0',
|
||||
ownership: [...form.ownership],
|
||||
description: form.description.trim(),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="visible" class="dialog-mask" role="presentation" @click.self="emit('close')">
|
||||
<section class="props-dialog" role="dialog" aria-modal="true" aria-labelledby="props-title">
|
||||
<header class="dialog-header">
|
||||
<div class="dialog-heading">
|
||||
<strong id="props-title">{{ title }}</strong>
|
||||
<span>{{ sub }}</span>
|
||||
</div>
|
||||
<button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="dialog-body">
|
||||
<p class="section-label">① 基本信息</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<label class="form-field span-2">
|
||||
<span>文书名称 <i>*</i></span>
|
||||
<input v-model="form.name" type="text" placeholder="例：麻醉药品、精神药品知情同意书" />
|
||||
</label>
|
||||
|
||||
<label class="form-field">
|
||||
<span>文档类型</span>
|
||||
<select v-model="form.category">
|
||||
<option v-for="type in DOCUMENT_TYPES" :key="type" :value="type">{{ type }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="form-field">
|
||||
<span>版本号</span>
|
||||
<input v-if="isMock" v-model="form.versionNo" type="text" placeholder="v1.0.0" />
|
||||
<span v-else class="auto-version">由系统按 vN 自动生成</span>
|
||||
</div>
|
||||
|
||||
<div class="form-field span-2">
|
||||
<span>文档归属 <i>*</i></span>
|
||||
<div class="ownership">
|
||||
<button
|
||||
v-for="option in ownershipOptions"
|
||||
:key="option"
|
||||
type="button"
|
||||
class="ownership-chip"
|
||||
:class="{ 'is-on': form.ownership.includes(option) }"
|
||||
@click="toggleOwnership(option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="field-tip">
|
||||
勾选科室设置可见范围，支持多科室与通用（全院）。勾选「通用（全院）」后各科室均可见。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label class="form-field span-2">
|
||||
<span>文书说明</span>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
rows="2"
|
||||
placeholder="显示在文书卡片上的简介"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="dialog-footer">
|
||||
<p>
|
||||
{{
|
||||
isCreate
|
||||
? '创建后自动进入类 Word 编辑器：可编写正文、导入 .docx 文件或插入签署占位符，保存后生效。'
|
||||
: '属性与正文分开维护：此处只修改文档基本信息与归属；正文请在文档卡片点「编辑正文」。'
|
||||
}}
|
||||
</p>
|
||||
<button type="button" class="footer-button secondary" @click="emit('close')">
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
v-permission.disable="isCreate ? DOC_TEMPLATE_PERMISSIONS.create : DOC_TEMPLATE_PERMISSIONS.props"
|
||||
type="button"
|
||||
class="footer-button primary"
|
||||
:disabled="saving"
|
||||
@click="submit"
|
||||
>
|
||||
{{ saving ? '保存中…' : submitLabel }}
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
background: rgb(9 40 52 / 45%);
|
||||
}
|
||||
|
||||
.props-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 660px;
|
||||
max-width: 96vw;
|
||||
max-height: calc(100vh - 32px);
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--sh-modal);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 12px 18px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.dialog-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.dialog-heading strong {
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.dialog-heading span {
|
||||
overflow: hidden;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
color: var(--mut);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dialog-close:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex: 1;
|
||||
padding: 14px 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
margin: 0 0 10px;
|
||||
color: var(--brand);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.form-field.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.form-field > span {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-field > span i {
|
||||
color: var(--err);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field select,
|
||||
.form-field textarea {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-field textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-field input:focus,
|
||||
.form-field select:focus,
|
||||
.form-field textarea:focus {
|
||||
border-color: var(--brand);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 真实模式的版本号只读展示。
|
||||
* 必须显式覆盖 `.form-field > span` 的标签样式——它是同一层的第二个 span，
|
||||
* 不覆盖就会变成和「版本号」标签一样的加粗小字。
|
||||
*/
|
||||
.form-field > span.auto-version {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 33px;
|
||||
padding: 7px 10px;
|
||||
margin-bottom: 0;
|
||||
color: var(--mut);
|
||||
font-size: 12.5px;
|
||||
font-weight: 400;
|
||||
background: #f4f8fa;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ownership {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ownership-chip {
|
||||
padding: 4px 11px;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
background: #f4f8fa;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.ownership-chip:hover {
|
||||
color: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.ownership-chip.is-on {
|
||||
color: var(--brand-d);
|
||||
font-weight: 700;
|
||||
background: var(--brand-l);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.field-tip {
|
||||
margin: 6px 0 0;
|
||||
color: var(--mut);
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 18px;
|
||||
background: #f8fbfc;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.dialog-footer p {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer-button {
|
||||
flex-shrink: 0;
|
||||
padding: 7px 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.footer-button.secondary {
|
||||
color: var(--brand);
|
||||
background: #fff;
|
||||
border: 1px solid var(--brand);
|
||||
}
|
||||
|
||||
.footer-button.primary {
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
border: 1px solid var(--brand);
|
||||
}
|
||||
|
||||
.footer-button:hover:not(:disabled) {
|
||||
filter: brightness(0.96);
|
||||
}
|
||||
|
||||
.footer-button:disabled {
|
||||
color: #aebbc0;
|
||||
cursor: not-allowed;
|
||||
background: #f1f5f6;
|
||||
border-color: #dce5e8;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-field.span-2 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dialog-footer p {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,185 +3,169 @@ import { computed } from 'vue'
|
||||
|
||||
import type { TemplateVersionAction } from '@/api/management/documents'
|
||||
|
||||
import type { DocumentTemplate } from '../types'
|
||||
import { readStatusLabel, readStatusTone } from '../mock'
|
||||
import {
|
||||
canInitiateSigning,
|
||||
canToggleStatus,
|
||||
DOCUMENT_STATUS_DOT,
|
||||
isGeneralOwnership,
|
||||
readLibraryStatus,
|
||||
readStatusTone,
|
||||
} from '../library'
|
||||
import { DOC_TEMPLATE_PERMISSIONS, workflowPermission } from '../permissions'
|
||||
import type { DocumentTemplate } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
template: DocumentTemplate
|
||||
/** 演示模式下「删除」是真删；真实模式下语义是下架（模板无 DELETE 接口，走归档） */
|
||||
/**
|
||||
* 演示模式。
|
||||
*
|
||||
* 真实模式下卡片只有「停用 / 启用」这一个状态动作：后端菜单资源树里的
|
||||
* 「发布 / 提交审核」按钮虽在，但原型 V10.2 已经抛弃那条工作流，
|
||||
* 科室侧不该再看到「提交审核」这一步（草稿的送审改由属性/正文弹窗完成，
|
||||
* 或直接由医务管理放行）。
|
||||
*/
|
||||
isMock: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
preview: [template: DocumentTemplate]
|
||||
edit: [template: DocumentTemplate]
|
||||
versions: [template: DocumentTemplate]
|
||||
'edit-props': [template: DocumentTemplate]
|
||||
'edit-content': [template: DocumentTemplate]
|
||||
history: [template: DocumentTemplate]
|
||||
'toggle-status': [template: DocumentTemplate]
|
||||
'submit-review': [template: DocumentTemplate]
|
||||
initiate: [template: DocumentTemplate]
|
||||
remove: [template: DocumentTemplate]
|
||||
workflow: [template: DocumentTemplate, action: TemplateVersionAction]
|
||||
}>()
|
||||
|
||||
const statusLabel = computed(() => readStatusLabel(props.template))
|
||||
const status = computed(() => readLibraryStatus(props.template))
|
||||
const tone = computed(() => readStatusTone(status.value))
|
||||
const dotColor = computed(() => DOCUMENT_STATUS_DOT[tone.value])
|
||||
|
||||
/** 配色按后端状态分组取（待审核与已驳回不能共用一个颜色） */
|
||||
const statusTone = computed(() => readStatusTone(props.template))
|
||||
const isGeneral = computed(() => isGeneralOwnership(props.template))
|
||||
const ownershipLabel = computed(() =>
|
||||
isGeneral.value ? '🌐 全院通用' : `🏥 ${props.template.departmentName ?? '未知科室'}`,
|
||||
)
|
||||
|
||||
/** 只有已发布 / 待复审的模板可以发起签署；草稿与已归档不可用 */
|
||||
const hasInitiableVersion = computed(() => Boolean(props.template.currentVersionId || props.isMock))
|
||||
/**
|
||||
* 归属徽标上的「·+N 科室」。
|
||||
*
|
||||
* sharedDepartments 只在演示文库里有值（后端 CreateTemplateRequest 只接受单个
|
||||
* departmentId），所以真实模式下这里自然为 0、标签不显示后缀——
|
||||
* 不给真实数据编一个后端没存的共享清单。
|
||||
*/
|
||||
const sharedCount = computed(() => props.template.sharedDepartments?.length ?? 0)
|
||||
|
||||
/** 只有「启用中」能发起签署；其余状态要么没定稿，要么已下线 */
|
||||
const canInitiate = computed(() => canInitiateSigning(status.value))
|
||||
const initiateTitle = computed(() =>
|
||||
hasInitiableVersion.value ? '用此模板发起签署' : '仅已发布或待复审的模板可发起签署',
|
||||
canInitiate.value ? '用此文书发起签署' : '仅「启用中」的文书可发起签署',
|
||||
)
|
||||
|
||||
/**
|
||||
* 版本工作流主动作。
|
||||
*
|
||||
* 模板状态只能由后端工作流推进，前端不自行改写 status，因此这里按后端原始状态
|
||||
* （backendStatus，不是归一后的 status）给出「当前该做的下一步」，把文书从草稿推到可签署。
|
||||
*
|
||||
* 不放在这里的两种状态：
|
||||
* - APPROVED / PUBLISHED 已经可签署，走「发起」按钮；
|
||||
* - ARCHIVED 是终态，没有任何可执行动作。
|
||||
*/
|
||||
const primaryAction = computed<{ key: TemplateVersionAction; label: string } | null>(() => {
|
||||
switch (props.template.backendStatus) {
|
||||
case 'DRAFT':
|
||||
return { key: 'submit-review', label: '提交审核' }
|
||||
case 'PENDING_REVIEW':
|
||||
return { key: 'approve', label: '审核通过' }
|
||||
case 'REJECTED':
|
||||
return { key: 'submit-review', label: '重新提交' }
|
||||
case 'DISABLED':
|
||||
return { key: 'publish', label: '重新启用' }
|
||||
case 'APPROVED':
|
||||
return { key: 'publish', label: '发布' }
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
const canToggle = computed(() => canToggleStatus(status.value))
|
||||
const toggleLabel = computed(() => (status.value === '停用' ? '启用' : '停用'))
|
||||
|
||||
/**
|
||||
* 版本工作流次要动作。
|
||||
*
|
||||
* 「驳回」不能只做成主动作的反面：审核通过和驳回是审核人的一对选择，
|
||||
* 必须同时可见，否则待审核的文书就只能通过、不能打回。
|
||||
*/
|
||||
const secondaryActions = computed<{ key: TemplateVersionAction; label: string; title: string }[]>(
|
||||
() => {
|
||||
if (props.template.backendStatus === 'PENDING_REVIEW') {
|
||||
return [
|
||||
{
|
||||
key: 'reject',
|
||||
label: '驳回',
|
||||
title: '驳回后需填写原因，科室按意见修改并重新提交',
|
||||
},
|
||||
]
|
||||
}
|
||||
/** 草稿的「提交审核」只在演示模式露出，真实模式不给这个入口 */
|
||||
const showSubmitReview = computed(() => props.isMock && status.value === '草稿')
|
||||
|
||||
return []
|
||||
},
|
||||
/** 停用/启用走的是后端版本动作：停用 → disable，启用 → publish */
|
||||
const toggleAction = computed<TemplateVersionAction>(() =>
|
||||
status.value === '停用' ? 'publish' : 'disable',
|
||||
)
|
||||
|
||||
/**
|
||||
* 本次交付暂不包含「版本历史」与「删除 / 下架」入口，先隐藏对应按钮。
|
||||
* 权限码已按 doc:template:hist / doc:template:stop 接好，需要恢复时把开关改回 true 即可。
|
||||
*/
|
||||
const showVersionAction = false
|
||||
const showRemoveAction = false
|
||||
|
||||
const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架此文书'))
|
||||
// 按钮文案与权限码的对应关系集中在模板里，避免多处各写一份
|
||||
const permissions = DOC_TEMPLATE_PERMISSIONS
|
||||
const togglePermission = computed(() => workflowPermission(toggleAction.value))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="template-card">
|
||||
<div class="template-head">
|
||||
<h3 :title="template.name">{{ template.name }}</h3>
|
||||
<span class="template-status" :class="'status-' + statusTone">
|
||||
<i aria-hidden="true" />
|
||||
{{ statusLabel }}
|
||||
<article class="tpl-card">
|
||||
<div class="tpl-hd">
|
||||
<h3 class="tpl-title" :title="template.name">{{ template.name }}</h3>
|
||||
<span class="tpl-status" :class="'tone-' + tone">
|
||||
<i :style="{ background: dotColor }" aria-hidden="true" />
|
||||
{{ status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="template-meta">
|
||||
{{ template.code }} · {{ template.version }} · {{ template.department }}
|
||||
</p>
|
||||
<p class="template-description">{{ template.description }}</p>
|
||||
<p class="tpl-meta">{{ template.code || '未编号' }} · {{ template.version }}</p>
|
||||
|
||||
<div class="template-footer">
|
||||
<span class="department-tag">
|
||||
<i aria-hidden="true" />
|
||||
{{ template.department }}
|
||||
<div class="tpl-tags">
|
||||
<span class="exam-tag" :class="isGeneral ? 'is-general' : 'is-department'">
|
||||
{{ ownershipLabel }}<template v-if="!isGeneral && sharedCount"> ·+{{ sharedCount }} 科室</template>
|
||||
</span>
|
||||
<div class="template-actions">
|
||||
<button type="button" class="card-button" @click="emit('preview', template)">预览</button>
|
||||
<button
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.edit"
|
||||
type="button"
|
||||
class="card-button"
|
||||
@click="emit('edit', template)"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
v-if="showVersionAction"
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.history"
|
||||
type="button"
|
||||
class="card-button"
|
||||
title="查看该文书的版本历史"
|
||||
@click="emit('versions', template)"
|
||||
>
|
||||
版本
|
||||
</button>
|
||||
<button
|
||||
v-if="hasInitiableVersion"
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.initiate"
|
||||
type="button"
|
||||
class="card-button primary"
|
||||
:title="initiateTitle"
|
||||
@click="emit('initiate', template)"
|
||||
>
|
||||
发起
|
||||
</button>
|
||||
<!-- 还不能签署时，把「当前该做的下一步」放在同一位置，避免按钮越堆越多 -->
|
||||
<button
|
||||
v-if="primaryAction"
|
||||
v-permission="workflowPermission(primaryAction.key)"
|
||||
type="button"
|
||||
class="card-button primary"
|
||||
:title="`${primaryAction.label}后才能发起签署`"
|
||||
@click="emit('workflow', template, primaryAction.key)"
|
||||
>
|
||||
{{ primaryAction.label }}
|
||||
</button>
|
||||
<button
|
||||
v-for="action in secondaryActions"
|
||||
:key="action.key"
|
||||
v-permission="workflowPermission(action.key)"
|
||||
type="button"
|
||||
class="card-button"
|
||||
:title="action.title"
|
||||
@click="emit('workflow', template, action.key)"
|
||||
>
|
||||
{{ action.label }}
|
||||
</button>
|
||||
<button
|
||||
v-if="showRemoveAction"
|
||||
v-permission="DOC_TEMPLATE_PERMISSIONS.stop"
|
||||
type="button"
|
||||
class="card-button danger"
|
||||
:title="removeTitle"
|
||||
@click="emit('remove', template)"
|
||||
>
|
||||
{{ isMock ? '删除' : '下架' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="tpl-desc">{{ template.description || '—' }}</p>
|
||||
|
||||
<div class="tpl-ft">
|
||||
<button type="button" class="card-button" @click="emit('preview', template)">预览</button>
|
||||
<button
|
||||
v-permission="permissions.props"
|
||||
type="button"
|
||||
class="card-button"
|
||||
@click="emit('edit-props', template)"
|
||||
>
|
||||
编辑属性
|
||||
</button>
|
||||
<button
|
||||
v-permission="permissions.edit"
|
||||
type="button"
|
||||
class="card-button"
|
||||
@click="emit('edit-content', template)"
|
||||
>
|
||||
编辑正文
|
||||
</button>
|
||||
<button
|
||||
v-permission="permissions.history"
|
||||
type="button"
|
||||
class="card-button"
|
||||
@click="emit('history', template)"
|
||||
>
|
||||
历史记录
|
||||
</button>
|
||||
|
||||
<span class="ft-spacer" />
|
||||
|
||||
<button
|
||||
v-if="canToggle"
|
||||
v-permission="togglePermission"
|
||||
type="button"
|
||||
class="card-button"
|
||||
:title="
|
||||
toggleLabel === '停用'
|
||||
? '停用后各科室不可见、不可发起签署'
|
||||
: '启用后各科室可见并可发起签署'
|
||||
"
|
||||
@click="emit('toggle-status', template)"
|
||||
>
|
||||
{{ toggleLabel }}
|
||||
</button>
|
||||
<button
|
||||
v-if="showSubmitReview"
|
||||
v-permission="permissions.publish"
|
||||
type="button"
|
||||
class="card-button"
|
||||
title="提交审核，审核通过后自动发布"
|
||||
@click="emit('submit-review', template)"
|
||||
>
|
||||
提交审核
|
||||
</button>
|
||||
<button
|
||||
v-if="canInitiate"
|
||||
v-permission="permissions.initiate"
|
||||
type="button"
|
||||
class="card-button primary"
|
||||
:title="initiateTitle"
|
||||
@click="emit('initiate', template)"
|
||||
>
|
||||
发起
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.template-card {
|
||||
.tpl-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
@@ -193,24 +177,22 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
|
||||
box-shadow: var(--sh);
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.template-card:hover {
|
||||
.tpl-card:hover {
|
||||
border-color: var(--brand);
|
||||
box-shadow: var(--sh-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgb(14 110 140 / 10%);
|
||||
}
|
||||
|
||||
.template-head {
|
||||
.tpl-hd {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.template-head h3 {
|
||||
.tpl-title {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
@@ -222,7 +204,7 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.template-status {
|
||||
.tpl-status {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
gap: 5px;
|
||||
@@ -234,41 +216,31 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.template-status i {
|
||||
.tpl-status i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-published {
|
||||
/* 徽标底色沿用原型 tg-* 那套色调；圆点颜色由内联样式给出（见 DOCUMENT_STATUS_DOT） */
|
||||
.tone-enabled {
|
||||
color: var(--ok);
|
||||
background: var(--ok-l);
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
color: #8a9aa3;
|
||||
background: #eceef0;
|
||||
}
|
||||
|
||||
.status-archived {
|
||||
color: #8a9aa3;
|
||||
background: #eceef0;
|
||||
}
|
||||
|
||||
.status-review {
|
||||
.tone-review {
|
||||
color: var(--warn);
|
||||
background: var(--warn-l);
|
||||
}
|
||||
|
||||
/* 已驳回要和「待审核」在颜色上分开：两者归一后都是 review，
|
||||
只靠文字区分时一眼扫过去仍会混为一谈 */
|
||||
.status-rejected {
|
||||
color: var(--err);
|
||||
background: var(--err-l);
|
||||
.tone-draft,
|
||||
.tone-archived,
|
||||
.tone-stopped {
|
||||
color: #8a9aa3;
|
||||
background: #eceef0;
|
||||
}
|
||||
|
||||
.template-meta {
|
||||
.tpl-meta {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: var(--mut);
|
||||
@@ -277,9 +249,36 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.template-description {
|
||||
flex: 1;
|
||||
.tpl-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 归属徽标：全院通用用蓝、科室用绿，与原型 tpl-card 的取色一致 */
|
||||
.exam-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.exam-tag.is-general {
|
||||
color: #3a7bd5;
|
||||
background: #e7effb;
|
||||
}
|
||||
|
||||
.exam-tag.is-department {
|
||||
color: #0b7a4b;
|
||||
background: #e2f5ec;
|
||||
}
|
||||
|
||||
.tpl-desc {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
min-height: 58px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
@@ -290,90 +289,50 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.template-footer {
|
||||
.tpl-ft {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.department-tag {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
padding: 3px 9px;
|
||||
color: var(--brand);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: var(--brand-l);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.department-tag i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 按钮数量随状态变化（待审核时多一个「驳回」），允许换行并右对齐，
|
||||
否则窄屏下最后一个按钮会被挤出卡片 */
|
||||
.template-actions {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
margin-top: 4px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* 把状态动作与发起推到右侧，左侧四个入口（预览/属性/正文/历史）成一组 */
|
||||
.ft-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
padding: 4px 9px;
|
||||
color: var(--brand);
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--brand);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card-button:hover {
|
||||
background: var(--brand-l);
|
||||
color: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.card-button.primary {
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.card-button.primary:hover {
|
||||
color: #fff;
|
||||
background: var(--brand-d);
|
||||
}
|
||||
|
||||
.card-button:disabled {
|
||||
color: #aebbc0;
|
||||
background: #f1f5f6;
|
||||
border-color: #dce5e8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.card-button.primary:disabled:hover {
|
||||
background: #f1f5f6;
|
||||
}
|
||||
|
||||
.card-button.danger {
|
||||
color: #b3442f;
|
||||
border-color: #cf7c68;
|
||||
}
|
||||
|
||||
.card-button.danger:hover {
|
||||
background: #fbeee9;
|
||||
border-color: var(--brand-d);
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.template-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
.ft-spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,335 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { formatTemplateDateTime } from '@/api/management/documents'
|
||||
import type { TemplateVersionResponseDto } from '@/api/management/types'
|
||||
|
||||
import { readBackendStatusLabel } from '../mock'
|
||||
import type { DocumentTemplate } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
template: DocumentTemplate | null
|
||||
versions: TemplateVersionResponseDto[]
|
||||
loading: boolean
|
||||
error: boolean
|
||||
/** 演示文库只保存当前版本，弹窗要如实说明，别让科室以为这就是全部历史 */
|
||||
isMock: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
}>()
|
||||
|
||||
/**
|
||||
* 版本 DTO → 展示行。
|
||||
*
|
||||
* 版本号优先用后端给的 versionNo；只给了自增号时补一个 `v{号}`，
|
||||
* 两者都没有才显示 —，不自己编一个看起来像版本号的值。
|
||||
*/
|
||||
const versionRows = computed(() =>
|
||||
props.versions.map((version) => ({
|
||||
id: version.id,
|
||||
versionNo: version.versionNo || (version.versionNumber ? `v${version.versionNumber}` : '—'),
|
||||
statusLabel: readBackendStatusLabel(version.status),
|
||||
isCurrent: version.id === props.template?.versionId,
|
||||
createdBy: version.createdBy || '—',
|
||||
createdAt: formatTemplateDateTime(version.createdAt),
|
||||
reviewedAt: formatTemplateDateTime(version.reviewedAt),
|
||||
publishedAt: formatTemplateDateTime(version.publishedAt),
|
||||
reviewComment: version.reviewComment ?? '',
|
||||
})),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="visible && template" class="dialog-mask" @click.self="emit('close')">
|
||||
<section
|
||||
class="dialog-card version-dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="version-dialog-title"
|
||||
>
|
||||
<header class="dialog-header">
|
||||
<div class="dialog-heading">
|
||||
<strong id="version-dialog-title">版本历史</strong>
|
||||
<span>{{ template.name }} · {{ template.code }}</span>
|
||||
</div>
|
||||
<button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="dialog-body">
|
||||
<p v-if="loading" class="version-state">正在加载版本历史…</p>
|
||||
|
||||
<p v-else-if="error" class="version-state version-state--error">
|
||||
版本历史加载失败，请确认后端模板版本接口可访问后重试。
|
||||
</p>
|
||||
|
||||
<template v-else-if="versionRows.length">
|
||||
<ol class="version-list">
|
||||
<li v-for="row in versionRows" :key="row.id" class="version-item">
|
||||
<div class="version-item__head">
|
||||
<strong>{{ row.versionNo }}</strong>
|
||||
<span class="version-status">{{ row.statusLabel }}</span>
|
||||
<span v-if="row.isCurrent" class="version-current">当前版本</span>
|
||||
</div>
|
||||
|
||||
<dl class="version-meta">
|
||||
<div>
|
||||
<dt>创建人</dt>
|
||||
<dd>{{ row.createdBy }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>创建时间</dt>
|
||||
<dd>{{ row.createdAt || '—' }}</dd>
|
||||
</div>
|
||||
<div v-if="row.reviewedAt">
|
||||
<dt>审核时间</dt>
|
||||
<dd>{{ row.reviewedAt }}</dd>
|
||||
</div>
|
||||
<div v-if="row.publishedAt">
|
||||
<dt>发布时间</dt>
|
||||
<dd>{{ row.publishedAt }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<p v-if="row.reviewComment" class="version-comment">
|
||||
审核意见：{{ row.reviewComment }}
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p v-if="isMock" class="version-hint">
|
||||
演示文库只保留当前版本，因此这里只有一条。真实模式下会列出该文书的全部历史版本。
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<p v-else class="version-state">该文书还没有版本记录。</p>
|
||||
</div>
|
||||
|
||||
<footer class="dialog-footer">
|
||||
<span>已签署的文书引用的是具体版本，历史版本不会被覆盖，可随时追溯。</span>
|
||||
<button type="button" class="action-button" @click="emit('close')">关闭</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
background: rgb(9 40 52 / 45%);
|
||||
}
|
||||
|
||||
.dialog-card {
|
||||
display: flex;
|
||||
width: 560px;
|
||||
max-width: 96vw;
|
||||
max-height: calc(100vh - 32px);
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--sh-modal);
|
||||
animation: dialog-pop 0.18s ease;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 12px 18px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.dialog-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.dialog-heading strong {
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.dialog-heading span {
|
||||
overflow: hidden;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
color: var(--mut);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dialog-close:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex: 1;
|
||||
padding: 14px 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.version-state {
|
||||
padding: 28px 0;
|
||||
margin: 0;
|
||||
color: var(--mut);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.version-state--error {
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
.version-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.version-item {
|
||||
padding: 12px 14px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
}
|
||||
|
||||
.version-item__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.version-item__head strong {
|
||||
color: var(--ink);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.version-status {
|
||||
padding: 2px 8px;
|
||||
color: var(--brand);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: var(--brand-l);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.version-current {
|
||||
padding: 2px 8px;
|
||||
color: var(--ok);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: var(--ok-l);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.version-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 18px;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.version-meta div {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.version-meta dt {
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.version-meta dd {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.version-comment {
|
||||
padding: 8px 10px;
|
||||
margin: 9px 0 0;
|
||||
color: #a15c19;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
background: var(--warn-l);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.version-hint {
|
||||
margin: 12px 0 0;
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 18px;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
background: #f8fbfc;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0 0 14px 14px;
|
||||
}
|
||||
|
||||
.dialog-footer span {
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 16px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: var(--brand);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: var(--brand-d);
|
||||
}
|
||||
|
||||
@keyframes dialog-pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.96) translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -244,6 +244,9 @@ onBeforeUnmount(() => {
|
||||
:default-config="toolbarConfig"
|
||||
:mode="editorMode"
|
||||
/>
|
||||
<!-- 工具栏的第二行（原型 mdDocEd 里「插入签署占位符」那一行）。
|
||||
放在工具栏与正文之间，让"插入什么"与"排版成什么样"在同一条视觉带里。 -->
|
||||
<slot name="toolbar-extra" />
|
||||
<Editor
|
||||
class="pane-content"
|
||||
:model-value="props.modelValue"
|
||||
@@ -316,8 +319,16 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
/* ---- 占位符 / 勾选框胶囊 ----
|
||||
现在有两种占位符胶囊，样式刻意保持一致（都代表"待签署内容"，不该靠外观区分重要性）：
|
||||
配色与形状照原型 V10.2 的 .docfld（见 styles/signing-document.css 里签署态的同一套色）：
|
||||
|
||||
- 文本 / 日期：蓝（--brand 系）
|
||||
- 签名：橙（#c07f00 系）——它决定签名落位，是文书里最不能漏的一项
|
||||
- 勾选 / 选择：绿（#0f9d6c 系），且前面带一个 ☑ 提示这是可勾的
|
||||
|
||||
原型不给胶囊加类型角标，靠颜色区分类型；这里也照做，
|
||||
完整信息（必填 / 选项 / 多选 / 高危值）留在 title 里。
|
||||
|
||||
两种载体共用同一套外观：
|
||||
① 结构化占位符（.ms-sign-node）：Slate 元素节点，正文里存成 <span data-field>。
|
||||
标签文字走下面的 ::before，DOM 里没有可落光标的文字，一次退格整块删除。
|
||||
② 旧式 ｛患者姓名｝（.ms-sign-brace + .ms-sign-chip）：decorate 出来的叶子，
|
||||
@@ -340,25 +351,49 @@ onBeforeUnmount(() => {
|
||||
margin-left: -0.18em;
|
||||
}
|
||||
|
||||
/* 占位符主体：带类型角标的胶囊 */
|
||||
/* 占位符主体：原型 .docfld 的编辑器版（虚线胶囊 + 品牌浅底 + 加粗） */
|
||||
.pane-content :deep(.ms-sign-chip) {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
padding: 1px 8px;
|
||||
margin: 0 2px;
|
||||
color: var(--brand-d);
|
||||
font-size: 0.92em;
|
||||
font-weight: 700;
|
||||
line-height: 1.65;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
line-height: 1.7;
|
||||
white-space: nowrap;
|
||||
background: var(--brand-l);
|
||||
border: 1px solid #bcd9e3;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed var(--brand);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 结构化占位符的标签文字：走 CSS 内容而不是 DOM 文本节点。
|
||||
元素是 void，DOM 里只有它自己与一个绝对定位的零宽占位叶子；
|
||||
若在这里放真实文字，浏览器原生光标会落进文字里，
|
||||
一次退格就只删掉一个字符 —— 正好破坏"一次退格整块删除"这个设计目标 */
|
||||
一次退格就只删掉一个字符 —— 正好破坏"一次退格整块删除"这个设计目标。
|
||||
|
||||
外层方括号与原型 fieldHtml 的 `【label】` 一致：正文里一眼能认出这是占位符而不是文书正文。 */
|
||||
.pane-content :deep(.ms-sign-node)::before {
|
||||
content: attr(data-sign-label);
|
||||
content: '【' attr(data-sign-label) '】';
|
||||
}
|
||||
|
||||
/* 签名位：橙（原型 .docfld.k-signature） */
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='signature']) {
|
||||
color: #9a5f00;
|
||||
background: #fff7e8;
|
||||
border-color: #c07f00;
|
||||
}
|
||||
|
||||
/* 勾选 / 选择：绿，并在标签前补一个 ☑（原型 .docfld.k-checkbox::before） */
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox']),
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='choice']) {
|
||||
color: #0b7a4b;
|
||||
background: #eafaf1;
|
||||
border-color: #0f9d6c;
|
||||
}
|
||||
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'])::before,
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='choice'])::before {
|
||||
content: '\2611 【' attr(data-sign-label) '】';
|
||||
}
|
||||
|
||||
/* 选中态：点一下即整块选中，给个明确的反色，让人知道接下来的退格会删掉整块 */
|
||||
@@ -368,21 +403,15 @@ onBeforeUnmount(() => {
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.pane-content :deep(.ms-sign-node.is-selected)::after {
|
||||
border-left-color: rgb(255 255 255 / 35%);
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='signature'].is-selected) {
|
||||
background: #c07f00;
|
||||
border-color: #c07f00;
|
||||
}
|
||||
|
||||
/* 类型角标：签名/日期/文本……让科室不点开也知道这一项要填什么。
|
||||
所有占位符共用一个样式，靠这个角标区分类型，不再按必填/签名位分色 */
|
||||
.pane-content :deep(.ms-sign-chip)::after {
|
||||
padding-left: 5px;
|
||||
margin-left: 5px;
|
||||
color: inherit;
|
||||
font-size: 0.8em;
|
||||
font-weight: 400;
|
||||
content: attr(data-sign-tag);
|
||||
border-left: 1px solid rgb(0 0 0 / 10%);
|
||||
opacity: 0.7;
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'].is-selected),
|
||||
.pane-content :deep(.ms-sign-node[data-sign-kind='choice'].is-selected) {
|
||||
background: #0f9d6c;
|
||||
border-color: #0f9d6c;
|
||||
}
|
||||
|
||||
/* 勾选框：签署时会转成可勾选控件，这里给它一个"框"的观感。
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 文档历史记录：后端版本 DTO → 原型「历史记录」表格的一行。
|
||||
*
|
||||
* 原型 openDocHistory 的表格是 版本 / 操作人 / 时间 / 操作 / 说明 / 操作，
|
||||
* 其中「操作」是「编辑正文并发布」这类人类可读短语。后端 TemplateVersionResponseDto
|
||||
* 没有「操作名」字段，只能由版本状态与各阶段时间戳归纳——归纳口径集中在这里，
|
||||
* 避免表格组件与（将来的）其它入口各写一份。
|
||||
*/
|
||||
import { formatTemplateDateTime } from '@/api/management/documents'
|
||||
import type { TemplateVersionResponseDto } from '@/api/management/types'
|
||||
|
||||
import type { DocumentHistoryRow } from './types'
|
||||
|
||||
/**
|
||||
* 由版本状态归纳「这一步做了什么」。
|
||||
*
|
||||
* 顺序有讲究：先判终态（归档 / 停用），再看发布与审核时间戳。
|
||||
* 只看 status 是不够的——一个已发布版本后来又被打回时，status 会回到 DRAFT/REJECTED，
|
||||
* 但它确实发布过，历史记录里应该留下痕迹。
|
||||
*/
|
||||
function describeVersionAction(version: TemplateVersionResponseDto): string {
|
||||
if (version.status === 'ARCHIVED') {
|
||||
return '归档'
|
||||
}
|
||||
|
||||
if (version.status === 'DISABLED') {
|
||||
return '停用'
|
||||
}
|
||||
|
||||
if (version.publishedAt) {
|
||||
return '发布生效'
|
||||
}
|
||||
|
||||
if (version.reviewedAt) {
|
||||
return version.status === 'REJECTED' ? '审核驳回' : '审核通过'
|
||||
}
|
||||
|
||||
if (version.reviewSubmittedAt) {
|
||||
return '提交审核'
|
||||
}
|
||||
|
||||
return '创建版本'
|
||||
}
|
||||
|
||||
/**
|
||||
* 版本列表 → 历史记录行。
|
||||
*
|
||||
* isCurrent 由调用方给出（当前版本 id），不在这里猜：当前版本是「文书正指向哪个版本」，
|
||||
* 属于文书对象的语义，版本列表本身不知道自己是不是当前版本。
|
||||
*/
|
||||
export function toHistoryRows(
|
||||
versions: TemplateVersionResponseDto[],
|
||||
currentVersionId: string | undefined,
|
||||
): DocumentHistoryRow[] {
|
||||
return versions.map((version) => ({
|
||||
id: version.id,
|
||||
version: version.versionNo || (version.versionNumber ? `v${version.versionNumber}` : '—'),
|
||||
operator: version.createdBy || '—',
|
||||
operatedAt: formatTemplateDateTime(version.createdAt),
|
||||
action: describeVersionAction(version),
|
||||
// 后端没有「说明」字段，审核意见是唯一可用的自由文本；没有就如实留空
|
||||
note: version.reviewComment?.trim() || '—',
|
||||
isCurrent: Boolean(currentVersionId) && version.id === currentVersionId,
|
||||
}))
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 文档库的展示口径：状态、归属、文档类型。
|
||||
*
|
||||
* 状态口径取自原型 V10.2 的 libStatuses（启用中 / 草稿 / 归档 / 需复审 / 停用），
|
||||
* **不是**后端模板状态枚举（DRAFT / PENDING_REVIEW / APPROVED / PUBLISHED /
|
||||
* DISABLED / ARCHIVED）。原型已经彻底抛弃「发布 → 审核」那条工作流，
|
||||
* 页签若继续按后端枚举铺开，界面上会多出一堆科室看不懂也点不动的状态。
|
||||
*
|
||||
* 因此这里只做一件事：把后端原始状态**折叠**成原型口径。
|
||||
* 反向映射（口径 → 后端）只保留「按状态过滤」这一处需要，见 toBackendStatusFilter。
|
||||
*/
|
||||
import type { DocumentRecord, DocumentStatus } from '@/api/management/types'
|
||||
|
||||
/** 文档库页签与卡片上的状态，取值即显示文案 */
|
||||
export type DocumentLibraryStatus = '启用中' | '草稿' | '归档' | '需复审' | '停用'
|
||||
|
||||
/** 页签固定顺序，与原型 libStatuses 一致：启用中排最前，停用排最后 */
|
||||
export const DOCUMENT_LIBRARY_STATUSES: DocumentLibraryStatus[] = [
|
||||
'启用中',
|
||||
'草稿',
|
||||
'归档',
|
||||
'需复审',
|
||||
'停用',
|
||||
]
|
||||
|
||||
/** 状态色调：决定徽标配色（与原型 stDot 的取色一致） */
|
||||
export type DocumentStatusTone = 'enabled' | 'draft' | 'archived' | 'review' | 'stopped'
|
||||
|
||||
const STATUS_TONES: Record<DocumentLibraryStatus, DocumentStatusTone> = {
|
||||
启用中: 'enabled',
|
||||
草稿: 'draft',
|
||||
归档: 'archived',
|
||||
需复审: 'review',
|
||||
停用: 'stopped',
|
||||
}
|
||||
|
||||
/** 原型 stDot：状态徽标前的圆点颜色 */
|
||||
export const DOCUMENT_STATUS_DOT: Record<DocumentStatusTone, string> = {
|
||||
enabled: '#0f9d6c',
|
||||
draft: '#8a9aa3',
|
||||
archived: '#8a9aa3',
|
||||
review: '#d9821f',
|
||||
stopped: '#c0c8cd',
|
||||
}
|
||||
|
||||
/**
|
||||
* 后端原始状态 → 原型口径。
|
||||
*
|
||||
* 折叠是有损的，且是刻意的：
|
||||
* - APPROVED 与 PUBLISHED 都算「启用中」——原型没有「审核通过但未发布」这一档；
|
||||
* - PENDING_REVIEW 与 REJECTED 都算「需复审」——原型只给一个「需复审」页签，
|
||||
* 至于「还等着审」还是「已被打回」，由卡片上的操作按钮与历史记录去区分；
|
||||
* - DISABLED 算「停用」而不是「归档」：停用是可逆的（还能启用），归档不是。
|
||||
*
|
||||
* 未知状态按「草稿」兜底而不是原样显示：口径是页签的键，多出一个键就多出一个
|
||||
* 原型上没有的页签；草稿是最安全的一档（既不显示为可发起，也不谎称已停用）。
|
||||
*/
|
||||
export function readLibraryStatus(record: {
|
||||
status: DocumentStatus
|
||||
backendStatus?: string
|
||||
}): DocumentLibraryStatus {
|
||||
switch (record.backendStatus) {
|
||||
case 'PUBLISHED':
|
||||
case 'APPROVED':
|
||||
return '启用中'
|
||||
case 'PENDING_REVIEW':
|
||||
case 'REJECTED':
|
||||
return '需复审'
|
||||
case 'ARCHIVED':
|
||||
return '归档'
|
||||
case 'DISABLED':
|
||||
return '停用'
|
||||
case 'DRAFT':
|
||||
return '草稿'
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
// 没有 backendStatus 的历史数据（演示文库、早期本地缓存）按归一后的状态反推
|
||||
switch (record.status) {
|
||||
case 'published':
|
||||
return '启用中'
|
||||
case 'review':
|
||||
return '需复审'
|
||||
case 'archived':
|
||||
return '归档'
|
||||
case 'draft':
|
||||
default:
|
||||
return '草稿'
|
||||
}
|
||||
}
|
||||
|
||||
export function readStatusTone(status: DocumentLibraryStatus): DocumentStatusTone {
|
||||
return STATUS_TONES[status]
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态页签 → 后端查询参数。
|
||||
*
|
||||
* 只用于「真实模式按状态向服务端过滤」；页面上默认仍是一次拉全量再本地过滤
|
||||
* （口径折叠后一个页签对应多个后端状态，服务端做不到一次查全）。
|
||||
* 映射不上的（需复审要同时含 PENDING_REVIEW 与 REJECTED）返回 undefined，
|
||||
* 调用方据此退回本地过滤，而不是拿一个错的状态去查。
|
||||
*/
|
||||
export function toBackendStatusFilter(status: DocumentLibraryStatus): string | undefined {
|
||||
switch (status) {
|
||||
case '启用中':
|
||||
return 'PUBLISHED'
|
||||
case '草稿':
|
||||
return 'DRAFT'
|
||||
case '归档':
|
||||
return 'ARCHIVED'
|
||||
case '停用':
|
||||
return 'DISABLED'
|
||||
case '需复审':
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
/** 只有「启用中」的文书能发起签署：草稿没定稿，停用/归档已下线 */
|
||||
export function canInitiateSigning(status: DocumentLibraryStatus): boolean {
|
||||
return status === '启用中'
|
||||
}
|
||||
|
||||
/** 停用 / 启用只在这两档之间来回（原型 setDocStatus 的取值口径） */
|
||||
export function canToggleStatus(status: DocumentLibraryStatus): boolean {
|
||||
return status === '启用中' || status === '停用'
|
||||
}
|
||||
|
||||
/**
|
||||
* 文档归属：原型把「通用（全院）」当作科室清单里的一个选项一起勾选，
|
||||
* 勾中它就等于全院通用，其余科室勾选一并作废（见 docDeptPicks / openDocProps）。
|
||||
*/
|
||||
export const GENERAL_OWNERSHIP = '通用（全院）'
|
||||
|
||||
/** 归属选项 → 后端可落库的科室 id（勾了通用（全院）就没有科室 id） */
|
||||
export function resolveOwnershipDepartmentId(
|
||||
ownership: string[],
|
||||
departments: Array<{ id: string; name: string }>,
|
||||
): string | null {
|
||||
if (ownership.includes(GENERAL_OWNERSHIP)) {
|
||||
return null
|
||||
}
|
||||
|
||||
const first = ownership.find((name) => name !== GENERAL_OWNERSHIP)
|
||||
|
||||
return first ? (departments.find((department) => department.name === first)?.id ?? null) : null
|
||||
}
|
||||
|
||||
/** 归属徽标文案：全院通用用 🌐，科室用 🏥（与原型 tpl-card 的标签一致） */
|
||||
export function readOwnershipLabel(record: DocumentRecord): string {
|
||||
if (!record.departmentId) {
|
||||
return '🌐 全院通用'
|
||||
}
|
||||
|
||||
const name = record.departmentName ?? '未知科室'
|
||||
|
||||
return `🏥 ${name}`
|
||||
}
|
||||
|
||||
/** 归属是否为全院通用：卡片标签配色与归属勾选回填都要用同一个判据 */
|
||||
export function isGeneralOwnership(record: DocumentRecord): boolean {
|
||||
return !record.departmentId
|
||||
}
|
||||
|
||||
/**
|
||||
* 文档类型。
|
||||
* 与原型 docTypes 同一份取值，属性弹窗用下拉而不是自由输入：
|
||||
* 类型是分组的键，自由输入会让「知情同意书 / 知情同意书 」这类写法分成两组。
|
||||
*/
|
||||
export const DOCUMENT_TYPES = [
|
||||
'知情同意书',
|
||||
'风险告知书',
|
||||
'入院告知',
|
||||
'检查预约单',
|
||||
'授权委托',
|
||||
]
|
||||
|
||||
export const DEFAULT_DOCUMENT_TYPE = '知情同意书'
|
||||
@@ -1,22 +1,9 @@
|
||||
/**
|
||||
* 文档库的演示数据与展示文案。
|
||||
*
|
||||
* 状态标签放在这里而不是随演示数据一起删掉：标签是纯展示映射，
|
||||
* 接真实接口后照样要用，不能和"演示数据"捆在一起。
|
||||
*
|
||||
* 演示文书库的种子与读写逻辑在 utils/mock-document-library：
|
||||
* 文档库页面和签署工作台必须读同一份数据，否则会出现「文档库里维护的模板，签署端选不到」，
|
||||
* 或者签署端混着一批文档库里看不到、也无法维护的模板。
|
||||
*/
|
||||
import type { DocumentRecord } from '@/api/management/types'
|
||||
import type { LocalDocument, LocalDepartment } from '@/utils/mock-document-library'
|
||||
import { readDocumentLibrary, writeDocumentLibrary } from '@/utils/mock-document-library'
|
||||
|
||||
import type { DocumentDepartment, DocumentBackendStatus, DocumentStatus } from './types'
|
||||
|
||||
/**
|
||||
* 演示文库与页面模型之间的归一。
|
||||
*
|
||||
* 状态口径与标签见 ./library，这里只管「演示文库（utils/mock-document-library）
|
||||
* ↔ 页面模型（DocumentDepartment）」的字段补齐，不掺展示映射。
|
||||
*
|
||||
* utils/mock-document-library 刻意只声明自己用到的字段（不反向依赖 views 的类型），
|
||||
* 它返回的文书缺了页面模型要求的 category / updatedBy / updatedAt，code 也可能为空。
|
||||
* 两种口径不一致会在 loadLibrary / saveDocumentLibrary 处直接报类型错误，
|
||||
@@ -26,6 +13,12 @@ import type { DocumentDepartment, DocumentBackendStatus, DocumentStatus } from '
|
||||
* 补齐用的值都标注了是演示数据的缺省值，不冒充真实字段：
|
||||
* updatedAt 留空串，页面会显示成"—"，不会假装有一份真实的更新时间。
|
||||
*/
|
||||
import type { DocumentRecord } from '@/api/management/types'
|
||||
import type { LocalDocument, LocalDepartment } from '@/utils/mock-document-library'
|
||||
import { readDocumentLibrary, writeDocumentLibrary } from '@/utils/mock-document-library'
|
||||
|
||||
import type { DocumentDepartment } from './types'
|
||||
|
||||
function toDocumentRecord(document: LocalDocument, categoryName: string): DocumentRecord {
|
||||
return {
|
||||
...document,
|
||||
@@ -88,6 +81,7 @@ function toLocalDocument(document: DocumentRecord): LocalDocument {
|
||||
versionId: document.versionId,
|
||||
departmentId: document.departmentId,
|
||||
departmentName: document.departmentName,
|
||||
sharedDepartments: document.sharedDepartments,
|
||||
campusId: document.campusId,
|
||||
campusName: document.campusName,
|
||||
updatedAt: document.updatedAt,
|
||||
@@ -95,132 +89,3 @@ function toLocalDocument(document: DocumentRecord): LocalDocument {
|
||||
contentSha256: document.contentSha256,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态标签。键集合与后端模板状态枚举一一对应
|
||||
* （见 api/management/types.ts 的 BackendTemplateStatus 与 documents.ts 的 normalizeDocumentStatus），
|
||||
* 不再有后端枚举里不存在的 enabled。
|
||||
*/
|
||||
export const documentStatusLabels: Record<DocumentStatus, string> = {
|
||||
draft: '草稿',
|
||||
review: '需复审',
|
||||
published: '已发布',
|
||||
archived: '已归档',
|
||||
}
|
||||
|
||||
/**
|
||||
* 后端原始状态 → 中文标签。
|
||||
*
|
||||
* 卡片与预览弹窗用它，而不是归一后的 documentStatusLabels：归一过程把
|
||||
* PENDING_REVIEW（待审核）和 REJECTED（已驳回）都并成了 review，
|
||||
* 只看「需复审」分不清是「还等着审」还是「已经被打回」。
|
||||
*/
|
||||
export const backendStatusLabels: Record<DocumentBackendStatus, string> = {
|
||||
DRAFT: '草稿',
|
||||
PENDING_REVIEW: '待审核',
|
||||
REJECTED: '已驳回',
|
||||
APPROVED: '审核通过',
|
||||
PUBLISHED: '已发布',
|
||||
DISABLED: '已停用',
|
||||
ARCHIVED: '已归档',
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态页签的固定展示顺序：按文书生命周期排列（草稿 → 送审 → 驳回/通过 → 发布 → 停用 → 归档）。
|
||||
* 固定顺序而不是按接口返回顺序，否则同一个库里状态一多，页签会来回跳。
|
||||
*/
|
||||
export const backendStatusOrder: DocumentBackendStatus[] = [
|
||||
'DRAFT',
|
||||
'PENDING_REVIEW',
|
||||
'REJECTED',
|
||||
'APPROVED',
|
||||
'PUBLISHED',
|
||||
'DISABLED',
|
||||
'ARCHIVED',
|
||||
]
|
||||
|
||||
/** 取状态标签：优先用后端原始状态（更精确），拿不到再退回归一后的状态 */
|
||||
export function readStatusLabel(template: {
|
||||
status: DocumentStatus
|
||||
backendStatus?: string
|
||||
}): string {
|
||||
const backendLabel = template.backendStatus
|
||||
? backendStatusLabels[template.backendStatus as DocumentBackendStatus]
|
||||
: undefined
|
||||
|
||||
return backendLabel ?? documentStatusLabels[template.status]
|
||||
}
|
||||
|
||||
/**
|
||||
* 按后端状态取标签。
|
||||
* 版本历史只有后端状态，没有归一后的 status，因此单独开一个入口。
|
||||
* 遇到未知状态原样显示，不显示成空白——后端新增状态时至少能看见它是什么。
|
||||
*/
|
||||
export function readBackendStatusLabel(status: string | null | undefined): string {
|
||||
if (!status) {
|
||||
return '—'
|
||||
}
|
||||
|
||||
return backendStatusLabels[status as DocumentBackendStatus] ?? status
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态色调：决定状态徽标用哪一套配色。
|
||||
*
|
||||
* 不能直接用归一后的 DocumentStatus 当配色键——PENDING_REVIEW 与 REJECTED
|
||||
* 归一后都是 review，两者会共用同一个颜色，页签与文字已经区分开了、颜色却还糊在一起。
|
||||
*/
|
||||
export type DocumentStatusTone = 'draft' | 'review' | 'rejected' | 'published' | 'archived'
|
||||
|
||||
export function readStatusTone(template: {
|
||||
status: DocumentStatus
|
||||
backendStatus?: string
|
||||
}): DocumentStatusTone {
|
||||
switch (readBackendStatus(template)) {
|
||||
case 'PENDING_REVIEW':
|
||||
return 'review'
|
||||
case 'REJECTED':
|
||||
return 'rejected'
|
||||
case 'APPROVED':
|
||||
case 'PUBLISHED':
|
||||
return 'published'
|
||||
case 'DISABLED':
|
||||
case 'ARCHIVED':
|
||||
return 'archived'
|
||||
case 'DRAFT':
|
||||
default:
|
||||
return 'draft'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取文书的后端原始状态，供状态页签归类。
|
||||
*
|
||||
* 真实模式的列表接口会给 backendStatus；演示库与部分历史数据可能没有，
|
||||
* 这时按归一后的 status 反推一个等价状态，避免这类文书在页签里被漏掉。
|
||||
*
|
||||
* 反推对 'review' 是有损的：归一过程把 PENDING_REVIEW 与 REJECTED 合并了，
|
||||
* 只能归到 PENDING_REVIEW。这只是缺字段时的兜底，不改变页签按真实状态过滤的口径。
|
||||
*/
|
||||
export function readBackendStatus(template: {
|
||||
status: DocumentStatus
|
||||
backendStatus?: string
|
||||
}): DocumentBackendStatus {
|
||||
const known = backendStatusOrder.find((status) => status === template.backendStatus)
|
||||
|
||||
if (known) {
|
||||
return known
|
||||
}
|
||||
|
||||
switch (template.status) {
|
||||
case 'published':
|
||||
return 'PUBLISHED'
|
||||
case 'review':
|
||||
return 'PENDING_REVIEW'
|
||||
case 'archived':
|
||||
return 'ARCHIVED'
|
||||
case 'draft':
|
||||
default:
|
||||
return 'DRAFT'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,13 @@ import type { TemplateVersionAction } from '@/api/management/documents'
|
||||
*
|
||||
* 必须与后端菜单资源树里 BUTTON 节点的 code 完全一致（当前为 doc:template:* 这一套）。
|
||||
* 前端不再维护别名映射：码对不上就等于没有权限，不做兜底。
|
||||
*
|
||||
* 已按 `GET /v1/menu-resources` 实测核对（2026-09-24，共 70 个节点）：
|
||||
* 浏览文档模板 / 新增文档模板 / 编辑文档正文 / 编辑文档属性 /
|
||||
* 发布·提交审核 / 停用·启用模板 / 查看文档历史记录 / 导出模板包
|
||||
* 后端的「新增文档模板」是 **doc:template:create**，
|
||||
* 原型 V10.2 里写的是 doc:template:new —— 那是原型内部的命名，不是后端口径，
|
||||
* 不要照抄原型去改这里的码，否则真实模式下「新增文档」按钮会因权限判定不通过而消失。
|
||||
*/
|
||||
export const DOC_TEMPLATE_PERMISSIONS = {
|
||||
view: 'doc:template:view',
|
||||
@@ -21,11 +28,16 @@ export const DOC_TEMPLATE_PERMISSIONS = {
|
||||
} as const
|
||||
|
||||
/**
|
||||
* 版本工作流的权限码映射。
|
||||
* 版本工作流动作的权限码映射。
|
||||
*
|
||||
* 原型 V10.2 已经抛弃「发布 → 审核」那条工作流，页面上只剩三类动作：
|
||||
* - 停用 / 启用（停用 → disable，启用 → publish）；
|
||||
* - 草稿提交审核（仅在演示模式露出，真实模式不给这个入口）；
|
||||
* - 归档（后端没有 DELETE，删除语义靠它承担，页面暂不暴露）。
|
||||
*
|
||||
* 后端当前没有独立的「提交审核 / 审核通过 / 驳回」按钮码，因此按职责归并：
|
||||
* - 提交审核 / 重新提交归入编辑权限：改稿并送审是编辑流程的一步；
|
||||
* - 审核通过 / 驳回 / 发布 / 重新启用归入发布权限：决定文书能否上线；
|
||||
* - 发布 / 重新启用归入发布权限：决定文书能否上线；
|
||||
* - 停用 / 归档归入停用权限。
|
||||
* 后端补齐独立按钮码后只需改这张表，页面不需要调整。
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 签署预览用的示例患者快照（脱敏演示数据）。
|
||||
*
|
||||
* 创建 / 编辑文书时还没有真实签署任务，用固定示例值让科室看到占位符被填充后的版式；
|
||||
* 真实签署仍以任务创建时的患者 / 就诊快照为准。
|
||||
*
|
||||
* 单独成文件是因为它现在有两个使用者——文书库的「签署预览」页签与编辑器弹窗里的
|
||||
* 「签署预览」——两处各写一份，预览效果会随口径漂移而悄悄不一致。
|
||||
*/
|
||||
import type { SigningDocumentData } from '@/utils/signing-document'
|
||||
|
||||
export const PREVIEW_PATIENT: SigningDocumentData = {
|
||||
patientName: '李某某',
|
||||
sex: '男',
|
||||
age: 46,
|
||||
visitNo: 'V20260914001',
|
||||
visitDate: '2026-09-14',
|
||||
phone: '138****5678',
|
||||
signedAt: '',
|
||||
}
|
||||
@@ -1,15 +1,18 @@
|
||||
/**
|
||||
* 文档库页面模型。
|
||||
*
|
||||
* 状态枚举直接复用 api/management/types.ts 的 DocumentStatus，不再另立一套：
|
||||
* 之前页面自己定义了 'enabled' | 'draft' | 'archived' | 'review'，
|
||||
* 其中 enabled 在后端模板状态枚举里没有对应值（后端只有 DRAFT / PENDING_REVIEW /
|
||||
* APPROVED / PUBLISHED / DISABLED / ARCHIVED），一旦接入真实接口就没法双向映射。
|
||||
* 现在两侧共用同一份，API 边界的 normalizeDocumentStatus 就是唯一的转换口径。
|
||||
* 状态口径见 ./library：页面用原型 V10.2 的「启用中 / 草稿 / 归档 / 需复审 / 停用」，
|
||||
* 后端模板状态枚举只在 API 边界出现一次（readLibraryStatus 折叠）。
|
||||
*
|
||||
* 「属性」与「正文」是两份表单、两个弹窗：原型 V10.2 刻意把「修改文档」拆成
|
||||
* 「编辑属性」与「编辑正文」，属性弹窗不碰正文、正文弹窗不碰属性。
|
||||
* 因此这里也不合成一个大表单——合成之后总会有人顺手在一个弹窗里改另一个弹窗的字段。
|
||||
*/
|
||||
import type { DocumentRecord, DocumentStatus } from '@/api/management/types'
|
||||
import type { DocumentRecord } from '@/api/management/types'
|
||||
|
||||
export type { DocumentStatus }
|
||||
import type { DocumentLibraryStatus } from './library'
|
||||
|
||||
export type { DocumentLibraryStatus }
|
||||
|
||||
/** 院区分组键：与模板接口的 campusId 对应，'all' 表示全院通用 */
|
||||
export type DocumentCampus = string
|
||||
@@ -35,43 +38,38 @@ export interface DocumentTemplate extends LibraryDocument {
|
||||
category: string
|
||||
}
|
||||
|
||||
export interface TemplateEditorForm {
|
||||
/**
|
||||
* 编辑属性弹窗的表单（原型 openDocProps / openDocCreate）。
|
||||
* 只有属性，没有正文——正文走 WordEditorDialog。
|
||||
*/
|
||||
export interface DocumentPropsForm {
|
||||
/** 有值表示编辑已有文书，无值表示新增 */
|
||||
id?: string
|
||||
templateCode: string
|
||||
name: string
|
||||
description: string
|
||||
campusId: string
|
||||
departmentId: string
|
||||
/** 文档类型，取自 library.DOCUMENT_TYPES */
|
||||
category: string
|
||||
versionNo: string
|
||||
/** 文档归属：科室名数组，可能含 GENERAL_OWNERSHIP（通用（全院）） */
|
||||
ownership: string[]
|
||||
description: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑正文弹窗的表单。
|
||||
* 只带正文与定位信息：名称 / 类型 / 版本 / 归属都在属性弹窗里维护。
|
||||
*/
|
||||
export interface DocumentContentForm {
|
||||
id: string
|
||||
/** 正文 HTML（含结构化占位符 <span data-field>） */
|
||||
contentHtml: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板版本的后端原始状态。
|
||||
*
|
||||
* 逐字列出而不是直接复用 api/management/types.ts 的 BackendTemplateStatus：
|
||||
* 后者带 `| string` 兜底（后端将来新增状态时前端不至于编译不过），
|
||||
* 直接拿来当过滤键会把类型收窄成 string，页签取值就失去约束了。
|
||||
* 这里列的是已知枚举，未知状态由 readBackendStatus 兜底归类。
|
||||
* 状态筛选的取值：按原型口径，不再按后端原始状态。
|
||||
* 折叠后「需复审」同时含 PENDING_REVIEW 与 REJECTED，按后端枚举做页签会把
|
||||
* 「还等着审」和「已被打回」拆成两个页签，而原型只有一个。
|
||||
*/
|
||||
export type DocumentBackendStatus =
|
||||
| 'DRAFT'
|
||||
| 'PENDING_REVIEW'
|
||||
| 'REJECTED'
|
||||
| 'APPROVED'
|
||||
| 'PUBLISHED'
|
||||
| 'DISABLED'
|
||||
| 'ARCHIVED'
|
||||
|
||||
/**
|
||||
* 状态筛选的取值：按后端原始状态过滤，而不是按归一后的 DocumentStatus。
|
||||
*
|
||||
* 归一过程把 PENDING_REVIEW（待审核）和 REJECTED（已驳回）都并成 review，
|
||||
* 用归一键做页签会把两种完全不同的处境混在一个「需复审」里：
|
||||
* 一个是还等着审，一个是已经被打回，科室要做的下一步完全不同。
|
||||
*/
|
||||
export type DocumentFilterStatus = 'all' | DocumentBackendStatus
|
||||
export type DocumentFilterStatus = 'all' | DocumentLibraryStatus
|
||||
|
||||
export interface StatusTab {
|
||||
key: DocumentFilterStatus
|
||||
@@ -90,3 +88,19 @@ export interface DepartmentTab {
|
||||
label: string
|
||||
count: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 历史记录的一行（原型 openDocHistory 的表格：版本 / 操作人 / 时间 / 操作 / 说明）。
|
||||
*
|
||||
* 原型的「操作」是「编辑正文并发布」这类人类可读短语；这里由后端状态与时间字段
|
||||
* 归纳出来（见 history.ts 的 describeHistoryAction），后端没有专门的「操作名」字段。
|
||||
*/
|
||||
export interface DocumentHistoryRow {
|
||||
id: string
|
||||
version: string
|
||||
operator: string
|
||||
operatedAt: string
|
||||
action: string
|
||||
note: string
|
||||
isCurrent: boolean
|
||||
}
|
||||
|
||||
+32
-199
@@ -4,11 +4,15 @@ import { computed, onMounted, ref, watch } from 'vue'
|
||||
import type { SigningAnswers, SigningTaskRecord } from '@/api/workbench/types'
|
||||
import {
|
||||
applyAnswerToFieldHost,
|
||||
applySelectedItemsToRoot,
|
||||
applySignatureToRoot,
|
||||
buildSigningDocumentHtml,
|
||||
collectSelectedItemsFromRoot,
|
||||
describeFieldProgress,
|
||||
OPTION_TICK_SELECTOR,
|
||||
readAnswersFromRoot,
|
||||
SIGNATURE_ACTION_SELECTOR,
|
||||
toggleOptionAt,
|
||||
type SigningDocumentData,
|
||||
type SigningFieldProgress,
|
||||
type SigningSignatureRequest,
|
||||
@@ -92,8 +96,8 @@ const signatureStateLabel = computed(() => {
|
||||
})
|
||||
|
||||
/**
|
||||
* 从渲染后的 DOM 读回填写项取值。
|
||||
* 生成 HTML 时已把取值写成 attribute，这里再按取值同步一次 DOM 状态，
|
||||
* 从渲染后的 DOM 读回填写项取值与勾选清单。
|
||||
* 生成 HTML 时已把取值写成属性/文本，这里再按取值同步一次 DOM 状态，
|
||||
* 保证「签完再打开时填写项/勾选还在」这件事不依赖序列化细节。
|
||||
*/
|
||||
function syncFromDom() {
|
||||
@@ -106,17 +110,13 @@ function syncFromDom() {
|
||||
const answers = readAnswersFromRoot(container)
|
||||
fieldAnswers.value = answers
|
||||
progress.value = describeFieldProgress(container, answers)
|
||||
|
||||
const checked = Array.from(
|
||||
container.querySelectorAll<HTMLInputElement>('input.sign-doc-checkbox:checked'),
|
||||
)
|
||||
selectedItems.value = checked.map((item) => item.getAttribute('data-sign-item') ?? '')
|
||||
selectedItems.value = collectSelectedItemsFromRoot(container)
|
||||
|
||||
emit('field-change', { ...answers }, { ...progress.value })
|
||||
emit('selection-change', [...selectedItems.value])
|
||||
}
|
||||
|
||||
/** 按已固化的取值还原 DOM 控件状态（存量勾选表 + 新填写项都覆盖） */
|
||||
/** 按已固化的取值还原 DOM 状态（存量勾选表 + 新填写项都覆盖） */
|
||||
function applyStoredValues() {
|
||||
const container = containerRef.value
|
||||
|
||||
@@ -124,11 +124,7 @@ function applyStoredValues() {
|
||||
return
|
||||
}
|
||||
|
||||
const selected = new Set(props.task.selectedItems ?? [])
|
||||
|
||||
container.querySelectorAll<HTMLInputElement>('input.sign-doc-checkbox').forEach((input) => {
|
||||
input.checked = selected.has(input.getAttribute('data-sign-item') ?? '')
|
||||
})
|
||||
applySelectedItemsToRoot(container, props.task.selectedItems ?? [])
|
||||
|
||||
const answers: SigningAnswers = { ...(props.task.fieldAnswers ?? {}) }
|
||||
|
||||
@@ -145,7 +141,7 @@ function applyStoredValues() {
|
||||
}
|
||||
|
||||
// 读写的判据都在 signing-document 里（readAnswersFromRoot 的镜像），
|
||||
// 这里不自己写 data-sign-* 选择器，否则多选组这类"同 DOM 不同语义"的控件会两处漂移
|
||||
// 这里不自己写 data-sign-* 选择器，否则选项组这类"同 DOM 不同语义"的控件会两处漂移
|
||||
applyAnswerToFieldHost(host, value)
|
||||
})
|
||||
}
|
||||
@@ -189,11 +185,30 @@ function requestSignature(host: HTMLElement) {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击文书里的 ☑ / ☐ 选项。
|
||||
*
|
||||
* 与签名位分开处理：签名位是"请求采集"（要弹签字板），选项是就地切换。
|
||||
* 切换逻辑本身在 utils/signing-document 的 toggleOptionAt 里，
|
||||
* 组件只负责把点击翻译成一次调用 —— 单选互斥的判据不该在组件里再推一遍。
|
||||
*/
|
||||
function handleDocumentClick(event: MouseEvent) {
|
||||
if (!props.interactive) {
|
||||
return
|
||||
}
|
||||
|
||||
const target = event.target
|
||||
|
||||
if (target instanceof Element) {
|
||||
const option = target.closest<HTMLElement>(OPTION_TICK_SELECTOR)
|
||||
const container = containerRef.value
|
||||
|
||||
if (option && container && toggleOptionAt(container, option)) {
|
||||
syncFromDom()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const host = resolveSignatureHost(event.target)
|
||||
|
||||
if (host) {
|
||||
@@ -439,189 +454,7 @@ defineExpose({ getDocumentElement })
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔。
|
||||
四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width），样式里不再写死 */
|
||||
.sign-doc-body :deep(.sign-doc-header) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 18px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1.5px solid #52646e;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-doc-header__item) {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-doc-header__label) {
|
||||
flex-shrink: 0;
|
||||
color: #52646e;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-doc-header__value) {
|
||||
padding: 0 5px 1px;
|
||||
color: #1c2b33;
|
||||
font-size: 12.5px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #52646e;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-doc-checkbox) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
accent-color: var(--brand);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-doc-checkbox:disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */
|
||||
.sign-doc-body :deep(.sign-doc-option) {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-doc-signature) {
|
||||
max-width: 150px;
|
||||
max-height: 52px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ===== 填写项 ===== */
|
||||
.sign-doc-body :deep(.sign-field) {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 2px 7px;
|
||||
margin: 0 2px;
|
||||
vertical-align: middle;
|
||||
background: #f7fbfd;
|
||||
border: 1px solid #d4e3e8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__label) {
|
||||
flex-shrink: 0;
|
||||
color: #587786;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__required) {
|
||||
margin-left: 2px;
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__control) {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__input) {
|
||||
width: 9em;
|
||||
min-width: 0;
|
||||
padding: 1px 5px;
|
||||
color: #1c2b33;
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
background: #fff;
|
||||
border: 1px solid #cfe0e6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__input:focus) {
|
||||
border-color: var(--brand);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__input:disabled) {
|
||||
color: #1c2b33;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: #1c2b33;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__choices) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__radio),
|
||||
.sign-doc-body :deep(.sign-field__checkbox) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
accent-color: var(--brand);
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__signature-empty) {
|
||||
padding: 12px 18px;
|
||||
color: #a96900;
|
||||
font-size: 11px;
|
||||
background: #fff9ec;
|
||||
border: 1px dashed #f0a21a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 可点击采集的签名位：整块胶囊都是点击热区（子节点会冒泡到宿主），
|
||||
hover / 聚焦给出明确反馈，否则操作人员不知道这里能点 */
|
||||
.sign-doc-body :deep(.sign-field--actionable) {
|
||||
cursor: pointer;
|
||||
background: #fffaf0;
|
||||
border-color: #f0a21a;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field--actionable:hover) {
|
||||
background: #fff3d8;
|
||||
border-color: #d98c05;
|
||||
box-shadow: 0 0 0 2px rgb(240 162 26 / 20%);
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field--actionable:focus-visible) {
|
||||
outline: 2px solid var(--brand);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field--actionable .sign-field__signature-empty) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 签名位比其他填写项更宽，避免签名图被压扁 */
|
||||
.sign-doc-body :deep(.sign-field--signature) {
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field--signature .sign-field__control) {
|
||||
min-width: 150px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field--abnormal) {
|
||||
background: #fdf0f0;
|
||||
border-color: #efb9bb;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field--abnormal .sign-field__label) {
|
||||
color: #a42e34;
|
||||
}
|
||||
|
||||
.sign-doc-body :deep(.sign-field__badge) {
|
||||
padding: 1px 6px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
background: var(--err);
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* 填写项胶囊、选项 ☑ / ☐、系统页眉的样式在 styles/signing-document.css（全局）：
|
||||
它们同时出现在文书库预览、签署工作台与编辑器里，各写一份必然漂移。
|
||||
这里只保留"这份文书外壳"自己的版式（正文字号、表格边框等）。 */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user