huasheng-erp-order-system-admin/src/views/system/phone/index.vue

<template>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <span class="font-bold text-base">联系电话管理</span>
      </template>

      <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" class="mt-4">
        <el-form-item label="华晟型材专家电话" prop="expertPhone">
          <el-input v-model="form.expertPhone" placeholder="请输入专家电话" style="width: 300px" maxlength="20" />
        </el-form-item>
        <el-form-item label="客服电话" prop="servicePhone">
          <el-input v-model="form.servicePhone" placeholder="请输入客服电话" style="width: 300px" maxlength="20" />
        </el-form-item>
        <el-form-item label="业务员电话" prop="salesPhone">
          <el-input v-model="form.salesPhone" placeholder="请输入业务员电话" style="width: 300px" maxlength="20" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Check" :loading="saving" @click="handleSave">
            保存
          </el-button>
          <el-button icon="Refresh" @click="loadPhone">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getPhone, updatePhone, PhoneForm } from '@/api/system/phone';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const saving = ref(false);
const formRef = ref();

const form = reactive<PhoneForm>({
  id: 1,
  expertPhone: '',
  servicePhone: '',
  salesPhone: ''
});

const rules = {
  expertPhone: [{ required: true, message: '专家电话不能为空', trigger: 'blur' }],
  servicePhone: [{ required: true, message: '客服电话不能为空', trigger: 'blur' }],
  salesPhone: [{ required: true, message: '业务员电话不能为空', trigger: 'blur' }]
};

/** 加载联系电话 */
const loadPhone = async () => {
  const res = await getPhone(1);
  form.id = res.data.id;
  form.expertPhone = res.data.expertPhone;
  form.servicePhone = res.data.servicePhone;
  form.salesPhone = res.data.salesPhone;
};

/** 保存 */
const handleSave = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (!valid) return;
    saving.value = true;
    try {
      await updatePhone({ ...form });
      proxy?.$modal.msgSuccess('保存成功');
    } finally {
      saving.value = false;
    }
  });
};

onMounted(() => {
  loadPhone();
});
</script>