产品出入库明细页面及公共组件优化

yangfeng

2023-09-15 36fb84a1ec003eb97502d8cc6f56bca67e1502a0

产品出入库明细页面及公共组件优化

 src/components/makepager/StatusCommonView.vue

@@ -2,7 +2,7 @@
  <div class="common-status">
    <div v-if="showButton" style="margin-left: 30px">
      <el-button plain size="mini" @click="delClick" :disabled="isDelClick">删除</el-button>
      <el-button plain size="mini" style="cursor: no-drop">打印</el-button>
      <el-button plain size="mini" disabled>打印</el-button>
    </div>
    <div class="arrowsBox">
      <div

 src/router/index.js

@@ -97,7 +97,7 @@
const router = createRouter()

router.afterEach((to, from, next) => {
  if (to.path === "/overview/overviewList" && to.query.name) {
  if ((to.path === "/overview/overviewList" || to.path === "/reportForm/inOutboundDetail") && to.query.name) {
    console.log(from, next)
    to.meta.title = to.query.name
    document.title = to.meta.title

 src/router/product/index.js

@@ -1,6 +1,7 @@
// const type from '@/router/deployCode'

const product = (resolve) => require(["@/views/productManage/product/index"], resolve) // 产品
const inOutboundDetail = (resolve) => require(["@/views/reportForm/inboundOutboundDetail/index"], resolve) // 出入库明细

const appconfig = [
  {
@@ -10,6 +11,14 @@
    meta: {
      title: "产品管理"
    }
  },
  {
    path: "/reportForm/inOutboundDetail",
    name: "inOutboundDetail",
    component: inOutboundDetail,
    meta: {
      title: "出入库明细"
    }
  }
]


 src/views/productManage/product/AddProductDialog.vue

@@ -32,9 +32,9 @@
        style="height: 60vh; overflow-x: hidden"
      >
        <div class="content-btn">
          <el-button plain size="mini">标签打印</el-button>
          <el-button plain size="mini">更新数量</el-button>
          <el-button plain size="mini">执行补货</el-button>
          <el-button plain size="mini" disabled>标签打印</el-button>
          <el-button plain size="mini" disabled>更新数量</el-button>
          <el-button plain size="mini" disabled>执行补货</el-button>
        </div>

        <div class="basic-info">
@@ -60,7 +60,7 @@
                <div class="right-label">预测</div>
              </div>
            </div>
            <div class="sub-number">
            <div class="sub-number" @click="inOutBoundClick" style="cursor: pointer">
              <div class="left icon-view"><i class="el-icon-sort"></i></div>
              <div class="right">
                <div class="right-label">{{ "进: " + 0 }}</div>
@@ -100,7 +100,11 @@
              <el-col :span="20">
                <div style="margin-left: 20px">产品名称</div>
                <el-form-item label="" prop="client_name" label-width="20px">
                  <el-input v-model="editConfig.infomation.client_name" placeholder=""></el-input>
                  <el-input
                    v-model="editConfig.infomation.client_name"
                    placeholder=""
                    :disabled="!showFooter"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
@@ -111,8 +115,8 @@
              </el-col>
              <el-col :span="24">
                <div style="margin-left: 20px; margin-top: -30px">
                  <el-checkbox v-model="marketable">可销售</el-checkbox>
                  <el-checkbox v-model="procurable">可采购</el-checkbox>
                  <el-checkbox v-model="marketable" :disabled="!showFooter">可销售</el-checkbox>
                  <el-checkbox v-model="procurable" :disabled="!showFooter">可采购</el-checkbox>
                </div>
              </el-col>
            </el-row>
@@ -320,12 +324,11 @@
              <div class="purchase-view">
                <div class="left">
                  <div class="second-label">作业</div>
                  <el-form-item label="路线" prop="client_name" style="margin-left: 20px">
                    <el-checkbox-group v-model="editConfig.infomation.type">
                      <el-checkbox label="贝思科供应产品来自北京仓" name="type"></el-checkbox>
                      <el-checkbox label="贝思科-warehouse#6:供应产品来自贝思科123" name="type"></el-checkbox>
                      <el-checkbox label="贝思科-warehouse#4:供应产品来自北京仓" name="type"></el-checkbox>
                      <el-checkbox label="贝思科-warehouse#4:供应产品来自贝思科123" name="type"></el-checkbox>
                  <el-form-item label="路线" prop="checkedCities" style="margin-left: 20px">
                    <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                      <el-checkbox v-for="city in cities" :label="city" :key="city" class="list-item">{{
                        city.length > 20 ? city.substring(0, 20) + "..." : city
                      }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
@@ -352,7 +355,7 @@
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input>
                    <span>kg</span>
                    <span> kg</span>
                  </el-form-item>
                  <el-form-item label="体积" prop="client_name" style="margin-left: 20px">
                    <el-input
@@ -362,7 +365,7 @@
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input>
                    <span>m³</span>
                    <span> m³</span>
                  </el-form-item>
                  <el-form-item label="客户前置时间" prop="client_name" style="margin-left: 20px">
                    <el-input
@@ -372,7 +375,7 @@
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input>
                    <span>天</span>
                    <span> 天</span>
                  </el-form-item>
                  <el-form-item label="HS编码" prop="name" style="margin-left: 20px">
                    <el-input
@@ -471,7 +474,7 @@
        return {
          visible: false,
          title: "新建",
          infomation: {}
          infomation: { type: [] }
        }
      }
    }
@@ -507,7 +510,9 @@
      showFooter: false, // 是否显示取消保存
      imageSrc: "", // 图片地址
      marketable: true, // 可销售
      procurable: true // 可采购
      procurable: true, // 可采购
      checkedCities: ["上海", "北京"],
      cities: ["上海对对对对对对多多多多多多多北京对对对对对对", "北京对对对对对对多", "广州", "深圳"]
    }
  },
  created() {
@@ -521,32 +526,10 @@
        this.showButton = false
        this.showEdit = false
        this.showFooter = true
      } else {
        this.showEdit = true
        this.showFooter = false
      }
      // } else if (this.editConfig.infomation.status === "完成") {
      //   this.showButton = true
      //   this.showEdit = false
      //   this.isDelClick = true
      //   this.showFooter = false
      // } else if (this.editConfig.infomation.status === "已取消") {
      //   this.showButton = true
      //   this.showEdit = false
      //   this.showFooter = false
      // } else {
      //   this.showButton = true
      //   this.showEdit = true
      //   this.showFooter = false
      // }
      // if (this.editConfig.title === "新建") {
      //   this.list[0].status = "active"
      // } else {
      //   this.list.map((item) => {
      //     if (item.label === this.editConfig.infomation.status) {
      //       item.status = "active"
      //     } else {
      //       item.status = "todo"
      //     }
      //   })
      // }
    },
    // 关闭
    handleClose() {
@@ -621,19 +604,21 @@
    },
    // 上传图片
    toGetImg() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input")
        inputElement.setAttribute("type", "file")
        inputElement.style.display = "none"
        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile, false)
        } else {
          inputElement.attachEvent("onchange", this.uploadFile)
      if (this.showFooter) {
        if (inputElement === null) {
          // 生成文件上传的控件
          inputElement = document.createElement("input")
          inputElement.setAttribute("type", "file")
          inputElement.style.display = "none"
          if (window.addEventListener) {
            inputElement.addEventListener("change", this.uploadFile, false)
          } else {
            inputElement.attachEvent("onchange", this.uploadFile)
          }
          document.body.appendChild(inputElement)
        }
        document.body.appendChild(inputElement)
        inputElement.click()
      }
      inputElement.click()
    },
    uploadFile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
@@ -662,6 +647,10 @@
          }
        }
      }
    },
    // 进出点击
    inOutBoundClick() {
      this.$router.push({ path: "/reportForm/inOutboundDetail", query: { name: "产品名称/出入库明细" } })
    }
  }
}
@@ -757,6 +746,9 @@
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 10px;
  }
  .list-item {
    width: 300px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

 src/views/productManage/product/index.vue

@@ -29,7 +29,7 @@
      </div>
      <!-- 图表形式 -->
      <div v-if="isIconIndex === '1'" class="product-view">
        <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id">
        <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="tableRowClick(item)">
          <div class="left">
            <el-image style="width: 60px; height: 80px" :src="url"></el-image>
          </div>

 src/views/reportForm/inboundOutboundDetail/index.vue

New file
@@ -0,0 +1,199 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :showAdd="false"
        :placeholder="'请输入参考'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <TableCommonView
        ref="tableListRef"
        :table-list="tableList"
        @selTableCol="selTableCol"
        @tableRowClick="tableRowClick"
      ></TableCommonView>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "InboundOutboundDetail",
  props: {},
  components: {},
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      showcol: ["状态"],
      searchOptions: [],
      commonDetail: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      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) {
      let tableColumn = [
        {
          label: "日期",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "参考",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "从",
          prop: "deviceName",
          isShowColumn: true,
          default: true
        },
        {
          label: "至",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "公司",
          prop: "shopName",
          isShowColumn: showcol.includes("公司"),
          default: false
        },
        {
          label: "数量",
          prop: "deviceId",
          isShowColumn: true,
          default: true
        },
        {
          label: "状态",
          prop: "status",
          width: 120,
          isShowColumn: showcol.includes("状态"),
          default: false,
          status: true
        },
        {
          label: "完成者",
          prop: "preTime",
          isShowColumn: showcol.includes("完成者"),
          default: false
        }
      ]
      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>
// .rightContent {
//   height: 100%;
//   background: #e6ecf2;
//   padding: 10px;
//   .top {
//     margin-bottom: 20px;
//     height: 60px;
//     background: #fff;
//     border-radius: 8px;
//   }
//   .list-view {
//     height: calc(100% - 120px);
//   }
// }
</style>

 src/views/reportForm/index.vue

New file
@@ -0,0 +1,21 @@
<template>
  <div class="content">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "CustomM",
  props: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;
  background-color: #fff;
  height: calc(100vh - 70px);
}
</style>