tenant-Platform/src/views/partnerManagement/upgradeDowngradeRecord.vue

<!-- 模板区域 -->
<template>
  <div>
    <PageMain class="vh100 flex-1 overflow-hidden flex flex-col">
      <el-tabs v-model="activeTab" @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-tab-pane :label="`待解锁(${toBeUnlocked})`" name="3" ></el-tab-pane>
        <el-tab-pane :label="`已解锁(${unlocked})`" name="4" ></el-tab-pane>
      </el-tabs>
      <SearchForm :fields="fields" :formInline="formInline" :onSearch="findpage" :onReset="resetForm" />
      <div class="flex-1 overflow-auto">
        <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="250"
                      :showOperation="['0', '3'].includes(activeTab)"  :showSelect="false" :pageInfo="pageInfo"
          @getList="getList">
          <!-- 自定义操作插槽 -->
          <template v-slot:operation="scope">
            <el-button v-if="scope.operationData.type == '0'" type="primary" link
              @click="isOperationPassed(scope.operationData)">通过</el-button>
            <el-button v-if="scope.operationData.type == '0'" type="primary" link
              @click="denyOperation(scope.operationData)">拒绝</el-button>
            <el-button v-if="scope.operationData.type == '1'" type="primary" link
              @click="unlockLevel(scope.operationData)">解锁等级</el-button>
          </template>
          <!-- 自定义插槽 -->
          <template #customSlot="{ bodyCell: { scope, column } }">
            <template v-if="column.prop == 'conditions'">
              <el-popover placement="bottom" :width="250" trigger="click">
                <template #default>
                  <div v-html="scope.row.conditions"></div>
                </template>
                <template #reference>
                  <el-button link type="primary">查看规则</el-button>
                </template>
              </el-popover>
            </template>
            <template v-if="column.prop == 'rules'">
              <el-popover placement="bottom" :width="250" trigger="click">
                <template #default>
                  <div v-html="scope.row.rules"></div>
                </template>
                <template #reference>
                  <el-button link type="primary">查看规则</el-button>
                </template>
              </el-popover>
            </template>
          </template>
          <!-- 自定义表头插槽 -->
          <template v-slot:search="scope">
            {{ scope.slotData.label }}
          </template>
        </ComplexTable>

      </div>
    </PageMain>
    <el-dialog :close-on-click-modal="false" v-model="upgradeReviewVisible" title="升级审核" width="400">
      <el-form :model="upgradeReviewInfo" label-width="180px" label-position="top">
        <el-form-item label="升级前">
          <el-input disabled v-model="upgradeReviewInfo.originalLevel" />
        </el-form-item>
        <el-form-item label="升级后">
          <el-input disabled v-model="upgradeReviewInfo.afterChange" />
        </el-form-item>
        <el-form-item :label="`升级后${upgradeReviewInfo.originalLevel}佣金比例`" v-if="auditCommissionshow">
          <el-input v-model="upgradeReviewInfo.auditCommission">
            <template #append>%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="upgradeReviewVisible = false">取消</el-button>
          <el-button type="primary" @click="upgradeReviewsubmit">
            审核通过
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="OperationVisible" title="驳回原因" width="400">
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="rejectReason" maxlength="200" show-word-limit>
      </el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="OperationVisible = false">取消</el-button>
          <el-button type="primary" @click="OperationVisiblesubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="unlockLevelVisible" title="解锁等级" width="500">
      <el-form :model="unlockLevelInfo" label-width="180px" label-position="top">
        <el-form-item label="支付金额">
          <el-input v-model="unlockLevelInfo.paymentAmount" readonly>
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="收款凭证">
          <el-upload v-model:file-list="fileList" :limit="1" :auto-upload="false" @change="handleChange"
            list-type="picture-card">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="unlockLevelVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUnlock">
            确定解锁
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadUserFile } from 'element-plus'
import api from '@/api'
// 页面加载时获取机构列表
onBeforeMount(() => {
  getGradeOptions();
  findpage();
});
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
// 机构树相关变量
const id = ref("");//选中的id
const pendingReview = ref(0);//待审核条数
const isApproved = ref(0);//已审核条数
const isNotApproved = ref(0);//审核不通过条数
const toBeUnlocked = ref(0);//待解锁
const unlocked = ref(0);//已解锁
const upgradeReviewVisible = ref(false);//升级审核弹窗是否显示
const OperationVisible = ref(false);//拒绝操作弹窗是否显示
const auditCommissionshow = ref(true);//是否显示佣金比例
const unlockLevelVisible = ref(false);//解锁等级弹窗是否显示
const upgradeType = ref("");//升级类型
const rejectReason = ref("");//拒绝原因
const fileList = ref<UploadUserFile[]>([

])

const upgradeReviewInfo = reactive({
  originalLevel: "",//原等级
  afterChange: "",//变更后等级
  auditCommission: "",//比例
});//升级审核表单
const unlockLevelInfo = reactive({
  paymentAmount: 0,//支付金额
  fileId: '',//图片id
  recordId: "",//数据id
});
const tableData = ref([
]);//表格数据
const formInline = reactive({
  name: "",//姓名
  mobile: "",//手机号
  userId: "",//工号
  applyTimes: [],//申请时间
  auditStatus: '0',
  type: '0'
})
const activeTab = ref('0')
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});
const typeOptions = ref([
  {
    label: '全部',
    value: ' '
  },
  {
    label: '升级',
    value: '0'
  }, {
    label: '降级',
    value: '1'
  },
])
//表格字段数据
const fields = ref([
  { label: "姓名", model: "name", type: "input", placeholder: "请输入姓名" },
  {
    label: "手机号", model: "mobile", type: "input", placeholder: "请输入手机号"
  },
  {
    label: "工号", model: "userId", type: "input", placeholder: "请输入工号"
  },
  {
    label: "类型", model: "type", type: "select", placeholder: "选择类型", options: typeOptions.value
  },
  {
    label: "申请时间", model: "applyTimes", type: "date", dateType: "daterange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD", valueFormat: "YYYY-MM-DD",
  },
]);
const columns = [
  { prop: "name", label: "姓名", },
  { prop: "mobile", label: "手机号", width: '200' },
  { prop: "userId", label: "工号", width: '200' },
  { prop: "deptName", label: "所属机构", width: '200' },
  {
    prop: "type", label: "类型", width: '200',
    formatter: (row: any) => {
      if (row.type === '0') {
        return '升级';
      } else if (row.type === '1') {
        return '降级';
      } else {
        return '未知类型';
      }
    }
  },
  {
    prop: "originalLevel", label: "原等级", width: '200',
    formatter: (row: any) => {
      return userGradeList.value?.find((item: any) => item.grade == row.originalLevel)?.gradeName || '未知等级';
    }
  },
  {
    prop: "afterChange", label: "变更后等级", width: '200',
    formatter: (row: any) => {
      return userGradeList.value?.find((item: any) => item.grade == row.afterChange)?.gradeName || '未知等级';
    }
  },
  {
    prop: "conditions", label: "升级条件", width: '200', component: "customSlot",
  },
  { prop: "rules", label: "考核规则", width: '200', component: "customSlot", },
  { prop: "rejectReason", label: "驳回原因", width: '200' },
  { prop: "createTime", label: "申请时间", width: '200' },
];
// 通过
const isOperationPassed = (item: any) => {
  console.log(item)
  if (item.afterChange == item.originalLevel) {
    auditCommissionshow.value = false;
  }
  id.value = item.id;
  upgradeType.value = item.upgradeType;
  upgradeReviewVisible.value = true;
  upgradeReviewInfo.originalLevel = userGradeList.value.find(val => val.grade == item.originalLevel).gradeName;
  upgradeReviewInfo.afterChange = userGradeList.value.find(val => val.grade == item.afterChange).gradeName;
}
// 拒绝操作
const denyOperation = (item: any) => {
  OperationVisible.value = true;
  id.value = item.id;
}
// 解锁等级
const unlockLevel = (item: any) => {
  api.partnerApi.unlockLevels(item.originalLevel).then((res: any) => {
    if (res.code == '200') {
      unlockLevelInfo.recordId = item.id;
      // 使用JavaScript原生方法计算
      if (item.frozenAmount) {
        // 先将数值转换为字符串处理，避免浮点精度问题
        const frozenAmount = Number(item.frozenAmount);
        const rate = Number(res.data);
        // 计算并保留适当的小数位数
        unlockLevelInfo.paymentAmount = Number((frozenAmount * rate / 100).toFixed(2));
      } else {
        unlockLevelInfo.paymentAmount = 0;
      }
      unlockLevelVisible.value = true;
    } else {
      ElMessage.error(res.msg)
    }
  });
}
// 升级审核提交
const upgradeReviewsubmit = () => {
  api.partnerApi[upgradeType.value == '1' ? 'liftingRecorddowngradeAudit' : 'liftingRecordaudit']({
    id: id.value,
    auditStatus: "1",
    auditCommission: upgradeReviewInfo.auditCommission,
  }).then((res: any) => {
    if (res.code == '200') {
      ElMessage.success(res.msg)
      upgradeReviewVisible.value = false;
      findpage();
    } else {
      ElMessage.error(res.msg)
    }
  });
}
const OperationVisiblesubmit = () => {
  api.partnerApi[upgradeType.value == '1' ? 'liftingRecorddowngradeAudit' : 'liftingRecordaudit']({
    id: id.value,
    auditStatus: "2",
    rejectReason: rejectReason.value,
  }).then((res: any) => {
    if (res.code == '200') {
      ElMessage.success(res.msg)
      OperationVisible.value = false;
      findpage();
    } else {
      ElMessage.error(res.msg)
    }
  });
}
// 解锁等级
const confirmUnlock = () => {
  api.partnerApi.confirmUnlocking(unlockLevelInfo).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
      });
      unlockLevelVisible.value = false;
      findpage();
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      });
    }
  });
}
// 处理文件上传
const handleChange = (file: any, FileList: any) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  api.commonApi.fileUpload(params).then((res: any) => {
    if (res.code == '200') {
      unlockLevelInfo.fileId = res.data.id;
    } else {
      ElMessage.error(res.msg)
    }
  });
};
// 处理点击事件
const handleClick = (tab: any) => {
  activeTab.value = tab.props.name;
  findpage();
};
//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};
const resetForm = () => {
  Object.assign(formInline, {
    name: "",//姓名
    mobile: "",//手机号
    userId: "",//工号
    type: "",//类型
    applyTimes: [],//申请时间
    auditStatus: formInline.auditStatus,
  })
  findpage();
}
//数据查询
function findpage() {
  const currentTab = activeTab.value;
  let queryAuditStatus = currentTab;
  let queryType: string;
  if (currentTab === '3' || currentTab === '4') {
    queryType = '1';
    queryAuditStatus = currentTab === '4' ? '3' : '0';
  } else {
    queryType = '0';
  }
  api.partnerApi.liftingRecordQueryPage({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline, type: queryType, auditStatus: queryAuditStatus }).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
      const groupArr = res.data.groupCount || [];
      // 待审核：auditStatus = 0
      pendingReview.value = groupArr.find(item => item.auditStatus === '00')?.count || 0;
      // 已审核：auditStatus = 1
      isApproved.value = groupArr.find(item => item.auditStatus === '01')?.count || 0;
      // 审核不通过：auditStatus = 2
      isNotApproved.value = groupArr.find(item => item.auditStatus === '02')?.count || 0;
      // 待解锁：
      toBeUnlocked.value = groupArr.find(item => item.auditStatus === '10')?.count || 0;
      // 已解锁
      unlocked.value = groupArr.find(item => item.auditStatus === '13')?.count || 0;
    }
  }).catch((err) => {
    console.error('分页查询失败：', err)
  })
}
// 获取人员等级列表
const userGradeList = ref()
const getGradeOptions = () => {
  api.partnerApi.queryGradeName().then((res: any) => {
    if (res.code === 200) {
      userGradeList.value = res.data;
    }
  })
}

</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

:deep(.el-dropdown-link) {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-left: 15px;
}
</style>