| | |
| | | <template> |
| | | <div class="app-container metric-binding"> |
| | | <!-- 左侧:检测标准列表(只读) --> |
| | | <div class="left-panel"> |
| | | <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="metric-tabs"> |
| | | <el-tab-pane label="原材料检验" name="0" /> |
| | | <el-tab-pane label="过程检验" name="1" /> |
| | | <el-tab-pane label="出厂检验" name="2" /> |
| | | </el-tabs> |
| | | <el-row :gutter="16" class="metric-binding-row"> |
| | | <!-- 左侧:检测标准列表 --> |
| | | <el-col :xs="24" :sm="24" :md="12" :lg="14" :xl="14" class="left-col"> |
| | | <div class="panel left-panel"> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="standardColumns" |
| | |
| | | @clear="handleQuery" |
| | | /> |
| | | </template> |
| | | <template #inspectTypeHeader> |
| | | <el-select |
| | | v-model="searchForm.inspectType" |
| | | placeholder="类别" |
| | | clearable |
| | | size="small" |
| | | style="width: 120px" |
| | | @change="handleQuery" |
| | | @clear="handleQuery" |
| | | > |
| | | <el-option label="原材料检验" value="0" /> |
| | | <el-option label="过程检验" value="1" /> |
| | | <el-option label="出厂检验" value="2" /> |
| | | </el-select> |
| | | </template> |
| | | <template #stateHeader> |
| | | <el-select |
| | | v-model="searchForm.state" |
| | |
| | | </el-select> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <!-- 右侧:绑定列表 --> |
| | | <div class="right-panel"> |
| | | <!-- 右侧:绑定列表 --> |
| | | <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10" class="right-col"> |
| | | <div class="panel right-panel"> |
| | | <div class="right-header"> |
| | | <div class="title">绑定关系</div> |
| | | <div class="desc" v-if="currentStandard"> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- 添加绑定弹框 --> |
| | | <el-dialog |
| | |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | |
| | | // 类别 Tab(0=原材料,1=过程,2=出厂) |
| | | const activeTab = ref('0') |
| | | |
| | | // 左侧标准列表:整行内容居中(配合样式) |
| | | const rowClassNameCenter = () => 'row-center' |
| | | |
| | |
| | | { |
| | | label: '类别', |
| | | prop: 'inspectType', |
| | | headerSlot: 'inspectTypeHeader', |
| | | align: 'center', |
| | | dataType: 'tag', |
| | | formatData: (val) => { |
| | |
| | | // } |
| | | // } |
| | | ]) |
| | | |
| | | const handleTabChange = () => { |
| | | searchForm.value.standardNo = '' |
| | | searchForm.value.standardName = '' |
| | | searchForm.value.state = '' |
| | | searchForm.value.inspectType = activeTab.value |
| | | page.current = 1 |
| | | currentStandard.value = null |
| | | bindingTableData.value = [] |
| | | bindingSelectedRows.value = [] |
| | | getStandardList() |
| | | } |
| | | |
| | | const currentStandard = ref(null) |
| | | |
| | |
| | | } |
| | | |
| | | const handleUnbind = async (row) => { |
| | | if (!row?.id) return |
| | | const id = row?.id ?? row?.qualityTestStandardBindingId |
| | | if (id == null || id === '') return |
| | | try { |
| | | await ElMessageBox.confirm('确认删除该绑定?', '提示', { type: 'warning' }) |
| | | } catch { |
| | | return |
| | | } |
| | | await qualityTestStandardBindingDel([row.qualityTestStandardBindingId]) |
| | | proxy.$message.success('删除成功') |
| | | loadBindingList() |
| | | try { |
| | | await qualityTestStandardBindingDel([id]) |
| | | proxy.$message.success('删除成功') |
| | | loadBindingList() |
| | | } catch (err) { |
| | | console.error('删除绑定失败:', err) |
| | | proxy.$message?.error(err?.message || '删除失败') |
| | | } |
| | | } |
| | | |
| | | const handleBatchUnbind = async () => { |
| | |
| | | proxy.$message.warning('请选择数据') |
| | | return |
| | | } |
| | | const ids = bindingSelectedRows.value.map((i) => i.qualityTestStandardBindingId) |
| | | const ids = bindingSelectedRows.value |
| | | .map((i) => i?.id ?? i?.qualityTestStandardBindingId) |
| | | .filter((id) => id != null && id !== '') |
| | | if (!ids.length) { |
| | | proxy.$message.warning('选中数据缺少有效 id') |
| | | return |
| | | } |
| | | try { |
| | | await ElMessageBox.confirm('选中的内容将被删除,是否确认删除?', '删除提示', { type: 'warning' }) |
| | | } catch { |
| | | return |
| | | } |
| | | await qualityTestStandardBindingDel(ids) |
| | | proxy.$message.success('删除成功') |
| | | loadBindingList() |
| | | try { |
| | | await qualityTestStandardBindingDel(ids) |
| | | proxy.$message.success('删除成功') |
| | | loadBindingList() |
| | | } catch (err) { |
| | | console.error('批量删除绑定失败:', err) |
| | | proxy.$message?.error(err?.message || '删除失败') |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | searchForm.value.inspectType = activeTab.value |
| | | getStandardList() |
| | | getProcessList() |
| | | }) |
| | |
| | | |
| | | <style scoped> |
| | | .metric-binding { |
| | | display: flex; |
| | | gap: 16px; |
| | | padding: 0; |
| | | } |
| | | |
| | | .metric-tabs { |
| | | margin: 10px; |
| | | } |
| | | |
| | | .metric-binding-row { |
| | | width: 100%; |
| | | } |
| | | |
| | | .metric-binding-row .left-col, |
| | | .metric-binding-row .right-col { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .metric-binding-row .panel { |
| | | background: #ffffff; |
| | | padding: 16px; |
| | | box-sizing: border-box; |
| | | height: 100%; |
| | | min-height: 400px; |
| | | } |
| | | |
| | | .left-panel, |
| | | .right-panel { |
| | | flex: 1; |
| | | background: #ffffff; |
| | | padding: 16px; |
| | | box-sizing: border-box; |
| | | height: 100%; |
| | | } |
| | | |
| | | .toolbar { |