🦄 refactor: 票据领用代码重构

2024-04-08 12:02:00 +08:00 · 2024-04-08 12:02:00 +08:00 · ec8e9d314c
commit ec8e9d314c
parent ea61580c55
9 changed files with 567 additions and 21 deletions
--- a/mock/modules/ycy.js
+++ b/mock/modules/ycy.js
@ -21,7 +21,7 @@ const ReceiptList = Mock.mock([
        billserial: "@integer(100000000,199999999)1",
        proposer: "孙东宇",
        billType: "@integer(0,4)",
-        receiptNum: "@integer(1,10)张",
+        receiptNum: "@integer(1,10)",
        receiptDate: "@date",
        useInfo: "@csentence",
      },
@ -34,7 +34,7 @@ const ReceiptList = Mock.mock([
        billserial: "@integer(100000000,199999999)1",
        proposer: "杨春宇",
        billType: "@integer(0,4)",
-        receiptNum: "@integer(1,10)张",
+        receiptNum: "@integer(1,10)",
        receiptDate: "@date",
        useInfo: "@csentence",
      },
@ -47,7 +47,7 @@ const ReceiptList = Mock.mock([
        billserial: "@integer(100000000,199999999)1",
        proposer: "吕才卓",
        billType: "@integer(0,4)",
-        receiptNum: "@integer(1,10)张",
+        receiptNum: "@integer(1,10)",
        receiptDate: "@date",
        useInfo: "@csentence",
      },
@ -60,7 +60,7 @@ const ReceiptList = Mock.mock([
        billserial: "@integer(100000000,199999999)1",
        proposer: "刘欣宇",
        billType: "@integer(0,4)",
-        receiptNum: "@integer(1,10)张",
+        receiptNum: "@integer(1,10)",
        receiptDate: "@date",
        useInfo: "@csentence",
      },
--- a/src/layout/components/LayoutAside.vue
+++ b/src/layout/components/LayoutAside.vue
@ -14,6 +14,9 @@
        <t-menu-item value="1-3" to="/Bill/BillReceipt">
          <span>票据领用管理</span>
        </t-menu-item>
+        <t-menu-item value="1-4" to="/Bill/BillQuitneck">
+          <span>票据退领管理</span>
+        </t-menu-item>
      </t-submenu>
      <t-submenu value="2" title="应收款管理">
        <template #icon>
--- a/src/pages/finance-bill-manage/billCancel.vue
+++ b/src/pages/finance-bill-manage/billCancel.vue
@ -66,7 +66,7 @@
      <t-content class="table-box">
        <div class="table-header">
          <div>
-            <h4 style="font-size: 110%">票据列表</h4>
+            <h4 style="font-size: 110%">票据退库列表</h4>
          </div>
          <div>
            <t-button
@ -87,7 +87,7 @@
          :columns="columns"
          :pagination="pagination"
          class="table"
-          :max-height="650"
+          :max-height="550"
        >
          <template #billType="{ row }">
            <div v-for="item in billType" :key="item">
@ -294,10 +294,12 @@ const columns = ref([
    fixed: "right",
  },
 ]);
+
+// 效验规则
 const FORM_RULES = {
  approver: [{ required: true, message: "请输入审批人", trigger: "blur" }],
  approvalDate: [
-    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
+    { required: true, message: "请选择入库日期", trigger: "change" },
  ],
  approvalReason: [
    { required: true, message: "请输入审批原因", trigger: "blur" },
--- a/src/pages/finance-bill-manage/billQuitneck.vue
+++ b/src/pages/finance-bill-manage/billQuitneck.vue
@ -0,0 +1,389 @@
+<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">
+          <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="receiptDate">
+                  <t-date-picker v-model="scarchData.receiptDate" 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 #receiptNum="{ row }">
+                {{ `${row.receiptNum}张` }}
+              </template>
+            </t-base-table>
+          </t-content>
+        </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 { useReceiptList } from "@/stores/billReceipt";
+
+const receiptList = useReceiptList();
+const personName = ref([]);
+const tableData = ref([]);
+const data = ref([]);
+const loading = ref(false);
+const visiblePost = 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: "quitneckInfo",
+    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 dialogData = ref({
+  quitneckDate: "",
+  quitneckReason: "",
+  quitneckNum: "",
+});
+
+// 查询表单
+const scarchData = ref({
+  billserial: "",
+});
+
+// 分页
+const pagination = ref({
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50,
+});
+
+// 获取票据列表
+const personList = async () => {
+  personName.value = await receiptList.getPersonNameList();
+};
+
+// 效验规则
+const FORM_RULES = {
+  quitneckNum: [{ required: true, message: "请输入退领张数", trigger: "blur" }],
+  quitneckDate: [
+    { required: true, message: "请选择退领日期", trigger: "change" },
+  ],
+  quitneckReason: [
+    { required: true, message: "请输入退领原因", trigger: "blur" },
+  ],
+};
+
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
+  console.log(
+    scarchData.value.billserial,
+    scarchData.value.billType,
+    scarchData.value.receiptDate
+  );
+  if (
+    scarchData.value.billserial === "" &&
+    (scarchData.value.billType === undefined ||
+      scarchData.value.billType === "") &&
+    (scarchData.value.receiptDate === undefined ||
+      scarchData.value.receiptDate === "")
+  ) {
+    getNewTable();
+  } 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.receiptDate === item.receiptDate) {
+        arrList = item;
+      }
+      if (
+        scarchData.value.billserial === "" &&
+        scarchData.value.billType === "" &&
+        scarchData.value.receiptDate === ""
+      ) {
+        arrList = item;
+      }
+      return arrList;
+    });
+    tableData.value = list;
+    pagination.value.total = list.length;
+  }
+};
+// 查询表单重置
+const resetting = () => {
+  scarchData.value = {
+    billserial: "",
+    billType: "",
+    receiptDate: "",
+  };
+  getNewTable();
+};
+const rowItem = ref({});
+const Quitneck = (value) => {
+  dialogData.value = {
+    quitneckDate: "",
+    quitneckReason: "",
+    quitneckNum: "",
+  };
+  visiblePost.value = true;
+  rowItem.value = value;
+};
+//  表单提交
+const quitneckAdd = async ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    if (rowItem.value.row.receiptNum - dialogData.value.quitneckNum < 0) {
+      return MessagePlugin.error("退领数量不能大于领用数量");
+    }
+    dialogData.value.quitneckNum =
+      rowItem.value.row.receiptNum - dialogData.value.quitneckNum;
+    dialogData.value.id = rowItem.value.row.id;
+    await receiptList.getquitneckNum(dialogData.value);
+    getTableData();
+    MessagePlugin.success("提交成功");
+    visiblePost.value = false;
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
+  }
+};
+const onClick = async (context) => {
+  // 判断是否为顶层节点（无父节点）
+  if (context.node.value === "t1") {
+    return;
+  }
+  loading.value = true;
+  // 获取票据列表
+  tableData.value = await receiptList.getReceiptList({
+    name: context.node.label,
+  });
+  data.value = await receiptList.getReceiptList({
+    name: context.node.label,
+  });
+  pagination.value.total = tableData.value.length;
+  const timerId = setTimeout(() => {
+    loading.value = false;
+    clearInterval(timerId);
+  }, 300);
+};
+// 刷新列表
+const refresh = () => {
+  getTableData();
+};
+// 判断menuManagement里面是否存在数据
+const getPersonName = () => {
+  let arr = JSON.parse(localStorage.getItem("ReceiptList"));
+  if (arr) {
+    personName.value = arr.personName;
+  } else {
+    personList();
+  }
+};
+// 判断menuManagement里面是否存在数据
+const getTableData = async () => {
+  let arr = JSON.parse(localStorage.getItem("ReceiptList"));
+  if (arr.receiptList.length > 0) {
+    loading.value = true;
+    tableData.value = arr.receiptList;
+    pagination.value.total = tableData.value.length;
+    const timerId = setTimeout(() => {
+      loading.value = false;
+      clearInterval(timerId);
+    }, 300);
+  } else {
+    await nextTick();
+    // 找到第一个具有子节点的节点并模拟点击
+    const firstNodeWithChildren = personName.value.find(
+      (node) => Array.isArray(node.children) && node.children.length > 0
+    );
+    if (firstNodeWithChildren) {
+      const simulatedContext = {
+        node: {
+          label: "孙东宇",
+        },
+      };
+      onClick(simulatedContext);
+    }
+  }
+};
+
+onMounted(async () => {
+  getPersonName();
+  getTableData();
+  // 等待 personName 数据加载完成
+});
+</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;
+  }
+}
+:deep(.t-tree--transition .t-tree__label) {
+  width: 10rem;
+}
+:deep(.t-form__controls-content) {
+  justify-content: space-between;
+}
+</style>
--- a/src/pages/finance-bill-manage/billReceipt.vue
+++ b/src/pages/finance-bill-manage/billReceipt.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="back-color">
+  <div class="back-color" style="overflow-y: hidden">
    <t-layout style="height: 100%; background-color: #f5f7fb">
      <t-aside class="asideTree">
        <t-space direction="vertical">
@ -67,7 +67,7 @@
          <t-content class="table-box">
            <div class="table-header">
              <div>
-                <h4 style="font-size: 110%">票据列表</h4>
+                <h4 style="font-size: 110%">票据领用列表</h4>
              </div>
              <div>
                <t-button
@ -88,7 +88,7 @@
              :columns="columns"
              :pagination="pagination"
              class="table"
-              :max-height="650"
+              :max-height="550"
            >
              <template #billType="{ row }">
                <div v-for="item in billType" :key="item">
@ -97,11 +97,90 @@
                  }}</span>
                </div>
              </template>
+              <template #receiptNum="{ row }">
+                {{ `${row.receiptNum}张` }}
+              </template>
+              <template #status="slotProps">
+                <t-button
+                  theme="default"
+                  variant="text"
+                  size="small"
+                  @click="Quitneck(slotProps)"
+                  :disabled="slotProps.row.receiptNum === 0"
+                  >退领</t-button
+                >
+              </template>
            </t-base-table>
          </t-content>
        </t-layout>
      </t-content>
    </t-layout>
+    <t-space>
+      <t-dialog
+        ref="postForm"
+        v-model:visible="visiblePost"
+        header="退领"
+        width="40%"
+        :confirm-on-enter="true"
+        :on-close="closePost"
+        :confirm-btn="null"
+        :cancel-btn="null"
+      >
+        <t-space direction="vertical">
+          <div>
+            <t-form
+              ref="formDialog"
+              scroll-to-first-error="smooth"
+              label-align="left"
+              :rules="FORM_RULES"
+              :data="dialogData"
+              :colon="true"
+              @submit="quitneckAdd"
+              label-width="calc(2em + 55px)"
+              @reset="onReset"
+            >
+              <t-form-item
+                label="退领张数"
+                name="quitneckNum"
+                style="margin-bottom: 1.5rem; width: 35rem"
+              >
+                <t-input
+                  v-model="dialogData.quitneckNum"
+                  type="number"
+                  placeholder="请输入退领张数"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="退领时间"
+                name="quitneckDate"
+                style="margin-bottom: 1.5rem; width: 35rem"
+              >
+                <t-date-picker
+                  v-model="dialogData.quitneckDate"
+                  placeholder="请选择退领时间"
+                  clearable
+                  style="width: 35rem"
+                />
+              </t-form-item>
+              <t-form-item label="退领原因" name="quitneckReason">
+                <t-textarea
+                  v-model="dialogData.quitneckReason"
+                  placeholder="请输入退领原因"
+                ></t-textarea>
+              </t-form-item>
+              <t-form-item>
+                <t-space size="small">
+                  <t-button theme="primary" type="submit">提交</t-button>
+                  <t-button theme="default" variant="base" type="reset"
+                    >重置</t-button
+                  >
+                </t-space>
+              </t-form-item>
+            </t-form>
+          </div>
+        </t-space>
+      </t-dialog>
+    </t-space>
  </div>
 </template>

@ -115,6 +194,8 @@ const receiptList = useReceiptList();
 const personName = ref([]);
 const tableData = ref([]);
 const data = ref([]);
+const loading = ref(false);
+const visiblePost = ref(false);
 const columns = ref([
  {
    colKey: "serial-number",
@ -158,6 +239,13 @@ const columns = ref([
    align: "center",
    width: 200,
  },
+  {
+    colKey: "status",
+    title: "操作",
+    width: 120,
+    align: "center",
+    fixed: "right",
+  },
 ]);
 // 票据类型
 const billType = ref([
@ -167,6 +255,11 @@ const billType = ref([
  { label: "票据类型4", value: 3 },
  { label: "票据类型5", value: 4 },
 ]);
+const dialogData = ref({
+  quitneckDate: "",
+  quitneckReason: "",
+  quitneckNum: "",
+});

 // 查询表单
 const scarchData = ref({
@ -185,6 +278,17 @@ const personList = async () => {
  personName.value = await receiptList.getPersonNameList();
 };

+// 效验规则
+const FORM_RULES = {
+  quitneckNum: [{ required: true, message: "请输入退领张数", trigger: "blur" }],
+  quitneckDate: [
+    { required: true, message: "请选择退领日期", trigger: "change" },
+  ],
+  quitneckReason: [
+    { required: true, message: "请输入退领原因", trigger: "blur" },
+  ],
+};
+
 // 查询
 const headerQuery = () => {
  tableData.value = data.value;
@ -235,12 +339,39 @@ const resetting = () => {
  };
  getNewTable();
 };
-
+const rowItem = ref({});
+const Quitneck = (value) => {
+  dialogData.value = {
+    quitneckDate: "",
+    quitneckReason: "",
+    quitneckNum: "",
+  };
+  visiblePost.value = true;
+  rowItem.value = value;
+};
+//  表单提交
+const quitneckAdd = async ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    if (rowItem.value.row.receiptNum - dialogData.value.quitneckNum < 0) {
+      return MessagePlugin.error("退领数量不能大于领用数量");
+    }
+    dialogData.value.quitneckNum =
+      rowItem.value.row.receiptNum - dialogData.value.quitneckNum;
+    dialogData.value.id = rowItem.value.row.id;
+    await receiptList.getquitneckNum(dialogData.value);
+    getTableData();
+    MessagePlugin.success("提交成功");
+    visiblePost.value = false;
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
+  }
+};
 const onClick = async (context) => {
  // 判断是否为顶层节点（无父节点）
  if (context.node.value === "t1") {
    return;
  }
+  loading.value = true;
  // 获取票据列表
  tableData.value = await receiptList.getReceiptList({
    name: context.node.label,
@ -249,6 +380,10 @@ const onClick = async (context) => {
    name: context.node.label,
  });
  pagination.value.total = tableData.value.length;
+  const timerId = setTimeout(() => {
+    loading.value = false;
+    clearInterval(timerId);
+  }, 300);
 };
 // 刷新列表
 const refresh = () => {
@ -267,7 +402,13 @@ const getPersonName = () => {
 const getTableData = async () => {
  let arr = JSON.parse(localStorage.getItem("ReceiptList"));
  if (arr.receiptList.length > 0) {
+    loading.value = true;
    tableData.value = arr.receiptList;
+    pagination.value.total = tableData.value.length;
+    const timerId = setTimeout(() => {
+      loading.value = false;
+      clearInterval(timerId);
+    }, 300);
  } else {
    await nextTick();
    // 找到第一个具有子节点的节点并模拟点击
--- a/src/pages/finance-bill-manage/billStock.vue
+++ b/src/pages/finance-bill-manage/billStock.vue
@ -48,7 +48,7 @@
      <t-content class="table-box">
        <div class="table-header">
          <div>
-            <h4 style="font-size: 110%">票据列表</h4>
+            <h4 style="font-size: 110%">票据入库列表</h4>
          </div>
          <div>
            <t-button theme="primary" size="small" @click="addStock">
@ -73,7 +73,7 @@
          :columns="columns"
          :pagination="pagination"
          class="table"
-          :max-height="650"
+          :max-height="550"
        >
          <template #billType="{ row }">
            <div v-for="item in billType" :key="item">
@ -407,14 +407,10 @@ const closePost = () => {
 // 表单校验
 const FORM_RULES = {
  billserial: [{ required: true, message: "请输入票据编号", trigger: "blur" }],
-  billType: [
-    { required: true, message: "请选择票据类型", trigger: ["blur", "change"] },
-  ],
+  billType: [{ required: true, message: "请选择票据类型", trigger: "change" }],
  stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
-  stockDate: [
-    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
-  ],
+  stockDate: [{ required: true, message: "请选择入库日期", trigger: "change" }],
  operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
 };

--- a/src/router/modules/financeBillManage.js
+++ b/src/router/modules/financeBillManage.js
@ -2,6 +2,7 @@ import Layout from "@/layout/index.vue";
 import BillStockURL from "@/pages/finance-bill-manage/billStock.vue";
 import BillCancelURL from "@/pages/finance-bill-manage/billCancel.vue";
 import BillReceiptURL from "@/pages/finance-bill-manage/billReceipt.vue";
+import BillQuitneckURL from "@/pages/finance-bill-manage/billQuitneck.vue";

 const financeBillManage = [
  {
@ -34,6 +35,14 @@ const financeBillManage = [
          title: "票据领用",
        },
      },
+      {
+        path: "BillQuitneck",
+        name: "billQuitneck",
+        component: BillQuitneckURL,
+        meta: {
+          title: "票据退领",
+        },
+      },
    ],
  },
 ];
--- a/src/stores/billReceipt.js
+++ b/src/stores/billReceipt.js
@ -24,6 +24,14 @@ export const useReceiptList = defineStore("ReceiptList", {
      this.receiptList = data;
      return this.receiptList;
    },
+    async getquitneckNum(obj) {
+      console.log(obj);
+      const index = this.receiptList.findIndex((item) => item.id === obj.id);
+      if (index !== -1) {
+        this.receiptList[index].receiptNum = obj.quitneckNum;
+      }
+      console.log(this.receiptList);
+    },
  },
  persist: true,
 });
--- a/src/stores/billStock.js
+++ b/src/stores/billStock.js
@ -15,10 +15,8 @@ export const useStock = defineStore("menuManagement", {
    },
    addStockList(arr) {
      const index = this.stockList.findIndex((item) => item.id === arr.id);
-      console.log(arr);
      if (index !== -1) {
        this.stockList[index] = arr;
-        console.log(this.stockList, "222");
      } else {
        arr.id = new Date().getTime();
        this.stockList.unshift(arr);