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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 415
      src/views/basicdata/brand/basicClient.vue

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

Write Preview
Loading…
Cancel
Save