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

<script setup>
import { ref } from "vue";
import { userInfo } from "~/store/user";
const {uo_type,user_id,uo_id,user_realname} = 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 onClickLeft = () => history.back();
const tabActive = ref(0);

const applyPerson = ref();
//头部确定按钮
const onConfirm = (markLabel) => {
  onLoad();
}

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

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

const onLoad = () => {
  let transObjs = {
    page: 1,
    limit:20,
    xxw_qjr:applyPerson.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 onRefresh = () => {
  onLoad();
};
//跳转
const linkTo = () => {
  router.push({
    path: "/administrativeService/outManagement/add",
    // query: { xsxk_id },
  });
}

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


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 currentXxwId = ref();
const handleCheckDialog = (item) => {
  currentXxwId.value = item.xxw_id;
  if (user_realname == item.xxw_spr) {
    currentXxwId.value = item.xxw_id;
    dialogCheckVisible.value = true;
  } else {
    showNotify({ type: 'warning', message: '此条申请，您无法审核~' });
    return
  }
}

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

}


</script>

<template>
  <div class="outMag">
    <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="onClickLeft"/> -->
      <van-tabs v-model:active="tabActive" @click-tab="onClickTab">
        <van-tab title="外出申请">

          <van-dropdown-menu v-if="false">
            <van-dropdown-item  title="请假人">
              <van-cell-group inset>
                <van-field v-model="applyPerson" placeholder="请输入请假人" />
              </van-cell-group>
              <div style="padding: 5px 16px;">
                <van-button type="primary" block round @click="onConfirm()">
                  确认
                </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.xxw_sqsj }}</div>
                <div>请假人：{{ item.xxw_qjr }}</div>
              </template>
              <template #label>
                <div>外出目的：{{ item.xxw_wcmd }}</div>
                <div>开始时间：{{ item.xxw_kssj }}</div>
                <div>预计返回时间：{{ item.xxw_yjfhsj }}</div>
                <div>实际返回时间：{{ item.xxw_sjfhsj }}</div>
                <div>状态：
                  <span :class="item.xxw_zt_option_k=='1' ? 'greenText' : (item.xxw_zt_option_k=='2' ? '' : 'redText') " >{{ item.xxw_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  title="请假人">
            <van-cell-group inset>
              <van-field v-model="applyPerson" placeholder="请输入请假人" />
            </van-cell-group>
            <div style="padding: 5px 16px;">
              <van-button type="primary" block round @click="onConfirm()">
                确认
              </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.xxw_sqsj }}</div>
                <div>请假人：{{ item.xxw_qjr }}</div>
              </template>
              <template #label>
                <div>外出目的：{{ item.xxw_wcmd }}</div>
                <div>开始时间：{{ item.xxw_kssj }}</div>
                <div>预计返回时间：{{ item.xxw_yjfhsj }}</div>
                <div>实际返回时间：{{ item.xxw_sjfhsj }}</div>

              </template>

              <template #right-icon>
                <van-button type="primary" size="small" v-if="item.xxw_zt_option_k == 1" @click="handleCheckDialog(item)">审核</van-button>
                <van-button type="text"  :class="{'greenText':item.xxw_zt_option_k=='2'}" v-else-if="item.xxw_zt_option_k=='2'" >{{ item.xxw_zt }}</van-button>
                <van-button type="text"  :class="{'redText':item.xxw_zt_option_k=='3'}" v-else="item.xxw_zt_option_k=='3'" >{{ item.xxw_zt }}</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>