2023-07-31 17:39:32 +08:00

722 lines
30 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" :rules="formRules">
<div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
<div class="headimg">
<el-upload
:disabled="isCheck"
v-model="formData.avatar"
class="avatar-uploader-head"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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
:disabled="isCheck"
v-model="formData.nickname"
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"
placeholder="请选择性别"
:disabled="isCheck"
: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
:disabled="isCheck"
v-model="formData.id_card"
placeholder="请输入身份证号"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="联系电话" prop="account">
<el-input
:disabled="isCheck"
v-model="formData.account"
placeholder="请输入联系电话"
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
:disabled="isCheck"
v-model="formData.province"
placeholder="请选择省"
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
:disabled="isCheck"
v-model="formData.city"
placeholder="请选择市"
clearable
@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
:disabled="isCheck"
v-model="formData.area"
placeholder="请选择区"
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
:disabled="isCheck"
v-model="formData.street"
placeholder="请选择镇"
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
:disabled="isCheck"
v-model="formData.address"
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">
<el-form-item label="签约方" prop="field130">
<el-input
:disabled="isCheck"
v-model="formData.party_a_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
:disabled="isCheck"
v-model="formData.qualification.id_card"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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
:disabled="isCheck"
v-model="formData.qualification.id_card_b"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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="car_card">
<el-upload
:disabled="isCheck"
v-model="formData.qualification.car_card"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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
:disabled="isCheck"
v-model="formData.qualification.car_card_b"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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>
<el-form-item label="银行卡号" prop="bank_account">
<el-upload
:disabled="isCheck"
v-model="formData.qualification.bank_account"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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
:disabled="isCheck"
v-model="formData.qualification.bank_account_b"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
action="https://worker-task.lihaink.cn/api/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>
<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.name"
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-col :span="24">
<el-form-item label="合同类型" prop="contract_type">
<el-col :span="24">
<el-select
:disabled="isCheck"
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-row>
</el-col>
<el-col :span="24" v-if="!isCheck && mode != 'view'">
<el-form-item label="合同上传" prop="field127">
<el-upload
:headers="{ Token: userStore.token }"
v-model:file-list="fileList"
class="upload-demo"
action="https://worker-task.lihaink.cn/adminapi/upload/file"
:on-success="handleAvatarSuccess_four"
multiple
:limit="1"
>
<el-button type="primary">上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</template>
<el-col :span="24" v-if="mode == 'view'">
<el-form-item label="合同地址">
<el-link type="success" :href="formData.contract.url" target="_blank"
>在线查看</el-link
>
</el-form-item>
</el-col>
<el-col :span="24" class="pt-6">
<el-form-item label prop="field139">
<el-button v-if="isEdit" type="primary" size="medium" @click="create"
>修改</el-button
>
<el-button
v-else
type="primary"
:disabled="isDisabled"
size="medium"
@click="create"
>创建</el-button
>
</el-form-item>
</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 } 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'
const { removeTab } = useMultipleTabs()
const router = useRouter()
const route = useRoute()
const formData = reactive({
id: '',
sex: '',
id_card: '',
nickname: '',
province: '',
city: '',
area: '',
street: '',
address: '',
account: '',
is_contract: 0,
// 签约方
party_a_name: '',
party_a: '',
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_a = data.id
formData.party_a_name = data.company_name
disabledPartyA.value = true
}
function clearPartyA() {
formData.party_a = ''
formData.party_a_name = ''
}
const getcontract_type = async () => {
const data = await dictDataLists({ type_id: 7 })
datas['contract_type'] = data['lists']
}
getcontract_type()
const getDetails = async () => {
const data = await getUserDetail({
id: route.query.id
})
Object.keys(formData).forEach((key) => {
//@ts-ignore
formData[key] = data[key]
})
formData.contract_type = data.contract?.contract_type
formData.party_a_name = data.contract?.party_a_name
formData.party_a = data.contract?.party_a
formData.file = data.contract?.file
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
fileList.value[0].url = response.data.uri
fileList.value[0].name = '合同文件'
}
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 create = async () => {
await formRef.value?.validate()
const data = { ...formData }
// if (route.query.id) {
// await apiCompanyEdit(data)
// } else {
// await apiCompanyAdd(data)
// }
removeTab()
router.back()
}
getDetails()
getProvinceList()
</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>