✨ feat: 票据报损管理页面完成

mock/modules/ycy.js

@@ -1,4 +1,6 @@
 import Mock from "mockjs";
+
+// 入库列表
 const StockList = Mock.mock({
   "list|20-30": [
     {
@@ -13,6 +15,8 @@ const StockList = Mock.mock({
     },
   ],
 });
+
+// 领用列表
 const ReceiptList = Mock.mock([
   {
     "list|20-30": [
@@ -67,6 +71,8 @@ const ReceiptList = Mock.mock([
     ],
   },
 ]);
+
+// 退领列表
 const quitneckList = Mock.mock([
   {
     list: [
@@ -122,6 +128,7 @@ const quitneckList = Mock.mock([
   },
 ]);
 
+// 人员名单
 const personName = () => {
   return [
     {
@@ -144,6 +151,7 @@ const personName = () => {
   ];
 };
 
+// 退库列表
 const CancelList = Mock.mock({
   "list|20-30": [
     {
@@ -159,6 +167,21 @@ const CancelList = Mock.mock({
   ],
 });
 
+// 报损列表
+const breakageList = Mock.mock({
+  "list|20-30": [
+    {
+      "id|+1": 0,
+      billserial: "@integer(100000000,199999999)1",
+      billType: "@integer(0,4)",
+      breakNum: "@integer(1,2)",
+      breakDate: "@date",
+      operator: "@cname",
+      breakStatus: "@integer(0,2)",
+    },
+  ],
+});
+
 export default [
   {
     url: "/api/stockList",
@@ -218,4 +241,14 @@ export default [
       }
     },
   },
+  {
+    url: "/api/breakageList",
+    method: "get",
+    response: () => {
+      return {
+        code: 200,
+        data: breakageList,
+      };
+    },
+  },
 ];

src/api/finance-bill-manage/breakageList.js

@@ -0,0 +1,7 @@
+import request from "@/utils/requestMock";
+
+const API = {
+  BACKAGE_LIST: "/breakageList",
+};
+
+export const reqBreakageList = () => request.get(API.BACKAGE_LIST);

src/layout/components/LayoutAside.vue

@@ -25,6 +25,9 @@
         <t-menu-item value="2-4" to="/Bill/BillQuitneck">
           <span>票据退领管理</span>
         </t-menu-item>
+        <t-menu-item value="2-5" to="/Bill/BillBreakagek">
+          <span>票据报损管理</span>
+        </t-menu-item>
       </t-submenu>
       <t-submenu value="3" title="应收款管理">
         <template #icon>

src/pages/finance-bill-manage/billBreakage.vue

@@ -0,0 +1,540 @@
+<template>
+  <div class="back-color">
+    <t-layout style="height: 90%; background-color: #f5f7fb">
+      <t-header class="scarch-box">
+        <t-form
+          ref="form"
+          :data="formData"
+          label-width="calc(2em + 40px)"
+          layout="inline"
+          scroll-to-first-error="smooth"
+          class="scarch-from"
+          @reset="resetting"
+          @submit="headerQuery"
+        >
+          <div style="margin-left: 1rem">
+            <t-form-item label="票据编号:" name="billserial">
+              <t-input v-model="formData.billserial" maxlength="10"></t-input>
+            </t-form-item>
+
+            <t-form-item label="报损日期:" name="breakDate">
+              <t-date-picker v-model="formData.breakDate" clearable />
+            </t-form-item>
+            <t-form-item
+              label="票据类型:"
+              name="billType"
+              style="margin-bottom: 0.3rem"
+            >
+              <t-select
+                v-model="formData.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>
+            <t-form-item
+              label="报损状态:"
+              name="breakStatus"
+              style="margin-bottom: 0.3rem"
+            >
+              <t-select
+                v-model="formData.breakStatus"
+                placeholder="请选择报损状态"
+                clearable
+              >
+                <t-option
+                  v-for="item in breakStatus"
+                  :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 theme="primary" size="small" @click="breakageAdd">
+              <template #icon><add-icon /></template>
+              新增报损票据
+            </t-button>
+            <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 #breakNum="{ row }">
+            {{ `${row.breakNum}张` }}
+          </template>
+          <template #billType="{ row }">
+            <div v-for="item in billType" :key="item">
+              <span v-if="row.billType === item.value">{{ item.label }}</span>
+            </div>
+          </template>
+          <template #breakStatus="{ row }">
+            <div v-for="item in breakStatus" :key="item">
+              <t-tag
+                v-if="row.breakStatus === item.value"
+                :theme="tagColor(row.breakStatus)"
+                variant="light"
+              >
+                {{ item.label }}
+              </t-tag>
+            </div>
+          </template>
+          <template #status="slotProps">
+            <t-button
+              theme="default"
+              variant="text"
+              size="small"
+              @click="breakEdit(slotProps)"
+              :disabled="
+                slotProps.row.breakStatus === 0 ||
+                slotProps.row.breakStatus === 1
+              "
+              >修改</t-button
+            >
+            <t-popconfirm
+              content="确认删除吗"
+              @confirm="breakDelete(slotProps)"
+            >
+              <t-button
+                theme="default"
+                variant="text"
+                size="small"
+                :disabled="slotProps.row.breakStatus === 0"
+                >删除</t-button
+              >
+            </t-popconfirm>
+          </template>
+        </t-base-table>
+      </t-content>
+    </t-layout>
+    <t-space>
+      <t-dialog
+        ref="postForm"
+        v-model:visible="visiblePost"
+        :header="headerTitle"
+        width="40%"
+        :confirm-on-enter="true"
+        :on-close="closePost"
+        :confirm-btn="null"
+        :cancel-btn="null"
+      >
+        <t-space direction="vertical" style="width: 100%">
+          <div>
+            <t-form
+              ref="formDialog"
+              scroll-to-first-error="smooth"
+              label-align="left"
+              :rules="FORM_RULES"
+              :data="dialogData"
+              :colon="true"
+              @submit="breakSub"
+              label-width="calc(2em + 55px)"
+              layout="inline"
+              @reset="onReset"
+            >
+              <t-form-item
+                label="票据编号"
+                name="billserial"
+                :span="10"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  v-model="dialogData.billserial"
+                  placeholder="请输入票据编号"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="操作员"
+                name="operator"
+                :span="10"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  v-model="dialogData.operator"
+                  placeholder="请输入操作员"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="票据类型"
+                name="billType"
+                :span="12"
+                style="width: 16rem; margin-bottom: 0.5rem"
+              >
+                <t-select
+                  v-model="dialogData.billType"
+                  clearable
+                  placeholder="请选择票据类型"
+                >
+                  <t-option
+                    v-for="item in billType"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </t-select>
+              </t-form-item>
+              <t-form-item
+                label="报损数量"
+                name="breakNum"
+                :span="12"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  type="number"
+                  v-model="dialogData.breakNum"
+                  placeholder="请输入报损数量"
+                ></t-input>
+              </t-form-item>
+
+              <t-form-item
+                label="报损时间"
+                name="breakDate"
+                :span="10"
+                style="width: 16rem; margin-bottom: 0.5rem"
+              >
+                <t-date-picker
+                  v-model="dialogData.breakDate"
+                  placeholder="请选择报损时间"
+                  clearable
+                />
+              </t-form-item>
+
+              <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>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { MessagePlugin } from "tdesign-vue-next";
+import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
+import { useBreakage } from "@/stores/billBreakage";
+
+// 数据
+const loading = ref(false);
+const visiblePost = ref(false);
+const breakageList = useBreakage();
+const tableData = ref([]);
+const data = ref([]);
+const headerTitle = ref("");
+// 表格表头
+const columns = ref([
+  {
+    colKey: "serial-number",
+    title: "序号",
+    width: 50,
+  },
+  {
+    colKey: "billserial",
+    title: "票据编号",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "billType",
+    title: "票据类型",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "breakNum",
+    title: "报损数量",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "breakDate",
+    title: "报损日期",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "operator",
+    title: "操作员",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "breakStatus",
+    title: "报损状态",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "status",
+    title: "操作",
+    width: 120,
+    align: "center",
+    fixed: "right",
+  },
+]);
+
+// 票据类型
+const billType = ref([
+  { label: "票据类型1", value: 0 },
+  { label: "票据类型2", value: 1 },
+  { label: "票据类型3", value: 2 },
+  { label: "票据类型4", value: 3 },
+  { label: "票据类型5", value: 4 },
+]);
+
+// 审批状态
+const breakStatus = ref([
+  { label: "审核中", value: 0 },
+  { label: "审核通过", value: 1 },
+  { label: "审核拒绝", value: 2 },
+]);
+
+// 获取票据列表
+const tableList = async () => {
+  loading.value = true;
+  tableData.value = await breakageList.getBreakageList();
+  data.value = await breakageList.getBreakageList();
+  pagination.value.total = tableData.value.length;
+  const timerId = setTimeout(() => {
+    loading.value = false;
+    clearInterval(timerId);
+  }, 300);
+};
+
+// 判断tag标签的颜色
+const tagColor = (value) => {
+  switch (value) {
+    case 0:
+      return "warning";
+    case 1:
+      return "success";
+    case 2:
+      return "danger";
+  }
+};
+// 刷新列表
+const refresh = () => {
+  tableList();
+};
+
+// 弹出框表单
+const dialogData = ref({
+  billserial: "",
+  operator: "",
+  billType: "",
+  breakNum: Number,
+  breakDate: "",
+});
+
+// 查询表单
+const formData = ref({
+  billserial: "",
+  billType: "",
+  breakStatus: "",
+  breakDate: "",
+});
+
+// 分页
+const pagination = ref({
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50,
+});
+
+// 查询表单重置
+const resetting = () => {
+  formData.value = {
+    billserial: "",
+    billType: "",
+    breakStatus: "",
+    breakDate: "",
+  };
+  getNewTable();
+};
+
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
+  if (
+    formData.value.billserial === "" &&
+    (formData.value.billType === undefined || formData.value.billType === "") &&
+    (formData.value.breakStatus === undefined ||
+      formData.value.breakStatus === "") &&
+    formData.value.breakDate === ""
+  ) {
+    getNewTable();
+  } else {
+    const list = tableData.value.filter((item) => {
+      let arrList;
+      if (formData.value.billserial === item.billserial) {
+        arrList = item;
+      }
+      if (formData.value.billType === item.billType) {
+        arrList = item;
+      }
+      if (formData.value.breakStatus === item.breakStatus) {
+        arrList = item;
+      }
+      if (formData.value.breakDate === item.breakDate) {
+        arrList = item;
+      }
+      if (
+        formData.value.billserial === "" &&
+        formData.value.billType === "" &&
+        formData.value.breakStatus === "" &&
+        formData.value.breakDate === ""
+      ) {
+        arrList = item;
+      }
+      return arrList;
+    });
+    tableData.value = list;
+    // @ts-expect-error
+    pagination.value.total = list.length;
+  }
+};
+// 打开窗口
+const breakageAdd = () => {
+  visiblePost.value = true;
+  headerTitle.value = "新增报损票据";
+  dialogData.value = {
+    billserial: "",
+    operator: "",
+    billType: "",
+    breakNum: Number,
+    breakDate: "",
+  };
+};
+
+// 关闭窗口
+const closePost = () => {
+  visiblePost.value = false;
+};
+// 表单校验
+const FORM_RULES = {
+  billserial: [{ required: true, message: "请输入票据编号", trigger: "blur" }],
+  billType: [{ required: true, message: "请选择票据类型", trigger: "change" }],
+  breakNum: [{ required: true, message: "请输入报损数量", trigger: "blur" }],
+  breakDate: [{ required: true, message: "请选择报损日期", trigger: "change" }],
+  operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
+};
+
+// 新增
+const breakSub = async ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    dialogData.value.breakStatus = 0;
+    await breakageList.addBreakageList(dialogData.value);
+    getNewTable();
+    MessagePlugin.success("提交成功");
+    visiblePost.value = false;
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
+  }
+};
+
+// 修改
+const breakEdit = (item) => {
+  headerTitle.value = "修改报损票据";
+  visiblePost.value = true;
+  tableData.value.forEach((itemTable) => {
+    if (itemTable.id === item.row.id) {
+      dialogData.value = itemTable;
+    }
+  });
+};
+
+// 删除
+const breakDelete = async (itme) => {
+  await breakageList.deleteBreakageList(itme.row);
+  getNewTable();
+};
+
+// 弹出框表单重置
+const onReset = () => {};
+
+// 判断menuManagement里面是否存在数据
+const getNewTable = () => {
+  let arr = JSON.parse(localStorage.getItem("breakageList"));
+  if (arr) {
+    tableData.value = arr.breakageList;
+    data.value = arr.breakageList;
+    pagination.value.total = tableData.value.length;
+  } else {
+    tableList();
+  }
+};
+
+onMounted(() => {
+  getNewTable();
+});
+</script>
+
+<style scoped lang="less">
+.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: 42rem;
+  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-form__controls-content) {
+  justify-content: space-between;
+}
+</style>

src/pages/finance-bill-manage/billCancel.vue

@@ -234,8 +234,9 @@ const scarchData = ref({
 const loading = ref(false);
 const visiblePost = ref(false);
 const cancelList = useCancel();
-const tableData = ref();
+const tableData = ref([]);
-const data = ref();
+const data = ref([]);
+const headerTiTle = ref("");
 // 表格表头
 const columns = ref([
   {

src/pages/finance-bill-manage/billQuitneck.vue

@@ -16,7 +16,10 @@
         </t-space>
       </t-aside>
       <t-content>
-        <t-layout style="height: 100%; background-color: #f5f7fb">
+        <t-layout
+          style="height: 100%; background-color: #f5f7fb"
+          v-if="pageJudge"
+        >
           <t-header class="scarch-box">
             <t-form
               ref="form"
@@ -103,6 +106,9 @@
             </t-base-table>
           </t-content>
         </t-layout>
+        <t-layout class="layoutPage" v-else>
+          <span> 请点击左侧员工名单 </span>
+        </t-layout>
       </t-content>
     </t-layout>
   </div>
@@ -122,6 +128,7 @@ const tableData = ref([]);
 const data = ref([]);
 const rowItem = ref({});
 const loading = ref(false);
+const pageJudge = ref(false);
 const columns = ref([
   {
     colKey: "serial-number",
@@ -255,6 +262,7 @@ const Quitneck = (value) => {
   rowItem.value = value;
 };
 const onClick = async (context) => {
+  pageJudge.value = true;
   // 判断是否为顶层节点（无父节点）
   if (context.node.value === "t1") {
     return;
@@ -318,6 +326,18 @@ onMounted(async () => {
     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;
 }

src/pages/finance-bill-manage/billStock.vue

@@ -88,13 +88,14 @@
               @click="stockEdit(slotProps)"
               >修改</t-button
             >
-            <t-button
+            <t-popconfirm
-              theme="default"
+              content="确认删除吗"
-              variant="text"
+              @confirm="stockDelete(slotProps)"
-              size="small"
+            >
-              @click="stockDelete(slotProps)"
+              <t-button theme="default" variant="text" size="small"
                 >删除</t-button
               >
+            </t-popconfirm>
           </template>
         </t-base-table>
       </t-content>
@@ -163,7 +164,7 @@
                 <t-input
                   type="number"
                   v-model="dialogData.stockNum"
-                  placeholder="请输入内容"
+                  placeholder="请输入入库数量"
                 ></t-input>
               </t-form-item>
               <t-form-item
@@ -179,7 +180,7 @@
               </t-form-item>
               <t-form-item
                 label="入库时间"
-                name="unit"
+                name="stockDate"
                 :span="10"
                 style="width: 16rem; margin-bottom: 0.5rem"
               >
@@ -191,7 +192,7 @@
               </t-form-item>
               <t-form-item
                 label="操作员"
-                name="unit"
+                name="operator"
                 :span="10"
                 style="margin-bottom: 0.5rem"
               >

src/router/modules/financeBillManage.js

@@ -3,6 +3,7 @@ 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";
+import BillBreakagekURL from "@/pages/finance-bill-manage/billBreakage.vue";
 
 const financeBillManage = [
   {
@@ -43,6 +44,14 @@ const financeBillManage = [
           title: "票据退领",
         },
       },
+      {
+        path: "BillBreakagek",
+        name: "billBreakagek",
+        component: BillBreakagekURL,
+        meta: {
+          title: "票据报损",
+        },
+      },
     ],
   },
 ];

src/stores/billBreakage.js

@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+import { reqBreakageList } from "@/api/finance-bill-manage/breakageList";
+
+export const useBreakage = defineStore("breakageList", {
+  state: () => {
+    return {
+      breakageList: [],
+    };
+  },
+  actions: {
+    async getBreakageList() {
+      let { data } = await reqBreakageList();
+      this.breakageList = data.list;
+      return this.breakageList;
+    },
+    addBreakageList(arr) {
+      const index = this.breakageList.findIndex((item) => item.id === arr.id);
+      if (index !== -1) {
+        this.breakageList[index] = arr;
+      } else {
+        arr.id = new Date().getTime();
+        this.breakageList.unshift(arr);
+        localStorage.setItem("breakageList", JSON.stringify(this.breakageList));
+      }
+      return this.breakageList;
+    },
+    deleteBreakageList(item) {
+      let arr = this.breakageList.filter((i) => i.id !== item.id);
+      this.breakageList = arr;
+    },
+  },
+  persist: true,
+});