物资登记表子表

src/views/system/MaterialRegistration.vue

@@ -207,7 +207,20 @@
         },
         // 获取数据
         getData(){
-            
+            // this.dataSource.push({
+            //   code:'1',
+            //   name:'2',
+            //   model:'1',
+            //   buyTime:'1',
+            //   buyNum:'1',
+            //   unit:'1',
+            //   amount:'1',
+            //   useId:'1',
+            //   type:'1',
+            //   supply:'1',
+            //   remarks:'1',
+            //   source:'1'
+            // })
         },
         // 删除
         handleDelete(){

src/views/system/modules/DetailMaterialRegistration.vue

@@ -4,11 +4,9 @@
     width="55%"
     :closable="true"
     @cancel="close"
+    @ok="handelOk"
     :visible="visible"
   >
-  <template slot="footer">
-      <a-button @click="close">关闭</a-button>
-    </template>
    <a-card :bordered="false">
      <a-spin :spinning="confirmLoading">
       <a-form :model="formState"  >
@@ -57,23 +55,98 @@
 
       <a-card :bordered="false" >
           <div class="purchase-order-table"  >
-              <h6 class="table-title">维修服务记录</h6>
+            <div >
+               <h6 class="table-title" style="float: left">维修服务记录</h6>
+                <a-button @click="addList" type="primary" style="float: right;position: relative;z-index: 11" >新增</a-button>
+            </div>
               <a-table
                 :columns="Columns"
                 :data-source="List"
                 bordered
                 :pagination="false"
               >
+              <span slot="headCode" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.headCode}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.headCode"/>
+              </span>
+              <span slot="infoDate" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.infoDate}}</span>
+                  <a-date-picker
+                     style="width: 100%"
+                     placeholder="请选择时间"
+                    v-model="record.infoDate"
+                    v-if="record.state=='1'"
+                   />
+              </span>
+              <span slot="items" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.items}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.items"/>
+              </span>
+              <span slot="cost" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.cost}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.cost"/>
+              </span>
+              <span slot="remarks" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.remarks}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.remarks"/>
+              </span>
+               <span slot="operation" slot-scope="text, record">
+                 <a @click="handleEdit(record)">编辑</a>
+                 <a-divider type="vertical" />
+                 <a @click="handleDetail(record)" style="color:red">删除</a>
+                 <a-divider type="vertical" v-if="record.state=='1'"/>
+                 <a @click="handleCl(record)" style="color:red" v-if="record.state=='1'">取消</a>
+               </span>
               </a-table>
           </div>
            <div class="purchase-order-table" >
-              <h6 class="table-title">领用记录</h6>
+             <div>
+               <h6 class="table-title" style="float: left">领用记录</h6>
+                <a-button @click="addList1" type="primary" style="float: right;position: relative;z-index: 11" >新增</a-button>
+            </div>
               <a-table
                 :columns="Columns1"
                 :data-source="List1"
                 bordered
                 :pagination="false"
               >
+              <span slot="headCode" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.headCode}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.headCode"/>
+              </span>
+              <span slot="infoDate" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.infoDate}}</span>
+                  <a-date-picker
+                     style="width: 100%"
+                     placeholder="请选择时间"
+                    v-model="record.infoDate"
+                    v-if="record.state=='1'"
+                   />
+              </span>
+              <span slot="items" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.items}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.items"/>
+              </span>
+              <span slot="cost" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.cost}}</span>
+                 <a-date-picker
+                     style="width: 100%"
+                     placeholder="请选择时间"
+                    v-model="record.cost"
+                    v-if="record.state=='1'"
+                   />
+              </span>
+              <span slot="remarks" slot-scope="text, record">
+                 <span v-if="record.state=='0'">{{record.remarks}}</span>
+                 <a-input v-else placeholder="请输入" v-model="record.remarks"/>
+              </span>
+              <span slot="operation" slot-scope="text, record">
+                 <a @click="handleEdit(record)">编辑</a>
+                 <a-divider type="vertical" />
+                 <a @click="handleDetail(record)" style="color:red">删除</a>
+                  <a-divider type="vertical" v-if="record.state=='1'"/>
+                 <a @click="handleCl1(record)" style="color:red" v-if="record.state=='1'">取消</a>
+               </span>
               </a-table>
           </div>
       </a-card>
@@ -103,31 +176,44 @@ export default {
             title: '主要信息编号',
             align: "center",
             dataIndex: 'headCode',
-            width: 200
+            width: 160,
+            scopedSlots: { customRender: 'headCode' },
           },
           {
             title: '日期',
             align: "center",
             dataIndex: 'infoDate',
-            width: 120
+            width: 180,
+            scopedSlots: { customRender: 'infoDate' },
+            
           },
           {
             title: '维修项目',
             align: "center",
             dataIndex: 'items',
-            width: 200
+            width: 180,
+            scopedSlots: { customRender: 'items' },
           },
           {
             title: '费用',
             align: "center",
             dataIndex: 'cost',
-            width: 120
+            width: 120,
+            scopedSlots: { customRender: 'cost' },
           },
           {
             title: '备注',
             align: "center",
             dataIndex: 'remarks',
-            width: 120
+            width: 120,
+            scopedSlots: { customRender: 'remarks' },
+          },
+          {
+            title: '操作',
+            align: "center",
+            dataIndex: 'operation',
+            scopedSlots: { customRender: 'operation' },
+            width: 180
           },
         ],
          Columns1:[
@@ -136,31 +222,43 @@ export default {
             title: '主要信息编号',
             align: "center",
             dataIndex: 'headCode',
-            width: 200
+            width: 160,
+            scopedSlots: { customRender: 'headCode' },
           },
           {
             title: '领用日期',
             align: "center",
             dataIndex: 'infoDate',
-            width: 120
+            width: 180,
+            scopedSlots: { customRender: 'infoDate' },
           },
           {
             title: '领用人',
             align: "center",
             dataIndex: 'items',
-            width: 200
+            width: 160,
+            scopedSlots: { customRender: 'items' },
           },
           {
             title: '归还日期',
             align: "center",
             dataIndex: 'cost',
-            width: 120
+            width: 180,
+            scopedSlots: { customRender: 'cost' },
           },
           {
             title: '备注',
             align: "center",
             dataIndex: 'remarks',
-            width: 120
+            width: 120,
+            scopedSlots: { customRender: 'remarks' },
+          },
+          {
+            title: '操作',
+            align: "center",
+            dataIndex: 'operation',
+            scopedSlots: { customRender: 'operation' },
+            width: 180
           },
         ],
         List:[],
@@ -172,13 +270,80 @@ export default {
   props: {
     
   },
-  created() {},
+  created() {
+    this.getData()
+  },
   mounted() {},
   methods: {
     close(){
         this.visible = false
+        this.List =[]
+        this.List1=[]
+    },
+    getData(){
+      // this.List.push({
+      //   headCode:'1',
+      //   infoDate:'1',
+      //   items:'1',
+      //   cost:'1',
+      //   remarks:'1',
+      //   state:'0',
+      // })
+      // this.List1.push({
+      //   headCode:'1',
+      //   infoDate:'1',
+      //   items:'1',
+      //   cost:'1',
+      //   remarks:'1',
+      //   state:'0'
+      // })
+    },
+    handleEdit(record){
+    record.state = '1'
+    record.default = 'edit'
+  },
+  addList(){
+        var line ={
+        headCode:'',
+        infoDate:'',
+        items:'',
+        cost:'',
+        remarks:'',
+        state:'1',
+        default:'add'
+      }
+      this.List.unshift(line)
+  },
+  addList1(){
+        var line ={
+        headCode:'',
+        infoDate:'',
+        items:'',
+        cost:'',
+        remarks:'',
+        state:'1',
+        default:'add'
+      }
+      this.List1.unshift(line)
+  },
+  handleCl(record){
+    if(record.default == 'add'){
+      this.List.shift()
+    }else if(record.default == 'edit'){
+      record.state ='0'
     }
+  },
+  handleCl1(record){
+    if(record.default == 'add'){
+      this.List1.shift()
+    }else if(record.default == 'edit'){
+      record.state ='0'
+    }
+  },
+  handelOk(){
+
   }
+ }
 }
 </script>