feat(enterprise): 添加修改企业名称功能

- 在 API 中新增 updateEnterpriseName 方法，用于更新企业名称
- 在路由中添加企业信息管理相关路径
- 实现企业信息页面，包括展示企业和修改企业名称的功能
- 新增 Modal组件用于弹窗展示

src/api/all/index.ts

@@ -111,3 +111,8 @@ export const fetchSuccessCaseList = () => {
 export const trialProduct = (id: number) => {
   return Http.post(`/v1/products/${id}/try`, {}, { headers: { 'enterprise-id': 1 } });
 };
+
+// 修改企业名称
+export const updateEnterpriseName = (data: any) => {
+  return Http.patch(`/v1/enterprises/name`, data, { headers: { 'enterprise-id': 1 } });
+};

src/api/index.ts

@@ -77,6 +77,10 @@ export class Request {
   public delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
     return this.instance.delete(url, config);
   }
+
+  public patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return this.instance.patch(url, data, config);
+  }
 }
 
 //* 默认导出Request实例

src/components/modal.vue

@@ -0,0 +1,38 @@
+<template>
+  <a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs" >
+    <slot></slot>
+  </a-modal>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less">
+.modal {
+  .arco-modal-header {
+    border-bottom: none;
+  }
+  .arco-modal-footer {
+    border-top: none;
+    :first-child {
+      border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
+      border-radius: 4px;
+      padding: 7px 20px;
+      font-family: Alibaba PuHuiTi, serif;
+      font-weight: 400;
+      font-size: 14px;
+    }
+    :last-child {
+      border-radius: 4px;
+      padding: 7px 20px;
+      font-family: Alibaba PuHuiTi, serif;
+      font-weight: 400;
+      font-size: 14px;
+      margin-left: 16px;
+    }
+  }
+}
+.body {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+</style>

src/router/index.ts

@@ -50,6 +50,21 @@ const router = createRouter({
       name: 'auth',
       component: () => import('@/views/components/permission/auth.vue'),
     },
+    {
+      path: '/management/person',
+      name: 'person',
+      component: () => import('@/views/components/management/person'),
+    },
+    {
+      path: '/management/enterprise',
+      name: 'enterprise',
+      component: () => import('@/views/components/management/enterprise'),
+    },
+    {
+      path: '/management/account',
+      name: 'account',
+      component: () => import('@/views/components/management/account'),
+    },
   ],
   scrollBehavior() {
     return { top: 0 };

src/views/components/management/enterprise/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <Container title="企业信息" class="container mt-24px">
+    <a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
+      <template #info="{ record }">
+        {{ record.name }}
+      </template>
+      <template #action>
+        <a-button class="edit-button" size="mini" type="outline" @click="handleUpdate" >修改</a-button>
+      </template>
+    </a-table>
+    <Modal v-model:visible="infoVisible" width="480px" title="修改企业名称" :okText="okText" @ok="handleOk">
+      <p class="tips">
+        企业名称只能修改2次，请谨慎操作。<span
+          >（剩余{{ enterpriseInfo.update_name_quota - enterpriseInfo.used_update_name_count }}次）
+        </span>
+      </p>
+      <a-form :model="form" class="form" :label-col-props="{span: 6, offset: 0}" :wrapper-col-props="{span: 18, offset: 0}" label-align="left">
+        <a-form-item required field="name" label="新企业名称">
+          <a-input size="small" :disabled="!canUpdate" v-model.trim="form.name" placeholder="请输入新企业名称" />
+        </a-form-item>
+      </a-form>
+    </Modal>
+    <CustomerServiceModal v-model:visible="customerServiceVisible" />
+  </Container>
+</template>
+<script setup lang="ts">
+import Container from '@/components/container.vue';
+import Modal from '@/components/modal.vue';
+import { ref, reactive, computed } from 'vue';
+import CustomerServiceModal from '@/components/customer-service-modal.vue';
+import { updateEnterpriseName } from '@/api/all';
+
+const form = reactive({
+  name: '',
+});
+
+const enterpriseInfo = reactive({
+  name: '123321',
+  update_name_quota: 2,
+  used_update_name_count: 2,
+});
+
+const columns = [
+  {
+    title: '企业名称',
+    slotName: 'info',
+  },
+  {
+    title: '操作',
+    slotName: 'action',
+  },
+];
+const data = ref([enterpriseInfo]);
+
+const infoVisible = ref(false);
+const customerServiceVisible = ref(false);
+
+const canUpdate = computed(() => {
+  return enterpriseInfo.update_name_quota > enterpriseInfo.used_update_name_count;
+});
+
+const okText = computed(() => {
+  if (!canUpdate.value) {
+    return '联系客服';
+  }
+  return '确定';
+});
+
+function handleUpdate() {
+  if (!canUpdate.value) {
+    form.name = enterpriseInfo.name;
+  }
+  infoVisible.value = true;
+}
+
+async function handleOk() {
+  if (!canUpdate.value) {
+    customerServiceVisible.value = true;
+  }
+  await updateEnterpriseName({ name: form.name });
+  AMessage.success('修改成功！');
+}
+</script>
+
+<style scoped lang="less">
+.tips {
+  height: 40px;
+  border-radius: 4px;
+  padding: 10px 16px;
+  background: var(--BG-100, rgba(247, 248, 250, 1));
+  border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
+  font-family: Alibaba PuHuiTi, serif;
+  font-weight: 400;
+  font-size: 12px;
+  span {
+    color: var(--Functional-Danger-6, rgba(246, 75, 49, 1));
+  }
+}
+.form {
+  :deep(.arco-form-item-label) {
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    font-size: 14px;
+    margin: 0px;
+  }
+  :deep(.arco-input-wrapper) {
+    background: white;
+    border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    font-size: 14px;
+    input::placeholder {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      font-size: 14px;
+      color: var(--Text-4, rgba(147, 148, 153, 1));
+    }
+  }
+  :deep(.arco-input-disabled) {
+    background: var(--BG-200, rgba(242, 243, 245, 1));
+    border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
+    .arco-input:disabled {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      font-size: 14px;
+    }
+  }
+}
+.edit-button {
+  margin: 12px 0;
+  border: 1px solid rgba(109, 76, 254, 1);
+  border-radius: 4px;
+  padding: 2px 12px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(109, 76, 254, 1);
+}
+</style>