file upload and export

This commit is contained in:
cxc
2022-07-28 11:18:53 +08:00
parent 6f4a650962
commit 5983e1e31b
11 changed files with 282 additions and 119 deletions

View File

@ -1,4 +1,5 @@
import { defineStore } from "pinia";
import { tenantSelect } from "@/api/subPlatform/tenant";
const useDataStore = defineStore("data", {
state: () => ({
@ -11,8 +12,12 @@ const useDataStore = defineStore("data", {
},
},
actions: {
setSiteList(list) {
this.siteList = list;
async setSiteList(list) {
if (this.siteList.length !== 0) {
return;
}
const { rows } = await tenantSelect();
this.siteList = rows;
},
},
});

View File

@ -3,13 +3,13 @@
:model-value="modelValue"
placeholder="请选择,支持搜索"
size="default"
:loading="siteList.length === 0"
:loading="dataStore.siteList.length === 0"
@change="valueChanged"
filterable
clearable
>
<el-option
v-for="item in siteList"
v-for="item in dataStore.siteList"
:key="item.id"
:label="item.name"
:value="item.id"
@ -17,7 +17,6 @@
</el-select>
</template>
<script setup name="SiteOptions">
import { tenantSelect } from "@/api/subPlatform/tenant";
import useDataStore from "@/store/modules/data";
import { ref, toRefs } from "vue";
const props = defineProps({
@ -25,24 +24,25 @@ const props = defineProps({
type: [Number, String],
},
});
const { modelValue } = toRefs(props);
const dataStore = useDataStore();
const siteList = ref([]);
dataStore.setSiteList();
// const siteList = ref([]);
const emit = defineEmits(["update:modelValue"]);
// 获取站点列表
const getSiteList = async () => {
const { rows } = await tenantSelect();
siteList.value = rows;
dataStore.setSiteList(rows);
};
// // 获取站点列表
// const getSiteList = async () => {
// const { rows } = await tenantSelect();
// siteList.value = rows;
// dataStore.setSiteList(rows);
// };
const valueChanged = (val) => {
console.log("changed");
emit("update:modelValue", val);
};
getSiteList();
// getSiteList();
dataStore.setSiteList();
</script>

View File

@ -61,7 +61,12 @@
>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="upload" size="default" @click=""
<el-button
type="info"
plain
icon="upload"
size="default"
@click="handleImport"
>导入</el-button
>
</el-col>
@ -135,6 +140,53 @@
v-model:limit="queryParams.page_size"
@pagination="getList"
/>
<!-- 用户导入对话框 -->
<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"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<!-- <div class="el-upload__tip">
<el-checkbox
v-model="upload.updateSupport"
/>是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xlsxlsx格式文件</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>
@ -144,13 +196,20 @@ import {
companyExport,
companyDelete,
} from "@/api/dataList/enterprise";
import { download } from "@/utils/request";
import dayjs from "dayjs";
import { getToken } from "@/utils/auth";
import axios from "axios";
// import { download } from "@/utils/request";
// import dayjs from "dayjs";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from "file-saver";
import { tenantSelect } from "@/api/subPlatform/tenant";
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { enterpriseOptions } from "@/utils/parameter";
import { ElMessageBox } from "element-plus";
import { ElLoading, ElMessageBox } from "element-plus";
import request from "@/utils/request";
import dayjs from "dayjs";
const router = useRouter();
const data = reactive({
queryParams: {
@ -161,6 +220,23 @@ const data = reactive({
tenantId: undefined,
},
});
/*** 用户导入参数 */
const upload = reactive({
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
// updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: import.meta.env.VITE_APP_BASE_API + "/business/enterprise/importData",
});
const { queryParams } = toRefs(data);
const showSearch = ref(true);
const siteList = ref([]);
@ -205,6 +281,42 @@ const handleDetail = (id) => {
query: { id },
});
};
const uploadRef = ref(null);
/** 导入按钮操作 */
function handleImport() {
upload.title = "用户导入";
upload.open = true;
}
/** 下载模板操作 */
function importTemplate() {
proxy.download(
"system/user/importTemplate",
{},
`user_template_${new Date().getTime()}.xlsx`
);
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
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();
}
const handleDelete = async (id) => {
ElMessageBox.confirm(`是否确认删除编号为${id}的数据项?`)
.then(async () => {
@ -214,13 +326,51 @@ const handleDelete = async (id) => {
})
.catch(() => {});
};
const handleExport = () => {
ElMessageBox.confirm(`是否确认企业列表?`)
.then(() => {
download("/business/enterprise/export", {}, "res.xls");
// companyExport();
let downloadLoadingInstance;
const download = (url, filename) => {
downloadLoadingInstance = ElLoading.service({
text: "正在下载数据,请稍候",
background: "rgba(0, 0, 0, 0.7)",
});
return request
.get(url, {
// transformRequest: [
// (params) => {
// return tansParams(params);
// },
// ],
headers: { "Content-Type": "application/x-www-form-urlencoded" },
responseType: "blob",
})
.catch(() => {});
.then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data]);
saveAs(blob, filename);
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg =
errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
ElMessage.error(errMsg);
}
downloadLoadingInstance.close();
})
.catch((r) => {
console.error(r);
ElMessage.error("下载文件出现错误,请联系管理员!");
downloadLoadingInstance.close();
});
};
const handleExport = () => {
ElMessageBox.confirm(`是否确认企业列表?`).then(() => {
download(
`/business/enterprise/export`,
`企业信息(${dayjs().format("YYYYMMDDHHmmss")}).xlsx`
);
});
};
getList();
getSiteList();

View File

@ -8,7 +8,8 @@
@submit.native.prevent
>
<el-form-item label="所属站点" prop="tenantId">
<el-select
<SiteOptions v-model="queryParams.tenantId" />
<!-- <el-select
v-model="queryParams.tenantId"
placeholder="请选择,支持搜索"
size="default"
@ -20,7 +21,7 @@
:label="item.name"
:value="item.id"
/>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item>
<el-button
@ -59,14 +60,14 @@
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="title" label="导航名称"></el-table-column>
<el-table-column
prop="area"
label="站点"
align="center"
></el-table-column>
<el-table-column prop="updated_at" label="更新时间" align="center">
<el-table-column prop="area" label="站点" align="center">
<template #default="{ row }">
<span>{{ row.updated_at }}</span>
{{ dataStore.getSiteName(row.tenantId) }}
</template>
</el-table-column>
<el-table-column label="更新时间" align="center">
<template #default="{ row }">
<span>{{ row.updateTime }}</span>
</template>
</el-table-column>
<el-table-column
@ -111,7 +112,8 @@
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点:" prop="tenantId">
<el-select
<SiteOptions v-model="form.tenantId" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="default"
@ -123,7 +125,7 @@
:label="item.name"
:value="item.id"
/>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item label="上级导航" prop="parentId">
<TreeSelect
@ -164,6 +166,10 @@ import { cloneDeep } from "lodash";
import { tenantSelect } from "@/api/subPlatform/tenant";
import { ElMessage, ElMessageBox } from "element-plus";
import WangEditor from "@/components/WangEditor/index.vue";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const queryFormRef = ref(null);
const dataList = ref([]);
const loading = ref(true);

View File

@ -8,21 +8,9 @@
@submit.native.prevent
>
<el-form-item label="所属站点" prop="tenantId">
<!-- <SiteOptions v-model="queryParams" /> -->
<el-select
v-model="queryParams.tenantId"
placeholder="请选择,支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<SiteOptions v-model="queryParams.tenantId" />
</el-form-item>
<el-form-item>
<el-button
type="primary"
@ -59,7 +47,8 @@
<el-table-column label="导航名称" prop="title" width="120" />
<el-table-column label="所属站点" align="center">
<template #default="{ row }">
{{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
{{ dataStore.getSiteName(row.tenantId) }}
<!-- {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }} -->
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
@ -103,7 +92,8 @@
<el-dialog :title="title" v-model="showEditDialog" width="500px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点" prop="tenantId">
<el-select
<SiteOptions v-model="form.tenantId" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="default"
@ -115,7 +105,7 @@
:label="item.name"
:value="item.id"
/>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item label="导航名称:" prop="title">
<el-input v-model="form.title" placeholder="请输入导航名称" />
@ -139,13 +129,17 @@ import {
import { cloneDeep } from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";
import { tenantSelect } from "@/api/subPlatform/tenant";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const queryFormRef = ref(null);
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);
const showEditDialog = ref(false);
const formRef = ref(null);
const siteList = ref([]); // 站点列表
// const siteList = ref([]); // 站点列表
const showSearch = ref(true);
const title = ref("");
@ -191,10 +185,10 @@ const getList = async () => {
};
// 获取站点列表
const getSiteList = async () => {
const resp = await tenantSelect();
siteList.value = resp.rows;
};
// const getSiteList = async () => {
// const resp = await tenantSelect();
// siteList.value = resp.rows;
// };
// const getSiteName = (tenantId) => {
// const item = siteList.value.find((el) => {
@ -255,5 +249,5 @@ const handleDelete = (row) => {
.catch(() => {});
};
getList();
getSiteList();
// getSiteList();
</script>

View File

@ -8,7 +8,8 @@
@submit.native.prevent
>
<el-form-item label="导航名称:" prop="categoryId">
<el-select
<SiteOptions v-model="queryParams.tenantId" />
<!-- <el-select
v-model="queryParams.categoryId"
placeholder="请选择"
size="default"
@ -22,7 +23,7 @@
:value="item.id"
>
</el-option>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item>
<el-button
@ -65,7 +66,8 @@
</el-table-column>
<el-table-column label="所属站点" align="center">
<template #default="{ row }">
{{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
<!-- {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }} -->
{{ dataStore.getSiteName(row.tenantId) }}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
@ -112,7 +114,8 @@
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点" prop="tenantId">
<el-select
<SiteOptions v-model="form.tenantId" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="default"
@ -124,7 +127,7 @@
:label="item.name"
:value="item.id"
/>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item label="归属导航:" prop="categoryId">
<el-select v-model="form.categoryId" placeholder="请选择">
@ -169,16 +172,18 @@ import {
navigationList,
} from "@/api/website/innovate";
import { tenantSelect } from "@/api/subPlatform/tenant";
import WangEditor from "@/components/WangEditor/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const loading = ref(true); // 是否正在加载
const showSearch = ref(true); // 是否显示搜索栏
const categoryList = ref([]); //导航列表
const queryFormRef = ref(null);
const formRef = ref(null);
const siteList = ref([]);
const total = ref(0);
const dataList = ref([]);
@ -235,20 +240,6 @@ const getList = async () => {
loading.value = false;
};
// 获取站点列表
const getSiteList = async () => {
const resp = await tenantSelect();
siteList.value = resp.rows;
};
// // 获取站点名称
// const getSiteName = (tenantId) => {
// const item = siteList.value.find((el) => {
// return el.id === tenantId;
// });
// return item ? item.name : "无";
// };
// 获取分类名称
const getCategoryName = (categoryId) => {
const item = categoryList.value.find((el) => {
@ -327,35 +318,5 @@ const handleDelete = (row) => {
};
getList();
getSiteList();
getcategoryList();
</script>
<!-- <script>
import {
serviceList,
serviceAdd,
serviceDetail,
serviceEdit,
serviceDelete,
navigationSelect,
} from "@/api/website/innovate";
export default {
data() {
return {
is_super: this.$store.getters.is_super,
loading: true,
showSearch: true,
categoryLists: [],
};
},
methods: {},
created() {
this.getList();
navigationSelect().then((res) => {
this.categoryLists = res.data;
});
},
};
</script> -->

View File

@ -11,7 +11,7 @@
v-model="queryParams.name"
placeholder="请输入姓名"
clearable
size="small"
size="default"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
@ -21,7 +21,7 @@
v-model="queryParams.status"
placeholder="用户状态"
clearable
size="small"
size="default"
style="width: 240px"
@clear="delete queryParams.status"
>
@ -38,7 +38,7 @@
v-model="queryParams.content"
placeholder="请输入需求内容"
clearable
size="small"
size="default"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
@ -47,11 +47,11 @@
<el-button
type="primary"
icon="search"
size="small"
size="default"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="refresh" size="small" @click="resetQuery"
<el-button icon="refresh" size="default" @click="resetQuery"
>重置</el-button
>
</el-form-item>
@ -88,7 +88,7 @@
</el-table-column>
<el-table-column
label="处理结果"
prop="handle_content"
prop="handleContent"
align="center"
show-overflow-tooltip
/>
@ -100,6 +100,7 @@
<el-table-column
label="操作"
align="center"
width="120"
class-name="small-padding fixed-width"
>
<template #default="props">
@ -108,7 +109,7 @@
size="small"
type="text"
icon="el-icon-view"
@click="(form = props.row), (open = true)"
@click="(form = props.row), (showEditDialog = true)"
>查看</el-button
>
<el-button
@ -138,6 +139,50 @@
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<el-dialog title="查看" v-model="showEditDialog" width="500px">
<el-form ref="form" :model="form" label-width="100px" disabled>
<el-form-item label="姓名:">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="单位:">
<el-input v-model="form.company" />
</el-form-item>
<el-form-item label="联系方式:">
<el-input v-model="form.mobile" />
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="网页地址:">
<el-input v-model="form.areaDomain" />
</el-form-item>
<el-form-item label="需求内容:">
<el-input
v-model="form.content"
type="textarea"
:autosize="{ minRows: 2, maxRows: 6 }"
/>
</el-form-item>
<el-form-item label="处理状态:">
<el-select v-model="form.status">
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="处理结果:">
<el-input
v-model="form.handleContent"
type="textarea"
:autosize="{ minRows: 2, maxRows: 6 }"
/>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script setup>
@ -151,7 +196,7 @@ import {
} from "@/api/website/message";
// import { formatTime } from "@/utils/index.js";
const showEditDialog = ref(false);
const queryFormRef = ref(null); // 搜索表单ref
const loading = ref(true); // 是否正在加载
const dataList = ref([]); // 数据列表

View File

@ -69,7 +69,7 @@
{{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
</template>
</el-table-column>
<el-table-column prop="updated_at" label="更新时间" align="center">
<el-table-column label="更新时间" align="center">
<template #default="{ row }">
<span>{{ row.updateTime }}</span>
</template>

View File

@ -206,8 +206,9 @@ import {
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "../../../../store/modules/data";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const dataList = ref([]);
// TODO:isSuper
// const is_super = this.$store.getters.is_super;

View File

@ -206,6 +206,7 @@ import useDataStore from "@/store/modules/data";
import SiteOptions from "@/views/components/SiteOptions";
// import SiteOptions from "../../../components/SiteOptions/index.vue";
const dataStore = useDataStore();
dataStore.setSiteList();
// import SiteOptions from "@/components/SiteOptions";
const dataList = ref([]);
const loading = ref(true);