yby

src/views/enterprise/createProject.vue

@@ -7,6 +7,7 @@
       </div>
       <div class="createproject" style="display: flex; flex-direction: row;">
         <div style="width: 30px;">
+          <el-button>对照表</el-button>
           <div id="buttonContainer">
             <el-button v-for="buttonId in buttons" :key="buttonId" @click="showInterface(buttonId)" style="width: 30px">
               对<br>象<br>表<br> {{ buttonId }}
@@ -19,7 +20,7 @@
       </div>
     </div>
     <!-- 对象表详情部分 -->
-    <div style="margin-left: 20px;width: 30%">
+    <div style="margin-left: 20px;width: 30%;">
       <div v-if="activeButtonId!== null" class="interface" style="border-radius: 10px; overflow-y: auto; max-height: 300px;">
         <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
           <thead>
@@ -28,6 +29,9 @@
             <th style="border: 1px solid #ddd; padding: 8px;">产品名称</th>
             <th style="border: 1px solid #ddd; padding: 8px;">产品代码</th>
             <th style="border: 1px solid #ddd; padding: 8px;">引出频次</th>
+            <th v-if="showAddButton">
+              <el-button icon="el-icon-plus" @click="addRowToRightTable(null, -1)"></el-button>
+            </th>
           </tr>
           </thead>
           <tbody>
@@ -39,9 +43,10 @@
               <input
                 type="text"
                 v-model="row.name"
-                :disabled="!isEditing || row.outnum > 0 || isReferenceTable(activeButtonId)"
+                :disabled="!isEditing || row.outnum > 0 || isReferenceTable(activeButtonId) || row.nameDisabled"
                 @blur="addNewRowIfNeeded"
                 :class="isReferenceTable(activeButtonId)? 'readonly-input' : ''"
+                :style="row.inputStyle"
                 style="border: none; width: 100%;"
               />
             </td>
@@ -49,9 +54,10 @@
               <input
                 type="text"
                 v-model="row.pronum"
-                :disabled="!isEditing || row.outnum > 0 || isReferenceTable(activeButtonId)"
+                :disabled="!isEditing || row.outnum > 0 || isReferenceTable(activeButtonId) || row.pronumDisabled"
                 @blur="addNewRowIfNeeded"
                 :class="isReferenceTable(activeButtonId)? 'readonly-input' : ''"
+                :style="row.inputStyle"
                 style="border: none; width: 100%;"
               />
             </td>
@@ -107,23 +113,36 @@
                 <table>
                   <tr>
                     <td>序号</td>
-                    <td v-for="item in rightTable.data" :key="'num-' + item.uniqueId || Math.random().toString(36).substring(2)">{{ item.num }}</td>
+                    <td v-for="(item, index) in rightTable.data" :key="'num-' + item.uniqueId || Math.random().toString(36).substring(2)">
+                      {{ item.num }}
+                    </td>
                   </tr>
                   <tr>
                     <td>产品名称</td>
-                    <td v-for="item in rightTable.data" :key="'name-' + item.uniqueId || Math.random().toString(36).substring(2)">{{ item.name }}</td>
+                    <td v-for="(item, index) in rightTable.data" :key="'name-' + item.uniqueId || Math.random().toString(36).substring(2)">
+                      {{ item.name }}
+                    </td>
                   </tr>
                   <tr>
                     <td>产品代码</td>
-                    <td v-for="item in rightTable.data" :key="'pronum-' + item.uniqueId || Math.random().toString(36).substring(2)">{{ item.pronum }}</td>
+                    <td v-for="(item, index) in rightTable.data" :key="'pronum-' + item.uniqueId || Math.random().toString(36).substring(2)">
+                      {{ item.pronum }}
+                    </td>
                   </tr>
                   <tr>
                     <td>种植密度</td>
-                    <td v-for="item in rightTable.data" :key="'density-' + item.uniqueId || Math.random().toString(36).substring(2)">{{ item.density }}</td>
+                    <td v-for="(item, index) in rightTable.data" :key="'density-' + item.uniqueId || Math.random().toString(36).substring(2)">
+                      {{ item.density }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>操作</td>
+                    <td v-for="(item, index) in rightTable.data" :key="'action-' + index">
+                      <el-button icon="el-icon-minus" @click="handleMinusClick(index)"></el-button>
+                    </td>
                   </tr>
                 </table>
               </div>
-              <el-button icon="el-icon-remove-outline"></el-button>
             </div>
           </div>
         </div>
@@ -153,6 +172,8 @@ export default {
       selectedRightTable: [],
       isEditing: false,
       showAddButton: false,
+      // 添加一个新属性用于控制每行的删除按钮显示状态
+      rightTableRowDeleteVisibility: [],
     };
   },
   computed: {
@@ -162,7 +183,23 @@ export default {
       while (tableData.length && Object.values(tableData[tableData.length - 1]).every(value => value === '')) {
         tableData.pop();
       }
-      return tableData;
+      return tableData.map(row => {
+        if (row.outnum > 0) {
+          return {
+            ...row,
+            nameDisabled: true,
+            pronumDisabled: true,
+            inputStyle: { backgroundColor: '#f5f5f5', cursor: 'not-allowed' }
+          };
+        } else {
+          return {
+            ...row,
+            nameDisabled: false,
+            pronumDisabled: false,
+            inputStyle: {}
+          };
+        }
+      });
     }
   },
   methods: {
@@ -199,9 +236,7 @@ export default {
     generateNewIndex(buttonId) {
       const tableData = this.getTableData(buttonId);
       const lastRow = tableData.length? tableData[tableData.length - 1] : null;
-      const lastIndex = lastRow
-        ? parseInt(lastRow.num.split('-')[1]) || 0
-        : 0;
+      const lastIndex = lastRow? parseInt(lastRow.num.split('-')[1]) || 0 : 0;
       return `obj-${String(lastIndex + 1).padStart(2, '0')}`;
     },
     createRightTable() {
@@ -209,8 +244,8 @@ export default {
         id: this.tableCounter + 1,
         title: `表 ${this.tableCounter + 1}`,
         data: [],
-        isChecked: false, // 添加 isChecked 属性，初始化为 false
-        groupCode: `2024-${String(this.tableCounter + 1).padStart(2, '0')}` // 设置组编码
+        isChecked: false,
+        groupCode: `2024-${String(this.tableCounter + 1).padStart(2, '0')}`
       };
       this.rightTables.push(newTable);
       this.tableCounter++;
@@ -225,18 +260,53 @@ export default {
       if (!activeButtonId || selectedRightTableIndex === null) {
         return;
       }
-      // 只对选中的表进行操作
       if (this.rightTables[selectedRightTableIndex].isChecked) {
+        if (rowIndex === -1) {
+          const tableData = this.getTableData(activeButtonId);
+          tableData.forEach((item, index) => {
+            if (!item.name ||!item.pronum) {
+              Message.warning('产品名称和产品代码不能为空！');
+              return;
+            }
+            const newItem = {
+              num: this.rightTables[selectedRightTableIndex].data.length + 1,
+              name: item.name,
+              pronum: item.pronum,
+              density: 10000,
+              uniqueId: Math.random().toString(36).substring(2),
+              // 初始时不显示删除按钮
+              showDeleteButton: false,
+            };
+            this.rightTables[selectedRightTableIndex].data.push(newItem);
+          });
+          this.$set(this.rightTables, selectedRightTableIndex, this.rightTables[selectedRightTableIndex]);
+          return;
+        }
+        if (!row.name ||!row.pronum) {
+          Message.warning('产品名称和产品代码不能为空！');
+          return;
+        }
         const newItem = {
           num: this.rightTables[selectedRightTableIndex].data.length + 1,
           name: row.name,
           pronum: row.pronum,
           density: 10000,
-          uniqueId: Math.random().toString(36).substring(2) // 生成临时唯一 ID
+          uniqueId: Math.random().toString(36).substring(2),
+          // 初始时不显示删除按钮
+          showDeleteButton: false,
         };
         this.rightTables[selectedRightTableIndex].data.push(newItem);
-        // 更新选中表的数据显示
         this.$set(this.rightTables, selectedRightTableIndex, this.rightTables[selectedRightTableIndex]);
+        this.increaseOutnum(rowIndex);
+      }
+    },
+    increaseOutnum(rowIndex) {
+      const activeButtonId = this.activeButtonId;
+      if (!activeButtonId) return;
+      const tableData = this.getTableData(activeButtonId);
+      if (tableData[rowIndex]) {
+        tableData[rowIndex].outnum++;
+        this.$set(this.tableDataMap, activeButtonId, tableData);
       }
     },
     isReferenceTable(buttonId) {
@@ -260,15 +330,23 @@ export default {
       this.isEditing = true;
     },
     saveChanges() {
-      // 保存逻辑可以根据实际需求进行实现
       this.isEditing = false;
-      // 更新数据映射，去除空行
       const tableData = this.filteredTableData;
       this.$set(this.tableDataMap, this.activeButtonId, tableData);
     },
     toggleAddButton() {
       this.showAddButton =!this.showAddButton;
     },
+    handleMinusClick(index) {
+      const selectedRightTableIndex = this.activeRightTableIndex;
+      if (selectedRightTableIndex === null) return;
+      // 从当前选中的右侧表格数据中删除指定索引的行
+      this.rightTables[selectedRightTableIndex].data.splice(index, 1);
+      // 重新编号
+      this.rightTables[selectedRightTableIndex].data.forEach((item, newIndex) => {
+        item.num = newIndex + 1;
+      });
+    },
   },
 };
 </script>