计划单统计表-双击修改行信息

src/views/cost-allocation-total/inancialReconciliation.vue

@@ -75,15 +75,31 @@
     <a-card :bordered="false" style=" marginTop:10px;">
       <a-table
         bordered
-        rowKey="id"
+        rowKey="index"
         :columns="costAllocationColumns"
         :data-source="costAllocationData"
         :loading="loading"
+        :customRow="rowClick"
         :pagination="pagination"
         :scroll="{ x: 1500 }"
         @change="handleTableChange"
       >
+         <span slot="remarks" slot-scope="text, record">
+             <a-input placeholder="请输入" v-model="record.remarks" v-if="record.enter=='1'"></a-input>
+             <span v-if="record.enter=='0'">{{ record.remarks }}</span>
+          </span>
+          <span slot="processUnit" slot-scope="text, record">
+            <a-input placeholder="请输入" v-model="record.processUnit" v-if="record.enter=='1'"></a-input>
+            <span v-if="record.enter=='0'">{{ record.processUnit }}</span>
+        </span>
+        <span slot="option" slot-scope="text, record">
+            <a :disabled="record.enter=='0'"> 保存</a>
+            <a-divider type="vertical" />
+            <a :disabled="record.enter=='0'" @click="cancel(record)"> 取消</a>
+        </span>
+        
       </a-table>
+      
     </a-card>
 
     <!-- 详情 大抽屉 -->
@@ -113,8 +129,8 @@ export default {
         { title: '日期', width: 120, dataIndex: 'dverifyDate', className: 'replacecolor' },
         { title: '部门', width: 120, dataIndex: 'department', className: 'replacecolor'},
         { title: '业务员', width: 120, dataIndex: 'salesman', className: 'replacecolor' },
-        { title: '计划师傅/制单人', width: 150, dataIndex: 'maker', className: 'replacecolor' },
-        { title: '对单人(手输人)', width: 220, dataIndex: 'processUnit', align: 'left', className: 'replacecolor' },
+        { title: '计划师傅/制单人', width: 150, dataIndex: 'maker', className: 'replacecolor'},
+        { title: '对单人(手输人)', width: 220, dataIndex: 'processUnit', align: 'left', className: 'replacecolor', scopedSlots: { customRender: 'processUnit' }, },
         //  {
         //   title: '创建时间',
         //   dataIndex: 'createTime',
@@ -228,9 +244,15 @@ export default {
           title: '备注',
           width: 180,
           dataIndex: 'remarks',
-          customRender: t => ellipsis(t),
           className: 'replacecolor',
-          scopedSlots: { customRender: 'remarks' }
+          scopedSlots: { customRender: 'remarks' },
+        },
+        {
+          title: '操作',
+          width: 180,
+          dataIndex: 'option',
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'option' },
         },
 
       ],
@@ -261,6 +283,9 @@ export default {
           this.loading = false
           if (res.success) {
             this.costAllocationData = res.result.records
+            this.costAllocationData.map(item=>{
+              item.enter = '0'
+            })
             this.pagination = {
               total: res.result.total,
               current: res.result.current,
@@ -280,6 +305,21 @@ export default {
       this.queryParam = {}
       this.getCostList()
     },
+    rowClick(record)  {
+      return {
+        on: {
+          dblclick: () => {
+            record.enter ='1'
+            this.$forceUpdate()
+          }
+        }
+      }
+    },
+
+    cancel(record){
+      record.enter = '0'
+      this.$forceUpdate()
+    },
 
     handleTableChange(pagination, filters, sorter) {
       this.queryParam.pageNo = pagination.current