Skip to content

Q
qr-consistency-vue3
Commit 4e2687b0 authored by yanzhengyang's avatar yanzhengyang
Browse files
Options

feat(CCAP编制任务处理):关键工序处理、填写、审核、批准、查看

parent 9086e9b2
Show whitespace changes
Inline Side-by-side
Showing with 1426 additions and 0 deletions
src/views/controlPlan/CCAPControlPlan/CCAPCompileTaskProcessing/keyProcessFill.vue 0 → 100644
View file @ 4e2687b0
<template>
<div>
<div class="app-container">
<div class="top-header">
<div>
<el-button class="btn-B" @click="handleBack">
返回Back
</el-button>
<el-text style="margin-left: 20px;color: black">
事业部:<span style="font-weight: 800;margin-left: 10px">奇瑞</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
车型代码:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.vehicleModelCode }}</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
车型系列:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.vehicleSeries }}</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
版本号:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.versionNo }}</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
生产地址:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.productionAddress }}</span>
</el-text>
</div>
<div>
<span v-if="activeTab === 'first'">666</span>
<span v-if="activeTab === 'second'">777</span>
<span v-if="activeTab === 'third'">888</span>
<span v-if="activeTab === 'four'">999</span>
</div>
</div>
<div class="component-selector">
<el-steps :active="stepActive" align-center style="margin-top: 20px">
<el-step
v-for="(item,index) in stepTitleDesc"
:key="index" :title="item.title"
:description="item.headText + item.desc + item.deadText + (item.time ? item.time : '处理中')"/>
</el-steps>
<div>
<div class="tab-components">
<div class="components-span">
<div>编制详情</div>
<div>Compilation Details</div>
</div>
<div>
<el-button class="btn-A" @click="backLog = true">
查看退回记录View Back Records
</el-button>
<el-button class="btn-A" @click="changeView">
查看变更履历View Change History
</el-button>
</div>
</div>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px" >
<el-form-item label="一级名称:">
<template #label>
<div class="el-form-label">
<div>一级名称</div>
<div>Part or Material Level 1</div>
</div>
</template>
<el-select
v-model="queryParams.partOrMaterialLevel1"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px;"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="二级名称:">
<template #label>
<div class="el-form-label">
<div>二级名称</div>
<div>Part or Material Level 2</div>
</div>
</template>
<el-input
v-model="queryParams.partOrMaterialLevel2"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item label="型号规格:">
<template #label>
<div class="el-form-label">
<div>型号规格</div>
<div>Model Specification</div>
</div>
</template>
<el-input
v-model="queryParams.modelSpecification"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="生产厂:">
<template #label>
<div class="el-form-label">
<div>{{cn.productionPlant}}</div>
<div>{{en.productionPlant}}</div>
</div>
</template>
<el-input
v-model="queryParams.manufacturer"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="3C证书编号:">
<template #label>
<div class="el-form-label">
<div>3C证书编号</div>
<div>3C Number</div>
</div>
</template>
<el-input
v-model="queryParams.cccVoluntaryCertification"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="适用车型:">
<template #label>
<div class="el-form-label">
<div>适用车型</div>
<div>Applicable Model</div>
</div>
</template>
<el-select
v-model="queryParams.applicableModel"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="检验文件编号:">
<template #label>
<div class="el-form-label">
<div>检验文件编号</div>
<div>Inspection Document Number</div>
</div>
</template>
<el-input
v-model="queryParams.inspectionDocumentNumber"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="备注:">
<template #label>
<div class="el-form-label">
<div>备注</div>
<div>Remark</div>
</div>
</template>
<el-input
v-model="queryParams.remark"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="填写状态:">
<template #label>
<div class="el-form-label">
<div>填写状态</div>
<div>Fill Status</div>
</div>
</template>
<el-select
v-model="queryParams.region"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="填写人:">
<template #label>
<div class="el-form-label">
<div>填写人</div>
<div>Create By</div>
</div>
</template>
<el-input
v-model="queryParams.createBy"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" @click="handleQuery">{{cn.search}}{{en.search}}</el-button>
<el-button class="btn-B" @click="resetQuery">{{cn.reset}}{{en.reset}}</el-button>
<!-- <el-button class="btn-A" @click="singleOpenDialog">选择用户(单选)</el-button>-->
<!-- <el-button class="btn-A" @click="openDialog">选择用户(多选)</el-button>-->
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="keyPartsListDetail" style="width: 100%" border >
<el-table-column prop="date" label="序号" align="center" width="80">
<template #header>
<div class="el-form-label">
<div>序号</div>
<div>Serial Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partOrMaterialLevel1" label="零部件一级名称" align="center" width="130">
<template #header>
<div class="el-form-label">
<div>零部件一级名称</div>
<div>Part or Material Level 1</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partOrMaterialLevel2" label="零部件二级名称" align="center" width="130">
<template #header>
<div class="el-form-label">
<div>零部件二级名称</div>
<div>Part or Material Level 2</div>
</div>
</template>
</el-table-column>
<el-table-column prop="modelSpecification" label="型号规格" align="center" width="120">
<template #header>
<div class="el-form-label">
<div>型号规格</div>
<div>Model Specification</div>
</div>
</template>
</el-table-column>
<el-table-column prop="manufacturer" label="生产厂" align="center" width="200">
<template #header>
<div class="el-form-label">
<div>{{cn.productionPlant}}</div>
<div>{{en.productionPlant}}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="cccVoluntaryCertification" label="CCC/自愿型产品认证证书编号" align="center" width="160">
<template #header>
<div class="el-form-label">
<div>CCC/自愿型产品认证证书编号</div>
<div>CCC Voluntary Certifications Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="applicableModel" label="适用车型" align="center" width="120">
<template #header>
<div class="el-form-label">
<div>适用车型</div>
<div>Applicable Model</div>
</div>
</template>
</el-table-column>
<el-table-column prop="inspectionDocumentNumber" label="检验文件编号" align="center" width="140">
<template #header>
<div class="el-form-label">
<div>检验文件编号</div>
<div>Inspection Document Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" align="center">
<template #header>
<div class="el-form-label">
<div>备注</div>
<div>Remark</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partNumber" label="零件号" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>零件号</div>
<div>Part Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="p8PostMassProductionUnit" label="P8后批量生产单位" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>P8后批量生产单位</div>
<div>P8 Post-Mass Production Unit</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partAssemblyNo" label="零件总成号" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>零件总成号</div>
<div>Part Assembly Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="professionalDepartment" label="专业部门" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>专业部门</div>
<div>Professional Department</div>
</div>
</template>
</el-table-column>
<el-table-column prop="ccCertificationMark" label="3C认证标志" align="center">
<template #header>
<div class="el-form-label">
<div>3C认证标志</div>
<div>3C Certification Mark</div>
</div>
</template>
</el-table-column>
<el-table-column prop="mainDataEntryBy" label="填写人" align="center" width="120" fixed="right">
<template #header>
<div class="el-form-label">
<div>填写人</div>
<div>Create By</div>
</div>
</template>
</el-table-column>
<el-table-column prop="mainDataEntryTime" label="填写时间" align="center" width="160" fixed="right">
<template #header>
<div class="el-form-label">
<div>填写时间</div>
<div>Create Time</div>
</div>
</template>
</el-table-column>
<el-table-column prop="mainDataEntryStatus" label="填写状态" align="center" width="120" fixed="right">
<template #header>
<div class="el-form-label">
<div>填写状态</div>
<div>Fill Status</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div style="display: flex;justify-content: right;margin-top: 20px">
<el-button class="btn-B" @click="handleBack" >
返回Back
</el-button>
</div>
</div>
</div>
<!-- 测试 -->
<!-- <select-role-->
<!-- v-if="deptList.length > 0"-->
<!-- v-model="selectRole"-->
<!-- :dept-list="deptList"-->
<!-- name-list-key="name"-->
<!-- name-key="name"-->
<!-- name-id-key="id"-->
<!-- dept-key="dept"-->
<!-- :selection-mode="selectType"-->
<!-- @submit="handleSelectionSubmit"-->
<!-- @close="() => selectRole = false"-->
<!-- />-->
<!-- 查看退回记录 -->
<el-dialog v-model="backLog" title="退回记录">
<el-table :data="gridData" border>
<el-table-column property="date" label="序号" width="60" />
<el-table-column property="name" label="处理人" width="200" />
<el-table-column property="address" label="处理时间" width="200"/>
<el-table-column label="退回意见" />
</el-table>
</el-dialog>
</div>
</template>
<script setup>
import {useRoute} from "vue-router";
import SelectRole from "@/components/SelectRole/index.vue"
import cn from '@/locales/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index/cn.json';
import en from '@/locales/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index/en.json';
import {getCCAPPlanDescriptions,getCCAPPlanKeyList} from '@/api/CCAPControlPlanManagement/view.js'
const { proxy } = getCurrentInstance();
import { ref, getCurrentInstance } from 'vue'
const route = useRoute()
const total = ref(0)
const loading = ref(true)
// 接收路由参数
const id = proxy.$route.query.id
console.log("controlPlanId",id)
console.log("controlPlanId",typeof id)
const activeTab = ref('CCAP_KEY_PARTS_TASK') // 默认激活第一个标签页
console.log("taskType",activeTab.value)
//大数据列表
const formList = ref([])
//descriptions数据列表
const descriptionsList = ref([])
//审批数据列表
const stepList = ref([])
//关键零部件列表
const keyPartsList = ref([])
//关键零部件详细数据列表
const keyPartsListDetail = ref([])
if(route.query.tab){
activeTab.value = route.query.tab
}
const stepActive = ref(2)
const stepTitleDesc =ref([
{title:'INITIATE',headText:'(发起人: ',desc:'',deadText:' ) ',time:''},
{title:'FILLING',headText:'(编制负责人: ',desc:'',deadText:' ) ',time:''},
{title:'FINAL_CONFIRM',headText:'(审核人: ',desc:'',deadText:' ) ',time:''},
{title:'REVIEW',headText:'(批准人: ',desc:'',deadText:' ) ',time:''},
{title:'APPROVE',headText:'(确认人: ',desc:'',deadText:' ) ',time:''},
])
// 描述和审批数据
const descriptionsData = ref({
controlPlanId:id,
taskType:activeTab.value
})
// 查询参数定义方式
const queryParams = ref({
pageNum: 1,
pageSize: 10,
controlPlanId:id,
partOrMaterialLevel1:null,
partOrMaterialLevel2:null,
modelSpecification:null,
manufacturer:null,
cccVoluntaryCertification:null,
applicableModel:null,
inspectionDocumentNumber:null,
remark:null,
partNumber:null,
p8PostMassProductionUnit:null,
partAssemblyNo:null,
professionalDepartment:null,
ccCertificationMark:null,
mainDataEntryBy:null,
mainDataEntryStatus:null
})
const selectRole = ref(false)
const selectType = ref('')
//多选
const openDialog = () => {
selectRole.value = true;// 打开对话框
selectType.value = 'multiple';
};
//单选
const singleOpenDialog = () => {
selectRole.value = true;// 打开对话框
selectType.value = 'single'
};
const handleSelectionSubmit = (selectedItems) => {
console.log('已选中的项:', selectedItems); // 处理已选择的用户
};
function getFrom() {
getCCAPPlanDescriptions(descriptionsData.value).then(res => {
formList.value = res.data
descriptionsList.value = formList.value.compilationTaskDetail
stepList.value = formList.value.nodeRecords
// console.log("666",formList.value)
// console.log("777",descriptionsList.value)
// console.log("888",stepList.value)
})
}
function getList(){
loading.value = true
getCCAPPlanKeyList(queryParams.value).then(res => {
keyPartsList.value = res.data
keyPartsListDetail.value = keyPartsList.value.keyPartsDetailDTOS
// console.log("963",keyPartsList.value)
// console.log("852",keyPartsListDetail.value)
})
loading.value = false
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getFrom();
}
/** 重置按钮操作 */
function resetQuery() {
queryParams.value = {
pageNum: 1,
pageSize: 10,
controlPlanId:id,
partOrMaterialLevel1: null,
partOrMaterialLevel2: null,
modelSpecification: null,
manufacturer: null,
cccVoluntaryCertification: null,
applicableModel: null,
inspectionDocumentNumber: null,
remark: null,
partNumber: null,
p8PostMassProductionUnit: null,
partAssemblyNo: null,
professionalDepartment: null,
ccCertificationMark: null,
mainDataEntryBy: null,
partNumberEntryBy: null,
partNumberConfirmationBy: null,
inspectionDocumentEntryBy: null
}
handleQuery()
}
const handleBack = () => {
proxy.$router.push({ path: '/control/CCAPControlPlan/CCAPControlPlanIndex'});
}
const changeView = () => {
proxy.$router.push({ path: '/control/CCAPControlPlan/CCAPControlPlanChange',query: { id:id,tab: activeTab.value }})
}
const backLog = ref(false)
onMounted(() => {
getFrom();
getList();
})
</script>
<style scoped lang="scss">
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.tab-components{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
.components-span{
border-left: 5px solid #409eff;
padding-left: 5px;
font-weight: 800;
color: #409eff;
text-align: center;
}
}
.tab-header-label{
display: flex;
flex-direction: column;
align-items: center;
}
.el-form-label{
display: flex;
flex-direction: column;
align-items: center;
line-height: 15px;
}
.dialog-box{
display: flex;
justify-content: space-around;
align-items: center;
.dialog-box-left{
border: 1px solid #f4f4f9;
width: 320px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
.demo-collapse{
width: 100%;
background-color: white;
}
}
.dialog-box-right{
border: 1px solid #f4f4f9;
width: 320px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
.box-right-header{
width: 100%;
height: 65px;
background-color: #f4f4f9;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
}
.box-right-content{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.content-item{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
}
}
}
</style>
src/views/controlPlan/CCAPControlPlan/CCAPCompileTaskProcessing/keyProcessReview.vue 0 → 100644
View file @ 4e2687b0
<template>
<div>
<div class="app-container">
<div class="top-header">
<div>
<el-button class="btn-B" @click="handleBack">
返回Back
</el-button>
<el-text style="margin-left: 20px;color: black">
事业部:<span style="font-weight: 800;margin-left: 10px">奇瑞</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
车型代码:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.vehicleModelCode }}</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
车型系列:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.vehicleSeries }}</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
版本号:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.versionNo }}</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
生产地址:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.productionAddress }}</span>
</el-text>
</div>
<div>
<span v-if="activeTab === 'first'">666</span>
<span v-if="activeTab === 'second'">777</span>
<span v-if="activeTab === 'third'">888</span>
<span v-if="activeTab === 'four'">999</span>
</div>
</div>
<div class="component-selector">
<el-steps :active="stepActive" align-center style="margin-top: 20px">
<el-step
v-for="(item,index) in stepTitleDesc"
:key="index" :title="item.title"
:description="item.headText + item.desc + item.deadText + (item.time ? item.time : '处理中')"/>
</el-steps>
<div>
<div class="tab-components">
<div class="components-span">
<div>编制详情</div>
<div>Compilation Details</div>
</div>
<div>
<el-button class="btn-A" @click="backLog = true">
查看退回记录View Back Records
</el-button>
<el-button class="btn-A" @click="changeView">
查看变更履历View Change History
</el-button>
</div>
</div>
<el-descriptions border :column="4" style="margin-top: 20px">
<el-descriptions-item label="文件编号:" label-align="right" min-width="120">
<template #label>
<div class="el-form-label">
<div>文件编号</div>
<div>File Number</div>
</div>
</template>
{{ descriptionsList.fileNo }}
</el-descriptions-item>
<el-descriptions-item label="清单版本号:" label-align="right" min-width="120">
<template #label>
<div class="el-form-label">
<div>清单版本号</div>
<div>List Version Number</div>
</div>
</template>
{{ descriptionsList.versionNo }}
</el-descriptions-item>
<el-descriptions-item label="修订日期:" label-align="right" min-width="120">
<template #label>
<div class="el-form-label">
<div>{{cn.revisionDate}}</div>
<div>{{en.revisionDate}}</div>
</div>
</template>
{{ descriptionsList.revisionDate }}
</el-descriptions-item>
<el-descriptions-item label="编制/日期:" label-align="right" min-width="120">
<template #label>
<div class="el-form-label">
<div>编制/日期</div>
<div>Compilation/Date</div>
</div>
</template>
{{ descriptionsList.compilationDeadline }}
</el-descriptions-item>
<el-descriptions-item label="车型代码:" label-align="right">
<template #label>
<div class="el-form-label">
<div>{{cn.vehicleTypeCode}}</div>
<div>{{en.vehicleTypeCode}}</div>
</div>
</template>
{{ descriptionsList.vehicleModelCode }}
</el-descriptions-item>
<el-descriptions-item label="车型系列名称:" label-align="right">
<template #label>
<div class="el-form-label">
<div>{{cn.vehicleTypeSeries}}</div>
<div>{{en.vehicleTypeSeries}}</div>
</div>
</template>
{{ descriptionsList.vehicleSeries }}
</el-descriptions-item>
<el-descriptions-item label=""></el-descriptions-item>
<el-descriptions-item label="审核/日期:" label-align="right">
<template #label>
<div class="el-form-label">
<div>审核/日期</div>
<div>Audit/Date</div>
</div>
</template>
{{ descriptionsList.auditDate }}
</el-descriptions-item>
<el-descriptions-item label="联系人:" label-align="right">
<template #label>
<div class="el-form-label">
<div>联系人</div>
<div>Contact Person</div>
</div>
</template>
{{descriptionsList.chargeUserName}}
</el-descriptions-item>
<el-descriptions-item label="联系部门:" label-align="right">
<template #label>
<div class="el-form-label">
<div>联系部门</div>
<div>Contact Department</div>
</div>
</template>
{{descriptionsList.chargeDeptName}}
</el-descriptions-item>
<el-descriptions-item label="联系电话:" label-align="right">
<template #label>
<div class="el-form-label">
<div>联系电话</div>
<div>Contact Phone</div>
</div>
</template>
{{ descriptionsList.chargeUserPhone }}
</el-descriptions-item>
<el-descriptions-item label="批准/日期:" label-align="right">
<template #label>
<div class="el-form-label">
<div>批准/日期</div>
<div>Approval/Date</div>
</div>
</template>
{{ descriptionsList.approvalDate }}
</el-descriptions-item>
<el-descriptions-item label="生产厂:" label-align="right">
<template #label>
<div class="el-form-label">
<div>{{cn.productionPlant}}</div>
<div>{{en.productionPlant}}</div>
</div>
</template>
{{ descriptionsList.productionFactory }}
</el-descriptions-item>
<el-descriptions-item label="生产地址:" label-align="right">
<template #label>
<div class="el-form-label">
<div>{{cn.productionAddress}}</div>
<div>{{en.productionAddress}}</div>
</div>
</template>
{{ descriptionsList.productionAddress }}
</el-descriptions-item>
<el-descriptions-item label="生产情况:" label-align="right">
<template #label>
<div class="el-form-label">
<div>{{cn.productionSituation}}</div>
<div>{{en.productionSituation}}</div>
</div>
</template>
{{ descriptionsList.productionStatus }}
</el-descriptions-item>
<el-descriptions-item label="清单编号:" label-align="right">
<template #label>
<div class="el-form-label">
<div>清单编号</div>
<div>List Number</div>
</div>
</template>
{{ descriptionsList.noTimestamp }}
</el-descriptions-item>
<el-descriptions-item label="系列车型型号:" label-align="right" >
<template #label>
<div class="el-form-label">
<div>系列车型型号</div>
<div>Series Car Models</div>
</div>
</template>
{{ descriptionsList.seriesCarModels }}
</el-descriptions-item>
</el-descriptions>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px" >
<el-form-item label="一级名称:">
<template #label>
<div class="el-form-label">
<div>一级名称</div>
<div>Part or Material Level 1</div>
</div>
</template>
<el-select
v-model="queryParams.partOrMaterialLevel1"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px;"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="二级名称:">
<template #label>
<div class="el-form-label">
<div>二级名称</div>
<div>Part or Material Level 2</div>
</div>
</template>
<el-input
v-model="queryParams.partOrMaterialLevel2"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item label="型号规格:">
<template #label>
<div class="el-form-label">
<div>型号规格</div>
<div>Model Specification</div>
</div>
</template>
<el-input
v-model="queryParams.modelSpecification"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="生产厂:">
<template #label>
<div class="el-form-label">
<div>{{cn.productionPlant}}</div>
<div>{{en.productionPlant}}</div>
</div>
</template>
<el-input
v-model="queryParams.manufacturer"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="3C证书编号:">
<template #label>
<div class="el-form-label">
<div>3C证书编号</div>
<div>3C Number</div>
</div>
</template>
<el-input
v-model="queryParams.cccVoluntaryCertification"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="适用车型:">
<template #label>
<div class="el-form-label">
<div>适用车型</div>
<div>Applicable Model</div>
</div>
</template>
<el-select
v-model="queryParams.applicableModel"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="检验文件编号:">
<template #label>
<div class="el-form-label">
<div>检验文件编号</div>
<div>Inspection Document Number</div>
</div>
</template>
<el-input
v-model="queryParams.inspectionDocumentNumber"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="备注:">
<template #label>
<div class="el-form-label">
<div>备注</div>
<div>Remark</div>
</div>
</template>
<el-input
v-model="queryParams.remark"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="零件号:">
<template #label>
<div class="el-form-label">
<div>零件号</div>
<div>Part Number</div>
</div>
</template>
<el-input
v-model="queryParams.partNumber"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="P8后批量生产单位:">
<template #label>
<div class="el-form-label">
<div>P8后批量生产单位</div>
<div>P8 Post-Mass Production Unit</div>
</div>
</template>
<el-input
v-model="queryParams.p8PostMassProductionUnit"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="零件总成号:">
<template #label>
<div class="el-form-label">
<div>零件总成号</div>
<div>Part Assembly Number</div>
</div>
</template>
<el-input
v-model="queryParams.partAssemblyNo"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="专业部门:">
<template #label>
<div class="el-form-label">
<div>专业部门</div>
<div>Professional Department</div>
</div>
</template>
<el-select
v-model="queryParams.professionalDepartment"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="3C认证标志:">
<template #label>
<div class="el-form-label">
<div>3C认证标志</div>
<div>3C Certification Mark</div>
</div>
</template>
<el-input
v-model="queryParams.ccCertificationMark"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item label="填写状态:">
<template #label>
<div class="el-form-label">
<div>填写状态</div>
<div>Fill Status</div>
</div>
</template>
<el-select
v-model="queryParams.region"
:placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
clearable
style="width: 200px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="填写人:">
<template #label>
<div class="el-form-label">
<div>填写人</div>
<div>Create By</div>
</div>
</template>
<el-input
v-model="queryParams.createBy"
:placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
clearable
style="width: 200px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" @click="handleQuery">{{cn.search}}{{en.search}}</el-button>
<el-button class="btn-B" @click="resetQuery">{{cn.reset}}{{en.reset}}</el-button>
<!-- <el-button class="btn-A" @click="singleOpenDialog">选择用户(单选)</el-button>-->
<!-- <el-button class="btn-A" @click="openDialog">选择用户(多选)</el-button>-->
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="keyPartsListDetail" style="width: 100%" border >
<el-table-column prop="date" label="序号" align="center" width="80">
<template #header>
<div class="el-form-label">
<div>序号</div>
<div>Serial Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partOrMaterialLevel1" label="零部件一级名称" align="center" width="130">
<template #header>
<div class="el-form-label">
<div>零部件一级名称</div>
<div>Part or Material Level 1</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partOrMaterialLevel2" label="零部件二级名称" align="center" width="130">
<template #header>
<div class="el-form-label">
<div>零部件二级名称</div>
<div>Part or Material Level 2</div>
</div>
</template>
</el-table-column>
<el-table-column prop="modelSpecification" label="型号规格" align="center" width="120">
<template #header>
<div class="el-form-label">
<div>型号规格</div>
<div>Model Specification</div>
</div>
</template>
</el-table-column>
<el-table-column prop="manufacturer" label="生产厂" align="center" width="200">
<template #header>
<div class="el-form-label">
<div>{{cn.productionPlant}}</div>
<div>{{en.productionPlant}}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="cccVoluntaryCertification" label="CCC/自愿型产品认证证书编号" align="center" width="160">
<template #header>
<div class="el-form-label">
<div>CCC/自愿型产品认证证书编号</div>
<div>CCC Voluntary Certifications Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="applicableModel" label="适用车型" align="center" width="120">
<template #header>
<div class="el-form-label">
<div>适用车型</div>
<div>Applicable Model</div>
</div>
</template>
</el-table-column>
<el-table-column prop="inspectionDocumentNumber" label="检验文件编号" align="center" width="140">
<template #header>
<div class="el-form-label">
<div>检验文件编号</div>
<div>Inspection Document Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" align="center">
<template #header>
<div class="el-form-label">
<div>备注</div>
<div>Remark</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partNumber" label="零件号" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>零件号</div>
<div>Part Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="p8PostMassProductionUnit" label="P8后批量生产单位" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>P8后批量生产单位</div>
<div>P8 Post-Mass Production Unit</div>
</div>
</template>
</el-table-column>
<el-table-column prop="partAssemblyNo" label="零件总成号" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>零件总成号</div>
<div>Part Assembly Number</div>
</div>
</template>
</el-table-column>
<el-table-column prop="professionalDepartment" label="专业部门" align="center" width="90">
<template #header>
<div class="el-form-label">
<div>专业部门</div>
<div>Professional Department</div>
</div>
</template>
</el-table-column>
<el-table-column prop="ccCertificationMark" label="3C认证标志" align="center">
<template #header>
<div class="el-form-label">
<div>3C认证标志</div>
<div>3C Certification Mark</div>
</div>
</template>
</el-table-column>
<el-table-column prop="mainDataEntryBy" label="填写人" align="center" width="120" fixed="right">
<template #header>
<div class="el-form-label">
<div>填写人</div>
<div>Create By</div>
</div>
</template>
</el-table-column>
<el-table-column prop="mainDataEntryTime" label="填写时间" align="center" width="160" fixed="right">
<template #header>
<div class="el-form-label">
<div>填写时间</div>
<div>Create Time</div>
</div>
</template>
</el-table-column>
<el-table-column prop="mainDataEntryStatus" label="填写状态" align="center" width="120" fixed="right">
<template #header>
<div class="el-form-label">
<div>填写状态</div>
<div>Fill Status</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div style="display: flex;justify-content: right;margin-top: 20px">
<el-button class="btn-B" @click="handleBack" >
返回Back
</el-button>
</div>
</div>
</div>
<!-- 测试 -->
<!-- <select-role-->
<!-- v-if="deptList.length > 0"-->
<!-- v-model="selectRole"-->
<!-- :dept-list="deptList"-->
<!-- name-list-key="name"-->
<!-- name-key="name"-->
<!-- name-id-key="id"-->
<!-- dept-key="dept"-->
<!-- :selection-mode="selectType"-->
<!-- @submit="handleSelectionSubmit"-->
<!-- @close="() => selectRole = false"-->
<!-- />-->
<!-- 查看退回记录 -->
<el-dialog v-model="backLog" title="退回记录">
<el-table :data="gridData" border>
<el-table-column property="date" label="序号" width="60" />
<el-table-column property="name" label="处理人" width="200" />
<el-table-column property="address" label="处理时间" width="200"/>
<el-table-column label="退回意见" />
</el-table>
</el-dialog>
</div>
</template>
<script setup>
import {useRoute} from "vue-router";
import SelectRole from "@/components/SelectRole/index.vue"
import cn from '@/locales/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index/cn.json';
import en from '@/locales/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index/en.json';
import {getCCAPPlanDescriptions,getCCAPPlanKeyList} from '@/api/CCAPControlPlanManagement/view.js'
const { proxy } = getCurrentInstance();
import { ref, getCurrentInstance } from 'vue'
const route = useRoute()
const total = ref(0)
const loading = ref(true)
// 接收路由参数
const id = proxy.$route.query.id
console.log("controlPlanId",id)
console.log("controlPlanId",typeof id)
const activeTab = ref('CCAP_KEY_PARTS_TASK') // 默认激活第一个标签页
console.log("taskType",activeTab.value)
//大数据列表
const formList = ref([])
//descriptions数据列表
const descriptionsList = ref([])
//审批数据列表
const stepList = ref([])
//关键零部件列表
const keyPartsList = ref([])
//关键零部件详细数据列表
const keyPartsListDetail = ref([])
if(route.query.tab){
activeTab.value = route.query.tab
}
const stepActive = ref(2)
const stepTitleDesc =ref([
{title:'INITIATE',headText:'(发起人: ',desc:'',deadText:' ) ',time:''},
{title:'FILLING',headText:'(编制负责人: ',desc:'',deadText:' ) ',time:''},
{title:'FINAL_CONFIRM',headText:'(审核人: ',desc:'',deadText:' ) ',time:''},
{title:'REVIEW',headText:'(批准人: ',desc:'',deadText:' ) ',time:''},
{title:'APPROVE',headText:'(确认人: ',desc:'',deadText:' ) ',time:''},
])
// 描述和审批数据
const descriptionsData = ref({
controlPlanId:id,
taskType:activeTab.value
})
// 查询参数定义方式
const queryParams = ref({
pageNum: 1,
pageSize: 10,
controlPlanId:id,
partOrMaterialLevel1:null,
partOrMaterialLevel2:null,
modelSpecification:null,
manufacturer:null,
cccVoluntaryCertification:null,
applicableModel:null,
inspectionDocumentNumber:null,
remark:null,
partNumber:null,
p8PostMassProductionUnit:null,
partAssemblyNo:null,
professionalDepartment:null,
ccCertificationMark:null,
mainDataEntryBy:null,
mainDataEntryStatus:null
})
const selectRole = ref(false)
const selectType = ref('')
//多选
const openDialog = () => {
selectRole.value = true;// 打开对话框
selectType.value = 'multiple';
};
//单选
const singleOpenDialog = () => {
selectRole.value = true;// 打开对话框
selectType.value = 'single'
};
const handleSelectionSubmit = (selectedItems) => {
console.log('已选中的项:', selectedItems); // 处理已选择的用户
};
function getFrom() {
getCCAPPlanDescriptions(descriptionsData.value).then(res => {
formList.value = res.data
descriptionsList.value = formList.value.compilationTaskDetail
stepList.value = formList.value.nodeRecords
// console.log("666",formList.value)
// console.log("777",descriptionsList.value)
// console.log("888",stepList.value)
})
}
function getList(){
loading.value = true
getCCAPPlanKeyList(queryParams.value).then(res => {
keyPartsList.value = res.data
keyPartsListDetail.value = keyPartsList.value.keyPartsDetailDTOS
// console.log("963",keyPartsList.value)
// console.log("852",keyPartsListDetail.value)
})
loading.value = false
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getFrom();
}
/** 重置按钮操作 */
function resetQuery() {
queryParams.value = {
pageNum: 1,
pageSize: 10,
controlPlanId:id,
partOrMaterialLevel1: null,
partOrMaterialLevel2: null,
modelSpecification: null,
manufacturer: null,
cccVoluntaryCertification: null,
applicableModel: null,
inspectionDocumentNumber: null,
remark: null,
partNumber: null,
p8PostMassProductionUnit: null,
partAssemblyNo: null,
professionalDepartment: null,
ccCertificationMark: null,
mainDataEntryBy: null,
partNumberEntryBy: null,
partNumberConfirmationBy: null,
inspectionDocumentEntryBy: null
}
handleQuery()
}
const handleBack = () => {
proxy.$router.push({ path: '/control/CCAPControlPlan/CCAPControlPlanIndex'});
}
const changeView = () => {
proxy.$router.push({ path: '/control/CCAPControlPlan/CCAPControlPlanChange',query: { id:id,tab: activeTab.value }})
}
const backLog = ref(false)
onMounted(() => {
getFrom();
getList();
})
</script>
<style scoped lang="scss">
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.tab-components{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
.components-span{
border-left: 5px solid #409eff;
padding-left: 5px;
font-weight: 800;
color: #409eff;
text-align: center;
}
}
.tab-header-label{
display: flex;
flex-direction: column;
align-items: center;
}
.el-form-label{
display: flex;
flex-direction: column;
align-items: center;
line-height: 15px;
}
.dialog-box{
display: flex;
justify-content: space-around;
align-items: center;
.dialog-box-left{
border: 1px solid #f4f4f9;
width: 320px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
.demo-collapse{
width: 100%;
background-color: white;
}
}
.dialog-box-right{
border: 1px solid #f4f4f9;
width: 320px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
.box-right-header{
width: 100%;
height: 65px;
background-color: #f4f4f9;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
}
.box-right-content{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.content-item{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment