modify：出库-物流信息样式调整

zuozhengqing

2023-11-24 154fa0916d9b4c87e392a6811d1ae7b09f88a8c6

 src/views/overview/AddOverviewDialog.vue

@@ -10,7 +10,7 @@
      <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" @click="btnPrint">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </span>
@@ -18,7 +18,7 @@
            <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>
      <!-- 内容 -->
@@ -29,7 +29,6 @@
        label-position="right"
        label-width="120px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <div>
          <!-- <div>aaa</div> -->
@@ -37,9 +36,12 @@
            :showButton="showButton"
            :isValidateClick="isValidateClick"
            :isDelClick="isDelClick"
            :isCancel="isCancel"
            :list="list"
            :showCancel="showCancel"
            @delClick="delClick"
            @validateClick="validateClick"
            @btnCancel="btnCancel"
          />
        </div>
        <div class="basic-info">
@@ -47,8 +49,10 @@
            <el-row>
              <el-col :span="12">
                <el-form-item prop="companyName">
                  <span slot="label">{{ workType === 1 ? "客户" : workType === 2 ? "送货地址" : "联系人" }}</span>
                  <span slot="label">{{ workType === 1 ? "供应商" : workType === 2 ? "客户" : "联系人" }}</span>
                  
                  <el-select
                    v-if="workType === 1"
                    v-model="editConfig.infomation.companyName"
                    placeholder="请选择"
                    size="mini"
@@ -57,6 +61,40 @@
                    @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"
@@ -64,6 +102,7 @@
                    >
                    </el-option>
                  </el-select>
                  
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
@@ -145,7 +184,12 @@
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in toLocationOptions" :key="item.id" :label="item.name" :value="item.id">
                    <el-option
                      v-for="item in toLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
@@ -159,9 +203,60 @@
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in toLocationOptions" :key="item.id" :label="item.name" :value="item.id">
                    <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-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item v-if="workType !== 1" label="送货策略" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </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-form-item>
              </el-col>
            </el-row>
@@ -169,57 +264,8 @@
          <div class="bottom">
            <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="second">
                <div class="purchase-view">
                  <div class="left">
                    <div class="second-label">其他信息</div>
                    <!-- <el-form-item v-if="workType !== 1" label="送货策略" prop="client_name">
                      <el-select
                        v-model="editConfig.infomation.memberId"
                        placeholder="请选择"
                        size="mini"
                        style="width: 90%"
                        :disabled="!showFooter"
                      >
                        <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item> -->
                    <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-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="right"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="备注" name="third">
                <el-form-item label="备注" prop="comment">
                  <el-input
                    v-model.trim="editConfig.infomation.comment"
                    size="mini"
                    type="textarea"
                    style="width: 85%"
                    :autosize="{ minRows: 8 }"
                    :disabled="!showFooter"
                  ></el-input>
                </el-form-item>
              </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'">
@@ -239,6 +285,60 @@
                  </el-table-column>
                </template>
              </CommonFormTableView>
            </div>
            <!-- 物流信息 -->
            <div v-if="activeName==='two'&&this.workType===2">
              <el-form 
                label-position="right"  
                :model="shipmentsInfo" 
                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>
                    </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="联系电话">
                    <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" 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" v-model="editConfig.infomation.logisticWeight"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
            <!-- 详情 -->
            <!-- <div v-if="activeName === 'detail'">
@@ -263,9 +363,9 @@
        </div>
      </el-form>
      <!-- 尾 -->
      <div v-if="showFooter" slot="footer" class="dialog-footer">
      <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')">保存</el-button>
        <el-button type="primary" size="small" @click="saveClick('form')" :disabled="!showFooter">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
@@ -279,10 +379,13 @@
  addOperation,
  updateOperation,
  updateStatus,
  stateCancel,
  deleteOperation,
  getOperationType
  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: {
@@ -324,14 +427,10 @@
        operationTypeId: [{ required: true, message: "请选择入库类型", trigger: "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: {},
@@ -340,6 +439,7 @@
      isNoProduct: true, // 添加明细行时是否有产品未选择
      showEdit: false, // 是否显示编辑按钮
      isDelClick: false, // 删除按钮是否可点击
      isCancel:false, //验证按钮是否可点击
      showFooter: false, // 是否显示取消保存
      currentState: "todo", // 当前状态
      detailTableList: {},
@@ -351,34 +451,80 @@
      companyObj: {},
      contacterObj: {},
      isValidateClick: false, // 验证是否显示
      operationTypeOptions: [] // 入库类型列表
      operationTypeOptions: [], // 入库类型列表
      shipmentsInfo: {
        carrier:[],
        waybillNumber:'',
        weight:0,
        logisticWeight:0,
      },
      showCancel:false, // 取消是否可以显示
      list:[],
    }
  },
  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.getOperationType()
      this.getListTransfer()
    }
    this.getLogisticCompanyList()
  },
  methods: {
    setStatusList(){
      console.log(this.editConfig.infomation,"edit")
      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.data.code === 200) {
          this.companyOptions = res.data.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() {
      await getLocationList({
        keyWord: "",
        jointName: this.editConfig.code,
        page: 0,
        pageSize: 0
      }).then((res) => {
@@ -389,15 +535,15 @@
      })
    },
    // 获取仓库类型
    async getOperationType() {
      await getOperationType({
    async getListTransfer() {
      await getListTransfer({
        keyword: "",
        page: 0,
        pageSize: 0
      }).then((res) => {
        console.log(res.data.data)
        if (res.data.code === 200) {
          const list = res.data.data.map((item) => {
        console.log(res.data)
        if (res.code === 200) {
          const list = res.data.map((item) => {
            return {
              name: item.name,
              id: item.id
@@ -409,33 +555,59 @@
    },
    // 设置删除/打印/编辑是否显示
    setBottonView() {
      console.log(this.editConfig.infomation.status)
      if (this.editConfig.title === "新建") {
        this.showButton = false
        this.showEdit = false
        this.showFooter = true
        this.isValidateClick = false
      } else if (this.editConfig.infomation.status === 4) {
      } else if (this.editConfig.title === "编辑") {
        this.showButton = true
        this.showEdit = false
        this.isDelClick = true
        this.showFooter = true
      } else if (this.editConfig.title === "查看" && this.editConfig.infomation.status !== 4) {
        this.showButton = true
        this.showEdit = true
        this.isDelClick = true
        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
        }
      } else if (this.editConfig.infomation.status === 4 || this.editConfig.infomation.status === "完成") {
        this.showButton = true
        this.showEdit = false
        this.isDelClick = true
        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
        this.isValidateClick = false
      } else {
        // 就绪---
        this.showButton = true
        this.showEdit = true
        this.showFooter = false
        this.isValidateClick = true
        this.showCancel=true
      }
      if (this.editConfig.title === "新建") {
        this.list[0].status = "active"
      } else {
        this.list.map((item) => {
          if (item.value === this.editConfig.infomation.status) {
          console.log(item, this.editConfig.infomation.status, "打印信息")
          if (item.value === this.editConfig.infomation.status || item.label === this.editConfig.infomation.status) {
            item.status = "active"
          } else {
            item.status = "todo"
@@ -453,6 +625,13 @@
      this.showButton = false
      this.showFooter = true
      this.setTableForm()
    },
    async getLogisticCompanyList(){
      await getLogisticCompanyList().then((res) => {
        if(res.code===200){
          this.shipmentsInfo.carrier=res.data
        }
      })
    },
    // 保存
    saveClick(formName) {
@@ -503,6 +682,7 @@
        contacterName = Object.keys(this.contacterObj).length === 0 ? data.contacterName : this.contacterObj.label
      }
      let params = {
        baseOperationType: data.baseOperationType,
        comment: data.comment || "",
        companyID: companyID,
        companyName: companyName,
@@ -517,7 +697,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
    },
@@ -534,7 +721,11 @@
    },
    // 操作列表
    setTableForm() {
      if (this.editConfig.title !== "新建") {
      if (
        this.editConfig.title !== "新建" &&
        this.editConfig.infomation.details &&
        this.editConfig.infomation.details.length > 0
      ) {
        const list = this.editConfig.infomation.details.map((item) => {
          return {
            ...item,
@@ -554,7 +745,7 @@
          // { label: "说明", prop: "number", input: true },
          // { label: "日期", prop: "amount", date: true, isRequird: true },
          // { label: "截止日期", prop: "price", date: true },
          { label: "完成", prop: "amount", inputFloat: true },
          { label: "数量", prop: "amount", inputFloat: true },
          { label: "计量单位", prop: "unit" }
        ]
      }
@@ -570,6 +761,7 @@
    },
    // 新增
    addProductClick(value) {
      console.log(value)
      if (value === "操作") {
        console.log(this.tableData)
        for (let i = 0; i < this.tableData.length; i++) {
@@ -678,6 +870,45 @@
          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(){
      await printReceipts(this.editCommonConfig.infomation.id).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success("打印成功")
          const link = document.createElement('a');
          link.href = res.data;
          link.download = '出库单.xlsx';
          link.click();
        }
      })
    }
  }
}
@@ -694,6 +925,9 @@
    margin-left: auto;
    margin-right: 60px;
    .btn {
      cursor: pointer;
    }
    .btn:nth-of-type(2){
      cursor: no-drop;
    }
  }
@@ -705,13 +939,13 @@
  height: calc(100% - 80px);
  overflow: auto;
  margin: 20px;
  border: 1px solid #dcdfe6;
  box-shadow: inset 0 0 2px #dee2e6;
  -moz-box-shadow: inset 0 0 2px #dee2e6;
  -webkit-box-shadow: inset 0 0 2px #dee2e6;
  .basic-info-view {
    margin-top: 20px;
  }
  // border: 1px solid #dcdfe6;
  // box-shadow: inset 0 0 2px #dee2e6;
  // -moz-box-shadow: inset 0 0 2px #dee2e6;
  // -webkit-box-shadow: inset 0 0 2px #dee2e6;
  // .basic-info-view {
  //   margin-top: 20px;
  // }
}
.purchase-view {
  display: flex;
@@ -738,13 +972,34 @@
      color: #333;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 20px;
  .el-tabs--card > .el-tabs__header {
    border-bottom: none;
  }
  // .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>