client-eam-v5/src/components/customer/AssetInventoryStep9.vue

<template>
  <div class="container">
    <a-space direction="vertical" :size="4" class="w-full">
      <!-- 操作按钮组 -->
      <a-row :gutter="4" align="middle">
        <a-col :xxl="4" :xl="4" :lg="6" :md="12" :sm="24" :xs="24" style="margin-top: 8px;">
          <a-space>
            <a-button type="primary" @click="getAssetInstance(false)">
              {{ $t("lang.AssetInventorySearch.query") }}
            </a-button>
            <a-button danger @click="clearFilter">
              {{ $t("lang.AssetInventorySearch.empty") }}（已选择:{{ selectedShelvesIdArray.length }}）
            </a-button>
          </a-space>
        </a-col>

        <!-- 盘点单名称输入 -->
        <a-col :xxl="8" :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 8px; margin-left: 16px;">
          <a-form-item label="盘点单名称" class="mb-0">
            <a-input v-model:value="inventorySheetName" />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 货架表格 -->
      <a-table
        :row-selection="{
          selectedRowKeys: selectedShelvesIdArray,
          onChange: onSelectChange
        }" :columns="columns" :data-source="dataSource" :pagination="false" bordered
      />

      <!-- 操作按钮 -->
      <a-row justify="space-between">
        <a-button type="primary" @click="previous">上一步</a-button>
        <a-button type="primary" @click="next">下一步</a-button>
      </a-row>
    </a-space>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import { Notify, SqlApi } from 'pc-component-v3';
export default {
  components: {
  },
  // 定义抛出的事件名称
  emits: ['previous', 'next'],
  data: function () {
    return {
      loading: false,
      inventorySheetName: undefined, //盘点单名称
      selectedShelvesIdArray: [],//选择的货架id集合
      columns: [
        {
          title: '货架名称',
          dataIndex: 'name',
        },
        {
          title: '货架类型',
          dataIndex: 'shelvesType',
        },
      ],
      dataSource: [],//系统所有货架
    };
  },

  mounted: function () {
    var _self = this;
    _self.getAllShelves();
  },
  methods: {
    onSelectChange: function (selectedRowKeys, selectedRows) {
      this.selectedShelvesIdArray = selectedRowKeys;
    },
    next: function () {
      var _self = this;
      if (_self.inventorySheetName == null || _self.inventorySheetName == undefined || _self.inventorySheetName ==
        '') {
        Notify.error('错误', '请填写盘点单名称', 2000);
        return;
      }
      if (_self.selectedShelvesIdArray == null || _self.selectedShelvesIdArray.length < 1) {
        Notify.error('错误', '请至少选择一个货架', 2000);
        return;
      }
      var param = {
        inventorySheetName: _self.inventorySheetName,
        shelvesIdArray: _self.selectedShelvesIdArray,
      };

      var data = {
        currentStep: 2,
        showPage: 8,
        assetInventoryStep10: param,
      };
      this.$emit('next', data);
    },

    previous: function () {
      var data = {
        currentStep: 0,
        showPage: 0,
        assetInventoryStep3: undefined,
      };
      this.$emit('previous', data);
    },

    /**
             * 清空界面的搜索条件
             * @author YangZhiJie 20200806
             * @author XiongLiuJie 20211119
             */
    clearFilter: function () {
      var _self = this;
      _self.selectedShelvesIdArray.splice(0, _self.selectedShelvesIdArray.length);
    },
    getAllShelves: function () {
      var _self = this;
      _self.dataSource.splice(0, _self.dataSource.length);
      SqlApi.execute('20221205_152704', null).then(
        successData => {
          if (successData.errorCode == 0) {
            successData.results.forEach(result => {
              var data = {
                key: result.shelvesId,
                name: result.shelvesName,
                shelvesType: result.shelvesTypeName,
              };
              _self.dataSource.push(data);
            });
          } else {
            Notify.error('查询货架异常', successData.errorMessage, true);
          }
          _self.loading = false;
        },
        errorData => {
          Common.processException(errorData);
          _self.loading = false;
        },
      );
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.w-full {
  width: 100%;
}

:deep(.ant-table) {
  margin: 16px 0;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
}

:deep(.ant-form-item) {
  margin-bottom: 0;
}
:deep(.ant-form-item-label > label) {
  font-size: 14px !important;
  font-weight: 500 !important;
}
</style>