shenze-sysMan/src/views/taskMessage/proportion/index.vue

<template>
  <!-- 分销申请审批 -->
  <div class="taskMessagePage flex-col">
    <s-header :name="$t('taskMessage.distributionApplicationApproval')" :noback="false"></s-header>
    <div class="taskMessageBox flex-col">
      <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
        :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false" @load="onLoad">
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4 proportionIcon"></div>
              <span class="flex-col txt2">{{ $t('taskMessage.total') }}<span class="discountNumber">{{ alarmHistoryTotal
              }}</span>{{ $t('taskMessage.recordsInTotal') }}</span>
            </div>
          </div>
          <div class="l-flex-RC">
            <div @click="reviewedClk" class="label3 o-mr-10">{{
              $t('taskMessage.toViewAppro')
            }}</div>
            <div @click="noticeClk" class="main5 l-flex-RC">
              <img class="label2 o-mr-5" src="../../../assets/device/searchIcon.png" />
            </div>
          </div>
        </div>
        <div class="listBox">
          <div v-for="(item, index) in alarmHistoryList" :key="index" class="listItem">
            <div class="itemBox">
              <div class="itemRow">
                <span class="itemTitle">{{ $t('taskMessage.equipmentName') }}:&nbsp;</span>
                {{ item.equipmentName != null ? item.equipmentName : item.clientId.slice(-6) }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">{{ $t('taskMessage.equipmentNo') }}:&nbsp;</span>
                {{ item.clientId }}
              </div>
              <!-- 机主的 -->
              <div class="itemRow">
                <span class="itemTitle">{{ $t('taskMessage.owner') }}:&nbsp;</span>
                {{ $t('taskMessage.machineOwner') }}
                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                {{ item.proportion }}%
              </div>
              <!-- 平台的 -->
              <div class="itemRow">
                <span class="itemTitle">{{ $t('taskMessage.platform') }}:&nbsp;</span>
                {{ $t('taskMessage.platformAccount') }}
                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                {{ item.adminProportion }}%
              </div>
              <!-- 分账方的 -->
              <div class="itemRow" v-if="item.type >= 1">
                <span class="itemTitle">{{ $t('taskMessage.partners') }}:&nbsp;</span>
                {{ item.agencyName }}
                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                {{ item.agencyProportion }}%
              </div>
              <!-- 分账方4个 -->
              <div class="itemRow" v-if="item.type >= 2">
                <span class="itemTitle">{{ $t('taskMessage.partners') }}:&nbsp;</span>
                {{ item.merchantName }}
                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                {{ item.merchantProportion }}%
              </div>
              <!-- 分账方5个以上 -->
              <div class="itemRow" v-if="item.type >= 3">
                <span class="itemTitle">{{ $t('taskMessage.partners') }}:&nbsp;</span>
                {{ item.personageNam }}
                <span class="itemTitle discount">{{ $t('taskMessage.proportion') }}:&nbsp;</span>
                {{ item.personageProportion }}%
              </div>
              <div class="itemRow">
                <span class="itemTitle">{{ $t('taskMessage.applicationTime') }}:&nbsp;</span>
                {{ showDateTime(item.createDate) }}
              </div>
              <div class="itemRow" v-if="item.checkType !== '0'">
                <span class="itemTitle">{{ $t('taskMessage.approvalTime') }}:&nbsp;</span>
                {{ showDateTime(item.modifyDate) }}
              </div>
              <div class="itemRow" style="display: flex; justify-content: flex-end"
                v-if="item.checkType === '0' && isOper">
                <van-button span="5" round type="primary" style="
                      height: 2em;
                      padding: 0 1em;
                      margin: 0 0.5em;
                      background: rgb(255 0 0 / 20%);
                      color: #ff0000;
                      border-color: #ff0000;
                    " @click="changeStatusFun(item, 3)">
                  {{ $t('taskMessage.fail') }}
                </van-button>
                <van-button span="5" round type="primary" style="
                      height: 2em;
                      padding: 0 1em;
                      margin: 0 0.5em;
                      background: rgb(25 137 250 / 20%);
                      color: #1989fa;
                    " @click="changeStatusFun(item, 1)">
                  {{ $t('taskMessage.adopt') }}
                </van-button>
              </div>
              <div class="itemRow" style="display: flex; justify-content: flex-end">
                <span v-if="item.checkType === '0' && user.type > 1" style="color: #FFA500"> {{ $t('taskMessage.toBeApproved') }}</span>
                <span v-if="item.checkType === '1'" style="color: #1989fa"> {{ $t('taskMessage.adopt') }}</span>
                <span v-if="item.checkType === '2'" style="color: #ff0033"> {{ $t('taskMessage.cancel') }}</span>
                <span v-if="item.checkType === '3'" style="color: #ff0000"> {{ $t('taskMessage.fail') }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 筛选弹窗 -->
    <kDialog :dialogTitle="$t('taskMessage.equipmentInit.searchPop.title')"
      :confirmBtnTxt="$t('taskMessage.equipmentInit.searchPop.filterBtn')" ref="kDialogRef" @confirmclk="confirmClk">
      <template #content>
        <div class="cust_vantBorder">
          <van-field clearable v-model="searchForm.merchantName" :placeholder="$t('taskMessage.equipmentInit.searchPop.merchantNamePlace')
            " :label="$t('taskMessage.equipmentInit.searchPop.merchantName')" />
          <van-field @click-input="busiInpClk" readonly clearable v-model="searchForm.stateName"
            :placeholder="$t('taskMessage.equipmentInit.searchPop.statePlace')"
            :label="$t('taskMessage.equipmentInit.searchPop.state')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.stateName" @click="searchForm.stateName = ''; searchForm.state = ''"
                  class="o-mr-6" name="clear" />
                <van-icon @click="busiInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
        </div>
      </template>
    </kDialog>
    <!-- 状态选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker :title="$t('taskMessage.equipmentInit.searchPop.statePlace')" :columns="busiPopList"
        :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
    </van-popup>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import {
  getTaskProportionList,
  changeProportionStatus,
} from "@/service/taskMessage";
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";
import kDialog from "@/components/commom/kDialog/index.vue";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader, kDialog },
  setup() {
    const { t } = useI18n();
    // 筛选弹窗
    const busiPopList = reactive([
      {
        name: t('taskMessage.whole'),
        id: "1",
      },
      {
        name: t('taskMessage.unapproved'),
        id: "0",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    const kDialogRef = ref(null);
    const busiPopShow = ref(false);
    // 筛选条件
    const searchForm = reactive({
      merchantName: "",
      state: "",
      stateName: '',
    });
    // 点击状态输入框
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    const busiPopConfirm = ({ selectedOptions }) => {
      busiPopShow.value = false;
      searchForm.state = selectedOptions[0].id;
      searchForm.stateName = selectedOptions[0].name;
    };
    // 点击筛选
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 点击查询按钮
    const confirmClk = () => {
      isClkReview.value = false;
      searchGetList();
    };
    // 是否点击待审核
    const isClkReview = ref(true);
    // 点击查看待审核
    const reviewedClk = () => {
      isClkReview.value = true;
      // 改为未审核状态
      searchParams.type = "0";
      searchGetList();
    };
    const user = getLoginUser();
    const loading = ref(false); // 加载状态
    const error = ref(false); // 错误状态
    const finished = ref(false); // 结束翻页状态
    const alarmHistoryList = ref([]); // 列表集合
    const alarmHistoryTotal = ref(0); // 列表总数
    let searchParams = reactive({
      adminId: "", // 当前登录账户的id
      type: "1", // 审核状态 未审核_0；全部_1
      current: 1, // 当前页
      size: 20, // 页大小
      username: "", // 商家名称
    });
    // 滚动加载
    const onLoad = () => {
      if (!finished.value) {
        searchParams.current = searchParams.current + 1;
        getList();
      }
    };
    // 查询列表
    const searchGetList = () => {
      alarmHistoryList.value = [];
      searchParams.current = 1;
      getList();
    };
    // 获取设备初始化审批列表数据
    const getList = async () => {
      // 把弹窗的筛选条件组合到请求参数里面
      if (!isClkReview.value) {
        searchParams.type = searchForm.state;
      }
      searchParams.userName = searchForm.merchantName;
      const { data } = await getTaskProportionList(
        Object.assign({}, searchParams)
      );
      if (data.code === "00000") {
        // 列表值叠加
        alarmHistoryList.value = alarmHistoryList.value.concat(
          data.data.records
        );
        alarmHistoryTotal.value = data.data.total;
        if (alarmHistoryList.value.length === data.data.total) {
          finished.value = true;
        }
        loading.value = false;
        console.log(alarmHistoryList);
      } else {
        showFailToast(data.message);
      }
    };
    // 是否有操作的权限
    const isOper = ref(true);
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('taskMessage');
      if (user) {
        searchParams.adminId = user.id;
        searchGetList();
        // 如果是type大于1，那么不能有操作的权限
        if (user.type > 1) {
          isOper.value = false;
        }
      }
    });
    const showDateTime = (date) => {
      return date
        ? dateUtil.formateDate(new Date(date), "yyyy/MM/dd hh:mm:ss")
        : "";
    };
    const changeStatusFun = async (item, type) => {
      const { data } = await changeProportionStatus({
        id: item.id,
        type: type,
      });
      if (data.code === "00000") {
        showFailToast("操作成功");
        searchGetList();
      } else {
        showFailToast(data.message);
      }
      console.log(data);
    };
    return {
      loading,
      error,
      finished,
      onLoad,
      alarmHistoryList,
      alarmHistoryTotal,
      showDateTime,
      changeStatusFun,
      kDialogRef,
      noticeClk,
      confirmClk,
      busiInpClk,
      busiPopConfirm,
      busiPopShow,
      searchForm,
      busiPopList,
      busiPopFieldName,
      reviewedClk,
      isOper,
      user,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../../common/style/common.less";
</style>