|
|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="审核状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择审核状态" clearable size="small">
|
|
|
+ <el-option label="待审核" value="0" />
|
|
|
+ <el-option label="通过" value="1" />
|
|
|
+ <el-option label="拒绝" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="applyList">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="ID" align="center" prop="id" />
|
|
|
+ <el-table-column label="原归属销售" align="center" prop="fromName" />
|
|
|
+ <el-table-column label="申请归属销售" align="center" prop="toName" />
|
|
|
+ <el-table-column label="审核状态" align="center" prop="status">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
|
|
|
+ <el-tag v-if="scope.row.status === 1" type="success">通过</el-tag>
|
|
|
+ <el-tag v-if="scope.row.status === 2" type="danger">拒绝</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="申请人" align="center" prop="applyBy" />
|
|
|
+ <el-table-column label="申请时间" align="center" prop="applyTime"/>
|
|
|
+ <el-table-column label="审核人" align="center" prop="auditBy" />
|
|
|
+ <el-table-column label="审核时间" align="center" prop="auditTime" />
|
|
|
+ <el-table-column label="拒绝原因" align="center" prop="reason" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.status === 0"
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleAudit(scope.row)"
|
|
|
+ v-hasPermi="['company:apply:audit']"
|
|
|
+ >审核</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDetails(scope.row)"
|
|
|
+ v-hasPermi="['company:apply:query']"
|
|
|
+ >详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 详情对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="申请详情"
|
|
|
+ :visible.sync="detailsVisible"
|
|
|
+ width="50%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ custom-class="apply-details-dialog"
|
|
|
+ >
|
|
|
+ <!-- 申请基本信息 -->
|
|
|
+ <div class="details-header">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">原归属销售：</span>
|
|
|
+ <span class="value">{{ selectedApply.fromName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">申请归属销售：</span>
|
|
|
+ <span class="value">{{ selectedApply.toName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">申请时间：</span>
|
|
|
+ <span class="value">{{ selectedApply.applyTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">审核状态：</span>
|
|
|
+ <el-tag :type="selectedApply.status === 0 ? 'warning' : selectedApply.status === 1 ? 'success' : 'danger'">
|
|
|
+ {{ selectedApply.status === 0 ? '待审核' : selectedApply.status === 1 ? '通过' : '拒绝' }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 用户列表 -->
|
|
|
+ <div class="details-content">
|
|
|
+ <div class="content-title">变更用户列表</div>
|
|
|
+ <el-table
|
|
|
+ :data="selectedUsers"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
|
|
|
+ >
|
|
|
+ <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部操作区 -->
|
|
|
+ <div class="details-footer">
|
|
|
+ <el-button @click="detailsVisible = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 审核对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="审核申请"
|
|
|
+ :visible.sync="auditVisible"
|
|
|
+ width="40%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ custom-class="audit-dialog"
|
|
|
+ >
|
|
|
+ <!-- 审核表单 -->
|
|
|
+ <el-form ref="auditForm" :model="auditForm" :rules="auditRules" label-width="100px">
|
|
|
+ <el-form-item label="原归属销售" prop="fromName">
|
|
|
+ <span>{{ auditForm.fromName }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="申请归属销售" prop="toName">
|
|
|
+ <span>{{ auditForm.toName }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="审核结果" prop="status">
|
|
|
+ <el-radio-group v-model="auditForm.status">
|
|
|
+ <el-radio :label="1">通过</el-radio>
|
|
|
+ <el-radio :label="2">拒绝</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="拒绝原因"
|
|
|
+ prop="reason"
|
|
|
+ v-if="auditForm.status === 2"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="auditForm.reason"
|
|
|
+ placeholder="请输入拒绝原因"
|
|
|
+ :rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 底部操作区 -->
|
|
|
+ <div class="audit-footer">
|
|
|
+ <el-button @click="auditVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitAudit" :loading="submitLoading">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listApply, getApply, auditApply } from "@/api/company/companyApply";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Apply",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 更换会员归属申请表格数据
|
|
|
+ applyList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: null
|
|
|
+ },
|
|
|
+ // 详情对话框
|
|
|
+ detailsVisible: false,
|
|
|
+ // 选中的用户
|
|
|
+ selectedUsers: [],
|
|
|
+ // 选中的申请
|
|
|
+ selectedApply: {},
|
|
|
+ // 审核对话框
|
|
|
+ auditVisible: false,
|
|
|
+ // 提交加载状态
|
|
|
+ submitLoading: false,
|
|
|
+ // 审核表单
|
|
|
+ auditForm: {
|
|
|
+ id: undefined,
|
|
|
+ status: 1,
|
|
|
+ reason: ''
|
|
|
+ },
|
|
|
+ // 审核表单校验规则
|
|
|
+ auditRules: {
|
|
|
+ status: [
|
|
|
+ { required: true, message: "请选择审核结果", trigger: "change" }
|
|
|
+ ],
|
|
|
+ reason: [
|
|
|
+ { required: true, message: "请输入拒绝原因", trigger: "blur" }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询更换会员归属申请列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listApply(this.queryParams).then(response => {
|
|
|
+ this.applyList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 详情按钮操作 */
|
|
|
+ handleDetails(row) {
|
|
|
+ this.detailsVisible = true;
|
|
|
+ this.selectedApply = row;
|
|
|
+ getApply(row.id).then(response => {
|
|
|
+ this.selectedUsers = response.data.users;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 审核按钮操作 */
|
|
|
+ handleAudit(row) {
|
|
|
+ this.auditVisible = true;
|
|
|
+ this.auditForm = {
|
|
|
+ id: row.id,
|
|
|
+ fromName: row.fromName,
|
|
|
+ toName: row.toName,
|
|
|
+ status: 1,
|
|
|
+ reason: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /** 提交审核 */
|
|
|
+ submitAudit() {
|
|
|
+ this.$refs["auditForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ // 如果选择通过，不需要填写原因
|
|
|
+ if (this.auditForm.status === 1) {
|
|
|
+ this.auditForm.reason = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.submitLoading = true;
|
|
|
+ auditApply(this.auditForm).then(response => {
|
|
|
+ this.msgSuccess("审核成功");
|
|
|
+ this.auditVisible = false;
|
|
|
+ this.getList();
|
|
|
+ }).catch(error => {
|
|
|
+ this.msgError("审核失败：" + error);
|
|
|
+ }).finally(() => {
|
|
|
+ this.submitLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* 详情弹窗样式 */
|
|
|
+.apply-details-dialog {
|
|
|
+ ::v-deep .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部信息样式 */
|
|
|
+ .details-header {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ width: 50%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 内容区域样式 */
|
|
|
+ .details-content {
|
|
|
+ .content-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #303133;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 3px solid #409EFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部样式 */
|
|
|
+ .details-footer {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: right;
|
|
|
+ padding-top: 15px;
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格样式优化 */
|
|
|
+::v-deep .el-table {
|
|
|
+ .el-table__header-wrapper {
|
|
|
+ th {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__body-wrapper {
|
|
|
+ tr:hover > td {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 审核弹窗样式 */
|
|
|
+.audit-dialog {
|
|
|
+ ::v-deep .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 表单样式 */
|
|
|
+ .el-form {
|
|
|
+ padding: 20px 0;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部样式 */
|
|
|
+ .audit-footer {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: right;
|
|
|
+ padding-top: 15px;
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
