dc-ui/src/views/model/deviceImportInfo/index.vue

<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>