java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

客户导入新增loading

dev-xx
qb 1 year ago
parent
1b9ad4b2ed
commit
759994dbb8
1 changed files with 221 additions and 196 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 417
      src/views/basicdata/brand/basicClient.vue

417
src/views/basicdata/brand/basicClient.vue
Unescape View File

@ -60,7 +60,7 @@
<el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain
>删 除</el-button
>
<el-button type="danger" icon="el-icon-delete" @click="handleImport">导 入 </el-button>
<el-button type="danger" icon="Upload" @click="handleImport">导 入 </el-button>
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
@ -184,193 +184,201 @@
:close-on-click-modal="false"
append-to-body
>
<el-form :disabled="view" ref="form" :model="form" :rules="rules" label-width="120px">
<!-- 表单字段 -->
<el-form-item label="客户编码" prop="clientCode">
<el-input
v-model="form.clientCode"
:validate-method="validateInput"
placeholder="请输入客户编码"
style="width: 100%"
:disabled="viewClientEntd"
/>
</el-form-item>
<el-form-item label="客户名称" prop="clientName">
<el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 100%" />
</el-form-item>
<el-form-item label="客户类型" prop="clientType">
<!-- <el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 100%"/>-->
<!-- <el-select v-model="form.clientType" class="m-2" placeholder="请选择客户类型" style="width: 100%">-->
<!-- <el-option label="发货方" value="1"/>-->
<!-- <el-option label="收货方" value="2"/>-->
<!-- </el-select>-->
<el-select
v-model="form.clientType"
class="m-2"
placeholder="请选择客户端类型"
style="width: 100%"
>
<el-option
v-for="item in clientType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey"
<div v-loading="loadingObj.submitLoading">
<el-form :disabled="view" ref="form" :model="form" :rules="rules" label-width="120px">
<!-- 表单字段 -->
<el-form-item label="客户编码" prop="clientCode">
<el-input
v-model="form.clientCode"
:validate-method="validateInput"
placeholder="请输入客户编码"
style="width: 100%"
:disabled="viewClientEntd"
/>
</el-select>
</el-form-item>
<el-form-item label="服务类型" prop="typeServiceList">
<el-select
v-model="form.typeServiceList"
multiple
placeholder="请选择"
style="width: 100%"
@change="coverCharge"
>
<el-option
v-for="item in freightType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey"
</el-form-item>
<el-form-item label="客户名称" prop="clientName">
<el-input
v-model="form.clientName"
placeholder="请输入客户名称"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="客户类型" prop="clientType">
<!-- <el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 100%"/>-->
<!-- <el-select v-model="form.clientType" class="m-2" placeholder="请选择客户类型" style="width: 100%">-->
<!-- <el-option label="发货方" value="1"/>-->
<!-- <el-option label="收货方" value="2"/>-->
<!-- </el-select>-->
<el-select
v-model="form.clientType"
class="m-2"
placeholder="请选择客户端类型"
style="width: 100%"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="配送类型" prop="businessType" v-if="distriType">
<el-radio-group
v-model="form.businessType"
class="ml-4"
v-for="item in distributionType"
>
<el-radio :label="item.dictKey" size="large" style="margin-right: 25px">{{
item.dictValue
}}</el-radio>
<!-- <el-radio label="2" size="large">Option 2</el-radio>-->
</el-radio-group>
<!-- </div>-->
</el-form-item>
<!-- <el-form-item label="客户端类型" prop="typeService">
&lt;!&ndash; <el-input v-model="form.typeService" placeholder="请输入客户类型"/>&ndash;&gt;
&lt;!&ndash; <el-input v-model="form.typeService" placeholder="请输入客户类型;1 C端 2 B端"/>&ndash;&gt;
<el-select v-model="form.typeService" class="m-2" placeholder="请选择客户端类型" style="width: 100%">
<el-option
v-for="item in clientType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</el-form-item>-->
<el-form-item label="联系人" prop="linkman" v-if="viewEntd">
<el-input v-model="form.linkman" placeholder="请输入联系人" style="width: 100%" />
</el-form-item>
<el-form-item label="联系电话" prop="phone" v-if="viewEntd">
<el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 100%" />
</el-form-item>
<el-form-item label="地址" prop="bladeRegionProvinceId">
<!-- <el-input v-model="form.bladeRegionProvinceId" placeholder="请输入省份"/>-->
<el-cascader
:options="optioner"
style="width: 100%"
v-model="form.bladeRegionProvinceId"
:props="{
checkStrictly: false,
}"
filterable
>
<template #default="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="detailedly">
<el-input v-model="form.detailedly" placeholder="请填写详细地址" style="width: 100%" />
</el-form-item>
<el-form-item label="默认付款方式" prop="defaultPaymentMethods">
<el-select v-model="form.defaultPaymentMethods" placeholder="请选择默认付款方式">
<el-option
v-for="item in defaultPaymentMethodsOptions"
:key="item.value"
:label="item.label"
:value="item.value"
<el-option
v-for="item in clientType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</el-form-item>
<el-form-item label="服务类型" prop="typeServiceList">
<el-select
v-model="form.typeServiceList"
multiple
placeholder="请选择"
style="width: 100%"
@change="coverCharge"
>
<el-option
v-for="item in freightType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="配送类型" prop="businessType" v-if="distriType">
<el-radio-group
v-model="form.businessType"
class="ml-4"
v-for="item in distributionType"
>
<el-radio :label="item.dictKey" size="large" style="margin-right: 25px">{{
item.dictValue
}}</el-radio>
<!-- <el-radio label="2" size="large">Option 2</el-radio>-->
</el-radio-group>
<!-- </div>-->
</el-form-item>
<!-- <el-form-item label="客户端类型" prop="typeService">
&lt;!&ndash; <el-input v-model="form.typeService" placeholder="请输入客户类型"/>&ndash;&gt;
&lt;!&ndash; <el-input v-model="form.typeService" placeholder="请输入客户类型;1 C端 2 B端"/>&ndash;&gt;
<el-select v-model="form.typeService" class="m-2" placeholder="请选择客户端类型" style="width: 100%">
<el-option
v-for="item in clientType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</el-form-item>-->
<el-form-item label="联系人" prop="linkman" v-if="viewEntd">
<el-input v-model="form.linkman" placeholder="请输入联系人" style="width: 100%" />
</el-form-item>
<el-form-item label="联系电话" prop="phone" v-if="viewEntd">
<el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 100%" />
</el-form-item>
<el-form-item label="地址" prop="bladeRegionProvinceId">
<!-- <el-input v-model="form.bladeRegionProvinceId" placeholder="请输入省份"/>-->
<el-cascader
:options="optioner"
style="width: 100%"
v-model="form.bladeRegionProvinceId"
:props="{
checkStrictly: false,
}"
filterable
>
<template #default="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="detailedly">
<el-input
v-model="form.detailedly"
placeholder="请填写详细地址"
style="width: 100%"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="三方商城" prop="tripartiteMall">-->
<!-- <el-input v-model="form.tripartiteMall" placeholder="请填写三方商城" style="width: 100%" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="开票信息" prop="billingInformation">-->
<!-- <el-input v-model="form.billingInformation" placeholder="请填写开票信息" style="width: 100%" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="市" prop="bladeRegionCityId">-->
<!-- <el-input v-model="form.bladeRegionCityId" placeholder="请输入市"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="区/县" prop="bladeRegionAreaId">-->
<!-- <el-input v-model="form.bladeRegionAreaId" placeholder="请输入区/县"/>-->
<!-- </el-form-item>-->
<el-form-item label="合同附件" prop="leaseAccessories" style="width: 100%">
<!-- <el-input v-model="form.leaseAccessories" placeholder="请输入合同附件"/>-->
<el-upload
v-model:file-list="fileList"
class="upload-demo"
:action="action"
:headers="headers"
multiple
:on-preview="handlePreview"
:on-success="
(response, file, fileList) => {
uploadSuccess(fileList);
}
"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeUploadFn"
:limit="3"
:on-exceed="handleExceed"
>
<el-button type="Primary" icon="Position">上传</el-button>
<template #tip>
<div class="el-upload__tip">大小不超过500KB的jpg/png文件。</div>
</template>
</el-upload>
<el-image-viewer
v-if="showImgViewer"
:url-list="imgPreviewUrl"
@close="handleCo"
:z-index="300"
fit="cover"
/>
</el-form-item>
<el-form-item label="合同开始时间" prop="contractStartTime" label-width="120px">
<el-date-picker
v-model="form.contractStartTime"
type="date"
placeholder="选择时间"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-form-item>
<el-form-item label="默认付款方式" prop="defaultPaymentMethods">
<el-select v-model="form.defaultPaymentMethods" placeholder="请选择默认付款方式">
<el-option
v-for="item in defaultPaymentMethodsOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="三方商城" prop="tripartiteMall">-->
<!-- <el-input v-model="form.tripartiteMall" placeholder="请填写三方商城" style="width: 100%" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="开票信息" prop="billingInformation">-->
<!-- <el-input v-model="form.billingInformation" placeholder="请填写开票信息" style="width: 100%" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="市" prop="bladeRegionCityId">-->
<!-- <el-input v-model="form.bladeRegionCityId" placeholder="请输入市"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="区/县" prop="bladeRegionAreaId">-->
<!-- <el-input v-model="form.bladeRegionAreaId" placeholder="请输入区/县"/>-->
<!-- </el-form-item>-->
<el-form-item label="合同附件" prop="leaseAccessories" style="width: 100%">
<!-- <el-input v-model="form.leaseAccessories" placeholder="请输入合同附件"/>-->
<el-upload
v-model:file-list="fileList"
class="upload-demo"
:action="action"
:headers="headers"
multiple
:on-preview="handlePreview"
:on-success="
(response, file, fileList) => {
uploadSuccess(fileList);
}
"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeUploadFn"
:limit="3"
:on-exceed="handleExceed"
>
<el-button type="Primary" icon="Position">上传</el-button>
<template #tip>
<div class="el-upload__tip">大小不超过500KB的jpg/png文件。</div>
</template>
</el-upload>
<el-image-viewer
v-if="showImgViewer"
:url-list="imgPreviewUrl"
@close="handleCo"
:z-index="300"
fit="cover"
/>
</el-form-item>
<el-form-item label="合同开始时间" prop="contractStartTime" label-width="120px">
<el-date-picker
v-model="form.contractStartTime"
type="date"
placeholder="选择时间"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="合同结束时间" prop="contractEntTime" label-width="120px">
<el-date-picker
v-model="form.contractEntTime"
type="date"
placeholder="选择时间"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-form>
<!-- 表单按钮 -->
<template #footer>
<span v-if="!view" class="dialog-footer">
<el-form-item label="合同结束时间" prop="contractEntTime" label-width="120px">
<el-date-picker
v-model="form.contractEntTime"
type="date"
placeholder="选择时间"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-form>
<!-- 表单按钮 -->
<div v-if="!view" class="flex-c-c">
<el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit('form')"
>提 交</el-button
>
<el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
</span>
</template>
</div>
</div>
</el-dialog>
<!-- 账号绑定弹出框页面
@ -805,6 +813,9 @@ export default {
label: '内部结算',
},
],
loadingObj: {
submitLoading: false,
},
};
},
created() {},
@ -1191,42 +1202,56 @@ export default {
if (!this.form.id) {
console.log('添加提交的数据：', this.form);
this.$refs[from].validate(valid => {
this.$refs[from].validate(async valid => {
if (valid) {
// this.form.typeService = !!this.form.typeService ? parseInt(this.form.typeService) : undefined;
this.form.bladeRegionCityId = this.form.bladeRegionProvinceId[1];
this.form.bladeRegionAreaId = this.form.bladeRegionProvinceId[2];
this.form.bladeRegionProvinceId = this.form.bladeRegionProvinceId[0];
console.log('上传llll>>>', this.form);
add(this.form).then(() => {
try {
this.loadingObj.submitLoading = true;
// this.form.typeService = !!this.form.typeService ? parseInt(this.form.typeService) : undefined;
this.form.bladeRegionCityId = this.form.bladeRegionProvinceId[1];
this.form.bladeRegionAreaId = this.form.bladeRegionProvinceId[2];
this.form.bladeRegionProvinceId = this.form.bladeRegionProvinceId[0];
console.log('上传llll>>>', this.form);
await add(this.form);
this.box = false;
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
} catch (error) {
console.log('error :>> ', error);
} finally {
this.loadingObj.submitLoading = false;
}
} else {
console.log('error submit!!');
return false;
}
});
} else {
this.$refs[from].validate(valid => {
this.$refs[from].validate(async valid => {
if (valid) {
console.log('修改提交的数据：', this.form);
// this.form.typeService = !!this.form.typeService ? parseInt(this.form.typeService) : undefined;
this.form.bladeRegionCityId = this.form.bladeRegionProvinceId[1];
this.form.bladeRegionAreaId = this.form.bladeRegionProvinceId[2];
this.form.bladeRegionProvinceId = this.form.bladeRegionProvinceId[0];
update(this.form).then(() => {
try {
this.loadingObj.submitLoading = true;
console.log('修改提交的数据：', this.form);
// this.form.typeService = !!this.form.typeService ? parseInt(this.form.typeService) : undefined;
this.form.bladeRegionCityId = this.form.bladeRegionProvinceId[1];
this.form.bladeRegionAreaId = this.form.bladeRegionProvinceId[2];
this.form.bladeRegionProvinceId = this.form.bladeRegionProvinceId[0];
await update(this.form);
this.box = false;
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
} catch (error) {
console.log('error :>> ', error);
} finally {
this.loadingObj.submitLoading = false;
}
} else {
console.log('error submit!!');
return false;

Write Preview
Loading…
Cancel
Save