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

zuozhengqing

2023-12-12 b4b3cb3641ecdf56cdfdf3532e5acf4af46fbe48

 src/views/overview/AddOverviewDialog.vue

@@ -1,16 +1,12 @@
<template>
  <div class="add-common">
    <el-dialog
      :title="editCommonConfig.title + '采购入库'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
    <el-dialog :title="editCommonConfig.title + '采购入库'" :visible.sync="editConfig.visible" :width="dialogWidth"
      :before-close="handleClose">
      <!-- 头 -->
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title === "查看" ? editCommonConfig.title : editCommonConfig.title + addName }}</span>
        <div class="header_btns">
          <span class="btn">
          <span class="btn" :style="{cursor:thatCursor,color:thatColor}" @click="btnPrint" :disabled="true">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </span>
@@ -18,28 +14,18 @@
            <i class="el-icon-s-tools"></i>
            <span>动作</span>
          </span>
          <el-button v-if="showEdit" plain size="mini" style="margin-left: 15px" @click="editClick">编辑</el-button>
          <el-button v-if="showEdit" :disabled="this.editConfig.infomation.status === 5" plain size="mini"
            style="margin-left: 15px" @click="editClick">编辑</el-button>
        </div>
      </div>
      <!-- 内容 -->
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="120px"
        size="mini"
      >
      <el-form ref="form" :model="editConfig.infomation" :rules="rules" label-position="right" label-width="120px"
        size="mini">
        <div>
          <!-- <div>aaa</div> -->
          <StatusCommonView
            :showButton="showButton"
            :isValidateClick="isValidateClick"
            :isDelClick="isDelClick"
            :list="list"
            @delClick="delClick"
            @validateClick="validateClick"
          />
          <StatusCommonView :showButton="showButton" :isValidateClick="isValidateClick" :isDelClick="isDelClick"
            :isCancel="isCancel" :list="list" :showCancel="showCancel" @delClick="delClick" @validateClick="validateClick"
            @btnCancel="btnCancel" />
        </div>
        <div class="basic-info">
          <div class="basic-info-view">
@@ -47,22 +33,26 @@
              <el-col :span="12">
                <el-form-item prop="companyName">
                  <span slot="label">{{ workType === 1 ? "供应商" : workType === 2 ? "客户" : "联系人" }}</span>
                  <el-select
                    v-model="editConfig.infomation.companyName"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                    @change="companyChange"
                  >
                    <el-option
                      v-for="item in companyOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="{ value: item.id, label: item.name }"
                    >

                  <el-select v-if="workType === 1" v-model="editConfig.infomation.companyName" placeholder="请选择"
                    size="mini" style="width: 90%" :disabled="!showFooter" @change="companyChange">
                    <el-option v-for="item in supplierOptions" :key="item.SupplierId" :label="item.SupplierName"
                      :value="{ value: item.SupplierId, label: item.SupplierName }">
                    </el-option>
                  </el-select>
                  <el-select v-else-if="workType === 2" v-model="editConfig.infomation.companyName" placeholder="请选择"
                    size="mini" style="width: 90%" :disabled="!showFooter" @change="companyChange">
                    <el-option v-for="item in clientOptions" :key="item.ClientId" :label="item.ClientName"
                      :value="{ value: item.ClientId, label: item.ClientName }">
                    </el-option>
                  </el-select>
                  <el-select v-else v-model="editConfig.infomation.companyName" placeholder="请选择" size="mini"
                    style="width: 90%" :disabled="!showFooter" @change="companyChange">
                    <el-option v-for="item in companyOptions" :key="item.id" :label="item.name"
                      :value="{ value: item.id, label: item.name }">
                    </el-option>
                  </el-select>

                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
@@ -95,26 +85,15 @@
              </el-col> -->
              <el-col :span="12">
                <el-form-item label="日期" prop="operationDate">
                  <el-date-picker
                    v-model="editConfig.infomation.operationDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                  <el-date-picker v-model="editConfig.infomation.operationDate" value-format="yyyy-MM-dd" type="date"
                    placeholder="选择日期" style="width: 90%" :disabled="!showFooter">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col v-if="showOperationType" :span="12">
                <el-form-item label="入库类型" prop="operationTypeId">
                  <el-select
                    v-model="editConfig.infomation.operationTypeId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                  <el-select v-model="editConfig.infomation.operationTypeId" placeholder="请选择" size="mini"
                    style="width: 90%" :disabled="!showFooter">
                    <el-option v-for="item in operationTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
@@ -127,68 +106,34 @@
              </el-col>
              <el-col :span="12">
                <el-form-item label="来源单据" prop="sourceNumber">
                  <el-input
                    v-model="editConfig.infomation.sourceNumber"
                    placeholder="例如:PO0032"
                    style="width: 90%"
                    :disabled="!showFooter"
                  ></el-input>
                  <el-input v-model="editConfig.infomation.sourceNumber" placeholder="例如:PO0032" style="width: 90%"
                    :disabled="!showFooter"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="workType !== 1" label="源位置" prop="fromLocationId">
                  <el-select
                    v-model="editConfig.infomation.fromLocationId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option
                      v-for="item in toLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="item.id"
                    >
                  <el-select v-model="editConfig.infomation.fromLocationId" placeholder="请选择" size="mini"
                    style="width: 90%" :disabled="!showFooter">
                    <el-option v-for="item in toLocationOptions" :key="item.id" :label="item.jointName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="workType !== 2" label="仓库位置" prop="toLocationId">
                  <el-select
                    v-model="editConfig.infomation.toLocationId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option
                      v-for="item in toLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="item.id"
                    >
                  <el-select v-model="editConfig.infomation.toLocationId" placeholder="请选择" size="mini" style="width: 90%"
                    :disabled="!showFooter">
                    <el-option v-for="item in toLocationOptions" :key="item.id" :label="item.jointName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人" prop="contacterName">
                  <el-select
                    v-model="editConfig.infomation.contacterName"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                    @change="contacterChange"
                  >
                    <el-option
                      v-for="item in memberOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="{ value: item.id, label: item.name }"
                    >
                  <el-select v-model="editConfig.infomation.contacterName" placeholder="请选择" size="mini"
                    style="width: 90%" :disabled="!showFooter" @change="contacterChange">
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.name"
                      :value="{ value: item.id, label: item.name }">
                    </el-option>
                  </el-select>
                </el-form-item>
@@ -209,14 +154,8 @@
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="备注" prop="comment">
                  <el-input
                    v-model.trim="editConfig.infomation.comment"
                    size="mini"
                    type="textarea"
                    style="width: 96%"
                    :autosize="{ minRows: 3 }"
                    :disabled="!showFooter"
                  ></el-input>
                  <el-input v-model.trim="editConfig.infomation.comment" size="mini" type="textarea" style="width: 96%"
                    :autosize="{ minRows: 3 }" :disabled="!showFooter"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
@@ -225,15 +164,12 @@
            <el-tabs v-model="activeName" type="card">
              <!-- <el-tab-pane v-if="workType !== 1" label="详情" name="detail"> </el-tab-pane> -->
              <el-tab-pane label="产品" name="first"> </el-tab-pane>
              <el-tab-pane label="物流信息" name="two" v-if="this.workType === 2"></el-tab-pane>
            </el-tabs>
            <!-- 操作 -->
            <div v-if="activeName === 'first'">
              <CommonFormTableView
                :product-table-list="productTableList"
                :detail-enter="!showFooter"
                @inputContent="inputContent"
                @addProductClick="addProductClick('操作')"
              >
              <CommonFormTableView :product-table-list="productTableList" :detail-enter="!showFooter"
                @inputContent="inputContent" @addProductClick="addProductClick('操作')">
                <template v-if="showFooter" slot="tableButton">
                  <el-table-column label="操作" width="60" fixed="right" align="center">
                    <template slot-scope="scope">
@@ -244,6 +180,57 @@
                  </el-table-column>
                </template>
              </CommonFormTableView>
            </div>
            <!-- 物流信息 -->
            <div v-if="activeName === 'two' && this.workType === 2">
              <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 editConfig.infomation.carrier" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="运单号">
                    <el-input style="width: 90%;" :disabled="!showFooter"
                      v-model="editConfig.infomation.waybillNumber"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收货人">
                    <el-input style="width: 90%;" :disabled="!showFooter"
                      v-model="editConfig.infomation.receiverName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="receiverPhone">
                    <el-input style="width: 90%;" :disabled="!showFooter"
                      v-model="editConfig.infomation.receiverPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收货地址">
                    <el-input style="width: 90%;" :disabled="!showFooter"
                      v-model="editConfig.infomation.receiverAddr"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="重量">
                    <el-input style="width: 90%;" :disabled="!showFooter" type="number"
                      v-model="editConfig.infomation.weight"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="物流重量">
                    <el-input style="width: 90%;" :disabled="!showFooter" type="number"
                      v-model="editConfig.infomation.logisticWeight"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
            <!-- 详情 -->
            <!-- <div v-if="activeName === 'detail'">
@@ -270,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')" :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>
@@ -284,10 +271,13 @@
  addOperation,
  updateOperation,
  updateStatus,
  stateCancel,
  deleteOperation,
  getListTransfer
  getListTransfer,
  getLogisticCompanyList,
  printReceipts
} from "@/api/overview/overview"
import { getCompanyList } from "@/api/common/other"
import { getSupplierList, getCompanyList, getClientList } from "@/api/common/other"
export default {
  name: "AddOverviewDialog",
  props: {
@@ -326,17 +316,24 @@
        operationDate: [{ required: true, message: "请选择日期", trigger: "change" }],
        toLocationId: [{ required: true, message: "请选择仓库位置", trigger: "change" }],
        fromLocationId: [{ required: true, message: "请选择源位置", trigger: "change" }],
        operationTypeId: [{ required: true, message: "请选择入库类型", trigger: "change" }]
        operationTypeId: [{ 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}$/,
            message: "请输入正确的手机号",
            trigger: ["blur",'change' ],
          },
        ] 
      },
      companyOptions: [], // 公司
      supplierOptions: [],//供应商
      clientOptions: [],//客户
      memberOptions: [{ id: 1, name: "管理员" }],
      toLocationOptions: [], //  源位置 仓库位置
      list: [
        { label: "草稿", status: "todo", value: 1 },
        { label: "正在等待", status: "todo", value: 2 },
        { label: "就绪", status: "todo", value: 3 },
        { label: "完成", status: "todo", value: 4 }
      ],
      showButton: true,
      activeName: "first",
      productTableList: {},
@@ -345,6 +342,7 @@
      isNoProduct: true, // 添加明细行时是否有产品未选择
      showEdit: false, // 是否显示编辑按钮
      isDelClick: false, // 删除按钮是否可点击
      isCancel: false, //验证按钮是否可点击
      showFooter: false, // 是否显示取消保存
      currentState: "todo", // 当前状态
      detailTableList: {},
@@ -356,29 +354,77 @@
      companyObj: {},
      contacterObj: {},
      isValidateClick: false, // 验证是否显示
      operationTypeOptions: [] // 入库类型列表
      operationTypeOptions: [], // 入库类型列表
      shipmentsInfo: {
        carrier: [],
        waybillNumber: '',
        weight: 0,
        logisticWeight: 0,
        receiverPhone:''
      },
      showCancel: false, // 取消是否可以显示
      list: [],
      pdfParams:{},
      thatCursor:this.workType===3?"no-drop":'pointer',
      thatColor:this.workType===3?'#ccc':'#000'
    }
  },
  created() {
    this.getCompanyList()
    this.setStatusList()
    this.setTableForm()
    this.setBottonView()
    this.setDetailTableForm()
    this.getCompanyList()
    this.getLocationList()
    this.receiptType = this.editConfig.title === "查看" ? this.editConfig.infomation.operationTypeName : this.addName
    if (this.showOperationType) {
      this.getListTransfer()
    }
    this.getLogisticCompanyList()
  },
  methods: {
    setStatusList() {
      if (this.editConfig.infomation.status === 5) {
        this.list = [
          { label: "草稿", status: "todo", value: 1 },
          { label: "正在等待", status: "todo", value: 2 },
          { label: "就绪", status: "todo", value: 3 },
          { label: "完成", status: "todo", value: 4 },
          { label: "已取消", status: "todo", value: 5 }
        ]
      } else {
        this.list = [
          { label: "草稿", status: "todo", value: 1 },
          { label: "正在等待", status: "todo", value: 2 },
          { label: "就绪", status: "todo", value: 3 },
          { label: "完成", status: "todo", value: 4 }
        ]
      }
    },
    // 获取公司列表
    async getCompanyList() {
      await getCompanyList().then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.companyOptions = res.data
        }
      })
      if (this.workType === 1) {
        await getSupplierList().then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.supplierOptions = res.data
          }
        })
      } else if (this.workType === 2) {
        await getClientList().then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.clientOptions = res.data
          }
        })
      } else {
        await getCompanyList().then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.companyOptions = res.data
          }
        })
      }
    },
    // 获取仓库位置列表
    async getLocationList() {
@@ -433,6 +479,12 @@
        this.showFooter = false
        if (this.editConfig.infomation.status === "完成") {
          this.isValidateClick = false
        } else if (this.editConfig.infomation.status === 3) {
          this.isValidateClick = true
          this.showCancel = true
        } else if (this.editConfig.infomation.status === 5) {
          this.isCancel = true
          this.isValidateClick = true
        } else {
          this.isValidateClick = true
        }
@@ -443,6 +495,7 @@
        this.showFooter = false
        this.isValidateClick = false
      } else if (this.editConfig.infomation.status === 5) {
        this.isCancel = true
        this.showButton = true
        this.showEdit = false
        this.showFooter = false
@@ -453,6 +506,7 @@
        this.showEdit = true
        this.showFooter = false
        this.isValidateClick = true
        this.showCancel = true
      }
      if (this.editConfig.title === "新建") {
        this.list[0].status = "active"
@@ -478,36 +532,59 @@
      this.showFooter = true
      this.setTableForm()
    },
    // 保存
    saveClick(formName) {
      this.$refs[formName].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("请添加明细行或选择产品不能为空")
          } 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()
              }
            })
          }
    async getLogisticCompanyList() {
      await getLogisticCompanyList().then((res) => {
        if (res.code === 200) {
          this.editConfig.infomation.carrier = res.data
        }
      })
    },
    // 保存
    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 {
            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
@@ -542,7 +619,14 @@
        operationTypeName: this.receiptType,
        sourceNumber: data.sourceNumber || "",
        status: 3,
        toLocationId: data.toLocationId || 0
        toLocationId: data.toLocationId || 0,
        waybillNumber: data.waybillNumber || '',
        weight: data.weight || 0,
        logisticWeight: data.logisticWeight || 0,
        logisticCompanyId: data.logisticCompanyId,
        receiverAddr: data.receiverAddr || '',
        receiverName: data.receiverName || '',
        receiverPhone: data.receiverPhone || ''
      }
      return params
    },
@@ -708,6 +792,61 @@
          this.$parent.getData()
        }
      })
    },

    // 取消
    btnCancel() {
      this.$confirm('确定取消吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        stateCancel(this.editConfig.infomation.id).then((res) => {
          console.log(res)
          this.editConfig.visible = false
          if (res.code === 200) {
            this.$message.success("取消调拨")
            this.$parent.getData()
          }
        })
        this.list.map((item) => {
          if (item.label === "已取消") {
            item.status = "active"
          } else {
            item.status = "todo"
          }
        })
      }).catch(() => {
      });
    },
    //打印
    async btnPrint() {
      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);
        }
      }
      
    }
  }
}
@@ -720,17 +859,26 @@
  align-items: center;
  font-size: 14px;
  color: #333;

  .header_btns {
    margin-left: auto;
    margin-right: 60px;

    .btn {
      cursor: pointer;
    }

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

.content-status {
  display: flex;
}

.basic-info {
  height: calc(100% - 80px);
  overflow: auto;
@@ -743,46 +891,71 @@
  //   margin-top: 20px;
  // }
}

.purchase-view {
  display: flex;

  .left {
    width: 50%;
  }

  .right {
    width: 50%;
  }
}

.second-label {
  margin-left: 20px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
}

::v-deep {
  .el-dialog__headerbtn {
    position: absolute;
    top: 15px;
  }

  .el-button {
    &:hover {
      border: 1px solid #dcdfe6;
      color: #333;
    }
  }
  .el-tabs--card > .el-tabs__header {

  .el-tabs--card>.el-tabs__header {
    border-bottom: none;
  }
  .el-tabs__item.is-active {
    color: #333;
    background: #f1f3f8;
  }

  // .el-tabs__item.is-active {
  //   color: #333;
  //   background: #f1f3f8;
  // }
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    background: #f3f3f3;
  }

  .el-tabs__header {
    margin: 0 0 1px;
  }

  .bottom {
    .el-form {
      // border-top: 1px solid #EBEEF5;
    }

    .el-form-item {
      height: 28px;

      .el-input {
        input {
          height: 28px;
        }
      }
    }
  }
}
</style>