MTP2.0_WEB/src/views/information/goods/components/modify/index.vue

<template>
  <!-- 修改客户资料 -->
  <a-modal class="commonModal modify-custom"
           title="修改客户资料"
           v-if="visible"
           v-model:visible="visible"
           centered
           :maskClosable="maskClosableFlag"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">完成</a-button>
    </template>
    <a-form class="inlineForm"
            :form="form"
            @submit="handleSearch">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="客户类型">
            <a-select class="typeSelect"
                      style="width: 200px"
                      placeholder="请选择客户类型">
              <a-select-option value="1">
                客户一
              </a-select-option>
              <a-select-option value="2">
                客户二
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="企业名称">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入企业名称" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="企业简称">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入企业简称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="证件类型">
            <a-select class="inlineFormSelect"
                      style="width: 200px"
                      placeholder="请选择证件类型">
              <a-select-option value="1">
                客户一
              </a-select-option>
              <a-select-option value="2">
                客户二
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="法定代表人">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入法定代表人" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="证件号码">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入证件号码" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="纳税人识别号">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入纳税人识别号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="营业执照">
            <div class="upload">
              <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :transform-file="transformFile">
                <a-button class="uploadBtn">上传</a-button>
              </a-upload>
              <div class="look">查看附件</div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="联系人">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入联系人" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系人手机号">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入联系人手机号" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="联系电话">
            <a-input class="dialogInput"
                     style="width: 200px"
                     placeholder="请输入联系电话" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            &nbsp;
          </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"
                      placeholder="请选择省">
              <a-select-option value="1">
                客户一
              </a-select-option>
              <a-select-option value="2">
                客户二
              </a-select-option>
            </a-select>
            <a-select class="inlineFormSelect"
                      style="width: 205px"
                      placeholder="请选择市">
              <a-select-option value="1">
                客户一
              </a-select-option>
              <a-select-option value="2">
                客户二
              </a-select-option>
            </a-select>
            <a-select class="inlineFormSelect"
                      style="width: 205px"
                      placeholder="请选择县(区)">
              <a-select-option value="1">
                客户一
              </a-select-option>
              <a-select-option value="2">
                客户二
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="&nbsp;">
            <a-input class="dialogInput"
                     style="width: 635px"
                     placeholder="请输入详细地址" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注">
            <a-input class="dialogInput"
                     style="width: 635px"
                     placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods/index';

export default defineComponent({
    name: 'modify-custom',
    components: {},
    props: {
        // selectedRow: {
        //   type:
        // }
    },
    setup() {
        // const { visible, cancel } = closeModal('modifyCustomInfo');
        const { visible, cancel } = closeModal('custom_info_btn_modify');

        const loading = ref<boolean>(false);
        const maskClosableFlag = ref<boolean>(false);
        function submit() {
            loading.value = true;
            setTimeout(() => {
                loading.value = false;
                cancel();
            }, 2000);
        }
        initData(() => {});
        return {
            visible,
            cancel,
            submit,
            loading,
            maskClosableFlag,
        };
    },
});
</script>

<style lang="less">
.modify-custom {
    .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: rgba(@m-blue0, 0);
                color: rgba(@m-white0, 0.8);
            }
        }
        .look {
            color: @m-blue0;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
}
</style
>;