更新头像

This commit is contained in:
weipengfei 2023-08-10 16:43:35 +08:00
parent d7aef75555
commit db8e895af2

View File

@ -1,6 +1,11 @@
<template>
<div class="edit-popup">
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
<el-form
ref="formRef"
:model="formData"
label-width="90px"
:rules="formRules"
>
<!-- <div style="font-size: 1.2rem; margin: 10px 0">公司基本信息创建</div> -->
<el-col :span="24" class="el-card pt-6">
<div class="tit">公司基本信息创建</div>
@ -276,7 +281,10 @@
<div class="tit">其他联系人</div>
<el-row>
<template v-for="(item, index) in formData.other_contacts" :key="index">
<template
v-for="(item, index) in formData.other_contacts"
:key="index"
>
<el-col :span="12">
<el-form-item label="姓名" prop="field120">
<el-input
@ -442,7 +450,11 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="100px" label="被签约公司" prop="field131">
<el-form-item
label-width="100px"
label="被签约公司"
prop="field131"
>
<el-input
:disabled="true"
v-model="formData.company_name"
@ -453,7 +465,11 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="100px" label="合同类型" prop="contract_type">
<el-form-item
label-width="100px"
label="合同类型"
prop="contract_type"
>
<el-select
:disabled="isDisabled"
v-model="formData.contract.contract_type"
@ -534,108 +550,118 @@
</template>
<script lang="ts" setup name="companyEdit">
import type { FormInstance, UploadProps, ElMessage, UploadUserFile } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiCompanyAdd, apiCompanyEdit, apiCompanyDetail, apiCompanyLists } from '@/api/company'
import type {
FormInstance,
UploadProps,
ElMessage,
UploadUserFile,
} from "element-plus";
import Popup from "@/components/popup/index.vue";
import {
apiCompanyAdd,
apiCompanyEdit,
apiCompanyDetail,
apiCompanyLists,
} from "@/api/company";
import {
apiCityList,
apiAreaList,
apiStreetList,
apiProvinceList,
apiVillageList,
apiBrigadeList
} from '@/api/common'
import { dictDataLists } from '@/api/setting/dict'
import { timeFormat } from '@/utils/util'
import DialogIndex from './dialog_index.vue'
import DialogIndexMan from './dialog_index_man.vue'
import type { PropType } from 'vue'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
const { removeTab } = useMultipleTabs()
const router = useRouter()
const route = useRoute()
let isshow = ref(true)
let imgflag = ref(true)
let isDisabled = ref(false)
apiBrigadeList,
} from "@/api/common";
import { dictDataLists } from "@/api/setting/dict";
import { timeFormat } from "@/utils/util";
import DialogIndex from "./dialog_index.vue";
import DialogIndexMan from "./dialog_index_man.vue";
import type { PropType } from "vue";
import useMultipleTabs from "@/hooks/useMultipleTabs";
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();
const { removeTab } = useMultipleTabs();
const router = useRouter();
const route = useRoute();
let isshow = ref(true);
let imgflag = ref(true);
let isDisabled = ref(false);
if (route.query.flag) {
isshow = false
isshow = false;
}
if (route.query.isshow) {
imgflag = false
isDisabled = true
imgflag = false;
isDisabled = true;
}
console.log(isDisabled)
console.log(isDisabled);
//
const indexType = ref(0)
const indexType = ref(0);
let isEdit = ref(false)
let isEdit = ref(false);
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({})
}
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref()
default: () => ({}),
},
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref();
if (route.query.read) {
isDisabled = route.query.read
isDisabled = route.query.read;
}
if (route.query.edit) {
isEdit = route.query.edit
isEdit = route.query.edit;
}
//
const formData = reactive({
admin_id: '',
admin_name: '',
area_manager: '',
area_manager_name: '',
id: '',
admin_id: "",
admin_name: "",
area_manager: "",
area_manager_name: "",
id: "",
// level_two: '',
// level_one: '',
company_name: '',
organization_code: '',
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
address: '',
company_type: '',
avatar: '',
sex: '1',
id_card: '',
master_name: '',
master_position: '',
master_phone: '',
master_email: '',
company_name: "",
organization_code: "",
province: "",
city: "",
area: "",
street: "",
village: "",
brigade: "",
address: "",
company_type: "",
avatar: "",
sex: "1",
id_card: "",
master_name: "",
master_position: "",
master_phone: "",
master_email: "",
other_contacts: [],
qualification: {
business_license: '',
business_licenseB: '',
business_license: "",
business_licenseB: "",
bank_account: [],
bank_accountB: []
bank_accountB: [],
},
contract: {
contract_type: '',
contract_type: "",
party_a: 0,
file: '',
contract_no: '系统自动生成',
type: 1
file: "",
contract_no: "系统自动生成",
type: 1,
},
//
party_a_name: '',
file_image: ''
party_a_name: "",
file_image: "",
// status: ''
})
});
if (userStore.userInfo.root == 0) {
formData.contract.party_a = userStore.userInfo.company?.id
formData.party_a_name = userStore.userInfo.company?.company_name
formData.contract.party_a = userStore.userInfo.company?.id;
formData.party_a_name = userStore.userInfo.company?.company_name;
}
const datas = reactive({
provinceOptions: [],
@ -646,336 +672,363 @@ const datas = reactive({
brigadeOptions: [],
dictTypeLists: [],
contract_type: [],
company_list: []
})
const fileList = ref<UploadUserFile[]>([])
company_list: [],
});
const fileList = ref<UploadUserFile[]>([]);
//
const formRules = reactive<any>({
company_name: [
{
required: true,
message: '请输入公司名称',
trigger: ['blur']
}
message: "请输入公司名称",
trigger: ["blur"],
},
],
organization_code: [
{
required: true,
message: '请输入组织机构代码',
trigger: ['blur']
}
message: "请输入组织机构代码",
trigger: ["blur"],
},
],
master_name: [
{
required: true,
message: '请输入主联系人姓名',
trigger: ['blur']
}
message: "请输入主联系人姓名",
trigger: ["blur"],
},
],
master_position: [
{
required: true,
message: '请输入主联系人职务',
trigger: ['blur']
}
message: "请输入主联系人职务",
trigger: ["blur"],
},
],
master_phone: [
{
required: true,
message: '请输入主联系人手机',
trigger: ['blur']
}
message: "请输入主联系人手机",
trigger: ["blur"],
},
],
account: [
{
required: true,
message: '请输入账号',
trigger: ['blur']
}
message: "请输入账号",
trigger: ["blur"],
},
],
password: [
{
required: true,
message: '请输入密码',
trigger: ['blur']
}
]
})
const isCompany = ref(false)
const isMan = ref(false)
const isAreaManager = ref(false)
const isArea = ref(false)
const isStreet = ref(false)
const isVillage = ref(false)
const isBrigade = ref(false)
const partyDisabled = ref(true)
message: "请输入密码",
trigger: ["blur"],
},
],
});
const isCompany = ref(false);
const isMan = ref(false);
const isAreaManager = ref(false);
const isArea = ref(false);
const isStreet = ref(false);
const isVillage = ref(false);
const isBrigade = ref(false);
const partyDisabled = ref(true);
function customEvent(data: any) {
isCompany.value = false
formData.contract.party_a = data.id
formData.party_a_name = data.company_name
isCompany.value = false;
formData.contract.party_a = data.id;
formData.party_a_name = data.company_name;
}
function customEventMan(data: any) {
isMan.value = false
formData.admin_name = data.name
formData.admin_id = data.id
isMan.value = false;
formData.admin_name = data.name;
formData.admin_id = data.id;
}
//
function EventAreaManager(data: any) {
isAreaManager.value = false
formData.area_manager_name = data.name
formData.area_manager = data.id
isAreaManager.value = false;
formData.area_manager_name = data.name;
formData.area_manager = data.id;
}
function openCompany() {
isCompany.value = true
isCompany.value = true;
}
//
const setFormData = async (data: Record<any, any>) => {
console.log(formData)
console.log(formData);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
formData[key] = data[key];
}
}
}
};
const getDetail = async (row: Record<string, any>) => {
const data = await apiCompanyDetail({
id: row.id
})
setFormData(data)
}
id: row.id,
});
setFormData(data);
};
//1
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
const handleAvatarSuccess: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg)
return
ElMessage.error(response.msg);
return;
}
formData.qualification.business_license = response.data.uri
}
const handleAvatarSuccessB: UploadProps['onSuccess'] = (response, uploadFile) => {
formData.qualification.business_license = response.data.uri;
};
const handleAvatarSuccessB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg)
return
ElMessage.error(response.msg);
return;
}
formData.qualification.business_licenseB = response.data.uri
}
formData.qualification.business_licenseB = response.data.uri;
};
//2
const handleAvatarSuccess_two: UploadProps['onSuccess'] = (response, uploadFile) => {
const handleAvatarSuccess_two: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg)
return
ElMessage.error(response.msg);
return;
}
formData.qualification.bank_account.push(response.data.uri)
}
const handleAvatarSuccess_twoB: UploadProps['onSuccess'] = (response, uploadFile) => {
formData.qualification.bank_account.push(response.data.uri);
};
const handleAvatarSuccess_twoB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg)
return
ElMessage.error(response.msg);
return;
}
formData.qualification.bank_accountB = response.data.uri
}
formData.qualification.bank_accountB = response.data.uri;
};
//3
const handleAvatarSuccess_three: UploadProps['onSuccess'] = (response, uploadFile) => {
const handleAvatarSuccess_three: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg)
return
ElMessage.error(response.msg);
return;
}
formData.file_image = response.data.uri
formData.contract.file = response.data.uri
fileList.value[0].url = response.data.uri
fileList.value[0].name = '合同文件'
}
formData.file_image = response.data.uri;
formData.contract.file = response.data.uri;
fileList.value[0].url = response.data.uri;
fileList.value[0].name = "合同文件";
};
//
function other() {
formData.other_contacts.push({
name: '',
position: '',
phone: '',
email: ''
})
name: "",
position: "",
phone: "",
email: "",
});
}
function company_type_change(type: any) {
//
const arr = [30, 14, 15]
const arr = [30, 14, 15];
if (arr.indexOf(type) > -1) {
isArea.value = true
isStreet.value = false
isVillage.value = false
isBrigade.value = false
formData.street = ''
formData.village = ''
formData.brigade = ''
return true
isArea.value = true;
isStreet.value = false;
isVillage.value = false;
isBrigade.value = false;
formData.street = "";
formData.village = "";
formData.brigade = "";
return true;
}
//
if (type == 16) {
isArea.value = true
isStreet.value = true
isVillage.value = false
isBrigade.value = false
formData.village = ''
formData.brigade = ''
partyDisabled.value = true
indexType.value = 30
return true
isArea.value = true;
isStreet.value = true;
isVillage.value = false;
isBrigade.value = false;
formData.village = "";
formData.brigade = "";
partyDisabled.value = true;
indexType.value = 30;
return true;
}
if (type != 16) {
partyDisabled.value = false
partyDisabled.value = false;
}
//
if (type == 17) {
isArea.value = true
isStreet.value = true
isVillage.value = true
isBrigade.value = false
formData.brigade = ''
return true
isArea.value = true;
isStreet.value = true;
isVillage.value = true;
isBrigade.value = false;
formData.brigade = "";
return true;
}
//
if (type == 18) {
isArea.value = true
isStreet.value = true
isVillage.value = true
isBrigade.value = true
return true
isArea.value = true;
isStreet.value = true;
isVillage.value = true;
isBrigade.value = true;
return true;
}
}
//
function province_change(value: string) {
getCityList()
getCityList();
}
function city_change(value: string) {
getAreaList()
getAreaList();
}
function area_change(value: string) {
getStreetList()
getStreetList();
}
function street_change(value: string) {
getVillageList()
getVillageList();
}
function village_change(value: string) {
getBrigadeList()
getBrigadeList();
}
// function brigade_change(value: string) {
// formData.brigade = value
// }
const getProvinceList = async () => {
const data = await apiProvinceList({})
datas['provinceOptions'] = data
}
const data = await apiProvinceList({});
datas["provinceOptions"] = data;
};
const getCityList = async () => {
const data = await apiCityList({ city: formData.province })
datas['cityOptions'] = data
}
const data = await apiCityList({ city: formData.province });
datas["cityOptions"] = data;
};
const getAreaList = async () => {
const data = await apiAreaList({ area: formData.city })
datas['areaOptions'] = data
}
const data = await apiAreaList({ area: formData.city });
datas["areaOptions"] = data;
};
const getStreetList = async () => {
const data = await apiStreetList({ street: formData.area })
datas['streetOptions'] = data
}
const data = await apiStreetList({ street: formData.area });
datas["streetOptions"] = data;
};
const getVillageList = async () => {
const data = await apiVillageList({ village: formData.street })
datas['villageOptions'] = data
}
const data = await apiVillageList({ village: formData.street });
datas["villageOptions"] = data;
};
const getBrigadeList = async () => {
const data = await apiBrigadeList()
datas['brigadeOptions'] = data
}
getProvinceList()
const data = await apiBrigadeList();
datas["brigadeOptions"] = data;
};
getProvinceList();
const getcontract_type = async () => {
const data = await dictDataLists({ type_id: 7 })
datas['contract_type'] = data['lists']
}
const data = await dictDataLists({ type_id: 7 });
datas["contract_type"] = data["lists"];
};
const getdictTypeLists = async () => {
const data = await dictDataLists({ type_id: 6 })
datas['dictTypeLists'] = data['lists']
}
const data = await dictDataLists({ type_id: 6 });
datas["dictTypeLists"] = data["lists"];
};
const getDetails = async () => {
const data = await apiCompanyDetail({
id: route.query.id
})
id: route.query.id,
});
if (data.company_type == 16) {
indexType.value = 30
partyDisabled.value = true
indexType.value = 30;
partyDisabled.value = true;
}
Object.keys(formData).forEach((key) => {
const stringArr = ['province', 'city', 'area', 'street', 'village', 'brigade']
const stringArr = [
"province",
"city",
"area",
"street",
"village",
"brigade",
];
if (data[key] != null && data[key] != undefined) {
formData[key] = data[key]
if (key == 'qualification' && formData.qualification.bank_account) {
formData[key] = data[key];
if (key == "qualification" && formData.qualification.bank_account) {
try {
if (Array.isArray(JSON.parse(formData.qualification.bank_account))) {
formData.qualification.bank_account = JSON.parse(
formData.qualification.bank_account
)
);
} else {
const str = formData.qualification.bank_account
formData.qualification.bank_account = []
formData.qualification.bank_account.push(str)
const str = formData.qualification.bank_account;
formData.qualification.bank_account = [];
formData.qualification.bank_account.push(str);
}
} catch (error) {
const str = formData.qualification.bank_account
formData.qualification.bank_account = []
formData.qualification.bank_account.push(str)
const str = formData.qualification.bank_account;
formData.qualification.bank_account = [];
formData.qualification.bank_account.push(str);
}
}
}
if (stringArr.includes(key)) formData[key] = formData[key].toString()
})
await getCityList()
await getAreaList()
await getStreetList()
await getVillageList()
await getBrigadeList()
formData['party_a_name'] = data.contract?.party_a_info.company_name
if (stringArr.includes(key)) formData[key] = formData[key].toString();
});
await getCityList();
await getAreaList();
await getStreetList();
await getVillageList();
await getBrigadeList();
formData["party_a_name"] = data.contract?.party_a_info.company_name;
// formData['file_image'] = data.contract?.file
// if (data.contract?.file) {
// fileList.value[0].url = data.contract?.file
// fileList.value[0].name = ''
// }
console.log(formData)
company_type_change(formData.company_type)
}
console.log(formData);
company_type_change(formData.company_type);
};
getdictTypeLists()
getcontract_type()
getdictTypeLists();
getcontract_type();
const handleAvatarSuccessAvatar: UploadProps['onSuccess'] = (response, uploadFile) => {
const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg)
return
ElMessage.error(response.msg);
return;
}
formData.avatar = response.data.uri
}
formData.avatar = response.data.uri;
};
const create = async () => {
await formRef.value?.validate()
const data = JSON.parse(JSON.stringify({ ...formData }))
data.qualification.bank_account = JSON.stringify(data.qualification.bank_account)
await formRef.value?.validate();
const data = JSON.parse(JSON.stringify({ ...formData }));
data.qualification.bank_account = JSON.stringify(
data.qualification.bank_account
);
if (route.query.id) {
await apiCompanyEdit(data)
await apiCompanyEdit(data);
} else {
await apiCompanyAdd(data)
await apiCompanyAdd(data);
}
removeTab()
router.back()
}
route.query.id && getDetails()
removeTab();
router.back();
};
route.query.id && getDetails();
defineExpose({
open,
setFormData,
getDetail
})
getDetail,
});
</script>
<style lang="scss">
.tit {
@ -997,15 +1050,15 @@ defineExpose({
.headimg {
margin-left: 18px;
width: 6.2vw;
height: 7.2vw;
width: 120px;
height: 140px;
float: left;
overflow: hidden;
}
.avatar-uploader-head .el-upload {
width: 6.2vw;
height: 7.2vw;
width: 120px;
height: 140px;
background-color: #fff;
border: 1px dashed var(--el-border-color);
border-radius: 6px;