u

code/link56/link56-frontend-new/src/views/settings/info/company.vue

@@ -1,124 +1,236 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+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 form = reactive({
-  name: '',
-  region: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  desc: '',
+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-item">
-      <div class="form-header">
-        <span class="form-title">
-          基础信息
-        </span>
-      </div>
+    <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-form
-        :model="form"
-        label-width="auto"
-        label-position="top"
-      >
-        <el-row :gutter="16">
-          <el-col :span="24">
-            <el-form-item>
-              <el-avatar :size="86" shape="square" />
-              <div class="logo-upload">
-                <el-button type="primary" plain>
-                  上传LOGO
-                </el-button>
-                <span>支持 JPG、PNG 格式，文件大小不超过 2MB</span>
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="公司名称">
-              <el-input v-model="form.name" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="所属行业">
-              <el-select v-model="form.region" placeholder="please select your zone">
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="成立时间">
-              <el-date-picker
-                v-model="form.date1"
-                type="date"
-                placeholder="Pick a date"
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="员工规模">
-              <el-input v-model="form.desc" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="公司地址">
-              <el-input v-model="form.name" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="公司详细地址">
-              <el-input v-model="form.desc" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="联系电话">
-              <el-input v-model="form.name" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系邮箱">
-              <el-input v-model="form.desc" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-    <div class="form-item">
-      <div class="form-header">
-        <span class="form-title">
-          公司简介
-        </span>
-      </div>
-
-      <el-form :model="form" label-width="auto">
-        <el-form-item>
-          <el-input v-model="form.name" type="textarea" />
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="form-item">
-      <div class="form-header">
-        <span class="form-title">
-          公司介绍
-        </span>
-      </div>
-      <WangEditor />
-    </div>
+            <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 class="form-footer">
-      <el-button>重置</el-button>
-      <el-button type="primary">
+      <el-button @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>
@@ -129,33 +241,37 @@ const form = reactive({
 .company-wrapper {
   padding: 24px 32px;
 
-  .form-item {
-    margin-bottom: 16px;
-    .form-header {
-      margin-bottom: 16px;
-      .form-title {
-        font-size: 18px;
-        font-weight: 600;
-      }
-    }
-
-    .logo-upload {
-      margin-left: 16px;
-      display: flex;
-      flex-direction: column;
-      span {
-        font-size: 14px;
-        color: #666;
-      }
-    }
+  :deep(.el-collapse) {
+    border: none;
+  }
+  :deep(.el-collapse-item__wrap) {
+    border-bottom: none;
   }
 
+  :deep(.el-collapse-item__header){
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.el-collapse-item__content){
+    padding-bottom: 0px;
+  }
+
+  .logo-upload {
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 14px;
+      color: #666;
+    }
+  }
   .form-footer {
+    margin-top: 16px;
     width: 100%;
     display: flex;
     justify-content: flex-end;
 
-    :deep(.el-button){
+    :deep(.el-button) {
       width: 120px;
     }
   }