crm/web/src/views/school/edit.vue

<template>
  <ElForm ref="formRef" :model="formData" :rules="rules" label-width="auto">
    <el-row :gutter="20">
      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="名称" prop="name">
          <ElInput v-model="formData.name" maxlength="20" type="text" />
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="地区" prop="distinct">
          <el-cascader
              v-model="formData.distinct"
              :options="cityJson"
              filterable
              placeholder="可搜索"
              clearable
              style="width: 100%"
          />
        </ElFormItem>
      </el-col>

      <el-col :span="24">
        <ElFormItem label="详细地址" prop="address">
          <ElInput v-model="formData.address" maxlength="255" type="textarea" />
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="在校人数" prop="person_num">
          <ElInput v-model="formData.person_num" maxlength="32" type="text" />
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="负责人" prop="bind_user_id">
          <ElInput v-model="formData.bind_user_id" type="number" />
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否有饿了么校内站" prop="is_eleme_in_school">
          <el-select v-model="formData.is_eleme_in_school" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '无', value: 0 },
                { label: '有', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否有饿了么校外站" prop="is_eleme_out_school">
          <el-select v-model="formData.is_eleme_out_school" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '无', value: 0 },
                { label: '有', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否有美团校内站" prop="is_meituan_in_school">
          <el-select v-model="formData.is_meituan_in_school" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '无', value: 0 },
                { label: '有', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否有美团校外站" prop="is_meituan_out_school">
          <el-select v-model="formData.is_meituan_out_school" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '无', value: 0 },
                { label: '有', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否能上楼" prop="can_go_upstairs">
          <el-select v-model="formData.can_go_upstairs" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '能', value: 0 },
                { label: '不能', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否合作" prop="is_cooperate">
          <el-select v-model="formData.is_cooperate" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '无', value: 0 },
                { label: '有', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <ElFormItem label="是否允许骑电动车" prop="can_ride">
          <el-select v-model="formData.can_ride" placeholder="请选择">
            <el-option
              v-for="item in [
                { label: '能', value: 0 },
                { label: '不能', value: 1 }
              ]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </ElFormItem>
      </el-col>

      <el-col :span="24">
        <ElFormItem label="宿舍分布情况" prop="dormitory_distribution">
          <ElInput v-model="formData.dormitory_distribution" maxlength="1000" type="textarea" />
        </ElFormItem>
      </el-col>

      <el-col :span="24">
        <ElFormItem label="校门口取餐点离宿舍情况" prop="qucan_station_distribution">
          <ElInput v-model="formData.qucan_station_distribution" maxlength="1000" type="textarea" />
        </ElFormItem>
      </el-col>

      <el-col :span="24">
        <ElFormItem label="校外商圈情况" prop="out_business_description">
          <ElInput v-model="formData.out_business_description" maxlength="1000" type="textarea" />
        </ElFormItem>
      </el-col>

      <el-col :span="24">
        <ElFormItem label="备注" prop="memo">
          <ElInput v-model="formData.memo" maxlength="255" type="textarea" />
        </ElFormItem>
      </el-col>

      <el-col :span="24">
        <ElFormItem label=" " prop="">
          <ElButton type="primary" @click="handleSubmit">提交</ElButton>
        </ElFormItem>
      </el-col>

    </el-row>
  </ElForm>
</template>

<script setup lang="ts">
  import type { FormInstance, FormRules } from 'element-plus'
  import { schoolApi as Api } from '@/api/schoolApi'
  import { onMounted } from 'vue'
  import { router } from '@/router'
  import { cityJson } from '@/router/utils/city'
  import { ElMessageBox } from 'element-plus'
  import { RoutesAlias } from '@/router/routesAlias'

  // 表单实例
  const formRef = ref<FormInstance>()

  const DefaultData = <Form.School>{
    name: '',
    distinct:[],
    address: '',
    person_num: '',
    bind_user_id: 0,
    is_eleme_in_school: 0,
    is_eleme_out_school: 0,
    is_meituan_in_school: 0,
    is_meituan_out_school: 0,
    can_go_upstairs: 0,
    is_cooperate: 0,
    can_ride: 0,
    dormitory_distribution: '',
    qucan_station_distribution: '',
    out_business_description: '',
    memo: ''
  }
  // 表单数据
  const formData = reactive<Form.School>({...DefaultData})

  // 表单验证规则
  const rules: FormRules = {
    name: [
      { required: true, message: '请输入名称', trigger: 'blur' },
      { max: 20, message: '长度最多20个字符', trigger: 'blur' }
    ],
    distinct: [
      { required: true, message: '请选择地区', trigger: 'blur' },
    ],
    address: [
      { required: true, message: '请输入详细地址', trigger: 'blur' },
      { max: 255, message: '长度最多255个字符', trigger: 'blur' }
    ],
    person_num: [
      { required: true, message: '请输入在校人数', trigger: 'blur' },
      { max: 32, message: '长度最多32个字符', trigger: 'blur' }
    ],
    bind_user_id: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
    dormitory_distribution: [{ max: 1000, message: '长度最多1000个字符', trigger: 'blur' }],
    qucan_station_distribution: [{ max: 1000, message: '长度最多1000个字符', trigger: 'blur' }],
    out_business_description: [{ max: 1000, message: '长度最多1000个字符', trigger: 'blur' }],
    memo: [{ max: 255, message: '长度最多255个字符', trigger: 'blur' }]
  }

  const route = useRoute()
  let id = 0

  // 初始化表单数据
  const initFormData = () => {
    if (id == 0) {
      Object.assign(formData, DefaultData)
    } else {
      Api.info(id).then((res) => {
        Object.assign(formData, res)
      })
    }
  }

  onMounted(() => {
    id = route.query.id ? parseInt(route.query.id as string) : 0
    initFormData()
    nextTick(() => {
      formRef.value?.clearValidate()
    })
  })

  const afterOk = () => {
    ElMessageBox.confirm('操作成功，是否返回列表', 'Success', {
      confirmButtonText: '返回列表',
      cancelButtonText: '留在此页',
      type: 'info'
    })
      .then(() => {
        router.push({ path: RoutesAlias.SchoolList })
      })
      .catch(() => {
        // ... do nothing
      })
  }

  // 提交表单
  const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid) => {
      if (valid) {
        if (id == 0) {
          Api.add(formData).then(() => {
            afterOk()
          })
        } else {
          Api.edit(formData).then(() => {
            afterOk()
          })
        }
      }
    })
  }
</script>