|
@@ -4,7 +4,7 @@
|
|
|
<div>
|
|
<div>
|
|
|
<span>IDENTITY GENERATOR</span>
|
|
<span>IDENTITY GENERATOR</span>
|
|
|
<h1>事项编码生成</h1>
|
|
<h1>事项编码生成</h1>
|
|
|
- <p>选择预警类型与等级,系统按统一编码规则生成唯一的预警事项编码。</p>
|
|
|
|
|
|
|
+ <p>选择区域、预警类型及排水雨污分类,系统按统一编码规则生成唯一事项编码。</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="code-orbit">
|
|
<div class="code-orbit">
|
|
|
<div class="orbit-line"></div>
|
|
<div class="orbit-line"></div>
|
|
@@ -16,16 +16,27 @@
|
|
|
<el-card class="steps-card" shadow="never">
|
|
<el-card class="steps-card" shadow="never">
|
|
|
<div class="step-heading">
|
|
<div class="step-heading">
|
|
|
<span>编码配置</span>
|
|
<span>编码配置</span>
|
|
|
- <small>STEP {{ currentStep }}/2</small>
|
|
|
|
|
|
|
+ <small>STEP {{ currentStep }}/3</small>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="step-track">
|
|
<div class="step-track">
|
|
|
- <div class="track-item active"><span>01</span><div><strong>选择类型</strong><small>确定预警所属领域</small></div></div>
|
|
|
|
|
|
|
+ <div class="track-item active"><span>01</span><div><strong>选择区域</strong><small>确定编码所属区域</small></div></div>
|
|
|
<div class="track-line"></div>
|
|
<div class="track-line"></div>
|
|
|
- <div class="track-item" :class="{ active: form.warningLevel }"><span>02</span><div><strong>选择等级</strong><small>确定预警响应级别</small></div></div>
|
|
|
|
|
|
|
+ <div class="track-item" :class="{ active: form.warningType }"><span>02</span><div><strong>选择类型</strong><small>确定预警所属领域</small></div></div>
|
|
|
<div class="track-line"></div>
|
|
<div class="track-line"></div>
|
|
|
<div class="track-item" :class="{ active: generatedCode }"><span>03</span><div><strong>生成编码</strong><small>得到唯一事项标识</small></div></div>
|
|
<div class="track-item" :class="{ active: generatedCode }"><span>03</span><div><strong>生成编码</strong><small>得到唯一事项标识</small></div></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
+ <div class="field-block">
|
|
|
|
|
+ <label>区域</label>
|
|
|
|
|
+ <div class="type-grid region-grid">
|
|
|
|
|
+ <button v-for="item in warningRegions" :key="item.value" :class="{ selected: form.region === item.value }" @click="selectRegion(item.value)">
|
|
|
|
|
+ <span class="type-symbol"><el-icon><Location /></el-icon></span>
|
|
|
|
|
+ <span>{{ item.label }}({{ item.code.toLowerCase() }})</span>
|
|
|
|
|
+ <el-icon v-if="form.region === item.value" class="selected-icon"><Check /></el-icon>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
<div class="field-block">
|
|
<div class="field-block">
|
|
|
<label>预警类型</label>
|
|
<label>预警类型</label>
|
|
|
<div class="type-grid">
|
|
<div class="type-grid">
|
|
@@ -37,19 +48,13 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="field-block">
|
|
|
|
|
- <label>预警级别</label>
|
|
|
|
|
- <div class="level-grid">
|
|
|
|
|
- <button
|
|
|
|
|
- v-for="item in warningLevels"
|
|
|
|
|
- :key="item.value"
|
|
|
|
|
- :class="{ selected: form.warningLevel === item.value }"
|
|
|
|
|
- :style="{ '--level-color': item.color }"
|
|
|
|
|
- @click="selectLevel(item.value)"
|
|
|
|
|
- >
|
|
|
|
|
- <span class="level-dot"></span>
|
|
|
|
|
- <div><strong>{{ item.shortLabel }}预警</strong><small>{{ item.label.match(/(.*)/)?.[0] || '' }}</small></div>
|
|
|
|
|
- <el-icon v-if="form.warningLevel === item.value"><Check /></el-icon>
|
|
|
|
|
|
|
+ <div v-if="isDrainage" class="field-block">
|
|
|
|
|
+ <label>排水类型</label>
|
|
|
|
|
+ <div class="type-grid drainage-grid">
|
|
|
|
|
+ <button v-for="item in drainageSubtypes" :key="item.value" :class="{ selected: form.drainageType === item.value }" @click="selectDrainageType(item.value)">
|
|
|
|
|
+ <span class="type-symbol"><el-icon><Connection /></el-icon></span>
|
|
|
|
|
+ <span>{{ item.label }}({{ item.code.toLowerCase() }})</span>
|
|
|
|
|
+ <el-icon v-if="form.drainageType === item.value" class="selected-icon"><Check /></el-icon>
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -68,9 +73,9 @@
|
|
|
<strong>{{ generatedCode }}</strong>
|
|
<strong>{{ generatedCode }}</strong>
|
|
|
<button class="copy-button" @click="copyCode"><el-icon><CopyDocument /></el-icon> 复制编码</button>
|
|
<button class="copy-button" @click="copyCode"><el-icon><CopyDocument /></el-icon> 复制编码</button>
|
|
|
<div class="code-parts">
|
|
<div class="code-parts">
|
|
|
- <div><b>WI</b><span>事项标识</span></div>
|
|
|
|
|
|
|
+ <div><b>{{ regionPrefix }}</b><span>区域缩写</span></div>
|
|
|
<div><b>{{ typePrefix }}</b><span>类型缩写</span></div>
|
|
<div><b>{{ typePrefix }}</b><span>类型缩写</span></div>
|
|
|
- <div><b>{{ form.warningLevel }}</b><span>预警等级</span></div>
|
|
|
|
|
|
|
+ <div v-if="isDrainage"><b>{{ drainagePrefix }}</b><span>雨污分类</span></div>
|
|
|
<div><b>{{ datePart }}</b><span>生成日期</span></div>
|
|
<div><b>{{ datePart }}</b><span>生成日期</span></div>
|
|
|
<div><b>{{ sequencePart }}</b><span>流水号</span></div>
|
|
<div><b>{{ sequencePart }}</b><span>流水号</span></div>
|
|
|
</div>
|
|
</div>
|
|
@@ -78,12 +83,12 @@
|
|
|
<div v-else class="empty-result">
|
|
<div v-else class="empty-result">
|
|
|
<div class="empty-illustration"><el-icon><MagicStick /></el-icon></div>
|
|
<div class="empty-illustration"><el-icon><MagicStick /></el-icon></div>
|
|
|
<strong>等待生成编码</strong>
|
|
<strong>等待生成编码</strong>
|
|
|
- <p>完成左侧类型和等级选择后<br />点击“生成事项编码”获取唯一标识</p>
|
|
|
|
|
|
|
+ <p>完成左侧区域和类型选择后<br />点击“生成事项编码”获取唯一标识</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="rule-box">
|
|
<div class="rule-box">
|
|
|
<div class="rule-title"><el-icon><InfoFilled /></el-icon> 编码规则</div>
|
|
<div class="rule-title"><el-icon><InfoFilled /></el-icon> 编码规则</div>
|
|
|
- <p><code>WI + 类型缩写 + 等级 + YYYYMMDD + 4位流水号</code></p>
|
|
|
|
|
- <span>同一类型、等级和日期下流水号自动递增,确保编码唯一。</span>
|
|
|
|
|
|
|
+ <p><code>区域 + 类型 + [雨污分类] + YYYYMMDD + 4位流水号</code></p>
|
|
|
|
|
+ <span>排水事项必须选择雨水或污水;同一组合和日期下流水号自动递增。</span>
|
|
|
</div>
|
|
</div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</div>
|
|
</div>
|
|
@@ -93,18 +98,27 @@
|
|
|
<script setup name="WarningCodeGenerate">
|
|
<script setup name="WarningCodeGenerate">
|
|
|
import { computed, onMounted, reactive, ref } from 'vue'
|
|
import { computed, onMounted, reactive, ref } from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
|
-import { Check, Connection, CopyDocument, InfoFilled, Key, MagicStick, Warning } from '@element-plus/icons-vue'
|
|
|
|
|
|
|
+import { Check, Connection, CopyDocument, InfoFilled, Key, Location, MagicStick, Warning } from '@element-plus/icons-vue'
|
|
|
import { getDicts } from '@/api/system/dict/data'
|
|
import { getDicts } from '@/api/system/dict/data'
|
|
|
import { generateWarningItemCode } from '@/api/warning/list'
|
|
import { generateWarningItemCode } from '@/api/warning/list'
|
|
|
-import { fallbackWarningTypes, normalizeWarningTypeDict, warningLevels } from '../shared'
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ drainageSubtypes,
|
|
|
|
|
+ fallbackWarningTypes,
|
|
|
|
|
+ normalizeWarningTypeDict,
|
|
|
|
|
+ warningRegions,
|
|
|
|
|
+ warningTypeCodes
|
|
|
|
|
+} from '../shared'
|
|
|
|
|
|
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
|
const generatedCode = ref('')
|
|
const generatedCode = ref('')
|
|
|
const warningTypes = ref(fallbackWarningTypes)
|
|
const warningTypes = ref(fallbackWarningTypes)
|
|
|
-const form = reactive({ warningType: '', warningLevel: '' })
|
|
|
|
|
-const canGenerate = computed(() => !!form.warningType && !!form.warningLevel)
|
|
|
|
|
-const currentStep = computed(() => generatedCode.value ? 3 : form.warningLevel ? 2 : 1)
|
|
|
|
|
-const typePrefix = computed(() => (form.warningType || '').slice(0, 3).toUpperCase())
|
|
|
|
|
|
|
+const form = reactive({ region: '', warningType: '', drainageType: '' })
|
|
|
|
|
+const isDrainage = computed(() => warningTypeCodes[form.warningType] === 'PS' || form.warningType === '排水')
|
|
|
|
|
+const canGenerate = computed(() => !!form.region && !!form.warningType && (!isDrainage.value || !!form.drainageType))
|
|
|
|
|
+const currentStep = computed(() => generatedCode.value ? 3 : form.warningType ? 2 : 1)
|
|
|
|
|
+const regionPrefix = computed(() => warningRegions.find(item => item.value === form.region)?.code || '--')
|
|
|
|
|
+const typePrefix = computed(() => warningTypeCodes[form.warningType] || '--')
|
|
|
|
|
+const drainagePrefix = computed(() => drainageSubtypes.find(item => item.value === form.drainageType)?.code || '--')
|
|
|
const datePart = computed(() => generatedCode.value ? generatedCode.value.slice(-12, -4) : 'YYYYMMDD')
|
|
const datePart = computed(() => generatedCode.value ? generatedCode.value.slice(-12, -4) : 'YYYYMMDD')
|
|
|
const sequencePart = computed(() => generatedCode.value ? generatedCode.value.slice(-4) : '0001')
|
|
const sequencePart = computed(() => generatedCode.value ? generatedCode.value.slice(-4) : '0001')
|
|
|
|
|
|
|
@@ -118,22 +132,32 @@ async function loadTypes() {
|
|
|
}
|
|
}
|
|
|
function selectType(value) {
|
|
function selectType(value) {
|
|
|
form.warningType = value
|
|
form.warningType = value
|
|
|
|
|
+ if (!isDrainage.value) form.drainageType = ''
|
|
|
|
|
+ generatedCode.value = ''
|
|
|
|
|
+}
|
|
|
|
|
+function selectRegion(value) {
|
|
|
|
|
+ form.region = value
|
|
|
generatedCode.value = ''
|
|
generatedCode.value = ''
|
|
|
}
|
|
}
|
|
|
-function selectLevel(value) {
|
|
|
|
|
- form.warningLevel = value
|
|
|
|
|
|
|
+function selectDrainageType(value) {
|
|
|
|
|
+ form.drainageType = value
|
|
|
generatedCode.value = ''
|
|
generatedCode.value = ''
|
|
|
}
|
|
}
|
|
|
function reset() {
|
|
function reset() {
|
|
|
|
|
+ form.region = ''
|
|
|
form.warningType = ''
|
|
form.warningType = ''
|
|
|
- form.warningLevel = ''
|
|
|
|
|
|
|
+ form.drainageType = ''
|
|
|
generatedCode.value = ''
|
|
generatedCode.value = ''
|
|
|
}
|
|
}
|
|
|
async function generate() {
|
|
async function generate() {
|
|
|
if (!canGenerate.value) return
|
|
if (!canGenerate.value) return
|
|
|
loading.value = true
|
|
loading.value = true
|
|
|
try {
|
|
try {
|
|
|
- const res = await generateWarningItemCode(form.warningType, form.warningLevel)
|
|
|
|
|
|
|
+ const res = await generateWarningItemCode({
|
|
|
|
|
+ region: form.region,
|
|
|
|
|
+ warningType: form.warningType,
|
|
|
|
|
+ drainageType: isDrainage.value ? form.drainageType : undefined
|
|
|
|
|
+ })
|
|
|
generatedCode.value = res.data || ''
|
|
generatedCode.value = res.data || ''
|
|
|
if (generatedCode.value) ElMessage.success('事项编码生成成功')
|
|
if (generatedCode.value) ElMessage.success('事项编码生成成功')
|
|
|
} finally {
|
|
} finally {
|