Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev

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

@@ -13,7 +13,7 @@
       >
         <div style="margin-left: 1rem">
           <t-form-item label="票据编号:" name="billserial">
-            <t-input v-model="formData.billserial"></t-input>
+            <t-input v-model="formData.billserial" maxlength="10"></t-input>
           </t-form-item>
 
           <t-form-item label="入库日期:" name="stockDate">
@@ -80,14 +80,14 @@
             theme="default"
             variant="text"
             size="small"
-            @click="look(slotProps)"
-            >查看</t-button
+            @click="stockEdit(slotProps)"
+            >修改</t-button
           >
           <t-button
             theme="default"
             variant="text"
             size="small"
-            @click="deleteBtn(slotProps)"
+            @click="stockDelete(slotProps)"
             >删除</t-button
           >
         </template>
@@ -217,175 +217,248 @@
 </template>
 
 <script setup>
-import { reactive, 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'
-// import { number } from "echarts";
+import { reactive, 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";
 
-const loading = ref(false)
-const visiblePost = ref(false)
-const stockList = useStock()
-const tableData = ref()
-const data = ref()
+// 数据
+const loading = ref(false);
+const visiblePost = ref(false);
+const stockList = useStock();
+const tableData = ref();
+const data = ref();
+// 表格表头
 const columns = ref([
   {
-    colKey: 'serial-number',
-    title: '序号',
-    width: 50
+    colKey: "serial-number",
+    title: "序号",
+    width: 50,
   },
   {
-    colKey: 'billserial',
-    title: '票据编号',
-    align: 'center',
-    width: '100'
+    colKey: "billserial",
+    title: "票据编号",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'billType',
-    title: '票据类型',
-    align: 'center',
-    width: '100'
+    colKey: "billType",
+    title: "票据类型",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'stockNum',
-    title: '入库数量',
-    align: 'center',
-    width: '100'
+    colKey: "stockNum",
+    title: "入库数量",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'unit',
-    title: '单位（如：本、张）',
-    align: 'center',
-    width: '100'
+    colKey: "unit",
+    title: "单位（如：本、张）",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'stockDate',
-    title: '入库日期',
-    align: 'center',
-    width: '100'
+    colKey: "stockDate",
+    title: "入库日期",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'operator',
-    title: '操作员',
-    align: 'center',
-    width: '100'
+    colKey: "operator",
+    title: "操作员",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'remark',
-    title: '备注',
-    align: 'center',
-    width: '100'
+    colKey: "remark",
+    title: "备注",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'status',
-    title: '操作',
+    colKey: "status",
+    title: "操作",
     width: 120,
-    align: 'center',
-    fixed: 'right'
-  }
-])
+    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 }
-])
+  { label: "票据类型1", value: 0 },
+  { label: "票据类型2", value: 1 },
+  { label: "票据类型3", value: 2 },
+  { label: "票据类型4", value: 3 },
+  { label: "票据类型5", value: 4 },
+]);
 
+// 获取票据列表
 const tableList = async () => {
-  tableData.value = await stockList.getStockList()
-  data.value = await stockList.getStockList()
-  pagination.value.total = tableData.value.length
-}
+  loading.value = true;
+  tableData.value = await stockList.getStockList();
+  data.value = await stockList.getStockList();
+  pagination.value.total = tableData.value.length;
+  const timerId = setTimeout(() => {
+    loading.value = false;
+    clearInterval(timerId);
+  }, 300);
+};
 
+// 刷新列表
+const refresh = () => {
+  tableList();
+};
+
+// 弹出框表单
 const dialogData = ref({
-  billserial: '',
-  stockNum: number,
-  unit: '',
-  operator: '',
-  remark: '',
-  stockDate: ''
-})
+  billserial: "",
+  stockNum: Number,
+  unit: "",
+  operator: "",
+  remark: "",
+  stockDate: "",
+});
+
+// 查询表单
 const formData = ref({
-  billserial: '',
-  billType: '',
-  stockDate: ''
-})
+  billserial: "",
+  billType: "",
+  stockDate: "",
+});
+
+// 分页
 const pagination = ref({
   defaultCurrent: 1,
   defaultPageSize: 10,
-  total: 50
-})
+  total: 50,
+});
+
+// 查询表单重置
 const resetting = () => {
   formData.value = {
-    billserial: '',
-    billType: '',
-    stockDate: ''
-  }
-  tableList()
-}
+    billserial: "",
+    billType: "",
+    stockDate: "",
+  };
+  tableList();
+};
 
-const headerQuery = ({ validateResult, firstError }) => {
-  tableData.value = data.value
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
   if (
-    formData.value.billserial === '' &&
-    (formData.value.billType === undefined || formData.value.billType === '') &&
-    formData.value.stockDate === ''
+    formData.value.billserial === "" &&
+    (formData.value.billType === undefined || formData.value.billType === "") &&
+    formData.value.stockDate === ""
   ) {
-    tableList()
+    tableList();
   } else {
-    const list = tableData.value.filter(item => {
-      console.log(item)
-      let arrList
+    const list = tableData.value.filter((item) => {
+      console.log(item);
+      let arrList;
       if (formData.value.billserial === item.billserial) {
-        arrList = item
+        arrList = item;
       }
       if (formData.value.billType === item.billType) {
-        arrList = item
+        arrList = item;
       }
       if (formData.value.stockDate === item.stockDate) {
-        arrList = item
+        arrList = item;
       }
       if (
-        formData.value.billserial === '' &&
-        formData.value.billType === '' &&
-        formData.value.stockDate === ''
+        formData.value.billserial === "" &&
+        formData.value.billType === "" &&
+        formData.value.stockDate === ""
       ) {
-        arrList = item
+        arrList = item;
       }
-      return arrList
-    })
-    console.log(list)
-
-    tableData.value = list
+      return arrList;
+    });
+    tableData.value = list;
     // @ts-expect-error
-    pagination.value.total = list.length
+    pagination.value.total = list.length;
   }
-}
-
+};
+// 打开窗口
 const addStock = () => {
-  visiblePost.value = true
-}
+  visiblePost.value = true;
+  dialogData.value = {
+    billserial: "",
+    stockNum: "",
+    unit: "",
+    operator: "",
+    remark: "",
+    stockDate: "",
+  };
+};
+
+// 关闭窗口
+const closePost = () => {
+  visiblePost.value = false;
+};
 // 表单校验
 const FORM_RULES = {
-  billserial: [{ required: true, message: '请输入票据编号', trigger: 'blur' }],
+  billserial: [{ required: true, message: "请输入票据编号", trigger: "blur" }],
   billType: [
-    { required: true, message: '请选择票据类型', trigger: ['blur', 'change'] }
+    { required: true, message: "请选择票据类型", trigger: ["blur", "change"] },
   ],
-  stockNum: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
-  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
+  stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
+  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
   stockDate: [
-    { required: true, message: '请选择入库日期', trigger: ['blur', 'change'] }
+    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
   ],
-  operator: [{ required: true, message: '请输入操作员', trigger: 'blur' }]
+  operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
+};
+
+// 新增
+const stockAdd = async ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    await stockList.addStockList(dialogData.value);
+    getNewTable();
+    MessagePlugin.success("提交成功");
+    visiblePost.value = false;
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
   }
-const stockAdd = () => {}
+};
+
+// 修改
+const stockEdit = (item) => {
+  visiblePost.value = true;
+  tableData.value.forEach((itemTable) => {
+    if (itemTable.id === item.row.id) {
+      dialogData.value = itemTable;
+    }
+  });
+};
+
+// 删除
+const stockDelete = async (itme) => {
+  await stockList.deleteStockList(itme.row);
+  getNewTable();
+};
+
+// 弹出框表单重置
+const onReset = () => {};
+
+// 判断menuManagement里面是否存在数据
+const getNewTable = () => {
+  let arr = JSON.parse(localStorage.getItem("menuManagement"));
+  if (arr) {
+    tableData.value = arr.stockList;
+    pagination.value.total = tableData.value.length;
+  } else {
+    tableList();
+  }
+};
 
 onMounted(() => {
-  tableList()
-})
+  getNewTable();
+});
 </script>
 
 <style scoped lang="less">

src/stores/billStock.js

@@ -15,12 +15,16 @@ 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);
+        localStorage.setItem("stockList", JSON.stringify(this.stockList));
       }
+      return this.stockList;
     },
     deleteStockList(item) {
       let arr = this.stockList.filter((i) => i.id !== item.id);

src/style/index.css

@@ -186,7 +186,7 @@ pre {
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-  height: calc(94vh - 64px);
+  height: calc(94vh - 50px);
   overflow-y: auto;
   overflow-x: hidden;
 }