alhj-admin/src/views/table/index.vue

<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
      <div class="grid-content bg-purple">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入承兑人名称" v-model="formData.name" @change="Search" clearable style="width: 100%">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <div class="grid-content bg-purple">
        <el-dropdown @command="handleCommand">
          <div class="pulldown">
            <span class="el-dropdown-link" v-if="!Status"> 承兑人状态 </span>
            <span class="el-dropdown-link" v-if="Status">
              {{ Status }}
            </span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="正常">正常</el-dropdown-item>
            <el-dropdown-item command="删除">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="grid-content bg-purple" style="display: flex; justify-content: flex-end">
        <el-button type="success" @click="recovers">恢复</el-button>
        <el-button type="danger" @click="deleteStatuses">删除</el-button>
        <el-button type="primary" @click="dialogVisible2 = true">新增承兑人</el-button>
        <el-button type="primary" @click="batchExports">导出</el-button>
      </div>
    </el-row>

    <!-- 弹窗修改 -->
    <el-dialog title="修改承兑人" :visible.sync="dialogVisible1" width="500px">
      <el-form :model="tableData" label-width="100px">
        <el-form-item label="姓名" prop="tableData.name">
          <el-input v-model="tableData.name" style="width: 100%" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="银行账号" prop="tableData.bankAccount">
          <el-input v-model="tableData.bankAccount" style="width: 100%" placeholder="请输入银行账号(选填)"></el-input>
        </el-form-item>
        <el-form-item label="银行名称" prop="tableData.bankName">
          <el-input v-model="tableData.bankName" style="width: 100%" placeholder="请输入银行名称(选填)"></el-input>
        </el-form-item>
        <el-form-item label="开户行行号" prop="bankName">
          <el-input v-model="tableData.bankNo" style="width: 100%" placeholder="请输入开户行行号(选填)"></el-input>
        </el-form-item>
        <el-form-item label="服务费率" prop="tableData.serviceRate">
          <el-input v-model="tableData.serviceRate" style="width: 100%" placeholder="请输入服务费率"
            onkeyup="value=value.replace(/[^\d.]/g,'')">
            <i slot="suffix" style="font-style: normal; margin-right: 10px">%</i>
          </el-input>
        </el-form-item>
        <el-form-item label="利率" prop="tableData.interest">
          <el-input v-model="tableData.interest" style="width: 100%" placeholder="请输入利率"
            onkeyup="value=value.replace(/[^\d.]/g,'')">
            <i slot="suffix" style="font-style: normal; margin-right: 10px">%</i>
          </el-input>
        </el-form-item>
		<el-form-item label="修改合同模板" >
		  <div style="display: flex; justify-content: start">
		    <div class="imgbox">
		      <FileUpload
		        v-model="tableData.templateServiceContract"
		        accept=".doc, .docx"
		      />
		     <!-- <FileShow
		        :files="form.templateServiceContract"
		      /> -->
		    </div>
		  </div>
		</el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">提交修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹窗新增承兑人 -->
    <el-dialog title="新增承兑人" :visible.sync="dialogVisible2" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="承兑人名称" prop="name">
          <el-input v-model="form.name" style="width: 100%" placeholder="请输入承兑人名称"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="bankAccount">
          <el-input v-model="form.bankAccount" style="width: 100%" placeholder="请输入账号(选填)"></el-input>
        </el-form-item>
        <el-form-item label="开户行名称" prop="bankName">
          <el-input v-model="form.bankName" style="width: 100%" placeholder="请输入开户行名称(选填)"></el-input>
        </el-form-item>
        <el-form-item label="开户行行号" prop="bankName">
          <el-input v-model="form.bankNo" style="width: 100%" placeholder="请输入开户行行号(选填)"></el-input>
        </el-form-item>
        <el-form-item label="服务费率" prop="serviceRate">
          <el-input v-model="form.serviceRate" placeholder="请输入服务费率" style="width: 100%"
            onkeyup="value=value.replace(/[^\d.]/g,'')">
            <i slot="suffix" style="font-style: normal; margin-right: 10px">%</i>
          </el-input>
        </el-form-item>
        <el-form-item label="利率" prop="interest">
          <el-input v-model="form.interest" placeholder="请输入利率" style="width: 100%"
            onkeyup="value=value.replace(/[^\d.]/g,'')">
            <i slot="suffix" style="font-style: normal; margin-right: 10px">%</i>
          </el-input>
        </el-form-item>
		
		<el-form-item label="上传合同模板" >
		  <div style="display: flex; justify-content: start">
		    <div class="imgbox">
		      <FileUpload
		        v-model="form.templateServiceContract"
		        accept=".doc, .docx"
		      />
		     <!-- <FileShow
		        :files="form.templateServiceContract"
		      /> -->
		    </div>
		  </div>
		</el-form-item>
		
        <el-form-item>
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="addAcceptor">确认添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table :row-key="getRowKey" v-loading="listLoading" :data="temporaryList" element-loading-text="Loading" border
      fit ref="multipleTable" highlight-current-row @select="handleSelectionChange" @select-all="handleAll">
      <el-table-column align="center" label="" width="55" type="selection" :reserve-selection="true">
      </el-table-column>
      <el-table-column label="承兑人名称" align="center" prop="name">
      </el-table-column>
      <el-table-column label="账号" align="center" prop="bankAccount">
      </el-table-column>
      <el-table-column align="center" label="开户行名称" prop="bankName">
      </el-table-column>
      <el-table-column align="center" label="开户行行号" prop="bankNo">
      </el-table-column>
	  <el-table-column align="center" label="服务合同模板" >
		   <template slot-scope="scope">
			   <el-tag type="primary" style="cursor: pointer; " @click="download(scope.row.templateServiceContract)">下载
			   </el-tag>
		   </template>
	  </el-table-column>
      <el-table-column align="center" label="服务费率">
        <template slot-scope="scope"> {{ scope.row.serviceRate }}% </template>
      </el-table-column>
      <el-table-column align="center" label="利率" prop="interest">
        <template slot-scope="scope"> {{ scope.row.interest }}% </template>
      </el-table-column>
      <el-table-column align="center" label="承兑人状态" prop="statusText">
      </el-table-column>
      <el-table-column align="center" label="时间" prop="createdAt" width="200">
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="300">
        <template slot-scope="scope">
          <!-- <el-tag type="primary" style="cursor: pointer; margin-right: 15px" @click="toDetail(scope.row.id)">
						详情</el-tag> -->
          <el-tag type="primary" style="cursor: pointer; margin-right: 15px" @click="modify(scope.row.id)">修改
          </el-tag>
          <el-tag type="success" style="cursor: pointer; margin-right: 15px" @click="recover(scope.row.id)"
            v-if="scope.row.status == 1">恢复
          </el-tag>
          <el-tag type="danger" style="cursor: pointer; margin-right: 15px" @click="deleteStatus(scope.row.id)"
            v-if="scope.row.status == 0">删除</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagesip">
      <el-button type="primary" size="small" style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpFirstPage">首页
      </el-button>
      <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next" :total="total"
        :page-size="pagesize" :current-page="currentPage" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
        ref="pagination">
      </el-pagination>
      <el-button type="primary" size="small" style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpLastPage">尾页
      </el-button>
    </div>
  </div>
</template>


<script>
  import {
    dataConversionUtil
  } from "../../utils/Excel.js";
  import {
    getAcceptorSearch
  } from "@/api/acceptor";
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        // 弹窗显示 1修改信息 2新增
        dialogVisible1: false,
        dialogVisible2: false,
        Status: '',
        // 表单数据
        formData: {
          startTime: "",
          endTime: "",
          name: "", // 承兑人名称
          Status: "", // 承兑人状态
        },
        // 新增承兑人数据
        form: {
          name: "",
          bankAccount: "",
          bankNo: "",
          bankName: "",
          serviceRate: "",
          interest: "",
		  templateServiceContract:[],
        },
        // 表单验证
        rules: {
          name: [{
            required: true,
            message: '请输入承兑人名称',
            trigger: 'blur'
          }, ],
          serviceRate: [{
            required: true,
            message: '请输入服务费率',
            trigger: 'blur'
          }],
          interest: [{
            required: true,
            message: '请输入利率',
            trigger: 'blur'
          }]
        },
        // 弹窗修改数据
        tableData: {
          name: "",
          serviceRate: "",
          interest: "",
          bankNo: "",
          bankAccount: "",
          bankName: "",
          id: "",
		  templateServiceContract:[],
        },
        oldTableData: "",
        /* 当前页数 */
        currentPage: 1,
        /* 每页显示个数 */
        pagesize: 10,
        /* 总条数 */
        total: 20,
        srcList: [],
        list: [],
        listLoading: false,
        status: "",
        search: "",
        temporaryList: [],
        multipleSelection: [],
        hpstatus: "",
        checked: false,
        value1: "",
        value2: "",
        exportExcelData1: [], //列表缓存数据
        exportExcelData2: [],
      };
    },
    mounted() {
      this.checked = this.$store.state.user.checked;
      this.getAllList();
    },
    methods: {
      /* 获取列表数据 */
      getAllList(searchForm = {
        Status:5
      }) {
        const params = {
          pageIndex: this.currentPage,
          pageSize: this.pagesize,
        };
        getAcceptorSearch({
          ...params,
          ...searchForm,
        }).then((res) => {
          const {
            data
          } = res;
          console.log(res, "res");
          this.temporaryList = data.result;
          this.srcList = data.result;
          this.total = res.data.total;
        });
      },
      // 新增承兑人
      addAcceptor() {
        if (this.form.bankAccount) {
          if (
            this.form.bankAccount.length < 5 ||
            this.form.bankAccount.length > 20
          ) {
            this.$message({
              type: "error",
              message: "银行账号必须为5~20位!",
            });
          } else {
            this.$request({
              url: "/api/Acceptor",
              method: "post",
              data: this.form,
            }).then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.getAllList();
                this.dialogVisible2 = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          }
        } else {
          this.$request({
            url: "/api/Acceptor",
            method: "post",
            data: this.form,
          }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.getAllList();
              this.dialogVisible2 = false;
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      },
      toDetail(id) {
        this.$router.push({
          path: "table/detail",
          query: {
            id: id,
          },
        });
      },
	  // 下载合同模板
	  download(link){
		  if(link==''){
			  this.$message({
			    type: "error",
			    message: "模板为空",
			  });
		  }else{
			link.forEach(item=>{
				window.open(item)
			})
		  }
	  },
      // 批量恢复
      recovers() {
        let ids = Array.from(this.multipleSelection, ({
          id
        }) => id)
        let status = Array.from(this.multipleSelection, ({
          status
        }) => status)
        if (status.includes(0)) {
          this.$message({
            type: 'error',
            message: '不能恢复已是正常状态的账号'
          })
        } else if (ids == "") {
          this.$message({
            type: 'error',
            message: '请选择数据'
          })
        } else {
          this.$request({
            url: "/api/Acceptor/manager",
            method: "post",
            data: {
              ids: ids,
              operateType: 2,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "恢复成功",
              });
              this.$refs.multipleTable.clearSelection();
              this.multipleSelection = "";
              this.getAllList();
            } else {
              this.$message({
                type: "danger",
                message: "恢复失败",
              });
              this.getAllList();
            }
          });
        }

      },

      recover(id) {
        this.$request({
          url: "/api/Acceptor/manager",
          method: "post",
          data: {
            ids: [id],
            operateType: 2,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "恢复成功",
            });
            this.getAllList();
          } else {
            this.$message({
              type: "danger",
              message: "恢复失败",
            });
            this.getAllList();
          }
        });
      },
      // 批量删除
      deleteStatuses() {
        let ids = Array.from(this.multipleSelection, ({
          id
        }) => id)
        let status = Array.from(this.multipleSelection, ({
          status
        }) => status)
        if (status.includes(1)) {
          this.$message({
            type: 'error',
            message: '不能删除已是删除状态的账号'
          })
        } else if (ids == "") {
          this.$message({
            type: 'error',
            message: '请选择数据'
          })
        } else {
          this.$request({
            url: "/api/Acceptor/manager",
            method: "post",
            data: {
              ids: ids,
              operateType: 1,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.$refs.multipleTable.clearSelection();
              this.multipleSelection = "";
              this.getAllList();
            } else {
              this.$message({
                type: "danger",
                message: "删除失败",
              });
              this.getAllList();
            }
          });
        }

      },
      deleteStatus(id) {
        this.$request({
          url: "/api/Acceptor/manager",
          method: "post",
          data: {
            ids: [id],
            operateType: 1,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getAllList();
          } else {
            this.$message({
              type: "danger",
              message: "删除失败",
            });
            this.getAllList();
          }
        });
      },
      resetForm() {
        this.$refs[form].resetFields();
      },
      modify(id) {
        this.$request({
          url: "/api/Acceptor/" + id,
          method: "get",
        }).then((res) => {
          console.log(res);
          this.tableData = res.data;
          this.tableData.id = id;
          this.oldTableData = {
            ...this.tableData
          };
        });
        this.dialogVisible1 = true;
      },
      // 弹窗修改
      onSubmit() {
        if (
          JSON.stringify(this.oldTableData) === JSON.stringify(this.tableData)
        ) {
          this.$message({
            type: "error",
            message: "数据没有改变!",
          });
        } else if (this.tableData.bankAccount) {
          if (this.tableData.bankAccount.length < 5 ||
            this.tableData.bankAccount.length > 20) {
            this.$message({
              type: "error",
              message: "银行账号必须为5~20位!",
            });
          } else {
            this.$request({
              url: "/api/Acceptor/update",
              method: "post",
              data: this.tableData,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getAllList();
				this.$alert('请确认平台服务合同模板保持更新', '注意', {
				          confirmButtonText: '确定',
								});
              } else {
                this.$message({
                  type: "danger",
                  message: "修改失败!",
                });
              }
            });
            this.dialogVisible1 = false;
          }
        }else{
          this.$request({
            url: "/api/Acceptor/update",
            method: "post",
            data: this.tableData,
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
              this.getAllList();
			  this.$alert('请确认平台服务合同模板保持更新', '注意', {
			            confirmButtonText: '确定',
				});
            } else {
              this.$message({
                type: "danger",
                message: "修改失败!",
              });
            }
          });
          this.dialogVisible1 = false;
        }
      },

      /* 输入承兑人状态查询 */
      handleCommand(command) {
        this.Status = command;
        if (command === "正常") {
          this.formData.Status = 5;
        }
        if (command === "删除") {
          this.formData.Status = 4;
        }
        if (command === "全部") {
          this.formData.Status = "";
        }

        this.currentPage = 1;
        this.searchForm = {
          ...this.formData,
        };
        console.log(this.searchForm)
        this.getAllList(this.searchForm);
      },
      /* 输入承兑人名称查询 */
      Search() {
        this.currentPage = 1;
        this.searchForm = {
          ...this.formData,
        };
        this.getAllList(this.searchForm);
      },

      /* 分页功能，改变当前页 */
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getAllList(this.searchForm);
      },

      /* 分页功能去首页 */
      jumpFirstPage() {
        this.$refs.pagination.handleCurrentChange(1);
        this.$emit("handleCurrentChange", 1);
      },
      /* 分页功能：去尾页 */
      jumpLastPage() {
        let font = this.$refs.pagination;
        let cpage = Math.ceil(font.total / font.pageSize);
        font.handleCurrentChange(cpage);
      },

      getRowKey(row) {
        return row.id;
      },

      /* 批量导出数据 */
      handleSelectionChange(data) {
        this.multipleSelection = data;
        console.log(this.multipleSelection);
      },
      handleAll(data) {
        this.multipleSelection = data;
      },
      /* 导出 */
      batchExports() {
        if (this.multipleSelection == "") {
          this.Exports();
        } else {
          var tableHeader = [
            [
              "序号",
              "承兑人名称",
              "账号",
              "开户行名称",
              "开户行行号",
              "服务费率(%)",
              "利率(%)",
              "状态",
              "时间",
            ],
          ];
          var dataList = [];
          this.multipleSelection.forEach((item, index) => {
            dataList.push([
              index + 1,
              item.name,
              item.bankAccount,
              item.bankName,
              item.bankNo,
              item.serviceRate,
              item.interest,
              item.statusText,
              item.createdAt,
            ]);
          });
          dataConversionUtil.dataToExcel("承兑人列表", tableHeader, dataList);
          this.$message.success("导出成功!");
        }
      },

      /* 全部导出 */
      Exports() {
        const data = {
          pageIndex: "",
          pageSize: -1,
          startTime: "",
          endTime: "",
          name: "",
          contractStatus: "",
          approveStatus: "",
          draftStatus: "",
          supplierId: "",
        };
        getAcceptorSearch({
          ...data
        }).then((res) => {
          const {
            result
          } = res.data;
          this.multipleSelection = result;
          var tableHeader = [
            [
              "序号",
              "承兑人名称",
              "账号",
              "开户行名称",
              "开户行行号",
              "服务费率(%)",
              "利率(%)",
              "状态",
              "时间",
            ],
          ];
          var dataList = [];
          this.multipleSelection.forEach((item, index) => {
            dataList.push([
              index + 1,
              item.name,
              item.bankAccount,
              item.bankName,
              item.bankNo,
              item.serviceRate,
              item.interest,
              item.statusText,
              item.createdAt,
            ]);
          });
          dataConversionUtil.dataToExcel("承兑人列表", tableHeader, dataList);
          this.$message.success("导出成功!");
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .pulldown {
    width: 185px;
    height: 40px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #999999;
  }

  .pagesip {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #d8ab5a;
  }

  .el-col {
    margin-bottom: 20px;
  }
</style>