国际控制计划部分页面

src/locales/controlPlan/InternationalControlPlan/EnsurePlanManagement/cn.json

@@ -28,6 +28,14 @@
   "operation":"操作",
   "taskProcessingProgress": "任务处理进展",
   "viewChangeHistory": "查看变更履历",
+  "preparation/changeTime": "编制/变更时间",
+  "preparation/changeInstructions": "编制/变更说明",
+  "preChangeVersion": "变更前版本",
+  "modifiedVersion": "变更后版本",
+  "changeOfPerson": "变更人",
+  "changeDetailedContentNumber": "变更详细内容序号",
+  "standardNumber": "标准编号",
+  "standardName": "标准名称",
   "add": "新增",
   "handleUpdate": "编辑",
   "handleDelete": "删除",

src/locales/controlPlan/InternationalControlPlan/EnsurePlanManagement/en.json

@@ -28,6 +28,14 @@
   "operation":"Operation",
   "taskProcessingProgress": "Task Processing Progress",
   "viewChangeHistory": "View Change History",
+  "preparation/changeTime": "Preparation/Change Time",
+  "preparation/changeInstructions": "Preparation/Change Instructions",
+  "preChangeVersion": "Pre change version",
+  "modifiedVersion": "Modified Version",
+  "changeOfPerson": "Change of person",
+  "changeDetailedContentNumber": "Change detailed content number",
+  "standardNumber": "Standard Number",
+  "standardName": "Standard Name",
   "add": "add",
   "handleUpdate": "Edit",
   "handleDelete": "Delete",

src/views/controlPlan/InternationalControlPlan/EnsurePlanManagement/check.vue

 <template>
   <div class="app-container">
+    <div class="top">
+      <div style="display: flex; align-items: center; width: 70%">
+        <el-button type="primary" @click="goBack">返回</el-button>
+        <span style="margin-left: 20px">事业部:奇瑞</span>
+        <span style="margin-left: 20px">市场组:欧盟</span>
+        <span style="margin-left: 20px">版本号:A0</span>
+      </div>
+    </div>
     <div class="tab-components">
       <span class="components-span">变更履历表</span>
+      <el-row>
+        <el-button style="width: 280px" class="btn-A" @click="handleQuery"
+          >{{ cn.taskProcessingProgress }}/{{
+            en.taskProcessingProgress
+          }}</el-button
+        >
+        <el-button
+          style="width: 280px"
+          class="btn-A"
+          @click="
+            $router.push('/control/InternationalControlPlan/revisionHistory')
+          "
+          >{{ cn.viewChangeHistory }}/{{ en.viewChangeHistory }}</el-button
+        >
+      </el-row>
     </div>
-    <el-button style="width: 280px" class="btn-A" @click="handleQuery"
-      >{{ cn.taskProcessingProgress }}/{{
-        en.taskProcessingProgress
-      }}</el-button
-    >
-    <el-button
-      style="width: 280px"
-      class="btn-A"
-      @click="$router.push('/control/InternationalControlPlan/revisionHistory')"
-      >{{ cn.viewChangeHistory }}/{{ en.viewChangeHistory }}</el-button
-    >
+
     <table class="info-table">
       <tr>
         <td>市场:</td>
@@ -159,6 +172,7 @@
       v-show="isExpanded"
       v-loading="loading"
       :data="planList"
+      border
       @selection-change="handleSelectionChange"
     >
       <el-table-column label="序号" align="center" width="150" fixed="left">
@@ -346,23 +360,12 @@ const data = reactive({
     ],
   },
 })
-// 表格数据配置
-const headers = [
-  '序号',
-  '类型描述',
-  '二级类型描述',
-  '方法',
-  '频次',
-  '分工',
-  '实施',
-  '记录',
-  '归档',
-  '填写人',
-  '填写状态',
-]
 
 const { queryParams, form, rules } = toRefs(data)
 
+function goBack() {
+  router.go(-1)
+}
 /** 查询控制计划-国际保证书管理列表 */
 function getList() {
   //loading.value = true
@@ -492,10 +495,30 @@ function handleExport() {
 </script>
 
 <style scoped>
+.top {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.form-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.right-align {
+  margin-left: auto; /* 让该元素靠右 */
+}
 .info-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #ddd;
+  margin-bottom: 20px;
+  background: white;
 }
 
 .info-table td {
@@ -508,6 +531,7 @@ function handleExport() {
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
+  margin-bottom: 20px;
   .components-span {
     border-left: 5px solid #409eff;
     padding-left: 5px;
@@ -515,17 +539,12 @@ function handleExport() {
     color: #409eff;
   }
 }
-.container {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  margin: 16px;
-}
 
 .header-row {
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  background: #f8f9fa;
+  background: aliceblue;
   cursor: pointer;
   transition: background 0.2s;
 }
@@ -553,12 +572,6 @@ function handleExport() {
   transform: rotate(90deg);
 }
 
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: white;
-}
-
 .data-table th,
 .data-table td {
   padding: 12px;

src/views/controlPlan/InternationalControlPlan/EnsurePlanManagement/history.vue

@@ -5,7 +5,6 @@
       ref="queryRef"
       :model="queryParams"
       :inline="true"
-      label-width="68px"
     >
       <el-form-item label="市场组" prop="marketGroup">
         <el-input
@@ -67,6 +66,7 @@
     <el-table
       v-loading="loading"
       :data="planList"
+      border
       @selection-change="handleSelectionChange"
     >
       <el-table-column label="序号" align="center" width="150" fixed="left">

src/views/controlPlan/InternationalControlPlan/EnsurePlanManagement/index.vue

@@ -5,7 +5,6 @@
       ref="queryRef"
       :model="queryParams"
       :inline="true"
-      label-width="68px"
     >
       <el-form-item label="市场组" prop="marketGroup">
         <el-input
@@ -83,11 +82,21 @@
           }}</el-button
         >
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          class="btn-C"
+          @click="
+            $router.push('/control/InternationalControlPlan/finalConfirmation')
+          "
+          >最终确认</el-button
+        >
+      </el-col>
     </el-row>
 
     <el-table
       v-loading="loading"
       :data="planList"
+      border
       @selection-change="handleSelectionChange"
     >
       <el-table-column label="序号" align="center" width="150" fixed="left">
@@ -254,6 +263,45 @@
         <el-form-item label="版本号" prop="versionNumber">
           <el-input v-model="form.versionNumber" placeholder="" />
         </el-form-item>
+        <div class="tab-components">
+          <span class="components-span">01.制造工厂</span>
+        </div>
+        <el-form-item label="编制负责人" prop="versionNumber">
+          <el-input v-model="form.versionNumber" placeholder="请选择人员" />
+          <el-button class="btn-A" @click="openDialog"
+            >选择用户(多选)</el-button
+          >
+          <select-role
+            v-if="deptList.length > 0"
+            v-model="selectRole"
+            :dept-list="deptList"
+            name-list-key="nameList"
+            name-key="name"
+            name-id-key="id"
+            dept-key="dept"
+            :selection-mode="selectType"
+            @submit="handleSelectionSubmit"
+            @close="() => (selectRole = false)"
+          />
+        </el-form-item>
+        <div class="tab-components">
+          <span class="components-span">02.供应商品质保证</span>
+        </div>
+        <el-form-item label="编制负责人" prop="versionNumber">
+          <el-input v-model="form.versionNumber" placeholder="请选择人员" />
+          <el-button class="btn-A" @click="openDialog"
+            >选择用户(多选)</el-button
+          >
+        </el-form-item>
+        <div class="tab-components">
+          <span class="components-span">03.质量管理中心</span>
+        </div>
+        <el-form-item label="编制负责人" prop="versionNumber">
+          <el-input v-model="form.versionNumber" placeholder="请选择人员" />
+          <el-button class="btn-A" @click="openDialog"
+            >选择用户(多选)</el-button
+          >
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -275,6 +323,9 @@
 } from '@/api/control/plan'*/
 import { useRouter } from 'vue-router'
 const router = useRouter()
+//引入组件
+import SelectRole from '@/components/SelectRole/index.vue'
+import { listUser } from '@/api/system/user'
 import cn from '@/locales/controlPlan/InternationalControlPlan/EnsurePlanManagement/cn.json'
 import en from '@/locales/controlPlan/InternationalControlPlan/EnsurePlanManagement/en.json'
 
@@ -289,12 +340,20 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
-
-const goToPage = () => {
-  router.push(
-    'controlPlan/InternationalControlPlan/EnsurePlanManagement/history',
-  )
+const selectRole = ref(false) //组件控制，默认关闭
+const selectType = ref('multiple') //默认多选
+const deptList = ref([])
+//多选
+const openDialog = async () => {
+  await getDeptList() // 先加载数据
+  selectRole.value = true // 再打开对话框
+  selectType.value = 'multiple'
 }
+//提交方法
+const handleSelectionSubmit = (selectedItems) => {
+  console.log('已选中的项:', selectedItems) // 处理已选择的用户
+}
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -322,6 +381,32 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
+// 获取用户列表
+// 获取用户数据并转换为部门树
+const getDeptList = async () => {
+  try {
+    const res = await listUser({})
+    // 转换数据结构：将用户按部门分组
+    const deptMap = new Map()
+    res.rows.forEach((user) => {
+      const deptName = user.dept?.deptName || '未分配部门'
+      if (!deptMap.has(deptName)) {
+        deptMap.set(deptName, {
+          dept: deptName, // 对应dept-key="dept"
+          nameList: [], // 对应name-list-key="nameList"
+          deptId: user.deptId, // 用于展开项标识
+        })
+      }
+      deptMap.get(deptName).nameList.push({
+        name: user.nickName, // 对应name-key="name"
+        id: user.userId, // 对应name-id-key="id"
+      })
+    })
+    deptList.value = Array.from(deptMap.values())
+  } catch (error) {
+    console.error('获取部门数据失败', error)
+  }
+}
 /** 查询控制计划-国际保证书管理列表 */
 function getList() {
   //loading.value = true
@@ -449,3 +534,17 @@ function handleExport() {
 
 //getList()
 </script>
+<style lang="scss" scoped>
+.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;
+  }
+}
+</style>