305 lines
8.5 KiB
Vue
305 lines
8.5 KiB
Vue
<script lang="ts" setup>
|
||
import type { FormInstance } from 'element-plus'
|
||
import type { CompanyDetail } from '@/types/company'
|
||
import { ElMessage } from 'element-plus'
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import AreaSelect from '@/components/AreaSelect.vue'
|
||
import IndustrySelect from '@/components/IndustrySelect.vue'
|
||
import SvgIcon from '@/components/SvgIcon.vue'
|
||
import WangEditor from '@/components/wang-editor/index.vue'
|
||
import { getCompanyDetailApi, updateCompanyApi } from '@/request/api/company'
|
||
import { useUserStore } from '@/store/user'
|
||
import { uploadImage, uploadToAliyun } from '@/utils/file'
|
||
import { validateEmail, validatePhone } from '@/utils/validate'
|
||
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
|
||
const loading = reactive({
|
||
save: false,
|
||
})
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const formRules = {
|
||
name: [
|
||
{ required: true, message: '公司名称不能为空', trigger: 'blur' },
|
||
],
|
||
industries: [
|
||
{ required: true, message: '所属行业不能为空', trigger: 'blur' },
|
||
],
|
||
areas: [
|
||
{ required: true, message: '公司地址不能为空', trigger: 'blur' },
|
||
],
|
||
email: [{ validator: emailValidator, trigger: 'blur' }],
|
||
phone: [{ validator: phoneValidator, trigger: 'blur' }],
|
||
}
|
||
|
||
function emailValidator(rule: any, value: any, callback: any) {
|
||
// 未填写：直接通过
|
||
if (!value) {
|
||
callback()
|
||
return
|
||
}
|
||
|
||
if (!validateEmail(value)) {
|
||
callback(new Error('邮箱格式不正确'))
|
||
}
|
||
else {
|
||
callback()
|
||
}
|
||
}
|
||
function phoneValidator(rule: any, value: any, callback: any) {
|
||
// 未填写：直接通过
|
||
if (!value) {
|
||
callback()
|
||
return
|
||
}
|
||
|
||
if (!validatePhone(value)) {
|
||
callback(new Error('手机号格式不正确'))
|
||
}
|
||
else {
|
||
callback()
|
||
}
|
||
}
|
||
|
||
const companyDetail = ref<CompanyDetail>({
|
||
id: 0,
|
||
name: '',
|
||
areas: [],
|
||
industries: [],
|
||
logo: '',
|
||
profile: '',
|
||
phone: '',
|
||
email: '',
|
||
description: '',
|
||
establishmentDate: '',
|
||
users: [],
|
||
})
|
||
|
||
onMounted(() => {
|
||
getCompanyDetail()
|
||
})
|
||
|
||
function getCompanyDetail() {
|
||
getCompanyDetailApi(userStore.userInfo.company.id).then((res) => {
|
||
if (res.isSuccess) {
|
||
companyDetail.value = res.data
|
||
}
|
||
else {
|
||
ElMessage.error(res.message || '加载公司信息失败，请稍后再试')
|
||
router.push('/')
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
ElMessage.error('加载公司信息失败，请稍后再试')
|
||
})
|
||
}
|
||
|
||
function handleUploadLogo() {
|
||
uploadImage().then((data) => {
|
||
uploadToAliyun(data.blob, data.name, data.size).then((res) => {
|
||
companyDetail.value.logo = res.url
|
||
})
|
||
})
|
||
}
|
||
|
||
async function handleSubmit(formEl: FormInstance | undefined) {
|
||
if (!formEl)
|
||
return
|
||
await formEl.validate((valid) => {
|
||
if (valid) {
|
||
loading.save = true
|
||
updateCompanyApi({
|
||
id: companyDetail.value.id,
|
||
name: companyDetail.value.name,
|
||
areas: companyDetail.value.areas,
|
||
industries: companyDetail.value.industries,
|
||
establishmentDate: companyDetail.value.establishmentDate,
|
||
profile: companyDetail.value.profile,
|
||
phone: companyDetail.value.phone,
|
||
email: companyDetail.value.email,
|
||
description: companyDetail.value.description,
|
||
logo: companyDetail.value.logo,
|
||
}).then((res) => {
|
||
if (res.isSuccess) {
|
||
userStore.userInfo.company.name = companyDetail.value.name
|
||
userStore.userInfo.company.logo = companyDetail.value.logo
|
||
|
||
ElMessage.success('更新成功')
|
||
}
|
||
else {
|
||
ElMessage.error(res.message || '更新失败，请稍后再试')
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
ElMessage.error('更新失败，请稍后再试')
|
||
}).finally(() => {
|
||
loading.save = false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const activeCollapseNames = ref(['1', '2', '3'])
|
||
</script>
|
||
|
||
<template>
|
||
<div class="company-wrapper">
|
||
<div class="form-main">
|
||
<el-collapse v-model="activeCollapseNames" expand-icon-position="right">
|
||
<el-collapse-item title="基础信息" name="1">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="companyDetail"
|
||
:rules="formRules"
|
||
label-width="auto"
|
||
label-position="top"
|
||
>
|
||
<el-row :gutter="16">
|
||
<el-col :span="24">
|
||
<el-form-item>
|
||
<el-avatar :size="86" :src="companyDetail.logo || '/no-avatar.png'" shape="square" />
|
||
<div class="logo-upload">
|
||
<el-button type="primary" @click="handleUploadLogo()">
|
||
<SvgIcon icon="majesticons:cloud-upload-line" :size="18" style="margin-right: 4px;" />
|
||
上传LOGO
|
||
</el-button>
|
||
<span>支持 JPG、PNG 格式，文件大小不超过 2MB</span>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="公司名称" prop="name">
|
||
<el-input v-model="companyDetail.name" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="所属行业" prop="industries">
|
||
<IndustrySelect v-model="companyDetail.industries" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="成立时间" prop="establishmentDate">
|
||
<el-date-picker
|
||
v-model="companyDetail.establishmentDate"
|
||
type="date"
|
||
placeholder="请选择公司成立时间"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="公司地址" prop="areas">
|
||
<AreaSelect v-model="companyDetail.areas" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话" prop="phone">
|
||
<el-input v-model="companyDetail.phone" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系邮箱" prop="email">
|
||
<el-input v-model="companyDetail.email" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="公司简介" name="2">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="companyDetail"
|
||
:rules="formRules"
|
||
label-width="auto"
|
||
>
|
||
<el-form-item prop="profile">
|
||
<el-input v-model="companyDetail.profile" type="textarea" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="公司介绍" name="3">
|
||
<WangEditor v-model="companyDetail.description" show-direcotry />
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
|
||
<div class="form-footer">
|
||
<el-button
|
||
text
|
||
bg
|
||
@click="getCompanyDetail()"
|
||
>
|
||
<SvgIcon icon="ic:baseline-refresh" :size="18" style="margin-right: 4px;" />
|
||
重置
|
||
</el-button>
|
||
<el-button type="primary" :loading="loading.save" @click="handleSubmit(formRef)">
|
||
<SvgIcon icon="majesticons:save-line" :size="18" style="margin-right: 4px;" />
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.company-wrapper {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.form-main {
|
||
flex: 1;
|
||
padding-bottom: 140px;
|
||
}
|
||
|
||
:deep(.el-collapse) {
|
||
border: none;
|
||
}
|
||
:deep(.el-collapse-item__wrap) {
|
||
border-bottom: none;
|
||
}
|
||
|
||
:deep(.el-collapse-item__header) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid #ddd;
|
||
line-height: 0;
|
||
}
|
||
:deep(.el-collapse-item__content) {
|
||
padding: 24px 24px 0;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.logo-upload {
|
||
margin-left: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
.form-footer {
|
||
width: 100%;
|
||
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
|
||
position: sticky;
|
||
bottom: 0;
|
||
align-self: flex-end;
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
|
||
:deep(.el-button) {
|
||
width: 360px;
|
||
height: 40px;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|