kd-aiot-frontend-wms/src/views/warehouseManagement/warehouseDefinition/index.vue

<template>
  <div id="warehouseDefinition_index">
    <el-card shadow="nvner">
      <el-form :model="formData" ref="formName" label-width="100px">
        <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-col :span="4">
            <el-form-item label="仓库名称" prop="name">
              <el-input
                placeholder="请输入"
                v-model="formData.name"
                clearable
                class="w100"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="仓库类型" prop="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-option>
              </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-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-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>
              </div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item label="组织机构:" prop="deptIds">
              <auth-selection
                data-type="Array"
                v-model="formData.deptIds"
                style="width: 100%"
              ></auth-selection>
            </el-form-item>
          </el-col> -->
          <el-col :span="3" 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
              >
            </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
        >
      </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">
            <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"
              >
                <span class="label">{{ itm.label }}</span>
                <template v-if="itm.key === 'enabled'">
                  <span :class="item[itm.key] === 0 ? 'danger-text' : ''">{{
                    itm.filter(item[itm.key])
                  }}</span>
                </template>
                <template v-else-if="itm.key === 'factoryId'">
                  <span>{{ filterFactoryId(item.factoryId) }}</span>
                </template>
                <template v-else-if="itm.filter">{{
                  itm.filter(item[itm.key])
                }}</template>
                <template v-else>{{ item[itm.key] }}</template>
              </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
              >
            </div>
          </div>
        </div>
      </div>
      <div v-else class="warehouse-container">
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="warehouse"
          height="calc(100vh - 350px)"
          style="margin-bottom: 10px"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          :selection.sync="selection"
          :page-size="20"
          @columns-change="handleColumnChange"
          :cache-key="cacheKeyUrl"
          :needPage="false"
        >
          <!-- 操作列 -->
          <template v-slot:action="{ row }">
            <el-button type="text" @click="add(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>
        </ele-pro-table>
      
      </div>
    </el-card>
    <WarehouseEdit ref="warehouseEditRef" @success="handleList" />
  </div>
</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 tabMixins from '@/mixins/tableColumnsMixin';

  export default {
    // components: { selectTree, tablePagination, WarehouseEdit },
    components: { WarehouseEdit },
    computed: {
      ...mapGetters(['dict', 'getDict', 'getDictValue'])
    },
    mixins: [tabMixins],
    data() {
      return {
        isTable: false,
        loading: false,
        formData: {
          deptIds: [],
          code: '',
          name: '',
          inventoryType: '',
          emptyAllocationEnd: '',
          emptyAllocationStart: ''
        },
        cacheKeyUrl: 'wms-c2e9664a-warehouseDefinition-index',

        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '仓库名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'code',
            label: '仓库编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'code',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return _row.status !== null
                ? warehouseDefinition_statusList.filter(
                    (item) => item.code == _row.status
                  )[0].label
                : '';
            }
          },
          {
            prop: 'factoryName',
            label: '所属工厂',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'inventoryName',
            label: '仓库类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'areaNumber',
            label: '库区数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'goodNumber',
            label: '货架数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'allocationNumber',
            label: '货位数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'emptyAllocationNumber',
            label: '空货位数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 250,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        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: []
      };
    },
    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 : '';
      },
      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;
        }
      },
      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
          }
        });
      },
      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();
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #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%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .ele-pro-table {
          flex: 1;
          display: flex;
          flex-direction: column;

          .el-table {
            flex: 1;
            // display: flex;
            // flex-direction: column;
            // .el-table__body-wrapper {
            //   flex: 1;
            // }
          }
        }
      }

      .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;

    .warehouse-card-placeholder {
      width: 25%;
    }

    .warehouse-card_item {
      width: 25%;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .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;

      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;
        }

        &.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-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>