调拨列表页面、报废列表、新建页面开发

yangfeng

2023-09-15 b823a11d74b6623fadcfab27150cdbb0ad9766f5

 src/views/overview/AddOverviewDialog.vue

@@ -8,7 +8,7 @@
    >
      <!-- 头 -->
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title + "采购入库" }}</span>
        <span>{{ editCommonConfig.title + addName }}</span>
        <div class="header_btns">
          <span class="btn">
            <i class="el-icon-printer"></i>
@@ -39,7 +39,7 @@
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="接收" prop="client_name">
                <el-form-item v-if="workType === '收货'" label="客户" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
@@ -53,7 +53,35 @@
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="安排的日期" prop="refundDate">
                <el-form-item v-if="workType === '内部调拨'" label="联系人" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :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="12">
                <el-form-item v-if="workType === '发货'" label="送货地址" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :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="12">
                <el-form-item label="日期" prop="refundDate">
                  <el-date-picker
                    v-model="editConfig.infomation.refundDate"
                    value-format="yyyy-MM-dd"
@@ -66,7 +94,7 @@
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="作业类型" prop="client_name">
                <el-form-item label="入库类型" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
@@ -80,7 +108,7 @@
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="源单据" prop="memberId">
                <el-form-item label="来源单据" prop="memberId">
                  <el-input
                    v-model="editConfig.infomation.memberId"
                    placeholder="例如:PO0032"
@@ -90,7 +118,21 @@
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="目的位置" prop="client_name">
                <el-form-item v-if="workType !== '收货'" label="源位置" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :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="12">
                <el-form-item v-if="workType !== '发货'" label="仓库位置" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
@@ -107,22 +149,39 @@
          </div>
          <div class="bottom">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane v-if="workType !== '收货'" label="详情" name="detail"> </el-tab-pane>
              <el-tab-pane label="操作" name="first"> </el-tab-pane>
              <el-tab-pane label="其他信息" name="second">
                <el-col :span="12">
                  <el-form-item label="负责人" prop="client_name">
                    <el-select
                      v-model="editConfig.infomation.memberId"
                      placeholder="请选择"
                      size="mini"
                      style="width: 63%"
                      :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>
                <div class="purchase-view">
                  <div class="left">
                    <div class="second-label">其他信息</div>
                    <el-form-item v-if="workType !== '收货'" label="送货策略" prop="client_name">
                      <el-select
                        v-model="editConfig.infomation.memberId"
                        placeholder="请选择"
                        size="mini"
                        style="width: 63%"
                        :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="client_name">
                      <el-select
                        v-model="editConfig.infomation.memberId"
                        placeholder="请选择"
                        size="mini"
                        style="width: 63%"
                        :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>
                  </div>
                  <div class="right"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="备注" name="third">
                <el-form-item label="备注" prop="desc">
@@ -137,17 +196,37 @@
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
            <!-- 操作 -->
            <div v-if="activeName === 'first'">
              <CommonFormTableView
                :product-table-list="productTableList"
                :detail-enter="!showFooter"
                @inputContent="inputContent"
                @addProductClick="addProductClick"
                @addProductClick="addProductClick('操作')"
              >
                <template v-if="showFooter" slot="tableButton">
                  <el-table-column label="操作" width="60" fixed="right" align="center">
                    <template slot-scope="scope">
                      <div @click="handleDelClick(scope)">
                      <div @click="handleDelClick(scope, '操作')">
                        <i class="el-icon-delete"></i>
                      </div>
                    </template>
                  </el-table-column>
                </template>
              </CommonFormTableView>
            </div>
            <!-- 详情 -->
            <div v-if="activeName === 'detail'">
              <CommonFormTableView
                :product-table-list="detailTableList"
                :detail-enter="!showFooter"
                @inputContent="inputDetail"
                @addProductClick="addProductClick('详情')"
              >
                <template v-if="showFooter" slot="tableButton">
                  <el-table-column label="操作" width="60" fixed="right" align="center">
                    <template slot-scope="scope">
                      <div @click="handleDelClick(scope, '详情')">
                        <i class="el-icon-delete"></i>
                      </div>
                    </template>
@@ -182,6 +261,14 @@
          infomation: {}
        }
      }
    },
    workType: {
      type: String,
      default: "收货"
    },
    addName: {
      type: String,
      default: "调拨"
    }
  },
  components: { CommonFormTableView },
@@ -209,16 +296,24 @@
      activeName: "first",
      productTableList: {},
      tableData: [{ name: "ssss" }],
      productId: 0,
      isNoProduct: false, // 添加明细行时是否有产品未选择
      showEdit: false, // 是否显示编辑按钮
      isDelClick: false, // 删除按钮是否可点击
      showFooter: false, // 是否显示取消保存
      currentState: "todo" // 当前状态
      currentState: "todo", // 当前状态
      detailTableList: {},
      detailTableData: [{ name: "ssss" }],
      detailId: 0,
      isNoDetail: false, // 添加详情明细行时是否未选择
      tableColumn: []
    }
  },
  created() {
    this.setTableForm()
    this.setBottonView()
    this.setDetailTableForm()
    this.activeName = this.workType === "收货" ? "first" : "detail"
  },
  methods: {
    // 设置删除/打印/编辑是否显示
@@ -268,6 +363,7 @@
    saveClick() {},
    // 删除
    delClick() {},
    // 操作列表
    setTableForm() {
      this.productTableList = {
        tableData: this.tableData,
@@ -281,7 +377,7 @@
        ]
      }
    },
    // 产品列表输入
    // 操作输入
    inputContent(val, prop, row) {
      this.productId = row.productId
      this.tableData.map((item) => {
@@ -290,35 +386,99 @@
        }
      })
    },
    // 产品新增
    addProductClick() {
      console.log(this.tableData)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].name.length === 0) {
          this.isNoProduct = true
          break
        } else {
          this.isNoProduct = false
    // 新增
    addProductClick(value) {
      if (value === "操作") {
        console.log(this.tableData)
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].name.length === 0) {
            this.isNoProduct = true
            break
          } else {
            this.isNoProduct = false
          }
        }
        if (!this.isNoProduct) {
          this.productId++
          this.tableData.push({
            productId: this.productId,
            id: 0,
            amount: 0,
            desc: "",
            name: "",
            number: "",
            price: 0,
            total: 0
          })
        }
      } else {
        console.log(this.detailTableData)
        for (let i = 0; i < this.detailTableData.length; i++) {
          if (this.detailTableData[i].name.length === 0) {
            this.isNoDetail = true
            break
          } else {
            this.isNoDetail = false
          }
        }
        if (!this.isNoDetail) {
          this.detailId++
          this.detailTableData.push({
            detailId: this.detailId,
            id: 0,
            amount: 0,
            desc: "",
            name: "",
            number: "",
            price: 0,
            total: 0
          })
        }
      }
      if (!this.isNoProduct) {
        this.productId++
        this.tableData.push({
          productId: this.productId,
          id: 0,
          amount: 0,
          desc: "",
          name: "",
          number: "",
          price: 0,
          total: 0
        })
    },
    // 删除
    handleDelClick(scope, value) {
      console.log(scope)
      if (value === "操作") {
        this.tableData.splice(scope.$index, 1)
      } else {
        this.detailTableData.splice(scope.$index, 1)
      }
    },
    // 产品删除
    handleDelClick(scope) {
      console.log(scope)
      this.tableData.splice(scope.$index, 1)
    // 详情列表
    setDetailTableForm() {
      this.setTableColumn()
      this.detailTableList = {
        tableData: this.detailTableData,
        tableColumn: this.tableColumn
      }
    },
    setTableColumn() {
      if (this.workType === "内部调拨") {
        this.tableColumn = [
          { label: "产品", prop: "name", productName: true, isRequird: true },
          { label: "从", prop: "number", select: true },
          { label: "至", prop: "amount", select: true },
          { label: "完成", prop: "total", inputFloat: true },
          { label: "计量单位", prop: "total", select: true }
        ]
      } else {
        this.tableColumn = [
          { label: "产品", prop: "name", productName: true, isRequird: true },
          { label: "从", prop: "number", select: true },
          { label: "完成", prop: "total", inputFloat: true },
          { label: "计量单位", prop: "total", select: true }
        ]
      }
    },
    // 详情输入
    inputDetail(val, prop, row) {
      this.detailId = row.detailId
      this.detailTableData.map((item) => {
        if (item.detailId === row.detailId) {
          item[prop] = val
        }
      })
    }
  }
}
@@ -353,9 +513,20 @@
  .basic-info-view {
    margin-top: 20px;
  }
  // .bottom {
  //   margin-left: 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 {