refactor:国际关键零部件模板详情英文

src/locales/baseData/criticalPartsList/BaseIntlPartTemplate/cn.json

+{
+  "Cancel": "取消",
+  "Submit": "提交",
+  "Index":"序号",
+  "BusinessUnit": "事业部",
+  "CreatedBy": "创建人",
+  "CreateTime": "创建时间",
+  "UpdatedBy": "更新人",
+  "UpdateTime": "更新时间",
+  "Operations": "操作",
+  "MaintainTemplateContent": "维护模板内容",
+  "CopyandAdd": "复制新增",
+  "AddBusinessUnit": "添加事业部",
+  "Delete": "删除"
+}

src/locales/baseData/criticalPartsList/BaseIntlPartTemplate/en.json

+{
+  "Cancel": "Cancel",
+  "Submit": "Submit",
+  "Index":"Index",
+  "BusinessUnit": "Business Unit",
+  "CreatedBy": "Created By",
+  "CreateTime": "Create Time",
+  "UpdatedBy": "Updated By",
+  "UpdateTime": "Update Time",
+  "Operations": "Operations",
+  "MaintainTemplateContent": "Maintain Template Content",
+  "CopyandAdd": "Copy and Add",
+  "AddBusinessUnit": "Add Business Unit",
+  "Delete": "Delete"
+}

src/locales/baseData/criticalPartsList/BaseIntlPartTemplateDetail/cn.json

+{
+  "Search": "搜索",
+  "Reset": "重置",
+  "Cancel": "取消",
+  "Submit": "提交",
+  "Back": "返回",
+  "PleaseSelect": "请选择",
+  "BusinessUnit": "事业部",
+  "LastUpdatedBy": "最近更新人",
+  "KeyComponentName": "关键零部件名称",
+  "EnglishName": "英文名称",
+  "Remarks": "备注",
+  "ComponentCertificationMarkingRequirements": "零部件认证标记要求",
+  "ProfessionalDepartment": "专业部门",
+  "MassProductionUnitAfterP8": "P8后批量生产单位",
+  "ApplicableMarket": "适用市场",
+  "Index": "序号",
+  "Model": "型号",
+  "Manufacturer": "生产厂家",
+  "Manufacturer(English)": "生产厂家(英文)",
+  "ComponentCertificationNumber/RegistrationNumber": "零部件认证证书号/注册号",
+  "PartAssemblyNumber": "零件总成号",
+  "SortOrder": "排序",
+  "Edit": "编辑",
+  "EditPart": "编辑零件"
+}

src/locales/baseData/criticalPartsList/BaseIntlPartTemplateDetail/en.json

+{
+  "Search": "Search",
+  "Reset": "Reset",
+  "Cancel": "Cancel",
+  "Submit": "Submit",
+  "Back": "Back",
+  "Please Select": "Please Select",
+  "Business Unit": "Business Unit",
+  "Last Updated By": "Last Updated By",
+  "Key Component Name": "Key Component Name",
+  "English Name": "English Name",
+  "Remarks": "Remarks",
+  "Component Certification Marking Requirements": "Component Certification Marking Requirements",
+  "Professional Department": "Professional Department",
+  "Mass Production Unit After P8": "Mass Production Unit After P8",
+  "Applicable Market": "Applicable Market",
+  "Index": "Index",
+  "Model": "Model",
+  "Manufacturer": "Manufacturer",
+  "Manufacturer (English)": "Manufacturer (English)",
+  "Component Certification Number / Registration Number": "Component Certification Number / Registration Number",
+  "Part Assembly Number": "Part Assembly Number",
+  "Sort Order": "Sort Order",
+  "Edit": "Edit",
+  "Edit Part": "Edit Part"
+
+}

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

 <template>
   <div class="app-container">
     <el-table v-loading="loading" :data="templateList">
-      <el-table-column label="序号" type="index" align="center" width="55"/>
+      <el-table-column label="序号" type="index" align="center" width="75">
+        <template #header>
+          <div>
+            <div>{{cn.Index}}</div>
+            <div>{{en.Index}}</div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="事业部" prop="divisionCn" align="center">
+        <template #header>
+          <div>
+            <div>{{cn.BusinessUnit}}</div>
+            <div>{{en.BusinessUnit}}</div>
+          </div>
+        </template>
         <template #default="scope">
          {{Object.values(scope.row.divisionCn).join('、')}}
         </template>
       </el-table-column>
-      <el-table-column label="创建人" prop="createByName" align="center"/>
-      <el-table-column label="创建时间" prop="createTime" align="center"/>
-      <el-table-column label="更新人" prop="updateByName" align="center"/>
-      <el-table-column label="更新时间" prop="updateTime" align="center"/>
+      <el-table-column label="创建人" prop="createByName" align="center">
+        <template #header>
+          <div>
+            <div>{{cn.CreatedBy}}</div>
+            <div>{{en.CreatedBy}}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" align="center">
+        <template #header>
+          <div>
+            <div>{{cn.CreateTime}}</div>
+            <div>{{en.CreateTime}}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新人" prop="updateByName" align="center">
+        <template #header>
+          <div>
+            <div>{{cn.UpdatedBy}}</div>
+            <div>{{en.UpdatedBy}}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间" prop="updateTime" align="center">
+        <template #header>
+          <div>
+            <div>{{cn.UpdateTime}}</div>
+            <div>{{en.UpdateTime}}</div>
+          </div>
+        </template>
+      </el-table-column>
 
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="430">
+        <template #header>
+          <div>
+            <div>{{cn.Operations}}</div>
+            <div>{{en.Operations}}</div>
+          </div>
+        </template>
         <template #default="scope">
-          <el-button link type="primary" @click="handleTemplateDetailView(scope.row)">维护模板内容</el-button>
-          <el-button link type="warning" @click="handleCopyAdd" v-show="scope.row.isDefault === 1">复制新增</el-button>
-          <el-button link type="primary" @click="handleAddDivision(scope.row)" v-show="scope.row.isDefault === 1">添加事业部</el-button>
-          <el-button link type="danger" @click="handleDelete(scope.row)" v-show="scope.row.isDefault === 0">删除</el-button>
+          <el-button link type="primary" @click="handleTemplateDetailView(scope.row)">
+            <div>
+              <div>{{cn.MaintainTemplateContent}}</div>
+              <div>{{en.MaintainTemplateContent}}</div>
+            </div>
+          </el-button>
+          <el-button link type="warning" @click="handleCopyAdd" v-show="scope.row.isDefault === 1">
+            <div>
+              <div>{{cn.CopyandAdd}}</div>
+              <div>{{en.CopyandAdd}}</div>
+            </div>
+          </el-button>
+          <el-button link type="primary" @click="handleAddDivision(scope.row)" v-show="scope.row.isDefault === 1">
+            <div>
+              <div>{{cn.AddBusinessUnit}}</div>
+              <div>{{en.AddBusinessUnit}}</div>
+            </div>
+          </el-button>
+          <el-button link type="danger" @click="handleDelete(scope.row)" v-show="scope.row.isDefault === 0">
+            <div>
+              <div>{{cn.Delete}}</div>
+              <div>{{en.Delete}}</div>
+            </div>
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -46,8 +113,18 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button class="btn-A" @click="cancel">
+            <div>
+              <div>{{cn.Cancel}}</div>
+              <div>{{en.Cancel}}</div>
+            </div>
+          </el-button>
+          <el-button class="btn-B" @click="submitForm">
+            <div>
+            <div>{{cn.Submit}}</div>
+            <div>{{en.Submit}}</div>
+          </div>
+          </el-button>
         </div>
       </template>
     </el-dialog>
@@ -68,8 +145,8 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button class="btn-A" @click="cancel">取消</el-button>
+          <el-button class="btn-B" @click="submitForm">提交</el-button>
         </div>
       </template>
     </el-dialog>
@@ -78,6 +155,8 @@
 
 <script setup>
 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";
 
 const { proxy } = getCurrentInstance();
 
@@ -128,7 +207,7 @@ function getDivisionList(data) {
 
 // 维护模板内容
 function handleTemplateDetailView(row) {
-  proxy.$router.push({ path: '/baseData/criticalPartsList/templateDetail', query: { id: row.id , divisionCn: row.divisionCn , isDefault: row.isDefault} })
+  proxy.$router.push({ path: '/baseData/criticalPartsList/BaseIntlPartTemplateDetail', query: { id: row.id , divisionCn: row.divisionCn , isDefault: row.isDefault} })
 }
 
 // 复制新增

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-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>
-  </div>
+      <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>
+
+      <!-- 更新人信息 -->
+      <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
-          v-model="queryParams.criticalPartNameCn"
-          placeholder="请输入"
-          clearable
-          @keyup.enter="handleQuery"
-          style="width: 200px"
+            v-model="queryParams.criticalPartNameCn"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+            style="width: 200px"
         />
       </el-form-item>
       <el-form-item label="英文名称:" prop="partNameId">
@@ -34,11 +44,11 @@
       </el-form-item>
       <el-form-item label="备注:" prop="remark">
         <el-input
-          v-model="queryParams.remark"
-          placeholder="请输入"
-          clearable
-          @keyup.enter="handleQuery"
-          style="width: 200px"
+            v-model="queryParams.remark"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+            style="width: 200px"
         />
       </el-form-item>
       <el-form-item label="零部件认证标记要求:" prop="standardRequirements">
@@ -49,22 +59,22 @@
             @keyup.enter="handleQuery"
             style="width: 200px"
         />
-<!--        <el-select v-model="queryParams.partAuthenticationRequirements" placeholder="请选择" clearable>
-          <el-option
-              v-for="dict in part_authentication_requirements"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>-->
+        <!--        <el-select v-model="queryParams.partAuthenticationRequirements" placeholder="请选择" clearable>
+                  <el-option
+                      v-for="dict in part_authentication_requirements"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                  />
+                </el-select>-->
       </el-form-item>
       <el-form-item label="专业部门:" prop="department">
         <el-input
-          v-model="queryParams.department"
-          placeholder="请输入"
-          clearable
-          @keyup.enter="handleQuery"
-          style="width: 200px"
+            v-model="queryParams.department"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+            style="width: 200px"
         />
       </el-form-item>
       <el-form-item label="P8后批量生产单位:" prop="p8PostProductionUnit">
@@ -75,14 +85,14 @@
             @keyup.enter="handleQuery"
             style="width: 200px"
         />
-<!--        <el-select v-model="queryParams.p8PostProductionUnit" placeholder="请选择" clearable>-->
-<!--          <el-option-->
-<!--              v-for="dict in p8_post_production_unit"-->
-<!--              :key="dict.value"-->
-<!--              :label="dict.label"-->
-<!--              :value="dict.value"-->
-<!--          />-->
-<!--        </el-select>-->
+        <!--        <el-select v-model="queryParams.p8PostProductionUnit" placeholder="请选择" clearable>-->
+        <!--          <el-option-->
+        <!--              v-for="dict in p8_post_production_unit"-->
+        <!--              :key="dict.value"-->
+        <!--              :label="dict.label"-->
+        <!--              :value="dict.value"-->
+        <!--          />-->
+        <!--        </el-select>-->
       </el-form-item>
       <el-form-item label="适用市场" prop="suitableMarket">
         <el-input
@@ -105,7 +115,8 @@
             plain
             type="primary"
             @click="handleExport"
-        >导出模板</el-button>
+        >导出模板
+        </el-button>
       </el-col>
     </el-row>
 
@@ -115,8 +126,8 @@
       <el-table-column label="英文名称" prop="criticalPartNameEn" align="center" width="150"/>
       <el-table-column label="型号" align="center" width="100"/>
       <el-table-column label="生产厂家" align="center" width="120"/>
-      <el-table-column label="生产厂家(英文)" align="center"  width="120"/>
-      <el-table-column label="零部件认证证书号/注册号" width="120" align="center" />
+      <el-table-column label="生产厂家(英文)" align="center" width="120"/>
+      <el-table-column label="零部件认证证书号/注册号" width="120" align="center"/>
       <el-table-column label="零部件认证标记要求" prop="partAuthenticationRequirements" width="100" align="center">
         <template #default="scope">
           <dict-tag :options="part_authentication_requirements" :value="scope.row.partAuthenticationRequirements"/>
@@ -131,7 +142,7 @@
       <el-table-column label="备注" prop="remark" align="center" width="100"/>
       <el-table-column label="专业部门" prop="department" align="center" width="100"/>
       <el-table-column label="排序" prop="sort" align="center" width="100"/>
-<!--   适用市场   -->
+      <!--   适用市场   -->
       <el-table-column
           align="center"
           v-for="(header, index) in applicableMarketHeaders"
@@ -147,49 +158,49 @@
           <span v-else></span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" >
+      <el-table-column label="操作" align="center" fixed="right">
         <template #default="scope">
           <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-drawer v-model="open" size="800px" direction="rtl"  title="编辑零件">
+    <el-drawer v-model="open" size="800px" direction="rtl" title="编辑零件">
       <template #default>
         <el-form ref="detailRef" :model="form" :rules="rules" label-width="150px">
-          <el-form-item label="关键零部件名称:" prop="criticalPartNameCn" >
-            <el-input v-model="form.criticalPartNameCn"  disabled/>
+          <el-form-item label="关键零部件名称:" prop="criticalPartNameCn">
+            <el-input v-model="form.criticalPartNameCn" disabled/>
           </el-form-item>
           <el-form-item label="备注:" prop="remark" v-show="isDefault === '1'">
-            <el-input v-model="form.remark" placeholder="请输入" />
+            <el-input v-model="form.remark" placeholder="请输入"/>
           </el-form-item>
           <el-form-item label="零部件认证标记要求" prop="standardRequirements" v-show="isDefault === '1'">
             <el-select v-model="form.partAuthenticationRequirements" placeholder="请选择">
               <el-option
-                v-for="dict in part_authentication_requirements"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+                  v-for="dict in part_authentication_requirements"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
               ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="专业部门" prop="department" filterable>
             <el-select v-model="form.department" placeholder="请选择" filterable allow-create>
               <el-option
-                v-for="dict in departmentOptions"
-                :key="dict"
-                :label="dict"
-                :value="dict"
+                  v-for="dict in departmentOptions"
+                  :key="dict"
+                  :label="dict"
+                  :value="dict"
               ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="p8后端批量生产单位" prop="p8PostProductionUnit">
             <el-select v-model="form.p8PostProductionUnit" placeholder="请选择">
               <el-option
-                v-for="dict in p8_post_production_unit"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+                  v-for="dict in p8_post_production_unit"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
               ></el-option>
             </el-select>
           </el-form-item>
@@ -201,19 +212,22 @@
       <template #footer>
         <div style="flex: auto">
           <el-button class="btn-A" @click="cancel">取消</el-button>
-          <el-button class="btn-B" type="primary" @click="submitForm">提交</el-button>
+          <el-button class="btn-B" @click="submitForm">提交</el-button>
         </div>
       </template>
     </el-drawer>
   </div>
 </template>
 
-<script setup >
-import { listDetail, getDetail, updateDetail, getMarket} from "@/api/BaseIntlPartTemplate/baseIntlPartTemplateDetail.js";
-import {Check} from "@element-plus/icons-vue";
+<script setup>
+import {listDetail, getDetail, updateDetail, getMarket} from "@/api/BaseIntlPartTemplate/baseIntlPartTemplateDetail.js";
+import {ArrowLeft, Check} from "@element-plus/icons-vue";
 
-const { proxy } = getCurrentInstance();
-const { p8_post_production_unit, part_authentication_requirements } = proxy.useDict('p8_post_production_unit', 'part_authentication_requirements');
+const {proxy} = getCurrentInstance();
+const {
+  p8_post_production_unit,
+  part_authentication_requirements
+} = proxy.useDict('p8_post_production_unit', 'part_authentication_requirements');
 
 const detailList = ref([]);
 const open = ref(false);
@@ -235,7 +249,7 @@ const data = reactive({
     // 零部件认证标记要求
     partAuthenticationRequirements: null,
     // 适用市场
-    applicableMarket:null,
+    applicableMarket: null,
     department: null,
     p8PostProductionUnit: null,
     remark: null,
@@ -243,18 +257,18 @@ const data = reactive({
   },
   rules: {
     partNameId: [
-      { required: true, message: "关键零部件名称", trigger: "blur" }
+      {required: true, message: "关键零部件名称", trigger: "blur"}
     ],
     department: [
-      { required: true, message: "专业部门不能为空", trigger: "blur" }
+      {required: true, message: "专业部门不能为空", trigger: "blur"}
     ],
     sort: [
-      { required: true, message: "排序不能为空", trigger: "blur" }
+      {required: true, message: "排序不能为空", trigger: "blur"}
     ]
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const {queryParams, form, rules} = toRefs(data);
 
 /** 查询国际关键零部件模版详情列表 */
 function getList() {
@@ -294,7 +308,7 @@ function getApplicableMarket() {
 
 // 返回国际关键零部件清单模板管理
 function back() {
-  proxy.$router.push({ path: '/baseData/criticalPartsList/template' })
+  proxy.$router.push({path: '/baseData/criticalPartsList/BaseIntlPartTemplate'})
 }
 
 // 取消按钮
@@ -350,16 +364,16 @@ function handleUpdate(row) {
 function submitForm() {
   proxy.$refs["detailRef"].validate(valid => {
     if (valid) {
-        updateDetail(form.value).then(response => {
-          if (response.code === 200){
-            proxy.$modal.msgSuccess("修改成功");
-            open.value = false;
-            getList();
-          }else {
-            proxy.$modal.msgError(response.msg)
-          }
-        });
-      }
+      updateDetail(form.value).then(response => {
+        if (response.code === 200) {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        } else {
+          proxy.$modal.msgError(response.msg)
+        }
+      });
+    }
   });
 }
 
@@ -382,4 +396,18 @@ getApplicableMarket();
 .el-row {
   margin-bottom: 20px;
 }
+
+.header-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 10px
+}
+
+.business-unit,
+.last-updated-by {
+  margin-left: 10px;
+  font-size: 16px;
+  color: #606266;
+}
 </style>