MTP2.0_WEB/src/views/information/warehouse-info/compoments/add/index.vue

<template>
  <!-- 平安 新增仓库信息 -->
  <a-modal v-if="isOemByEnum(OemType.pingan)"
           class="add-warehouse commonModal"
           title="新增仓库信息"
           v-model:visible="visible"
           centered
           :maskClosable="false"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="cancel">取消</a-button>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">完成</a-button>
    </template>
    <a-form class="inlineForm"
            ref="formRef"
            :model="formState"
            :rules="rules">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="仓库类型"
                       name="warehousetype">
            <a-select class="typeSelect"
                      style="width: 200px"
                      v-model:value="formState.warehousetype"
                      placeholder="请选择仓库类型">
              <a-select-option v-for="item in warehouseType"
                               :key="item.enumitemname"
                               :value="item.enumitemname">{{item.enumdicname}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="仓库名称"
                       name="warehousename">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.warehousename"
                     placeholder="请输入仓库名称" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="仓库简称"
                       name="warehousecode">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.warehousecode"
                     placeholder="请输入仓库简称" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
  <!-- 其他项目 新增仓库信息 -->
  <a-modal v-else
           class="add-warehouse commonModal"
           title="新增仓库信息"
           v-model:visible="visible"
           centered
           :maskClosable="false"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="cancel">取消</a-button>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">完成</a-button>
    </template>
    <a-form class="inlineForm"
            ref="formRef"
            :model="formState"
            :rules="rules">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="仓库类型"
                       name="warehousetype">
            <a-select class="typeSelect"
                      style="width: 200px"
                      v-model:value="formState.warehousetype"
                      placeholder="请选择仓库类型">
              <a-select-option v-for="item in warehouseType"
                               :key="item.enumitemname"
                               :value="item.enumitemname">{{item.enumdicname}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="仓库名称"
                       name="warehousename">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.warehousename"
                     placeholder="请输入仓库名称" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="仓库简称"
                       name="warehousecode">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.warehousecode"
                     placeholder="请输入仓库简称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系人"
                       name="contactname">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.contactname"
                     placeholder="请输入联系人" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="联系电话"
                       name="contactnum">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.contactnum"
                     placeholder="请输入联系电话" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="所在地区">
            <a-select class="inlineFormSelect"
                      style="width: 205px"
                      v-model:value="formState.provinceid"
                      @change="getCityList"
                      placeholder="请选择省">
              <a-select-option v-for="item in provinceList"
                               :key="item.autoid"
                               :value="item.autoid">{{item.divisionname}}</a-select-option>
            </a-select>
            <a-select class="inlineFormSelect ml9"
                      style="width: 205px"
                      v-model:value="formState.cityid"
                      @change="getDistrictList"
                      placeholder="请选择市">
              <a-select-option v-for="item in cityList"
                               :key="item.autoid"
                               :value="item.autoid">{{item.divisionname}}</a-select-option>
            </a-select>
            <a-select class="inlineFormSelect ml9"
                      v-model:value="formState.districtid"
                      style="width: 205px"
                      placeholder="请选择县(区)">
              <a-select-option v-for="item in districtList"
                               :key="item.autoid"
                               :value="item.autoid">{{item.divisionname}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="详细地址"
                       name="address">
            <a-input class="dialogInput"
                     v-model:value="formState.address"
                     style="width: 635px"
                     placeholder="请输入详细地址" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, toRaw } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { getAddress } from '@/services/go/adress';
import { handleForm, FormState } from '../setup';
import { ValidateErrorEntity } from 'ant-design-vue/lib/form/interface';
import { AllEnums } from '@/services/go/commonService/interface';
import { WarehouseApplyReq } from '@/services/proto/warehouse/interface';
import { ErmcpWareHouseInfo } from '@/services/go/ermcp/warehouse-info/interface';
import { getWarehouseTypeEnumList } from '@/common/constants/enumsList';
import { addWarehouseApply } from '@/services/proto/warehouse';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { validateAction } from '@/common/setup/form';
import { isOemByEnum, OemType } from '@/common/config/projectName';

export default defineComponent({
    name: 'warehouse_info_btn_add',
    components: {},
    props: {
        selectedRow: {
            type: Object as PropType<ErmcpWareHouseInfo>,
            default: {},
        },
    },
    setup(props, context) {
        const { visible, cancel } = closeModal('warehouse_info_btn_add');
        const loading = ref<boolean>(false);
        const { cityList, districtList, provinceList, getCityList, getDistrictList } = getAddress();
        const warehouseType = ref<AllEnums[]>(getWarehouseTypeEnumList());
        const { formRef, formState, rules } = handleForm();
        function submit() {
            validateAction<FormState>(formRef, formState).then((param) => {
                const reqParam: WarehouseApplyReq = {
                    type: 1, // int32 类型 1 新增 2 修改
                    warehouseid: param.warehouseid, // uint64 仓库ID
                    warehousecode: param.warehousecode, // string 仓库代码
                    warehousename: param.warehousename, // string 仓库名称
                    warehousetype: undefined === param.warehousetype ? 0 : (param.warehousetype as number), // int32 仓库类型 - 1 厂库  2 自有库  3 合作库
                    provinceid: undefined === param.provinceid ? 0 : (param.provinceid as number), // uint64 省
                    cityid: undefined === param.cityid ? 0 : (param.cityid as number), // uint64 市
                    districtid: undefined === param.districtid ? 0 : (param.districtid as number), // int32 区
                    address: param.address, // string 详细地址
                    contactname: param.contactname, // string 联系人
                    contactnum: param.contactnum, // string 联系电话
                };
                requestResultLoadingAndInfo(addWarehouseApply, reqParam, loading, ['新建仓库成功', '新建仓库失败']).then(() => {
                    cancel();
                    context.emit('refresh');
                });
            });
        }
        return {
            visible,
            cancel,
            submit,
            loading,
            maskClosableFlag: false,
            cityList,
            districtList,
            provinceList,
            getCityList,
            getDistrictList,
            formRef,
            formState,
            rules,
            warehouseType,
            isOemByEnum,
            OemType,
        };
    },
});
</script>

<style lang="less">
.add-warehouse {
}
.upload {
    display: inline-flex;
    .ant-btn.uploadBtn {
        width: 60px;
        height: 30px;
        background: @m-blue0;
        border: 0;
        padding: 0;
        text-align: center;
        font-size: 14px;
        color: @m-white0;
        .rounded-corners(3px);
        &:hover {
            background: @m-blue0-hover;
            color: @m-white0-hover;
        }
    }
    .look {
        color: @m-blue0;
        font-size: 14px;
        margin-left: 10px;
        cursor: pointer;
    }
}
</style
>;