vue3中使用jsx/tsx写ElMessageBox嵌套ElSelect、ElInput、ElDatePicker

userxxcc

已于 2023-08-11 08:44:23 修改

阅读量2.2k

点赞数 1

文章标签： javascript 前端 vue.js

于 2023-08-10 16:20:37 首次发布

本文链接：https://blog.csdn.net/weixin_41827162/article/details/132209888

版权

message: () => h() 必须是函数形式才能update数据。

简单的

// 绑定参数
const pageData = reactive({
  statusValue: null
})
// 更改设备状态弹窗
const openDialogChangeStatus = (ids: number[], name: string, doTxt: string) => {
  // options
  const options = [
    { label: '正常', value: 0 },
    { label: '异常', value: 2 },
  ]
  //
  ElMessageBox({
    title: name,
    message: () =>
      h(
        ElSelect,
        {
          modelValue: pageData.statusValue,
          'onUpdate:modelValue': (value: any) => {
            console.log('=log=onUpdate:modelValue=', value)
            pageData.statusValue = value
          },
          placeholder: '请选择..',
          clearable: true,
          style: 'width: 100%; padding: 20px 0px;',
          onChange: (value) => {
            console.log('=log=onChange=', value, pageData.statusValue)
          }
        },
        () => {
          const optionDom = []
          options.forEach((row) => {
            optionDom.push(h(ElOption, { label: row.label, value: row.value, disabled: false }))
          })
          return optionDom
        }
      ),
    showCancelButton: false,
    confirmButtonText: '立即' + doTxt,
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        // 提交数据
        new Promise((resolve, reject) => {
          // 批量操作
          const allIds = {
            equipmentIdMap: ids,
            status: pageData.statusValue
          }
          resolve(setStatusEquipmentConfig(allIds))
        })
          .then((res) => {
            console.log('confirm=done()', res)
            ElMessage({
              message: res.msg,
              type: 'success'
            })
            instance.confirmButtonLoading = false
            done(true)
          })
          .catch((e) => {
            ElMessage.error('操作出错！')
            done(true)
          })
      } else {
        done(true)
      }
    }
  })
    .then((action) => {
      pageData.statusValue = null
    })
    .catch((e) => {
      pageData.statusValue = null
    })
}

复杂的：

// 绑定数据
const pageData = reactive({
  submissionInfo: {
    check_uncertainty: null,
    inspection_date: null,
    check_company: ''
  }
})

// 更改送检
const openDialogChangeSubmission = (ids: number[], name: string, doTxt: string) => {
  console.log('=log=openDialogChangeSubmission=', [ids, name, doTxt])
  // options
  const options = [
    { label: '不需要', value: 0 },
    { label: '需要', value: 1 }
  ]
  //
  ElMessageBox({
    title: name,
    message: () =>
      h(ElForm, { style: 'width: 100%; padding: 20px 0px 20px 0px;', labelWidth: '120px' }, [
        h(
          ElFormItem,
          { label: '检定单位' },
          h(ElInput, {
            modelValue: pageData.submissionInfo.check_company,
            'onUpdate:modelValue': (value: any) => {
              // console.log('=log=onUpdate:modelValue=', value)
              pageData.submissionInfo.check_company = value
            },
            placeholder: '请填写  ',
            style: 'width: 100%;'
          })
        ),
        h(
          ElFormItem,
          { label: '测量不确定度' },
          h(
            ElSelect,
            {
              modelValue: pageData.submissionInfo.check_uncertainty,
              'onUpdate:modelValue': (value: any) => {
                // console.log('=log=onUpdate:modelValue=', value)
                pageData.submissionInfo.check_uncertainty = value
              },
              placeholder: '请选择  ',
              clearable: true,
              style: 'width: 100%;',
              onChange: (value) => {
                console.log('=log=onChange=', value, pageData.submissionInfo.check_uncertainty)
              }
            },
            () => {
              const optionDom = []
              options.forEach((row) => {
                optionDom.push(h(ElOption, { label: row.label, value: row.value, disabled: false }))
              })
              return optionDom
            }
          )
        ),
        h(
          ElFormItem,
          { label: '送检日期' },
          h(ElDatePicker, {
            modelValue: pageData.submissionInfo.inspection_date,
            'onUpdate:modelValue': (value: any) => {
              console.log('=log=onUpdate:modelValue=', value)
              pageData.submissionInfo.inspection_date = value
            },
            placeholder: '请选择 送检日期 ',
            type: 'date',
            style: 'width: 100%;',
            format: 'YYYY-MM-DD',
            valueFormat: 'X'
          })
        )
      ]),
    showCancelButton: false,
    confirmButtonText: '立即' + doTxt,
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        if (
          pageData.submissionInfo.check_company === '' ||
          pageData.submissionInfo.check_uncertainty === null ||
          pageData.submissionInfo.inspection_date === null
        ) {
          ElMessage.error('信息未填写完整！')
          setTimeout(() => {
            instance.confirmButtonLoading = false
          }, 1500)
          return
        }
        // 提交数据
        new Promise((resolve, reject) => {
          // 批量操作
          const allIds = {
            equipmentIdMap: ids,
            inspection_date: pageData.submissionInfo.inspection_date,
            check_company: pageData.submissionInfo.check_company,
            check_uncertainty: pageData.submissionInfo.check_uncertainty
          }
          resolve(submissionEquipmentConfig(allIds))
        })
          .then((res) => {
            console.log('confirm=done()', res)
            ElMessage({
              message: res.msg,
              type: 'success'
            })
            instance.confirmButtonLoading = false
            done(true)
          })
          .catch((e) => {
            ElMessage.error('操作出错！')
            done(true)
          })
      } else {
        console.log('取消=', action, pageData.submissionInfo.check_uncertainty)
        done(true)
      }
    }
  })
    .then((action) => {
      console.log('ElMessageBox对话完成=1=', action)
      pageData.submissionInfo.check_uncertainty = null
      pageData.submissionInfo.inspection_date = null
      pageData.submissionInfo.check_company = ''
    })
    .catch((e) => {
      console.log('ElMessageBox对话完成=2=', e)
      pageData.submissionInfo.check_uncertainty = null
      pageData.submissionInfo.inspection_date = null
      pageData.submissionInfo.check_company = ''
    })
}