ShibeiWorkPlatform_Frontend/src/views/modules/communityService/sqzzz/index.vue

<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="fmData"
        class="demo-form-inline"
      >
        <el-form-item label="组织名称" prop="organizationName">
          <el-input
            v-model="fmData.organizationName"
            class="resi-cell-input"
            size="small"
            clearable
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="fmData.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="fmData.remark"
            class="resi-cell-input"
            size="small"
            clearable
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="diy-button--search"
            size="small"
            @click="handleSearch"
            >查询</el-button
          >
          <el-button
            class="diy-button--reset"
            size="small"
            @click="resetForm('searchForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-button class="diy-button--add" size="small" @click="handleAdd"
          >新增</el-button
        >
        <el-button
          class="diy-button--export"
          size="small"
          @click="handleExportModule('room')"
          >下载模板</el-button
        >
        <el-upload
          ref="upload"
          class="upload-btn"
          action="uploadUlr"
          :limit="1"
          :accept="'.xls,.xlsx'"
          :with-credentials="true"
          :show-file-list="false"
          :auto-upload="true"
          :on-progress="handleProgress"
          :on-success="handleExcelSuccess"
          :before-upload="beforeExcelUpload"
          :http-request="uploadHttpRequest"
        >
          <el-button
            size="small"
            class="diy-button--delete"
            :loading="importLoading"
            >{{ importBtnTitle }}</el-button
          >
        </el-upload>

        <el-button @click="handleChu" class="diy-button--reset" size="small"
          >导出</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="resi-table"
        :height="maxTableHeight"
      >
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column
          prop="organizationName"
          label="组织名称"
          align="center"
        >
          <template slot-scope="scope">
            <a class="name-a" @click="handleWatch(scope.$index)">
              {{ scope.row.organizationName }}
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryName"
          align="center"
          label="分类名称"
        >
        </el-table-column>
        <el-table-column
          prop="organizationPersonCount"
          align="center"
          label="组织人数"
        >
        </el-table-column>
        <el-table-column
          prop="serviceItem"
          label="服务事项"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="score" width="100" align="center" label="积分">
        </el-table-column>
        <el-table-column prop="principalName" align="center" label="负责人">
        </el-table-column>
        <el-table-column prop="principalPhone" align="center" label="联系电话">
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注">
        </el-table-column>
        <el-table-column
          prop="organizationCreatedTime"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="160">
          <template slot-scope="scope">
            <!-- <el-button
              @click="handleWatch(scope.$index)"
              type="text"
              size="small"
              >查看</el-button
            > -->
            <el-button
              type="text"
              class="div-table-button--detail"
              size="small"
              @click="handleScore(scope.row)"
              >积分记录</el-button
            >

            <el-button
              @click="handleEdit(scope.$index)"
              type="text"
              size="small"
              class="div-table-button--edit"
              >修改</el-button
            >

            <el-popconfirm
              title="删除之后无法回复，确认删除？"
              @onConfirm="handleDel(scope.row, scope.$index)"
              @confirm="handleDel(scope.row, scope.$index)"
            >
              <el-button
                slot="reference"
                type="text"
                size="small"
                class="div-table-button--delete"
                style="margin-left: 10px"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="parseInt(pageSize)"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="formShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="formTitle"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="handleClose"
    >
      <edit-form
        ref="eleEditForm"
        @dialogCancle="handleClose"
        @dialogOk="handleEditSuccess"
      ></edit-form>
    </el-dialog>

    <!-- 积分记录 -->
    <el-dialog
      :visible.sync="scoreDiaShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="scoreDiaTitle"
      width="70%"
      top="5vh"
      @closed="diaClose"
    >
      <score-record
        ref="ref_score"
        :serviceType="'community_org'"
      ></score-record>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import editForm from "./cpts/edit";
import axios from "axios";
import scoreRecord from "../../../components/scoreRecord.vue";

export default {
  components: { editForm, scoreRecord },
  data() {
    return {
      openSearch: false,

      formShow: false,
      formTitle: "组织信息",

      pageNo: 1,
      pageSize: window.localStorage.getItem("pageSize") || 20,
      total: 1,

      tableData: [],

      fmData: {
        organizationName: "",
        remark: "",
        startTime: "",
        endTime: "",
        createTime: ["", ""],
      },

      importBtnTitle: "导入",
      importLoading: false,

      //积分记录
      scoreDiaTitle: "积分记录",
      scoreDiaShow: false,
    };
  },
  computed: {
    maxTableHeight() {
      return this.$store.state.inIframe
        ? this.clientHeight - 360 + this.iframeHeigh
        : this.clientHeight - 360;
    },
    ...mapGetters(["clientHeight", "iframeHeight"]),
  },
  watch: {
    "fmData.createTime": function (val) {
      if (Array.isArray(val) && val.length == 2) {
        this.fmData.startTime = val[0];
        this.fmData.endTime = val[1];
      } else {
        this.fmData.startTime = "";
        this.fmData.endTime = "";
      }
    },
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    async handleExportModule() {
      let url = "/heart/iccommunityselforganization/import-template-download";

      let params = {};
      await this.$http({
        method: "POST",
        url,
        responseType: "blob",
        data: params,
      })
        .then((res) => {
          // this.download(res.data, title + '.xls')
          if (res.headers["content-disposition"]) {
            let fileName = window.decodeURI(
              res.headers["content-disposition"].split(";")[1].split("=")[1]
            );
            console.log("filename", fileName);
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            var url = window.URL.createObjectURL(blob);
            var aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = url;
            aLink.setAttribute("download", fileName);
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          } else this.$message.error("下载失败");
        })
        .catch((err) => {
          console.log("err", err);
          return this.$message.error("网络错误");
        });
    },
    // 上传大图标成功
    handleExcelSuccess(res, file) {
      if (res.code === 0 && res.msg === "success") {
        console.log("resss---ppp", res);
      } else {
        this.$message.error(res.msg);
      }
    },
    handleProgress(event, file, fileList) {
      console.log("percentage", file.percentage);
    },

    beforeExcelUpload(file) {
      console.log("file", file);
      const isType = file.type === "application/vnd.ms-excel";
      const isTypeComputer =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const fileType = isType || isTypeComputer;
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!fileType) {
        this.$message.error("上传文件只能是xls/xlsx格式！");
      }

      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return fileType && isLt1M;
    },
    async uploadHttpRequest(file) {
      this.importLoading = true;
      this.importBtnTitle = "正在上传中...";
      this.$message({
        showClose: true,
        message: "导入中，请到系统管理-导入记录中查看进度",
        duration: 0,
      });
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append("file", file.file); //添加文件对象
      await this.$http
        .post(
          "/heart/iccommunityselforganization/importcommunityselforganization",
          formData
        )
        .then((res) => {
          console.log("res-up", res);
          if (res.data.code == 0 && res.data.msg == "success") {
            // this.$message.success('导入成功')
            this.getTableData();
          } else this.$message.error(res.data.msg);
        })
        .catch((err) => {
          console.log("失败", err);
          file.onError(); //上传失败的文件会从文件列表中删除
          // this.$message.error('导入失败')
        });
      // axios({
      //   url:
      //     window.SITE_CONFIG["apiURL"] +
      //     "/heart/iccommunityselforganization/importcommunityselforganization",
      //   method: "post",
      //   data: formData,
      //   // responseType: "blob",
      // })
      //   .then((res) => {
      //     this.importLoading = false;
      //     this.importBtnTitle = "导入";
      //     console.log("resresresresresresres", res);

      //     this.getTableData();
      //     if (res.data.code == 0) {
      //       return this.$message.success(res.data.data || "导入成功");
      //     } else {
      //       return this.$message.error(res.data.msg);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log("失败", err);
      //   });
      this.importLoading = false;
      this.importBtnTitle = "导入";
      this.$refs.upload.clearFiles();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getTableData();
    },

    handleClose() {
      this.formShow = false;
    },
    handleSearch(val) {
      console.log(this.fmData);
      this.pageNo = 1;
      this.getTableData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.handleSearch();
    },
    async handleAdd() {
      this.formShow = true;
      await nextTick();
      console.log(this.$refs);
      this.$refs.eleEditForm.initForm("add");
    },

    async handleChu() {
      const url =
        "/heart/iccommunityselforganization/exportcommunityselforganization";
      const { pageSize, pageNo, fmData } = this;
      axios({
        url: window.SITE_CONFIG["apiURL"] + url,
        method: "post",
        data: {
          pageSize,
          pageNo,
          ...fmData,
        },
        responseType: "blob",
      })
        .then((res) => {
          let fileName = window.decodeURI(
            res.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          console.log("filename", fileName);
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          var url = window.URL.createObjectURL(blob);
          var aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", fileName);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        })
        .catch((err) => {
          console.log("获取导出情失败", err);
          return this.$message.error("网络错误");
        });
    },

    async handleWatch(rowIndex) {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm("detail", this.tableData[rowIndex]);
    },

    async handleEdit(rowIndex) {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm("edit", this.tableData[rowIndex]);
    },
    handleEditSuccess() {
      this.handleClose();
      this.getTableData();
    },

    async handleDel(rowData, rowIndex) {
      console.log(rowData, rowIndex);
      const url =
        "/heart/iccommunityselforganization/delcommunityselforganization";
      const { tableData } = this;

      const { data, code, msg } = await requestPost(url, {
        orgId: tableData[rowIndex].orgId,
      });

      if (code === 0) {
        this.$message.success("删除成功！");
        this.getTableData();
      } else {
        this.$message.success("操作失败！");
      }
    },

    async getTableData() {
      const url =
        "/heart/iccommunityselforganization/communityselforganizationlist";
      const { pageSize, pageNo, fmData } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...fmData,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.total = data.total || 0;
        this.tableData = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },

    //积分记录
    handleScore(row) {
      this.scoreDiaShow = true;
      this.$nextTick(() => {
        this.$refs.ref_score.initForm(row.orgId);
      });
    },

    diaClose() {
      this.scoreDiaShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
}
.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}
</style>