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" ref="multipleTable">
			<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)
				if (status.includes(0)) {
					this.$message({
						type: 'error',
						message: '不能恢复已是正常状态的账号'
					})
				} else if(ids==""){
					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.$refs.multipleTable.clearSelection();
							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)
				if (status.includes(1)) {
					this.$message({
						type: 'error',
						message: '不能删除已是删除状态的账号'
					})
				} else if(ids==""){
					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.$refs.multipleTable.clearSelection();
							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);
    },

	/* 分页功能，改变当前页 */
    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;
			},
	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>