supply-front/src/views/basic_data/material/components/material_list-detail.vue

<template>
  <div>
    <el-form label-width="120px" size="small">
      <div class="sty">
        <el-page-header @back="goBack" content="详情页面"> </el-page-header>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>信息</span>
        </div>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="创建组织" size="small">
              <el-input v-model="detail.updateBy" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="使用组织" size="small">
              <el-input v-model="detail.useOrgName" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="编码" size="small">
              <el-input v-model="detail.useOrgNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="名称" size="small">
              <el-input v-model="detail.name" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本</span>
        </div>
        <div>
          <el-row :gutter="20" type="flex">
            <el-col :span="24">
              <div class="base-header">
                <span>基本信息</span>
              </div>
              <el-col>
                <el-form-item label="规格型号" size="small">
                  <el-input v-model="detail.specification"></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="助记码" size="small">
                  <el-input v-model="detail.specification"></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="金蝶编码" size="small">
                  <el-input v-model="detail.number"></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="条码" size="small">
                  <el-input v-model="detail.materialGroupNumber"></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="描述" size="small">
                  <el-input v-model="detail.materialGroupNumber"></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="物料分组" size="small">
                  <el-input v-model="detail.materialGroupNumber"></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="物料属性" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="普通仓库" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="特征件子项" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="套件" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="基本单位" size="small">
                  <el-select v-model="value">
                    <el-option label="正常"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="禁用原因" size="small">
                  <el-input v-model="detail.specification"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <div class="clearfix">
                <div class="base-header">
                  <span>控制</span>
                </div>

                <el-col :span="12">
                  <el-form-item label="允许采购" size="small">
                    <el-checkbox v-model="detail.isPurchase"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="允许销售" size="small">
                    <el-checkbox v-model="detail.isSale"></el-checkbox>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="允许库存" size="small">
                    <el-checkbox v-model="detail.isInventory"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="允许生产" size="small">
                    <el-checkbox v-model="detail.isInventory"></el-checkbox>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="允许委外" size="small">
                    <el-checkbox v-model="detail.isInventory"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="允许资产" size="small">
                    <el-checkbox v-model="detail.isInventory"></el-checkbox>
                  </el-form-item>
                </el-col>
              </div>

              <div>
                <div class="base-header">
                  <span>财务信息</span>
                </div>

                <el-col :span="24">
                  <el-form-item label="默认税率" size="small">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="存货类别" size="small">
                    <el-input v-model="detail.categoryName"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="税分类" size="small">
                    <el-input v-model="detail.categoryId"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="结算成本价加减价比例" size="small">
                    <el-input v-model="detail.categoryId"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="商城公开价" size="small">
                    <el-input v-model="detail.categoryId"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="套机码" size="small">
                    <el-input v-model="detail.categoryId"></el-input>
                  </el-form-item>
                </el-col>
              </div>
            </el-col>
            <el-col :span="24">
              <div>
                <div class="clearfix">
                  <div class="base-header">
                    <span>重量信息</span>
                  </div>

                  <el-col :span="24">
                    <el-form-item label="毛重" size="small">
                      <el-input v-model="value"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="净重" size="small">
                      <el-input v-model="value"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="重量单位" size="small">
                      <el-input v-model="value"></el-input>
                    </el-form-item>
                  </el-col>
                </div>

                <div class="clearfix">
                  <div class="base-header">
                    <span>尺寸信息</span>
                  </div>

                  <el-col :span="24">
                    <el-form-item label="长" size="small">
                      <el-input v-model="detail.length"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="宽" size="small">
                      <el-input v-model="detail.width"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="高" size="small">
                      <el-input v-model="detail.height"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="体积" size="small">
                      <el-input v-model="detail.volume"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="尺寸单位" size="small">
                      <el-input v-model="detail.volume"></el-input>
                    </el-form-item>
                  </el-col>
                </div>

                <div class="clearfix">
                  <div class="base-header">
                    <span>状态</span>
                  </div>
                  <el-col :span="24">
                    <el-form-item label="数据状态" size="small">
                      <el-select v-model="value">
                        <el-option label="普通仓库"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="禁用状态" size="small">
                      <el-select v-model="value">
                        <el-option label="普通仓库"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="已使用" size="small">
                      <el-select v-model="value">
                        <el-option label="普通仓库"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>库存</span>
        </div>
        <div class="baseInfo">
          <div>
            <div class="base-header">
              <span>存储</span>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="库存单位" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="换算方向" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="仓库" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="仓位" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="单箱标准数量" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="base-header">
              <span>库存控制</span>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="可锁库" size="small">
                  <el-checkbox v-model="value" label=""></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="base-header">
              <span>管理</span>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="启用批号管理" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="批号编码规则" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="启用保质期管理" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="批号附属信息" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="保质期单位" size="small">
                  <el-select v-model="value">
                    <el-option label="普通仓库"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="在架寿命期" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="base-header">
              <span>库存成本</span>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="参考成本" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="成本单位" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="币别" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="base-header">
              <span>库存计划</span>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="启用" size="small"> </el-form-item>
                <el-form-item label="最小库存预警" size="small">
                  <el-checkbox v-model="value" label=""></el-checkbox>
                </el-form-item>
                <el-form-item label="安全库存预警" size="small">
                  <el-checkbox v-model="value" label=""></el-checkbox>
                </el-form-item>
                <el-form-item label="最大库存预警" size="small">
                  <el-checkbox v-model="value" label=""></el-checkbox>
                </el-form-item>
                <el-form-item label="在订货点预警" size="small">
                  <el-checkbox v-model="value" label=""></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="最小库存" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="再定货点" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="经济订货批量" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="最大库存" size="small">
                  <el-input v-model="value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div>
          <div class="base-header">
            <span>客机信息</span>
          </div>

          <br />
          <el-table
            v-loading="listLoading"
            :data="detail.items"
            element-loading-text="Loading"
            :header-cell-style="{
              'background-color': '#e8e8e8',
              color: 'black',
            }"
            border=""
          >
            <el-table-column
              align="center"
              label="序号"
              prop="id"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="内机编码"
              prop="innerMachineNumber"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="内机名称"
              prop="innerMachineName"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="型号"
              prop="orgNumber"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="内机体积"
              prop="innerMachineVolume"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="外机编码"
              prop="outsideMachineNumber"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="外机名称"
              prop="outsideMachineName"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="型号"
              prop="outsideMachineType"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="外机体积"
              prop="outsideMachineVolume"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
          <br />
          <el-row>
            <el-col :span="6">
              <el-form-item label="商城分类" size="small">
                <el-select v-model="value">
                  <el-option label="挂式空调"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <div class="img">
              <strong>产品图片</strong>
            </div>
            <br />
            <el-upload list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
            <br />
            <span>(上传图片大小规格: , 最多上传5张)</span>
            <div class="img"></div>
          </div>
          <br />
          <div>
            <div class="img">
              <strong>详情图</strong>
            </div>
            <br />
            <el-upload list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
            <br />
            <span>(上传图片宽度不超过: ,)</span>
            <div class="img"></div>
          </div>
          <br />
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否允许订货" size="small">
                <el-select v-model="dinghuo">
                  <el-option label="是" :value="true"> </el-option>
                  <el-option label="否" :value="false"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否允许置换" size="small">
                <el-select v-model="isDisplace">
                  <el-option label="是" :value="true"> </el-option>
                  <el-option label="否" :value="false"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button  @click="handleSave">保存</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {
 editCategory
} from "@/api/basic_data/material";

export default {
  props: {
    detail: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      value1: "是",
      dinghuo: true,
      isDisplace:''
    };
  },
  created() {
    console.log(this.detail);
    this.isDisplace = this.detail.isDisplace
  },
  methods: {
    goBack() {
      console.log(this.$parent);
      this.$parent.isShow = true;
    },
    handleSave(){
      editCategory({
        id:this.detail.id,
        isDisplace:this.isDisplace
      }).then(res=>{
        this.$successMsg('编辑成功')
          this.$parent.isShow = true;
      })
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid grey;
}
.img {
  width: 30%;
  height: 25px;
  //   background-color: aqua;
  border-bottom: 1px solid gray;
}
.startUse {
  vertical-align: top;
}
.start {
  display: inline-block;
  width: 35%;

  div {
    float: left;
    width: 50%;
    span {
      font-size: 12px;
      vertical-align: text-bottom;
      padding: 0px 3px;
    }
  }
}
.baseWidth {
  width: 46%;
}
.inputDate {
  width: 46%;
}
.selectStyle2 {
  width: 35%;
}
.selectStyle {
  width: 35%;
}
.textareaStyle {
  vertical-align: text-top;
  resize: none;
  width: 35%;
  height: 100px;
}
.color {
  color: #1f93ec;
}
.el-col-24 {
  margin: 6px 0;
}

.marg-r {
  padding-right: 15px;
  font-size: 12px;
  display: inline-block;
  width: 120px;
}
.base-header {
  height: 20px;
  width: 60%;
  border-bottom: 2px solid gray;
  span {
    width: 100px;
    height: 100%;
    display: block;
    text-align: center;
    color: #fff;

    background-color: gray;
  }
}
.box-card {
  margin-bottom: 20px;
}
.el-col-8 {
  span {
    padding-right: 10px;
    display: inline-block;
    width: 100px;
  }
}
.baseInfo {
  display: flex;
  justify-content: space-between;
  > div {
    width: 33%;
  }
}
.sty {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
::v-deep .el-select {
  width: 100%;
}
</style>