index.vue

<!-- 可见创意灵感账号 -->
<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="search-wrap">
      <el-form :inline="true" :model="formData" @submit.native.prevent>
        <el-form-item label="查询用户">
          <el-input
            v-model="formData.customerName"
            placeholder="请输入"
            style="width: 220px"
            @change="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作 -->
    <div class="operation-wrap">
      <el-upload
        ref="upload"
        class="upload-wrap"
        :data="uploadOption.data"
        :action="uploadOption.action"
        :accept="uploadOption.accept"
        :headers="uploadOption.headers"
        :limit="uploadOption.limit"
        :show-file-list="uploadOption.showFileList"
        :before-upload="onBeforeUpload"
        :on-success="onSuccess"
        :on-error="onError"
      >
        <el-button type="primary" icon="el-icon-upload"
          >上传
          <el-tooltip
            content="若权限配置处已对客户CAS账号数量进行限制，则仅此处上传的ADS的子账号可使用创意灵感，未上传则均不可用！"
            effect="light"
            placement="top"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-button>
      </el-upload>
      <el-button @click="handleUploadTemplate">获取上传模版</el-button>
    </div>
    <!-- 展示数据 -->
    <el-table border class="seachTable" :data="tableData">
      <el-table-column
        prop="customerName"
        label="客户名称"
        width="320"
      ></el-table-column>
      <el-table-column
        prop="fileName"
        label="可见创意灵感的ADS账号"
        min-width="300"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleDownloadUserConfig(scope.row)">
            {{ scope.row.fileName }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="88" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="pageInfo.total > 0"
      :total="pageInfo.total"
      :page.sync="pageInfo.current"
      :limit.sync="pageInfo.size"
      @pagination="paginationChange"
    />
  </div>
</template>

<script>
// api
import {
  getUserConfigTemplate,
  getUserList,
  delectUserConfigRecord,
} from "@/api/system/creativeInspirationAccount";

import { getToken } from "@/utils/auth";
import { hackDownloadFileNew } from "@/utils/ruoyi";

export default {
  data() {
    return {
      formData: {
        customerName: "",
      },
      uploadOption: {
        data: {
          check: false,
        },
        loading: false,
        action:
          window.location.protocol +
          process.env.VUE_APP_BASE_API +
          "/system/customer/user/config/upload",
        accept: ".xls",
        showFileList: false,
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        limit: 1,
      },
      tableData: [],
      pageInfo: {
        total: 0,
        current: 1,
        size: 10,
      },
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 查询
    handleSearch() {
      this.pageInfo.current = 1;
      this.getTableData();
    },
    // 分页改变
    paginationChange() {
      this.getTableData();
    },
    // 实例调用
    // 获取展示数据
    async getTableData() {
      try {
        let params = this.getParams();
        let res = await getUserList(params);
        this.tableData = res.data.records;
        this.pageInfo.total = res.data.total;
      } catch (error) {
        console.error("获取展示数据", error);
      }
    },
    // 获取上传模版
    async handleUploadTemplate() {
      try {
        let res = await getUserConfigTemplate();
        hackDownloadFileNew(
          res.data,
          "可关联创意灵感的ADS账号列表_" + new Date().getTime()
        );
      } catch (error) {
        console.error("获取模版失败", error);
      }
    },
    // 删除
    async handleDelete(row) {
      this.$confirm(`是否确认删除${row.fileName}吗?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: async (action) => {
          if (action === "confirm") {
            try {
              let params = { ids: [row.id] };
              await delectUserConfigRecord(params);
              this.getTableData();
              this.msgSuccess("删除成功");
            } catch (error) {
              console.error("删除失败", error);
            }
          }
        },
      });
    },
    // 下载已经配置的ads账号
    handleDownloadUserConfig(row) {
      window.open(row.storageAdd, "_self");
    },
    // 上传相关事件
    onBeforeUpload() {
      this.uploadOption.loading = true;
    },
    onSuccess(response) {
      this.uploadOption.loading = false;
      if (response.code === 500) {
        this.$refs["upload"].clearFiles();
        this.msgError(response.message);
        return false;
      }
      this.$refs["upload"].clearFiles();
      this.getTableData();
    },
    onError() {
      this.$refs["upload"].clearFiles();
      this.uploadOption.loading = false;
      this.msgError("导入模版失败,请重试");
    },
    // utils
    getParams() {
      let result = {
        ...this.formData,
        ...this.pageInfo,
      };
      delete result.total;
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
.search-wrap {
  margin-bottom: 20px;
  border-bottom: 1px dashed #e4e4e4;
  .el-button--primary {
    min-width: 80px;
  }
}
.operation-wrap {
  margin-bottom: 20px;
  .upload-wrap {
    display: inline-block;
  }
}
</style>