返工记录弹窗 可编辑。

src/components/InputDiv/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div contenteditable="true" @blur="updateValue" v-text="content" class="editable-div"></div>
+</template>
+
+<script setup lang="ts">
+const content = defineModel("text");
+
+const updateValue = (event: Event) => {
+  const target = event.target as HTMLElement;
+  console.log(target);
+  content.value = target.innerText;
+};
+</script>
+
+<style scoped>
+.editable-div {
+  border: none;
+  outline: none;
+}
+
+.editable-div:focus {
+  border: 1px solid #66afe9;
+  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
+}
+</style>

src/views/pro-operation/remove/components/rework-show.vue

@@ -4,13 +4,11 @@
       <div class="header">
         <div class="text">详情查看</div>
         <div class="delete">
-          <el-button
-            style="margin-right: 10px"
-            type="primary"
-            size="small"
-            class="btn"
-            v-print="'#print'"
-            >打印</el-button
+          <!--          <el-button style="margin-right: 10px" type="primary" size="small" class="btn" v-print="'#print'"-->
+          <!--            >打印</el-button-->
+          <!--          >-->
+          <el-button style="margin-right: 10px" type="primary" size="small" class="btn" @click="submitData"
+            >提交</el-button
           >
           <span style="padding: 20px; cursor: pointer" @click="close">X</span>
         </div>
@@ -23,89 +21,81 @@
                 <div class="text" style="margin-left: 20px">表号：J05-018B</div>
               </div>
               <div class="title" style="text-align: center">返工记录卡</div>
-              <div class="title-remark" style="text-align: center">
-                (随工单附表，代替随工单上的返工)
-              </div>
+              <div class="title-remark" style="text-align: center">(随工单附表，代替随工单上的返工)</div>
               <div class="title-head">
                 <div class="head-term" style="margin-left: 20px; width: 240px">
                   产品名称: {{ tableData.materialName }}
                 </div>
-                <div class="head-term" style="width: 110px">
-                  数量: {{ tableData.num }}
-                </div>
-                <div class="head-term" style="width: 180px">
-                  返工提出者: {{ tableData.creator }}
-                </div>
-                <div class="head-term" style="width: 150px">
-                  日期: {{ tableData.dateCreate }}
-                </div>
+                <div class="head-term" style="width: 110px">数量: {{ tableData.num }}</div>
+                <div class="head-term" style="width: 180px">返工提出者: {{ tableData.creator }}</div>
+                <div class="head-term" style="width: 150px">日期: {{ tableData.dateCreate }}</div>
               </div>
               <table style="border-collapse: collapse; border-bottom: 0">
                 <tbody>
-                <tr>
-                  <td class="detail-title" rowspan="2">需返工内容</td>
-                  <td class="title-one-height title-one-width title-size">
-                    管号
-                  </td>
-                  <td class="title-one-height title-one-width title-size">
-                    生产批号
-                  </td>
-                  <td class="title-one-height title-size" style="width: 265px">
-                    具体返工内容
-                  </td>
-                  <td class="title-one-height title-size">返工原因</td>
-                </tr>
-                <tr style="border-bottom: 0">
-                  <td class="title-size">{{ tableData.seqNos }}</td>
-                  <td class="title-size">{{ tableData.workOrderCode }}</td>
-                  <td class="title-size">
-                    {{ tableData.remark }}
-                  </td>
-                  <td class="title-size">
-                    {{ tableData.reason }}
-                  </td>
-                </tr>
+                  <tr>
+                    <td class="detail-title" rowspan="2">需返工内容</td>
+                    <td class="title-one-height title-one-width title-size">管号</td>
+                    <td class="title-one-height title-one-width title-size">生产批号</td>
+                    <td class="title-one-height title-size" style="width: 265px">具体返工内容</td>
+                    <td class="title-one-height title-size">返工原因</td>
+                  </tr>
+                  <tr style="border-bottom: 0">
+                    <td class="title-size">{{ tableData.seqNos }}</td>
+                    <td class="title-size">{{ tableData.workOrderCode }}</td>
+                    <td class="title-size">
+                      {{ tableData.remark }}
+                    </td>
+                    <td class="title-size">
+                      {{ tableData.reason }}
+                    </td>
+                  </tr>
                 </tbody>
               </table>
               <table>
                 <tbody>
-                <tr>
-                  <td
-                    class="detail-title"
-                    :rowspan="tableData.itemList.length + 1"
-                  >
-                    各工序返工情况
-                  </td>
-                  <td class="title-one-height title-one-width title-size">
-                    工序
-                  </td>
-                  <td class="title-one-height title-size" style="width: 191px">
-                    主要工艺条件
-                  </td>
-                  <td class="title-one-height title-size" style="width: 58px">
-                    接收数
-                  </td>
-                  <td class="title-one-height title-size" style="width: 58px">
-                    合格数
-                  </td>
-                  <td class="title-one-height title-size" style="width: 58px">
-                    合格率
-                  </td>
-                  <td class="title-one-height title-size">操作者</td>
-                  <td class="title-one-height title-size">日期</td>
-                  <td class="title-one-height title-size">检验人</td>
-                </tr>
-                <tr v-for="item in tableData.itemList">
-                  <td class="title-size">{{ item.operationName }}</td>
-                  <td class="title-size">{{ item.processAsk }}</td>
-                  <td class="title-size">{{ item.num }}</td>
-                  <td class="title-size">{{ item.qualifiedNum }}</td>
-                  <td class="title-size">{{ item.qualifiedRate }}</td>
-                  <td class="title-size">{{ item.operateName }}</td>
-                  <td class="title-size">{{ item.operateDate }}</td>
-                  <td class="title-size" v-if="!item.signatureUrl">{{ item.checkName }}</td>
-                  <td class="title-size" v-if="item.signatureUrl" ><img :src="item.signatureUrl" style="height: 30px"></td>
-                </tr>
+                  <tr>
+                    <td class="detail-title" :rowspan="tableData.itemList.length + 1">各工序返工情况</td>
+                    <td class="title-one-height title-one-width title-size">工序</td>
+                    <td class="title-one-height title-size" style="width: 191px">主要工艺条件</td>
+                    <td class="title-one-height title-size" style="width: 58px">接收数</td>
+                    <td class="title-one-height title-size" style="width: 58px">合格数</td>
+                    <td class="title-one-height title-size" style="width: 58px">合格率</td>
+                    <td class="title-one-height title-size">操作者</td>
+                    <td class="title-one-height title-size">日期</td>
+                    <td class="title-one-height title-size">检验人</td>
+                  </tr>
+                  <tr v-for="item in tableData.itemList">
+                    <template v-if="item.isChange">
+                      <td class="title-size">{{ item.operationName }}</td>
+                      <td class="title-size">
+                        <InputDiv v-model:text="item.processAsk" />
+                      </td>
+                      <td class="title-size">{{ item.num }}</td>
+                      <td class="title-size">{{ item.qualifiedNum }}</td>
+                      <td class="title-size">{{ item.qualifiedRate }}</td>
+                      <td class="title-size">{{ item.operateName }}</td>
+                      <td class="title-size">{{ item.operateDate }}</td>
+                      <td class="title-size" v-if="!item.signatureUrl">{{ item.checkName }}</td>
+                      <td class="title-size" v-if="item.signatureUrl">
+                        <img :src="item.signatureUrl" style="height: 30px" />
+                      </td>
+                    </template>
+                    <template v-else>
+                      <td class="title-size cannot-edit">{{ item.operationName }}</td>
+                      <td class="title-size cannot-edit">
+                        {{ item.processAsk }}
+                      </td>
+                      <td class="title-size cannot-edit">{{ item.num }}</td>
+                      <td class="title-size cannot-edit">{{ item.qualifiedNum }}</td>
+                      <td class="title-size cannot-edit">{{ item.qualifiedRate }}</td>
+                      <td class="title-size cannot-edit">{{ item.operateName }}</td>
+                      <td class="title-size cannot-edit">{{ item.operateDate }}</td>
+                      <td class="title-size cannot-edit" v-if="!item.signatureUrl">{{ item.checkName }}</td>
+                      <td class="title-size cannot-edit" v-if="item.signatureUrl">
+                        <img :src="item.signatureUrl" style="height: 30px" />
+                      </td>
+                    </template>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -141,6 +131,10 @@ watch(
     });
   }
 );
+
+const submitData = () => {
+  console.log("submitData", props.tableData);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -214,16 +208,15 @@ th {
   }
 }
 .bgColor {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   z-index: 99999;
   background-color: rgba(0, 0, 0, 0.3);
-  top: 0;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  left: 0;
+
   .body {
     width: 800px;
     height: 85vh;
@@ -265,4 +258,8 @@ th {
     justify-content: space-between;
   }
 }
+
+.cannot-edit {
+  color: gray;
+}
 </style>