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

<template>
  <div class="bg-#fff rounded-8px w-100% py-0 px-20px mt-24px pb-24px">
    <div class="title-row">
      <span class="title">企业信息</span>
    </div>
    <Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
      <Table.Column title="企业信息" dataIndex="info">
        <template #customRender="{ record }">
          {{ record.name }}
        </template>
      </Table.Column>
      <Table.Column title="操作" dataIndex="action" width="120">
        <template #customRender>
          <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
        </template>
      </Table.Column>
      <template #emptyText>
        <NoData />
      </template>
    </Table>
    <Modal
      v-model:open="infoVisible"
      width="480px"
      centered
      title="修改企业名称"
      :okText="okText"
      @ok="handleOk"
      cancelText="取消"
    >
      <p class="tips">
        企业名称只能修改2次，请谨慎操作。<span
          >（剩余{{ enterpriseInfo!.update_name_quota - enterpriseInfo!.used_update_name_count }}次）
        </span>
      </p>
      <Form
        :model="form"
        :rules="rules"
        class="form"
        :label-col-props="{ span: 6, offset: 0 }"
        :wrapper-col-props="{ span: 18, offset: 0 }"
        label-align="left"
      >
        <FormItem required name="name" label="新企业名称">
          <Input v-model:value.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
        </FormItem>
      </Form>
    </Modal>
    <CustomerServiceModal v-model:open="customerServiceVisible" centered />
  </div>
</template>
<script setup lang="ts">
import { Button, Form, FormItem, Input, Table } from 'ant-design-vue';
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 rules = {
  name: [
    {
      required: true,
      message: '请输入新企业名称',
      trigger: ['blur'],
    },
  ],
};

const enterpriseInfo = computed(() => {
  return store.enterpriseInfo ?? {};
});

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

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

const dataSource = computed(() => {
  return enterpriseInfo.value ? [enterpriseInfo.value] : [];
});

console.log({ dataSource });
const canUpdate = computed(() => {
  if (!enterpriseInfo.value) return false;
  return enterpriseInfo.value.update_name_quota > enterpriseInfo.value.used_update_name_count;
});

const okText = computed(() => {
  if (!canUpdate.value) {
    return '联系客服';
  }
  return '确定';
});

function handleUpdate() {
  if (!canUpdate.value) {
    form.name = enterpriseInfo.value?.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="scss">
.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: $font-family-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: $font-family-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: $font-family-medium;
    font-weight: 400;
    font-size: 14px;
    padding: 4px 12px;
    input::placeholder {
      font-family: $font-family-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: $font-family-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: $font-family-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: $font-family-medium;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
</style>