refactor:国际关键零部件清单模板、国际关键零部件详情页面

src/api/BaseInternationalKeyComponents/BaseInternationalKeyComponents.js

+import request from '@/utils/request'
+
+// 查询国际关键零部件清单列表
+export function listBaseInternational(query) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询国际关键零部件清单详细
+export function getBaseInternational(id) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/' + id,
+    method: 'get'
+  })
+}
+
+// 新增国际关键零部件清单
+export function addBaseInternational(data) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/add',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 修改国际关键零部件清单
+export function updateBaseInternational(data) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList',
+    method: 'put',
+    data: data
+  })
+}
+
+// 逻辑删除国际关键零部件清单
+export function delLogic(id) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/' + id,
+    method: 'delete'
+  })
+}
+
+// 升版
+export function upgradeBaseInternational(id) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/upGrade/' + id,
+    method: 'post'
+  })
+}
+// 生成清单版本号、清单号
+export function getBaseInternationalNo() {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/generateInfo',
+    method: 'get'
+  })
+}
+
+// 修改数据状态
+export function updateBaseInternationalStatus(id) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/updateStatus/' + id ,
+    method: 'put'
+  })
+}
+
+// 获取国际关键零部件清单模板的事业部
+export function getBaseInternationalDepartment() {
+  return request({
+    url: '/control/baseInternationalKeyComponentsList/getAllUnit',
+    method: 'get'
+  })
+}

src/api/BaseInternationalKeyComponents/BaseInternationalKeyComponentsDetail.js

+import request from '@/utils/request'
+
+// 查询国际关键零部件清单详情列表
+export function listDetail(query) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询国际关键零部件清单详情详细
+export function getDetail(id) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsDetail/' + id,
+    method: 'get'
+  })
+}
+
+// 新增国际关键零部件清单详情
+export function addDetail(data) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改国际关键零部件清单详情
+export function updateDetail(data) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除国际关键零部件清单详情
+export function delDetail(componentsListId) {
+  return request({
+    url: '/control/baseInternationalKeyComponentsDetail/' + componentsListId,
+    method: 'delete'
+  })
+}

src/api/BaseIntlPartTemplate/baseIntlPartTemplate.js → src/api/BaseIntlPartTemplate/BaseIntlPartTemplate.js

@@ -9,14 +9,6 @@ export function listTemplate(query) {
   })
 }
 
-// 查询国际关键零部件模版详细
-export function getTemplate(id) {
-  return request({
-    url: '/control/baseIntlPartTemplate/' + id,
-    method: 'get'
-  })
-}
-
 // 新增国际关键零部件模版
 export function addTemplate(data) {
   return request({
@@ -35,14 +27,6 @@ export function updateTemplate(data) {
   })
 }
 
-// 删除国际关键零部件模版
-export function delTemplate(id) {
-  return request({
-    url: '/control/baseIntlPartTemplate/' + id,
-    method: 'delete'
-  })
-}
-
 // 逻辑删除国际关键零部件模版
 export function delLogicTemplate(id) {
   return request({

src/views/baseData/criticalPartsList/BaseDomesticKeyComponents/index.vue

+<script setup>
+
+</script>
+
+<template>
+  关键零部件清单-国内
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/baseData/criticalPartsList/BaseIntlPartTemplate/index.vue

@@ -43,6 +43,9 @@
             <div>{{en.UpdatedBy}}</div>
           </div>
         </template>
+        <template #default="scope">
+          {{scope.row.upateByName || '--'}}
+        </template>
       </el-table-column>
       <el-table-column label="更新时间" prop="updateTime" align="center">
         <template #header>
@@ -98,7 +101,11 @@
     />
 
     <!-- 复制新增对话框 -->
-    <el-dialog :title="title" v-model="open" width="339px" align-center>
+    <el-dialog
+        :title="title"
+        v-model="open"
+        width="500px"
+    >
       <el-form ref="templateRef" :model="form" label-width="80px">
         <el-form-item label="事业部" prop="division">
           <el-select v-model="form.division" placeholder="请选择">
@@ -128,9 +135,14 @@
         </div>
       </template>
     </el-dialog>
-
     <!-- 添加事业部对话框 -->
-    <el-dialog :title="title" v-model="open2" width="500px" append-to-body>
+    <el-dialog
+        :title="title"
+        v-model="open2"
+        width="500px"
+        top="30"
+    >
+      <div style="width: 70%;margin-left: 15%;padding: 20px 0">
       <el-form ref="templateRef" :model="form" label-width="80px">
         <el-form-item label="事业部" prop="division">
           <el-select v-model="form.division" placeholder="请选择">
@@ -143,6 +155,7 @@
           </el-select>
         </el-form-item>
       </el-form>
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button class="btn-A" @click="cancel">取消</el-button>
@@ -154,7 +167,7 @@
 </template>
 
 <script setup>
-import { listTemplate, addTemplate, getAllUnit, delLogicTemplate, updateTemplate } from "@/api/BaseIntlPartTemplate/baseIntlPartTemplate.js";
+import { listTemplate, addTemplate, getAllUnit, delLogicTemplate, updateTemplate } from "@/api/BaseIntlPartTemplate/BaseIntlPartTemplate.js";
 import cn from "@/locales/baseData/criticalPartsList/BaseIntlPartTemplate/cn.json";
 import en from "@/locales/baseData/criticalPartsList/BaseIntlPartTemplate/en.json";
 
@@ -241,6 +254,8 @@ function handleDivisionChange(selectedValue) {
     if (oldDivisionId){
       form.value.division = oldDivisionId.concat(selectedValue);
       form.value.divisionCn = oldDivisionCn.concat(selectedOption.label);
+      oldDivisionId = [];
+      oldDivisionCn = [];
     }else {
       form.value.division.push(selectedValue);
       form.value.divisionCn.push(selectedOption.label);
@@ -268,7 +283,7 @@ function reset() {
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["templateRef"].validate(valid => {
-    if (valid) {
+    if (valid && form.value.division) {
       handleDivisionChange(form.value.division)
       if (form.value.id != null) {
         // 添加事业部
@@ -303,3 +318,20 @@ function handleDelete(row) {
 
 getList();
 </script>
+<style scoped lang="scss">
+:deep(.el-pagination) {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 24px;
+}
+
+:deep(.el-pagination.is-background .el-pager li.is-active){
+  background-color: #0154FB;
+}
+/*对话框中央*/
+:deep(.el-dialog) {
+  margin-top: 17% !important;
+}
+
+</style>

src/views/baseData/criticalPartsList/BaseIntlPartTemplateDetail/index.vue

   <template>
   <div class="app-container">
-    <div style="margin-bottom: 20px">
-      <el-button
-          link
-          @click="back"
-          style="font-size: 16px;"
-      >
-        <el-icon>
-          <ArrowLeft/>
-        </el-icon>
-        返回
-      </el-button>
-      <!--        <span style="margin-left: 10px">-->
-      <!--          <el-text size="large">事业部:</el-text>-->
-      <!--          {{ Object.values(divisionCn).join('、') }}</span>-->
-      <!--        <span style="margin-left: 10px">-->
-      <!--          <el-text size="large">最近更新人:</el-text>-->
-      <!--          {{ latestUpdateByName }}</span>-->
-      <!-- 事业部信息 -->
-      <span class="business-unit">事业部： {{ Object.values(divisionCn).join('、') }}</span>
+    <el-row >
+      <el-col>
+        <el-descriptions :column="5">
+          <el-descriptions-item width="100px">
+            <el-button link @click="back" icon="ArrowLeft">返回</el-button>
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人:" width="150">
+            {{ latestUpdateByName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="事业部:">
+            {{ Object.values(divisionCn).join('、') }}
+          </el-descriptions-item>
+
+        </el-descriptions>
+      </el-col>
+    </el-row>
 
-      <!-- 更新人信息 -->
-      <span class="last-updated-by">最近更新人：{{ latestUpdateByName }}</span>
-    </div>
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="150px">
       <el-form-item label="关键零部件名称:" prop="partNameId">
         <el-input
@@ -112,8 +106,7 @@
     <el-row :gutter="46">
       <el-col :offset="22">
         <el-button
-            plain
-            type="primary"
+            class="btn-C"
             @click="handleExport"
         >导出模板
         </el-button>
@@ -151,7 +144,7 @@
           :label="header"
       >
         <template #default="scope">
-          <!-- 判断当前乘客是否访问过该城市 -->
+          <!-- 判断当前零部件适用市场 -->
           <el-icon v-if="scope.row.applicableMarketList.includes(header)" size="20px">
             <Check/>
           </el-icon>
@@ -165,7 +158,7 @@
       </el-table-column>
     </el-table>
 
-    <el-drawer v-model="open" size="800px" direction="rtl" title="编辑零件">
+    <el-drawer v-model="open" size="500px" direction="rtl" title="编辑零件">
       <template #default>
         <el-form ref="detailRef" :model="form" :rules="rules" label-width="150px">
           <el-form-item label="关键零部件名称:" prop="criticalPartNameCn">
@@ -220,7 +213,7 @@
 </template>
 
 <script setup>
-import {listDetail, getDetail, updateDetail, getMarket} from "@/api/BaseIntlPartTemplate/baseIntlPartTemplateDetail.js";
+import {listDetail, getDetail, updateDetail, getMarket} from "@/api/BaseIntlPartTemplate/BaseIntlPartTemplateDetail.js";
 import {ArrowLeft, Check} from "@element-plus/icons-vue";
 
 const {proxy} = getCurrentInstance();
@@ -381,7 +374,7 @@ function submitForm() {
 function handleExport() {
   proxy.download('control/baseIntlPartTemplateDetail/export', {
     ...queryParams.value
-  }, `国际关键零部件清单模版-${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}.xlsx`)
+  }, `国际关键零部件清单模版(${divisionCn})-${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}.xlsx`)
 }
 
 getList();
@@ -393,21 +386,11 @@ getApplicableMarket();
   margin-right: 15px;
 }
 
-.el-row {
-  margin-bottom: 20px;
-}
-
-.header-container {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-left: 10px
+:deep(.drawer-form.el-form--inline .el-form-item) {
+  margin-right: 15px;
 }
 
-.business-unit,
-.last-updated-by {
-  margin-left: 10px;
-  font-size: 16px;
-  color: #606266;
+.el-row {
+  margin-bottom: 20px;
 }
 </style>

src/views/baseData/criticalPartsList/header.vue

+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="国内" name="BaseDomesticKeyComponents">
+        <BaseDomesticKeyComponents/>
+      </el-tab-pane>
+      <el-tab-pane label="国际" name="BaseInternationalKeyComponents">
+        <BaseInternationalKeyComponents/>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+<script setup>
+import BaseDomesticKeyComponents from "@/views/baseData/criticalPartsList/BaseDomesticKeyComponents/index.vue";
+import BaseInternationalKeyComponents from "@/views/baseData/criticalPartsList/BaseInternationalKeyComponents/index.vue";
+
+const activeName = ref("BaseDomesticKeyComponents");
+</script>