仓库管理列表页

yangfeng

2023-09-15 12e5839f8b2b958cbd3e0047ee5f9873ff65495d

仓库管理列表页

 src/assets/style/reset-element.scss

@@ -25,3 +25,17 @@
    padding: 0;
  }
}

// .el-menu-item {
//   margin: 8px;
//   border-radius: 6px;
//   i {
//     color: #fff;
//   }
// }
// .el-menu-item:hover,
// .el-menu-item:focus {
//   background-color: #0e6ce6;
//   background-position: center;
//   width: 160px !important;
// }

 src/components/layout/components/appsidebar/index.scss

@@ -16,10 +16,12 @@
    .icon {
      color: #bfcbd9;
    }
    .el-submenu__title:hover,
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: cornflowerblue;
    }
    // .el-submenu__title:hover,
    // .el-menu-item:focus,
    // .el-menu-item:hover {
    //   min-width: 180px;
    //   color: #fff;
    //   background-color: #2a78fb !important;
    // }
  }
}

 src/components/layout/components/appsidebar/index.vue

@@ -46,9 +46,9 @@
            <i class="el-icon-box icon"></i>
            <span>仓库管理</span>
          </template>
          <el-menu-item index="/productManage/product">仓库</el-menu-item>
          <el-menu-item index="/productManage/product">位置</el-menu-item>
          <el-menu-item index="/productManage/product">业务类型</el-menu-item>
          <el-menu-item index="/warehouseManage/warehouse">仓库</el-menu-item>
          <el-menu-item index="/warehouseManage/position">位置</el-menu-item>
          <el-menu-item index="/warehouseManage/bussinessType">业务类型</el-menu-item>
          <!-- <el-menu-item index="/productManage/product">上架规则</el-menu-item> -->
        </el-submenu>
      </el-menu>

 src/router/warehouseManage/index.js

@@ -1,23 +1,32 @@
// const type from '@/router/deployCode'

const product = (resolve) => require(["@/views/productManage/product/index"], resolve) // 产品管理
const overviewList = (resolve) => require(["@/views/overview/OverviewListView"], resolve) // 概述列表页
const warehouse = (resolve) => require(["@/views/warehouseManage/warehouse/index"], resolve) // 仓库
const position = (resolve) => require(["@/views/warehouseManage/position/index"], resolve) // 位置
const bussinessType = (resolve) => require(["@/views/warehouseManage/bussinessType/index"], resolve) // 业务类型

const appconfig = [
  {
    path: "/productManage/product",
    name: "product",
    component: product,
    path: "/warehouseManage/warehouse",
    name: "warehouse",
    component: warehouse,
    meta: {
      title: "产品管理"
      title: "仓库"
    }
  },
  {
    path: "/overview/overviewList",
    name: "overviewList",
    component: overviewList,
    path: "/warehouseManage/position",
    name: "position",
    component: position,
    meta: {
      title: "采购入库"
      title: "位置"
    }
  },
  {
    path: "/warehouseManage/bussinessType",
    name: "bussinessType",
    component: bussinessType,
    meta: {
      title: "业务类型"
    }
  }
]

 src/views/warehouseManage/bussinessType/index.vue

New file
@@ -0,0 +1,139 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :placeholder="'请输入单号'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          :show-checkcol="false"
          @tableRowClick="tableRowClick"
        ></TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddScrapDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddScrapDialog from "@/views/operate/scrap/AddScrapDialog"

export default {
  name: "WarehouseView",
  props: {},
  components: { AddScrapDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      searchOptions: [],
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
      }
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
        }
      }
      this.tableList.allcol = allcol
    },
    setTableColumn(showcol) {
      console.log(showcol)
      let tableColumn = [
        {
          label: "入库类型",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "仓库",
          prop: "deviceName",
          isShowColumn: true,
          default: true
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    // 请求数据
    async getData(val, content) {
      await getProductList({
        [val]: content,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
            return {
              ...item,
              supplierNumber: item.supplier.number,
              status: "草稿",
              preTime: "2023-09-04 11:20:00"
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.data.total
        }
      })
    },
    // 搜索
    getList(val) {
      console.log(val)
    },
    // 行点击
    tableRowClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>

 src/views/warehouseManage/position/index.vue

New file
@@ -0,0 +1,139 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :placeholder="'请输入单号'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          :show-checkcol="false"
          @tableRowClick="tableRowClick"
        ></TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddScrapDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddScrapDialog from "@/views/operate/scrap/AddScrapDialog"

export default {
  name: "WarehouseView",
  props: {},
  components: { AddScrapDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      searchOptions: [],
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
      }
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
        }
      }
      this.tableList.allcol = allcol
    },
    setTableColumn(showcol) {
      console.log(showcol)
      let tableColumn = [
        {
          label: "位置",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "位置类型",
          prop: "deviceName",
          isShowColumn: true,
          default: true
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    // 请求数据
    async getData(val, content) {
      await getProductList({
        [val]: content,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
            return {
              ...item,
              supplierNumber: item.supplier.number,
              status: "草稿",
              preTime: "2023-09-04 11:20:00"
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.data.total
        }
      })
    },
    // 搜索
    getList(val) {
      console.log(val)
    },
    // 行点击
    tableRowClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>

 src/views/warehouseManage/warehouse/index.vue

New file
@@ -0,0 +1,145 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :placeholder="'请输入单号'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          :show-checkcol="false"
          @tableRowClick="tableRowClick"
        ></TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddScrapDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddScrapDialog from "@/views/operate/scrap/AddScrapDialog"

export default {
  name: "WarehouseView",
  props: {},
  components: { AddScrapDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      searchOptions: [],
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
      }
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
        }
      }
      this.tableList.allcol = allcol
    },
    setTableColumn(showcol) {
      console.log(showcol)
      let tableColumn = [
        {
          label: "仓库",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "库存位置",
          prop: "deviceName",
          isShowColumn: true,
          default: true
        },
        {
          label: "地址",
          prop: "id",
          isShowColumn: true,
          default: true
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    // 请求数据
    async getData(val, content) {
      await getProductList({
        [val]: content,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
            return {
              ...item,
              supplierNumber: item.supplier.number,
              status: "草稿",
              preTime: "2023-09-04 11:20:00"
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.data.total
        }
      })
    },
    // 搜索
    getList(val) {
      console.log(val)
    },
    // 行点击
    tableRowClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>