<template>
|
<el-dialog
|
:model-value="modelValue"
|
@update:model-value="handleDialogClose"
|
top="7vh"
|
width="70%"
|
:title="$t('hellow.missingfilms')"
|
>
|
<div
|
v-loading="isLoading"
|
class="loading-container"
|
:element-loading-text="$t('searchOrder.loadingText')"
|
>
|
<div style="margin-top: -20px; text-align: center; margin-left: 400px;">
|
<el-form-item :label="$t('hellow.cardnumbera')" style="width: 14vw">
|
{{ currentRow.flowCardId }}
|
</el-form-item>
|
</div>
|
<el-table
|
ref="table"
|
style="margin-top: 20px; height: 400px;"
|
:data="tableDatac"
|
:header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"
|
>
|
<el-table-column
|
prop="flowCardId"
|
align="center"
|
:label="$t('hellow.flowCardId')"
|
min-width="100"
|
/>
|
<el-table-column
|
prop="glassId"
|
align="center"
|
:label="$t('searchOrder.glassID')"
|
min-width="100"
|
/>
|
<el-table-column
|
prop="layer"
|
align="center"
|
:label="$t('hellow.layer')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="glassType"
|
align="center"
|
:label="$t('reportmanage.number')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="thickness"
|
align="center"
|
:label="$t('hellow.thickness')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="filmsId"
|
align="center"
|
:label="$t('hellow.coatingtypes')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="height"
|
align="center"
|
:label="$t('hellow.height')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="width"
|
align="center"
|
:label="$t('hellow.width')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="thickness"
|
align="center"
|
:label="$t('hellow.thickness')"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="workingProcedure"
|
align="center"
|
:label="$t('reportmanage.process')"
|
min-width="80"
|
/>
|
<el-table-column
|
fixed="right"
|
:label="$t('searchOrder.operate')"
|
align="center"
|
>
|
<template #default="scope">
|
<el-button
|
type="text"
|
plain
|
:disabled="scope.row.glassId == null"
|
@click="handleBroke(scope.row)"
|
>
|
{{ $t('order.dilapidation') }}
|
</el-button>
|
</template>
|
</el-table-column>
|
<div style="float: right; margin-bottom: 5px;">
|
<el-pagination layout="prev, pager, next" :total="50" />
|
</div>
|
</el-table>
|
<div class="custom-page-buttons">
|
<button
|
v-for="page in pageList"
|
:key="page"
|
@click="switchPage(page)"
|
:class="{ 'active-page': currentPage === page }"
|
class="page-btn"
|
>
|
{{ page }}
|
</button>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ref, reactive, watch } from "vue";
|
import { useI18n } from 'vue-i18n'
|
import request from "@/utils/request";
|
const { t } = useI18n()
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
flowCardId: {
|
type: String,
|
required: true
|
}
|
});
|
const emit = defineEmits(['update:modelValue', 'refreshData']);
|
const isLoading = ref(true);
|
const tableDatac = ref([]);
|
const pageList = ref([]);
|
const allData = ref({});
|
const currentPage = ref(1);
|
const currentRow = reactive({
|
flowCardId: props.flowCardId
|
});
|
// 监听 flowCardId 变化，重新请求数据
|
watch(() => props.flowCardId, (newVal) => {
|
currentRow.flowCardId = newVal;
|
if (props.modelValue) {
|
fetchFlowBind(newVal);
|
}
|
}, { immediate: true });
|
// 监听弹窗显示状态变化
|
watch(() => props.modelValue, (newVal) => {
|
if (newVal && props.flowCardId) {
|
fetchFlowBind(props.flowCardId);
|
}
|
});
|
// 处理弹窗关闭事件：向父组件发送更新事件
|
const handleDialogClose = (value) => {
|
emit('update:modelValue', value); // 通知父组件修改 modelValue
|
};
|
// 获取缺片详情数据
|
const fetchFlowBind = async (flowCardId) => {
|
try {
|
const url = `/hollowGlass/hollowGlassRelationInfo/queryLackByFlowCard?flowCardId=${flowCardId}`;
|
const response = await request.post(url);
|
if (response.code === 200) {
|
isLoading.value = false;
|
allData.value = response.data;
|
pageList.value = Object.keys(response.data)
|
.map(Number)
|
.sort((a, b) => a - b);
|
currentPage.value = pageList.value[0] || 1;
|
tableDatac.value = response.data[currentPage.value] || [];
|
}
|
} catch (error) {
|
isLoading.value = false;
|
}
|
};
|
// 页面切换处理
|
const switchPage = (page) => {
|
currentPage.value = page;
|
tableDatac.value = allData.value[page] || [];
|
};
|
// 破损处理
|
const handleBroke = async (row) => {
|
try {
|
const confirmResult = await ElMessageBox.confirm(
|
t('searchOrder.broke'),
|
t('workOrder.prompt'),
|
{
|
confirmButtonText: t('workOrder.yes'),
|
cancelButtonText: t('workOrder.cancel'),
|
type: 'warning',
|
}
|
);
|
if (confirmResult === 'confirm') {
|
const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', {
|
flowCardId: row.flowCardId,
|
glassType: row.glassType,
|
glassId: row.glassId,
|
layer: row.layer,
|
state: 8,
|
line: 1,
|
workingProcedure: '中空',
|
remark: '中空'
|
});
|
if (response.code == 200) {
|
ElMessage.success(response.message);
|
fetchFlowBind(currentRow.flowCardId);
|
emit('refreshData');
|
} else {
|
ElMessage.error(response.msg);
|
}
|
}
|
} catch (error) {
|
}
|
};
|
</script>
|
<style scoped>
|
.custom-page-buttons {
|
display: flex;
|
gap: 10px;
|
margin: 20px 0;
|
flex-wrap: wrap;
|
}
|
.page-btn {
|
padding: 8px 16px;
|
min-width: 40px;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
background: #f5f7fa;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
.page-btn:hover {
|
background: #e6f1ff;
|
}
|
.page-btn.active-page {
|
background: #409eff;
|
color: white;
|
border-color: #409eff;
|
}
|
.loading-container {
|
position: relative;
|
height: 100%;
|
}
|
.el-loading-mask {
|
z-index: 2000 !important;
|
}
|
</style>
|
