mock/modules/ycy.js

@@ -3,8 +3,8 @@ const StockList = Mock.mock({
   "list|20-30": [
     {
       "id|+1": "0",
-      billserial: "@integer(100000000,199999999)1",
+      billserial: "@integer(10000000000,19999999999)",
-      billType: "@integer(0,4)",
+      billType: "@integer(0,5)",
       stockNum: "@integer(1,2)",
       unit: "@cword(张本,1)",
       stockDate: "@date",
@@ -19,9 +19,12 @@ export default [
     url: "/api/stockList",
     method: "get",
     response: () => {
+      const obj = {
+        list: StockList,
+      };
       return {
         code: 200,
-        data: StockList,
+        data: obj,
       };
     },
   },

package.json

@@ -13,7 +13,6 @@
     "less": "^4.2.0",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.1",
     "tdesign-vue-next": "^1.9.3",
     "vite-plugin-mock": "^3.0.1",
     "vue": "^3.4.21",

src/main.js

@@ -1,19 +1,16 @@
-import "./style/index.css";
+import './style/index.css'
 
-import { createApp } from "vue";
+import { createApp } from 'vue'
-import { createPinia } from "pinia";
+import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import TDesign from 'tdesign-vue-next';
-import TDesign from "tdesign-vue-next";
 
-import App from "./App.vue";
+import App from './App.vue'
-import router from "./router";
+import router from './router'
 
-const app = createApp(App);
+const app = createApp(App)
 
-const pinia = createPinia();
+app.use(createPinia())
-pinia.use(piniaPluginPersistedstate);
+app.use(router)
-app.use(pinia);
-app.use(router);
 app.use(TDesign);
 
-app.mount("#app");
+app.mount('#app')

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

@@ -5,277 +5,83 @@
         ref="form"
         :data="formData"
         label-width="calc(2em + 40px)"
-        layout="inline"
+        :layout="formData.layout"
         scroll-to-first-error="smooth"
         class="scarch-from"
-        @reset="resetting"
-        @submit="headerQuery"
       >
         <div style="margin-left: 1rem">
-          <t-form-item label="票据编号:" name="billserial">
+          <t-form-item label="票据编号:" name="name">
-            <t-input v-model="formData.billserial"></t-input>
+            <t-input v-model="formData.name"></t-input>
           </t-form-item>
 
-          <t-form-item label="入库日期:" name="stockDate">
+          <t-form-item label="入库日期:" name="password">
-            <t-date-picker v-model="formData.stockDate" clearable />
+            <t-input v-model="formData.password"></t-input>
-          </t-form-item>
-          <t-form-item label="票据类型:" name="billType">
-            <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>
         </div>
-        <t-form-item style="margin-right: 1rem">
+        <t-form-item>
-          <t-button theme="primary" type="submit">查询</t-button>
+          <t-button theme="primary" @click="onSubmit">查询</t-button>
-          <t-button theme="primary" type="reset">重置</t-button>
+          <t-button theme="primary" @click="onReset">重置</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 theme="primary" size="small" @click="addStock">
-            <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"
+      ></t-base-table>
-        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 #status="slotProps">
-          <t-button
-            theme="default"
-            variant="text"
-            size="small"
-            @click="look(slotProps)"
-            >查看</t-button
-          >
-          <t-button
-            theme="default"
-            variant="text"
-            size="small"
-            @click="deleteBtn(slotProps)"
-            >删除</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" style="width: 100%">
-          <div>
-            <t-form
-              ref="formDialog"
-              scroll-to-first-error="smooth"
-              label-align="left"
-              :rules="FORM_RULES"
-              :data="dialogData"
-              :colon="true"
-              @submit="stockAdd"
-              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="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="stockNum"
-                :span="12"
-                style="margin-bottom: 0.5rem"
-              >
-                <t-input
-                  type="number"
-                  v-model="dialogData.stockNum"
-                  placeholder="请输入内容"
-                ></t-input>
-              </t-form-item>
-              <t-form-item
-                label="入库单位"
-                name="unit"
-                :span="10"
-                style="margin-bottom: 0.5rem"
-              >
-                <t-input
-                  v-model="dialogData.unit"
-                  placeholder="请输入入库单位"
-                ></t-input>
-              </t-form-item>
-              <t-form-item
-                label="入库时间"
-                name="unit"
-                :span="10"
-                style="width: 16rem; margin-bottom: 0.5rem"
-              >
-                <t-date-picker
-                  v-model="dialogData.stockDate"
-                  placeholder="请选择入库时间"
-                  clearable
-                />
-              </t-form-item>
-              <t-form-item
-                label="操作员"
-                name="unit"
-                :span="10"
-                style="margin-bottom: 0.5rem"
-              >
-                <t-input
-                  v-model="dialogData.operator"
-                  placeholder="请输入操作员"
-                ></t-input>
-              </t-form-item>
-              <t-form-item label="备注" name="remark" style="width: 33.6rem">
-                <t-textarea
-                  v-model="dialogData.remark"
-                  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 { 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 columns = ref([
   {
-    colKey: "serial-number",
-    title: "序号",
-    width: 50,
-  },
-  {
-    colKey: "billserial",
     title: "票据编号",
+    colkey: "billserial",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
-    colKey: "billType",
     title: "票据类型",
+    colkey: "billType",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
-    colKey: "stockNum",
     title: "入库数量",
+    colkey: "stockNum",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
-    colKey: "unit",
     title: "单位（如：本、张）",
+    colkey: "unit",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
-    colKey: "stockDate",
     title: "入库日期",
+    colkey: "stockDate",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
-    colKey: "operator",
     title: "操作员",
+    colkey: "operator",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
-    colKey: "remark",
     title: "备注",
+    colkey: "remark",
     align: "center",
-    width: "100",
+    width: 100,
   },
   {
     colKey: "status",
@@ -286,105 +92,27 @@ const columns = ref([
   },
 ]);
 
-const billType = ref([
+const formData = reactive({
-  { label: "票据类型1", value: 0 },
+  layout: "inline",
-  { label: "票据类型2", value: 1 },
+  name: "",
-  { label: "票据类型3", value: 2 },
+  password: "",
-  { label: "票据类型4", value: 3 },
+});
-  { label: "票据类型5", value: 4 },
-]);
 
-const tableList = async () => {
+const onReset = () => {
-  tableData.value = await stockList.getStockList();
+  MessagePlugin.success("重置成功");
-  data.value = await stockList.getStockList();
-  pagination.value.total = tableData.value.length;
 };
 
-const dialogData = ref({
+const onSubmit = ({ validateResult, firstError }) => {
-  billserial: "",
+  if (validateResult === true) {
-  stockNum: number,
+    MessagePlugin.success("提交成功");
-  unit: "",
-  operator: "",
-  remark: "",
-  stockDate: "",
-});
-const formData = ref({
-  billserial: "",
-  billType: "",
-  stockDate: "",
-});
-const pagination = ref({
-  defaultCurrent: 1,
-  defaultPageSize: 10,
-  total: 50,
-});
-const resetting = () => {
-  formData.value = {
-    billserial: "",
-    billType: "",
-    stockDate: "",
-  };
-  tableList();
-};
-
-const headerQuery = ({ validateResult, firstError }) => {
-  tableData.value = data.value;
-  if (
-    formData.value.billserial === "" &&
-    (formData.value.billType === undefined || formData.value.billType === "") &&
-    formData.value.stockDate === ""
-  ) {
-    tableList();
   } else {
-    const list = tableData.value.filter((item) => {
+    console.log("Validate Errors: ", firstError, validateResult);
-      console.log(item);
+    MessagePlugin.warning(firstError);
-      let arrList;
-      if (formData.value.billserial === item.billserial) {
-        arrList = item;
-      }
-      if (formData.value.billType === item.billType) {
-        arrList = item;
-      }
-      if (formData.value.stockDate === item.stockDate) {
-        arrList = item;
-      }
-      if (
-        formData.value.billserial === "" &&
-        formData.value.billType === "" &&
-        formData.value.stockDate === ""
-      ) {
-        arrList = item;
-      }
-      return arrList;
-    });
-    console.log(list);
-
-    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" }],
-  billType: [
-    { required: true, message: "请选择票据类型", trigger: ["blur", "change"] },
-  ],
-  stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
-  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
-  stockDate: [
-    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
-  ],
-  operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
-};
-const stockAdd = () => {};
-
 onMounted(() => {
-  tableList();
+  reqStockList();
 });
 </script>
 
@@ -404,15 +132,8 @@ onMounted(() => {
   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 {
-:deep(.t-form__controls-content) {
   justify-content: space-between;
 }
 </style>

src/stores/billStock.js

@@ -1,31 +0,0 @@
-import { defineStore } from "pinia";
-import { reqStockList } from "@/api/stockList";
-
-export const useStock = defineStore("menuManagement", {
-  state: () => {
-    return {
-      stockList: [],
-    };
-  },
-  actions: {
-    async getStockList() {
-      let { data } = await reqStockList();
-      this.stockList = data.list;
-      return this.stockList;
-    },
-    addStockList(arr) {
-      const index = this.stockList.findIndex((item) => item.id === arr.id);
-      if (index !== -1) {
-        this.stockList[index] = arr;
-      } else {
-        arr.id = new Date().getTime();
-        this.stockList.unshift(arr);
-      }
-    },
-    deleteStockList(item) {
-      let arr = this.stockList.filter((i) => i.id !== item.id);
-      this.stockList = arr;
-    },
-  },
-  persist: true,
-});

src/stores/index.js

@@ -1,9 +0,0 @@
-import { createPinia } from "pinia";
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-
-const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
-
-export { store };
-
-export default store;

vite.config.js

@@ -8,14 +8,6 @@ import { viteMockServe } from "vite-plugin-mock";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  server: {
-    proxy: {
-      "/api": {
-        target: "http://192.168.1.10:8000",
-        changeOrigin: true,
-      },
-    },
-  },
   plugins: [
     vue(),
     vueJsx(),