dykj-college-back-office-management-system/src/pages/finance-bill-manage/billQuitneck.vue

<template>
  <div class="back-color" style="overflow-y: hidden">
    <t-layout style="height: 100%; background-color: #f5f7fb">
      <t-aside class="asideTree">
        <t-space direction="vertical">
          <t-tree
            :data="personName"
            hover
            transition
            activable
            expandAll
            :expand-mutex="mutex"
            expand-on-click-node="true"
            @click="onClick"
          />
        </t-space>
      </t-aside>
      <t-content>
        <t-layout
          style="height: 100%; background-color: #f5f7fb"
          v-if="pageJudge"
        >
          <t-header class="scarch-box">
            <t-form
              ref="form"
              :data="scarchData"
              label-width="calc(2em + 40px)"
              layout="inline"
              scroll-to-first-error="smooth"
              class="scarch-from"
              @reset="resetting"
              @submit="headerQuery"
            >
              <div style="margin-left: 1rem; margin-top: 1px">
                <t-form-item label="票据编号:" name="billserial">
                  <t-input
                    v-model="scarchData.billserial"
                    maxlength="10"
                  ></t-input>
                </t-form-item>

                <t-form-item label="退领时间:" name="quitneckDate">
                  <t-date-picker v-model="scarchData.quitneckDate" clearable />
                </t-form-item>
                <t-form-item
                  label="票据类型:"
                  name="billType"
                  style="margin-bottom: 0.3rem"
                >
                  <t-select
                    v-model="scarchData.billType"
                    placeholder="请选择票据类型"
                    clearable
                  >
                    <t-option
                      v-for="item in billType"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></t-option>
                  </t-select>
                </t-form-item>
              </div>
              <t-form-item style="margin-right: 1rem">
                <t-button theme="primary" type="submit">查询</t-button>
                <t-button theme="primary" type="reset">重置</t-button>
              </t-form-item>
            </t-form>
          </t-header>
          <t-content class="table-box">
            <div class="table-header">
              <div>
                <h4 style="font-size: 110%">票据退领列表</h4>
              </div>
              <div>
                <t-button
                  shape="circle"
                  theme="primary"
                  @click="refresh"
                  style="margin-left: 0.8rem"
                >
                  <template #icon><load-icon /></template>
                </t-button>
              </div>
            </div>
            <t-base-table
              hover
              row-key="index"
              :loading="loading"
              :data="tableData"
              :columns="columns"
              :pagination="pagination"
              class="table"
              :max-height="550"
            >
              <template #billType="{ row }">
                <div v-for="item in billType" :key="item">
                  <span v-if="row.billType === item.value">{{
                    item.label
                  }}</span>
                </div>
              </template>
              <template #quitneckNum="{ row }">
                {{ `${row.quitneckNum}张` }}
              </template>
            </t-base-table>
          </t-content>
        </t-layout>
        <t-layout class="layoutPage" v-else>
          <span> 请点击左侧员工名单 </span>
        </t-layout>
      </t-content>
    </t-layout>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { LoadIcon } from "tdesign-icons-vue-next";
import { useQuitneckList } from "@/stores/billQuitneck";
import { useReceiptList } from "@/stores/billReceipt";

const quitneckList = useQuitneckList();
const receiptList = useReceiptList();
const personName = ref([]);
const tableData = ref([]);
const data = ref([]);
const rowItem = ref({});
const loading = ref(false);
const pageJudge = ref(false);
const columns = ref([
  {
    colKey: "serial-number",
    title: "序号",
    width: 50,
  },
  {
    colKey: "billserial",
    title: "票据编号",
    align: "center",
    width: 100,
  },
  {
    colKey: "proposer",
    title: "申请人",
    align: "center",
    width: 100,
  },
  {
    colKey: "billType",
    title: "票据类型",
    align: "center",
    width: 100,
  },
  {
    colKey: "quitneckNum",
    title: "退领数量",
    align: "center",
    width: 100,
  },
  {
    colKey: "quitneckDate",
    title: "退领时间",
    align: "center",
    width: 100,
  },
  {
    colKey: "quitneckReason",
    title: "退领原因",
    ellipsis: true,
    align: "center",
    width: 200,
  },
]);
// 票据类型
const billType = ref([
  { label: "票据类型1", value: 0 },
  { label: "票据类型2", value: 1 },
  { label: "票据类型3", value: 2 },
  { label: "票据类型4", value: 3 },
  { label: "票据类型5", value: 4 },
]);

// 查询表单
const scarchData = ref({});

// 分页
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 50,
});

// 获取票据列表
const personList = async () => {
  personName.value = await receiptList.getPersonNameList();
};

// 查询
const headerQuery = () => {
  tableData.value = data.value;
  console.log(
    scarchData.value.billserial,
    scarchData.value.billType,
    scarchData.value.quitneckDate
  );
  if (
    scarchData.value.billserial === "" &&
    (scarchData.value.billType === undefined ||
      scarchData.value.billType === "") &&
    (scarchData.value.quitneckDate === undefined ||
      scarchData.value.quitneckDate === "")
  ) {
    tableData.value = data.value;
    pagination.value.total = tableData.value.length;
  } else {
    const list = tableData.value.filter((item) => {
      let arrList;
      if (scarchData.value.billserial === item.billserial) {
        arrList = item;
      }
      if (scarchData.value.billType === item.billType) {
        arrList = item;
      }
      if (scarchData.value.quitneckDate === item.quitneckDate) {
        arrList = item;
      }
      if (
        scarchData.value.billserial === "" &&
        scarchData.value.billType === "" &&
        scarchData.value.quitneckDate === ""
      ) {
        arrList = item;
      }
      console.log(arrList);
      return arrList;
    });
    tableData.value = list;
    pagination.value.total = list.length;
  }
};
// 查询表单重置
const resetting = () => {
  scarchData.value = {
    billserial: "",
    billType: "",
    quitneckDate: "",
  };
  tableData.value = data.value;
  pagination.value.total = tableData.value.length;
};

// 表单重置
const Quitneck = (value) => {
  dialogData.value = {
    quitneckDate: "",
    quitneckReason: "",
    quitneckNum: "",
  };
  visiblePost.value = true;
  rowItem.value = value;
};
const onClick = async (context) => {
  pageJudge.value = true;
  // 判断是否为顶层节点（无父节点）
  if (context.node.value === "t1") {
    return;
  }
  loading.value = true;
  // 获取票据列表
  tableData.value = await quitneckList.getQuitneckList(context.node.label);
  data.value = await quitneckList.getQuitneckList(context.node.label);
  pagination.value.total = tableData.value.length;
  const timerId = setTimeout(() => {
    loading.value = false;
    clearInterval(timerId);
  }, 300);
};
// 刷新列表
const refresh = () => {
  getTableData();
  pagination.value.total = tableData.value.length;
};
// 判断ReceiptList里面是否存在数据
const getPersonName = () => {
  let arr = JSON.parse(localStorage.getItem("ReceiptList"));
  if (arr) {
    personName.value = arr.personName;
  } else {
    personList();
  }
};
onMounted(async () => {
  getPersonName();
});
</script>

<style scoped lang="less">
.asideTree {
  margin-right: 2rem;
  display: flex;
  justify-content: center;
  padding: 1rem;
}
.scarch-box {
  width: 100%;
  background-color: @base-white-color;
  margin-bottom: 2rem;
  .scarch-from {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.table-box {
  height: 41rem;
  background-color: @base-white-color;
  padding: 1rem;
  padding-top: 0;
  .table-header {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.layoutPage {
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 20px;
    font-weight: 800;
    color: #191919;
  }
}
:deep(.t-tree--transition .t-tree__label) {
  width: 10rem;
}
:deep(.t-form__controls-content) {
  justify-content: space-between;
}
</style>