lingji-work-fe/src/views/components/management/enterprise/index.vue

<template>
  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
    <div class="title-row">
      <span class="title">企业信息</span>
    </div>
    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
      <template #empty>
        <NoData />
      </template>
      <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 v-model.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
        </a-form-item>
      </a-form>
    </Modal>
    <CustomerServiceModal v-model:visible="customerServiceVisible" />
  </div>
</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';
import { useEnterpriseStore } from '@/stores/modules/enterprise';

const store = useEnterpriseStore();
const form = reactive({
  name: '',
});

const enterpriseInfo = store.enterpriseInfo;

const columns = [
  {
    title: '企业名称',
    slotName: 'info',
  },
  {
    title: '操作',
    slotName: 'action',
  },
];

const infoVisible = ref(false);
const customerServiceVisible = ref(false);

const dataSource = computed(() => {
  return enterpriseInfo ? [enterpriseInfo] : [];
});
const canUpdate = computed(() => {
  if (!enterpriseInfo) return false;
  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;
    return;
  }
  await updateEnterpriseName({ name: form.name });
  store.setEnterpriseName(form.name);
  store.incUsedUpdateNameCount();
  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: 'PuHuiTi-Medium';
  font-weight: 400;
  font-size: 12px;
  span {
    color: var(--Functional-Danger-6, rgba(246, 75, 49, 1));
  }
}
.form {
  margin-top: 20px;
  :deep(.arco-row) {
    align-items: center;
  }
  :deep(.arco-form-item-label) {
    font-family: 'PuHuiTi-Medium';
    font-weight: 400;
    font-size: 14px;
    margin: 0;
  }
  :deep(.arco-input-wrapper) {
    background: white;
    border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
    font-family: 'PuHuiTi-Medium';
    font-weight: 400;
    font-size: 14px;
    padding: 4px 12px;
    input::placeholder {
      font-family: 'PuHuiTi-Medium';
      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: 'PuHuiTi-Medium';
      font-weight: 400;
      font-size: 14px;
    }
  }
  :deep(.arco-input-focus) {
    border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
    box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.2);
  }
}
.edit-button {
  margin: 12px 0;
  border: 1px solid rgba(109, 76, 254, 1);
  border-radius: 4px;
  padding: 2px 12px;
  font-family: 'PuHuiTi-Medium';
  font-weight: 400;
  font-size: 12px;
  color: rgba(109, 76, 254, 1);
}
.title-row {
  display: flex;
  height: 64px;
  padding: 10px 0 2px 0;
  align-items: center;
  .title {
    color: var(--Text-1, #211f24);
    font-family: 'PuHuiTi-Medium';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
</style>