style(CCAP控制计划-关键零部件、变更履历):页面样式修改

src/api/CCAPControlPlanManagement/view.js

@@ -16,3 +16,12 @@ export function getCCAPPlanKeyList(query) {
     params: query
   })
 }
+
+// 查询CCAP控制计划变更履历列表
+export function getCCAPPlanChangeList(query) {
+  return request({
+    url: '/control/ccapPlan/changeLog/list',
+    method: 'get',
+    params: query
+  })
+}

src/views/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/change.vue

@@ -44,20 +44,32 @@
                 placeholder="选择日期"/>
               </el-form-item>
               <el-form-item label="编制/变更说明:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </el-form-item>
               <el-form-item label="变更人:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </el-form-item>
               <el-form-item label="变更详细内容序号:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </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 v-loading="loading" :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" />
@@ -73,37 +85,57 @@
             </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-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </el-form-item>
               <el-form-item label="适用车型:">
                 <el-select
                   v-model="queryParams.region"
-                  placeholder="请选择"
+                  :placeholder="`${cn.pleaseChoose}/${en.pleaseChoose}`"
                   clearable
-                  style="width: 180px;"
+                  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="型号规格:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </el-form-item>
               <el-form-item label="生产厂:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </el-form-item>
               <el-form-item label="3C证书编号:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </el-form-item>
               <el-form-item label="检验文件编号:">
-                <el-input v-model="queryParams.user" placeholder="请输入" clearable style="width: 180px"/>
+                <el-input
+                  v-model="queryParams.user"
+                  :placeholder="`${cn.pleaseEnter}/${en.pleaseEnter}`"
+                  clearable
+                  style="width: 200px"/>
               </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 v-loading="loading" :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="140"/>
               <el-table-column prop="address" label="适用车型" align="center" width="160"/>
@@ -445,13 +477,17 @@
 </template>
 <script setup>
 import {useRoute} from "vue-router";
+import cn from '@/locales/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index/cn.json';
+import en from '@/locales/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index/en.json';
+import {getCCAPPlanChangeList} from '@/api/CCAPControlPlanManagement/view.js'
 
 const { proxy } = getCurrentInstance();
 import { ref, getCurrentInstance } from 'vue'
 
 const route = useRoute()
 const total = ref(0)
-const formList = ref([])
+const loading = ref()
+const changeList = ref([])
 const activeTab = ref('first') // 默认激活第一个标签页
 if(route.query.tab){
   activeTab.value = route.query.tab
@@ -471,22 +507,25 @@ const handlePagination = ({ page, limit }) => {
   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() {
+//   loading.value = true
+//   // const id = proxy.$route.query.id
+//   getCCAPPlanChangeList().then(res => {
+//     console.log("变更",res)
+//     changeList.value = res.data
+//     // if (formList.value.length > 0) {
+//     //   activeTab.value = formList.value[0].id // 默认第一个标签的id
+//     //   getList(formList.value[0].id) // 初始化加载第一个标签的数据
+//     // }
 //   })
+//   loading.value = false
 // }
 
 const handleBack = () => {
-  proxy.$router.push({ path: '/control/CCAPControlPlan/CCAPControlPlanView',query: { tab: activeTab.value }});
+  proxy.$router.go(-1)
 }
 onMounted(() => {
-  // getFrom();
+  // getList();
 })
 </script>
 

src/views/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/view.vue

@@ -11,13 +11,13 @@
             车型代码:<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">CJ1A</span>
+            车型系列:<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">A1</span>
+            版本号:<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">123456789</span>
+            生产地址:<span style="font-weight: 800;margin-left: 10px">{{ descriptionsList.productionAddress }}</span>
           </el-text>
         </div>
         <div>
@@ -172,20 +172,24 @@
                   <el-button class="btn-A" @click="openDialog">选择用户(多选)</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 v-loading="loading" :data="tableData" style="width: 100%" border >
+                <el-table-column prop="date" label="序号" align="center" width="75"/>
                 <el-table-column prop="partOrMaterialLevel1" label="零部件一级名称" align="center" width="120"/>
                 <el-table-column prop="partOrMaterialLevel2" label="零部件二级名称" align="center" width="120"/>
                 <el-table-column prop="modelSpecification" label="型号规格" align="center" width="120"/>
-                <el-table-column prop="manufacturer" label="生产厂" align="center" width="160"/>
-                <el-table-column prop="cccVoluntaryCertification" label="CCC/自愿型产品认证证书编号" align="center" width="130"/>
+                <el-table-column prop="manufacturer" label="生产厂" align="center" width="200"/>
+                <el-table-column prop="cccVoluntaryCertification" label="CCC/自愿型产品认证证书编号" align="center" width="160"/>
                 <el-table-column prop="applicableModel" label="适用车型" align="center" width="120"/>
                 <el-table-column prop="inspectionDocumentNumber" label="检验文件编号" align="center" width="140"/>
                 <el-table-column prop="remark" label="备注" align="center"/>
-                <el-table-column prop="partNumber" label="零件号" align="center"/>
-                <el-table-column prop="createBy" label="填写人" align="center"/>
-                <el-table-column prop="createTime" label="填写时间" align="center" width="160"/>
-                <el-table-column prop="address" label="填写状态" align="center"/>
+                <el-table-column prop="partNumber" label="零件号" align="center" width="90"/>
+                <el-table-column prop="p8PostMassProductionUnit" label="P8后批量生产单位" align="center" width="90"/>
+                <el-table-column prop="partAssemblyNo" label="零件总成号" align="center" width="90"/>
+                <el-table-column prop="professionalDepartment" label="专业部门" align="center" width="90"/>
+                <el-table-column prop="ccCertificationMark" label="3C认证标志" align="center"/>
+                <el-table-column prop="createBy" label="填写人" align="center" width="120" fixed="right"/>
+                <el-table-column prop="createTime" 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>
@@ -642,6 +646,7 @@ import { ref, getCurrentInstance } from 'vue'
 
 const route = useRoute()
 const total = ref(0)
+const loading = ref(true)
 //大数据列表
 const formList = ref([])
 //descriptions数据列表
@@ -658,7 +663,18 @@ const radio1 = ref('1')
 // 修改data定义方式
 const queryParams = ref({
   pageNum: 1,
-  pageSize: 10
+  pageSize: 10,
+  partOrMaterialLevel1:null,
+  partOrMaterialLevel2:null,
+  modelSpecification:null,
+  manufacturer:null,
+  cccVoluntaryCertification:null,
+  applicableModel:null,
+  inspectionDocumentNumber:null,
+  remark:null,
+  partNumber:null,
+  professionalDepartment:null,
+  ccCertificationMark:null
 })
 const selectRole = ref(false)
 const selectType = ref('')
@@ -720,6 +736,7 @@ const deptList = [
 ]
 
 function getFrom() {
+  loading.value = true
   const id = proxy.$route.query.id
   // console.log("ID",id)
   getCCAPPlanDescriptions(id).then(res => {
@@ -738,6 +755,7 @@ function getFrom() {
     keyPartsList.value = res.data
     // console.log("999",keyPartsList.value)
   })
+  loading.value = false
 }
 const handleBack = () => {
   proxy.$router.push({ path: '/control/CCAPControlPlan/CCAPControlPlanIndex'});