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" maxlength="10"></t-input>
+            <t-input v-model="formData.billserial"></t-input>
           </t-form-item>
 
           <t-form-item label="入库日期:" name="stockDate">
@@ -80,14 +80,14 @@
             theme="default"
             variant="text"
             size="small"
-            @click="stockEdit(slotProps)"
-            >修改</t-button
+            @click="look(slotProps)"
+            >查看</t-button
           >
           <t-button
             theme="default"
             variant="text"
             size="small"
-            @click="stockDelete(slotProps)"
+            @click="deleteBtn(slotProps)"
             >删除</t-button
           >
         </template>
@@ -217,248 +217,175 @@
 </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 { 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";
 
-// 数据
-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 () => {
-  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);
-};
+  tableData.value = await stockList.getStockList()
+  data.value = await stockList.getStockList()
+  pagination.value.total = tableData.value.length
+}
 
-// 刷新列表
-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 = () => {
-  tableData.value = data.value;
+const headerQuery = ({ validateResult, firstError }) => {
+  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;
-    });
-    tableData.value = list;
-    // @ts-expect-error
-    pagination.value.total = list.length;
-  }
-};
-// 打开窗口
-const addStock = () => {
-  visiblePost.value = true;
-  dialogData.value = {
-    billserial: "",
-    stockNum: "",
-    unit: "",
-    operator: "",
-    remark: "",
-    stockDate: "",
-  };
-};
+      return arrList
+    })
+    console.log(list)
 
-// 关闭窗口
-const closePost = () => {
-  visiblePost.value = false;
-};
+    tableData.value = list
+    // @ts-expect-error
+    pagination.value.total = list.length
+  }
+}
+
+const addStock = () => {
+  visiblePost.value = true
+}
 // 表单校验
 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" }],
-};
-
-// 新增
-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);
+  operator: [{ required: true, message: '请输入操作员', trigger: 'blur' }]
 }
-};
-
-// 修改
-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();
-  }
-};
+const stockAdd = () => {}
 
 onMounted(() => {
-  getNewTable();
-});
+  tableList()
+})
 </script>
 
 <style scoped lang="less">

src/stores/billStock.js

@@ -15,16 +15,12 @@ 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 - 50px);
+  height: calc(94vh - 64px);
   overflow-y: auto;
   overflow-x: hidden;
 }