<script setup lang="ts">
|
import { ref, onMounted, watch } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
|
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
|
import { getQualityProcedureApi, getProjectApi, getProductApi, getWorkerApi, updateQualityProcedureApi } from '@/api'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import EditInspection from '@/views/newDashboard/components/EditInspection.vue'
|
defineOptions({
|
name: 'NewDashboardView'
|
})
|
const taskTabsList = [
|
{ label: '待质检', value: 1 },
|
{ label: '已质检', value: 3 }
|
]
|
const activeTaskTab = ref(1)
|
const projectList = ref([])
|
const productList = ref([])
|
const projectIdArray = ref([])
|
const productIdArray = ref([])
|
const workerList = ref([])
|
const pageData = ref({ page: 1, pageSize: 1000 })
|
const modalObj = ref({ modalValue: false })
|
const qualityList = ref([])
|
const lookQuality = ref({})
|
const oldLookQuality = ref({})
|
const tableHeaderColor = ({ rowIndex }: any) => {
|
if (rowIndex === 0) {
|
return 'header-row-class' // 这个类名需要你自己定义
|
}
|
}
|
const changeTab = (tabObj: any) => {
|
console.log(tabObj)
|
}
|
const checkProduct = (quality: any) => {
|
lookQuality.value = { ...quality }
|
oldLookQuality.value = { ...quality }
|
modalObj.value.modalValue = true
|
}
|
const editInspection = (quality: any) => {
|
updateQualityProcedureApi(quality).then(({ code, data }: any) => {
|
if (code == 200) {
|
ElMessage.success(data)
|
queryQualityProcedure()
|
modalObj.value.modalValue = false
|
} else {
|
ElMessage.error(data)
|
}
|
})
|
}
|
//1.查询项目列表
|
const queryProject = () => {
|
getProjectApi(pageData.value).then(({ code, data }: any) => {
|
if (code == 200) {
|
projectList.value = data
|
}
|
})
|
}
|
//2.根据项目编号查询产品列表
|
const queryProduct = () => {
|
if (projectIdArray.value && projectIdArray.value.length > 0) {
|
getProductApi({ projectId: projectIdArray.value[0], ...pageData.value }).then(({ code, data }) => {
|
if (code == 200) {
|
productList.value = data
|
}
|
})
|
} else {
|
productList.value = []
|
productIdArray.value = []
|
}
|
}
|
//3.查询工序质检列表
|
const queryQualityProcedure = () => {
|
const params = { status: activeTaskTab.value, projectId: '', productId: '', ...pageData.value, keyword: '' }
|
if (Array.isArray(projectIdArray.value) && projectIdArray.value.length > 0) {
|
params.projectId = projectIdArray.value[0] + ''
|
}
|
if (Array.isArray(productIdArray.value) && productIdArray.value.length > 0) {
|
params.productId = productIdArray.value[0] + ''
|
}
|
getQualityProcedureApi(params).then(({ code, data }: any) => {
|
if (code == 200) {
|
qualityList.value = data
|
}
|
})
|
}
|
//4. 条件变化更新工序质检列表数据
|
watch(
|
[() => activeTaskTab.value, () => productIdArray.value, () => projectIdArray.value],
|
() => {
|
queryQualityProcedure()
|
},
|
{ immediate: false }
|
)
|
//5. 查询所有加工人员列表
|
const queryWorker = () => {
|
getWorkerApi(pageData.value).then(({ code, data }: any) => {
|
if (code == 200) {
|
workerList.value = data
|
}
|
})
|
}
|
//6.初始化页面数据
|
const initPage = () => {
|
queryProject()
|
queryQualityProcedure()
|
queryWorker()
|
}
|
onMounted(() => {
|
initPage()
|
})
|
</script>
|
<template>
|
<EditInspection
|
:worker-list="workerList"
|
:look-quality="lookQuality"
|
:modal-obj="modalObj"
|
:old-look-quality="oldLookQuality"
|
@edit-inspection="editInspection"
|
></EditInspection>
|
<div class="container">
|
<div class="head">
|
<div class="left"></div>
|
<div class="title">质检工作台</div>
|
<div class="right"><CurrentDateTime></CurrentDateTime></div>
|
</div>
|
<div class="statistic">
|
<div class="item">
|
<div class="img bg1"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>待检测</div>
|
<div>1</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="img bg2"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>完成数</div>
|
<div>1</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="img bg3"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>合格数</div>
|
<div class="success-number">1</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="img bg4"><img src="@/assets/images/u820.png" /></div>
|
<div class="text">
|
<div>报废数</div>
|
<div class="fail-number">0</div>
|
</div>
|
</div>
|
</div>
|
<div class="table-filter">
|
<div class="left">
|
<TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsList" @change="changeTab"></TaskTabs>
|
</div>
|
<div class="right">
|
<el-select
|
v-model="projectIdArray"
|
:teleported="false"
|
size="large"
|
:multiple-limit="1"
|
multiple
|
placeholder="项目"
|
@change="queryProduct"
|
>
|
<el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" multiple>
|
<div class="item-option">
|
<div>{{ item.id }}</div>
|
<div>{{ item.projectName }}</div>
|
</div>
|
</el-option>
|
</el-select>
|
<el-select
|
v-model="productIdArray"
|
:teleported="false"
|
size="large"
|
:multiple-limit="1"
|
multiple
|
placeholder="产品"
|
>
|
<el-option v-for="item in productList" :key="item.id" :label="item.productName" :value="item.id" multiple>
|
<div class="item-option">
|
<div>{{ item.id }}</div>
|
<div>{{ item.productName }}</div>
|
</div>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="table">
|
<el-empty v-if="qualityList.length == 0" description="暂无数据" />
|
<el-table
|
v-else
|
:data="qualityList"
|
:header-cell-class-name="tableHeaderColor"
|
row-class-name="row-bg"
|
style="width: 100%; background: transparent"
|
border
|
>
|
<el-table-column prop="workOrderId" align="center" label="工单号" />
|
<el-table-column prop="projectId" align="center" label="项目号" />
|
<el-table-column prop="productId" align="center" label="产品号" />
|
<el-table-column prop="productName" align="center" label="产品名" />
|
<el-table-column prop="procedureId" align="center" label="工序号" />
|
<el-table-column prop="procedureName" align="center" label="工序名称" />
|
<el-table-column prop="drawingNumber" align="center" label="图号" />
|
<el-table-column prop="amount" align="center" label="图号" />
|
<el-table-column prop="transferAmount" align="center" label="转移数量" />
|
<el-table-column prop="scrappedAmount" align="center" label="报废数量" />
|
<el-table-column prop="passAmount" align="center" label="合格数量" />
|
<el-table-column prop="workerName" align="center" label="加工员" />
|
<el-table-column prop="inspectionPeople" align="center" label="质检员" />
|
<el-table-column align="center" label="操作" width="120px">
|
<template #default="scope">
|
<BigButton bg-color="#00ff00" @click="checkProduct(scope.row)">质检</BigButton>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.container {
|
.head {
|
background-image: url('/header-bg.png');
|
background-position-x: center;
|
background-repeat: no-repeat;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
padding: 12px;
|
.left {
|
width: 25%;
|
}
|
.title {
|
width: 50%;
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
font-weight: 700;
|
font-style: normal;
|
font-size: 36px;
|
color: #ffffff;
|
text-align: center;
|
}
|
.right {
|
line-height: 60px;
|
background-image: url('@/assets/images/u883.png');
|
background-position-x: 0px;
|
background-position-y: 10px;
|
background-repeat: no-repeat;
|
background-size: 40px;
|
width: 25%;
|
padding-left: 60px;
|
}
|
.left,
|
.title,
|
.right {
|
margin-top: 12px;
|
}
|
}
|
.statistic {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
.item {
|
border-width: 0px;
|
width: 24%;
|
height: 144px;
|
background-color: rgba(22, 72, 173, 0.737254901960784);
|
border: none;
|
border-radius: 8px;
|
-moz-box-shadow: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
.img {
|
text-align: center;
|
display: inline-block;
|
margin: 0px 30px;
|
position: relative;
|
top: -5px;
|
width: 98px;
|
height: 98px;
|
img {
|
width: 50%;
|
position: relative;
|
top: 23px;
|
}
|
}
|
.bg1 {
|
background: url('@/assets/images/u819.png') no-repeat;
|
background-size: cover;
|
}
|
.bg2 {
|
background: url('@/assets/images/u837.png') no-repeat;
|
background-size: cover;
|
}
|
.bg3 {
|
background: url('@/assets/images/u825.png') no-repeat;
|
background-size: cover;
|
}
|
.bg4 {
|
background: url('@/assets/images/u831.png') no-repeat;
|
background-size: cover;
|
}
|
.text {
|
display: inline-block;
|
position: relative;
|
top: 25px;
|
font-size: 25px;
|
}
|
.success-number {
|
color: #00ff00;
|
}
|
.fail-number {
|
color: #ff0000;
|
}
|
}
|
}
|
.table-filter {
|
display: flex;
|
justify-content: space-between;
|
.left {
|
width: 30%;
|
margin-left: 10px;
|
}
|
.right {
|
width: 34%;
|
display: flex;
|
justify-content: space-around;
|
margin-top: 2.5vh;
|
.el-select {
|
width: 256px;
|
:deep(.el-select__wrapper) {
|
background-color: transparent !important;
|
}
|
}
|
.el-select-dropdown__item {
|
color: white;
|
}
|
.el-select-dropdown__item.is-hovering {
|
color: #fff;
|
background: transparent !important;
|
/*background: linear-gradient(*/
|
/*to right,*/
|
/*rgba(147, 250, 255, 0),*/
|
/*rgba(147, 250, 255, 0.4),*/
|
/*rgba(147, 250, 255, 0)*/
|
/*);*/
|
}
|
:deep(.el-select__popper) {
|
border: 1px solid #1ca898;
|
background: deepskyblue;
|
}
|
.item-option {
|
width: 100%;
|
display: flex;
|
flex: 1;
|
> div {
|
width: 50%;
|
text-align: center;
|
}
|
}
|
:deep(.el-select__selection .el-tag) {
|
background: transparent;
|
font-size: 16px;
|
color: white;
|
}
|
:deep(.el-icon) {
|
display: none;
|
}
|
}
|
}
|
.table {
|
margin: 20px 10px;
|
}
|
}
|
:deep(.row-bg) {
|
background-color: transparent;
|
color: white;
|
&:hover {
|
color: #181818;
|
}
|
}
|
:deep(.header-row-class) {
|
background-color: #007fff !important;
|
font-size: 20px;
|
color: white;
|
}
|
</style>
|
