fix:不合格处置新增备注

src/api/unqualified/index.ts

@@ -8,7 +8,6 @@ export function getUnqualifiedData(data: object) {
   });
 }
 
-
 // 新增销售反馈表
 
 export function addFeedback(data: object) {
@@ -38,3 +37,11 @@ export function dealFeedback(data: object) {
     data,
   });
 }
+
+export function updateUnqualifiedData(data: object) {
+  return request({
+    url: "/api/v1/unqualified/update",
+    method: "post",
+    data,
+  });
+}

src/views/unqualified/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="container2" id="shijian">
     <el-tabs v-model="activeName" type="card">
-      <el-tab-pane label="待处理" name="no"/>
-      <el-tab-pane label="审核完成" name="ok"/>
+      <el-tab-pane label="待处理" name="no" />
+      <el-tab-pane label="审核完成" name="ok" />
     </el-tabs>
     <div class="header">
       <Search
@@ -19,24 +19,23 @@
         class="btn"
         style="margin-bottom: 10px"
         @click="toAdd"
-      >新增
-      </el-button
-      >
+        >新增
+      </el-button>
       <el-table :data="tableData" border>
-        <el-table-column prop="formNo" label="编号"/>
-        <el-table-column prop="materialModel" label="产品型号"/>
-        <el-table-column prop="type" label="产品分类"/>
-        <el-table-column prop="workOrderCode" label="生产批号"/>
+        <el-table-column prop="formNo" label="编号" />
+        <el-table-column prop="materialModel" label="产品型号" />
+        <el-table-column prop="type" label="产品分类" />
+        <el-table-column prop="workOrderCode" label="生产批号" />
         <el-table-column
           prop="seqs"
           label="管号"
           width="200"
           overhidden="true"
         />
-        <el-table-column prop="seqNum" label="数量"/>
-        <el-table-column prop="componentName" label="器件名称及型号"/>
-        <el-table-column prop="num" label="数量"/>
-        <el-table-column prop="company" label="供方单位" overhidden="true"/>
+        <el-table-column prop="seqNum" label="数量" />
+        <el-table-column prop="componentName" label="器件名称及型号" />
+        <el-table-column prop="num" label="数量" />
+        <el-table-column prop="company" label="供方单位" overhidden="true" />
         <el-table-column
           prop="currentUserName"
           label="审核人"
@@ -54,7 +53,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="created" label="创建时间"/>
+        <el-table-column prop="created" label="创建时间" />
         <el-table-column
           align="center"
           width="160"
@@ -68,23 +67,29 @@
               link
               type="danger"
               @click="toDelete(row)"
-            >删除
-            </el-button
-            >
+              >删除
+            </el-button>
             <el-button
               link
               v-if="
                 (row.state === 0 || row.state === 1) &&
-                row.currentUserName?.split(',').includes(userStore.user.username)
+                row.currentUserName
+                  ?.split(',')
+                  .includes(userStore.user.username)
               "
               @click="handle(row)"
               type="primary"
-            >处理
-            </el-button
-            >
+              >处理
+            </el-button>
             <el-button link @click="toDetail(row)" type="primary"
-            >详情
-            </el-button
+              >详情
+            </el-button>
+            <el-button
+              link
+              v-if="row.state === 3 && hasRemarkButtonPerm"
+              @click="handleRemark(row)"
+              type="primary"
+              >备注</el-button
             >
           </template>
         </el-table-column>
@@ -109,15 +114,69 @@
       <Handle6 ref="handle6Ref" @finish="getData"></Handle6>
       <Handle7 ref="handle7Ref" @finish="getData"></Handle7>
     </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="`备注 (${currentRow.materialModel || ''})`"
+      width="40%"
+    >
+      <div class="remark-container">
+        <div
+          v-for="(remark, index) in remarks"
+          :key="index"
+          class="remark-item"
+        >
+          <el-input
+            v-model="remark.content"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注内容"
+            @change="updateRemark(index, remark.content)"
+          />
+          <div class="remark-actions">
+            <div>
+              <el-button
+                type="danger"
+                size="small"
+                @click="removeRemark(index)"
+                :icon="Delete"
+                circle
+              />
+            </div>
+            <div class="remark-info">
+              <span class="remark-user">{{ remark.user }}</span>
+              <span class="remark-time">{{ remark.time }}</span>
+            </div>
+          </div>
+        </div>
+        <el-button
+          type="primary"
+          @click="addRemark"
+          class="add-btn"
+          :icon="Plus"
+          >新增备注</el-button
+        >
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleRemarkSubmit">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import Search from "@/components/Search/index.vue";
-import {useSpcStore, useUserStore, useDictionaryStore} from "@/store";
+import { useSpcStore, useUserStore, useDictionaryStore } from "@/store";
 
-const {dicts} = useDictionaryStore();
-import {deleteFeedback, getUnqualifiedData} from "@/api/unqualified/index";
+const { dicts } = useDictionaryStore();
+import {
+  deleteFeedback,
+  getUnqualifiedData,
+  updateUnqualifiedData,
+} from "@/api/unqualified/index";
 import Add from "@/views/unqualified/add.vue";
 import Detail from "@/views/unqualified/detail.vue";
 import Handle20 from "@/views/unqualified/handle20.vue";
@@ -128,6 +187,7 @@ import Handle4 from "@/views/unqualified/handle4.vue";
 import Handle5 from "@/views/unqualified/handle5.vue";
 import Handle6 from "@/views/unqualified/handle6.vue";
 import Handle7 from "@/views/unqualified/handle7.vue";
+import { Plus, Delete } from "@element-plus/icons-vue";
 
 defineOptions({
   name: "SPCUnqualified",
@@ -171,7 +231,7 @@ const searchForm = [
 ];
 
 const getData = async (obj) => {
-  const {data, code} = await getUnqualifiedData({
+  const { data, code } = await getUnqualifiedData({
     ...searchRef.value.searchForm,
     pageNo: currentOption.page,
     pageSize: currentOption.limit,
@@ -212,7 +272,7 @@ const handle = (row) => {
       handle20Ref.value && handle20Ref.value.showDrawer(row); // 处理
     } else {
       if (row.remark1 && !JSON.parse(row.remark1).user1) {
-        console.log(row.remark1, "ddddpp[[[[")
+        console.log(row.remark1, "ddddpp[[[[");
         handle2Ref.value && handle2Ref.value.showDrawer(row);
       } else {
         handle21Ref.value && handle21Ref.value.showDrawer(row); // 处理
@@ -243,11 +303,11 @@ const getTextByAuditType = (state) => {
     const item = auditTypes.filter((v) => {
       console.log(
         "dictValue:" +
-        v.dictValue +
-        ",state:" +
-        state +
-        "..." +
-        (v.dictValue === state)
+          v.dictValue +
+          ",state:" +
+          state +
+          "..." +
+          (v.dictValue === state)
       );
       return v.dictValue === state;
     });
@@ -287,6 +347,73 @@ const getColorByState = (state) => {
 };
 const activeName = ref("no");
 
+const dialogVisible = ref(false);
+const currentRow = ref({});
+const remarks = ref([]);
+
+const handleRemark = (row) => {
+  dialogVisible.value = true;
+  currentRow.value = row;
+  // 初始化备注数据
+  try {
+    remarks.value = row.remark8 ? JSON.parse(row.remark8) : [];
+  } catch (e) {
+    remarks.value = [];
+  }
+};
+
+const formatNowTime = () => {
+  const date = new Date();
+  return (
+    date.getFullYear() +
+    "年" +
+    (date.getMonth() + 1) +
+    "月" +
+    date.getDate() +
+    "日"
+  );
+};
+
+const addRemark = () => {
+  remarks.value.push({
+    content: "",
+    time: formatNowTime(),
+    user: userStore.user.username,
+  });
+};
+
+const removeRemark = (index) => {
+  remarks.value.splice(index, 1);
+};
+
+const updateRemark = (index, content) => {
+  remarks.value[index].content = content;
+  remarks.value[index].time = formatNowTime();
+  remarks.value[index].user = userStore.user.username;
+};
+
+const handleRemarkSubmit = async () => {
+  const validRemarks = remarks.value.filter((item) => item.content.trim());
+
+  currentRow.value.remark8 = JSON.stringify(validRemarks);
+
+  await updateUnqualifiedData(currentRow.value);
+
+  ElMessage.success("备注保存成功");
+  dialogVisible.value = false;
+  getData();
+};
+
+const hasRemarkButtonPerm = computed(() => {
+  console.log("permisson", userStore.user.perms);
+  return userStore.user.perms?.some(
+    (item) =>
+      item.menuName === "备注" && // 按钮名称
+      item.type === 2 && // 是否是按钮
+      item.parentPath === "unqualified" //是否是不合格处置页面
+  );
+});
+
 onMounted(() => {
   searchRef.value.searchForm.state = "0";
   getData();
@@ -348,4 +475,44 @@ watch(
     background-color: #f5f7fa;
   }
 }
+
+.remark-container {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 10px;
+
+  .remark-item {
+    margin-bottom: 15px;
+    border-bottom: 1px dashed #eee;
+    padding-bottom: 10px;
+
+    .remark-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 5px;
+
+      .remark-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        .remark-user {
+          font-size: 12px;
+          color: #409eff;
+          margin-bottom: 2px;
+        }
+
+        .remark-time {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+  }
+
+  .add-btn {
+    margin-top: 10px;
+  }
+}
 </style>