alhj-admin/src/views/form/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" style="margin-left: 30px">
					<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 ref="form" :model="tableData" label-width="80px">
				<el-form-item label="姓名" prop="tableData.name">
					<el-input v-model="tableData.name" style="width: 100%"></el-input>
				</el-form-item>
				<el-form-item label="银行账号" prop="tableData.bankAccount">
					<el-input v-model="tableData.bankAccount" style="width: 100%"></el-input>
				</el-form-item>
				<el-form-item label="银行名称" prop="tableData.bankName">
					<el-input v-model="tableData.bankName" style="width: 100%"></el-input>
				</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" label-width="100px">
				<el-form-item label="出票人名称" style="width: 100%" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="银行账号" style="width: 100%" prop="bankAccount">
					<el-input v-model="form.bankAccount"></el-input>
				</el-form-item>
				<el-form-item label="开户行名称" style="width: 100%" prop="bankName">
					<el-input v-model="form.bankName"></el-input>
				</el-form-item>
				<el-form-item style="display: flex">
					<el-button @click="dialogVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="addTicketdrawer">确认添加</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
      highlight-current-row
      @select="handleSelectionChange"
      @select-all="handleAll"
    >
      <el-table-column
        align="center"
        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" prop="bankName" label="开户行名称">
      </el-table-column>
      <el-table-column align="center" prop="statusText" label="出票人状态">
      </el-table-column>
      <el-table-column align="center" prop="createdAt" label="时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <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 { getDrawerSearch } from "@/api/drawer";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      // 弹窗显示
      dialogVisible1: false,
      dialogVisible2: false,
      // 表单数据
      formData: {
        startTime: "",
        endTime: "",
        name: "", // 出票人
        status: "", // 出票人状态
      },
      // 新增出票人数据
      form: {
        name: "",
        bankAccount: "",
        bankName: "",
      },
      oldTableData: "",
      // 修改出票人数据
      tableData: {
        name: "",
        bankAccount: "",
        bankName: "",
        id: "",
        createdAt: "",
        status: "",
        statusText: "",
      },
      /* 当前页数 */
      currentPage: 1,
      /* 每页显示个数 */
      pagesize: 10,
      /* 总条数 */
      total: 20,
      multipleSelection: [],
      srcList: [],
      list: [],
      temporaryList: [],
      listLoading: false,
      status: "",
      hpstatus: "",
      search: "",
      checked: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      exportExcelData1: [], //列表缓存数据
      exportExcelData2: [],
    };
  },


		mounted() {
			this.checked = this.$store.state.user.checked;
			this.getAllList();
		},
		methods: {
			/* 获取列表数据 */
			getAllList(searchForm = {}) {
				const params = {
					pageIndex: this.currentPage,
					pageSize: this.pagesize,
				};
				getDrawerSearch({
					...params,
					...searchForm,
				}).then((res) => {
					const {
						data
					} = res;
					this.temporaryList = data.result;
					this.srcList = data.result;
					this.total = res.data.total;
				});
			},

			addTicketdrawer() {
				this.$router.push({
					path: "/form/addTicketdrawer",
				});
			},
			todetail(id) {
				console.log(id);
				this.$router.push({
					path: "/form/detail",
					query: {
						id: id,
					},
				});
			},
			// 批量恢复
			recovers() {
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				let status=Array.from(this.multipleSelection,({status})=>status)
				console.log(status.includes('0'),"ss")
				if(!status.includes('0')){
					this.$message({
						type:'error',
						message:'不能恢复已是正常状态的账号'
					})
				}else{
					this.$request({
						url: "/api/Drawer/manager",
						method: "post",
						data: {
							ids: ids,
							operateType: 2,
						},
					}).then((res) => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: "恢复成功",
							});
							this.getAllList();
						} else {
							this.$message({
								type: "danger",
								message: "恢复失败",
							});
							this.getAllList();
						}
					});
				}
				
			},
			recover(id) {
				this.$request({
					url: "/api/Drawer/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)
				console.log(status)
				if(!status.includes('0')){
					this.$message({
						type:'error',
						message:'不能删除已是删除状态的账号'
					})
				}else{
					this.$request({
						url: "/api/Drawer/manager",
						method: "post",
						data: {
							ids: ids,
							operateType: 1,
						},
					}).then((res) => {
						if (res.code == 200) {
					this.$message({
								type: "success",
								message: "删除成功",
							});
							this.getAllList();
						} else {
							this.$message({
								type: "danger",
								message: "删除失败",
							});
							this.getAllList();
						}
					});
				}
				
			},
			deletestatus(id) {
				this.$request({
					url: "/api/Drawer/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();
					}
				});
			},


			// 修改信息弹窗
			modify(id) {
				this.dialogVisible1 = true;
				this.$request({
					url: "/api/Drawer/" + id,
					method: "get",
				}).then((res) => {
					this.tableData = res.data;
					this.oldTableData = {
						...this.tableData
					}

				});
			},
			// 修改信息弹窗提交
			onSubmit() {
				if (JSON.stringify(this.oldTableData) === JSON.stringify(this.tableData)) {
					this.$message({
						type: 'error',
						message: '数据没有改变!'
					})
				}else if (this.tableData.bankAccount.length < 5 || this.tableData.bankAccount > 20) {
					this.$message({
						type: 'error',
						message: '银行账号必须为5~20位!'
					})
				} else {
					this.$request({
						url: "/api/Drawer/update",
						method: "post",
						data: this.tableData,
					}).then((res) => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: "修改成功!",
							});
							this.getAllList();
							this.dialogVisible1 = false;
						} else {
							this.$message({
								type: "danger",
								message: "修改失败!",
							});
						}
					});
				}


			},
			// 新增出票人弹窗
			addTicketdrawer() {
				if (this.form.bankAccount.length < 5 || this.form.bankAccount > 20) {
					this.$message({
						type: 'error',
						message: '银行账号必须为5~20位!'
					})
				} else {
					this.$request({
						url: "/api/Drawer",
						method: "post",
						data: this.form,
					}).then((res) => {
						if (res.code === 200) {
							this.$message("添加成功!");
							this.getAllList();
							this.dialogVisible2 = false;
						} else {
							this.$message("提交失败");
						}
					});
				}

			},

			/* 输入出票人状态查询 */
			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,
				};
				this.getAllList(this.searchForm);
			},
			/* 输入出票人名称查询 */
			Search() {
				this.currentPage = 1;
				this.searchForm = {
					...this.formData,
				};
				this.getAllList(this.searchForm);
			},


    getRowKey(row) {
      return row.id;
    },
    /* 批量导出数据 */
    handleSelectionChange(data) {
      this.multipleSelection = data;
    },
    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.statusText,
            item.createdAt,
          ]);
        });
        dataConversionUtil.dataToExcel("出票人列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }
    },
    /* 全部导出承兑人列表数据 */
    getContacts() {
      const data = {
        pageIndex: "",
        pageSize: -1,
        startTime: "",
        endTime: "",
        name: "",
        status: "",
      };
      getDrawerSearch({ ...data }).then((res) => {
        const { result } = res.data;
        this.multipleSelection = result;
      });
    },

    /* 全部导出 */
    Exports() {
      this.getContacts();
      setTimeout(() => {
        var tableHeader = [
          ["序号", "出票人名称", "账号", "开户行名称", "状态", "时间"],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.name,
            item.bankAccount,
            item.bankName,
            item.statusText,
            item.createdAt,
          ]);
        });
        dataConversionUtil.dataToExcel("出票人列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }, 1000);
    },
  },
};

</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%;
		margin: 20px auto;
		display: flex;
		// align-items: center;
		justify-content: flex-end;
	}

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

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