新增出入库明细页面，添加无权限展示页面，接口调整

zuozhengqing

2023-12-12 b4b3cb3641ecdf56cdfdf3532e5acf4af46fbe48

新增出入库明细页面，添加无权限展示页面，接口调整

 src/api/menus/index.js

New file
@@ -0,0 +1,10 @@
import request from "@/common/untils/request.js"

// 左侧菜单
export function getMenuTreeByRole(data) {
  return request({
    url: "/api/menu/getMenuTreeByRole",
    method: "get",
    data
  })
}

 src/api/reportForm/inventoryRwport.js

@@ -37,6 +37,14 @@
    data
  })
}
// 出入库明细
export function listByCondition(data) {
  return request({
    url: "/api-wms/v1/operation/listByCondition",
    method: "post",
    data
  })
}
//查询单条详情接口
export function getOperationInfo(data) {
  return request({

 src/assets/img/noJurisdiction.png

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

@@ -16,53 +16,14 @@
        text-color="#bfcbd9"
        active-text-color="#fff"
      >
        <el-menu-item index="/overview">
          <template slot="title">
            <i class="el-icon-bank-card icon"></i>
            <span>概述</span>
          </template>
          <!-- <el-menu-item index="/supplierManage/supplier">供应商</el-menu-item> -->
        </el-menu-item>
        <el-submenu index="2">

        <el-submenu  v-for="item in menus" :key="item.id" :index="item.id">
          <template slot="title">
            <i class="el-icon-s-grid icon"></i>
            <span>产品</span>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item index="/productManage/product">产品</el-menu-item>
          <el-menu-item index="/productManage/productCategory">产品类别</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting icon"></i>
            <span>库存操作</span>
          </template>
          <!-- <el-menu-item index="/productManage/product">补货</el-menu-item> -->
          <el-menu-item index="/operate/inventoryAdjustment">库存调整</el-menu-item>
          <el-menu-item index="/operate/allot">库存调拨</el-menu-item>
          <el-menu-item index="/operate/scrap">库存报废</el-menu-item>
          <el-menu-item index="/operate/orderPoint">补货</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-box icon"></i>
            <span>仓库管理</span>
          </template>
          <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="/warehouseManage/listingRules">上架规则</el-menu-item>
          <el-menu-item index="/productManage/reorderRules">重订货规则</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-box icon"></i>
            <span>报表</span>
          </template>
          <el-menu-item index="/reportForm/inventoryReport">库存报表</el-menu-item>
          <el-menu-item index="/reportForm/locationReport">位置报表</el-menu-item>
          <!-- <el-menu-item index="/warehouseManage/bussinessType">某日库存</el-menu-item> -->
          <el-menu-item index="/reportForm/inboundOutboundDetail">入库明细报表</el-menu-item>
          <el-menu-item index="/reportForm/outboundDetail">出库明细报表</el-menu-item>
          <el-menu-item v-for="itm in item.children" :key="itm.id"  :index="itm.path">{{ itm.title }}</el-menu-item>
        
        </el-submenu>
      </el-menu>
    </div>
@@ -70,23 +31,41 @@
</template>

<script>
import {getMenuTreeByRole} from "@/api/menus/index"
import {  mapMutations } from 'vuex';  
export default {
  name: "AppSidebar",
  props: {},
  data() {
    return {}
    return {
      menus:[]
    }
  },
  watch: {},
  created() {
    this.initNavMenu()
    this.getMenuTreeByRole()
  },
  computed:{
    // ...mapState(['menus']),  
  },
  methods: {
    ...mapMutations(['setMenus']),  
    getMenuTreeByRole(){
      getMenuTreeByRole().then((res)=>{
        res.data.list.map((item)=>{
          if(item.systemType===3){
            this.menus=item.menus
          }
        })
      })
    },
    // 监听路由
    initNavMenu() {
      // console.log(this.$route.name)
    },
    handleOpen(index) {
      console.log(index)
      console.log(index,"menuIndex")
    },
    handleClose() {}
  }

 src/router/index.js

@@ -14,8 +14,19 @@
const operate = (resolve) => require(["@/views/operate/index"], resolve) // 操作
const warehouseManage = (resolve) => require(["@/views/warehouseManage/index"], resolve) // 仓库管理
const reportForm = (resolve) => require(["@/views/reportForm/index"], resolve) // 报表
const noData = (resolve) => require(["@/views/NoData/index"], resolve)

export const routes = [
  // 无权限数据页面
  {
    path: "/",
    name: "NoData",
    meta: {
      title: "",
      auth: true,
    },
    component: noData,
  },
  {
    path: "overview", // 概述
    name: "overview",

 src/router/operate/index.js

@@ -3,6 +3,7 @@
const allot = (resolve) => require(["@/views/operate/allot/index"], resolve) // 调拨
const scrap = (resolve) => require(["@/views/operate/scrap/index"], resolve) // 报废
const orderPoint = (resolve) => require(["@/views/operate/orderPoint/index"], resolve) // 报废
const outEnterLibrary = (resolve) => require(["@/views/operate/outEnterLibrary/index"], resolve) // 报废
const inventoryAdjustment = (resolve) => require(["@/views/operate/inventoryAdjustment/index"], resolve) // 库存调整
const inventoryAdjustmentHistory = (resolve) =>
  require(["@/views/operate/inventoryAdjustment/inventoryAdjustmentHistory"], resolve) // 库存调整历史
@@ -33,6 +34,14 @@
    }
  },
  {
    path: "/operate/outEnterLibrary",
    name: "outEnterLibrary",
    component: outEnterLibrary,
    meta: {
      title: "出入库明细"
    }
  },
  {
    path: "/operate/inventoryAdjustment",
    name: "inventoryAdjustment",
    component: inventoryAdjustment,

 src/store/index.js

@@ -4,11 +4,15 @@
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  state: { 
    menus: null,  
  },
  getters: {
  },
  mutations: {
    setMenus(state, payload) {  
      state.menus = payload;  
    },
  },
  actions: {
  },

 src/views/NoData/index.vue

New file
@@ -0,0 +1,62 @@
<template>
  <d2-container>
    <div class="content">
      <el-empty :image="require('@/assets/img/noJurisdiction.png')" description="您尚未获得访问权限。">
        <p>请您联系主账号登录访问控制，为您授予服务的相关权限。</p>
      </el-empty>
    </div>
  </d2-container>
</template>

<script>

export default {
  name: "NoData",
  components: {
  },
  
  computed: {
   
  },
  data() {
    return {
     
    };
  },
  mounted() {},
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

// 显示列表
.content {
  width: 100%;
  height:100%;
  min-height: 300px;
  overflow: hidden;
  background:#fff;
  padding:30px 0;
  border-radius: 4px;
  .el-empty{
    width: 100%;
    height:calc(100% - 280px);
    p{
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }
}

::v-deep .el-empty__bottom{
  margin: 0 !important;
}
::v-deep .el-empty__description{
  margin: 0 !important;

}
</style>

 src/views/operate/outEnterLibrary/index.vue

New file
@@ -0,0 +1,294 @@
<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">
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selTableCol="selTableCol"
        >
          <template slot="tableButton">
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="tableRowClick(scope.row, '查看')" type="text" size="small">查看</el-button>
                <el-button
                  v-if="Number(scope.row.status) !== 4&&Number(scope.row.status) !== 5"
                  @click="tableRowClick(scope.row, '编辑')"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 查看/编辑 -->
    <AddOverviewDialog 
      v-if="editConfig.visible" 
      :edit-common-config="editConfig" 
      :add-name="addName"
    />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { listByCondition,getOperationInfo } from "@/api/reportForm/inventoryRwport"
// import { getProductOperatonList } from "@/api/product/product"

import AddOverviewDialog from "@/views/overview/AddOverviewDialog"
import { getDataByType } from "@/api/data"
export default {
  name: "InboundOutboundDetail",
  props: {},
  components: { AddOverviewDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      addName:'',
      tableList: {},
      showcol: ["状态"],
      searchOptions: [],
      commonDetail: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      params: {},
      baseOperationTypeList:getDataByType("baseOperationTypeTwo"),
    }
  },
  created() {
    this.setTable()
    console.log(this.$route.params)
    var paramsList = sessionStorage.getItem("paramsList")
    let params = {}
    if (paramsList) {
      params = JSON.parse(sessionStorage.getItem("paramsList"))
    } else {
      params = this.$route.params
      sessionStorage.setItem("paramsList", JSON.stringify(params))
    }
    this.params = params
    console.log(this.params,'====111')
    this.getData()
  },
  // 页面销毁之前
  beforeDestroy() {
    sessionStorage.removeItem("paramsList")
  },
  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: "date",
          isShowColumn: true,
          default: true,
          // date: true
        },
        {
          label: "单号",
          prop: "number",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品",
          prop: "productName",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品编码",
          prop: "productId",
          isShowColumn: true,
          default: true
        },
        {
          label: "业务类型",
          prop: "baseOperationType",
          isShowColumn: true,
          default: true,
          conversion: true,
          getStatus: this.getBaseOperationTypeList
        },
        {
          label: "从",
          prop: "fromLocation",
          isShowColumn: true,
          default: true
        },
        {
          label: "至",
          prop: "toLocation",
          isShowColumn: true,
          default: true
        },
        {
          label: "数量",
          prop: "amount",
          isShowColumn: true,
          default: true
        },
        {
          label: "单位",
          prop: "unit",
          isShowColumn: true,
          default: true
        },
        {
          label: "重量",
          prop: "weight",
          isShowColumn: true,
          default: true
        },
        {
          label: "状态",
          prop: "status",
          width: 120,
          isShowColumn: showcol.includes("状态"),
          default: false,
          status: true,
          isCallMethod: true,
          getCallMethod: this.getStatus
        },
        {
          label: "完成者",
          prop: "contactedName",
          isShowColumn: showcol.includes("完成者"),
          default: false
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    getBaseOperationTypeList(val){
      let string = "--"
      if (val) {
        for (let i in this.baseOperationTypeList) {
          if (this.baseOperationTypeList[i].id == val) {
            return this.baseOperationTypeList[i].name
          }
        }
      }
      return string
    },
    // 库存报表跳转请求数据
    async getData() {
      if (this.params.name === "报表") {
        await listByCondition({
          keyWord:this.params.keyWord,
          produceId:this.params.produceId,
          unit:this.params.unit,
          productName:this.params.productName,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200&&res.data) {
            res.data.map((item)=>{
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data||[]
          }else{
            this.tableList.tableInfomation = res.data||[]
          }
          this.pagerOptions.totalCount = res.total
        })
      } else {
        await listByCondition({
          // baseOperationType:1,
          condition:this.params.keyWord,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200&&res.data) {
            res.data.map((item)=>{
                if(item.status===""){
                  item.status=4
                }
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data||[]
          }else{
            this.tableList.tableInfomation = res.data||[]
          }
          this.pagerOptions.totalCount = res.total
        })
      }
    },
    // 搜索
    getList(val) {
      this.params.keyWord=val;
      this.getData()
    },
    tableRowClick(row,val) {
      this.editConfig.title = val
      getOperationInfo(row.operationId).then((res)=>{
        this.editConfig.infomation = { ...res.data }
        this.editConfig.visible = true
      })
      // this.editConfig.visible = true
      // this.editConfig.title = "查看"
    },
    // 新建
    addBtnClick() {
      // this.editConfig.visible = true
      this.editConfig.title = "新建"
    },
    // 状态
    getStatus(val) {
      let newVal=Number(val)
      return newVal === 1 ? "草稿" : newVal === 3 ? "就绪" : newVal=== 4 ?"完成":newVal=== 5 ?"已取消":" "
    }
  }
}
</script>

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

 src/views/overview/AddOverviewDialog.vue

@@ -6,7 +6,7 @@
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title === "查看" ? editCommonConfig.title : editCommonConfig.title + addName }}</span>
        <div class="header_btns">
          <span class="btn" @click="btnPrint">
          <span class="btn" :style="{cursor:thatCursor,color:thatColor}" @click="btnPrint" :disabled="true">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </span>
@@ -183,13 +183,13 @@
            </div>
            <!-- 物流信息 -->
            <div v-if="activeName === 'two' && this.workType === 2">
              <el-form :rules="rules" ref="shipmentsInfo" label-position="right" :model="shipmentsInfo" label-width="120px" size="mini"
              <el-form :rules="rules2" ref="shipmentsInfo" label-position="right" :model="editConfig.infomation" label-width="120px" size="mini"
                style="margin-top: 20px;">
                <el-col :span="12">
                  <el-form-item label="承运商">
                    <el-select size="mini" :disabled="!showFooter" v-model="editConfig.infomation.logisticCompanyId"
                      placeholder="请选择" style="width: 90%;">
                      <el-option v-for="item in shipmentsInfo.carrier" :key="item.id" :label="item.name" :value="item.id">
                      <el-option v-for="item in editConfig.infomation.carrier" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
@@ -257,7 +257,7 @@
      <!-- 尾 -->
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" size="small" @click="editConfig.visible = false">保并提交审批</el-button> -->
        <el-button type="primary" size="small" @click="saveClick('form','shipmentsInfo')" :disabled="!showFooter">保存</el-button>
        <el-button type="primary" size="small" @click="saveClick" :disabled="!showFooter">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
@@ -317,8 +317,10 @@
        toLocationId: [{ required: true, message: "请选择仓库位置", trigger: "change" }],
        fromLocationId: [{ required: true, message: "请选择源位置", trigger: "change" }],
        operationTypeId: [{ required: true, message: "请选择入库类型", trigger: "change" }],
        receiverPhone: [
          {required: true, message: "请输入手机号", trigger: "change" },
      }, 
      rules2:{
        receiverPhone:  [
          // {required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern:
              /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
@@ -326,8 +328,7 @@
            trigger: ["blur",'change' ],
          },
        ] 
        
      }, 
      },
      companyOptions: [], // 公司
      supplierOptions: [],//供应商
      clientOptions: [],//客户
@@ -359,10 +360,13 @@
        waybillNumber: '',
        weight: 0,
        logisticWeight: 0,
        receiverPhone:''
      },
      showCancel: false, // 取消是否可以显示
      list: [],
      pdfParams:{}
      pdfParams:{},
      thatCursor:this.workType===3?"no-drop":'pointer',
      thatColor:this.workType===3?'#ccc':'#000'
    }
  },
  created() {
@@ -531,40 +535,56 @@
    async getLogisticCompanyList() {
      await getLogisticCompanyList().then((res) => {
        if (res.code === 200) {
          this.shipmentsInfo.carrier = res.data
          this.editConfig.infomation.carrier = res.data
        }
      })
    },
    // 保存
    saveClick(formName,shipmentsInfo) {
      this.$refs[formName,shipmentsInfo].validate((valid) => {
        if (valid) {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].productName.length === 0) {
              this.isNoProduct = true
              break
            } else {
              this.isNoProduct = false
            }
          }
          if (this.isNoProduct) {
            this.$message.error("请添加明细行或选择产品不能为空")
    saveClick() {
      let validArr=[]
      if(this.workType === 2){
         console.log("出库")
         validArr=[this.$refs.form.validate(),this.$refs.shipmentsInfo.validate()]
      }else{
        console.log("入库")
        validArr=[this.$refs.form.validate()]
      }
      console.log(validArr,"xxx")
      Promise.all(validArr)
      .then((results) => {
        console.log(results,"执行成功")
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].productName.length === 0) {
            this.isNoProduct = true
            break
          } else {
            let requestUrl = this.editConfig.title === "新建" ? addOperation : updateOperation
            let params = this.saveParams()
            requestUrl({
              ...params
            }).then((res) => {
              console.log(res)
              this.editConfig.visible = false
              if (res.code === 200) {
                this.$message.success("添加成功")
                this.$parent.getData()
              }
            })
            this.isNoProduct = false
          }
        }
        if (this.isNoProduct) {
          this.$message.error("请添加明细行或选择产品不能为空")
        } else {
          let requestUrl = this.editConfig.title === "新建" ? addOperation : updateOperation
          let params = this.saveParams()
          requestUrl({
            ...params
          }).then((res) => {
            console.log(res)
            this.editConfig.visible = false
            if (res.code === 200) {
              if(this.editConfig.title === "新建"){
                this.$message.success("添加成功")
              }else {
                this.$message.success("编辑成功")
              }
              this.$parent.getData()
            }
          })
        }
      })
      .catch((error) => {
        console.error('表单校验未通过:', error);
      });
    },
    saveParams() {
      let data = this.editConfig.infomation
@@ -801,29 +821,32 @@
    },
    //打印
    async btnPrint() {
      localStorage.removeItem('pdfParams');
      try {
        let res = await printReceipts(this.editCommonConfig.infomation.id);
        console.log(res);
        if (res.code === 200) {
          console.log(this.editConfig.infomation.baseOperationType,"类型")
          let pdfParams = {
            url: res.data,
            baseOperationType: this.editConfig.infomation.baseOperationType || undefined,
            cutAfterWidth: this.editConfig.infomation.baseOperationType === 2 ? 50.8 : 53.3
          };
          var { href } = this.$router.resolve({
              path: '/overview/previewExcel',
              query:{
                ...pdfParams
              }
             
          });
          window.open(href, '_blank');
      if(this.workType!==3){
        localStorage.removeItem('pdfParams');
        try {
          let res = await printReceipts(this.editCommonConfig.infomation.id);
          console.log(res);
          if (res.code === 200) {
            console.log(this.editConfig.infomation.baseOperationType,"类型")
            let pdfParams = {
              url: res.data,
              baseOperationType: this.editConfig.infomation.baseOperationType || undefined,
              cutAfterWidth: this.editConfig.infomation.baseOperationType === 2 ? 50.8 : 53.3
            };
            var { href } = this.$router.resolve({
                path: '/overview/previewExcel',
                query:{
                  ...pdfParams
                }
              
            });
            window.open(href, '_blank');
          }
        } catch (error) {
          console.error(error);
        }
      } catch (error) {
        console.error(error);
      }
      
    }
  }
}
@@ -847,6 +870,7 @@

    .btn:nth-of-type(2) {
      cursor: no-drop;
      color:#ccc;
    }
  }
}

 vue.config.js

@@ -24,7 +24,14 @@
        target:"http://fai365.com:9083",
        ws: true,
        changeOrigin: true
      }
      },
      "/api/menu": {
        target: "http://192.168.20.119:8001",
         //注： 暂时使用====用戶权限，角色暂时用的环境
        //  target: "http://192.168.20.119:8011",
        ws: true,
        changeOrigin: true,
      },
    }
  },
  transpileDependencies: [