From dcf662b4f4858a8fe51daf0c1d0d5dfa769004a5 Mon Sep 17 00:00:00 2001
From: ycy <2861518472@qq.com>
Date: Sun, 7 Apr 2024 16:03:27 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=20=E7=A5=A8=E6=8D=AE?=
 =?UTF-8?q?=E9=80=80=E5=BA=93=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/modules/ycy.js                           |  26 +-
 src/api/finance-bill-manage/cancelList.js     |   7 +
 .../{ => finance-bill-manage}/stockList.js    |   0
 src/layout/components/LayoutAside.vue         |   3 +
 src/pages/finance-bill-manage/billCancel.vue  | 452 ++++++++++++++++++
 src/pages/finance-bill-manage/billStock.vue   |  14 +-
 src/router/modules/financeBillManage.js       |  13 +-
 src/stores/billCancel.js                      |  30 ++
 src/stores/billStock.js                       |   2 +-
 src/style/index.css                           |   5 +-
 src/style/index.less                          |   4 +
 11 files changed, 544 insertions(+), 12 deletions(-)
 create mode 100644 src/api/finance-bill-manage/cancelList.js
 rename src/api/{ => finance-bill-manage}/stockList.js (100%)
 create mode 100644 src/pages/finance-bill-manage/billCancel.vue
 create mode 100644 src/stores/billCancel.js

diff --git a/mock/modules/ycy.js b/mock/modules/ycy.js
index 34581ae..821f693 100644
--- a/mock/modules/ycy.js
+++ b/mock/modules/ycy.js
@@ -2,7 +2,7 @@ import Mock from "mockjs";
 const StockList = Mock.mock({
   "list|20-30": [
     {
-      "id|+1": "0",
+      "id|+1": 0,
       billserial: "@integer(100000000,199999999)1",
       billType: "@integer(0,4)",
       stockNum: "@integer(1,2)",
@@ -13,6 +13,20 @@ const StockList = Mock.mock({
     },
   ],
 });
+const CancelList = Mock.mock({
+  "list|20-30": [
+    {
+      "id|+1": 0,
+      billserial: "@integer(100000000,199999999)1",
+      billType: "@integer(0,4)",
+      cancelNum: "@integer(1,10)张",
+      appleDate: "@date",
+      proposer: "@cname",
+      approvalStatus: "@integer(0,3)",
+      reason: " @integer(10000000000,19999999999)",
+    },
+  ],
+});
 
 export default [
   {
@@ -25,4 +39,14 @@ export default [
       };
     },
   },
+  {
+    url: "/api/cancelList",
+    method: "get",
+    response: () => {
+      return {
+        code: 200,
+        data: CancelList,
+      };
+    },
+  },
 ];
diff --git a/src/api/finance-bill-manage/cancelList.js b/src/api/finance-bill-manage/cancelList.js
new file mode 100644
index 0000000..992f1c3
--- /dev/null
+++ b/src/api/finance-bill-manage/cancelList.js
@@ -0,0 +1,7 @@
+import request from "@/utils/requestMock";
+
+const API = {
+  CANCEL_LIST: "/cancelList",
+};
+
+export const reqCancelList = () => request.get(API.CANCEL_LIST);
diff --git a/src/api/stockList.js b/src/api/finance-bill-manage/stockList.js
similarity index 100%
rename from src/api/stockList.js
rename to src/api/finance-bill-manage/stockList.js
diff --git a/src/layout/components/LayoutAside.vue b/src/layout/components/LayoutAside.vue
index aee43c0..eabebfb 100644
--- a/src/layout/components/LayoutAside.vue
+++ b/src/layout/components/LayoutAside.vue
@@ -8,6 +8,9 @@
         <t-menu-item value="1-1" to="/Bill/BillStock">
           <span>票据入库管理</span>
         </t-menu-item>
+        <t-menu-item value="1-2" to="/Bill/BillCancel">
+          <span>票据退库管理</span>
+        </t-menu-item>
       </t-submenu>
       <t-submenu value="2" title="应收款管理">
         <template #icon>
diff --git a/src/pages/finance-bill-manage/billCancel.vue b/src/pages/finance-bill-manage/billCancel.vue
new file mode 100644
index 0000000..29bd0e7
--- /dev/null
+++ b/src/pages/finance-bill-manage/billCancel.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="back-color">
+    <div 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="appleDate">
+            <t-date-picker v-model="scarchData.appleDate" clearable />
+          </t-form-item>
+          <t-form-item label="票据类型:" name="billType">
+            <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>
+          <t-form-item label="审批状态:" name="approvalStatus">
+            <t-select
+              v-model="scarchData.approvalStatus"
+              placeholder="请选择审批状态"
+              clearable
+            >
+              <t-option
+                v-for="item in approvalStatus"
+                :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>
+    </div>
+    <div 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="650"
+      >
+        <template #billType="{ row }">
+          <div v-for="item in billType" :key="item">
+            <span v-if="row.billType === item.value">{{ item.label }}</span>
+          </div>
+        </template>
+        <template #approvalStatus="{ row }">
+          <div v-for="item in approvalStatus" :key="item">
+            <t-tag
+              v-if="row.approvalStatus === item.value"
+              :theme="tagColor(row.approvalStatus)"
+              variant="light"
+            >
+              {{ item.label }}
+            </t-tag>
+          </div>
+        </template>
+        <template #status="slotProps">
+          <t-button
+            theme="default"
+            variant="text"
+            size="small"
+            @click="Approve(slotProps)"
+          >
+            <span v-if="slotProps.row.approvalStatus === 0">{{ "审批" }}</span>
+            <span v-if="slotProps.row.approvalStatus === 3">{{
+              "重新审批"
+            }}</span>
+          </t-button>
+        </template>
+      </t-base-table>
+    </div>
+    <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="cancelAdd"
+              label-width="calc(2em + 55px)"
+              @reset="onReset"
+            >
+              <t-form-item
+                label="审批人"
+                name="approver"
+                style="margin-bottom: 1.5rem; width: 35rem"
+              >
+                <t-input
+                  v-model="dialogData.approver"
+                  placeholder="请输入审批人"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="审批时间"
+                name="approvalDate"
+                style="margin-bottom: 1.5rem; width: 35rem"
+              >
+                <t-date-picker
+                  v-model="dialogData.approvalDate"
+                  placeholder="请选择审批时间"
+                  clearable
+                  style="width: 35rem"
+                />
+              </t-form-item>
+              <t-form-item label="审批原因" name="approvalReason">
+                <t-textarea
+                  v-model="dialogData.approvalReason"
+                  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>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { MessagePlugin } from "tdesign-vue-next";
+import { LoadIcon } from "tdesign-icons-vue-next";
+import { useCancel } from "@/stores/billCancel";
+
+// 票据类型
+const billType = ref([
+  { label: "票据类型1", value: 0 },
+  { label: "票据类型2", value: 1 },
+  { label: "票据类型3", value: 2 },
+  { label: "票据类型4", value: 3 },
+  { label: "票据类型5", value: 4 },
+]);
+
+// 审批状态
+const approvalStatus = ref([
+  { label: "待审批", value: 0 },
+  { label: "审核中", value: 1 },
+  { label: "审核通过", value: 2 },
+  { label: "审核拒绝", value: 3 },
+]);
+
+// 分页
+const pagination = ref({
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50,
+});
+
+// 查询表单
+const scarchData = ref({
+  billserial: "",
+  billType: "",
+  appleDate: "",
+  approvalStatus: [],
+});
+
+// 数据
+const loading = ref(false);
+const visiblePost = ref(false);
+const cancelList = useCancel();
+const tableData = ref();
+const data = 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: "cancelNum",
+    title: "退库数量",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "appleDate",
+    title: "申请时间",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "proposer",
+    title: "申请人",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "approvalStatus",
+    title: "审批状态",
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "reason",
+    title: "退库原因",
+    ellipsis: true,
+    align: "center",
+    width: "100",
+  },
+  {
+    colKey: "status",
+    title: "操作",
+    width: 120,
+    align: "center",
+    fixed: "right",
+  },
+]);
+const FORM_RULES = {
+  approver: [{ required: true, message: "请输入审批人", trigger: "blur" }],
+  approvalDate: [
+    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
+  ],
+  approvalReason: [
+    { required: true, message: "请输入审批原因", trigger: "blur" },
+  ],
+};
+// 弹出框表单
+const dialogData = ref({
+  approver: "",
+  approvalDate: "",
+  approvalReason: "",
+});
+
+// 获取票据列表
+const tableList = async () => {
+  loading.value = true;
+  tableData.value = await cancelList.getCancelList();
+  data.value = await cancelList.getCancelList();
+  pagination.value.total = tableData.value.length;
+  const timerId = setTimeout(() => {
+    loading.value = false;
+    clearInterval(timerId);
+  }, 300);
+};
+
+// 判断tag标签的颜色
+const tagColor = (value) => {
+  switch (value) {
+    case 0:
+      return "default";
+    case 1:
+      return "warning";
+    case 2:
+      return "success";
+    case 3:
+      return "danger";
+  }
+};
+
+// 刷新列表
+const refresh = () => {
+  tableList();
+};
+
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
+  if (
+    scarchData.value.billserial === "" &&
+    (scarchData.value.billType === undefined ||
+      scarchData.value.billType === "") &&
+    (scarchData.value.approvalStatus === undefined ||
+      scarchData.value.approvalStatus === "") &&
+    scarchData.value.appleDate === ""
+  ) {
+    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.approvalStatus === item.approvalStatus) {
+        arrList = item;
+      }
+      if (scarchData.value.appleDate === item.appleDate) {
+        arrList = item;
+      }
+      if (
+        scarchData.value.billserial === "" &&
+        scarchData.value.billType === "" &&
+        scarchData.value.stockDate === ""
+      ) {
+        arrList = item;
+      }
+      return arrList;
+    });
+    tableData.value = list;
+    pagination.value.total = list.length;
+  }
+};
+// 查询表单重置
+const resetting = () => {
+  scarchData.value = {
+    billserial: "",
+    billType: "",
+    appleDate: "",
+    approvalStatus,
+  };
+  getNewTable();
+};
+const rowItem = ref({});
+const Approve = (value) => {
+  dialogData.value = {
+    approver: "",
+    approvalDate: "",
+    approvalReason: "",
+  };
+  visiblePost.value = true;
+  rowItem.value = value;
+};
+
+//  表单重置
+const onReset = () => {};
+
+//  表单提交
+const cancelAdd = async ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    rowItem.value.row.approvalStatus = 1;
+    await cancelList.editApprovalStatus(rowItem.value);
+    getNewTable();
+    MessagePlugin.success("提交成功");
+    visiblePost.value = false;
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
+  }
+};
+
+// 判断menuManagement里面是否存在数据
+const getNewTable = () => {
+  let arr = JSON.parse(localStorage.getItem("CancelList"));
+  if (arr) {
+    tableData.value = arr.cancelList;
+    data.value = arr.cancelList;
+    pagination.value.total = tableData.value.length;
+  } else {
+    tableList();
+  }
+};
+onMounted(() => {
+  getNewTable();
+});
+</script>
+
+<style lang="less" scoped>
+.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-form__controls-content) {
+  justify-content: space-between;
+}
+</style>
+@/api/finance-bill-manage/cancelList
diff --git a/src/pages/finance-bill-manage/billStock.vue b/src/pages/finance-bill-manage/billStock.vue
index 5e8d3e2..aa4bbd2 100644
--- a/src/pages/finance-bill-manage/billStock.vue
+++ b/src/pages/finance-bill-manage/billStock.vue
@@ -11,7 +11,7 @@
         @reset="resetting"
         @submit="headerQuery"
       >
-        <div style="margin-left: 1rem">
+        <div style="margin-left: 1rem; margin-top: 1px">
           <t-form-item label="票据编号:" name="billserial">
             <t-input v-model="formData.billserial" maxlength="10"></t-input>
           </t-form-item>
@@ -97,7 +97,7 @@
       <t-dialog
         ref="postForm"
         v-model:visible="visiblePost"
-        header="新增职位"
+        header="新增票据"
         width="40%"
         :confirm-on-enter="true"
         :on-close="closePost"
@@ -217,10 +217,9 @@
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
-import { reqStockList } from "@/api/stockList";
 import { useStock } from "@/stores/billStock";
 
 // 数据
@@ -344,7 +343,7 @@ const resetting = () => {
     billType: "",
     stockDate: "",
   };
-  tableList();
+  getNewTable();
 };
 
 // 查询
@@ -355,10 +354,9 @@ const headerQuery = () => {
     (formData.value.billType === undefined || formData.value.billType === "") &&
     formData.value.stockDate === ""
   ) {
-    tableList();
+    getNewTable();
   } else {
     const list = tableData.value.filter((item) => {
-      console.log(item);
       let arrList;
       if (formData.value.billserial === item.billserial) {
         arrList = item;
@@ -450,6 +448,7 @@ const getNewTable = () => {
   let arr = JSON.parse(localStorage.getItem("menuManagement"));
   if (arr) {
     tableData.value = arr.stockList;
+    data.value = arr.stockList;
     pagination.value.total = tableData.value.length;
   } else {
     tableList();
@@ -489,3 +488,4 @@ onMounted(() => {
   justify-content: space-between;
 }
 </style>
+@/api/finance-bill-manage/stockList
diff --git a/src/router/modules/financeBillManage.js b/src/router/modules/financeBillManage.js
index 9e476ce..bc01b5d 100644
--- a/src/router/modules/financeBillManage.js
+++ b/src/router/modules/financeBillManage.js
@@ -1,5 +1,6 @@
 import Layout from "@/layout/index.vue";
-import BillManage from "@/pages/finance-bill-manage/billStock.vue";
+import BillStockURL from "@/pages/finance-bill-manage/billStock.vue";
+import BillCancelURL from "@/pages/finance-bill-manage/billCancel.vue";
 
 const financeBillManage = [
   {
@@ -11,7 +12,15 @@ const financeBillManage = [
       {
         path: "BillStock",
         name: "billStock",
-        component: BillManage,
+        component: BillStockURL,
+        meta: {
+          title: "票据上传",
+        },
+      },
+      {
+        path: "BillCancel",
+        name: "billCancel",
+        component: BillCancelURL,
         meta: {
           title: "票据上传",
         },
diff --git a/src/stores/billCancel.js b/src/stores/billCancel.js
new file mode 100644
index 0000000..b8e5bf3
--- /dev/null
+++ b/src/stores/billCancel.js
@@ -0,0 +1,30 @@
+import { defineStore } from "pinia";
+import { reqCancelList } from "@/api/finance-bill-manage/cancelList";
+
+export const useCancel = defineStore("CancelList", {
+  state: () => {
+    return {
+      cancelList: [],
+    };
+  },
+  actions: {
+    async getCancelList() {
+      let { data } = await reqCancelList();
+      this.cancelList = data.list;
+      return this.cancelList;
+    },
+    editApprovalStatus(arr) {
+      console.log(arr);
+      const index = this.cancelList.findIndex((item) => item.id === arr.row.id);
+      if (index !== -1) {
+        console.log("index", index);
+        this.cancelList[index] = arr.row;
+      }
+    },
+    deleteCancelList(item) {
+      let arr = this.cancelList.filter((i) => i.id !== item.id);
+      this.cancelList = arr;
+    },
+  },
+  persist: true,
+});
diff --git a/src/stores/billStock.js b/src/stores/billStock.js
index 7460d5e..0276d99 100644
--- a/src/stores/billStock.js
+++ b/src/stores/billStock.js
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { reqStockList } from "@/api/stockList";
+import { reqStockList } from "@/api/finance-bill-manage/stockList";
 
 export const useStock = defineStore("menuManagement", {
   state: () => {
diff --git a/src/style/index.css b/src/style/index.css
index dc6c1ab..bf37869 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -186,7 +186,7 @@ pre {
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-  height: calc(94vh - 50px);
+  height: calc(94vh - 64px);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -203,3 +203,6 @@ a:active {
 .t-button--variant-text .t-button__text:hover {
   color: #8799a3;
 }
+.t-is-disabled .t-button__text {
+  color: #d3d3d3 !important;
+}
diff --git a/src/style/index.less b/src/style/index.less
index ab04493..421f460 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -48,4 +48,8 @@ a:active {
 // 改变文字按钮移入的颜色
 .t-button--variant-text .t-button__text:hover {
     color: #8799a3;
+}
+// 禁用的颜色
+ .t-is-disabled .t-button__text{
+    color: #d3d3d3 !important;
 }
\ No newline at end of file