交通事故

龚焕茏

2024-03-11 da2229d6488b4e3574f9e9ad1287326b290e26ac

 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>
@@ -81,10 +84,9 @@
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <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" >
              <el-option v-for="item in townStreetNames" :key="item.townStreetName" :label="item.townStreetName" :value="item.townStreetName"/>
            </el-select>
            <el-option v-for="item in townStreetNames" :key="item.name" :label="item.name" :value="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计周期" prop="periodDate" label-width="100">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;" @change="clearPeriod">
@@ -117,12 +119,46 @@
        </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>
  </div>
</template>

<script setup name="DangerTotal" lang="ts">
import { listDangerTotal, getDangerTotal, delDangerTotal, addDangerTotal, updateDangerTotal } from '@/api/dg/dangerTotal';
import { DangerTotalVO, DangerTotalQuery, DangerTotalForm } from '@/api/dg/dangerTotal/types';
import { RegionVO } from '@/api/region/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

@@ -142,14 +178,6 @@
  visible: false,
  title: ''
});

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

const initFormData: DangerTotalForm = {
  id: undefined,
@@ -299,6 +327,7 @@

onMounted(() => {
  getList();
  getTownStreetNames();
});

/** 周期年或月 */
@@ -314,4 +343,69 @@
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();
}

// 调用后端API获取镇街名称列表
import { listRegion} from '@/api/region';
const townStreetNames = ref<RegionVO[]>([]);

const regionQueryParams = {
  parentCode: 510181
}

/** 查询镇街 */
const getTownStreetNames = async () => {
  const res = await listRegion(regionQueryParams);
  townStreetNames.value = res.rows;
}

</script>