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

<template>
  <div>
    <Navbar
      title="项目事件发货地址维护"
      is-go-back="true"
    />
    <div class="flex-container">
      <!-- 保存发货地址 -->
      <div class="flex-header">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="projectItems" class="col-sm-2 control-label">项目事件</label>
            <div class="col-sm-10">
              <v-select
                id="projectItems"
                v-model="projectItems"
                :options="projectItemList"
                :label="'name'"
                @input="projectItemIdAssignment(projectItems.id)"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="toClient" class="col-sm-2 control-label">发货单位</label>
            <div class="col-sm-10">
              <input
                id="fromClient"
                v-model="fromClient"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="发货单位"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="toAddress" class="col-sm-2 control-label">发货地址</label>
            <div class="col-sm-10">
              <input
                id="fromAddress"
                v-model="fromAddress"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="发货地址"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="toContractUser" class="col-sm-2 control-label">发货联系人</label>
            <div class="col-sm-10">
              <input
                id="fromContractUser"
                v-model="fromContractUser"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="发货联系人"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="toContractPhone" class="col-sm-2 control-label">发货联系电话</label>
            <div class="col-sm-10">
              <input
                id="fromContractPhone"
                v-model="fromContractPhone"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="发货联系电话"
              />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input v-model="defaultAddress" autocomplete="off" type="checkbox" @click="isDefaultAddress()" /> 默认地址
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default" @click="addBtn()">保存</button>
            </div>
          </div>
        </form>
      </div>

      <!-- 查询收货地址 -->
      <div class="flex-content table-responsive" style="margin-top: 130px;">
        <table class="text-nowrap table-bordered table-striped table">
          <thead>
            <tr>
              <th style="width:200px;">项目事件</th>
              <th style="width:200px;">发货单位</th>
              <th style="width:200px;">发货地址</th>
              <th style="width:200px;">发货联系人</th>
              <th style="width:200px;">发货联系电话</th>
              <th style="width:200px;">操作</th>
              <th style="width:200px;">&nbsp;</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in ProjectItemAddressDtos" :key="item.id">
              <td>{{ item.projectItemName }}</td>
              <td>{{ item.fromClient }}</td>
              <td>{{ item.fromAddress }}</td>
              <td>{{ item.fromContractUser }}</td>
              <td>{{ item.fromContractPhone }}</td>
              <td>
                <button
                  type="button"
                  data-toggle="modal"
                  data-target="#myModal"
                  class="btn-link"
                  @click="findAddress(item)"
                >
                  修改
                </button>
                <button type="button" class="btn-link" @click="deleteAddress(item.id)">删除</button>
              </td>
              <td>
                <a v-if="item.defaultAddress">默认地址</a>
                <a v-else style="cursor:pointer;" @click="updateDefaultAddress(item.id)">设为默认地址</a>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 模态框（Modal） -->
        <div
          id="myModal"
          class="modal fade"
          tabindex="-1"
          role="dialog"
          aria-labelledby="myModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="myModalLabel" class="modal-title">修改项目事件发货地址</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal">
                  <div class="form-group">
                    <label for="projectItemList" class="col-sm-2 control-label">项目事件</label>
                    <div class="col-sm-10">
                      <v-select
                        id="projectItemList"
                        v-model="projectItemDto"
                        :options="projectItemList"
                        :label="'name'"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="toClient" class="col-sm-2 control-label">发货单位</label>
                    <div class="col-sm-10">
                      <input
                        id="fromClient"
                        v-model="ProjectItemAddressDto.fromClient"
                        autocomplete="off"
                        type="text"
                        class="form-control"
                        placeholder="发货单位"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="toAddress" class="col-sm-2 control-label">发货地址</label>
                    <div class="col-sm-10">
                      <input
                        id="fromAddress"
                        v-model="ProjectItemAddressDto.fromAddress"
                        autocomplete="off"
                        type="text"
                        class="form-control"
                        placeholder="发货地址"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="toContractUser" class="col-sm-2 control-label">发货联系人</label>
                    <div class="col-sm-10">
                      <input
                        id="fromContractUser"
                        v-model="ProjectItemAddressDto.fromContractPhone"
                        autocomplete="off"
                        type="text"
                        class="form-control"
                        placeholder="发货联系人"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="toContractPhone" class="col-sm-2 control-label">发货联系电话</label>
                    <div class="col-sm-10">
                      <input
                        id="fromContractPhone"
                        v-model="ProjectItemAddressDto.fromContractUser"
                        autocomplete="off"
                        type="text"
                        class="form-control"
                        placeholder="发货联系电话"
                      />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
                          <input
                            v-model="ProjectItemAddressDto.defaultAddress"
                            autocomplete="off"
                            type="checkbox"
                            @click="isDefault()"
                          /> 默认地址
                        </label>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="updataByIdAndFRAddress()">保存</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal -->
        </div>
        <!-- 模态框 -->
      </div>
      <div class="flex-footer">
        <div class="pull-left">
          <span>第{{ (pagination.current_page-1)*pagination.per_page+1 }}-{{ pagination.current_page*pagination.per_page }}条,共计{{ pagination.total }}条,每页显示</span>
        </div>
        <div class="pull-right">
          <VueBootstrapPagination
            :pagination="pagination"
            :callback="queryToAddress"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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




import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';

export default {
  components: {
    
    
    'v-select': vSelect,
    
    
  },
  data: function() {
    this.Common = Common;
    return {
      projectItemId: undefined,
      fromClient: undefined,
      fromAddress: undefined,
      fromContractUser: undefined,
      fromContractPhone: undefined,
      defaultAddress: false,
      ProjectItemAddressDtos: [],
      name: '',
      projectItemList: [],
      ProjectItemAddressDto: {},
      projectItemDto: [],
      projectItems: {},
      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: {
    /**
     * 下拉框给projectItemId赋值
     */
    projectItemIdAssignment: function(id) {
      var _self = this;
      _self.projectItemId = id;
      _self.queryFRAddress(id);
    },
    /**
     * 保存地址
     */
    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.projectItemDto = {
        id: _self.ProjectItemAddressDto.projectItemId,
        name: _self.ProjectItemAddressDto.projectItemName,
      };
    },
    /**
     * 修改项目事件发货信息
     */
    updataByIdAndFRAddress: function() {
      var _self = this;
      _self.ProjectItemAddressDto.projectItemId = _self.projectItemDto.id;
      _self.ProjectItemAddressDto.projectItemName = _self.projectItemDto.name;

      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++) {
              if (projectItemId == _self.projectItemList[i].id) {
                _self.projectItems = {
                  id: _self.projectItemList[i].id,
                  name: _self.projectItemList[i].name,
                };
              }
            }
          } 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>
.form-inline .form-group label {
  width: 80px;
  text-align: right;
  padding-right: 5px;
}

.form-inline .form-group input,
.form-inline .form-group select {
  width: 200px;
}
</style>

<style scoped>
.flex-container {
  display: flex;
  /* 垂直*/
  flex-direction: column;
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
  height: calc(100vh - 30px);
}

.flex-header {
  height: 200px;
  /*放大缩小比例为0 */
  flex: 0 0 100px;
}

.flex-footer {
  margin-top: 0.8em;
  height: 35px;
  /*放大缩小比例为0 */
  flex: 0 0 35px;
}

.flex-content {
  flex: 1;
  overflow: scroll;
  width: 100%;
  height: 0;
}

.image {
  width: 40px;
  height: 40px;
}

.modal-img-box {
  width: 100%;
  text-align: center;
  overflow: auto;
}

.m-img {
  width: 100%;
}

.table th,
.table td {
  text-align: center;
  vertical-align: middle !important;
}
</style>