jingNing_H5_Mobile/src/pages/administrativeService/leaveManagement/index.vue

<script setup >
import {ref} from 'vue';
import {userInfo} from '~/store/user';
const {uo_type,user_id,uo_id} = userInfo
import {queryApi,editApi,org_users} from './apiItem';

import { showNotify,showToast } from 'vant';
const router = useRouter();

const isBureau = ref(false) // 当前用户是否局端
isBureau.value = uo_type === '1'
/***************************请假管理*******************************************/

//外出管理-返回
const onclickBack = () => history.back();

const tabActive = ref(0);

const applyType = ref();
const applyTypeOption = ref([
  { text: '请假类型', value: '' },
  { text: '事假', value: 1 },
  { text: '病假', value: 2 },
  { text: '婚假', value: 3 },
  { text: '丧假', value: 4 },
  { text: '产假', value: 5 },
  { text: '年休假', value: 6},
  { text: '调休', value: 7 },
  { text: '其他', value: 8 },
]);
const applyReason = ref();

//select请求
const dropItemChange = (fromA) => {
  if (fromA == "qjlx") {
  console.log(fromA);
  } else {
    console.log('44');
  }
  onLoad();
}
//头部确定按钮
const onConfirm = (markLabel) => {
  onLoad();
}

const onClickTab = () => {
  applyType.value = "";
  applyReason.value = "";
  onLoad();
 }

const tableList = ref([])
const loading = ref(false)
const finished = ref(false)

const onLoad = () => {
  let transObjs = {
    page: 1,
    limit:20,
    xxq_qjlx: applyType.value,
    xxq_qjsy: applyReason.value
  }
  queryApi(transObjs)
    .then(res => {
      if (res.code == "1") {
        tableList.value = res.data.page_data;
        if (tableList.value.length >= res.data.total_rows) {
          finished.value = true;
        }
        loading.value = false;
        showToast(res.msg);
      }
  })
  .catch(error => {
    console.log(error)
  })
};

//跳转
const linkTo = () => {
  router.push({
    path: "/administrativeService/leaveManagement/add",
    // query: { xsxk_id },
  });
}

const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};

/***************************请假审批*******************************************/
const applyPerson = ref();

const userLIST = ref([]);
//获取用户列表
const getUserList=()=> {
  let transObjs = {
    dept_id: uo_id,
    page: 1,
    limit: 99999,
  };
  org_users(transObjs).then((res) => {
    if (res.code == 1) {
      let tempArr = [];
      res.data.page_data.forEach(item => {
        tempArr.push({
          text: item.user_realname,
          value:item.user_id,
        })
      })
      userLIST.value = tempArr;
    }
  });
}
getUserList();

const dialogCheckVisible = ref(false);
const currentXxqId = ref();
const handleCheckDialog = (item) => {
  if (user_id == item.xxq_spr_user_id) {
    currentXxqId.value = item.xxq_id;
    dialogCheckVisible.value = true;
  } else {
    showNotify({ type: 'warning', message: '此条申请，您无法审核~' });
    return
  }
}

const checkedValue = ref('2');
const checkSubmitForm = () => {
  let transParams = { xxq_zt: checkedValue.value }
  editApi(currentXxqId.value, transParams)
  .then(res => {
    if (res.code == 1) {
      dialogCheckVisible.value = false;
      showNotify({ type: 'success', message: res.msg });
      onLoad();
    }
  })
  .catch(error => {
    console.log(error);
  })

}

//上拉刷新
const onRefresh = () => {
  onLoad();
};


</script>

<template>
<div class="leaveMag">
  <div v-show="isBureau">
    <div style="width: 100%;text-align: center;"><span style="font-size: 20px;">本功能仅对校端用户开放</span></div>
  </div>
  <div class="index" v-show="!isBureau">
    <van-nav-bar title="请假管理" left-text="返回" left-arrow @click-left="onclickBack"/>

    <van-tabs v-model:active="tabActive" @click-tab="onClickTab">
      <van-tab title="请假管理">

        <van-dropdown-menu>
          <van-dropdown-item v-model="applyType" title="请假类型" :options="applyTypeOption"  @change="dropItemChange('qjlx')" />
          <van-dropdown-item  title="请假事由">
            <van-cell-group inset>
              <van-field v-model="applyReason" placeholder="请输入请假事由" />
            </van-cell-group>
            <div style="padding: 5px 16px;">
              <van-button type="primary" block round @click="onConfirm('qjgl')">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>

        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item,index ) in tableList" :key="index" :title="item.xxq_spr" >
              <template #title>
                <div>申请时间：{{ item.xxq_sqsj }}</div>
                <div>请假人：{{ item.xxq_qjr }}</div>
              </template>
              <template #label>
                <div>开始时间：{{ item.xxq_kssj }}</div>
                <div>结束时间：{{ item.xxq_jssj }}</div>
                <div>请假时长（天）：{{ item.xxq_qjsc }}</div>
                <div>状态：
                  <span :class="item.xxq_zt_option_k == '1' ? 'greenText' : (item.xxq_zt_option_k == '3' ? 'redText' : '')" >{{ item.xxq_zt }}</span>
                </div>
              </template>

            </van-cell>
          </van-list>
        </van-pull-refresh>
        <van-submit-bar button-type="primary"  button-text="请假申请" @submit="linkTo()" />


      </van-tab>
      <van-tab title="请假审批">
        <van-dropdown-menu>
          <van-dropdown-item v-model="applyType" title="请假类型" :options="applyTypeOption"  @change="dropItemChange('qjsp')" />
          <van-dropdown-item v-model="applyPerson" title="申请人" :options="userLIST" @change="dropItemChange('qjsp')" />
          <van-dropdown-item  title="请假事由">
            <van-cell-group inset>
              <van-field v-model="applyReason" placeholder="请输入请假事由" />
            </van-cell-group>
            <div style="padding: 5px 16px;">
              <van-button type="primary" block round @click="onConfirm('qjsp')">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>

        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item,index) in tableList" :key="index" :title="item.xxq_spr" >
              <template #title>
                <div>申请时间：{{ item.xxq_sqsj }}</div>
                <div>请假人：{{ item.xxq_qjr }}</div>
              </template>
              <template #label>
                <div>开始时间：{{ item.xxq_kssj }}</div>
                <div>结束时间：{{ item.xxq_jssj }}</div>
                <div>请假时长（天）：{{ item.xxq_qjsc }}</div>
                <div>请假事由：{{ item.xxq_qjsy }}</div>

              </template>

              <template #right-icon>
                <van-button type="primary" size="small" v-if="item.xxq_zt_option_k == 1" @click="handleCheckDialog(item)">审核</van-button>
                <van-button type="text" disabled v-else>已审核</van-button>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>

        <!-- 请假审批弹出框 -->
          <van-popup v-model:show="dialogCheckVisible" round position="bottom" :style="{ height: '15%' }">
            <div>
              <van-form @submit="checkSubmitForm">
                <van-field label="审核结果：" name="radio"  >
                  <template #input>
                    <van-radio-group v-model="checkedValue" direction="horizontal">
                      <van-radio name="2">同意</van-radio>
                      <van-radio name="3">不同意</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <div style="margin: 16px;">
                  <van-button round block type="primary" native-type="submit">提交</van-button>
                </div>
              </van-form>
            </div>

          </van-popup>

      </van-tab>
    </van-tabs>


  </div>
</div>
</template>

<style lang="scss" scoped>
.greenText{
  color: green;
}
.redText{
  color: red;
}
</style>