jiahan.wu [cr] 设备参数信息导入模块(列表、删除、导入、导出功能)

10 months ago · db3b559696
2 changed files with 456 additions and 0 deletions
--- a/src/api/model/deviceImportInfo.js
+++ b/src/api/model/deviceImportInfo.js
@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 查询设备导入信息列表
+export function listInfo(query) {
+  return request({
+    url: '/model/deviceImportInfo/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除设备导入信息
+export function delInfo(id) {
+  return request({
+    url: '/model/deviceImportInfo/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出设备导入信息
+export function exportInfo(id) {
+  return request({
+    responseType: 'blob',
+    url: '/model/deviceImportInfo/export?id=' + id,
+    method: 'post'
+  })
+}
+
+// 上传设备参数信息
+export function uploadInfo(param, formData) {
+  return request({
+    url: '/model/deviceImportInfo/upload',
+    method: 'post',
+    data: formData,
+    params: param
+  })
+}
--- a/src/views/model/deviceImportInfo/index.vue
+++ b/src/views/model/deviceImportInfo/index.vue
@ -0,0 +1,419 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="文件名" prop="filename">
+        <el-input
+          v-model="queryParams.filename"
+          placeholder="请输入文件名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="组织编码" prop="orgCode">
+        <el-tree-select v-model="queryParams.orgCode" :data="deptOptions"
+                        :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
+                        check-strictly :default-expand-all="true" />
+      </el-form-item>
+      <el-form-item label="项目名称" prop="projectName">
+        <el-input
+          v-model="queryParams.projectName"
+          placeholder="请输入项目名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="服务配置ID" prop="issServerconfid">
+        <el-input
+                v-model="queryParams.issServerconfid"
+                placeholder="请输入服务配置ID"
+                clearable
+                @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          icon="Delete"
+          @click="handleDelete"
+          v-hasPermi="['model:deviceImportInfo:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+                type="success"
+                icon="Upload"
+                @click="handleUpload"
+                v-hasPermi="['model:deviceImportInfo:upload']"
+        >上传</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="文件名" align="center" prop="filename" />
+      <el-table-column label="记录条数" align="center" prop="recordSize" />
+      <el-table-column label="组织名称" align="center" prop="orgName" />
+      <el-table-column label="项目名称" align="center" prop="projectName" />
+      <el-table-column label="服务配置ID" align="center" prop="issServerconfid" />
+      <el-table-column label="上传时间" align="center" prop="createTime" />
+      <el-table-column label="上传状态" align="center" prop="uploadStatus" :formatter="formatUploadStatus"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+                  type="text"
+                  icon="Download"
+                  @click="handleExport(scope.row)"
+          >导出</el-button>
+          <el-button
+            type="text"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body draggable>
+      <el-form ref="deviceImportRef" :model="form" :rules="rules" label-width="125px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="工程名称" prop="projectName">
+              <el-input v-model="form.projectName" placeholder="请输入工程名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所属组织名称" prop="orgCode">
+              <el-tree-select v-model="form.orgCode" :data="deptOptions" @node-click="orgNodeClick"
+                              :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择组织名称"
+                              check-strictly :default-expand-all="true"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="服务配置ID" prop="issServerconfid">
+              <el-input v-model="form.issServerconfid" placeholder="请输入服务配置ID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上传文件" prop="file">
+              <el-upload
+                      multiple
+                      :action="uploadFileUrl"
+                      accept=".xls,.xlsx"
+                      :before-upload="handleBeforeUpload"
+                      :auto-upload="false"
+                      :file-list="fileList"
+                      :on-change="fileChange"
+                      :on-remove="handleRemove"
+                      :limit="limit"
+                      :on-exceed="handleExceed"
+                      :show-file-list="true"
+                      class="upload-file-uploader"
+                      ref="fileUpload"
+              >
+                <!-- 上传按钮 -->
+                <el-button type="primary">选取文件</el-button>
+              </el-upload>
+              <!-- 上传提示 -->
+              <div class="el-upload__tip" v-if="showTip">
+                请上传
+                <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+                <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+                的文件
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+
+
+</template>
+
+<script setup name="Info">
+import { listInfo, delInfo, exportInfo, uploadInfo } from "@/api/model/deviceImportInfo";
+import { deptTreeSelect } from "@/api/system/user";
+
+const { proxy } = getCurrentInstance();
+
+const infoList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const deptOptions = ref(undefined);
+const fileList = ref([]);
+
+const props = defineProps({
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 1,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["xlsx", "xls"],
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  }
+});
+//定义校验规则
+var validateFileList = (rule, value, callback) => {
+  if (fileList.value.length < 1) {//我控制了FileList 长度代表文件个数
+    callback(new Error("请上传文件"))
+  } else {
+    callback()
+  }
+}
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tentantId: null,
+    recordSize: null,
+    filename: null,
+    orgCode: null,
+    projectName: null,
+    uploadStatus: null
+  },
+  rules: {
+    projectName: [
+      { required: true, message: "工程名称不能为空", trigger: "change" }
+    ],
+    orgCode: [
+      { required: true, message: "所属组织不能为空", trigger: "change" }
+    ],
+    issServerconfid: [
+      { required: true, message: "服务配置ID不能为空", trigger: "change" }
+    ],
+    file: [
+      { required: true, validator:validateFileList, message: "上传文件不能为空", trigger: "change" }
+    ]
+
+  }});
+
+const { queryParams, form, rules } = toRefs(data);
+
+const showTip = computed(
+        () => props.isShowTip && (props.fileType || props.fileSize)
+);
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data;
+  });
+};
+
+/** 查询设备导入信息列表 */
+function getList() {
+  loading.value = true;
+  listInfo(queryParams.value).then(response => {
+    infoList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    projectName: null,
+    orgCode: null,
+    orgName: null,
+    issServerconfid: null
+  };
+  proxy.resetForm("deviceImportRef");
+  fileList.value = [];
+
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加设备导入信息";
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  if (_ids.length == 0) {
+    proxy.$modal.msgError('请选择需要删除的设备参数导入信息!');
+  } else {
+    proxy.$modal.confirm('是否确认删除设备导入信息编号为"' + _ids + '"的数据项？').then(function() {
+      return delInfo(_ids);
+    }).then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    }).catch(() => {});
+  }
+}
+
+/** 导出按钮操作 */
+function handleExport(row) {
+  const _id = row.id;
+  exportInfo(_id).then(res => {
+    var debug = res;
+    if (debug) {
+      var elink = document.createElement('a');
+      elink.download = '设备参数导入明细'+ new Date().getTime() +'.xlsx';
+      elink.style.display = 'none';
+      var blob = new Blob([debug], { type: 'application/x-msdownload' });
+      elink.href = URL.createObjectURL(blob);
+      document.body.appendChild(elink);
+      elink.click();
+      document.body.removeChild(elink);
+    } else {
+      proxy.$modal.msgError('导出异常请联系管理员');
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function handleUpload() {
+  reset();
+  open.value = true;
+  title.value = "上传设备参数信息";
+}
+
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["deviceImportRef"].validate(valid => {
+    if (valid) {
+      loading.value = true;
+      let formData = new FormData()
+
+      var param = {
+        "orgCode":form.value.orgCode,
+        "orgName":form.value.orgName,
+        "issServerconfid":form.value.issServerconfid,
+        "projectName":form.value.projectName
+      }
+      formData.append('file', fileList.value[0].raw);
+      cancel();
+      uploadInfo(param, formData).then(response => {
+        if (response.data == true) {
+          proxy.$modal.msgSuccess("上传成功");
+        } else {
+          proxy.$modal.msgError("上传失败");
+        }
+        loading.value = false;
+        getList();
+
+      });
+    }
+  });
+}
+
+// 上传前校检格式和大小
+function handleBeforeUpload(file) {
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  number.value++;
+  return true;
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+
+//	文件列表移除文件时的钩子
+function handleRemove(file, files) {
+  fileList.value = [];
+}
+//上传文件时以及更改时进入
+function fileChange(file, files) {
+  fileList.value = files;
+}
+function orgNodeClick(data,e) {
+  form.value.orgCode = data.value;
+  form.value.orgName = data.label;
+}
+function formatUploadStatus(row){
+  return row.uploadStatus == true ? "成功" : "失败";
+}
+
+getDeptTree();
+getList();
+</script>