file upload and export

2022-07-28 11:18:53 +08:00
parent 6f4a650962
commit 5983e1e31b
11 changed files with 282 additions and 119 deletions
--- a/dist.tar
+++ b/dist.tar
--- a/src/store/modules/data.js
+++ b/src/store/modules/data.js
@ -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;
    },
  },
 });
--- a/src/views/components/SiteOptions/index.vue
+++ b/src/views/components/SiteOptions/index.vue
@ -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>
--- a/src/views/dataList/enterprise/index.vue
+++ b/src/views/dataList/enterprise/index.vue
@ -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>仅允许导入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>

@ -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();
--- a/src/views/website/aboutUs/index.vue
+++ b/src/views/website/aboutUs/index.vue
@ -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);
--- a/src/views/website/innovate/navigation/index.vue
+++ b/src/views/website/innovate/navigation/index.vue
@ -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>
--- a/src/views/website/innovate/service/index.vue
+++ b/src/views/website/innovate/service/index.vue
@ -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> -->
--- a/src/views/website/message/index.vue
+++ b/src/views/website/message/index.vue
@ -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([]); // 数据列表
--- a/src/views/website/siteSet/footer/index.vue
+++ b/src/views/website/siteSet/footer/index.vue
@ -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>
--- a/src/views/website/solution/service/index.vue
+++ b/src/views/website/solution/service/index.vue
@ -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;
--- a/src/views/website/solution/serviceCase/index.vue
+++ b/src/views/website/solution/serviceCase/index.vue
@ -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);