ysy 1 an în urmă
părinte
comite
63148b04d4

+ 179 - 24
src/views/produce/components/jobBooking/components/packingTgBom.vue

@@ -1,30 +1,185 @@
 <template>
-    <div>
-      <div class="title_box rx-bc mt6">
-        <div class="name">打包信息 </div>
-  
-        <div class="rx-bc">
-       
-        </div>
+  <div>
+    <div class="title_box rx-bc mt6">
+      <div class="name"
+        >打包信息 ({{
+          isWarehousing ? list.length : item.pickOutInList.length || 0
+        }})个
       </div>
-  
-      
-  
-  
-  
+
+      <div class="rx-bc"> </div>
     </div>
-  </template>
-  
-  <script>
-    export default {
-      data() {
-        return {};
+
+    <el-table
+      ref="oneJobQualityBom"
+      class="table_content"
+      :max-height="600"
+      :data="isWarehousing ? list : item.pickOutInList"
+      tooltip-effect="dark"
+      style="width: 100%"
+      stripe
+      border
+    >
+      <el-table-column label="序号" type="index" width="55">
+        <template slot-scope="{ row, $index }">
+          {{ $index + 1 }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="编码" type="code" minWidth="110">
+        <template slot-scope="{ row, $index }">
+          {{ row.code }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="名称" type="name" minWidth="110">
+        <template slot-scope="{ row, $index }">
+          {{ row.name }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="型号" type="modelType">
+        <template slot-scope="{ row, $index }">
+          {{ row.modelType }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="规格" type="specification">
+        <template slot-scope="{ row, $index }">
+          {{ row.specification }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="牌号" type="brandNum">
+        <template slot-scope="{ row, $index }">
+          {{ row.brandNum }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="刻码" type="engrave">
+        <template slot-scope="{ row, $index }">
+          <span v-if="isDetails"> {{ row.extInfo.engrave }}</span>
+          <el-input
+            v-else
+            size="mini"
+            class="content_num"
+            v-model="row.extInfo.engrave"
+            placeholder="请输入物料代号"
+          />
+
+        </template>
+      </el-table-column>
+
+      <el-table-column label="物料代号" type="materielCode">
+        <template slot-scope="{ row, $index }">
+          <span v-if="isDetails"> {{ row.extInfo.materielCode }}</span>
+          <el-input
+            v-else
+            size="mini"
+            class="content_num"
+            v-model="row.extInfo.materielCode"
+            placeholder="请输入物料代号"
+          />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="客户代号" type="clientCode">
+        <template slot-scope="{ row, $index }">
+          <span v-if="isDetails"> {{ row.extInfo.clientCode }}</span>
+          <el-input
+            v-else
+            size="mini"
+            class="content_num"
+            v-model="row.extInfo.clientCode"
+            placeholder="请输入客户代号"
+          />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="位置" width="110" type="feedQuantity">
+        <template slot-scope="{ row, $index }">
+          {{ row.extInfo.position }}
+        </template>
+      </el-table-column>
+
+
+
+      <el-table-column label="工序重量" type="newWeight">
+        <template slot-scope="{ row, $index }">
+          <span> {{ row.extInfo.newWeight }}  {{ row.extInfo.weightUnit }} </span>
+        </template>
+      </el-table-column>
+
+
+      
+
+      <el-table-column label="处置" type="">
+        <template slot-scope="{ row, $index }">
+          <span>入库 </span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column label="发货(包装)码" type="" width="200">
+        <template slot-scope="{ row, $index }">
+            <el-input
+            size="mini"
+            class="content_num"
+            v-model="row.sendCode"
+            placeholder="发货(包装)码"
+            :disabled="isDetails"
+          />
+        </template>
+      </el-table-column>
+
+
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      item: {
+        type: Object,
+        default: () => {}
       },
-  
-      components: {},
-      methods: {
 
+      list: {
+        type: Array,
+        default: () => []
+      },
+
+      isDetails: {
+        type: Boolean,
+        default: false
+      },
+      isWarehousing: {
+        type: Boolean,
+        default: false
+      },
+
+      isDetails: {
+        type: Boolean,
+        default: false
       }
-    };
-  </script>
-  
+    },
+
+    data() {
+      return {};
+    },
+
+    components: {},
+    methods: {}
+  };
+</script>
+
+<style lang="scss" scoped>
+
+.content_num {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    --input-background-color: #f0f8f2;
+  }
+</style>

+ 283 - 361
src/views/produce/components/jobBooking/index.vue

@@ -1,428 +1,350 @@
 <template>
   <div>
     <div class="top_fixed">
-      <el-button type="primary" size="mini" @click="save(2, 'all')"
-        >一键报工</el-button
-      >
-      <el-button type="primary" size="mini" @click="removeCacheFn('all')"
-        >清空缓存</el-button
-      >
-      <el-button type="primary" size="mini" @click="save(1, 'all')"
-        >缓存</el-button
-      >
+      <el-button type="primary" size="mini" @click="save(2, 'all')">一键报工</el-button>
+      <el-button type="primary" size="mini" @click="removeCacheFn('all')">清空缓存</el-button>
+      <el-button type="primary" size="mini" @click="save(1, 'all')">缓存</el-button>
     </div>
 
     <div class="job_box">
-      <div
-        v-for="(item, index) in List"
-        :key="index"
-        class="card_box"
-        v-if="isLoad"
-      >
+      <div v-for="(item, index) in List" :key="index" class="card_box" v-if="isLoad">
         <div class="title_box rx-bc">
           <div class="name">工单信息 </div>
 
           <div class="rx-bc">
-            <el-button
-              type="text"
-              size="mini"
-              @click="openPicking(item.id, item)"
-              >添加物料</el-button
-            >
-            <el-button type="text" size="mini" @click="removeCacheFn(item.id)"
-              >清空缓存</el-button
-            >
-            <el-button type="text" size="mini" @click="save(1, index)"
-              >缓存</el-button
-            >
+            <el-button type="text" size="mini" @click="openPicking(item.id, item)">添加物料</el-button>
+            <el-button type="text" size="mini" @click="removeCacheFn(item.id)">清空缓存</el-button>
+            <el-button type="text" size="mini" @click="save(1, index)">缓存</el-button>
           </div>
         </div>
 
         <workOrderBom :item="item"></workOrderBom>
-        <paramBom
-          v-if="item.paramDetailList.length != 0"
-          :list="item.paramDetailList"
-        ></paramBom>
-
-        <jobBom
-          :item="item"
-          :notFormed="item.notFormedList"
-          :warehouseList="warehouseList"
-        ></jobBom>
-
-        <deviceBom
-          v-if="item.equipmentList.length != 0"
-          :list="item.equipmentList"
-        ></deviceBom>
-
-        <modelBom
-          v-if="item.modelList.length != 0"
-          :list="item.modelList"
-          pattern="job"
-          ref="modelRef"
-        ></modelBom>
-
-        <palletBom
-          v-if="item.palletList.length != 0"
-          :list="item.palletList"
-        ></palletBom>
-
-        <revolvingDiskBom
-          v-if="item.revolvingDiskList.length > 0"
-          pattern="job"
-          :list="objData.revolvingDiskList"
-        >
+        <paramBom v-if="item.paramDetailList.length != 0" :list="item.paramDetailList"></paramBom>
+
+        <jobBom :item="item" :notFormed="item.notFormedList" :warehouseList="warehouseList"></jobBom>
+
+        <deviceBom v-if="item.equipmentList.length != 0" :list="item.equipmentList"></deviceBom>
+
+        <modelBom v-if="item.modelList.length != 0" :list="item.modelList" pattern="job" ref="modelRef"></modelBom>
+
+        <palletBom v-if="item.palletList.length != 0" :list="item.palletList"></palletBom>
+
+        <revolvingDiskBom v-if="item.revolvingDiskList.length > 0" pattern="job" :list="objData.revolvingDiskList">
         </revolvingDiskBom>
 
-        <semiProductJobBom
-          :singleReport="item.singleReport"
-          v-if="
-            item.semiProductList &&
-            item.semiProductList.length != 0 &&
-            taskObj?.taskType != 4 &&
-            taskObj?.taskType != 6
-          "
-          :item="item"
-          :list="item.semiProductList"
-          :equipmentList="item.equipmentList"
-        ></semiProductJobBom>
-
-        <oneJobQualityBom
-          :singleReport="item.singleReport"
-          v-if="
-            item.semiProductList &&
-            item.semiProductList.length != 0 &&
-            taskObj?.taskType == 6 &&
-            item.singleReport == 1
-          "
-          :item="item"
-          :list="item.semiProductList"
-        >
+        <semiProductJobBom :singleReport="item.singleReport" v-if="
+          item.semiProductList &&
+          item.semiProductList.length != 0 &&
+          taskObj.type != 4 &&
+          taskObj.type != 6
+        " :item="item" :list="item.semiProductList" :equipmentList="item.equipmentList"></semiProductJobBom>
+
+        <oneJobQualityBom :singleReport="item.singleReport" v-if="
+          item.semiProductList &&
+          item.semiProductList.length != 0 &&
+          taskObj.type == 6 &&
+          item.singleReport == 1
+        " :item="item" :list="item.semiProductList">
         </oneJobQualityBom>
 
-        <byProductBom
-          v-if="item.productRecycleList.length != 0"
-          :list="item.productRecycleList"
-        >
+        <byProductBom v-if="item.productRecycleList.length != 0" :list="item.productRecycleList">
         </byProductBom>
 
-        <turnoverBom
-          v-if="item.turnover.length != 0"
-          :list="item.turnover"
-          :wordItem="item"
-          pattern="job"
-        >
+        <turnoverBom v-if="item.turnover.length != 0" :list="item.turnover" :wordItem="item" pattern="job">
         </turnoverBom>
 
-        <aridRegion
-          v-if="item.aridRegionList.length != 0"
-          :list="item.aridRegionList"
-          :isType="true"
-        ></aridRegion>
-
-        <packingBom
-          :workOrderId="item.id"
-          :objData="item"
-          ref="packRef"
-        ></packingBom>
-
-
-
-        <packingTgBom
-          v-if="
-            item.pickOutInList &&
-            item.pickOutInList.length != 0 &&
-            taskObj?.taskType == 4 &&
-            clientEnvironmentId == 3
-          "
-          :list="item.pickOutInList"
-          :item="item"
-        ></packingTgBom>
+        <aridRegion v-if="item.aridRegionList.length != 0" :list="item.aridRegionList" :isType="true"></aridRegion>
+
+        <packingBom :workOrderId="item.id" :objData="item" ref="packRef"
+          v-if='taskObj.type == 4 && clientEnvironmentId != 3 && item'></packingBom>
+
+        <packingTgBom v-if="
+          item.pickOutInList &&
+          item.pickOutInList.length != 0 &&
+          taskObj.type == 4 &&
+          clientEnvironmentId == 3
+        " :list="item.pickOutInList" :item="item"></packingTgBom>
       </div>
     </div>
 
-    <pickingList
-      isType="job"
-      ref="pickingListRef"
-      @allSelection="allSelection"
-    ></pickingList>
+    <pickingList isType="job" ref="pickingListRef" @allSelection="allSelection"></pickingList>
   </div>
 </template>
 
 <script>
-  import { listByIdsReport } from '@/api/produce/job';
-  import { getWarehouseList } from '@/api/produce/index';
-  import pickingList from '../picking/pickingList.vue';
-
-  import workOrderBom from '../feeding/components/workOrderBom.vue';
-  import paramBom from '../feeding/components/paramBom.vue';
-  import jobBom from './components/jobBom.vue';
-  import deviceBom from '../feeding/components/deviceBom.vue';
-  import modelBom from '../feeding/components/modelBom.vue';
-  import palletBom from './components/palletBom.vue';
-  import revolvingDiskBom from '../feeding/components/revolvingDiskBom.vue';
-  import oneJobQualityBom from './components/oneJobQualityBom.vue';
-  import semiProductJobBom from './components/semiProductJobBom.vue';
-
-  import byProductBom from './components/byProductBom.vue';
-  import turnoverBom from './components/turnoverBom.vue';
-  import aridRegion from '../feeding/components/aridRegion.vue';
-  import packingBom from './components/packingBom.vue';
-  import packingTgBom from './components/packingTgBom';
-  export default {
-    components: {
-      pickingList,
-
-      workOrderBom,
-      paramBom,
-      jobBom,
-      deviceBom,
-      modelBom,
-      palletBom,
-      revolvingDiskBom,
-      oneJobQualityBom,
-      semiProductJobBom,
-      byProductBom,
-      turnoverBom,
-      aridRegion,
-      packingBom,
-      packingTgBom
-    },
-    props: {
-      workListIds: {
-        type: Array,
-        default() {
-          return [];
-        }
-      }
-    },
-
-    computed: {
-      taskObj() {
-        return this.$store.state.user.taskObj;
+import { listByIdsReport } from '@/api/produce/job';
+import { getWarehouseList } from '@/api/produce/index';
+import pickingList from '../picking/pickingList.vue';
+
+import workOrderBom from '../feeding/components/workOrderBom.vue';
+import paramBom from '../feeding/components/paramBom.vue';
+import jobBom from './components/jobBom.vue';
+import deviceBom from '../feeding/components/deviceBom.vue';
+import modelBom from '../feeding/components/modelBom.vue';
+import palletBom from './components/palletBom.vue';
+import revolvingDiskBom from '../feeding/components/revolvingDiskBom.vue';
+import oneJobQualityBom from './components/oneJobQualityBom.vue';
+import semiProductJobBom from './components/semiProductJobBom.vue';
+
+import byProductBom from './components/byProductBom.vue';
+import turnoverBom from './components/turnoverBom.vue';
+import aridRegion from '../feeding/components/aridRegion.vue';
+import packingBom from './components/packingBom.vue';
+import packingTgBom from './components/packingTgBom';
+export default {
+  components: {
+    pickingList,
+
+    workOrderBom,
+    paramBom,
+    jobBom,
+    deviceBom,
+    modelBom,
+    palletBom,
+    revolvingDiskBom,
+    oneJobQualityBom,
+    semiProductJobBom,
+    byProductBom,
+    turnoverBom,
+    aridRegion,
+    packingBom,
+    packingTgBom
+  },
+  props: {
+    workListIds: {
+      type: Array,
+      default() {
+        return [];
       }
-    },
-
-    data() {
-      return {
-        List: [],
-        idsList: [],
-        isLoad: false,
-
-        warehouseList: []
-      };
-    },
+    }
+  },
 
-    computed: {
-      taskObj() {
-        return this.$store.state.user.taskObj;
-      },
+  computed: {
+    taskObj() {
+      return this.$store.state.user.taskObj;
+    }
+  },
 
-      clientEnvironmentId() {
-        return this.$store.state.user.info.clientEnvironmentId;
-      }
-    },
+  data() {
+    return {
+      List: [],
+      idsList: [],
+      isLoad: false,
 
-    watch: {
-      workListIds: {
-        handler(val) {
-          this.getList(val);
-        },
-        deep: true,
-        immediate: true
-      }
-    },
+      warehouseList: []
+    };
+  },
 
-    created() {
-      this.getWarehouseListFn();
+  computed: {
+    taskObj() {
+      return this.$store.state.user.taskObj;
     },
 
-    methods: {
-      getList(ids) {
-        this.idsList = ids || [];
-        let param = {
-          ids: ids,
-          taskId: this.taskObj.id,
-          type: 0
-        };
-        this.isLoad = false;
-        listByIdsReport(param)
-          .then((res) => {
-            this.List = res.map((obj) => {
-              if (!Object.prototype.hasOwnProperty.call(obj, 'turnover')) {
-                obj['turnover'] = [];
-              }
-              if (
-                !Object.prototype.hasOwnProperty.call(obj, 'aridRegionList')
-              ) {
-                obj['aridRegionList'] = [];
-              }
+    clientEnvironmentId() {
+      return this.$store.state.user.info.clientEnvironmentId;
+    }
+  },
 
-              if (!Object.prototype.hasOwnProperty.call(obj, 'instanceList')) {
-                obj['instanceList'] = [];
-              }
+  watch: {
+    workListIds: {
+      handler(val) {
+        this.getList(val);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  created() {
+    this.getWarehouseListFn();
+  },
+
+  methods: {
+    getList(ids) {
+      this.idsList = ids || [];
+      let param = {
+        ids: ids,
+        taskId: this.taskObj.id,
+        type: 0
+      };
+      this.isLoad = false;
+      listByIdsReport(param)
+        .then((res) => {
+          this.List = res.map((obj) => {
+            if (!Object.prototype.hasOwnProperty.call(obj, 'turnover')) {
+              obj['turnover'] = [];
+            }
+            if (
+              !Object.prototype.hasOwnProperty.call(obj, 'aridRegionList')
+            ) {
+              obj['aridRegionList'] = [];
+            }
 
-              if (!Object.prototype.hasOwnProperty.call(obj, 'palletList')) {
-                obj['palletList'] = [];
-              }
+            if (!Object.prototype.hasOwnProperty.call(obj, 'instanceList')) {
+              obj['instanceList'] = [];
+            }
 
-              if (
-                !Object.prototype.hasOwnProperty.call(obj, 'revolvingDiskList')
-              ) {
-                obj['revolvingDiskList'] = [];
-              }
+            if (!Object.prototype.hasOwnProperty.call(obj, 'palletList')) {
+              obj['palletList'] = [];
+            }
 
-              if (obj.palletList.length > 0) {
-                obj.palletList = obj.palletList.map((m) => {
-                  return {
-                    hideKc: true, // 不显示库存
-                    quantity: m.feedQuantity,
-                    ...m
-                  };
-                });
-              }
+            if (
+              !Object.prototype.hasOwnProperty.call(obj, 'revolvingDiskList')
+            ) {
+              obj['revolvingDiskList'] = [];
+            }
 
-              if (this.taskObj.type == 6 && this.clientEnvironmentId == 3) {
-                obj.semiProductList = obj.pickOutInList;
-              }
+            if (obj.palletList.length > 0) {
+              obj.palletList = obj.palletList.map((m) => {
+                return {
+                  hideKc: true, // 不显示库存
+                  quantity: m.feedQuantity,
+                  ...m
+                };
+              });
+            }
 
-              obj.workReportInfo = {
-                formingNum: null,
-                formingWeight: null,
-                formedNum: null,
-                formedWeight: null,
-                taskId: this.taskObj.id
-              };
+            if (this.taskObj.type == 6 && this.clientEnvironmentId == 3) {
+              obj.semiProductList = obj.pickOutInList;
+            }
 
-              obj.notFormedList = [
-                {
-                  notFormedNum: null,
-                  notFormedWeight: null,
-                  weightUnit: obj.weightUnit,
-                  unit: obj.unit,
-                  warehouseId: null // 处置 仓库id
-                }
-              ];
-
-              if (obj.semiProductList.length > 0) {
-                // 预制体报工
-                obj.workReportInfo.formedNum = obj.semiProductList.length;
+            obj.workReportInfo = {
+              formingNum: null,
+              formingWeight: null,
+              formedNum: null,
+              formedWeight: null,
+              taskId: this.taskObj.id
+            };
+
+            obj.notFormedList = [
+              {
+                notFormedNum: null,
+                notFormedWeight: null,
+                weightUnit: obj.weightUnit,
+                unit: obj.unit,
+                warehouseId: null // 处置 仓库id
               }
+            ];
 
-              obj.workReportInfo.formingNum = obj.formingNum;
-              obj.workReportInfo.formingWeight = obj.formingWeight;
-              obj.workReportInfo.unit = obj.unit;
-              obj.workReportInfo.weightUnit = obj.weightUnit;
-              obj.workReportInfo.workOrderId = obj.workOrderId;
+            if (obj.semiProductList.length > 0) {
+              // 预制体报工
+              obj.workReportInfo.formedNum = obj.semiProductList.length;
+            }
 
-              obj.paramDetailList.map((m) => {
-                if (m.extInfo.textType == 5) {
-                  m.remainingTime = m.extInfo.remainingTime;
-                }
-                return {
-                  ...m.extInfo
-                };
-              });
+            obj.workReportInfo.formingNum = obj.formingNum;
+            obj.workReportInfo.formingWeight = obj.formingWeight;
+            obj.workReportInfo.unit = obj.unit;
+            obj.workReportInfo.weightUnit = obj.weightUnit;
+            obj.workReportInfo.workOrderId = obj.workOrderId;
 
+            obj.paramDetailList.map((m) => {
+              if (m.extInfo.textType == 5) {
+                m.remainingTime = m.extInfo.remainingTime;
+              }
               return {
-                ...obj
+                ...m.extInfo
               };
             });
-          })
-          .finally(() => {
-            this.isLoad = true;
 
-            if (this.taskObj.type == 1) {
-              this.getCacheFn();
-            }
+            return {
+              ...obj
+            };
           });
-      },
+        })
+        .finally(() => {
+          this.isLoad = true;
 
-      openPicking(id, item) {
-        this.$refs.pickingListRef.open(id, item);
-      },
+          if (this.taskObj.type == 1) {
+            this.getCacheFn();
+          }
+        });
+    },
 
-      allSelection(id, selectList) {
-        this.List.forEach((m) => {
-          if (m.id == id) {
-            let turnover = [];
-            let equipmentList = []; // 生产设备
+    openPicking(id, item) {
+      this.$refs.pickingListRef.open(id, item);
+    },
 
-            selectList.forEach((f) => {
-              if (f.rootCategoryLevelId == 4) {
-                equipmentList = equipmentList.concat(f);
-              }
-              if (f.rootCategoryLevelId == 7) {
-                turnover = turnover.concat(f);
-              }
-            });
+    allSelection(id, selectList) {
+      this.List.forEach((m) => {
+        if (m.id == id) {
+          let turnover = [];
+          let equipmentList = []; // 生产设备
 
-            this.$set(m, 'equipmentList', equipmentList);
-            this.$set(m, 'turnover', turnover);
+          selectList.forEach((f) => {
+            if (f.rootCategoryLevelId == 4) {
+              equipmentList = equipmentList.concat(f);
+            }
+            if (f.rootCategoryLevelId == 7) {
+              turnover = turnover.concat(f);
+            }
+          });
 
-            this.$forceUpdate();
-          }
-        });
-      },
-      async save(type, index) {},
+          this.$set(m, 'equipmentList', equipmentList);
+          this.$set(m, 'turnover', turnover);
 
-      getCacheFn() {},
+          this.$forceUpdate();
+        }
+      });
+    },
+    async save(type, index) { },
 
-      removeCacheFn(type) {},
+    getCacheFn() { },
 
-      getWarehouseListFn() {
-        getWarehouseList().then((res) => {
-          this.warehouseList = res.data;
-        });
-      }
+    removeCacheFn(type) { },
+
+    getWarehouseListFn() {
+      getWarehouseList().then((res) => {
+        this.warehouseList = res.data;
+      });
     }
-  };
+  }
+};
 </script>
 
 <style scoped lang="scss">
-  .top_fixed {
-    width: 100%;
-    height: 40px;
-    background: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .title_box {
-    .name {
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      color: #157a2c;
-      padding-left: 5px;
-      position: relative;
-
-      &:before {
-        position: absolute;
-        content: '';
-        left: 0px;
-        top: 0px;
-        bottom: 0px;
-        width: 2px;
-        height: 14px;
-        background: #157a2c;
-        margin: auto;
-      }
+.top_fixed {
+  width: 100%;
+  height: 40px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.title_box {
+  .name {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    color: #157a2c;
+    padding-left: 5px;
+    position: relative;
+
+    &:before {
+      position: absolute;
+      content: '';
+      left: 0px;
+      top: 0px;
+      bottom: 0px;
+      width: 2px;
+      height: 14px;
+      background: #157a2c;
+      margin: auto;
     }
   }
-
-  .job_box {
-    margin-top: 6px;
-    width: 100%;
-    height: calc(100vh - 70px - 50px - 80px - 60px);
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-
-  .card_box {
-    background: #fff;
-    padding: 8px;
-    border-radius: 2px;
-  }
+}
+
+.job_box {
+  margin-top: 6px;
+  width: 100%;
+  height: calc(100vh - 70px - 50px - 80px - 60px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.card_box {
+  background: #fff;
+  padding: 8px;
+  border-radius: 2px;
+}
 </style>