Skip to content

Q
qr-consistency-vue3
Commit 993d4ace authored by yanzhengyang's avatar yanzhengyang
Browse files
Options

feat:变更履历初版

parent f79565f8
Hide whitespace changes
Inline Side-by-side
Showing with 478 additions and 0 deletions
src/views/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/change.vue 0 → 100644
View file @ 993d4ace
<template>
<div class="app-container">
<div class="top-header">
<div>
<el-button class="back-button" @click="handleBack">返回</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">ZYE03</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
车型系列:<span style="font-weight: 800;margin-left: 10px">CJ1A</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
版本号:<span style="font-weight: 800;margin-left: 10px">A1</span>
</el-text>
<el-text style="margin-left: 20px;color: black">
生产地址:<span style="font-weight: 800;margin-left: 10px">123456789</span>
</el-text>
</div>
<div>
已编制
</div>
</div>
<div class="component-selector">
<el-tabs v-model="activeTab" class="demo-tabs">
<el-tab-pane label="关键零部件清单" name="first">
<el-steps :active="2" align-center style="margin-top: 20px">
<el-step title="发起编制任务" description="（发起人： 杨帆）2025-02-06 12:00:00" />
<el-step title="填写" description="Some description" />
<el-step title="审核" description="Some description" />
<el-step title="批准" description="Some description" />
<el-step title="最终确认" description="Some description" />
</el-steps>
<div>
<div class="tab-components">
<span class="components-span">编制详情</span>
</div>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px" >
<el-form-item label="编制/变更时间:">
<el-date-picker
type="date"
placeholder="选择日期"/>
</el-form-item>
<el-form-item label="编制/变更时间:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="变更人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="变更详细内容序号:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" icon="Search" @click="handleQuery">搜索</el-button>
<el-button class="btn-B" icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%" border >
<el-table-column prop="date" label="序号" align="center" width="60"/>
<el-table-column prop="name" label="编制/变更时间" align="center" width="180"/>
<el-table-column prop="address" label="编制/变更说明" align="center" />
<el-table-column prop="address" label="变更前版本" align="center" width="180"/>
<el-table-column prop="address" label="变更后版本" align="center" width="180"/>
<el-table-column prop="address" label="变更人" align="center" width="180"/>
<el-table-column prop="address" label="变更详细内容序号" align="center" width="220"/>
</el-table>
</div>
<div>
<div class="tab-components">
<span class="components-span">变更详细内容</span>
</div>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px" >
<el-form-item label="零部件二级名称:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="型号规格:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="生产人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="3C证书编号:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="适用车型:">
<el-select
v-model="queryParams.region"
placeholder="请选择"
clearable
style="width: 180px;"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="检验文件编号:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" icon="Search" @click="handleQuery">搜索</el-button>
<el-button class="btn-B" icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div style="display: flex;justify-content: space-between;align-items: center">
<el-table :data="tableData" style="width: 100%" border >
<el-table-column label="变更前" align="center" >
<el-table-column prop="date" label="序号" align="center" width="60"/>
<el-table-column prop="name" label="零部件二级名称" align="center" width="130"/>
<el-table-column prop="address" label="型号规格" align="center" width="130"/>
<el-table-column prop="address" label="生产厂" align="center" width="130"/>
<el-table-column prop="address" label="CCC/自愿型产品认证证书编号" align="center" width="220"/>
<el-table-column prop="address" label="适用车型" align="center" width="160"/>
<el-table-column prop="address" label="检验文件编号" align="center" width="180"/>
</el-table-column>
</el-table>
<el-table :data="tableData" style="width: 100%" border >
<el-table-column label="变更前" align="center" >
<el-table-column prop="date" label="序号" align="center" width="60"/>
<el-table-column prop="name" label="零部件二级名称" align="center" width="130"/>
<el-table-column prop="address" label="型号规格" align="center" width="130"/>
<el-table-column prop="address" label="生产厂" align="center" width="130"/>
<el-table-column prop="address" label="CCC/自愿型产品认证证书编号" align="center" width="220"/>
<el-table-column prop="address" label="适用车型" align="center" width="160"/>
<el-table-column prop="address" label="检验文件编号" align="center" width="180"/>
</el-table-column>
</el-table>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="关键工序、装配、检验过程清单" name="second">
<el-steps :active="2" align-center style="margin-top: 20px">
<el-step title="发起编制任务" description="（发起人： 杨帆）2025-02-06 12:00:00" />
<el-step title="填写" description="Some description" />
<el-step title="审核" description="Some description" />
<el-step title="批准" description="Some description" />
<el-step title="最终确认" description="Some description" />
</el-steps>
<div>
<div class="tab-components">
<span class="components-span">编制详情</span>
<el-button class="btn-A" @click="changeView">查看变更履历</el-button>
</div>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px">
<el-form-item label="名称:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="制造/装配/检验的场所:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="责任部门:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="适用车型:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="作业指导书:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="检验作业指导书:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="填写人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="确认人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="校对人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" icon="Search" @click="handleQuery">搜索</el-button>
<el-button class="btn-B" icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%" border >
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="date" label="序号" align="center" width="60"/>
<el-table-column prop="name" label="名称" align="center" />
<el-table-column prop="address" label="制造/装配/检验的场所" align="center" width="160"/>
<el-table-column prop="address" label="责任部门" align="center" width="120"/>
<el-table-column prop="address" label="适用车型" align="center" width="160" />
<el-table-column prop="address" label="填写人" align="center" width="120" fixed="right"/>
<el-table-column prop="address" label="填写时间" align="center" width="160" fixed="right"/>
<el-table-column prop="address" label="填写状态" align="center" width="120" fixed="right"/>
<el-table-column prop="address" label="确认人" align="center" width="160" fixed="right"/>
<el-table-column prop="address" label="校对人" align="center" width="160" fixed="right"/>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="COP试验喝检查表-制造" name="third">
<el-steps :active="2" align-center style="margin-top: 20px">
<el-step title="发起编制任务" description="（发起人： 杨帆）2025-02-06 12:00:00" />
<el-step title="填写" description="Some description" />
<el-step title="审核" description="Some description" />
<el-step title="批准" description="Some description" />
<el-step title="最终确认" description="Some description" />
</el-steps>
<div>
<div class="tab-components">
<span class="components-span">编制详情</span>
<el-button class="btn-A" @click="changeView">查看变更履历</el-button>
</div>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px">
<el-form-item label="项目:">
<el-select
v-model="queryParams.region"
placeholder="请选择"
clearable
style="width: 180px;"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="测量仪器和设备:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="容量:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="频次:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="试验和检查场所:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="所执行的文件名称及编号:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="责任部门:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="适用车型:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="填写人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="确认人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="校对人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" icon="Search" @click="handleQuery">搜索</el-button>
<el-button class="btn-B" icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%" border >
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="date" label="序号" align="center" width="60"/>
<el-table-column prop="name" label="项目" align="center" />
<el-table-column prop="address" label="测量仪器和设备" align="center" width="160"/>
<el-table-column prop="address" label="容量" align="center" width="80"/>
<el-table-column prop="address" label="频次" align="center" width="100" />
<el-table-column prop="address" label="试验和检查的场所" align="center" width="160"/>
<el-table-column prop="address" label="所执行的文件名称及编号" align="center" width="220"/>
<el-table-column prop="address" label="责任部门" align="center" width="120"/>
<el-table-column prop="address" label="适用车型" align="center" width="120"/>
<el-table-column prop="address" label="填写人" align="center" width="120" fixed="right"/>
<el-table-column prop="address" label="填写时间" align="center" width="160" fixed="right"/>
<el-table-column prop="address" label="填写状态" align="center" width="120" fixed="right"/>
<el-table-column prop="address" label="确认人" align="center" width="160" fixed="right"/>
<el-table-column prop="address" label="校对人" align="center" width="160" fixed="right"/>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="COP试验喝检查表-质管" name="four">
<el-steps :active="2" align-center style="margin-top: 20px">
<el-step title="发起编制任务" description="（发起人： 杨帆）2025-02-06 12:00:00" />
<el-step title="填写" description="Some description" />
<el-step title="审核" description="Some description" />
<el-step title="批准" description="Some description" />
<el-step title="最终确认" description="Some description" />
</el-steps>
<div>
<div class="tab-components">
<span class="components-span">编制详情</span>
<el-button class="btn-A" @click="changeView">查看变更履历</el-button>
</div>
<el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px">
<el-form-item label="项目:">
<el-select
v-model="queryParams.region"
placeholder="请选择"
clearable
style="width: 180px;"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="测量仪器和设备:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="容量:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="频次:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="试验和检查场所:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="所执行的文件名称及编号:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="责任部门:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="适用车型:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item label="填写人:">
<el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" icon="Search" @click="handleQuery">搜索</el-button>
<el-button class="btn-B" icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%" border >
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="date" label="序号" align="center" width="60"/>
<el-table-column prop="name" label="项目" align="center" />
<el-table-column prop="address" label="测量仪器和设备" align="center" width="160"/>
<el-table-column prop="address" label="容量" align="center" width="80"/>
<el-table-column prop="address" label="频次" align="center" width="160" />
<el-table-column prop="address" label="试验和检查的场所" align="center" width="160"/>
<el-table-column prop="address" label="所执行的文件名称及编号" align="center" width="220"/>
<el-table-column prop="address" label="责任部门" align="center" width="120"/>
<el-table-column prop="address" label="适用车型" align="center" width="120"/>
<el-table-column prop="address" label="填写人" align="center" width="120" fixed="right"/>
<el-table-column prop="address" label="填写时间" align="center" width="160" fixed="right"/>
<el-table-column prop="address" label="填写状态" align="center" width="120" fixed="right"/>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
import {useRoute} from "vue-router";
import SelectRole from "@/components/SelectRole/index.vue"
const { proxy } = getCurrentInstance();
import { ref, getCurrentInstance } from 'vue'
const route = useRoute()
const total = ref(0)
const formList = ref([])
const activeTab = ref('first') // 默认激活第一个标签页
if(route.query.tab){
activeTab.value = route.query.tab
}
const radio1 = ref('1')
const templateDetailList = ref([])
// 修改data定义方式
const queryParams = ref({
pageNum: 1,
pageSize: 10
})
watch(activeTab, (newVal) => {
queryParams.value.pageNum = 1 // 切换标签时重置页码
// getList(newVal)
})
const handlePagination = ({ page, limit }) => {
queryParams.value.pageNum = page
queryParams.value.pageSize = limit
// getList(activeTab.value)
}
// function getFrom() {
// const id = proxy.$route.query.id
// listTemplateForm(id).then(response => {
// formList.value = response.data
// if (formList.value.length > 0) {
// activeTab.value = formList.value[0].id // 默认第一个标签的id
// getList(formList.value[0].id) // 初始化加载第一个标签的数据
// }
// })
// }
// function getList(formId){
// listTemplateDetail({
// id: formId,
// pageNum: queryParams.value.pageNum,
// pageSize: queryParams.value.pageSize
// }).then(response => {
// templateDetailList.value = response.rows
// total.value = response.total
// })
// }
const handleBack = () => {
proxy.$router.push({ path: '/control/CCAPControlPlan/view'});
}
// const changeView = () => {
// proxy.$router.push({ path: '/control/CCAPControlPlan/change',query: { tab: activeTab.value }})
// }
onMounted(() => {
// getFrom();
})
</script>
<style scoped lang="scss">
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.demo-tabs {
.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;
}
}
}
.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/CCAPControlPlanManagement/view.vue
View file @ 993d4ace
...@@ -614,6 +614,7 @@ onMounted(() => { ...@@ -614,6 +614,7 @@ onMounted(() => {
.components-span{ .components-span{
border-left: 5px solid #409eff; border-left: 5px solid #409eff;
padding-left: 5px; padding-left: 5px;
font-weight: 800;
color: #409eff; color: #409eff;
} }
} }
......
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