系统-基础-统计报表

src/views/wmsStatisticalReports/inventoryReport.vue

@@ -1,8 +1,182 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>12134545456</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '单号'
+  },
+  {
+    prop: 'name2',
+    label: '类型'
+  },
+  {
+    prop: 'name3',
+    label: '品名'
+  },
+  {
+    prop: 'name4',
+    label: '规格'
+  },
+  {
+    prop: 'name5',
+    label: '物料编码'
+  },
+  {
+    prop: 'name6',
+    label: '数量'
+  }
+]
+
 export default {
-  name: 'InventoryReport'
+  name: 'InventoryReport',
+  components: { Pagination, BaseTable, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: '单号或品名',
+          param: 'name'
+        },
+        {
+          type: 'datePicker',
+          dateType: 'daterange',
+          rangeSeparator: '至',
+          startPlaceholder: '开始日期',
+          endPlaceholder: '结束日期',
+          label: '时间范围',
+          param: 'dateArr'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: '2022040696',
+          name2: '类别1',
+          name3: '成品',
+          name4: '中型',
+          name5: 'E554846167',
+          name6: '96'
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>