dkp
9de7565b2d
- 在 API 中新增 updateEnterpriseName 方法，用于更新企业名称 - 在路由中添加企业信息管理相关路径 - 实现企业信息页面，包括展示企业和修改企业名称的功能 - 新增 Modal组件用于弹窗展示
140 lines
3.7 KiB
Vue
140 lines
3.7 KiB
Vue
<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>
|