فهرست منبع

前端孟祥旭

gjy 4 سال پیش
والد
کامیت
5ccabc11a5
1فایلهای تغییر یافته به همراه217 افزوده شده و 296 حذف شده
  1. 217 296
      src/views/warehouse/warehouseManagementAdd.vue

+ 217 - 296
src/views/warehouse/warehouseManagementAdd.vue

@@ -27,13 +27,7 @@
       :rules="mainReportAdd"
       :rules="mainReportAdd"
       :model="deptBudgetList"
       :model="deptBudgetList"
     >
     >
-      <!-- <div class="remark">
-        <h3>基本信息</h3>
-        <p style="color: #8890b1">
-          注:基本信息和货物信息均为必填项,“*” 标记的条目提交后不可修改。
-        </p>
-      </div> -->
-
+     
       <ws-info-table>
       <ws-info-table>
         <!--仓库名称-->
         <!--仓库名称-->
         <ws-form-item
         <ws-form-item
@@ -50,6 +44,15 @@
             :rules="ruleDeptBudget"
             :rules="ruleDeptBudget"
           />
           />
         </ws-form-item>
         </ws-form-item>
+        <!--负责人-->
+        <ws-form-item label="负责人" span="1" prop="buyer" class="readonly">
+          <ws-input
+            v-model="deptBudgetList.buyer"
+            placeholder="请输入负责人姓名"
+            maxlength="100"
+            size="small"
+          />
+        </ws-form-item>
 
 
         <!--负责人电话-->
         <!--负责人电话-->
         <ws-form-item label="负责人电话" span="1" prop="shippingType">
         <ws-form-item label="负责人电话" span="1" prop="shippingType">
@@ -151,37 +154,68 @@
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--卖方-->
-        <ws-form-item label="货仓编号" span="1" prop="contractNo">
+       <!--仓库编号-->
+      <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
+          <ws-input
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
+            size="small"
+            :rules="ruleDeptBudget"
+          />
+        </ws-form-item>
+
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
             v-model.number="deptBudgetList.buyerPhone"
             v-model.number="deptBudgetList.buyerPhone"
-            
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--货源地-->
-        <ws-form-item label="货源地" span="1" prop="sourceGoods">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.sourceGoods"
-            placeholder="请输入货源地"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
+           
+        </ws-form-item>
+        
+        <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
+          <ws-input
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
+            size="small"
+            :rules="ruleDeptBudget"
+          />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--买方电话-->
-        <ws-form-item label="买方电话" span="1" prop="contractNo">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
             v-model.number="deptBudgetList.buyerPhone"
             v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--交货地-->
-        <ws-form-item label="交货地" span="1" prop="placeDelivery">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
             v-model="deptBudgetList.placeDelivery"
             v-model="deptBudgetList.placeDelivery"
             placeholder="请输入交货地"
             placeholder="请输入交货地"
@@ -190,389 +224,247 @@
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--卖方电话-->
-        <ws-form-item label="卖方电话" span="1" prop="sellerPhone">
+        <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
           <ws-input
           <ws-input
-            v-model="deptBudgetList.sellerPhone"
-            placeholder="请输入卖方电话"
-            maxlength="100"
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
             size="small"
             size="small"
+            :rules="ruleDeptBudget"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--包装方式-->
-        <ws-form-item label="包装方式" span="1" prop="packingMethod">
-          <ws-select
-            v-model="deptBudgetList.packingMethod"
-            placeholder=""
-            class="typeselect"
-            :value="value1"
-            @change="selectpackingMethod"
-          >
-            <ws-option
-              v-for="item in packtypeList"
-              :key="item.constKey"
-              :label="item.constValue"
-              :value="item.constValue"
-            />
-          </ws-select>
-        </ws-form-item>
-
-        <!--重量(吨)-->
-        <ws-form-item label="重量(吨)" span="1" prop="weight">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.weight"
-            placeholder="请输入重量(吨)"
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--验收方式-->
-        <ws-form-item label="验收方式" span="1" prop="acceptanceMethod">
-          <el-select
-            v-model="deptBudgetList.acceptanceMethod"
-            placeholder="请选择验收方式"
-            style="width: 100%"
-            filterable
-            @change="selectunitList"
-          >
-            <el-option
-              v-for="(item, index) in unitList"
-              :key="item.constValue"
-              :label="item.constValue"
-              :value="item.constValue"
-            >
-              <span class="unit-left" style="float: left">
-                <span v-if="item.flag == 'delete'"> {{ item.constValue }}</span>
-                <!-- 新增文本框 -->
-                <div
-                  style="width: 160px"
-                  v-if="item.flag !== 'delete'"
-                  @click.stop
-                >
-                  <ws-input
-                    v-model="item.constValue"
-                    clearable
-                    maxlength="10"
-                    style="width: 100%"
-                  ></ws-input>
-                </div>
-              </span>
-              <span style="float: right; color: #8492a6; font-size: 13px">
-                <!-- 对号 -->
-                <i
-                  class="el-icon-check"
-                  style="line-height: 29px; margin-left: 10px"
-                  v-if="item.flag !== 'delete'"
-                  @click.stop="saveClick(item, index)"
-                ></i>
-                <!-- 编辑 -->
-                <i
-                  class="el-icon-edit"
-                  style="line-height: 29px; margin-left: 10px"
-                  v-if="item.flag == 'delete'"
-                  @click.stop="editClick(item, index)"
-                ></i>
-                <!-- 删除 -->
-                <i
-                  class="el-icon-delete"
-                  style="line-height: 29px"
-                  @click.stop="deleteClick(item, index)"
-                ></i>
-              </span>
-            </el-option>
-            <!-- 新增按钮 -->
-            <el-option value="" label="">
-              <div
-                style="
-                  text-align: right;
-                  border-top: 1px solid #dcdfe6;
-                  padding: 5px;
-                "
-              >
-                <ws-button type="primary" @click.stop="addClick">{{
-                  $t('button.add')
-                }}</ws-button>
-              </div>
-            </el-option>
-          </el-select>
-        </ws-form-item>
-
-        <!--溢短装(%)-->
-        <ws-form-item label="溢短装(%)" span="1" prop="overShort">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.overShort"
-            placeholder="请输入溢短装比例(%)"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
-        <!--交货日期(起)-->
-        <ws-form-item label="交货日期(起)" span="1" prop="deliveryDateStart">
-          <ws-date-picker
-            :picker-options="pickerBeginDateBefore"
-            v-model="deptBudgetList.deliveryDateStart"
-            type="date"
-            default-value="1980-01-01"
-            placeholder="请选择交货日期(起)"
-            format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd"
-          />
-        </ws-form-item>
-
-        <!--合同单价(元/吨)-->
+        <el-button icon="el-icon-search" circle></el-button>
         <ws-form-item
         <ws-form-item
-          class="readonly"
-          label="合同单价(元/吨)"
+          label="仓库编号"
           span="1"
           span="1"
-          prop="unitContractPrice"
+          prop="contractNo"
+          class="readonly"
         >
         >
           <ws-input
           <ws-input
-            v-model="deptBudgetList.unitContractPrice"
-            placeholder="请输入合同单价"
-            maxlength="100"
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
             size="small"
             size="small"
+            :rules="ruleDeptBudget"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--交货日期(止)-->
-        <ws-form-item label="交货日期(止)" span="1" prop="deliveryDateEnd">
-          <ws-date-picker
-            :picker-options="pickerBeginDateBefore"
-            v-model="deptBudgetList.deliveryDateEnd"
-            type="date"
-            default-value="1980-01-01"
-            placeholder="请选择交货日期(起)"
-            format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd"
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
+          <ws-input
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
+            maxlength="100"
+            size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--合同总价-->
-        <ws-form-item label="合同总价" span="1" prop="totalContractPrice">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.totalContractPrice"
-            placeholder="请输入合同总价"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
-
-        <!--签订日期-->
-        <ws-form-item label="签订日期" span="1" prop="signingDate">
-          <ws-date-picker
-            :picker-options="pickerBeginDateBefore"
-            v-model="deptBudgetList.signingDate"
-            type="date"
-            default-value="1980-01-01"
-            placeholder="请选择合同签订日期"
-            format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd"
+        <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
+          <ws-input
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
+            size="small"
+            :rules="ruleDeptBudget"
           />
           />
         </ws-form-item>
         </ws-form-item>
-      </ws-info-table>
-    </ws-form>
-    <div class="wenzi">
-      <h3>货物信息</h3>
-    </div>
-    <ws-form
-      ref="deptBudgetList"
-      :rules="ruleDeptBudget"
-      :model="deptBudgetList"
-    >
-      <!--货物信息-->
 
 
-      <ws-info-table>
-        <!--货名-->
-        <ws-form-item label="货名" span="1" prop="goodsName" class="readonly">
-          <ws-select
-            v-model="deptBudgetList.contractGoodsInfo.goodsName"
-            placeholder=""
-            class="typeselect"
-            @change="selectgoodsName"
-          >
-            <ws-option
-              v-for="item in goodnameList"
-              :key="item.constKey"
-              :label="item.constValue"
-              :value="item.constValue"
-            />
-          </ws-select>
-        </ws-form-item>
-
-        <!--水分(%)<=-->
-        <ws-form-item label="水分(%)" span="1" prop="waterContent">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractGoodsInfo.waterContent"
-            placeholder="请输入水分占比"
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--品级-->
-        <ws-form-item label="品级" span="1" prop="grade">
-          <ws-select
-            v-model="deptBudgetList.contractGoodsInfo.grade"
-            placeholder=""
-            class="typeselect"
-            @change="selectgrade"
-          >
-            <ws-option
-              v-for="item in gradeList"
-              :key="item.constKey"
-              :label="item.constValue"
-              :value="item.constValue"
-            />
-          </ws-select>
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
+          <ws-input
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
+            maxlength="100"
+            size="small"
+          />
+        </ws-form-item><ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
+          <ws-input
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
+            size="small"
+            :rules="ruleDeptBudget"
+          />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--杂质(%)<=-->
-        <ws-form-item label="杂质(%)" span="1" prop="impurity">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractGoodsInfo.impurity"
-            placeholder="请输入杂质占比(%)"
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--容量(克/升)>=-->
-        <ws-form-item label="容量(克/升)" span="1" prop="bulkDensity">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractGoodsInfo.bulkDensity"
-            placeholder="请输入容重"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
+        <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
+          <ws-input
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
+            size="small"
+            :rules="ruleDeptBudget"
+          />
+        </ws-form-item>
 
 
-        <!--霉变粒(%)<=-->
-        <ws-form-item label="霉变粒(%)" span="1" prop="mildewGrain">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractGoodsInfo.mildewGrain"
-            placeholder="请输入霉变粒占比(%)"
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--热损伤(%)<=-->
-        <ws-form-item label="热损伤(%)" span="1" prop="jiaorenli">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractGoodsInfo.jiaorenli"
-            placeholder="请输入输入热损伤占比(%)"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
-        <!--不完整粒(%)<=-->
-        <ws-form-item label="不完整粒(%)" span="1" prop="imperfectGrain">
+        <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractGoodsInfo.imperfectGrain"
-            placeholder="请输入不完整粒占比(%)"
-            maxlength="100"
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
             size="small"
             size="small"
+            :rules="ruleDeptBudget"
           />
           />
         </ws-form-item>
         </ws-form-item>
-      </ws-info-table>
-    </ws-form>
 
 
-    <div class="wenzi">
-      <h3>流程信息</h3>
-    </div>
-    <ws-form
-      ref="deptBudgetList"
-      :rules="ruleDeptBudget"
-      :model="deptBudgetList"
-    >
-      <!--流程信息-->
-
-      <ws-info-table>
-        <!--合同收入(元)-->
-        <ws-form-item label="合同收入(元)" span="1" prop="goodsNameKey">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractProcessInfo.goodsNameKey"
-            placeholder="请输入合同收入(元)"
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--已开发票(元)-->
-        <ws-form-item label="已开发票(元)" span="1" prop="goodsName">
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractProcessInfo.goodsName"
-            placeholder="请输入已开发票(元)"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
-
-        <!--费用支出(元)-->
-        <ws-form-item label="费用支出(元)" span="1" prop="waterContent">
+        <ws-form-item
+          label="仓库编号"
+          span="1"
+          prop="contractNo"
+          class="readonly"
+        >
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractProcessInfo.waterContent"
-            placeholder="请输入费用支出(元)"
-            maxlength="100"
+            v-model="deptBudgetList.contractNo"
+            placeholder="请输入仓库编号"
+            maxlength="20"
             size="small"
             size="small"
+            :rules="ruleDeptBudget"
           />
           />
         </ws-form-item>
         </ws-form-item>
 
 
-        <!--未开发票(元)-->
-        <ws-form-item label="未开发票(元)" span="1" prop="impurity">
+      <ws-form-item label="仓位储存(吨)" span="1" prop="contractNo">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractProcessInfo.impurity"
-            placeholder="请输入未开发票(元)"
+            v-model.number="deptBudgetList.buyerPhone"
+            placeholder="请输入仓位最大容量"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
-        <!--已完成发货量(吨)-->
-        <ws-form-item label="已完成发货量(吨)" span="1" prop="imperfectGrain">
+
+        <!--备注(选项)-->
+        <ws-form-item label="备注(选项)" span="1" prop="placeDelivery">
           <ws-input
           <ws-input
-            v-model="deptBudgetList.contractProcessInfo.imperfectGrain"
-            placeholder="请输入已完成发货量(吨)"
+            v-model="deptBudgetList.placeDelivery"
+            placeholder="请输入交货地"
             maxlength="100"
             maxlength="100"
             size="small"
             size="small"
           />
           />
         </ws-form-item>
         </ws-form-item>
-        <!--双章原件回收情况-->
-        <ws-form-item label="双章原件回收情况" span="1" prop="grade">
-          <ws-select
-            v-model="deptBudgetList.contractProcessInfo.grade"
-            placeholder=""
-            class="typeselect"
-            @change="selectChapterTwo"
-          >
-            <ws-option
-              v-for="item in ChapterTwoList"
-              :key="item.constKey"
-              :label="item.constValue"
-              :value="item.constValue"
-            />
-          </ws-select>
-        </ws-form-item>
       </ws-info-table>
       </ws-info-table>
     </ws-form>
     </ws-form>
 
 
-    <div class="wenzi">
-      <h3>备注信息</h3>
-    </div>
+   
     <ws-form
     <ws-form
       ref="deptBudgetList"
       ref="deptBudgetList"
       :rules="ruleDeptBudget"
       :rules="ruleDeptBudget"
       :model="deptBudgetList"
       :model="deptBudgetList"
     >
     >
-      <!--备注信息-->
-      <ws-input
-        v-model="deptBudgetList.remarks"
-        type="textarea"
-        row="3"
-        placeholder="请输入备注信息,不超过200字"
-        maxlength="200"
-      />
+      
       <ws-upload
       <ws-upload
         ref="upload"
         ref="upload"
         table-name="maintain_work_order"
         table-name="maintain_work_order"
@@ -585,7 +477,20 @@
         @onChange="onChange"
         @onChange="onChange"
         accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar"
         accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar"
       />
       />
+       <!--仓库定位-->
+      <ws-form-item label="仓库定位:" span="1" prop="seller" class="readonly">
+        
+          <ws-input
+            v-model="deptBudgetList.seller"
+            placeholder="请输入地名,北京"
+            maxlength="100"
+            size="small"
+          />
+        </ws-form-item>
+      
+        
     </ws-form>
     </ws-form>
+      <!-- 提交 -->
     <div style="text-align: right; padding: 10px" class="center">
     <div style="text-align: right; padding: 10px" class="center">
       <el-button
       <el-button
         class="bg-bottom"
         class="bg-bottom"
@@ -595,6 +500,7 @@
         >提交</el-button
         >提交</el-button
       >
       >
     </div>
     </div>
+
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
@@ -1493,4 +1399,19 @@ export default {
 /deep/.ws-info-table[data-v-850a44a6] .el-form-item .el-form-item__label {
 /deep/.ws-info-table[data-v-850a44a6] .el-form-item .el-form-item__label {
   width: 130px;
   width: 130px;
 }
 }
+.ws-info-table[data-v-850a44a6] .el-form-item{
+  width: 30%;
+}
+.readonly[data-v-096f9e7e]:after{
+  display: none;
+}
+.el-textarea__inner{
+  display: none;
+}
+.el-form[data-v-096f9e7e]{
+  margin-top: 50px;
+}
+.readonly{
+  width: 16%;
+}
 </style>
 </style>