new-zx-front-admin/src/views/system/sale/merchant/components/MerchantBaseInfo.vue

<template>
  <el-form ref="formRef" :model="formData" :class="{'view':isDetail}" :rules="formRules" label-width="120px" class="overflow-auto"
    v-loading="formLoading" :disabled="isDetail">
    <el-row>
      <el-col :span="12">
        <el-form-item label="商户名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入商户名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="商户状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="负责人" prop="contact">
          <el-input v-model="formData.contact" placeholder="请输入负责人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所在地" prop="address">
          <el-input v-model="formData.address" placeholder="请输入所在地" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="负责人电话" prop="contactNumber">
          <el-input v-model="formData.contactNumber" placeholder="请输入负责人电话" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="官网" prop="website">
          <el-input v-model="formData.website" placeholder="请输入官网" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="维权电话" prop="complaintsHotline">
          <el-input v-model="formData.complaintsHotline" placeholder="请输入维权电话" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="客服电话" prop="customerServiceHotline">
          <el-input v-model="formData.customerServiceHotline" placeholder="请输入客服电话" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务到期时间" prop="expireTime">
          <el-date-picker v-model="formData.expireTime" type="date" value-format="x" placeholder="选择服务到期时间" />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- {{ mobile }} -->
    <div v-if="mobile">
      <el-row>
        <el-col :span="12">
          <el-form-item label="营业执照" prop="businessLicensePicture" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="businessLicensePicture" class="businessLicensePicture">
            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="简介" prop="description" />
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item prop="description" class="description">
          <div v-html="formData.description"></div>
        </el-form-item>
      </el-col>
    </div>
    <div v-else>
      <el-row>
        <el-col :span="24">
          <el-form-item label="营业执照" prop="businessLicensePicture">
            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="简介" prop="description">
            <Editor v-model="formData.description" height="150px" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { MerchantApi, MerchantVO } from '@/api/system/sale/merchant'
import { copyValueToTarget } from '@/utils'
// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
// const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = reactive({
  id: undefined,
  name: undefined,
  status: undefined,
  description: undefined,
  contact: undefined,
  address: undefined,
  contactNumber: undefined,
  website: undefined,
  complaintsHotline: undefined,
  customerServiceHotline: undefined,
  email: undefined,
  businessLicensePicture: undefined,
  expireTime: undefined
})
const formRules = reactive({
  name: [{ required: true, message: '商户名称不能为空', trigger: 'blur' }],
  // status: [{ required: true, message: '商户状态', trigger: 'blur' }]
  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
  contact: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
  address: [{ required: true, message: '所在地不能为空', trigger: 'blur' }],
  contactNumber: [{ required: true, message: '负责人电话不能为空', trigger: 'blur' }],
  complaintsHotline: [{ required: true, message: '维权电话不能为空', trigger: 'blur' }],
  customerServiceHotline: [{ required: true, message: '客服电话不能为空', trigger: 'blur' }],
  email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
  businessLicensePicture: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
  expireTime: [{ required: true, message: '服务到期时间不能为空', trigger: 'blur' }]
})
const formRef = ref()
const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  "isDetail": {
    type: Boolean,
    default: false
  },
  "openType": {
    type: String,
    default: "查看"
  },
  propFormData: {
    type: Object,
    default: () => { }
  }
});

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    immediate: true
  }
)

const emit = defineEmits(['update:activeName'])

const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('基本信息不完善，请填写相关信息')
    emit('update:activeName', 'info')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })
const updateInitialData = inject('updateInitialData');

watch(formData, (data) => {
  try { copyValueToTarget(updateInitialData.value, formData) } catch {
    console.log("chakan ")
  }


},
  {
    immediate: true
  }
)


// console.log(props)
// let id = ref(props.id)
// onMounted(async() => {
//   if (id.value) {
//     formLoading.value = true
//     try {
//       // formData.value = await MerchantApi.getMerchant(id.value)
//     } finally {
//       formLoading.value = false
//     }
//   }
// })
</script>

<style src="./MerchantComponents.css"  lang="scss" scoped></style>