vue-insagent-pc/src/views/DistributionManage/PartnerManagement/UpgradeDowngradeRecord.vue

<!-- 模板区域 -->
<template>
  <div class="">
    <!-- 模板内容 -->
    <el-tabs v-model="pageRequest.auditStatus" @tab-click="handleClick">
      <el-tab-pane :label="`待审核 (${pendingReview})`" name="0"></el-tab-pane>
      <el-tab-pane :label="`审核通过(${isApproved})`" name="1"></el-tab-pane>
      <el-tab-pane :label="`审核不通过(${isNotApproved})`" name="2"></el-tab-pane>
    </el-tabs>
    <div class="p-2">
      <el-form :model="pageRequest" size="small" label-width="85px">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="pageRequest.name" placeholder="输入姓名查找"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input v-model="pageRequest.mobile" placeholder="输入手机号查找"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号">
              <el-input v-model="pageRequest.userId" placeholder="输入工号查找"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型">
              <el-select v-model="pageRequest.type">
                <el-option label="全部" value=" "></el-option>
                <el-option label="升级" value="0"></el-option>
                <el-option label="降级" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请时间">
              <el-date-picker v-model="pageRequest.applyTime" type="daterange" value-format="yyyy-MM-dd"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button size="small" type="primary" @click="findPage">查询</el-button>
              <el-button size="small" type="default" @click="resetFrom">重置</el-button>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <templateTable ref="commonTable" :tableHeights="520" :operationWidth="200" :showOperation="true"
        :showBatchDelete="false" :data="Result" :columns="Columns" @findPage="findPage">
        <template slot="buttonSlot" slot-scope="{ row }" v-if="pageRequest.auditStatus == '0'">
          <el-button v-if="row.type == '0'" type="text" size="small" @click="isOperationPassed(row)">
            通过
          </el-button>
          <el-button v-if="row.type == '0'" type="text" size="small" @click="denyOperation(row)">
            拒绝
          </el-button>
          <el-button v-if="row.type == '1'" type="text" size="small" @click="unlockLevel(row)">
            解锁等级
          </el-button>
        </template>
      </templateTable>
    </div>
    <el-dialog title="驳回原因" :visible.sync="OperationVisible" width="25%">
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="rejectReason" maxlength="200" show-word-limit>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="OperationVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="OperationVisiblesubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="升级审核" :visible.sync="upgradeReviewVisible" width="30%">
      <el-form label-position="right" size="small" label-width="180px" :model="upgradeReviewInfo" style="width: 450px;">
        <el-form-item label="升级前">
          <el-input disabled v-model="upgradeReviewInfo.originalLevel"></el-input>
        </el-form-item>
        <el-form-item label="升级后">
          <el-input disabled v-model="upgradeReviewInfo.afterChange"></el-input>
        </el-form-item>
        <el-form-item v-if="auditCommissionshow" :label="`升级后${upgradeReviewInfo.originalLevel}佣金比例`">
          <el-input v-model="upgradeReviewInfo.auditCommission">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="upgradeReviewVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="upgradeReviewsubmit">审核通过</el-button>
      </span>
    </el-dialog>
    <el-dialog title="解锁等级" :visible.sync="unlockLevelVisible" width="30%">
      <el-form label-position="right" size="small" label-width="100px" :model="unlockLevelInfo" style="width: 450px;">
        <el-form-item label="支付金额">
          <el-input disabled v-model="unlockLevelInfo.paymentAmount">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="收款凭证">
          <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="credentialupload"
            :file-list="imgList" :limit="1">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="unlockLevelVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmUnlock">确定解锁</el-button>
      </span>
    </el-dialog>
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[imgList[0].url]" />
  </div>
</template>

<!-- 行为区域 -->
<script>
import templateTable from "../components/templateTable.vue";
export default {
  components: {
    templateTable,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  // 数据存放区域
  data() {
    return {
      showViewer: false,//大图预览开关
      imgList: [//默认回显图片
      ],
      auditCommissionshow:true,
      upgradeReviewInfo: {
        originalLevel: "",//原等级
        afterChange: "",//变更后等级
        auditCommission: "",//比例
      },//升级审核表单
      unlockLevelInfo: {
        paymentAmount: "",//支付金额
        fileId: '',//图片id
        recordId: "",//数据id
      },//解锁等级表单
      userGradeList: [],//等级列表
      id: "",//数据id
      rejectReason: "",//驳回原因
      OperationVisible: false,//拒绝弹窗
      upgradeReviewVisible: false,//升级审核弹窗
      unlockLevelVisible: false,//解锁等级弹窗
      pendingReview: 0,//待审核条数
      isApproved: 0,//已审核条数
      isNotApproved: 0,//审核不通过条数
      pageRequest: {
        //检索信息
        pageNum: 1,
        pageSize: 20,
        name: "",//姓名
        mobile: "",//手机号
        userId: "",//工号
        type: "",//类型
        applyTime: [],//申请时间
        auditStatus: '0',
      },
      //表头信息
      Columns: [
        { prop: "name", label: "姓名", minWidth: 180, },
        { prop: "mobile", label: "手机号", minWidth: 160 },
        { prop: "userId", label: "工号", minWidth: 120 },
        { prop: "deptName", label: "所属机构", minWidth: 160 },
        { prop: "type", label: "类型", minWidth: 160, formatter: this.typeFormatter },
        { prop: "originalLevel", label: "原等级", minWidth: 160, formatter: this.originalLevelFormatter },
        { prop: "afterChange", label: "变更后等级", minWidth: 160, formatter: this.afterChangeFormatter },
        { prop: "conditions", label: "升级条件", minWidth: 160, formatter: this.conditionsFormatter },
        { prop: "rules", label: "考核规则", minWidth: 160, formatter: this.rulesFormatter },
        { prop: "rejectReason", label: "驳回原因", minWidth: 160 },
        { prop: "createTime", label: "申请时间", minWidth: 160 },
      ],
      Result: [],//表格数据
    }
  },
  // 生命周期函数
  created() {
    this.userGradeQuery();
  },
  // 方法函数
  methods: {
    // 解锁等级
    confirmUnlock() {
      this.$api.retail.confirmUnlocking(this.unlockLevelInfo).then((res) => {
        if (res.code == '200') {
          this.$message({
            type: 'success',
            message: res.msg,
          });
          this.unlockLevelVisible = false;
          this.findPage();

        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    // 凭证上传
    credentialupload(file) {
      const params = new FormData(); // 声明formData数据类型
      params.append("multipartFile", file.raw);
      params.append("type", "image");
      this.$api.letter.uploadFile(params).then((res) => {
        if (res.code == '200') {
          this.unlockLevelInfo.fileId = res.data.id;
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
      this.imgList.push({ url: file.url });
    },
    //删除图片
    handleRemove(file) {
      this.imgList.map((ele, index) => {
        if (ele.uid === file.uid) {
          this.imgList.splice(index, 1);
        }
        return ele;
      });
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.showViewer = true;
    },
    // 关闭大图查看器
    closeViewer() {
      this.showViewer = false;
    },
    //获取人员等级列表
    userGradeQuery() {
      this.$api.retail.queryGradeNamerule().then((res) => {
        if (res.code == '200') {
          this.userGradeList = res.data;
        } else {
        }
      });
    },
    typeFormatter(row, column) {
      let type = row.type;
      if (type == '0') {
        return '升级';
      } else {
        return '降级';
      }
    },
    originalLevelFormatter(row, column) {

      let originalLevel = row.originalLevel;
      let info = this.userGradeList.find(val => val.grade == originalLevel)
      return info.gradeName
    },
    afterChangeFormatter(row, column) {
      let afterChange = row.afterChange;
      let info = this.userGradeList.find(val => val.grade == afterChange)
      return info.gradeName
    },
    conditionsFormatter(row, column) {
      return (
        <el-popover placement="bottom" width="200" trigger="click">
          <div domPropsInnerHTML={row.conditions}></div>
          <span slot="reference" style="cursor: pointer">查看规则</span>
        </el-popover>
      );
    },
    rulesFormatter(row, column) {
      return (
        <el-popover placement="bottom" width="200" trigger="click">
          <div domPropsInnerHTML={row.rules}></div>
          <span slot="reference" style="cursor: pointer">查看规则</span>
        </el-popover>
      );
    },
    //重置表单
    resetFrom() {
      this.pageRequest = {
        pageNum: 1,
        pageSize: 20,
        name: "",//姓名
        mobile: "",//手机号
        userId: "",//工号
        type: "",//类型
        applyTime: [],//申请时间
        auditStatus: '0',
        upgradeType:'',//升降级标识
      }
    },
    handleClick(tab, event) {
      this.pageRequest.auditStatus = tab.name;
      this.findPage();
    },
    //升级审核
    isOperationPassed(row) {
      console.log(row)
      if(row.afterChange==row.originalLevel){
        this.auditCommissionshow=false;
      }
      this.id = row.id;
      this.upgradeType=row.upgradeType;
      this.upgradeReviewVisible = true;
      this.upgradeReviewInfo.originalLevel = this.userGradeList.find(val => val.grade == row.originalLevel).gradeName;
      this.upgradeReviewInfo.afterChange = this.userGradeList.find(val => val.grade == row.afterChange).gradeName;

    },
    //升级审核
    upgradeReviewsubmit() {
      this.$api.retail[this.upgradeType=='1'?'liftingRecorddowngradeAudit':'liftingRecordaudit']({
        id: this.id,
        auditStatus: "1",
        auditCommission: this.upgradeReviewInfo.auditCommission,
      }).then((res) => {
        if (res.code == '200') {
          this.$message({
            type: 'success',
            message: res.msg,
          });
          this.upgradeReviewVisible = false;
          this.findPage();
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    //拒绝操作
    denyOperation(row) {
      this.OperationVisible = true;
      this.id = row.id;
    },
    //解锁等级
    unlockLevel(row) {
      this.$api.retail.unlockLevel(row.originalLevel).then((res) => {
        if (res.code == '200') {
          this.unlockLevelInfo.recordId = row.id;
          this.unlockLevelInfo.paymentAmount = res.data;
          this.unlockLevelVisible = true;
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },

    OperationVisiblesubmit() {
      this.$api.retail[this.upgradeType=='1'?'liftingRecorddowngradeAudit':'liftingRecordaudit']({
        id: this.id,
        auditStatus: "2",
        rejectReason: this.rejectReason,
      }).then((res) => {
        if (res.code == '200') {
          this.$message({
            type: 'success',
            message: res.msg,
          });
          this.OperationVisible = false;
          this.findPage();
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    findPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      } else {
        this.pageRequest.pageNum = 1;
        this.pageRequest.pageSize = 20;
      }
      this.$api.retail
        .liftingRecordPage({ ...this.pageRequest })
        .then((res) => {
          //
          this.Result = {
            content: res.data.records,
            pageNum: res.data.current,
            pageSize: res.data.size,
            totalSize: res.data.total,
          };
          res.data.groupCount.map(val => {
            switch (val.auditStatus) {
              case 0:
                this.pendingReview = val.count
                break;
              case 1:
                this.isApproved = val.count
                break;
              case 2:
                this.isNotApproved = val.count
                break;
              default:
            }
            return val;
          })

        });
    },
  },
  // 计算属性
  computed: {

  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
/deep/ .el-form {
  .el-input {
    width: 100% !important;
  }

  .el-select {
    width: 100% !important;
  }

  .el-date-editor--daterange {
    width: 100% !important;

  }
}

.width {
  width: 200px;
}
</style>