diff --git a/src/api/spares/inbound.js b/src/api/spares/inbound.js
index 4f03845..3a0670b 100644
--- a/src/api/spares/inbound.js
+++ b/src/api/spares/inbound.js
@@ -48,3 +48,13 @@ export const update = (row) => {
   })
 }
 
+export const inbound_getListByMaterialNo = (materialNo) => {
+  return request({
+    url: '/api//spares/inbound/getList',
+    method: 'get',
+    params: {
+      materialNo: materialNo
+    }
+  })
+}
+
diff --git a/src/api/spares/outbound.js b/src/api/spares/outbound.js
index a51a7be..9782032 100644
--- a/src/api/spares/outbound.js
+++ b/src/api/spares/outbound.js
@@ -48,3 +48,13 @@ export const update = (row) => {
   })
 }
 
+export const outbound_getListByMaterialNo = (materialNo) => {
+  return request({
+    url: '/api//spares/outbound/getList',
+    method: 'get',
+    params: {
+      materialNo: materialNo
+    }
+  })
+}
+
diff --git a/src/views/spares/materialDetail.vue b/src/views/spares/materialDetail.vue
new file mode 100644
index 0000000..84aa139
--- /dev/null
+++ b/src/views/spares/materialDetail.vue
@@ -0,0 +1,338 @@
+<template>
+  <basic-container>
+    <avue-tabs :option="option"
+               @change="handleChange"></avue-tabs>
+    <span v-if="type.prop==='information'">
+        <avue-form :option="tab1_option"
+                   v-model="tab1_form"
+                   ref="tab1_form"
+                   :class="frame_class">
+        </avue-form>
+      </span>
+    <span v-else-if="type.prop==='inbound'">
+        <div>
+          <avue-crud :data="inbound_data"
+                     :table-loading="loading"
+                     :option="option_inbound"
+                     :permission="permissionList"
+                     :header-cell-class-name="headerClass"
+                     v-model="inbound_form"
+                     ref="inbound_crud">
+          </avue-crud>
+        </div>
+      </span>
+    <span v-else-if="type.prop==='outbound'">
+        <avue-crud :option="option_outbound"
+                   :table-loading="loading"
+                   :data="outbound_data"
+                   :permission="permissionList"
+                   :header-cell-class-name="headerClass"
+                   v-model="outbound_form"
+                   ref="outbound_crud2">
+          </avue-crud>
+      </span>
+    <div class="container">
+       <span >
+          <el-button type="primary"
+                     size="large"
+                     @click="handleFormSubmit"
+                     v-if="addUpdateShowButton">
+                     确定</el-button>
+       </span>
+    </div>
+  </basic-container>
+</template>
+
+<script>
+  import {getDetail} from "@/api/spares/material";
+  import {inbound_getListByMaterialNo} from "@/api/spares/inbound";
+  import {outbound_getListByMaterialNo} from "@/api/spares/outbound";
+  import {mapGetters} from "vuex";
+
+  export default {
+    data() {
+      return {
+        form: {},
+        query: {},
+        loading: true,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        readonlyForm:{},
+        addUpdateShowButton:{},
+        frame_class: '',
+        tab1_form: {},
+        tab1_option: {
+          submitBtn: false,
+          emptyBtn: false,
+          column: [
+            {
+              label: "物资编号",
+              prop: "materialNo",
+              span: 6,
+              rules: [{
+                required: true,
+                message: "请输入物资编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "场站",
+              prop: "station",
+              span: 6,
+              type: "select",
+              dicUrl: "/api/daf-system/dict/dictionary?code=station",
+              props: {
+                label: "dictValue",
+                value: "dictKey"
+              },
+              rules: [{
+                required: true,
+                message: "请输入场站",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "物资名称",
+              prop: "materialName",
+              span: 6,
+              rules: [{
+                required: true,
+                message: "请输入物资名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "物资分类码",
+              prop: "materialClassCode",
+              span: 6,
+              rules: [{
+                required: true,
+                message: "请输入物资分类码",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "规格型号",
+              prop: "model",
+              span: 6,
+              rules: [{
+                required: true,
+                message: "请输入规格型号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "制造商名称",
+              prop: "manufacturerName",
+              span: 6
+            },
+            {
+              label: "供应商名称",
+              prop: "sipplierName",
+              span: 6
+            },
+            {
+              label: "所属仓库",
+              prop: "warehouse",
+              span: 6
+            },
+            {
+              label: "库存数量",
+              prop: "inventoryCount",
+              span: 6,
+              rules: [{
+                required: true,
+                message: "请输入库存数量",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "物资描述",
+              prop: "materialDescription",
+              span: 6,
+              rules: [{
+                required: true,
+                message: "请输入物资描述",
+                trigger: "blur"
+              }]
+            }
+          ]
+        },
+        inbound_form: {},
+        option_inbound: {
+          submitBtn: false,
+          emptyBtn: false,
+          column: [
+            {
+              label: "物资编号",
+              prop: "materialNo"
+            },
+            {
+              label: "入库编号",
+              prop: "inboundNo"
+            },
+            {
+              label: "入库时间",
+              prop: "inboundTime",
+              format: 'yyyy/MM/dd'
+            },
+            {
+              label: "入库申领人",
+              prop: "inboundClaimants"
+            },
+            {
+              label: "入库经办人",
+              prop: "inboundManager"
+            },
+            {
+              label: "入库数量",
+              prop: "inboundCount"
+            },
+            {
+              label: "入库审核状态",
+              prop: "istatus",
+              dicUrl: "/api/daf-system/dict/dictionary?code=check_status",
+              props: {
+                label: "dictValue",
+                value: "dictKey"
+              }
+            }
+          ]
+        },
+        outbound_form: {},
+        option_outbound: {
+          submitBtn: false,
+          emptyBtn: false,
+          column: [
+            {
+              label: "物资编号",
+              prop: "materialNo"
+            },
+            {
+              label: "出库编号",
+              prop: "outboundNo"
+            },
+            {
+              label: "出库时间",
+              prop: "outboundTime",
+              format: 'yyyy/MM/dd'
+            },
+            {
+              label: "入库申领人",
+              prop: "inboundClaimants"
+            },
+            {
+              label: "出库经办人",
+              prop: "outboundManager"
+            },
+            {
+              label: "出库数量",
+              prop: "outboundCount"
+            },
+            {
+              label: "出库审核状态",
+              prop: "istatus",
+              type: "select",
+              dicUrl: "/api/daf-system/dict/dictionary?code=check_status",
+              props: {
+                label: "dictValue",
+                value: "dictKey"
+              }
+            }
+          ]
+        },
+        data: [],
+        inbound_data: [],
+        outbound_data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+          // this.option.column = this.option.column.filter(v => {
+          //     return this.permission['material_col_' + v.prop]
+          // })
+        return {
+          addBtn: false,
+          viewBtn: false,
+          delBtn: false,
+          editBtn: false
+        };
+      },
+    },
+    created () {
+      this.type = this.option.column[0];
+      if(this.$route.query.frameMode == "view"){
+        this.option.column.push({ label: '入库详情', prop: 'inbound' },{ label: '出库详情', prop: 'outbound' });
+        this.readonlyForm=true;
+        this.addUpdateShowButton=false;
+        this.frame_class = 'frame_class';
+        this.SearchDetail();
+      }else{
+        this.readonlyForm=false;
+        this.addUpdateShowButton=true;
+        this.frame_class = null;
+      }
+    },
+    methods: {
+      handleChange (column) {
+        this.type = column
+        if (column.prop == 'inbound') {
+          this.inbound_onLoad();
+        }if (column.prop == 'outbound') {
+          this.outbound_onLoad();
+        }
+      },
+      SearchDetail() {
+        getDetail(this.$route.query.id).then(res => {
+          console.log(res);
+          this.tab1_form = res.data.data;
+        });
+      },
+      inbound_onLoad() {
+        this.loading = true;
+        inbound_getListByMaterialNo(this.$route.query.id).then(res => {
+          this.inbound_data = res.data.data;
+          this.loading = false;
+        });
+      },
+      outbound_onLoad() {
+        this.loading = true;
+        outbound_getListByMaterialNo(this.$route.query.id).then(res => {
+          this.inbound_data = res.data.data;
+          this.loading = false;
+        });
+      },
+      headerClass(){
+        return 'head-style'
+      }
+    }
+  };
+</script>
+
+<style>
+.head-style{
+  background-color: #1e9fff !important;
+  color: #FFFFFF !important;
+}
+.frame_class input.el-input__inner {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  pointer-events: none;
+}
+.frame_class .el-input__icon {
+  display: none;
+}
+.frame_class .el-input--prefix .el-input__inner {
+  padding-left: 15px;
+}
+
+.frame_class input::placeholder {
+  color: transparent;
+  display: none; /* 默认隐藏 */
+}
+</style>