wang
1 month ago
13 changed files with 2841 additions and 572 deletions
@ -0,0 +1,27 @@ |
|||
package net.lab1024.sa.admin.module.business.jwpy.domain.form; |
|||
|
|||
import io.swagger.v3.oas.annotations.media.Schema; |
|||
import jakarta.validation.constraints.NotBlank; |
|||
import jakarta.validation.constraints.NotNull; |
|||
import lombok.Data; |
|||
|
|||
/** |
|||
* 警务评议工单流程动作表单 |
|||
* |
|||
* @Author Antigravity |
|||
* @Date 2026-06-12 |
|||
*/ |
|||
@Data |
|||
public class WtczWorkflowActionForm { |
|||
|
|||
@Schema(description = "工单ID", requiredMode = Schema.RequiredMode.REQUIRED) |
|||
@NotNull(message = "工单ID不能为空") |
|||
private Long id; |
|||
|
|||
@Schema(description = "流程动作编码", requiredMode = Schema.RequiredMode.REQUIRED) |
|||
@NotBlank(message = "流程动作编码不能为空") |
|||
private String actionKey; |
|||
|
|||
@Schema(description = "办理意见") |
|||
private String remark; |
|||
} |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<div class="form-module-wrapper"> |
|||
<div class="module-header"> |
|||
<span class="module-title"> |
|||
<span class="title-bar"></span> 诉求内容与定性分类 |
|||
</span> |
|||
</div> |
|||
<div class="module-content"> |
|||
<a-descriptions |
|||
bordered |
|||
size="small" |
|||
:column="3" |
|||
> |
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>诉求业务分类 |
|||
</template> |
|||
<a-form-item name="sqfl"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.CZZX_SQFL" placeholder="请选择诉求分类" v-model:value="formData.sqfl" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>涉及警务业务 |
|||
</template> |
|||
<a-form-item name="sjlyNo"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.BUSINESS_CLASSIFICATION" placeholder="请选择业务分类" v-model:value="formData.sjlyNo" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="诉求等级"> |
|||
<a-form-item name="sqdj"> |
|||
<a-select v-model:value="formData.sqdj" placeholder="选择等级" style="width: 100%"> |
|||
<a-select-option value="1">一般</a-select-option> |
|||
<a-select-option value="2">紧急</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="工单四级标签"> |
|||
<a-form-item name="gdbq"> |
|||
<div style="display: flex; gap: 8px;"> |
|||
<a-button type="dashed" size="middle">选择标签</a-button> |
|||
<a-input v-model:value="formData.gdbq" placeholder="例如: 业务-交管-违法" style="flex: 1;" /> |
|||
</div> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="是否涉企"> |
|||
<a-form-item name="sfsq"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.IS_ENTERPRISE_RELATED" placeholder="选择是否涉企" v-model:value="formData.sfsq" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<template v-if="formData.sfsq == 1 || formData.sfsq === '1'"> |
|||
<a-descriptions-item label="企业名称"> |
|||
<a-form-item name="qymc"> |
|||
<a-input v-model:value="formData.qymc" placeholder="输入企业名称" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
</template> |
|||
<template v-else> |
|||
<a-descriptions-item label="是否已延期"> |
|||
<a-form-item name="sfyyq"> |
|||
<a-select v-model:value="formData.sfyyq" style="width: 100%"> |
|||
<a-select-option value="0">否</a-select-option> |
|||
<a-select-option value="1">是</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
</template> |
|||
|
|||
<a-descriptions-item :span="3"> |
|||
<template #label> |
|||
<div style="display: flex; flex-direction: column; gap: 6px;"> |
|||
<span><span class="required-star">*</span>详细内容描述</span> |
|||
<a-button type="link" size="small" style="padding: 0; text-align: left; width: fit-content;">附件上传</a-button> |
|||
</div> |
|||
</template> |
|||
<a-form-item name="wtms"> |
|||
<a-textarea v-model:value="formData.wtms" :rows="4" maxlength="2000" showCount placeholder="详细录入报案人的诉求原话..." /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { defineProps } from 'vue'; |
|||
import DictSelect from '/@/components/support/dict-select/index.vue'; |
|||
import { DICT_CODE_ENUM } from '/@/constants/support/dict-const.js'; |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 模块分区：融入整体页面，用细线分隔 */ |
|||
.form-module-wrapper { |
|||
padding: 0 32px; |
|||
} |
|||
.module-header { |
|||
padding: 16px 0 10px; |
|||
border-bottom: 1px solid #e2e8f0; |
|||
} |
|||
.module-title { |
|||
font-weight: 700; |
|||
color: #1e293b; |
|||
font-size: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
.title-bar { |
|||
width: 4px; |
|||
height: 16px; |
|||
background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%); |
|||
border-radius: 2px; |
|||
} |
|||
.module-content { |
|||
padding: 16px 0; |
|||
} |
|||
.required-star { |
|||
color: #ef4444; |
|||
margin-right: 4px; |
|||
font-family: SimSun, sans-serif; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 统一重写 Ant Design Vue 的 descriptions 样式 */ |
|||
:deep(.ant-descriptions-bordered .ant-descriptions-view) { |
|||
border: 1px solid #e2e8f0 !important; |
|||
border-radius: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-row) { |
|||
border-bottom: 1px solid #f1f5f9 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-label) { |
|||
width: 130px !important; |
|||
min-width: 130px !important; |
|||
max-width: 130px !important; |
|||
background-color: #f8fafc !important; |
|||
color: #475569 !important; |
|||
font-weight: 600 !important; |
|||
font-size: 13px !important; |
|||
padding: 10px 16px !important; |
|||
border-right: 1px solid #e2e8f0 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-content) { |
|||
background-color: #ffffff !important; |
|||
padding: 6px 12px !important; |
|||
border-right: 1px solid #f1f5f9 !important; |
|||
} |
|||
|
|||
/* 最后一行的 textarea 排除在 46px 限制之外 */ |
|||
:deep(.ant-descriptions-row:last-child .ant-descriptions-item-label), |
|||
:deep(.ant-descriptions-row:last-child .ant-descriptions-item-content) { |
|||
height: auto !important; |
|||
border-right: 1px solid #e2e8f0 !important; |
|||
} |
|||
|
|||
/* 彻底扁平化输入框 */ |
|||
:deep(.ant-form-item) { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-input), |
|||
:deep(.ant-select-selector), |
|||
:deep(.ant-cascader-picker) { |
|||
border-radius: 2px !important; |
|||
border: 1px solid #cbd5e1 !important; |
|||
box-shadow: none !important; |
|||
height: 32px !important; |
|||
line-height: 30px !important; |
|||
padding: 0 8px !important; |
|||
} |
|||
|
|||
:deep(.ant-select-selector .ant-select-selection-item) { |
|||
line-height: 30px !important; |
|||
} |
|||
|
|||
:deep(.ant-input:hover), |
|||
:deep(.ant-select-selector:hover) { |
|||
border-color: #94a3b8 !important; |
|||
} |
|||
|
|||
:deep(.ant-input:focus), |
|||
:deep(.ant-select-focused .ant-select-selector) { |
|||
border-color: #2563eb !important; |
|||
box-shadow: 0 0 0 1px #2563eb !important; |
|||
} |
|||
|
|||
:deep(.ant-textarea) { |
|||
border-radius: 2px !important; |
|||
border: 1px solid #cbd5e1 !important; |
|||
box-shadow: none !important; |
|||
padding: 8px !important; |
|||
} |
|||
|
|||
:deep(.ant-textarea:hover) { |
|||
border-color: #94a3b8 !important; |
|||
} |
|||
|
|||
:deep(.ant-textarea:focus) { |
|||
border-color: #2563eb !important; |
|||
box-shadow: 0 0 0 1px #2563eb !important; |
|||
} |
|||
|
|||
:deep(.ant-input[disabled]) { |
|||
background-color: #f1f5f9 !important; |
|||
color: #94a3b8 !important; |
|||
border-color: #cbd5e1 !important; |
|||
} |
|||
|
|||
/* 错误红字绝对定位浮动，防止撑开网格高度 */ |
|||
:deep(.ant-form-item-control) { |
|||
position: relative !important; |
|||
} |
|||
:deep(.ant-form-item-explain) { |
|||
position: absolute !important; |
|||
bottom: -4px !important; |
|||
left: 10px !important; |
|||
z-index: 10 !important; |
|||
font-size: 11px !important; |
|||
color: #ef4444 !important; |
|||
line-height: 1 !important; |
|||
background: #ffffff !important; |
|||
padding: 0 4px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div class="form-module-wrapper"> |
|||
<div class="module-header"> |
|||
<span class="module-title"> |
|||
<span class="title-bar"></span> 诉求人与联络档案登记 |
|||
</span> |
|||
</div> |
|||
<div class="module-content"> |
|||
<a-descriptions |
|||
bordered |
|||
size="small" |
|||
:column="3" |
|||
> |
|||
<a-descriptions-item label="是否匿名"> |
|||
<a-form-item name="sfnm"> |
|||
<a-select v-model:value="formData.sfnm" style="width: 100%"> |
|||
<a-select-option value="0">否</a-select-option> |
|||
<a-select-option value="1">是</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>诉求人姓名 |
|||
</template> |
|||
<a-form-item name="sqrXm"> |
|||
<a-input v-model:value="formData.sqrXm" placeholder="真实姓名或匿名标识" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="诉求人性别"> |
|||
<a-form-item name="sqrXb"> |
|||
<a-select v-model:value="formData.sqrXb" style="width: 100%" placeholder="选择性别"> |
|||
<a-select-option value="1">男</a-select-option> |
|||
<a-select-option value="2">女</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>联系电话 |
|||
</template> |
|||
<a-form-item name="lxdh"> |
|||
<a-input v-model:value="formData.lxdh" placeholder="手机号或座机" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="身份证号码" :span="2"> |
|||
<a-form-item name="sqrZjhm"> |
|||
<a-input v-model:value="formData.sqrZjhm" placeholder="18位身份证号" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="现住址详址" :span="3"> |
|||
<a-form-item name="sqrXzdxz"> |
|||
<a-input v-model:value="formData.sqrXzdxz" placeholder="填写具体的区县与街道门牌号" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="户籍地详址" :span="3"> |
|||
<a-form-item name="sqrHjdxz"> |
|||
<a-input v-model:value="formData.sqrHjdxz" placeholder="填写身份证上的地址" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { defineProps } from 'vue'; |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 模块分区：融入整体页面，用细线分隔 */ |
|||
.form-module-wrapper { |
|||
padding: 0 32px; |
|||
} |
|||
.module-header { |
|||
padding: 16px 0 10px; |
|||
border-bottom: 1px solid #e2e8f0; |
|||
} |
|||
.module-title { |
|||
font-weight: 700; |
|||
color: #1e293b; |
|||
font-size: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
.title-bar { |
|||
width: 4px; |
|||
height: 16px; |
|||
background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%); |
|||
border-radius: 2px; |
|||
} |
|||
.module-content { |
|||
padding: 16px 0; |
|||
} |
|||
.required-star { |
|||
color: #ef4444; |
|||
margin-right: 4px; |
|||
font-family: SimSun, sans-serif; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 统一重写 Ant Design Vue 的 descriptions 样式 */ |
|||
:deep(.ant-descriptions-bordered .ant-descriptions-view) { |
|||
border: 1px solid #e2e8f0 !important; |
|||
border-radius: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-row) { |
|||
border-bottom: 1px solid #f1f5f9 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-label) { |
|||
width: 130px !important; |
|||
min-width: 130px !important; |
|||
max-width: 130px !important; |
|||
background-color: #f8fafc !important; |
|||
color: #475569 !important; |
|||
font-weight: 600 !important; |
|||
font-size: 13px !important; |
|||
padding: 10px 16px !important; |
|||
border-right: 1px solid #e2e8f0 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-content) { |
|||
background-color: #ffffff !important; |
|||
padding: 6px 12px !important; |
|||
border-right: 1px solid #f1f5f9 !important; |
|||
} |
|||
|
|||
/* 彻底扁平化输入框 */ |
|||
:deep(.ant-form-item) { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-input), |
|||
:deep(.ant-select-selector), |
|||
:deep(.ant-cascader-picker) { |
|||
border-radius: 2px !important; |
|||
border: 1px solid #cbd5e1 !important; |
|||
box-shadow: none !important; |
|||
height: 32px !important; |
|||
line-height: 30px !important; |
|||
padding: 0 8px !important; |
|||
} |
|||
|
|||
:deep(.ant-select-selector .ant-select-selection-item) { |
|||
line-height: 30px !important; |
|||
} |
|||
|
|||
:deep(.ant-input:hover), |
|||
:deep(.ant-select-selector:hover) { |
|||
border-color: #94a3b8 !important; |
|||
} |
|||
|
|||
:deep(.ant-input:focus), |
|||
:deep(.ant-select-focused .ant-select-selector) { |
|||
border-color: #2563eb !important; |
|||
box-shadow: 0 0 0 1px #2563eb !important; |
|||
} |
|||
|
|||
:deep(.ant-input[disabled]) { |
|||
background-color: #f1f5f9 !important; |
|||
color: #94a3b8 !important; |
|||
border-color: #cbd5e1 !important; |
|||
} |
|||
|
|||
/* 错误红字绝对定位浮动，防止撑开网格高度 */ |
|||
:deep(.ant-form-item-control) { |
|||
position: relative !important; |
|||
} |
|||
:deep(.ant-form-item-explain) { |
|||
position: absolute !important; |
|||
bottom: -4px !important; |
|||
left: 10px !important; |
|||
z-index: 10 !important; |
|||
font-size: 11px !important; |
|||
color: #ef4444 !important; |
|||
line-height: 1 !important; |
|||
background: #ffffff !important; |
|||
padding: 0 4px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<div class="form-module-wrapper"> |
|||
<div class="module-header"> |
|||
<span class="module-title"> |
|||
<span class="title-bar"></span> 涉事单位与指派人员 |
|||
</span> |
|||
</div> |
|||
<div class="module-content"> |
|||
<a-descriptions |
|||
bordered |
|||
size="small" |
|||
:column="3" |
|||
> |
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>涉及警种 |
|||
</template> |
|||
<a-form-item name="sjjzNo"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.SYSTEM_JZ" placeholder="请选择涉及警种" v-model:value="formData.sjjzNo" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item :span="2"> |
|||
<template #label> |
|||
<span class="required-star">*</span>被反映单位 |
|||
</template> |
|||
<a-form-item name="sjdwCode"> |
|||
<a-cascader |
|||
v-model:value="formData.sjdwCode" |
|||
:options="departmentOptions" |
|||
placeholder="请选择区县分局与具体所队" |
|||
style="width: 100%" |
|||
expand-trigger="hover" |
|||
/> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="被反映人身份"> |
|||
<a-form-item name="sfsjfj"> |
|||
<a-select v-model:value="formData.sfsjfj" placeholder="警员身份" style="width: 100%"> |
|||
<a-select-option value="1">民警</a-select-option> |
|||
<a-select-option value="2">辅警</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="被反映人姓名"> |
|||
<a-form-item name="sjfjxm"> |
|||
<a-input v-model:value="formData.sjfjxm" placeholder="核实后的具体反映人" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item label="被反映人警号"> |
|||
<a-form-item name="sjfjjh"> |
|||
<a-input v-model:value="formData.sjfjjh" placeholder="警号/工号" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { defineProps } from 'vue'; |
|||
import DictSelect from '/@/components/support/dict-select/index.vue'; |
|||
import { DICT_CODE_ENUM } from '/@/constants/support/dict-const.js'; |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
departmentOptions: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 模块分区：融入整体页面，用细线分隔 */ |
|||
.form-module-wrapper { |
|||
padding: 0 32px; |
|||
} |
|||
.module-header { |
|||
padding: 16px 0 10px; |
|||
border-bottom: 1px solid #e2e8f0; |
|||
} |
|||
.module-title { |
|||
font-weight: 700; |
|||
color: #1e293b; |
|||
font-size: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
.title-bar { |
|||
width: 4px; |
|||
height: 16px; |
|||
background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%); |
|||
border-radius: 2px; |
|||
} |
|||
.module-content { |
|||
padding: 16px 0; |
|||
} |
|||
.required-star { |
|||
color: #ef4444; |
|||
margin-right: 4px; |
|||
font-family: SimSun, sans-serif; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 统一重写 Ant Design Vue 的 descriptions 样式 */ |
|||
:deep(.ant-descriptions-bordered .ant-descriptions-view) { |
|||
border: 1px solid #e2e8f0 !important; |
|||
border-radius: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-row) { |
|||
border-bottom: 1px solid #f1f5f9 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-label) { |
|||
width: 130px !important; |
|||
min-width: 130px !important; |
|||
max-width: 130px !important; |
|||
background-color: #f8fafc !important; |
|||
color: #475569 !important; |
|||
font-weight: 600 !important; |
|||
font-size: 13px !important; |
|||
padding: 10px 16px !important; |
|||
border-right: 1px solid #e2e8f0 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-content) { |
|||
background-color: #ffffff !important; |
|||
padding: 6px 12px !important; |
|||
border-right: 1px solid #f1f5f9 !important; |
|||
} |
|||
|
|||
/* 彻底扁平化输入框 */ |
|||
:deep(.ant-form-item) { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-input), |
|||
:deep(.ant-select-selector), |
|||
:deep(.ant-cascader-picker) { |
|||
border-radius: 2px !important; |
|||
border: 1px solid #cbd5e1 !important; |
|||
box-shadow: none !important; |
|||
height: 32px !important; |
|||
line-height: 30px !important; |
|||
padding: 0 8px !important; |
|||
} |
|||
|
|||
:deep(.ant-select-selector .ant-select-selection-item) { |
|||
line-height: 30px !important; |
|||
} |
|||
|
|||
:deep(.ant-input:hover), |
|||
:deep(.ant-select-selector:hover) { |
|||
border-color: #94a3b8 !important; |
|||
} |
|||
|
|||
:deep(.ant-input:focus), |
|||
:deep(.ant-select-focused .ant-select-selector) { |
|||
border-color: #2563eb !important; |
|||
box-shadow: 0 0 0 1px #2563eb !important; |
|||
} |
|||
|
|||
:deep(.ant-input[disabled]) { |
|||
background-color: #f1f5f9 !important; |
|||
color: #94a3b8 !important; |
|||
border-color: #cbd5e1 !important; |
|||
} |
|||
|
|||
/* 错误红字绝对定位浮动，防止撑开网格高度 */ |
|||
:deep(.ant-form-item-control) { |
|||
position: relative !important; |
|||
} |
|||
:deep(.ant-form-item-explain) { |
|||
position: absolute !important; |
|||
bottom: -4px !important; |
|||
left: 10px !important; |
|||
z-index: 10 !important; |
|||
font-size: 11px !important; |
|||
color: #ef4444 !important; |
|||
line-height: 1 !important; |
|||
background: #ffffff !important; |
|||
padding: 0 4px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,226 @@ |
|||
<template> |
|||
<div class="review-closure-container"> |
|||
|
|||
<!-- 1. 首访沟通台 --> |
|||
<div class="form-module-wrapper"> |
|||
<div class="module-header"> |
|||
<span class="module-title"> |
|||
<span class="title-bar"></span> 电话回访与沟通记录 |
|||
</span> |
|||
</div> |
|||
<div class="module-content"> |
|||
<a-form layout="vertical"> |
|||
<a-form-item> |
|||
<template #label> |
|||
<div style="font-weight: bold; color: #475569; display: flex; align-items: center; gap: 8px;"> |
|||
首访沟通记录 |
|||
</div> |
|||
</template> |
|||
<!-- 在后端实体中，这可能是 firstFeedbackOpinion 或者是其他补充字段，目前先绑定此字段 --> |
|||
<a-textarea v-model:value="formData.firstFeedbackOpinion" :rows="3" placeholder="填写与群众的沟通情况及诉求点..." /> |
|||
</a-form-item> |
|||
</a-form> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 2. 复核结案区 (高权限专属) --> |
|||
<div class="form-module-wrapper" v-if="isSuperUser"> |
|||
<div class="module-header"> |
|||
<span class="module-title"> |
|||
<span class="title-bar"></span> 复核结案 |
|||
</span> |
|||
</div> |
|||
<div class="module-content"> |
|||
<a-descriptions |
|||
bordered |
|||
size="small" |
|||
:column="2" |
|||
> |
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>情况是否属实 |
|||
</template> |
|||
<a-form-item name="ssqkNo"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.IS_FACT" placeholder="请选择核查属实情况" v-model:value="formData.ssqkNo" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item> |
|||
<template #label> |
|||
<span class="required-star">*</span>涉事问责情况 |
|||
</template> |
|||
<a-form-item name="wzqkNo"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.CZZX_WZQK" placeholder="请选择问责定性" v-model:value="formData.wzqkNo" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item :span="2"> |
|||
<template #label> |
|||
<span class="required-star">*</span>复核满意度 |
|||
</template> |
|||
<a-form-item name="secondSatisfaction"> |
|||
<DictSelect :dict-code="DICT_CODE_ENUM.CALLBACK_SATISFACTION" placeholder="请选择群众最终复核满意度" v-model:value="formData.secondSatisfaction" /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
|
|||
<a-descriptions-item :span="2"> |
|||
<template #label> |
|||
<span class="required-star">*</span>结案说明 |
|||
</template> |
|||
<a-form-item name="secondFeedbackOpinion"> |
|||
<a-textarea v-model:value="formData.secondFeedbackOpinion" :rows="3" placeholder="请输入结案说明..." /> |
|||
</a-form-item> |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { defineProps } from 'vue'; |
|||
import DictSelect from '/@/components/support/dict-select/index.vue'; |
|||
import { DICT_CODE_ENUM } from '/@/constants/support/dict-const.js'; |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
// 模拟权限控制，如果是高层/督察则显示模块2 |
|||
isSuperUser: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.review-closure-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24px; |
|||
} |
|||
.form-module-wrapper { |
|||
background-color: #ffffff; |
|||
border: 1px solid #cbd5e1; |
|||
border-radius: 2px; |
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
|||
} |
|||
.module-header { |
|||
padding: 10px 16px; |
|||
border-bottom: 1px solid #e2e8f0; |
|||
background-color: #f8fafc; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.module-title { |
|||
font-weight: 800; |
|||
color: #334155; |
|||
font-size: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
.title-bar { |
|||
width: 4px; |
|||
height: 14px; |
|||
background-color: #3b82f6; |
|||
border-radius: 1px; |
|||
} |
|||
.module-content { |
|||
padding: 16px; |
|||
} |
|||
.required-star { |
|||
color: #ef4444; |
|||
margin-right: 4px; |
|||
font-family: SimSun, sans-serif; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 统一重写 Ant Design Vue 的 descriptions 样式以高保真还原 */ |
|||
:deep(.ant-descriptions-bordered .ant-descriptions-view) { |
|||
border: 1px solid #cbd5e1 !important; |
|||
border-radius: 2px !important; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-row) { |
|||
border-bottom: 1px solid #cbd5e1 !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-label) { |
|||
width: 120px !important; |
|||
min-width: 120px !important; |
|||
max-width: 120px !important; |
|||
background-color: #f8fafc !important; |
|||
color: #475569 !important; |
|||
font-weight: 700 !important; |
|||
font-size: 13px !important; |
|||
padding: 8px 12px !important; |
|||
border-right: 1px solid #cbd5e1 !important; |
|||
height: 46px !important; |
|||
} |
|||
|
|||
:deep(.ant-descriptions-item-content) { |
|||
background-color: #ffffff !important; |
|||
padding: 6px 10px !important; |
|||
border-right: 1px solid #cbd5e1 !important; |
|||
height: 46px !important; |
|||
} |
|||
|
|||
/* 最后一行的 textarea 排除在 46px 限制之外 */ |
|||
:deep(.ant-descriptions-row:last-child .ant-descriptions-item-label), |
|||
:deep(.ant-descriptions-row:last-child .ant-descriptions-item-content) { |
|||
height: auto !important; |
|||
} |
|||
|
|||
/* 彻底扁平化输入框 */ |
|||
:deep(.ant-form-item) { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-input), |
|||
:deep(.ant-select-selector), |
|||
:deep(.ant-cascader-picker) { |
|||
border-radius: 2px !important; |
|||
border: 1px solid #cbd5e1 !important; |
|||
box-shadow: none !important; |
|||
height: 32px !important; |
|||
line-height: 30px !important; |
|||
padding: 0 8px !important; |
|||
} |
|||
|
|||
:deep(.ant-select-selector .ant-select-selection-item) { |
|||
line-height: 30px !important; |
|||
} |
|||
|
|||
:deep(.ant-input:hover), |
|||
:deep(.ant-select-selector:hover) { |
|||
border-color: #94a3b8 !important; |
|||
} |
|||
|
|||
:deep(.ant-input:focus), |
|||
:deep(.ant-select-focused .ant-select-selector) { |
|||
border-color: #2563eb !important; |
|||
box-shadow: 0 0 0 1px #2563eb !important; |
|||
} |
|||
|
|||
:deep(.ant-textarea) { |
|||
border-radius: 2px !important; |
|||
border: 1px solid #cbd5e1 !important; |
|||
box-shadow: none !important; |
|||
padding: 8px !important; |
|||
} |
|||
|
|||
:deep(.ant-textarea:hover) { |
|||
border-color: #94a3b8 !important; |
|||
} |
|||
|
|||
:deep(.ant-textarea:focus) { |
|||
border-color: #2563eb !important; |
|||
box-shadow: 0 0 0 1px #2563eb !important; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue