lingji-work-fe/src/views/components/management/enterprise/index.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>