feat: 完成MES工位终端系统全量功能迭代

本次提交包含以下核心变更：
1. 新增按钮级权限控制框架与前端权限校验
2. 新增工位管理、工艺流程、巡检终端等核心业务模块
3. 完善用户体系，支持工位终端专属登录权限
4. 新增文件上传下载、报表查询等配套功能
5. 修复多系统兼容性与交互体验问题
6. 完成所有文档与配置项的规范化更新

bj_power_mes/frontend/src/pages/ProcessFlow.vue

@@ -0,0 +1,479 @@
+<template>
+  <el-card>
+    <el-tabs v-model="tab" @tab-change="onTabChange">
+      <!-- ============ Tab1：工艺流程管理 ============ -->
+      <el-tab-pane label="工艺流程管理" name="flows">
+        <el-form inline>
+          <el-form-item label="工序号">
+            <el-select v-model="query.processCode" placeholder="全部" clearable style="width:140px" @change="loadFlows">
+              <el-option v-for="i in 12" :key="i" :label="`工序${i}`" :value="i" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="loadFlows">查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button v-if="can('produce.processflow:add')" type="success" @click="openFlow()">新增流程</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table :data="flows" border size="small">
+          <el-table-column prop="id" label="ID" width="60" />
+          <el-table-column prop="name" label="流程名" min-width="120" show-overflow-tooltip />
+          <el-table-column prop="processCode" label="工序编号" width="90" align="center" />
+          <el-table-column label="PDF" width="130" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.pdfFile" link type="primary" @click="previewPdf(row.pdfFile)">预览</el-button>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 'ACTIVE' ? 'success' : 'info'">{{ row.status }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="绑定工位" min-width="110">
+            <template #default="{ row }">{{ (row.stations || []).join(', ') || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="步骤" min-width="150">
+            <template #default="{ row }">
+              <el-tooltip
+                v-if="row.steps && row.steps.length"
+                :content="row.steps.map(s => `${s.seq}.${s.name}`).join('  ')">
+                <span>{{ row.steps.length }} 步</span>
+              </el-tooltip>
+              <span v-else>0 步</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
+          <el-table-column label="创建时间" width="150">
+            <template #default="{ row }">{{ fmt(row.createdAt) }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                v-if="can('produce.processflow:add') || can('produce.processflow:edit')"
+                size="small" @click="openFlow(row)">编辑</el-button>
+              <el-button v-if="can('produce.processflow:delete')" size="small" type="danger" @click="delFlow(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+
+      <!-- ============ Tab2：工位管理 ============ -->
+      <el-tab-pane label="工位管理" name="stations">
+        <div style="margin-bottom:10px">
+          <el-button v-if="can('produce.station:edit')" type="success" @click="openStation()">新增工位</el-button>
+        </div>
+        <el-table :data="stations" border size="small">
+          <el-table-column prop="id" label="ID" width="60" />
+          <el-table-column prop="stationNo" label="工位号" width="90" align="center" />
+          <el-table-column prop="name" label="工位名称" min-width="130" show-overflow-tooltip />
+          <el-table-column prop="flowName" label="绑定流程" min-width="150" show-overflow-tooltip />
+          <el-table-column prop="processCode" label="工序编号" width="90" align="center" />
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 'ACTIVE' ? 'success' : 'info'">{{ row.status }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="90" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button v-if="can('produce.station:edit')" size="small" @click="openStation(row)">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- ============ 工艺流程 新增/编辑 ============ -->
+    <el-dialog v-model="flowDlg.show" :title="flowDlg.id ? '编辑工艺流程' : '新增工艺流程'" width="920px" top="6vh">
+      <el-form :model="flowDlg" label-width="90px">
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="流程名" required>
+              <el-input v-model="flowDlg.name" placeholder="如 一号线总装流程" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工序编号" required>
+              <el-select v-model="flowDlg.processCode" style="width:100%">
+                <el-option v-for="i in 12" :key="i" :label="`工序${i}`" :value="i" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-select v-model="flowDlg.status" style="width:100%">
+                <el-option label="启用" value="ACTIVE" />
+                <el-option label="停用" value="INACTIVE" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工序PDF">
+              <el-button
+                v-if="can('produce.processflow:upload')"
+                type="primary" plain :loading="flowDlg.uploading" @click="pickPdf">
+                上传 PDF
+              </el-button>
+              <span v-if="flowDlg.pdfFile" class="pdf-name">
+                {{ flowDlg.pdfFile }}
+                <el-button link type="primary" @click="previewPdf(flowDlg.pdfFile)">预览</el-button>
+              </span>
+              <input ref="pdfInput" type="file" accept="application/pdf" style="display:none" @change="onPdfChange" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注">
+          <el-input v-model="flowDlg.remark" placeholder="备注(可空)" />
+        </el-form-item>
+
+        <!-- 步骤模板子表 -->
+        <el-form-item label="步骤模板">
+          <div style="width:100%">
+            <el-table :data="flowDlg.steps" border size="small">
+              <el-table-column label="步骤" width="80" align="center">
+                <template #default="{ row }">
+                  <el-input-number v-model="row.seq" :min="1" size="small" controls-position="right" style="width:70px" />
+                </template>
+              </el-table-column>
+              <el-table-column label="步骤名称" min-width="140">
+                <template #default="{ row }"><el-input v-model="row.name" placeholder="如 拧紧扭矩" /></template>
+              </el-table-column>
+              <el-table-column label="采集方式" width="130">
+                <template #default="{ row }">
+                  <el-select v-model="row.collectType" placeholder="请选择">
+                    <el-option value="AUTO" label="拧紧枪自动" />
+                    <el-option value="MANUAL" label="手填" />
+                    <el-option value="NONE" label="仅记录" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否拧紧" width="90" align="center">
+                <template #default="{ row }"><el-switch v-model="row.isTorque" /></template>
+              </el-table-column>
+              <el-table-column label="备注" min-width="120">
+                <template #default="{ row }"><el-input v-model="row.remark" placeholder="备注(可空)" /></template>
+              </el-table-column>
+              <el-table-column label="操作" width="120" align="center">
+                <template #default="{ row }">
+                  <el-button link type="primary" size="small" @click="row._showCrit = !row._showCrit">
+                    {{ row._showCrit ? '收起标准' : '考核标准' }}
+                  </el-button>
+                  <el-button link type="danger" size="small" @click="removeStep(row)">删</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 考核标准编辑 -->
+            <template v-for="row in flowDlg.steps" :key="row._key">
+              <div v-if="row._showCrit" class="crit-box">
+                <b>考核标准：{{ row.name || '(未命名步骤)' }}</b>
+                <el-table :data="row.criteria" border size="small" style="margin-top:8px">
+                  <el-table-column label="指标名" min-width="110">
+                    <template #default="{ row: c }"><el-input v-model="c.name" placeholder="如 扭矩" /></template>
+                  </el-table-column>
+                  <el-table-column label="单位" width="80">
+                    <template #default="{ row: c }"><el-input v-model="c.unit" placeholder="N·m" /></template>
+                  </el-table-column>
+                  <el-table-column label="逻辑" width="120">
+                    <template #default="{ row: c }">
+                      <el-select v-model="c.logic" placeholder="请选择">
+                        <el-option value="GE" label="≥" />
+                        <el-option value="LE" label="≤" />
+                        <el-option value="GT" label=">" />
+                        <el-option value="LT" label="<" />
+                        <el-option value="RANGE" label="区间" />
+                        <el-option value="EQUAL" label="=" />
+                      </el-select>
+                    </template>
+                  </el-table-column>
+                  <el-table-column v-if="cLogicNeedsTarget(row)" label="目标值" width="110">
+                    <template #default="{ row: c }">
+                      <el-input-number v-model="c.target" :step="1" controls-position="right" style="width:100%" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column v-if="editingRanges(row)" label="下限" width="110">
+                    <template #default="{ row: c }">
+                      <el-input-number v-model="c.min" :step="1" controls-position="right" style="width:100%" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column v-if="editingRanges(row)" label="上限" width="110">
+                    <template #default="{ row: c }">
+                      <el-input-number v-model="c.max" :step="1" controls-position="right" style="width:100%" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="70" align="center">
+                    <template #default="{ row: c }">
+                      <el-button link type="danger" size="small" @click="removeCriterion(row, c)">删</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <el-button size="small" style="margin-top:8px" @click="addCriterion(row)">新增标准行</el-button>
+              </div>
+            </template>
+
+            <el-button size="small" style="margin-top:10px" @click="addStep">新增步骤</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="flowDlg.show = false">取消</el-button>
+        <el-button
+          v-if="can('produce.processflow:add') || can('produce.processflow:edit')"
+          type="primary" @click="saveFlow">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- ============ 工位 新增/编辑 ============ -->
+    <el-dialog v-model="stationDlg.show" :title="stationDlg.id ? '编辑工位' : '新增工位'" width="460px">
+      <el-form :model="stationDlg" label-width="90px">
+        <el-form-item label="工位号" required>
+          <el-select v-model="stationDlg.stationNo" style="width:100%">
+            <el-option v-for="i in 12" :key="i" :label="`工位${i}`" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工位名称" required>
+          <el-input v-model="stationDlg.name" placeholder="如 一号工位" />
+        </el-form-item>
+        <el-form-item label="绑定流程" required>
+          <el-select v-model="stationDlg.flowId" filterable placeholder="请选择工艺流程" style="width:100%">
+            <el-option v-for="f in flowOptions" :key="f.id" :label="f.name" :value="f.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="stationDlg.show = false">取消</el-button>
+        <el-button v-if="can('produce.station:edit')" type="primary" @click="saveStation">保存</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+  <PageHelp :data="helpProcessFlow" />
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import PageHelp from '../components/PageHelp.vue'
+import { helpProcessFlow } from '../help'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import request from '../utils/request'
+
+const tab = ref('flows')
+const flows = ref([])
+const stations = ref([])
+const flowOptions = ref([])
+const query = reactive({ processCode: undefined })
+
+const pdfInput = ref(null)
+
+/* ---------- 权限 ---------- */
+function can(code) {
+  try {
+    const u = JSON.parse(localStorage.getItem('user') || 'null')
+    if (!u) return false
+    const owned = u.permissionCodes || []
+    return u.roleCode === 'SUPER_ADMIN' || owned.includes('*') || owned.includes(code)
+  } catch {
+    return false
+  }
+}
+
+/* ---------- 工艺流程 ---------- */
+function blankStep(seq) {
+  return {
+    _key: Date.now() + Math.random(),
+    seq,
+    name: '',
+    collectType: 'MANUAL',
+    isTorque: false,
+    remark: '',
+    criteria: [],
+    _showCrit: false
+  }
+}
+
+async function loadFlows() {
+  const params = {}
+  if (query.processCode) params.processCode = query.processCode
+  flows.value = (await request.get('/process-flows', { params })) || []
+}
+
+function fmt(v) { return v ? String(v).replace('T', ' ').slice(0, 19) : '-' }
+
+function previewPdf(pdfFile) {
+  if (pdfFile) window.open('/api/v1/files/' + pdfFile, '_blank')
+}
+
+function pickPdf() {
+  if (pdfInput.value) pdfInput.value.click()
+}
+
+async function onPdfChange(e) {
+  const file = e.target.files && e.target.files[0]
+  e.target.value = ''
+  if (!file) return
+  if (file.type !== 'application/pdf' && !/\.pdf$/i.test(file.name)) {
+    return ElMessage.warning('仅支持上传 PDF 文件')
+  }
+  flowDlg.uploading = true
+  try {
+    const fd = new FormData()
+    fd.append('file', file)
+    const data = await request.post('/process-flows/upload', fd, {
+      headers: { 'Content-Type': 'multipart/form-data' }
+    })
+    flowDlg.pdfFile = (data && data.filename) || ''
+    ElMessage.success('PDF 上传成功')
+  } catch {
+    // 错误提示已由 request 拦截器统一弹出
+  } finally {
+    flowDlg.uploading = false
+  }
+}
+
+const flowDlg = reactive({
+  show: false, id: 0, name: '', processCode: 1, pdfFile: '', status: 'ACTIVE',
+  remark: '', uploading: false, steps: []
+})
+
+function openFlow(row) {
+  if (row) {
+    flowDlg.id = row.id
+    flowDlg.name = row.name || ''
+    flowDlg.processCode = row.processCode
+    flowDlg.pdfFile = row.pdfFile || ''
+    flowDlg.status = row.status || 'ACTIVE'
+    flowDlg.remark = row.remark || ''
+    flowDlg.steps = (row.steps || []).map((s, i) => ({
+      _key: Date.now() + Math.random(),
+      seq: s.seq || i + 1,
+      name: s.name || '',
+      collectType: s.collectType || 'MANUAL',
+      isTorque: !!s.isTorque,
+      remark: s.remark || '',
+      criteria: (s.criteria || []).map((c) => ({ ...c })),
+      _showCrit: false
+    }))
+  } else {
+    Object.assign(flowDlg, {
+      id: 0, name: '', processCode: 1, pdfFile: '', status: 'ACTIVE', remark: '', steps: []
+    })
+  }
+  if (!flowDlg.steps.length) flowDlg.steps.push(blankStep(1))
+  flowDlg.show = true
+}
+
+function addStep() {
+  const maxSeq = flowDlg.steps.reduce((m, s) => Math.max(m, s.seq || 0), 0)
+  flowDlg.steps.push(blankStep(maxSeq + 1))
+}
+function removeStep(row) {
+  const i = flowDlg.steps.indexOf(row)
+  if (i >= 0) flowDlg.steps.splice(i, 1)
+}
+function addCriterion(row) {
+  row.criteria.push({ name: '', unit: '', logic: 'GE', target: null, min: null, max: null })
+}
+function removeCriterion(row, c) {
+  const i = row.criteria.indexOf(c)
+  if (i >= 0) row.criteria.splice(i, 1)
+}
+function cLogicNeedsTarget(row) {
+  return row.criteria.some((c) => c.logic && c.logic !== 'RANGE')
+}
+function editingRanges(row) {
+  return row.criteria.some((c) => c.logic === 'RANGE')
+}
+
+async function saveFlow() {
+  if (!flowDlg.name) return ElMessage.warning('请填写流程名')
+  if (!flowDlg.processCode) return ElMessage.warning('请选择工序编号')
+  const body = {
+    id: flowDlg.id || undefined,
+    name: flowDlg.name,
+    processCode: flowDlg.processCode,
+    pdfFile: flowDlg.pdfFile,
+    status: flowDlg.status,
+    remark: flowDlg.remark,
+    steps: flowDlg.steps.map(({ _key, _showCrit, ...st }) => ({
+      seq: st.seq,
+      name: st.name,
+      collectType: st.collectType,
+      isTorque: st.isTorque,
+      remark: st.remark,
+      criteria: st.criteria
+    }))
+  }
+  await request.post('/process-flows', body)
+  ElMessage.success('保存成功')
+  flowDlg.show = false
+  loadFlows()
+}
+
+async function delFlow(row) {
+  await ElMessageBox.confirm('确认删除该工艺流程？有工位绑定时将无法删除。', '提示', { type: 'warning' })
+  await request.delete(`/process-flows/${row.id}`)
+  ElMessage.success('删除成功')
+  loadFlows()
+}
+
+/* ---------- 工位管理 ---------- */
+async function loadStations() {
+  stations.value = (await request.get('/stations')) || []
+}
+async function loadFlowOptions() {
+  const list = (await request.get('/process-flows', { params: {} })) || []
+  flowOptions.value = list.map((f) => ({ id: f.id, name: f.name }))
+}
+
+const stationDlg = reactive({ show: false, id: 0, stationNo: 1, name: '', flowId: null })
+
+function openStation(row) {
+  if (row) {
+    Object.assign(stationDlg, {
+      show: true, id: row.id, stationNo: row.stationNo, name: row.name || '', flowId: row.flowId || null
+    })
+  } else {
+    Object.assign(stationDlg, { show: true, id: 0, stationNo: 1, name: '', flowId: null })
+  }
+}
+
+async function saveStation() {
+  if (!stationDlg.stationNo) return ElMessage.warning('请选择工位号')
+  if (!stationDlg.name) return ElMessage.warning('请填写工位名称')
+  if (!stationDlg.flowId) return ElMessage.warning('请选择绑定流程')
+  const body = {
+    id: stationDlg.id || undefined,
+    stationNo: stationDlg.stationNo,
+    name: stationDlg.name,
+    flowId: stationDlg.flowId
+  }
+  await request.post('/stations', body)
+  ElMessage.success('保存成功')
+  stationDlg.show = false
+  loadStations()
+}
+
+function onTabChange(name) {
+  if (name === 'stations') {
+    loadStations()
+    loadFlowOptions()
+  }
+}
+
+onMounted(() => {
+  loadFlows()
+  loadStations()
+  loadFlowOptions()
+})
+</script>
+
+<style scoped>
+.pdf-name { margin-left: 10px; color: #606266; font-size: 13px; }
+.crit-box {
+  border: 1px solid #ebeef5; border-radius: 6px; padding: 10px; margin: 8px 0;
+  background: #fafbfc;
+}
+</style>