You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
9.8 KiB
Vue
378 lines
9.8 KiB
Vue
<template>
|
|
<div>
|
|
<my-card title="搜索条件" search>
|
|
<n-form inline>
|
|
<!-- <n-form-item label="生产工单">
|
|
<n-input
|
|
v-model:value="searchForm.generateWorkOrderNumber"
|
|
:style="{ width: formItemWidth }"
|
|
type="text"
|
|
placeholder="请输入生产工单"
|
|
/>
|
|
</n-form-item> -->
|
|
<!-- <n-form-item label="订单编号">
|
|
<n-input
|
|
v-model:value="searchForm.orderNumber"
|
|
type="text"
|
|
:style="{ width: formItemWidth }"
|
|
placeholder="请输入订单编号"
|
|
/>
|
|
</n-form-item> -->
|
|
<n-form-item label="是否合格">
|
|
<n-select
|
|
v-model:value="searchForm.attr1"
|
|
placeholder="请选择是否合格"
|
|
:options="qualifiedOrNotList"
|
|
:style="{ width: formItemWidth }"
|
|
></n-select>
|
|
</n-form-item>
|
|
<n-form-item v-show="searchForm.attr1 !== '0'" label="缺陷项">
|
|
<n-select
|
|
v-model:value="searchForm.defectId"
|
|
placeholder="请选择缺陷项"
|
|
:options="defectList"
|
|
:style="{ width: formItemWidth }"
|
|
></n-select>
|
|
</n-form-item>
|
|
<n-form-item label="机台">
|
|
<n-select
|
|
v-model:value="machineId"
|
|
placeholder="请选择机台"
|
|
:options="machineList"
|
|
:style="{ width: formItemWidth }"
|
|
@update-value="(val,item : any) => {
|
|
searchForm.deviceName = item.label
|
|
}"
|
|
></n-select>
|
|
</n-form-item>
|
|
|
|
<n-form-item label="批号">
|
|
<n-input
|
|
v-model:value="searchForm.orderNumber"
|
|
type="text"
|
|
:style="{ width: formItemWidth }"
|
|
placeholder="请输入批号"
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="产品规格">
|
|
<n-input
|
|
v-model:value="searchForm.orderNumber"
|
|
type="text"
|
|
:style="{ width: formItemWidth }"
|
|
placeholder="请输入产品规格"
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="时间">
|
|
<n-date-picker v-model:value="range" type="datetimerange" clearable />
|
|
</n-form-item>
|
|
<n-form-item label="合格">
|
|
<n-input v-model:value="qualified" :disabled="true" :style="{ width: formItemWidth }"></n-input>
|
|
</n-form-item>
|
|
<n-form-item label="不合格">
|
|
<n-input v-model:value="noQualified" :disabled="true" :style="{ width: formItemWidth }"></n-input>
|
|
</n-form-item>
|
|
<n-form-item label="合格率">
|
|
<n-input v-model:value="qualifiedRatio" :disabled="true" :style="{ width: formItemWidth }"></n-input>
|
|
</n-form-item>
|
|
<n-form-item>
|
|
<component :is="useSearchBtn(search, reset)"></component>
|
|
</n-form-item>
|
|
</n-form>
|
|
</my-card>
|
|
<my-card title="过程检列表">
|
|
<template #right>
|
|
<div>
|
|
<CxColumns v-model:columns="columns" />
|
|
</div>
|
|
</template>
|
|
<n-data-table
|
|
:loading="loading"
|
|
:columns="columns"
|
|
:data="data"
|
|
:max-height="dataTableConfig.maxHeight"
|
|
:scroll-x="dataTableConfig.scrollWidth(columns)"
|
|
></n-data-table>
|
|
<my-pagination v-model:search-form="searchForm" @init="init"></my-pagination>
|
|
</my-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="tsx">
|
|
import type { Ref } from 'vue';
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import type { DataTableColumns } from 'naive-ui';
|
|
import { getWorkbenchEnamellingList } from '@/service/api/md/workbench/enamelling';
|
|
import { dataTableConfig } from '@/config/dataTableConfig';
|
|
import { useLoading } from '~/src/hooks';
|
|
import { useSearchBtn } from '~/src/hooks/common/useBtn';
|
|
import { getQcEnamelProcessRecordList } from '~/src/service/api/quality/enamellingProcessCheckRecord/index';
|
|
import { getQcDefect } from '~/src/service/api/quality/qcDefect/index';
|
|
const searchForm = ref<enamellingProcessCheckRecord.searchForm>({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
generateWorkOrderNumber: '',
|
|
orderNumber: '',
|
|
attr1: null,
|
|
deviceName: null,
|
|
batchNumber: '',
|
|
productSpecifications: '',
|
|
params: {
|
|
beginTime: null,
|
|
endTime: null
|
|
},
|
|
defectId: null
|
|
});
|
|
const { loading, startLoading, endLoading } = useLoading();
|
|
const formItemWidth = ref<string>('180px');
|
|
const machineList = ref<{ label: string; value: number }[]>([]);
|
|
const defectList = ref<{ label: string; value: number }[]>([]);
|
|
const qualified = ref<string>('0');
|
|
const noQualified = ref<string>('0');
|
|
const qualifiedRatio = ref<string>('0');
|
|
const range = ref<[number, number] | null>(null);
|
|
import { formatDate } from '~/src/utils/form/rule';
|
|
const qualifiedOrNotList = ref<{ label: string; value: string }[]>([
|
|
{ label: '合格', value: '0' },
|
|
{ label: '不合格', value: '1' }
|
|
]);
|
|
const machineId = ref<number | null>(null);
|
|
const data = ref<enamellingProcessCheckRecord.TableList[]>([]);
|
|
|
|
const columns: Ref<DataTableColumns<enamellingProcessCheckRecord.TableList>> = ref([
|
|
{
|
|
title: '序号',
|
|
key: 'index',
|
|
align: 'center',
|
|
width: 70,
|
|
render: (_row, index) => (searchForm.value.pageNum - 1) * searchForm.value.pageSize + index + 1
|
|
},
|
|
// {
|
|
// title: '工单类型',
|
|
// key: 'workOrdeType',
|
|
// align: 'center',
|
|
// width: 100,
|
|
// render: row => {
|
|
// return row.workOrdeType === '0' ? '金属' : '板材';
|
|
// }
|
|
// },
|
|
{
|
|
title: '机台',
|
|
key: 'deviceName',
|
|
align: 'center',
|
|
width: 100
|
|
},
|
|
// {
|
|
// title: '轴号',
|
|
// key: 'axisNumber',
|
|
// align: 'center',
|
|
// width: 100
|
|
// },
|
|
{
|
|
title: '订单类型',
|
|
key: 'orderType',
|
|
width: 100,
|
|
render: row => {
|
|
return row.orderType === '0' ? '客户订单' : '备库订单';
|
|
}
|
|
},
|
|
{
|
|
title: '订单编号',
|
|
key: 'orderNumber',
|
|
align: 'center',
|
|
width: 140,
|
|
ellipsis: {
|
|
tooltip: true
|
|
}
|
|
},
|
|
{
|
|
title: '客户',
|
|
key: 'clientName',
|
|
align: 'center',
|
|
width: 140,
|
|
ellipsis: {
|
|
tooltip: true
|
|
}
|
|
},
|
|
// {
|
|
// title: '料号',
|
|
// key: 'partNumber',
|
|
// align: 'center',
|
|
// width: 140,
|
|
// ellipsis: {
|
|
// tooltip: true
|
|
// }
|
|
// },
|
|
{
|
|
title: '批号',
|
|
key: 'batchNumber',
|
|
align: 'center',
|
|
width: 180
|
|
},
|
|
{
|
|
title: '生产工单号',
|
|
key: 'generateWorkOrderNumber',
|
|
align: 'center',
|
|
width: 140,
|
|
ellipsis: {
|
|
tooltip: true
|
|
}
|
|
},
|
|
{
|
|
title: '产品型号',
|
|
key: 'productModel',
|
|
align: 'center',
|
|
width: 160
|
|
},
|
|
{
|
|
title: '产品规格',
|
|
key: 'productSpecifications',
|
|
align: 'center',
|
|
width: 160
|
|
},
|
|
{
|
|
title: '日期',
|
|
key: 'createTime',
|
|
align: 'center',
|
|
width: 180
|
|
},
|
|
{
|
|
title: '质检人',
|
|
key: 'createBy',
|
|
align: 'center',
|
|
width: 100
|
|
},
|
|
{
|
|
title: '检测项',
|
|
key: 'attr2',
|
|
align: 'center',
|
|
width: 180
|
|
},
|
|
{
|
|
title: '是否合格',
|
|
key: 'qualifiedOrNot',
|
|
align: 'center',
|
|
width: 100,
|
|
render: row => <n-tag type={row.attr1 === '0' ? 'success' : 'error'}>{row.attr1 === '0' ? '合格' : '不合格'}</n-tag>
|
|
},
|
|
{
|
|
title: '缺陷项',
|
|
key: '',
|
|
align: 'center',
|
|
width: 180,
|
|
render: row => {
|
|
let defectName = '';
|
|
if (row.qcDefectList) {
|
|
row.qcDefectList.forEach(item => {
|
|
defectName += `${item.defectName},`;
|
|
});
|
|
defectName = defectName.slice(0, -1);
|
|
}
|
|
return defectName;
|
|
}
|
|
}
|
|
]);
|
|
|
|
function search() {
|
|
if (range.value !== null) {
|
|
searchForm.value.params.beginTime = formatDate(new Date(range.value[0]), 'yyyy-MM-dd');
|
|
searchForm.value.params.endTime = formatDate(new Date(range.value[1]), 'yyyy-MM-dd');
|
|
} else {
|
|
searchForm.value.params.beginTime = null;
|
|
searchForm.value.params.endTime = null;
|
|
}
|
|
init();
|
|
}
|
|
function reset() {
|
|
searchForm.value = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
generateWorkOrderNumber: '',
|
|
orderNumber: '',
|
|
attr1: null,
|
|
deviceName: null,
|
|
batchNumber: '',
|
|
productSpecifications: '',
|
|
defectId: null,
|
|
params: {
|
|
beginTime: null,
|
|
endTime: null
|
|
}
|
|
};
|
|
range.value = null;
|
|
init();
|
|
}
|
|
|
|
function getList() {
|
|
getWorkbenchEnamellingList({ pageSize: 999 }).then(res => {
|
|
if (res.code === 200) {
|
|
res.rows.forEach((item: any) => {
|
|
machineList.value.push({
|
|
label: item.equipmentCode,
|
|
value: item.id
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
getQcDefect({ defectClassificationId: '3' }).then(res => {
|
|
if (res.code === 200) {
|
|
res.rows.forEach((item: any) => {
|
|
defectList.value.push({
|
|
label: item.defectName,
|
|
value: item.defectId
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
startLoading();
|
|
getQcEnamelProcessRecordList(searchForm.value).then(res => {
|
|
endLoading();
|
|
if (res.code === 200) {
|
|
data.value = res.rows;
|
|
searchForm.value.total = res.total;
|
|
const belowStandard = res.belowStandard || 0;
|
|
qualified.value = (searchForm.value.total - belowStandard).toString();
|
|
noQualified.value = belowStandard;
|
|
if (Number(qualified.value) === 0 || Number(searchForm.value.total) === 0) {
|
|
qualifiedRatio.value = '0%';
|
|
return;
|
|
}
|
|
qualifiedRatio.value = `${((Number(qualified.value) / Number(searchForm.value.total)) * 100).toFixed(2)}%`;
|
|
}
|
|
});
|
|
}
|
|
watch(
|
|
() => searchForm.value.attr1,
|
|
newValue => {
|
|
if (newValue) searchForm.value.defectId = null;
|
|
}
|
|
);
|
|
onMounted(() => {
|
|
init();
|
|
getList();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.n-data-table-td) {
|
|
text-align: center;
|
|
}
|
|
|
|
:deep(.n-space) {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
:deep(.n-data-table .n-data-table-th .n-data-table-th__title-wrapper) {
|
|
text-align: center;
|
|
}
|
|
|
|
:deep(.n-input__input-el) {
|
|
color: black !important;
|
|
}
|
|
</style>
|