仓库管理 业务类型弹窗及概述列表修改

yangfeng

2023-09-18 13cd01611ddc5d2cf87ab75bd8eeedcbb943286c

仓库管理 业务类型弹窗及概述列表修改

 src/router/product/index.js

@@ -4,6 +4,7 @@
const inOutboundDetail = (resolve) => require(["@/views/reportForm/inboundOutboundDetail/index"], resolve) // 出入库明细
const productCategory = (resolve) => require(["@/views/productManage/productCategory/index"], resolve) // 产品类别
const productList = (resolve) => require(["@/views/productManage/productCategory/ProductList"], resolve) // 产品类别-产品
const overviewList = (resolve) => require(["@/views/overview/OverviewListView"], resolve) // 概述-产品列表

const appconfig = [
  {
@@ -37,6 +38,14 @@
    meta: {
      title: "产品"
    }
  },
  {
    path: "/overview/overviewList",
    name: "overviewList",
    component: overviewList,
    meta: {
      title: "采购入库"
    }
  }
]


 src/views/warehouseManage/bussinessType/AddBussinessType.vue

New file
@@ -0,0 +1,422 @@
<template>
  <div class="add-common">
    <el-dialog
      :title="editCommonConfig.title + '业务类型'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <!-- 头 -->
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title + "业务类型" }}</span>
        <div class="header_btns">
          <span class="btn">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </span>
          <span class="btn" style="margin-left: 15px">
            <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>
        </div>
      </div>
      <!-- 内容 -->
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="left"
        label-width="110px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <div class="basic-info">
          <!-- <FormBtnsView :showProduct="true" @productClick="productClick" /> -->
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <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=""
                    :disabled="!showFooter"
                    style="width: 85%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="purchase-view">
              <div class="left" style="margin-left: 20px">
                <el-form-item label="作业类型" prop="operate_type" :label-width="labelWidth">
                  <el-select
                    v-model="editConfig.infomation.operate_type"
                    placeholder="请选择"
                    size="mini"
                    style="width: 85%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in operateTypeOptions" :key="item" :label="item" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="序号前缀" prop="client_name" :label-width="labelWidth">
                  <el-input
                    v-model="editConfig.infomation.client_name"
                    placeholder=""
                    :disabled="!showFooter"
                    style="width: 85%"
                  ></el-input>
                </el-form-item>
                <el-form-item label="仓库" prop="client_name" :label-width="labelWidth">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 85%"
                    :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
                  v-if="editConfig.infomation.operate_type !== '收货'"
                  label="保留方式"
                  prop="resource"
                  :label-width="labelWidth"
                >
                  <el-radio-group
                    v-model="editConfig.infomation.resource"
                    @input="reserveMethodClick"
                    :disabled="!showFooter"
                  >
                    <div style="margin-top: 8px"><el-radio label="确认时"></el-radio></div>
                    <div style="margin-top: 10px"><el-radio label="手工"></el-radio></div>
                    <div style="margin-top: 10px"><el-radio label="在预定日期之前"></el-radio></div>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  v-if="editConfig.infomation.operate_type !== '收货'"
                  label="在预定日期前预定"
                  prop="client_name"
                  :label-width="labelWidth"
                >
                  <el-input
                    v-model="editConfig.infomation.client_name"
                    placeholder=""
                    :disabled="!showFooter"
                    style="width: 85%"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="退货类型" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 85%"
                    :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"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 85%"
                    :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="showDetail">
                  <el-checkbox v-model="editConfig.infomation.showDetail"></el-checkbox>
                </el-form-item>
                <el-form-item
                  v-if="editConfig.infomation.operate_type === '收货'"
                  label="预填写作业详情"
                  prop="showDetail"
                >
                  <el-checkbox v-model="editConfig.infomation.showDetail"></el-checkbox>
                </el-form-item>
              </div>
            </div>
            <!-- <el-col :span="24">
                
              </el-col> -->
          </div>
          <div class="bottom">
            <div class="purchase-view">
              <div class="left">
                <div class="second-label">位置</div>
                <el-form-item label="默认源位置" prop="client_name" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 85%"
                    :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" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 85%"
                    :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>
          </div>
        </div>
      </el-form>
      <!-- 尾 -->
      <div v-if="showFooter" 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 size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddBussinessType",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: { type: [] }
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "50%",
      editConfig: this.editCommonConfig,
      rules: {
        client_name: [{ required: true, message: "请选择客户名称", trigger: "change" }],
        number: [{ required: true, message: "请输入退款单编号", trigger: "blur" }],
        refundDate: [{ required: true, message: "请选择退款日期", trigger: "change" }],
        memberId: [{ required: true, message: "请选择销售负责人", trigger: "change" }],
        sale_return_nunber: [{ required: true, message: "请选择销售退货单", trigger: "change" }]
      },
      memberOptions: [],
      operateTypeOptions: ["收货", "发货", "内部调拨"], // 操作类型
      showButton: true,
      showEdit: false, // 是否显示编辑按钮
      isDelClick: false, // 删除按钮是否可点击
      showFooter: false, // 是否显示取消保存
      labelWidth: "80px"
    }
  },
  created() {
    this.setBottonView()
  },
  methods: {
    // 设置删除/打印/编辑是否显示
    setBottonView() {
      if (this.editConfig.title === "新建") {
        this.showButton = false
        this.showEdit = false
        this.showFooter = true
      } else {
        this.showEdit = true
        this.showFooter = false
      }
    },
    // 关闭
    handleClose() {
      this.editConfig.visible = false
    },
    // 编辑
    editClick() {
      this.showEdit = false
      this.showButton = false
      this.showFooter = true
    },
    // 保存
    saveClick() {},
    // 删除
    delClick() {},
    // 产品
    productClick() {
      this.$router.push({ path: "/productManage/productList", query: { name: "产品" } })
    },
    // 保留方式
    reserveMethodClick(val) {
      if (val === "在预定日期之前") {
        this.labelWidth = "140px"
      } else {
        this.labelWidth = "80px"
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.dialog-header {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  .header_btns {
    margin-left: auto;
    margin-right: 60px;
    .btn {
      cursor: no-drop;
    }
  }
}
.content-btn {
  height: 37px;
  line-height: 37px;
  padding-left: 20px;
  border-bottom: 1px solid #e9e9e9;
}
.basic-info {
  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;
  .content-number {
    display: flex;
    justify-content: right;
    height: 44px;
    border-bottom: 1px solid #e9e9e9;
    font-size: 13px;
    .sub-number {
      width: 12.5%;
      border-right: 1px solid #e9e9e9;
      display: flex;
      padding: 3px 9px;
      .left {
        margin-top: 3px;
        font-size: 22px;
        font-weight: 600;
      }
      .icon-view {
        transform: rotate(270deg);
      }
      .right {
        margin-left: 6px;
        .right-label {
          color: #495057;
        }
        .right-one {
          height: 38px;
          line-height: 38px;
        }
      }
    }
  }
  .basic-info-view {
    margin-top: 20px;
    .upload {
      position: relative;
      width: 90px;
      height: 90px;
      margin-left: 40px;
      border: 1px dotted #d9d9d9;
      border-radius: 4px;
      .upload-icon {
        position: absolute;
        top: 40%;
        right: 43%;
      }
    }
  }
  .purchase-view {
    display: flex;
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
    }
  }
  .second-label {
    margin-left: 20px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 10px;
  }
  .list-item {
    width: 300px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
::v-deep {
  .el-dialog__headerbtn {
    position: absolute;
    top: 18px;
  }
  .el-button {
    &:hover {
      border: 1px solid #dcdfe6;
      color: #333;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 20px;
  }
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }
}
</style>

 src/views/warehouseManage/bussinessType/index.vue

@@ -23,7 +23,7 @@
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddScrapDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <AddBussinessType v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,12 +31,12 @@
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddScrapDialog from "@/views/operate/scrap/AddScrapDialog"
import AddBussinessType from "@/views/warehouseManage/bussinessType/AddBussinessType"

export default {
  name: "WarehouseView",
  props: {},
  components: { AddScrapDialog },
  components: { AddBussinessType },
  mixins: [pageMixin],
  computed: {},
  data() {