物资登记表样式

src/views/system/modules/AddMaterialRegistration.vue

@@ -1,5 +1,7 @@
 <template>
+<div class="reply" ref = "replyModal">
   <a-modal
+  :getContainer ='()=>$refs.replyModal'
     :title="(defult == 'add')?'新增':'编辑'"
     width="85%"
     :closable="true"
@@ -7,57 +9,79 @@
     @ok="handleSubmit"
     :visible="visible"
   >
-    <a-spin :spinning="confirmLoading">
-      <a-form :model="formState"  >
-        <a-form-item label="编号" >
-          <a-input
-            placeholder="请输入编号"
-           v-model="formState.code"
-          />
-        </a-form-item>
+  <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form-model layout="inline" ref="form">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="编号" >
+                <a-input  placeholder="请输入编号" v-model="formState.code" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="设备名称"  >
+                <a-input placeholder="请输入" v-model="formState.name"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="型号"  >
+                <a-input placeholder="请输入" v-model="formState.model"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="购买日期"  >
+                 <a-date-picker   style="width: 100%" placeholder="请选择购买日期" v-model="buyTime" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="购买数量"  >
+                 <a-input placeholder="请输入购买数量" v-model="formState.buyNum"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="单位"  >
+                <a-input placeholder="请输入单位" v-model="formState.unit"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="购买金额"  >
+                <a-input placeholder="请输入购买金额" v-model="formState.amount"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="使用者"  >
+                <a-input placeholder="请输入" v-model="formState.useId"/>
+               </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="状态"  >
+                  <a-input placeholder="请输入" v-model="formState.type"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="供货方"  >
+                 <a-input placeholder="请输入供货方" v-model="formState.supply"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="来源"  >
+                 <a-input placeholder="请输入来源" v-model="formState.source"/>
+              </a-form-item>
+            </a-col>
+            </a-row>
+            <a-row :gutter="24">
+              <a-col :md="24" :sm="8"> 
+               <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume" style="height:100px !important">
+                 <a-input type="textarea" placeholder="请输入" v-model="formState.remarks"/>
+               </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
 
-        <a-form-item label="设备名称"  >
-          <a-input placeholder="请输入" v-model="formState.name"/>
-        </a-form-item>
-        <a-form-item label="型号"  >
-            <a-input placeholder="请输入" v-model="formState.model"/>
-        </a-form-item>
-        <a-form-item label="购买日期"  >
-            <a-date-picker
-            style="width: 100%"
-            placeholder="请选择购买日期"
-            v-model="buyTime"
-          />
-        </a-form-item>
-        <a-form-item label="购买数量"  >
-          <a-input placeholder="请输入购买数量" v-model="formState.buyNum"/>
-        </a-form-item>
-        <a-form-item label="单位"  >
-          <a-input placeholder="请输入单位" v-model="formState.unit"/>
-        </a-form-item>
-        <a-form-item label="购买金额"  >
-          <a-input placeholder="请输入购买金额" v-model="formState.amount"/>
-        </a-form-item>
-        <a-form-item label="使用者"  >
-          <a-input placeholder="请输入" v-model="formState.useId"/>
-        </a-form-item>
-        <a-form-item label="状态"  >
-          <a-input placeholder="请输入" v-model="formState.type"/>
-        </a-form-item>
-        <a-form-item label="供货方"  >
-          <a-input placeholder="请输入供货方" v-model="formState.supply"/>
-        </a-form-item>
-        <a-form-item label="来源"  >
-          <a-input placeholder="请输入来源" v-model="formState.source"/>
-        </a-form-item>
-         <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume">
-          <a-input type="textarea" placeholder="请输入" v-model="formState.remarks"/>
-        </a-form-item>
-      </a-form>
-    </a-spin>
-    <a-divider style="height: 1px; background-color: balck" />
-    <a-card :bordered="false" >
-          <div class="purchase-order-table"  >
+      <a-card :bordered="false" >
+         <div class="purchase-order-table"  >
             <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>
@@ -67,6 +91,7 @@
                 :data-source="List"
                 bordered
                 :pagination="false"
+                :scroll="{ y: 500 }"
               >
               <span slot="headCode" slot-scope="text, record">
                  <span v-show="record.state=='0'">{{record.headCode}}</span>
@@ -102,6 +127,8 @@
                </span>
               </a-table>
           </div>
+      </a-card>
+    <a-card :bordered="false" >
            <div class="purchase-order-table" >
              <div>
                <h6 class="table-title" style="float: left">领用记录</h6>
@@ -112,6 +139,7 @@
                 :data-source="List1"
                 bordered
                 :pagination="false"
+                :scroll="{ y: 500 }"
               >
               <span slot="headCode" slot-scope="text, record">
                  <span v-if="record.state=='0'">{{record.headCode}}</span>
@@ -152,9 +180,10 @@
                </span>
               </a-table>
           </div>
-      </a-card>
+      </a-card> 
 
   </a-modal>
+</div>
 </template>
 
 <script>
@@ -396,21 +425,22 @@ export default {
 </script>
 
 <style scoped lang="less">
-/deep/.ant-form{
-    display: flex !important;
-    width: 100%;
-    flex-wrap: wrap;
-    justify-content: start;
-}
+// /deep/.ant-form{
+//     display: flex !important;
+//     width: 100%;
+//     flex-wrap: wrap;
+//     justify-content: start;
+// }
 
-/deep/ .ant-form-item{
-    display: flex;
-    width: 24%;
-    justify-content: start;
-}
-/deep/ .ant-form-item-label{
-  width: 21%;
-}
+// /deep/ .ant-form-item{
+//     display: flex;
+//     width: 24%;
+//     justify-content: start;
+//     margin-right: 1%;
+// }
+// /deep/ .ant-form-item-label{
+//   width: 21%;
+// }
 .table-title {
   margin: 0;
   border: 1px solid #e8e8e8;
@@ -434,27 +464,42 @@ export default {
   margin: 13px 0;
 }
 /deep/ .ant-card-body{
-      padding: 0px 32px !important;
+      padding: 16px 32px !important;
+      margin-bottom: 1%;
+
 }
 /deep/ .ant-divider-horizontal{
   margin: 13px 0;
   margin-bottom: 30px;
 }
-/deep/ .ant-form-item-control-wrapper{
-  width: 80%;
+// /deep/ .ant-form-item-control-wrapper{
+//   width: 80%;
+// }
+// .nresume{
+//   width: 100% !important;
+// }
+// /deep/ .nresume .ant-form-item-label{
+//   width: 5% !important;
+// }
+// /deep/ .nresume .ant-form-item-control-wrapper{
+//   width: 91% !important;
+// }
+/deep/ .nresume .ant-input{
+  height: 100px !important;
 }
-.nresume{
-  width: 100% !important;
+/deep/ .ant-modal-content {
+  background-color: #f0f2f5 !important;
 }
-/deep/ .nresume .ant-form-item-label{
-  width: 5% !important;
+/deep/ .ant-modal-footer {
+  background-color: #fff !important;
 }
-/deep/ .nresume .ant-form-item-control-wrapper{
-  width: 91% !important;
+/deep/ .ant-modal-body{
+  margin: 0px !important;
+  padding: 0px 10px;
+  margin-top: 1% !important;
 }
-/deep/ .nresume .ant-input{
-  height: 100px !important;
+/deep/ .ant-card{
+  border-radius: 10px;
 }
 
-
 </style>