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

<template>
  <div class="app-container">
    <el-row type="flex" justify="space-around" style="margin-bottom: 20px">
      <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 class="grid-content bg-purple">
        <el-dropdown @command="AhandleCommand">
          <div class="pulldown">
            <span v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
            <span v-if="Auditstatus" class="el-dropdown-link">
              {{ Auditstatus }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </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">
        <el-dropdown @command="handleCommand">
          <div class="pulldown">
            <span v-if="!providerStatus" class="el-dropdown-link">
              供应商状态
            </span>
            <span v-if="providerStatus" class="el-dropdown-link">
              {{ providerStatus }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </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">
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="startEndTime"
          />
        </div>
      </div>
    </el-row>
    <el-table
      :row-key="getRowKey"
      v-loading="listLoading"
      :data="temporaryList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      @select-all="handleAll"
    >
      <el-table-column type="selection" :reserve-selection="true"> </el-table-column>
      <el-table-column
        label="供应商名称"
        align="center"
        prop="name"
        width="200"
      >
      </el-table-column>
      <el-table-column
        label="统一社会信用代码"
        width="200"
        align="center"
        prop="socialCode"
      >
      </el-table-column>
      <el-table-column label="账号" width="150" align="center" prop="account">
      </el-table-column>
      <el-table-column
        label="法人姓名"
        width="180"
        align="center"
        prop="legalPerson"
      >
      </el-table-column>
      <el-table-column
        label="联系人"
        width="180"
        align="center"
        prop="contacts"
      >
      </el-table-column>

			<el-table-column label="联系电话" width="180" align="center" prop="contactsMobile">
			</el-table-column>
			<el-table-column label="审核状态" align="center" prop="statusText">
			</el-table-column>
			<el-table-column label="供应商状态" align="center" prop="isDeletedText" width="120">
			</el-table-column>
			<el-table-column align="center" prop="createdAt" label="时间" width="180">
			</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="toedit(scope.row.id)">详情
					</el-tag>
					<el-tag type="success" style="margin-right: 15px; cursor: pointer" @click="Srecover(scope.row.id)"
						v-if="scope.row.isDeleted == 1">恢复</el-tag>
					<el-tag type="danger" style="margin-right: 15px; cursor: pointer" @click="Sdeleted(scope.row.id)"
						v-if="scope.row.isDeleted == 0">删除</el-tag>
					<el-tag type="primary" style="margin-right: 15px; cursor: pointer" @click="reset(scope.row.id)"
						v-permission="['admin']">重置密码</el-tag>
				</template>
			</el-table-column>
		</el-table>

		<!-- 重置密码弹窗 -->
		<el-dialog title="重置密码" :visible.sync="dialogVisible" width="30%">
			<el-form ref="form" :model="password" label-width="80px">
				<el-form-item label="登录密码" prop="password.newpassword">
					<el-input v-model="password.newpassword" style="width: 300px" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="password.ConfirmnewPassword">
					<el-input v-model="password.ConfirmnewPassword" style="width: 300px" show-password></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="onSubmit">提交修改</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div style="display: flex; justify-content: space-between">
			<el-row type="flex" justify="end">
				<div class="btn" style="display: flex; justify-content: flex-end">
					<el-button type="primary" @click="failed">认证失败</el-button>
					<el-button type="primary" @click="success">认证成功</el-button>
					<el-button type="primary" @click="batchExports">导出</el-button>
					<el-button type="success" @click="recover">恢复</el-button>
					<el-button type="danger" @click="deleted">删除</el-button>
				</div>
			</el-row>
			<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>
	</div>
</template>

<script>
	import {
		dataConversionUtil
	} from "../../utils/Excel.js";
	import {
		getSupplierSearch
	} from "@/api/supplier";

	export default {
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: "success",
					draft: "gray",
					deleted: "danger",
				};
				return statusMap[status];
			},
		},
		data() {
			return {
				//重置密码
				password: {
					newpassword: "",
					ConfirmnewPassword: "",
					supplierId: "",
				},
				// 控制弹窗
				dialogVisible: false,
				// 表单数据
				formData: {
					startTime: "",
					endTime: "",
					name: "",
					status: "",
					socialCode: "",
					legalPerson: "",
					isDeleted: "",
				},
				/* 当前页数 */
				currentPage: 1,
				/* 每页显示个数 */
				pagesize: 10,
				/* 总条数 */
				total: 20,
				srcList: [],
				list: [],
				temporaryList: [],
				listLoading: false,
				providerStatus: "",
				search: "",
				Auditstatus: "",
				multipleSelection: [],
				checked: false,
				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,
				};
				getSupplierSearch({
					...params,
					...searchForm
				}).then((res) => {
					const {
						data
					} = res;
					this.temporaryList = data.result;
					this.srcList = data.result;
					this.total = res.data.total;
				});
			},

			toedit(id) {
				this.$router.push({
					path: "/edit",
					query: {
						id: id,
					},
				});
			},

			// 日期审核状态查询
			startEndTime(item) {
				if (item == null) {
					item = [];
					this.formData.startTime = "";
					this.formData.endTime = "";
					this.currentPage = 1;
					this.searchForm = {
						...this.formData
					};
					this.getAllList(this.searchForm);
				} else {
					this.formData.startTime = this.value2[0];
					this.formData.endTime = this.value2[1];
					this.currentPage = 1;
					this.searchForm = {
						...this.formData
					};
					this.getAllList(this.searchForm);
				}
			},
			/* 审核状态查询 */
			handleCommand(command) {
				this.providerStatus = command;
				if (command === "全部") {
					this.formData.isDeleted = "";
				}
				if (command === "正常") {
					this.formData.isDeleted = 0;
				}
				if (command === "删除") {
					this.formData.isDeleted = 1;
				}
				this.currentPage = 1;
				this.searchForm = {
					...this.formData
				};
				this.getAllList(this.searchForm);
			},

			// 输入供应商状态查询
			AhandleCommand(command) {
				this.Auditstatus = command;
				if (command === "全部") {
					this.formData.status = "";
				}
				if (command === "已认证") {
					this.formData.status = 2;
				}
				if (command === "未认证") {
					this.formData.status = 1;
				}
				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
				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.socialCode,
							item.account,
							item.legalPerson,
							item.contacts,
							item.contactsMobile,
							item.statusText,
							item.createdAt,
						]);
					});
					dataConversionUtil.dataToExcel("供应商列表", tableHeader, dataList);
					this.$message.success("导出成功!");
				}
			},

			/* 全部导出承兑人列表数据 */
			getContacts() {
				const data = {
					pageIndex: "",
					pageSize: -1,
					startTime: "",
					endTime: "",
					name: "",
					status: "",
					socialCode: "",
					legalPerson: "",
					isDeleted: "",
				};
				getSupplierSearch({
					...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.socialCode,
							item.account,
							item.legalPerson,
							item.contacts,
							item.contactsMobile,
							item.statusText,
							item.createdAt,
						]);
					});
					dataConversionUtil.dataToExcel("供应商列表", tableHeader, dataList);
					this.$message.success("导出成功!");
				}, 1000);
			},

			success() {
				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/Supplier/manage",
						method: "post",
						data: {
							ids: ids,
							operateType: 3,
						},
					}).then((res) => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: res.msg,
							});
							this.$refs.multipleTable.clearSelection();
							this.getAllList();
						} else {
							this.$message({
								type: "danger",
								message: res.msg,
							});
							this.getAllList();
						}
					});
				}
				
			},
			failed() {
				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/Supplier/manage",
						method: "post",
						data: {
							ids: ids,
							operateType: 4,
						},
					}).then((res) => {
						if (res.code == 200) {
				  	this.$message({
								type: "success",
								message: res.msg,
							});
							this.$refs.multipleTable.clearSelection();
							this.getAllList();
						} else {
							this.$message({
				 			type: "danger",
								message: res.msg,
							});
							this.getAllList();
						}
					});
				}

			},
			recover() {
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id);
				let status = Array.from(this.multipleSelection, ({
					isDeleted
				}) => isDeleted)
				if (status.includes(0)) {
					this.$message({
						type: 'error',
						message: '不能恢复已是正常状态的账号'
					})
		}	else if (ids == "") {
					this.$message({
						type: 'error',
						message: '请选择数据'
					})
				} else {
					this.$request({
						url: "/api/Supplier/manage",
						method: "post",
						data: {
							ids: ids,
							operateType: 2,
						},
					}).then((res) => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: res.msg,
							});
							this.$refs.multipleTable.clearSelection();
							this.getAllList();
						} else {
							this.$message({
								type: "danger",
								message: res.msg,
							});
							this.getAllList();
						}
					});
				}

			},
			Srecover(id) {
				this.$request({
					url: "/api/Supplier/manage",
					method: "post",
					data: {
						ids: [id],
						operateType: 2,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: res.msg,
						});
						this.getAllList();
					} else {
						this.$message({
							type: "danger",
							message: res.msg,
						});
						this.getAllList();
					}
				});
			},
			deleted() {
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id);
				let status = Array.from(this.multipleSelection, ({
					isDeleted
				}) => isDeleted)
				if (status.includes(1)) {
					this.$message({
						type: 'error',
						message: '不能删除已是删除状态的账号'
					})
				} else if (ids == "") {
					this.$message({
						type: 'error',
						message: '请选择数据'
					})
				} else {
					this.$request({
						url: "/api/Supplier/manage",
						method: "post",
						data: {
							ids: ids,
							operateType: 1,
						},
					}).then((res) => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: res.msg,
							});
							this.$refs.multipleTable.clearSelection();
							this.getAllList();
						} else {
							this.$message({
								type: "danger",
								message: res.msg,
							});
							this.getAllList();
						}
					});
				}

			},
			Sdeleted(id) {
				this.$request({
					url: "/api/Supplier/manage",
					method: "post",
					data: {
						ids: [id],
						operateType: 1,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: res.msg,
						});
						this.getAllList();
					} else {
						this.$message({
							type: "danger",
							message: res.msg,
						});
						this.getAllList();
					}
				});
			},
			reset(id) {
				this.dialogVisible = true;
				this.password.supplierId = id;
			},
			// 提交修改密码
			onSubmit() {
				if (this.password.newpassword !== this.password.ConfirmnewPassword) {
					this.$message({
						type: "error",
						message: "密码与确认密码不一致",
					});
				} else if (
					this.password.newpassword.length < 6 ||
					this.password.ConfirmnewPassword < 6
				) {
					this.$message({
						type: "error",
						message: "密码与确认密码至少6位",
					});
				} else {
					this.$request({
						url: "/api/Account/password/resetSupplier",
						method: "post",
						data: {
							password: this.password.newpassword,
							supplierId: this.password.supplierId,
						},
					}).then((res) => {
						console.log(res);
						if (res.code === 200) {
							this.$message({
								type: "success",
								message: "重置成功",
							});
							this.dialogVisible = false;
						}
					});
				}
			},
		},
	};
</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;
	}

	.btn {
		padding: 20px;
	}
</style>