2023-10-11 14:36:56 +08:00

780 lines
24 KiB
Vue

<template>
<div>
<el-card class="!border-none" shadow="never">
<el-page-header content="用户详情" @back="$router.back()" />
</el-card>
<el-card class="mt-4 !border-none" shadow="never">
<el-form ref="formRef" :model="formData" label-width="84px">
<div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
<div class="headimg">
<el-upload
v-model="formData.avatar"
class="avatar-uploader-head"
:disabled="flag"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessAvatar"
>
<img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</div>
<el-col class="pt-6 !border-none">
<el-row>
<el-col :span="11">
<el-form-item label="姓名" prop="nickname">
<el-input
v-model="formData.nickname"
:disabled="flag"
placeholder="请输入姓名"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="性别" prop="sex">
<el-select
v-model="formData.sex"
:disabled="flag"
placeholder="请选择性别"
:style="{ width: '100%' }"
>
<el-option label="男" :value="1" />
<el-option label="女" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="身份证号" prop="id_card">
<el-input
v-model="formData.id_card"
:disabled="flag"
placeholder="请输入身份证号"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="联系电话" prop="account">
<el-input
v-model="formData.account"
placeholder="请输入联系电话"
:disabled="flag"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="省" prop="province" style="flex: 1">
<el-select
v-model="formData.province"
placeholder="请选择省"
:disabled="flag"
clearable
@change="province_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.provinceOptions"
:key="index"
:label="item.province_name"
:value="item.province_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="市" prop="city" style="flex: 1">
<el-select
v-model="formData.city"
placeholder="请选择市"
clearable
:disabled="flag"
@change="city_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.cityOptions"
:key="index"
:label="item.city_name"
:value="item.city_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="区" prop="area" style="flex: 1">
<el-select
v-model="formData.area"
placeholder="请选择区"
:disabled="flag"
clearable
@change="area_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.areaOptions"
:key="index"
:label="item.area_name"
:value="item.area_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="镇" prop="street" style="flex: 1">
<el-select
v-model="formData.street"
placeholder="请选择镇"
:disabled="flag"
clearable
@change="street_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.streetOptions"
:key="index"
:label="item.street_name"
:value="item.street_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="村社小队" prop="address" style="flex: 1.5">
<el-input
v-model="formData.address"
:disabled="flag"
placeholder="请输入村社小队"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-row>
</el-col>
<el-col :span="24" style="margin-top: 1vh">
<!-- <el-row>
<el-col :span="12" v-if="mode == 'initiate' || formData.party_b">
<el-form-item label="签约方" prop="field130">
<el-input
v-model="formData.party_b_name"
placeholder="请选择签约方"
clearable
:style="{ width: '100%' }"
@click="isCompany = true"
@clear="clearPartyA"
></el-input>
</el-form-item>
</el-col>
</el-row> -->
</el-col>
<div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>
<div style="display: flex; justify-content: space-between">
<div>
<el-form-item label="身份证" prop="id_card">
<el-upload
v-model="formData.qualification.id_card"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessIdA"
>
<img
v-if="formData.qualification.id_card"
:src="formData.qualification.id_card"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.id_card_b"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessIdB"
>
<img
v-if="formData.qualification.id_card_b"
:src="formData.qualification.id_card_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="银行卡" prop="bank_account">
<el-upload
v-model="formData.qualification.bank_account"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessBankA"
:before-upload="beforeAvatarUpload_three"
>
<img
v-if="formData.qualification.bank_account"
:src="formData.qualification.bank_account"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.bank_account_b"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessBankB"
:before-upload="beforeAvatarUpload_three"
>
<img
v-if="formData.qualification.bank_account_b"
:src="formData.qualification.bank_account_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="行驶证" prop="car_card">
<el-upload
v-model="formData.qualification.car_card"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarA"
>
<img
v-if="formData.qualification.car_card"
:src="formData.qualification.car_card"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.car_card_b"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarB"
:before-upload="beforeAvatarUpload_two"
>
<img
v-if="formData.qualification.car_card_b"
:src="formData.qualification.car_card_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
</div>
<template v-if="disabledPartyA">
<el-col :span="24">
<el-row>
<el-col :span="12">
<el-form-item label="签约姓名" prop="name">
<el-input
v-model="formData.nickname"
placeholder="请输入签约姓名"
:disabled="true"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="sex">
<el-input
placeholder="请输入性别"
:disabled="true"
clearable
:style="{ width: '100%' }"
:value="formData.sex == '1' ? '男' : '女'"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="id_card">
<el-input
v-model="formData.id_card"
placeholder="请输入身份证号"
:disabled="true"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="account">
<el-input
v-model="formData.account"
placeholder="请输入联系电话"
:disabled="true"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.name">
<el-form-item label="账号">
<el-input
v-model="formData.account"
:disabled="true"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.name">
<el-form-item label="初始密码" prop="password">
<el-input
:model-value="'m' + formData.account"
:disabled="true"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-col>
</template>
<el-col :span="24" v-if="mode == 'uplode'">
<el-form-item label="合同上传" prop="field127">
<el-upload
:headers="{ Token: userStore.token }"
v-model:file-list="fileList"
class="upload-demo"
:action="base_url + '/upload/file'"
:on-success="handleAvatarSuccess_four"
multiple
:limit="1"
>
<el-button type="primary">上传</el-button>
</el-upload>
</el-form-item>
</el-col>
<!-- <el-col :span="24" v-if="formData.contract">
<el-form-item label="合同地址">
<el-link
type="success"
:href="formData.contract.file"
target="_blank"
>在线查看</el-link
>
</el-form-item>
</el-col> -->
<el-col :span="24" v-if="mode == 'initiate'" class="pt-6">
<el-row>
<el-col :span="8">
<el-form-item label="合同类型" prop="contract_type">
<el-col :span="24">
<el-select
v-model="formData.contract_type"
placeholder="请选择合同类型"
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.contract_type"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="field139">
<el-button
type="primary"
v-if="mode == 'initiate'"
@click="initiateContactFn"
>发起合同</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-form>
</el-card>
<account-adjust
v-model:show="adjustState.show"
:value="adjustState.value"
@confirm="handleConfirmAdjust"
/>
<!-- <el-dialog v-model="isCompany" title="选择签约方" width="60%">
<DialogIndex @customEvent="customEvent" />
</el-dialog> -->
</div>
</template>
<script lang="ts" setup name="consumerDetail">
import type {
FormInstance,
UploadProps,
ElMessage,
UploadUserFile,
} from "element-plus";
import {
adjustMoney,
getUserDetail,
userEdit,
creatContact,
initiateContact,
upContact,
} from "@/api/consumer";
import {
apiCityList,
apiAreaList,
apiStreetList,
apiProvinceList,
} from "@/api/common";
import { dictDataLists } from "@/api/setting/dict";
import DialogIndex from "@/components/dialog_index.vue";
import { isEmpty } from "@/utils/util";
import AccountAdjust from "../components/account-adjust.vue";
import useMultipleTabs from "@/hooks/useMultipleTabs";
import useUserStore from "@/stores/modules/user";
import feedback from "@/utils/feedback";
import { inject } from "vue";
const base_url: any = inject("base_url");
const { removeTab } = useMultipleTabs();
const router = useRouter();
const route = useRoute();
const flag = ref(true);
const formData = reactive({
id: "",
sex: "",
id_card: "",
nickname: "",
province: "",
city: "",
area: "",
street: "",
address: "",
account: "",
is_contract: 0,
// 签约方
party_b_name: "",
party_b: "",
qualification: {
id_card: "",
id_card_b: "",
car_card: "",
car_card_b: "",
bank_account: "",
bank_account_b: "",
},
// 合同类型
contract_type: "",
file: "",
avatar: "",
multipoint_login: 1,
contract: {
url: "",
},
});
const disabledPartyA = ref(false);
const adjustState = reactive({
show: false,
value: "",
});
// 字典信息
const datas: any = reactive({
provinceOptions: [],
cityOptions: [],
areaOptions: [],
streetOptions: [],
dictTypeLists: [],
contract_type: [],
contract: [],
});
const formRef = shallowRef<FormInstance>();
const isEdit = ref(false);
const isCompany = ref(false);
const userStore = useUserStore();
function customEvent(data: any) {
isCompany.value = false;
formData.party_b = data.id;
formData.party_b_name = data.company_name;
disabledPartyA.value = true;
}
function clearPartyA() {
formData.party_b = "";
formData.party_b_name = "";
}
const getcontract_type = async () => {
const data = await dictDataLists({ type_id: 7 });
datas["contract_type"] = data["lists"];
};
const mode = ref(null);
getcontract_type();
const getDetails = async () => {
const data = await getUserDetail({
id: route.query.id,
});
Object.keys(formData).forEach((key) => {
//@ts-ignore
formData[key] = data[key];
});
mode.value = route.query.mode;
formData.contract_type = data.contract?.contract_type;
formData.party_b_name = data.contract?.party_b_name;
formData.party_b = data.contract?.party_b;
formData.file = data.contract?.file;
data.contract
? (fileList.value[0] = {
url: data.contract?.file,
name: data.contract ?? "合同文件",
})
: "";
await getCityList();
await getAreaList();
await getStreetList();
};
const handleEdit = async (value: string, field: string) => {
if (isEmpty(value)) return;
await userEdit({
id: route.query.id,
field,
value,
});
getDetails();
};
const fileList = ref<UploadUserFile[]>([]);
// 图片上传成功返回的url
const handleAvatarSuccessIdA: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.id_card = response.data.uri;
};
const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.avatar = response.data.uri;
};
const handleAvatarSuccessIdB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.id_card_b = response.data.uri;
};
const handleAvatarSuccessCarA: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.car_card = response.data.uri;
};
const handleAvatarSuccessCarB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.car_card_b = response.data.uri;
};
const beforeAvatarUpload_two: UploadProps["beforeUpload"] = (rawFile) => {
return true;
};
const handleAvatarSuccessBankA: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.bank_account = response.data.uri;
};
const handleAvatarSuccessBankB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.bank_account_b = response.data.uri;
};
const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.file = response.data.uri;
upContact({ file: formData.file, id: route.query.mdoeid }).then((res) => [
(mode.value = false),
]);
};
const beforeAvatarUpload_three: UploadProps["beforeUpload"] = (rawFile) => {
return true;
};
//获取省份
function province_change(value: string) {
getCityList();
}
function city_change(value: string) {
getAreaList();
}
function area_change(value: string) {
getStreetList();
}
function street_change(value: string) {
formData.street = value;
}
const getProvinceList = async () => {
const data = await apiProvinceList({});
datas["provinceOptions"] = data;
};
const getCityList = async () => {
const data = await apiCityList({ city: formData.province });
datas["cityOptions"] = data;
};
const getAreaList = async () => {
const data = await apiAreaList({ area: formData.city });
datas["areaOptions"] = data;
};
const getStreetList = async () => {
const data = await apiStreetList({ street: formData.area });
datas["streetOptions"] = data;
};
const handleAdjust = (value: string) => {
adjustState.show = true;
adjustState.value = value;
};
const handleConfirmAdjust = async (value: any) => {
await adjustMoney({ user_id: route.query.id, ...value });
adjustState.show = false;
getDetails();
};
// 发起合同
const initiateContactFn = () => {
const { contract_type } = formData;
// console.log(party_b, contract_type);
initiateContact({ party_b: route.query.id, contract_type, type: 2 }).then(
(res) => {
feedback.msgSuccess("发起成功,等待平台风控部上传合同");
}
);
};
getDetails();
getProvinceList();
console.log(formData);
</script>
<style lang="scss">
.headimg {
margin-top: 24px;
width: 6.2vw;
height: 7.2vw;
float: left;
overflow: hidden;
}
.avatar-uploader-head .el-upload {
width: 6.2vw;
height: 7.2vw;
background-color: #fff;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload {
width: 9.9vw;
height: 6.3vw;
background-color: #fff;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
</style>