仓库编辑弹框

haoxuan

2023-09-18 998e2e17328d704cf642409f71508b4681ddd464

仓库编辑弹框

 src/assets/style/reset-element.scss

@@ -39,3 +39,6 @@
//   background-position: center;
//   width: 160px !important;
// }
.line_height_30px{
  line-height:30px;
}

 src/components/makepager/FormBtnsView.vue

@@ -75,7 +75,7 @@
      </div>
    </div>
    <div v-if="showWarehouse" class="sub-number">
      <div class="left"><i class="el-icon-help"></i></div>
      <div class="left"><i class="el-icon-refresh"></i></div>
      <div class="right">
        <div class="right-one">路线</div>
      </div>

 src/views/warehouseManage/warehouse/AddDialog.vue

New file
@@ -0,0 +1,280 @@
<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="100px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <div>
          <!-- <div>aaa</div> -->
          <!-- <StatusCommonView :list="list" showWarehouse="true" /> -->
          <FormBtnsView :showWarehouse="true" @productClick="productClick" />
        </div>
        <div class="basic-info">
          <div class="basic-info-view">

            <el-row>
              <el-col :span="24" class="line_height_30px">仓库名称-warehouse#</el-col>
              <el-col :span="12">
                <el-form-item label="缩写" prop="client_name">
                  对对对
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址" prop="client_name">
                 对对对
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="bottom">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="仓库配置" name="first">
                <div class="second-label">运输</div>
                <el-form-item label="入向运输" prop="desc">
                  <el-radio-group
                    
                  >
                    <el-radio style="width:100%;" class="line_height_30px" v-for="(item,index) in wareList" :key='index' :label="item.id">{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="出库运输" prop="desc">
                  <el-radio-group
                    
                  >
                    <el-radio style="width:100%;" class="line_height_30px" v-for="(item,index) in wareoutList" :key='index' :label="item.id">{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="技术信息" name="third">
                <el-form-item label="备注" prop="desc">
                  
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-form>
      <!-- 尾 -->
      <div v-if="showFooter" slot="footer" class="dialog-footer">
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="saveClick('form')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddScrapDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {}
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      activeName:'first',
      dialogWidth: "50%",
      editConfig: this.editCommonConfig,
      rules: {
      
        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: [],
      paymentTypeListOptions: [],
      list: [
        { label: "草稿", status: "todo" },
        { label: "完成", status: "todo" }
      ],
      showEdit: false, // 是否显示编辑按钮
      showFooter: false, // 是否显示取消保存
      currentState: "todo", // 当前状态
      wareList:[
        {
          name:'直接接收产品（1步收货）',
          id:1,
        },
        {
          name:'接到产品到收料区，再入库（2步收货）',
          id:2,
        },
        {
          name:'接收产品到收料区，检验，然后入库（3步收货）',
          id:3,
        }
      ],
      wareoutList:[
        {
          name:'直接出库（1步）',
          id:1,
        },
        {
          name:'送到待出库区，再送货（2步发货）',
          id:2,
        },
        {
          name:'包装产品，发送到待出库区，再送货（3步发货）',
          id:3,
        }
      ],
    }
  },
  created() {
    this.setBottonView()
  },
  methods: {
    // 路线
    productClick() {
      
    },
    // 设置删除/打印/编辑是否显示
    setBottonView() {
      if (this.editConfig.title === "新建") {
        this.showEdit = false
        this.showFooter = true
      } else if (this.editConfig.infomation.status === "完成") {
        this.showEdit = false
        this.showFooter = false
      } else {
        this.showEdit = true
        this.showFooter = false
      }
      if (this.editConfig.title === "新建") {
        this.list[0].status = "active"
      } else {
        this.list.map((item) => {
          if (item.label === this.editConfig.infomation.status) {
            item.status = "active"
          } else {
            item.status = "todo"
          }
        })
      }
    },
    // 关闭
    handleClose() {
      this.editConfig.visible = false
    },
    // 编辑
    editClick() {
      this.showEdit = false
      this.showFooter = true
    },
    // 保存
    saveClick() {}
  }
}
</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-status {
  display: flex;
}
.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;
  .basic-info-view {
    margin-top: 20px;
    padding:0 20px;

  }
  .bottom{
    .second-label {
      border-bottom: 1px solid #d9d9d9;
      margin-bottom: 10px;
    }
    ::v-deep .el-tabs__content{
      padding: 0 20px;
    }
  }
  
}
.purchase-view {
  display: flex;
  .left {
    width: 50%;
  }
  .right {
    width: 50%;
  }
}

::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/warehouse/index.vue

@@ -23,7 +23,7 @@
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddScrapDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <AddDialog 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 AddDialog from "@/views/warehouseManage/warehouse/AddDialog"

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