15.7 输入框优化

src/views/interaction_manage/registrationDetails.vue

@@ -31,16 +31,15 @@
           <el-table-column prop="Amount" label="付款金额（元）" align="center" min-width="140">
             <template slot-scope="scope">
               <div v-if="scope.row.Enable == 1">
-                <!-- 如果数据为空，则默认显示输入框 -->
-                <div v-if="!scope.row.Amount">
-                  <el-input style="width: 90%" type="number" v-model="inputModel[scope.$index]" @blur="handleBlur(scope.$index, scope.row)"></el-input>
-                </div>
                 <!-- 如果数据不为空，则双击后显示输入框 -->
-                <div v-else @dblclick="handleDoubleClick(scope.$index, scope.row)">
-                  <span class="editsty" v-if="editingIndex !== scope.$index">
+                <div v-if="scope.row.isInput" @dblclick="handleDoubleClick(scope.$index, scope.row)">
+                  <span class="editsty" v-if="scope.row.isInput">
                     {{ scope.row.Amount }}
                   </span>
-                  <el-input style="width: 90%" type="number" v-if="editingIndex === scope.$index" v-model="inputModel[scope.$index]" @blur="handleBlur(scope.$index, scope.row)"></el-input>
+                </div>
+                <!-- 如果数据为空，则默认显示输入框 -->
+                <div v-else>
+                  <el-input style="width: 90%" type="number" @input="handleInput(scope.row)" v-model.number="scope.row.Amount" @blur="handleBlur(scope.$index, scope.row)"></el-input>
                 </div>
               </div>
               <span v-else>{{ scope.row.Amount }}</span>
@@ -62,8 +61,6 @@ export default {
       tableData: [],
       showDetails: false,
       detailsList: [],
-      editingIndex: -1,
-      inputModel: {},
       chartData: [],
       shareInfo: {},
     };
@@ -82,32 +79,23 @@ export default {
     // 关闭了弹框
     cancelHandle() {
       this.detailsList = [];
-      this.inputModel = {};
-      this.editingIndex = -1;
       this.showDetails = false;
       this.shareInfo = {};
     },
     // 双击切换输入框
     handleDoubleClick(index, row) {
-      this.editingIndex = index;
-      this.inputModel[index] = row.Amount;
+      row.isInput = false;
     },
     // 失去焦点后的请求
     handleBlur(index, row) {
-      const newValue = this.inputModel[index];
-
-      // 发送请求逻辑...
-      console.log(`发送请求，索引：${index}, 新值：${newValue}`);
-
       // 可能需要更新tableData来反映新输入的值
-      row.Amount = newValue;
-      this.editAmount(newValue, row);
+      this.editAmount(row);
       // 完成编辑，隐藏输入框
-      this.editingIndex = -1;
+      row.isInputBol = row.Amount && row.Amount > 0 ? true : false;
     },
     // 输入框的值
-    handleInput(index, row) {
-      row.Amount = this.inputModel[index];
+    handleInput(row) {
+      row.Amount = row.Amount ? row.Amount : 0;
     },
     // 获取数据
     async getDataList() {
@@ -126,14 +114,20 @@ export default {
         BannerId: row.BannerId,
       });
       if (res.Ret === 200) {
-        this.detailsList = res.Data || [];
+        const arr = res.Data || [];
+        this.detailsList = arr.map((item) => {
+          return {
+            ...item,
+            isInput: item.Amount && item.Amount > 0 ? true : false,
+          };
+        });
       }
     },
     // 修改金额
-    async editAmount(Amount, row) {
+    async editAmount(row) {
       const res = await departInterence.getResearchStatisticsAmount({
         YbResearchSignupStatisticsId: row.YbResearchSignupStatisticsId,
-        Amount,
+        Amount: row.Amount,
       });
       if (res.Ret === 200) {
         this.$message.success("修改成功");