交通事故

龚焕茏

2024-03-11 da2229d6488b4e3574f9e9ad1287326b290e26ac

 src/views/dg/danger/index.vue

@@ -102,26 +102,48 @@
        <el-form-item label="完成情况" prop="performance">
          <el-input v-model="form.performance" placeholder="请输入完成情况" />
        </el-form-item>
        <el-form-item label="图片" prop="">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <el-icon><Plus /></el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon><Download /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="已启用" :value="1" />
            <el-option key="2" label="已禁用" :value="2" />
          </el-select>
        </el-form-item>
        <el-upload
          label="上传图片"
          v-model:file-list="fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@@ -139,33 +161,15 @@
</template>

<script setup name="DangerInfo" lang="ts">
import { listDangerInfo, getDangerInfo, delDangerInfo, addDangerInfo, updateDangerInfo } from '@/api/dg/dangerInfo';
import { getDangerType, listDangerInfo, getDangerInfo, delDangerInfo, addDangerInfo, updateDangerInfo } from '@/api/dg/dangerInfo';
import { DangerInfoVO, DangerInfoQuery, DangerInfoForm } from '@/api/dg/dangerInfo/types';
import type { TabsPaneContext, UploadProps, UploadUserFile } from "element-plus";
const fileList = ref<UploadUserFile[]>([])
import type { TabsPaneContext } from "element-plus";

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext) => {
  tab.props.label
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const dangerInfoList = ref<DangerInfoVO[]>([]);
const buttonLoading = ref(false);
@@ -183,11 +187,6 @@
  visible: false,
  title: ''
});

const dangerTypes = [
  {
    dangerType: '道路隐患'
  }];

const initFormData: DangerInfoForm = {
  id: undefined,
@@ -257,9 +256,13 @@
  loading.value = false;
}

// 调用后端API获取景区名称列表
const dangerTypes = ref<DangerInfoVO[]>([]);

/** 查询安全隐患类型查询条件 */
const getDangerTypes = async () => {
  // dangerTypes.value = await getDangerTypes();
  const res = await getDangerType();
  dangerTypes.value = res;
}

/** 取消按钮 */
@@ -348,4 +351,25 @@
  getList();
  getDangerTypes();
});

import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
</script>