client-wms-v5/src/pick/StockOutPrepareLineProjectShippingAddress.vue

<template>
  <a-layout>
    <a-layout-header class="header">
      <Navbar title="项目事件发货地址维护" :is-go-back="true" />
    </a-layout-header>

    <a-layout-content class="content">
      <!-- 表单区域 -->
      <a-form :model="form" layout="vertical" class="form-container">
        <a-form-item label="项目事件">
          <a-select
            v-model:value="selectedProjectItemId"
            :options="projectItemList"
            show-search
            allow-clear
            field-names="{ label: 'name', value: 'id' }"
            @change="handleProjectChange"
          />
        </a-form-item>

        <!-- 发货信息表单 -->
        <a-form-item label="发货单位">
          <a-input v-model:value="fromClient" placeholder="请输入发货单位" />
        </a-form-item>

        <a-form-item label="发货地址">
          <a-input v-model:value="fromAddress" placeholder="请输入发货地址" />
        </a-form-item>

        <a-form-item label="发货联系人">
          <a-input v-model:value="fromContractUser" placeholder="请输入联系人" />
        </a-form-item>

        <a-form-item label="联系电话">
          <a-input v-model:value="fromContractPhone" placeholder="请输入联系电话" />
        </a-form-item>

        <a-form-item>
          <a-checkbox v-model:checked="defaultAddress" @change="isDefaultAddress">
            设为默认地址
          </a-checkbox>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="addBtn">保存</a-button>
        </a-form-item>
      </a-form>

      <!-- 表格区域 -->
      <a-table
        :columns="columns"
        :data-source="projectItemAddressDtos"
        :scroll="{ x: 1200 }"
        :pagination="false"
        row-key="id"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button type="link" @click="findAddress(record)">编辑</a-button>
              <a-popconfirm
                title="确认删除该地址？"
                @confirm="deleteAddress(record.id)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
          <template v-if="column.dataIndex === 'defaultAddress'">
            <a-tag v-if="record.defaultAddress" color="green">默认地址</a-tag>
            <a-button v-else type="link" @click="updateDefaultAddress(record.id)">
              设为默认
            </a-button>
          </template>
        </template>
      </a-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <a-pagination
          v-model:current="pagination.current_page"
          :total="pagination.total"
          :page-size="pagination.per_page"
          show-less-items
          @change="queryFRAddress"
        />
      </div>

      <!-- 编辑模态框 -->
      <a-modal
        v-model:visible="modalVisible"
        title="修改发货地址"
        width="600px"
        :destroy-on-close="true"
      >
        <a-form layout="vertical">
          <a-form-item label="项目事件">
            <a-select
              v-model:value="projectItemAddressDto.projectItemId"
              :options="projectItemList"
              field-names="{ label: 'name', value: 'id' }"
              show-search
              option-filter-prop="label"
            />
          </a-form-item>
          <a-form-item label="发货单位">
            <a-input v-model:value="projectItemAddressDto.fromClient" placeholder="发货单位" />
          </a-form-item>

          <a-form-item label="发货地址">
            <a-input v-model:value="projectItemAddressDto.fromAddress" placeholder="发货地址" />
          </a-form-item>

          <a-form-item label="发货联系人">
            <a-input v-model:value="projectItemAddressDto.fromContractUser" placeholder="发货联系人" />
          </a-form-item>

          <a-form-item label="联系电话">
            <a-input v-model:value="projectItemAddressDto.fromContractPhone" placeholder="联系电话" />
          </a-form-item>

          <a-form-item>
            <a-checkbox 
              v-model:checked="projectItemAddressDto.defaultAddress"
              @change="isDefault"
            >
              默认地址
            </a-checkbox>
          </a-form-item>
        </a-form>
        <template #footer>
          <a-space>
            <a-button @click="modalVisible = false">取消</a-button>
            <a-button type="primary" @click="updataByIdAndFRAddress">保存</a-button>
          </a-space>
        </template>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
import ProjectItemResource from '../api/common/ProjectItemResource.js';
import Common from '../common/Common.js';
import ProjectItemAddressResource from '../api/wms/ProjectItemAddressResource.js';

export default {
  components: {
    
    
  },
  data: function() {
    this.Common = Common;
    return {
      columns: [
        { title: '项目事件', dataIndex: 'projectItemName', width: 200 },
        { title: '发货单位', dataIndex: 'fromClient', width: 200 },
        { title: '发货地址', dataIndex: 'fromAddress', width: 200 },
        { title: '发货联系人', dataIndex: 'fromContractUser', width: 200 },
        { title: '联系电话', dataIndex: 'fromContractPhone', width: 200 },
        { title: '操作', dataIndex: 'operation', fixed: 'right', width: 150 },
        { title: '默认地址', dataIndex: 'defaultAddress', width: 200 },
      ],
      modalVisible: false,
      projectItemId: undefined,
      fromClient: undefined,
      fromAddress: undefined,
      fromContractUser: undefined,
      fromContractPhone: undefined,
      defaultAddress: false,
      projectItemAddressDtos: [],
      name: '',
      projectItemList: [],
      projectItemAddressDto: {},
      projectItemDtoId: null,
      selectedProjectItemId: null,
      pagination: {
        total: 0, //总页数
        per_page: 20, // 每页大小
        current_page: 1, // 当前页数
        last_page: 10, // 最后一页编号
      },
    };
  },
  created: function() {},

  mounted: function() {
    var _self = this;
    var projectItemId = _self.$route.query.projectItemId;
    _self.projectItemId = projectItemId;
    _self.queryByCondition(projectItemId);
    _self.queryFRAddress(projectItemId);
  },

  methods: {
    handleProjectChange(value) {
      this.selectedProjectItemId = value;
      this.queryFRAddress(value);
    },
    /**
     * 保存地址
     */
    addBtn: function() {
      var _self = this;
      if (_self.fromClient == undefined || _self.fromClient.length == 0) {
        Notify.error('提示', '发货单位不能为空');
        return;
      } else if (
        _self.fromAddress == undefined ||
        _self.fromAddress.length == 0
      ) {
        Notify.error('提示', '发货地址不能为空');
        return;
      } else if (
        _self.fromContractUser == undefined ||
        _self.fromContractUser.length == 0
      ) {
        Notify.error('提示', '发货联系人不能为空');
        return;
      } else if (
        _self.fromContractPhone == undefined ||
        _self.fromContractPhone.length == 0
      ) {
        Notify.error('提示', '发货联系电话不能为空');
        return;
      }
      ProjectItemAddressResource.addShipingAddress(
        _self.projectItemId,
        _self.fromClient,
        _self.fromAddress,
        _self.fromContractUser,
        _self.fromContractPhone,
        _self.defaultAddress,
      ).then(
        successData => {
          if(successData.errorCode == 0) {
            _self.queryFRAddress(_self.projectItemId);
            _self.wipeData();
            Notify.success('提示', '地址保存成功');
          } else {
            Notify.error('提示', successData.errorMessage, false);
            return;
          }
        },
        errorData => {},
      );
    },
    /**
     * 默认地址状态
     */
    isDefaultAddress: function() {
      var _self = this;
      _self.defaultAddress = !_self.defaultAddress;
      //console.log(_self.defaultAddress);
    },
    /**
     * 查询收货信息
     */
    queryFRAddress: function(id) {
      var _self = this;
      if (id == null) {
        id = _self.projectItemId;
      }
      var projectItemAddressDto1 = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
        projectItemId: id,
      };
      ProjectItemAddressResource.listByClientIdAndFR(
        projectItemAddressDto1,
      ).then(
        successData => {
          if(successData.errorCode == 0) {
            _self.projectItemAddressDtos = successData.datas;
            _self.pagination.total = successData.total;
            _self.pagination.last_page = Math.ceil(
              successData.total / successData.length,
            );
          } else {
            Notify.error('提示', successData.errorMessage, false);
            return;
          }
        },
        errorData => {},
      );
    },
    /**
     * 修改默认地址
     */
    updateDefaultAddress: function(id) {
      var _self = this;
      ProjectItemAddressResource.updateByFRAddress(_self.projectItemId,id).then(
        successData => {
          if(successData.errorCode == 0) {
            _self.queryFRAddress(_self.projectItemId);
            Notify.success('提示', '默认地址保存成功');
          } else {
            Notify.error('提示', successData.errorMessage, false);
            return;
          }
        },
        errorData => {},
      );
    },
    wipeData: function() {
      var _self = this;
      _self.fromClient = undefined;
      _self.fromAddress = undefined;
      _self.fromContractUser = undefined;
      _self.fromContractPhone = undefined;
      _self.defaultAddress = false;
    },
    /**
     * 将需要修改的数据加入模态框数据对象
     */
    findAddress: function(item) {
      var _self = this;
      _self.projectItemAddressDto = item;
      _self.projectItemDtoId = _self.projectItemAddressDto.projectItemId;
      _self.modalVisible = true;
    },
    /**
     * 修改项目事件发货信息
     */
    updataByIdAndFRAddress: function() {
      var _self = this;

      ProjectItemAddressResource.updataByIdAndFRAddress(
        _self.projectItemAddressDto,
      ).then(
        successData => {
          if(successData.errorCode == 0) {
            Notify.success('提示', '项目事件收货地址修改成功');
            _self.queryFRAddress(_self.projectItemId);
          } else {
            Notify.error('提示', successData.errorMessage, false);
            return;
          }
        },
        errorData => {},
      );
    },
    /**
     * 删除项目事件发货地址
     */
    deleteAddress: function(id) {
      var _self = this;
      ProjectItemAddressResource.deleteByIdAndFRAddress(id).then(
        successData => {
          if(successData.errorCode == 0) {
            Notify.success('提示', '项目事件收货地址删除成功');
            _self.queryFRAddress(_self.projectItemId);
          } else {
            Notify.error('提示', successData.errorMessage, false);
            return;
          }
        },
        errorData => {},
      );
    },
    /**
     * 模态框中默认地址状态
     */
    isDefault: function() {
      var _self = this;
      _self.projectItemAddressDto.defaultAddress = !_self.projectItemAddressDto
        .defaultAddress;
    },
    /**
     * 模态框中查询项目事件
     */
    queryByCondition: function(projectItemId) {
      var _self = this;

      ProjectItemResource.queryByCondition(_self.name).then(
        successData => {
          if(successData.errorCode == 0) {
            _self.projectItemList = successData.datas;
            for (var i = 0; i < _self.projectItemList.length; i++) {
              _self.projectItemList[i].label = _self.projectItemList[i].name;
              _self.projectItemList[i].value = _self.projectItemList[i].id;
              if (projectItemId == _self.projectItemList[i].id) {
                _self.selectedProjectItemId = _self.projectItemList[i].id;
              }
            }
          } else {
            Notify.error('提示', successData.errorMessage, false);
          }
        },
        errorData => {},
      );
    },
    /**
     * 修改页Size
     */
    gridSizeSelect: function(newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
      this.queryToAddress(this.projectItemId);
    },
  },
};
</script>
<style scoped>
.header {
  background: #fff;
  padding: 0;
  height: 64px;
}

.content {
  padding: 24px;
  background: #fff;
}

.form-container {
  margin-bottom: 24px;
  padding: 24px;
  background: #fafafa;
  border-radius: 4px;
}

.pagination-wrapper {
  margin-top: 24px;
  text-align: right;
}

/* 表格样式优化 */
:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  text-align: center;
}

:deep(.ant-table-tbody > tr > td) {
  text-align: center;
}
</style>