pj_admin_cloud/src/views/mch/mch-pick-up/form.vue

<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="24" class="mb20">
          <el-form-item label="门店名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入门店名称" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="门店logo" prop="logo">
            <upload-img v-model:imageUrl="form.logo" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="门店联系手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入门店联系手机号" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="营业时间" prop="businessHoursJson">
            <BusinessHours v-model="form.businessHoursJson" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="合作商户" prop="mchIds">
            <select-mch multiple v-model="form.mchIds" placeholder="请选择合作商户" />
          </el-form-item>
        </el-col>

        <el-col :span="24" v-if="false" class="mb20">
          <el-form-item label="门店位置" prop="location">
            <MapSelect />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item prop="sort">
            <template #label>
              <span>排序：</span>
              <tip content="越大越在前" />
            </template>
            <el-input-number v-model="form.sort" placeholder="" />
          </el-form-item>
        </el-col>


        <el-col :span="24" class="mb20">
          <el-form-item label="门店简介" prop="introduction">
            <el-input v-model="form.introduction" placeholder="请输入门店简介" type="textarea" :autosize="{ minRows: 2 }" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="门店详细地址" prop="detailAddress">
            <el-input v-model="form.detailAddress" placeholder="请输入门店详细地址" type="textarea" :autosize="{ minRows: 2 }" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="MchPickUpDialog">
import { useMessage } from "/@/hooks/message";
import * as mchPickUpApi from '/@/api/wallet/mch-pick-up'
import BusinessHours from '/@/components/BusinessHours/index.vue'

// 定义营业时间接口
interface BusinessHour {
  id: string
  title: string
  startTime: string
  endTime: string
}
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
  id: '',
  name: '',
  logo: '',
  introduction: '',
  phone: '',
  status: '',
  latitude: '',
  longitude: '',
  detailAddress: '',
  sort: 0,
  businessHoursJson: [] as BusinessHour[],
  mchIds: [],
});

// 定义校验规则
const dataRules = ref({
  name: [{ required: true, message: "门店名称不能为空", trigger: "blur" }],
})


// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  // 重置营业时间数据
  form.businessHoursJson = []
  // 获取mchPickUp信息
  if (id) {
    form.id = id
    getmchPickUpData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => { });
  if (!valid) return false;
  try {
    loading.value = true;
    const _data: any = { ...form }
    if (_data.businessHoursJson && _data.businessHoursJson.length) {
      _data.businessHoursJson = JSON.stringify(_data.businessHoursJson)
    }
    form.id ? await mchPickUpApi.putObj(_data) : await mchPickUpApi.addObj(_data);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getmchPickUpData = (id: string) => {
  // 获取数据
  loading.value = true
  mchPickUpApi.getObj(id).then((res: any) => {
    Object.assign(form, res.data)
    if (res.data.businessHoursJson) {
      try {
        form.businessHoursJson = JSON.parse(res.data.businessHoursJson)
      } catch (error) {
        console.warn('解析营业时间JSON失败:', error)
        form.businessHoursJson = []
      }
    }
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>