vue3 el-dialog

<template>
  <div>
    <el-dialog v-model="dialogFormVisible" title="弹框">
      <el-form ref="roleObject" :model="recordData" :rules="rules" label-width="180px">
        <el-form-item label="梦子怡:" prop="names">
          <el-input v-model="recordData.names" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="周华健:" prop="zhouhuajian">
          <el-select v-model="recordData.zhouhuajian" filterable style="width: 100%">
            <el-option v-for="item in zhouhuajianList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="谭建瓷" prop="tanjianci">
          <el-select v-model="recordData.tanjianci" filterable style="width: 100%">
            <el-option
              v-for="item in tanjianciList"
              :key="item.value"
              :disabled="item.disabled"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="马里奥">
          <el-tree-select
            ref="elTreeRef"
            v-model="recordData.maliao"
            multiple
            show-checkbox
            style="width: 100%"
            :data="treedata"
            :render-after-expand="false"
            filterable
          />
        </el-form-item>
        <el-form-item label="三三" prop="sansan">
          <el-input v-model="recordData.sansan" placeholder="请输入" type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item label=" 允儿事件" prop="yuner">
          <el-date-picker
            v-model="recordData.yuner"
            placeholder="请选择时间"
            type="date"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="4"> <div style="margin-left: 70%">附件： </div></el-col>
        <el-col :span="20">
          <div style="margin-left: 4px">
            <el-upload
              ref="upload"
              class="upload-demo"
              drag
              multiple
              action=""
              :disabled="disabled"
              :auto-upload="true"
              :limit="10"
              :before-remove="beforeRemoveFn"
              :on-preview="handlePreviewFn"
              :on-exceed="handleExceedFn"
              :file-list="fileList"
              :http-request="uploadFileFn"
            >
              <div v-if="!disabled">
                <div class="container">
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">将文件拖到此处，或<br /><em>点击上传</em></div>
                </div>
                <p class="el-upload__tip">1.最多可上传10个附件，附件大小不得超过8M;</p>
              </div>
              <div v-else>
                <p>不可以上传附件或删除附件</p>
              </div>
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="default" @click="handleCancelFn">取消</el-button>
          <el-button size="default" type="primary" @click="handleSubmitFn">确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ElForm, ElMessage } from 'element-plus'

const dialogFormVisible = ref<boolean>(true) // 对话框显示与否
const roleObject = ref()
// 弹框字段表
const recordData = reactive({
  names: '',
  zhouhuajian: '',
  tanjianci: '',
  maliao: [],
  sansan: '',
  yuner: '',
})
const rules = {
  names: [
    { required: true, message: '请输入' },
    { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' },
  ],
  zhouhuajian: [{ required: true, trigger: 'blur', message: '请选择' }],
  tanjianci: [{ required: true, trigger: 'blur', message: '请选择' }],
  sansan: [{ required: true, mix: 0, max: 4000, trigger: 'blur', message: '请输入1-4000个字符' }],
  yuner: [{ required: true, trigger: 'blur', message: '请选择时间日期' }],
}
const zhouhuajianList = ref<any>([])
const tanjianciList = ref<any>([])
const treedata = ref<any>([])
const fileList = ref<any>([])
onMounted(() => {
  zhouhuajianListFn()
  tanjianciListFn()
  treedataFn()
})
const zhouhuajianListFn = () => {
  const p = {
    data: [
      {
        id: '1739557113505902594',
        Name: '宫1',
        Type: '01',
      },
      {
        id: '1738125307984470018',
        Name: '宫2',
        Type: '02',
      },
    ],
  }
  const data = ref<any>([])
  p.data.forEach((item: any) => {
    data.value.push({
      label: item.Name,
      value: item.id,
    })
  })
  const convert = JSON.parse(JSON.stringify(data.value))
  zhouhuajianList.value = convert
}
const tanjianciListFn = () => {
  const data = ref<any>([])
  const p = {
    data: [
      {
        Label: '一路平安',
        Value: '01',
      },
      {
        Label: '一路顺风',
        Value: '02',
      },
      {
        Label: '花开花落',
        Value: '03',
      },
    ],
  }
  p.data.forEach((item: any) => {
    data.value.push({
      label: item.Label,
      value: item.Value,
      disabled: item.Label !== '花开花落',
    })
  })
  tanjianciList.value = data.value
}
const treedataFn = () => {
  const p = {
    data: [
      {
        id: '1712403422335074305',
        deptCode: '01',
        label: '不不惊喜',
        value: '01',
        deptName: '不不惊喜',
        children: null,
      },
      {
        id: '1712403422498652161',
        deptCode: '02',
        label: '一年关山',
        value: '02',
        deptName: '一年关山',
        children: null,
      },
      {
        id: '1712403423048105986',
        deptCode: '03',
        label: '仙剑',
        value: '03',
        deptName: '仙剑',

        children: [
          {
            id: '1712403425489190914',
            deptCode: '04',
            label: '仙剑1',
            value: '04',
            deptName: '仙剑1',
            children: null,
          },
          {
            id: '1712403425631797249',
            deptCode: '05',
            label: '仙剑2',
            value: '05',
            deptName: '仙剑2',

            children: null,
          },
          {
            id: '1712403425745043457',
            deptCode: '06',
            label: '仙剑3',
            value: '06',
            deptName: '仙剑3',

            children: [
              {
                id: '1712403429889015810',
                deptCode: '07',
                label: '仙剑4',
                value: '07',
                deptName: '仙剑4',
                children: null,
              },
            ],
          },
          {
            id: '1712403426080587777',
            deptCode: '09',
            label: '仙剑6',
            value: '09',
            deptName: '仙剑6',
            children: null,
          },
        ],
      },
    ],
  }
  treedata.value = p
}
// 删除上传文件
const beforeRemoveFn = (file: any) => {
  const { id } = file
  接口({ id }).then(() => {
    ElMessage({ type: 'success', message: '删除成功' })
  })
}
// 下载文件
const handlePreviewFn = (file: any) => {
  if (file.url) 接口(file.id)
}
// 选取文件超过数量提示
const handleExceedFn = () => {
  ElMessage({ type: 'error', message: '最多支持10个附件上传' })
}
// 上传文件
const uploadFileFn = (val: any) => {
  const formData = new FormData()
  formData.append('files', val.file)
  接口(formData).then((res: any) => {
    res.data.forEach((item: any) =>
      fileList.value.push({
        name: item.attachmentName,
        url: item.attachmentPath,
        id: item.attachmentId,
      })
    )
  })
}
// 取消
const handleCancelFn = () => {
  dialogFormVisible.value = false
  recordData.names = ''
  recordData.zhouhuajian = ''
  recordData.tanjianci = ''
  recordData.maliao = []
  recordData.sansan = ''
  recordData.yuner = ''
  fileList.value = []
}
const handleSubmitFn = async () => {
  const mutate = JSON.parse(JSON.stringify(fileList.value))
  const reserve = mutate.map((itme: any) => {
    return itme.id
  })
  await roleObject.value.validate() // 校验
  const ojd = recordData.maliao
  const convert = JSON.parse(JSON.stringify(ojd))
}
</script>