仓库定义界面优化

src/views/warehouseManagement/warehouseDefinition/index.vue

@@ -5,13 +5,8 @@
         <el-row>
           <el-col :span="4">
             <el-form-item label="仓库编码" prop="code">
-              <el-input
-                placeholder="请输入"
-                v-model="formData.code"
-                clearable
-                class="w100"
-              ></el-input> </el-form-item
-          ></el-col>
+              <el-input placeholder="请输入" v-model="formData.code" clearable class="w100"></el-input>
+            </el-form-item></el-col>
           <el-col :span="4">
             <el-form-item label="仓库类型" prop="inventoryType">
               <!-- <DictSelection
@@ -19,75 +14,41 @@
                 clearable
                 v-model="formData.inventoryType"
               /> -->
-              <el-select
-                filterable
-                size="small"
-                class="w100"
-                v-model="formData.inventoryType"
-                placeholder="请选择"
-                :clearable="true"
-              >
-                <el-option
-                  v-for="item in inventoryTypeList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
+              <el-select filterable size="small" class="w100" v-model="formData.inventoryType" placeholder="请选择"
+                :clearable="true">
+                <el-option v-for="item in inventoryTypeList" :key="item.id" :label="item.name" :value="item.id">
                 </el-option>
-              </el-select> </el-form-item
-          ></el-col>
+              </el-select> </el-form-item></el-col>
           <el-col :span="4">
             <el-form-item label="所属工厂" prop="factoryId">
-              <el-select
-                filterable
-                placeholder="请选择"
-                v-model="formData.factoryId"
-                clearable
-                class="w100"
-              >
-                <el-option
-                  v-for="item in factoryList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                ></el-option>
-              </el-select> </el-form-item
-          ></el-col>
+              <el-select filterable placeholder="请选择" v-model="formData.factoryId" clearable class="w100">
+                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select> </el-form-item></el-col>
           <el-col :span="4">
             <el-form-item label="空货位数">
               <div class="divider11">
                 <el-col :span="9">
                   <el-form-item label="" prop="emptyAllocationStart">
-                    <el-input
-                      type="text"
-                      @input="
-                        (value) =>
-                          (formData.emptyAllocationStart = value.replace(
-                            /[^\d]+/g,
-                            ''
-                          ))
-                      "
-                      v-model="formData.emptyAllocationStart"
-                    ></el-input
-                  ></el-form-item>
+                    <el-input type="text" @input="
+                      (value) =>
+                      (formData.emptyAllocationStart = value.replace(
+                        /[^\d]+/g,
+                        ''
+                      ))
+                    " v-model="formData.emptyAllocationStart"></el-input></el-form-item>
                 </el-col>
 
                 <div class="divider111"> <el-divider></el-divider></div>
 
                 <el-col :span="9">
                   <el-form-item label="" prop="emptyAllocationEnd">
-                    <el-input
-                      type="text"
-                      @input="
-                        (value) =>
-                          (formData.emptyAllocationEnd = value.replace(
-                            /[^\d]+/g,
-                            ''
-                          ))
-                      "
-                      v-model="formData.emptyAllocationEnd"
-                    ></el-input> </el-form-item
-                ></el-col>
+                    <el-input type="text" @input="
+                      (value) =>
+                      (formData.emptyAllocationEnd = value.replace(
+                        /[^\d]+/g,
+                        ''
+                      ))
+                    " v-model="formData.emptyAllocationEnd"></el-input> </el-form-item></el-col>
               </div>
             </el-form-item>
           </el-col>
@@ -102,42 +63,26 @@
           </el-col> -->
           <el-col :span="8" style="display: flex; justify-content: flex-end">
             <div>
-              <el-button icon="el-icon-refresh-left" @click="reset"
-                >重置</el-button
-              >
-              <el-button type="primary" icon="el-icon-search" @click="search"
-                >搜索</el-button
-              >
+              <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
             </div>
           </el-col>
         </el-row>
       </el-form>
 
       <div>
-        <el-button type="primary" icon="el-icon-plus" @click="add"
-          >新建仓库</el-button
-        >
-        <el-button plain type="primary" icon="el-icon-sort" @click="handoff"
-          >仓库列表</el-button
-        >
+        <el-button type="primary" icon="el-icon-plus" @click="add">新建仓库</el-button>
+        <el-button plain type="primary" icon="el-icon-sort" @click="handoff">仓库列表</el-button>
       </div>
       <div v-if="isTable" class="warehouse-container" v-loading="loading">
-        <div
-          class="warehouse-card_item"
-          v-for="(item, index) in warehouse"
-          :key="index"
-        >
+        <div class="warehouse-card_item" v-for="(item, index) in warehouse" :key="index">
           <div class="warehouse-card">
             <h3 :class="item.enabled === 0 ? 'grey' : 'ele-bg-primary'">
               {{ item.code }} <span>{{ item.name }}</span>
             </h3>
             <el-row class="warehouse-card-main">
-              <el-col
-                :span="idx === warehouseLabel.length - 1 ? 24 : 12"
-                class="ele-elip"
-                v-for="(itm, idx) in warehouseLabel"
-                :key="idx"
-              >
+              <el-col :span="idx === warehouseLabel.length - 1 ? 24 : 12" class="ele-elip"
+                v-for="(itm, idx) in warehouseLabel" :key="idx">
                 <span class="label">{{ itm.label }}</span>
                 <template v-if="itm.key === 'enabled'">
                   <span :class="item[itm.key] === 0 ? 'danger-text' : ''">{{
@@ -154,99 +99,57 @@
               </el-col>
             </el-row>
             <div class="warehouse-card-footer">
-              <el-link type="primary" :underline="false" @click="add(item)"
-                >修改仓库</el-link
-              >
-              <el-link
-                type="primary"
-                :underline="false"
-                @click="locationManage(item)"
-                >货位管理</el-link
-              >
-              <el-link type="primary" :underline="false" @click="details(item)"
-                >查看详情</el-link
-              >
-              <el-link type="danger" :underline="false" @click="remove(item)"
-                >删除</el-link
-              >
+              <el-link type="primary" :underline="false" @click="add(item)">修改仓库</el-link>
+              <el-link type="primary" :underline="false" @click="locationManage(item)">货位管理</el-link>
+              <el-link type="primary" :underline="false" @click="details(item)">查看详情</el-link>
+              <el-link type="danger" :underline="false" @click="remove(item)">删除</el-link>
             </div>
           </div>
         </div>
       </div>
       <div v-else class="warehouse-container">
-        <el-table
-          ref="table"
-          :data="warehouse"
-          tooltip-effect="dark"
-          style="width: 100%"
-          stripe
-        >
-          <el-table-column label="序号" type="index" width="50">
+        <el-table ref="table" :data="warehouse" tooltip-effect="dark" style="width: 100%" stripe>
+          <el-table-column label="序号" type="index" width="50" align="center">
           </el-table-column>
-          <el-table-column
-            label="仓库名称"
-            prop="name"
-            :show-overflow-tooltip="true"
-          ></el-table-column>
-          <el-table-column
-            label="仓库编码"
-            prop="code"
-            :show-overflow-tooltip="true"
-          ></el-table-column>
-          <el-table-column label="状态" prop="status">
+          <el-table-column label="仓库名称" prop="name" :show-overflow-tooltip="true" width="120"
+            align="center"></el-table-column>
+          <el-table-column label="仓库编码" prop="code" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column label="状态" prop="status" align="center">
             <template slot-scope="{ row, $index }">
               {{
                 row.status !== null
                   ? warehouseDefinition_statusList.filter(
-                      (item) => item.code == row.status
-                    )[0].label
+                    (item) => item.code == row.status
+                  )[0].label
                   : ''
               }}
             </template>
           </el-table-column>
-          <el-table-column label="所属工厂" prop="factoryName">
+          <el-table-column label="所属工厂" prop="factoryName" align="center" :show-overflow-tooltip="true" width="120">
             <template slot-scope="{ row, $index }">
               <!-- {{ filterFactoryId(row.factoryName) }} -->
               {{ row.factoryName }}
             </template>
           </el-table-column>
-          <el-table-column
-            label="仓库类型"
-            prop="inventoryName"
-            :show-overflow-tooltip="true"
-          >
+          <el-table-column label="仓库类型" prop="inventoryName" :show-overflow-tooltip="true" align="center">
             <!-- <template slot-scope="{ row, $index }">
               {{ getDictValue('仓库类型', row.inventoryType) }}
             </template> -->
           </el-table-column>
-          <el-table-column
-            label="库区数"
-            prop="areaNumber"
-            :show-overflow-tooltip="true"
-          ></el-table-column>
-          <el-table-column label="货架数" prop="goodNumber"></el-table-column>
-          <el-table-column
-            label="货位数"
-            prop="allocationNumber"
-          ></el-table-column>
-          <el-table-column label="空货位数" prop="emptyAllocationNumber">
+          <el-table-column label="库区数" prop="areaNumber" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column label="货架数" prop="goodNumber" align="center"></el-table-column>
+          <el-table-column label="货位数" prop="allocationNumber" align="center"></el-table-column>
+          <el-table-column label="空货位数" prop="emptyAllocationNumber" align="center">
           </el-table-column>
-          <el-table-column
-            label="操作"
-            width="300"
-            fixed="right"
-            align="center"
-          >
-            <template slot="header" slot-scope="scope"> 操作 </template>
-            <template slot-scope="{ row, $index }">
+          <el-table-column label="操作" width="300" align="center" fixed="right">
+            <template v-slot="{ row, $index }">
               <el-button type="text" @click="add(row)">修改</el-button>
-              <el-button type="text" @click="locationManage(row)"
-                >货位</el-button
-              >
+              <el-button type="text" @click="locationManage(row)">货位</el-button>
               <el-button type="text" @click="details(row)">详情</el-button>
               <el-button type="text" @click="remove(row)">删除</el-button>
             </template>
           </el-table-column>
+
         </el-table>
       </div>
     </el-card>
@@ -255,318 +158,339 @@
 </template>
 
 <script>
-  // import tablePagination from '../components/tablePagination.vue';
-  // import {
-  //   warehouseListValuable,
-  //   warehouseRemove
-  // } from '@/api/stockManagement/warehouseDefinition';
-  import {
-    warehouseDefinition_inventoryList,
-    warehouseDefinition_statusList,
-    useDictLabel
-  } from '@/utils/dict/index';
-  import { mapGetters, mapActions } from 'vuex';
-  import dictEnum from '@/enum/dict';
-  // import selectTree from '@/components/selectTree';
-  import WarehouseEdit from './components/WarehouseEdit';
-  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
-  // import dictMixins from '@/mixins/dictMixins';
-  export default {
-    // components: { selectTree, tablePagination, WarehouseEdit },
-    components: { WarehouseEdit },
-    computed: {
-      ...mapGetters(['dict', 'getDict', 'getDictValue'])
-    },
-    // mixins: [dictMixins],
-    data() {
-      return {
-        isTable: false,
-        loading: false,
-        formData: {
-          deptIds: [],
-          code: '',
-          name: '',
-          inventoryType: '',
-          emptyAllocationEnd: '',
-          emptyAllocationStart: ''
+// import tablePagination from '../components/tablePagination.vue';
+// import {
+//   warehouseListValuable,
+//   warehouseRemove
+// } from '@/api/stockManagement/warehouseDefinition';
+import {
+  warehouseDefinition_inventoryList,
+  warehouseDefinition_statusList,
+  useDictLabel
+} from '@/utils/dict/index';
+import { mapGetters, mapActions } from 'vuex';
+import dictEnum from '@/enum/dict';
+// import selectTree from '@/components/selectTree';
+import WarehouseEdit from './components/WarehouseEdit';
+import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
+// import dictMixins from '@/mixins/dictMixins';
+export default {
+  // components: { selectTree, tablePagination, WarehouseEdit },
+  components: { WarehouseEdit },
+  computed: {
+    ...mapGetters(['dict', 'getDict', 'getDictValue'])
+  },
+  // mixins: [dictMixins],
+  data() {
+    return {
+      isTable: false,
+      loading: false,
+      formData: {
+        deptIds: [],
+        code: '',
+        name: '',
+        inventoryType: '',
+        emptyAllocationEnd: '',
+        emptyAllocationStart: ''
+      },
+      warehouseDefinition_statusList,
+      warehouseDefinition_inventoryList: [
+        { code: 1, label: '物料仓' },
+        { code: 2, label: '产品仓' },
+        { code: 3, label: '设备仓' },
+        { code: 4, label: '模具仓' },
+        { code: 5, label: '舟皿仓' },
+        { code: 6, label: '备品备件仓' }
+      ],
+      factoryList: [],
+      treeList: [],
+      warehouse: [],
+      typeList: [],
+      warehouseLabel: [
+        {
+          label: '状态',
+          key: 'status',
+          filter: useDictLabel(warehouseDefinition_statusList)
+        },
+        {
+          label: '仓库类型',
+          key: 'inventoryName'
+          // filter: (value) => {
+          //   return this.getDictValue('仓库类型', value);
+          // }
         },
-        warehouseDefinition_statusList,
-        warehouseDefinition_inventoryList: [
-          { code: 1, label: '物料仓' },
-          { code: 2, label: '产品仓' },
-          { code: 3, label: '设备仓' },
-          { code: 4, label: '模具仓' },
-          { code: 5, label: '舟皿仓' },
-          { code: 6, label: '备品备件仓' }
-        ],
-        factoryList: [],
-        treeList: [],
-        warehouse: [],
-        typeList: [],
-        warehouseLabel: [
-          {
-            label: '状态',
-            key: 'status',
-            filter: useDictLabel(warehouseDefinition_statusList)
-          },
-          {
-            label: '仓库类型',
-            key: 'inventoryName'
-            // filter: (value) => {
-            //   return this.getDictValue('仓库类型', value);
-            // }
-          },
-          { label: '库区数', key: 'areaNumber' },
-          { label: '货架数', key: 'goodNumber' },
-          { label: '货位数', key: 'allocationNumber' },
-          { label: '空货位数', key: 'emptyAllocationNumber' },
-          { label: '所属工厂', key: 'factoryId' }
-        ],
-        inventoryTypeList: []
-      };
+        { label: '库区数', key: 'areaNumber' },
+        { label: '货架数', key: 'goodNumber' },
+        { label: '货位数', key: 'allocationNumber' },
+        { label: '空货位数', key: 'emptyAllocationNumber' },
+        { label: '所属工厂', key: 'factoryId' }
+      ],
+      inventoryTypeList: []
+    };
+  },
+  async created() {
+    this.requestDict('仓库类型');
+    this.initData();
+  },
+  methods: {
+    ...mapActions('dict', ['requestDict']),
+    filterFactoryId(factoryId) {
+      console.log(this.factoryList);
+      let obj = this.factoryList.find((f) => f.id === factoryId);
+      return obj ? obj.name : '';
     },
-    async created() {
-      this.requestDict('仓库类型');
-      this.initData();
+    handoff() {
+      this.isTable = !this.isTable;
     },
-    methods: {
-      ...mapActions('dict', ['requestDict']),
-      filterFactoryId(factoryId) {
-        console.log(this.factoryList);
-        let obj = this.factoryList.find((f) => f.id === factoryId);
-        return obj ? obj.name : '';
-      },
-      handoff() {
-        this.isTable = !this.isTable;
-      },
-      async initData() {
-        const res2 = await warehouseDefinition.getTreeByGroup({ type: 1 });
-        this.inventoryTypeList = res2;
-
-        //获取工厂车间列表
-        const res = await warehouseDefinition.getFactoryarea({
-          pageNum: 1,
-          size: 9999,
-          type: 1
-        });
-        this.factoryList = res.list;
-        this.handleList();
-      },
-      async handleList() {
-        try {
-          this.loading = true;
-          const res = await warehouseDefinition.list(this.formData);
-          console.log('res--------------------');
-          console.log(res);
-          this.warehouse = res;
-        } finally {
-          this.loading = false;
+    async initData() {
+      const res2 = await warehouseDefinition.getTreeByGroup({ type: 1 });
+      this.inventoryTypeList = res2;
+
+      //获取工厂车间列表
+      const res = await warehouseDefinition.getFactoryarea({
+        pageNum: 1,
+        size: 9999,
+        type: 1
+      });
+      this.factoryList = res.list;
+      this.handleList();
+    },
+    async handleList() {
+      try {
+        this.loading = true;
+        const res = await warehouseDefinition.list(this.formData);
+        console.log('res--------------------');
+        console.log(res);
+        this.warehouse = res;
+      } finally {
+        this.loading = false;
+      }
+    },
+    search() {
+      this.handleList();
+    },
+    add(item) {
+      let type = '新建';
+      if (item.id) {
+        type = '修改';
+      }
+      this.$refs.warehouseEditRef.open(type, item);
+    },
+    locationManage({ id, code, name }) {
+      this.$router.push({
+        path: '/warehouseManagement/warehouseDefinition/add',
+        query: {
+          id,
+          code,
+          name
         }
-      },
-      search() {
-        this.handleList();
-      },
-      add(item) {
-        let type = '新建';
-        if (item.id) {
-          type = '修改';
+      });
+    },
+    details(data) {
+      this.$router.push({
+        path: '/warehouseManagement/warehouseDefinition/details',
+        query: {
+          id: data.id
         }
-        this.$refs.warehouseEditRef.open(type, item);
-      },
-      locationManage({ id, code, name }) {
-        this.$router.push({
-          path: '/warehouseManagement/warehouseDefinition/add',
-          query: {
-            id,
-            code,
-            name
-          }
-        });
-      },
-      details(data) {
-        this.$router.push({
-          path: '/warehouseManagement/warehouseDefinition/details',
-          query: {
-            id: data.id
-          }
-        });
-      },
-      edit(data) {
-        this.$router.push({
-          path: '/warehouseManagement/warehouseDefinition/edit',
-          query: {
-            id: data.id
-          }
-        });
-      },
-      reset() {
-        this.$refs.formName.resetFields();
-        this.search();
-      },
-      remove({ id, name }) {
-        this.$confirm(`确认删除仓库${name}?`).then(async () => {
-          // const isDeleted = await warehouseDefinition.isDelete(id);
-          // if (isDeleted == 1) {
-          //   const res = await warehouseDefinition.delete(id);
-          //   this.$message.success('删除' + res + '！');
-          //   this.handleList();
-          // } else {
-          //   this.$message.warning('此数据可能有关联数据，暂时无法删除！');
-          // }
-          const res = await warehouseDefinition.delete(id);
-          this.$message.success('删除' + res + '！');
-          this.handleList();
-        });
-      }
+      });
+    },
+    edit(data) {
+      this.$router.push({
+        path: '/warehouseManagement/warehouseDefinition/edit',
+        query: {
+          id: data.id
+        }
+      });
+    },
+    reset() {
+      this.$refs.formName.resetFields();
+      this.search();
+    },
+    remove({ id, name }) {
+      this.$confirm(`确认删除仓库${name}?`).then(async () => {
+        // const isDeleted = await warehouseDefinition.isDelete(id);
+        // if (isDeleted == 1) {
+        //   const res = await warehouseDefinition.delete(id);
+        //   this.$message.success('删除' + res + '！');
+        //   this.handleList();
+        // } else {
+        //   this.$message.warning('此数据可能有关联数据，暂时无法删除！');
+        // }
+        const res = await warehouseDefinition.delete(id);
+        this.$message.success('删除' + res + '！');
+        this.handleList();
+      });
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  #warehouseDefinition_index {
-    height: calc(100vh - 96px);
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    // element-ui样式穿透
-    :deep(.el-card) {
+#warehouseDefinition_index {
+  height: calc(100vh - 96px);
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+
+  // element-ui样式穿透
+  :deep(.el-card) {
+    height: 100%;
+
+    .el-card__body {
       height: 100%;
-      .el-card__body {
-        height: 100%;
-        box-sizing: border-box;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+
+      .ele-pro-table {
+        flex: 1;
         display: flex;
         flex-direction: column;
-        .ele-pro-table {
+
+        .el-table {
           flex: 1;
-          display: flex;
-          flex-direction: column;
-          .el-table {
-            flex: 1;
-            // display: flex;
-            // flex-direction: column;
-            // .el-table__body-wrapper {
-            //   flex: 1;
-            // }
-          }
+          // display: flex;
+          // flex-direction: column;
+          // .el-table__body-wrapper {
+          //   flex: 1;
+          // }
         }
       }
-      .el-form-item {
-        margin-bottom: 5px !important;
-      }
     }
+
+    .el-form-item {
+      margin-bottom: 5px !important;
+    }
+  }
+}
+
+.divider11 {
+  display: flex;
+  align-items: center;
+}
+
+.divider111 {
+  padding: 0 10px;
+  flex: 1;
+}
+
+.devider {
+  position: relative;
+  padding-top: 20px;
+
+  &::before {
+    content: '';
+    border-top: 10px solid #f2f2f2;
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: -25px;
+    right: -30px;
   }
+}
+
+.warehouse-container {
+  flex: 1 0 auto;
+  height: 0;
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 20px;
+  overflow-y: auto;
 
-  .divider11 {
-    display: flex;
-    align-items: center;
+  .warehouse-card-placeholder {
+    width: 25%;
   }
-  .divider111 {
+
+  .warehouse-card_item {
+    width: 25%;
     padding: 0 10px;
-    flex: 1;
+    box-sizing: border-box;
   }
-  .devider {
+
+  .warehouse-card {
+    // margin-right: auto;
+    width: 100%;
+
+    font-size: 14px;
+    border: 1px solid rgb(121, 121, 121);
+    margin-bottom: 20px;
+    padding-bottom: 30px;
     position: relative;
-    padding-top: 20px;
-    &::before {
-      content: '';
-      border-top: 10px solid #f2f2f2;
-      z-index: 1;
-      position: absolute;
-      top: 0;
-      left: -25px;
-      right: -30px;
-    }
-  }
-  .warehouse-container {
-    flex: 1 0 auto;
-    height: 0;
-    display: flex;
-    flex-wrap: wrap;
-    padding-top: 20px;
-    overflow-y: auto;
-    .warehouse-card-placeholder {
-      width: 25%;
-    }
-    .warehouse-card_item {
-      width: 25%;
-      padding: 0 10px;
-      box-sizing: border-box;
-    }
 
-    .warehouse-card {
-      // margin-right: auto;
-      width: 100%;
+    h3 {
+      height: 35px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: $mainColor;
+      color: #fff;
+      padding: 8px;
 
-      font-size: 14px;
-      border: 1px solid rgb(121, 121, 121);
-      margin-bottom: 20px;
-      padding-bottom: 30px;
-      position: relative;
-      h3 {
-        height: 35px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        // background-color: $mainColor;
-        color: #fff;
-        padding: 8px;
-        span {
-          font-size: 18px;
-          font-weight: bold;
-        }
+      span {
+        font-size: 18px;
+        font-weight: bold;
+      }
 
-        &.grey {
-          background-color: rgb(170, 170, 170);
-          color: rgba(0, 0, 0, 0.85);
-        }
+      &.grey {
+        background-color: rgb(170, 170, 170);
+        color: rgba(0, 0, 0, 0.85);
       }
-      .warehouse-card-main {
-        width: 100%;
-        padding: 8px 12px;
-        color: rgba($color: #000000, $alpha: 0.89);
-        .el-col {
-          padding: 8px 0;
-        }
-        .label {
-          font-weight: bold;
-          display: inline-block;
-          width: 4.5em;
-        }
+    }
+
+    .warehouse-card-main {
+      width: 100%;
+      padding: 8px 12px;
+      color: rgba($color: #000000, $alpha: 0.89);
+
+      .el-col {
+        padding: 8px 0;
       }
 
-      .warehouse-card-footer {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 12px;
-        height: 30px;
-        background-color: rgb(242, 242, 242);
+      .label {
+        font-weight: bold;
+        display: inline-block;
+        width: 4.5em;
       }
     }
-  }
 
-  .p20 {
-    padding: 20px;
-  }
-  .mt20 {
-    margin-top: 20px;
-  }
-  .mt10 {
-    margin-top: 10px;
-  }
-  .el-form {
-    overflow: hidden;
-  }
-  .float-right {
-    float: right;
-    text-align: right;
-    margin-right: 20px;
-  }
-  .right {
-    text-align: right;
+    .warehouse-card-footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 12px;
+      height: 30px;
+      background-color: rgb(242, 242, 242);
+    }
   }
+}
+
+.p20 {
+  padding: 20px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.el-form {
+  overflow: hidden;
+}
+
+.float-right {
+  float: right;
+  text-align: right;
+  margin-right: 20px;
+}
+
+.right {
+  text-align: right;
+}
 </style>