上传图片

龚焕茏

2024-03-06 a473c0680b7b003c33fa6ae5f646eb851e17fe8f

 src/views/dg/danger/total.vue

@@ -38,6 +38,9 @@
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:dangerTotal:export']">导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Top" @click="handleImport" v-hasPermi="['demo:dangerTotal:importTemplate']">导入</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
@@ -82,16 +85,16 @@
      <el-form ref="dangerTotalFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="镇街名称" prop="townStreetName" label-width="100">
          <!-- <el-input v-model="form.townStreetName" placeholder="请输入镇街名称" /> -->
          <el-select v-model="form.townStreetName" placeholder="请选择" clearable style="width: 240px" @keyup.enter="handleQuery" >
          <el-select v-model="form.townStreetName" placeholder="请选择" clearable style="width: 240px" >
              <el-option v-for="item in townStreetNames" :key="item.townStreetName" :label="item.townStreetName" :value="item.townStreetName"/>
            </el-select>
        </el-form-item>
        <el-form-item label="统计周期" prop="periodDate" label-width="100">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;" @change="clearPeriod">
            <el-option key="1" label="年度" :value="1" />
            <el-option key="2" label="月度" :value="2" />
          </el-select>
          &nbsp;
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
        </el-form-item>
        <el-form-item label="发现隐患" prop="findSecurityRisks" label-width="100">
@@ -114,6 +117,39 @@
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 数据导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload">
          <i-ep-upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="text-center el-upload__tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
@@ -144,12 +180,12 @@
});

const townStreetNames = [
  {
    townStreetName: '幸福街道',
  },
  {
    townStreetName: '银杏街道'
  }];
{
  townStreetName: '幸福街道',
},
{
  townStreetName: '银杏街道'
}];

const initFormData: DangerTotalForm = {
  id: undefined,
@@ -159,7 +195,7 @@
  findSecurityRisks: undefined,
  issueNotice: undefined,
  dealWithSecurityRisks: undefined,
  status: undefined
  status: 1
}
const data = reactive<PageData<DangerTotalForm, DangerTotalQuery>>({
  form: {...initFormData},
@@ -309,4 +345,61 @@
const pickerFormat = computed(() => {
  return form.value.period === 1 ? 'YYYY' : 'YYYY-MM';
});

/** 清空周期 */
const clearPeriod = () => {
  form.value.periodDate = undefined;
};


import { globalHeaders } from "@/utils/request";
/*** 导入参数 */
const upload = reactive<ImportOption>({
  // 是否显示弹出层（导入）
  open: false,
  // 弹出层标题（导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: globalHeaders(),
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/demo/dangerTotal/importData"
})
/** 下载模板操作 */
const importTemplate = () => {
  proxy?.download("demo/dangerTotal/importTemplate", {
  }, `导入模板_${new Date().getTime()}.xlsx`);
}

/** 导入按钮操作 */
const handleImport = () => {
  upload.title = "用户导入";
  upload.open = true;
}

/**文件上传中处理 */
const handleFileUploadProgress = () => {
  upload.isUploading = true;
}

const uploadRef = ref<ElUploadInstance>();

/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
  upload.open = false;
  upload.isUploading = false;
  uploadRef.value?.handleRemove(file);
  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
}

/** 提交上传文件 */
function submitFileForm() {
  uploadRef.value?.submit();
}


</script>