cfc/cfc-web/src/views/admin/supply-manage/Form.vue

<template>
  <div class="supply-manage-form">
    <el-card>
      <div slot="header">
        <span>{{ isEdit ? '编辑供应商' : '新增供应商' }}</span>
        <el-button style="float: right" size="mini" @click="$router.back()">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入昵称" maxlength="50"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="form.realName" placeholder="请输入真实姓名" maxlength="50"></el-input>
        </el-form-item>

        <el-form-item label="服务商类型" prop="vendorType">
          <el-select v-model="form.vendorType" placeholder="请选择服务商类型" style="width: 100%">
            <el-option label="成长规划师" value="planner"></el-option>
            <el-option label="活动规划师" value="activity_provider"></el-option>
            <el-option label="商品供应商" value="product_supplier"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="服务商状态" prop="vendorStatus">
          <el-radio-group v-model="form.vendorStatus">
            <el-radio label="pending">待审核</el-radio>
            <el-radio label="approved">已通过</el-radio>
            <el-radio label="rejected">已拒绝</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="saving" @click="handleSubmit">{{ isEdit ? '保存修改' : '创建' }}</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog title="操作成功" :visible.sync="successDialogVisible" width="400px" :close-on-click-modal="false">
      <div style="text-align:center;padding:10px 0">
        <i class="el-icon-success" style="color:#67C23A;font-size:32px"></i>
        <p style="margin:12px 0 0;font-size:16px;color:#303133">{{ isEdit ? '保存成功' : '创建成功' }}</p>
      </div>
      <div slot="footer">
        <el-button v-if="!isEdit" type="primary" @click="handleContinue">继续添加</el-button>
        <el-button @click="handleClose">返回列表</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createSupplyManage, updateSupplyManage, getSupplyManageDetail } from '@/api/admin'

export default {
  name: 'SupplyManageForm',
  data() {
    return {
      form: {
        id: null,
        phone: '',
        nickname: '',
        realName: '',
        vendorType: 'product_supplier',
        vendorStatus: 'approved'
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ]
      },
      saving: false,
      successDialogVisible: false
    }
  },
  computed: {
    isEdit() {
      return !!this.$route.params.id
    }
  },
  created() {
    if (this.isEdit) {
      this.loadDetail(this.$route.params.id)
    }
  },
  methods: {
    async loadDetail(id) {
      try {
        const res = await getSupplyManageDetail({ id })
        if (res.data) {
          this.form = {
            id: res.data.id,
            phone: res.data.phone || '',
            nickname: res.data.nickname || '',
            realName: res.data.realName || '',
            vendorType: res.data.vendorType || 'product_supplier',
            vendorStatus: res.data.vendorStatus || 'approved'
          }
        }
      } catch (e) {
        this.$message.error('加载失败')
      }
    },
    async handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        this.saving = true
        try {
          if (this.isEdit) {
            await updateSupplyManage(this.form)
          } else {
            await createSupplyManage(this.form)
          }
          this.$message.success(this.isEdit ? '保存成功' : '创建成功')
          this.successDialogVisible = true
        } catch (e) {
          this.$message.error('操作失败')
        } finally {
          this.saving = false
        }
      })
    },
    handleContinue() {
      this.successDialogVisible = false
      this.form = { id: null, phone: '', nickname: '', realName: '', vendorType: 'product_supplier', vendorStatus: 'approved' }
    },
    handleClose() {
      this.successDialogVisible = false
      this.$router.push('/supply-manage')
    }
  }
}
</script>

<style scoped>
.supply-manage-form {
  padding: 20px;
  max-width: 600px;
}
</style>