数据导入

src/components/DataImport/DataImportDetail.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="showDetails ? '详情' : '查看导入情况'" width="780px" append-to-body>
+    <el-table v-show="!showDetails" ref="tableRef" :data="dataList">
+      <el-table-column label="文件名称" align="center" prop="event_id" />
+      <el-table-column label="时间" align="center" prop="event_title" />
+      <el-table-column label="操作账号" align="center" prop="event_title" />
+      <el-table-column label="状态" align="center" prop="event_title">
+        <template #default="scope">
+          <el-text v-if="scope.row.event_type === '1'" type="success">已完成</el-text>
+          <el-text v-if="scope.row.event_type === '2'" type="primary">进行中</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="event_title">
+        <template #default="scope">
+          <div>错误3条</div>
+          <el-text class="common-btn-text-primary" @click="handleShowDetails(scope.row.id)">详情</el-text>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0 && !showDetails"
+      v-model:page="queryParams.page"
+      v-model:limit="queryParams.page_size"
+      :total="total"
+      @pagination="getList"
+    />
+    <div v-show="showDetails">
+      <div style="width: 100%;text-align: center">
+        <el-button type="primary" @click="showDetails = false">返回</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup name="DataImportDetail">
+const props = defineProps({
+  modelValue: Boolean
+});
+const emits = defineEmits(['update:modelValue']);
+const dialogVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emits('update:modelValue', newValue);
+  }
+});
+
+const total = ref(0);
+const queryParams = reactive({
+  page: 1,
+  page_size: 10
+});
+const dataList = ref([]);
+
+const getList = () => {
+  dataList.value = [{}];
+};
+
+let showDetails = ref(false);
+const handleShowDetails = (id) => {
+  showDetails.value = true;
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/types/components.d.ts

@@ -17,6 +17,8 @@ declare module 'vue' {
     CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     Contact: typeof import('./../components/Contact/index.vue')['default']
     ContactSelect: typeof import('./../components/ContactSelect/index.vue')['default']
+    DataImport: typeof import('./../components/DataImport/index.vue')['default']
+    DataImportDetail: typeof import('./../components/DataImport/DataImportDetail.vue')['default']
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
@@ -30,8 +32,6 @@ declare module 'vue' {
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -44,7 +44,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -54,9 +54,12 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -79,7 +82,8 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/setting/PreventionResponsible/index.vue

@@ -22,16 +22,10 @@
             <h1>茂名市责任人列表</h1>
             <el-form ref="queryFormRef" :model="queryParams" :inline="true">
               <el-form-item>
-                <el-button v-has-permi="['system:user:add']" type="primary" icon="Plus" @click="handleAdd()">新增责任人</el-button>
-                <el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
-                  查看导入情况</el-button
-                >
-                <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleExport()">
-                  批量导出</el-button
-                >
-                <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleImport()">
-                  批量导入</el-button
-                >
+                <el-button type="primary">批量导出</el-button>
+                <el-button type="primary" @click="handleUpload">批量导入</el-button>
+                <el-button type="primary">新增责任人</el-button>
+                <el-button type="primary" @click="handleShowUploadDetails">查看导入情况</el-button>
               </el-form-item>
               <el-form-item label="姓名：" prop="userName" label-width="auto">
                 <el-input v-model="queryParams.userName" placeholder="请输入联系人" clearable @keyup.enter="handleQuery" />
@@ -81,6 +75,8 @@
         <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
       </el-col>
     </el-row>
+    <DataImport v-model="uploadShow" url="" file-name="责任人信息批量导入模板" stepsText="责任人信息" />
+    <DataImportDetail v-model="showUploadDetails" />
   </div>
 </template>
 
@@ -441,6 +437,15 @@ const resetForm = () => {
   form.value.id = undefined;
   form.value.status = '1';
 };
+// 导入
+let uploadShow = ref(false);
+const handleUpload = () => {
+  uploadShow.value = true;
+};
+let showUploadDetails = ref(false);
+const handleShowUploadDetails = () => {
+  showUploadDetails.value = true;
+};
 onMounted(() => {
   getTreeSelect(); // 初始化部门数据
   getList(); // 初始化列表数据