index.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <el-dialog
  3. v-model="dialogVisible"
  4. title="异常操作"
  5. width="500px"
  6. :close-on-click-modal="false"
  7. @close="onCancel"
  8. >
  9. <el-form :model="form" label-width="80px">
  10. <el-form-item label="异常说明">
  11. <el-input
  12. v-model="form.condition"
  13. type="textarea"
  14. :rows="3"
  15. placeholder="请输入异常说明"
  16. />
  17. </el-form-item>
  18. <el-form-item label="照片">
  19. <el-upload
  20. class="upload-demo"
  21. action="#"
  22. :auto-upload="false"
  23. :on-change="handleChange"
  24. :file-list="fileList"
  25. list-type="picture"
  26. multiple
  27. >
  28. <el-button type="primary">选择图片</el-button>
  29. <template #tip>
  30. <div class="el-upload__tip">
  31. 只能上传jpg/png文件,且不超过500kb
  32. </div>
  33. </template>
  34. </el-upload>
  35. </el-form-item>
  36. </el-form>
  37. <template #footer>
  38. <span class="dialog-footer">
  39. <el-button @click="onCancel">取消</el-button>
  40. <el-button type="primary" @click="onConfirm">确认</el-button>
  41. </span>
  42. </template>
  43. </el-dialog>
  44. </template>
  45. <script setup lang="ts">
  46. import { ref, watch } from 'vue';
  47. const props = defineProps<{
  48. visible: boolean;
  49. }>();
  50. const emit = defineEmits(['update:visible', 'confirm']);
  51. const dialogVisible = ref(props.visible);
  52. // 监听 props.visible 的变化
  53. watch(() => props.visible, (newVal) => {
  54. dialogVisible.value = newVal;
  55. });
  56. // 监听 dialogVisible 的变化
  57. watch(() => dialogVisible.value, (newVal) => {
  58. emit('update:visible', newVal);
  59. });
  60. const fileList = ref<any[]>([]);
  61. const form = ref({
  62. condition: '',
  63. photos: [] as Array<{
  64. filename: string;
  65. data: string;
  66. }>
  67. });
  68. const handleChange = (file: any) => {
  69. // 将文件转换为Base64
  70. const reader = new FileReader();
  71. reader.readAsDataURL(file.raw);
  72. reader.onload = () => {
  73. form.value.photos.push({
  74. filename: file.name,
  75. data: reader.result?.toString().split(',')[1] || ''
  76. });
  77. };
  78. };
  79. const onCancel = () => {
  80. form.value = {
  81. condition: '',
  82. photos: []
  83. };
  84. fileList.value = [];
  85. emit('update:visible', false);
  86. };
  87. const onConfirm = () => {
  88. emit('confirm', form.value);
  89. onCancel();
  90. };
  91. defineExpose({
  92. dialogVisible
  93. });
  94. </script>
  95. <style scoped>
  96. .upload-demo {
  97. text-align: left;
  98. }
  99. </style>