新增管理物料静态页面

src/views/material/list/index.vue

@@ -96,6 +96,9 @@
             label: '关联分类树',
             showOverflowTooltip: true,
             minWidth: 110,
+            formatter:(_row, _column, cellValue) => {
+              return _row.categoryLevelRootName+'分类';
+            }
           },
           {
             columnKey: 'action',
@@ -105,6 +108,7 @@
             resizable: false,
             slot: 'action',
             showOverflowTooltip: true
+
           }
         ],
         // 表格选中数据

src/views/material/manage/components/GroupDialog.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-dialog
+    title="选择物料组"
+    :visible.sync="groupVisible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    width="60%"
+  >
+    <div>
+      <el-row>
+        <el-col :span="24" class="table_col">
+          <el-table
+            :data="tableData"
+            height="450"
+            highlight-current-row
+            @row-click="single"
+          >
+            <el-table-column label="物料组名称" prop="name" width="200"></el-table-column>
+            <el-table-column label="物料组编码" prop="code"></el-table-column>
+            <el-table-column label="分类树" prop="categoryLevelRootName">
+               <template slot-scope="scope">
+                   {{scope.row.categoryLevelRootName+'分类'}}
+               </template>
+            </el-table-column>
+            <el-table-column label="选择" align="center">
+               <template slot-scope="scope">
+            	 <el-radio class="radio" v-model="radio" :label="scope.row.id"><i></i></el-radio>
+               </template>
+            </el-table-column>
+          </el-table>
+         <div class="pagination">
+            <el-pagination
+              background
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="pagination.size"
+              :current-page.sync="pagination.pageNum"
+              @current-change="handleCurrent"
+              @size-change="handleSize"
+            >
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="btns">
+      <el-button type="primary" size="small" @click="selected">选择</el-button>
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+ import { getGroupPage } from '@/api/material/list';
+export default {
+  data () {
+    return {
+      groupVisible: false,
+      tableData: [],
+      search:{},
+      pagination: {
+        pageNum: 1,
+        size: 10,
+      },
+      total: 0,
+      radio: '',
+      current:null
+    }
+  },
+
+  watch: {
+
+  },
+  methods: {
+    open(item){
+      if(item){
+        this.current = item
+        this.radio = item.id
+      }
+      this.groupVisible = true
+      this.getList()
+    },
+
+    // 单击获取id
+    single (row) {
+        this.current = row
+        this.radio = row.id
+    },
+
+    handleClose () {
+      this.groupVisible = false
+      this.current = null
+      this.radio = ''
+    },
+    handleCurrent (page) {
+      this.pagination.pageNum = page
+      this.getList()
+    },
+    handleSize (size) {
+      this.pagination.pageNum = 1
+      this.pagination.size = size
+      this.getList()
+    },
+    getList(){
+      let params = {...this.pagination}
+      getGroupPage(params).then(res=>{
+         this.tableData = res.list
+         this.total = res.count
+      })
+    },
+    selected(){
+       if(!this.current){
+         return this.$message.warning('请选择物料组')
+       }
+       this.$emit('changeMaterial',this.current)
+       this.handleClose()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree_col {
+  border: 1px solid #eee;
+  padding: 10px 0;
+  box-sizing: border-box;
+  height: 500px;
+  overflow: auto;
+}
+.table_col {
+  padding-left: 10px;
+  ::v-deep .el-table th.el-table__cell {
+    background: #f2f2f2;
+  }
+}
+.pagination {
+  text-align: right;
+  padding: 10px 0;
+}
+.btns {
+  text-align: center;
+  padding: 10px 0;
+}
+.topsearch{
+	margin-bottom:15px;
+}
+</style>

src/views/material/manage/components/dict-data-edit.vue

@@ -1,163 +0,0 @@
-<!-- 字典项编辑弹窗 -->
-<template>
-  <ele-modal
-    width="460px"
-    :visible="visible"
-    :close-on-click-modal="true"
-    :title="isUpdate ? '修改字典项' : '添加字典项'"
-    @update:visible="updateVisible"
-  >
-    <el-form :model="form" ref="form" :rules="rules" label-width="96px">
-      <el-form-item label="字典项名称:" prop="dictDataName">
-        <el-input
-          clearable
-          :maxlength="20"
-          v-model="form.dictDataName"
-          placeholder="请输入字典项名称"
-        />
-      </el-form-item>
-      <el-form-item label="字典项值:" prop="dictDataCode">
-        <el-input
-          clearable
-          :maxlength="20"
-          v-model="form.dictDataCode"
-          placeholder="请输入字典项值"
-        />
-      </el-form-item>
-      <el-form-item label="排序号:" prop="sortNumber">
-        <el-input-number
-          :min="0"
-          :max="9999"
-          v-model="form.sortNumber"
-          placeholder="请输入排序号"
-          controls-position="right"
-          class="ele-fluid ele-text-left"
-        />
-      </el-form-item>
-      <el-form-item label="备注:">
-        <el-input
-          :rows="4"
-          type="textarea"
-          :maxlength="200"
-          v-model="form.comments"
-          placeholder="请输入备注"
-        />
-      </el-form-item>
-    </el-form>
-    <template v-slot:footer>
-      <el-button @click="updateVisible(false)">取消 </el-button>
-      <el-button type="primary" :loading="loading" @click="save">
-        保存
-      </el-button>
-    </template>
-  </ele-modal>
-</template>
-
-<script>
-  import {
-    addDictionaryData,
-    updateDictionaryData
-  } from '@/api/system/dictionary-data';
-
-  export default {
-    // props: {
-    //   // 弹窗是否打开
-    //   visible: Boolean,
-    //   // 修改回显的数据
-    //   data: Object,
-    //   // 字典id
-    //   dictId: Object
-    // },
-    props: ['visible', 'data', 'dictId'],
-    data() {
-      const defaultForm = {
-        dictDataId: null,
-        dictDataName: '',
-        dictDataCode: '',
-        sortNumber: '',
-        comments: ''
-      };
-      return {
-        defaultForm,
-        // 表单数据
-        form: { ...defaultForm },
-        // 表单验证规则
-        rules: {
-          dictDataName: [
-            {
-              required: true,
-              message: '请输入字典项名称',
-              trigger: 'blur'
-            }
-          ],
-          dictDataCode: [
-            {
-              required: true,
-              message: '请输入字典项值',
-              trigger: 'blur'
-            }
-          ],
-          sortNumber: [
-            {
-              required: true,
-              message: '请输入排序号',
-              trigger: 'blur'
-            }
-          ]
-        },
-        // 提交状态
-        loading: false,
-        // 是否是修改
-        isUpdate: false
-      };
-    },
-    methods: {
-      /* 保存编辑 */
-      save() {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            return false;
-          }
-          this.loading = true;
-          const saveOrUpdate = this.isUpdate
-            ? updateDictionaryData
-            : addDictionaryData;
-          saveOrUpdate({
-            ...this.form,
-            dictId: this.dictId
-          })
-            .then((msg) => {
-              this.loading = false;
-              console.log(msg);
-              this.$message.success(msg);
-              this.updateVisible(false);
-              this.$emit('done');
-            })
-            .catch((e) => {
-              this.loading = false;
-              // this.$message.error(e.message);
-            });
-        });
-      },
-      /* 更新visible */
-      updateVisible(value) {
-        this.$emit('update:visible', value);
-      }
-    },
-    watch: {
-      visible(visible) {
-        if (visible) {
-          if (this.data) {
-            this.$util.assignObject(this.form, this.data);
-            this.isUpdate = true;
-          } else {
-            this.isUpdate = false;
-          }
-        } else {
-          this.$refs.form.clearValidate();
-          this.form = { ...this.defaultForm };
-        }
-      }
-    }
-  };
-</script>

src/views/material/manage/components/dict-edit.vue

@@ -1,476 +0,0 @@
-<!-- 字典编辑弹窗 -->
-<template>
-  <ele-modal
-    width="800px"
-    :maxable="true"
-    :visible="visible"
-    :close-on-click-modal="true"
-    :title="isUpdate ? '修改字典' : '添加字典'"
-    @update:visible="updateVisible"
-  >
-    <div class="divider">
-      <div class="title">
-        <div class="ele-bg-primary"></div>
-        <span>基本信息</span>
-      </div>
-      <div class="ele-bg-primary" style="width: 100%; height: 2px"></div>
-    </div>
-    <el-form
-      ref="form"
-      :model="form"
-      :rules="rules"
-      label-width="85px"
-      style="margin-bottom: 10px"
-    >
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="字典名称:" prop="name">
-            <el-input
-              clearable
-              :disabled="isUpdate"
-              :maxlength="20"
-              v-model="form.name"
-              placeholder="请输入字典名称"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="字典值:" prop="code">
-            <el-input
-              clearable
-              :disabled="isUpdate"
-              :maxlength="20"
-              v-model="form.code"
-              placeholder="请输入字典值"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="应用类型:" prop="appType">
-            <el-radio-group v-model="form.appType">
-              <el-radio :label="1">业务字典</el-radio>
-              <el-radio :label="2">数据字典</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="是否启用:" prop="enable">
-            <el-radio-group v-model="form.enable">
-              <el-radio :label="1">是</el-radio>
-              <el-radio :label="0">否</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="12">
-          <el-form-item label="排序号:" prop="sortNumber">
-            <el-input-number
-              :min="0"
-              :max="9999"
-              v-model="form.sortNumber"
-              controls-position="right"
-              placeholder="请输入排序号"
-              class="ele-fluid ele-text-left"
-            />
-          </el-form-item>
-        </el-col> -->
-
-        <el-col :span="24">
-          <el-form-item label="备注:">
-            <el-input
-              :rows="4"
-              type="textarea"
-              :maxlength="200"
-              v-model="form.remark"
-              placeholder="请输入备注"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div class="divider">
-      <div class="title">
-        <div class="ele-bg-primary"></div>
-        <span>字典项配置</span>
-      </div>
-      <div class="ele-bg-primary" style="width: 100%; height: 2px"></div>
-    </div>
-    <div style="margin: 5px 0">
-      <el-button
-        size="small"
-        type="primary"
-        icon="el-icon-plus"
-        class="ele-btn-icon"
-        @click="pushArr"
-      >
-        添加
-      </el-button>
-
-      <!-- <el-button
-        size="small"
-        type="danger"
-        icon="el-icon-delete"
-        class="ele-btn-icon"
-        @click="removeArr"
-      >
-        删除
-      </el-button> -->
-    </div>
-    <el-table
-      :data="tableData"
-      border
-      style="width: 100%"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column prop="code" label="字典项编码">
-        <template slot-scope="scope">
-          <el-input
-            @blur="checkedValue(scope.row.code)"
-            v-model="scope.row.code"
-            placeholder=""
-          ></el-input>
-        </template>
-      </el-table-column>
-      <el-table-column prop="name" label="字典项名称">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.name" placeholder=""></el-input>
-        </template>
-      </el-table-column>
-      <el-table-column prop="sort" label="排序">
-        <template slot-scope="scope">
-          <el-input
-            v-model="scope.row.sort"
-            @input="
-              scope.row.sort = String(scope.row.sort).replace(/[^\d]/g, '')
-            "
-          ></el-input>
-        </template>
-      </el-table-column>
-      <el-table-column prop="enable" label="启用">
-        <template slot-scope="scope">
-          <el-radio-group v-model="scope.row.enable">
-            <el-radio :label="1">是</el-radio>
-            <el-radio :label="0">否</el-radio>
-          </el-radio-group>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作">
-        <template slot-scope="scope">
-          <el-popconfirm
-            class="ele-action"
-            title="确定要删除此字典项吗？"
-            @confirm="removeArr(scope)"
-          >
-            <template v-slot:reference>
-              <el-link type="danger" :underline="false" icon="el-icon-delete">
-                删除
-              </el-link>
-            </template>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <template v-slot:footer>
-      <el-button @click="updateVisible(false)">取消</el-button>
-      <el-button type="primary" :loading="loading" @click="save">
-        保存
-      </el-button>
-    </template>
-  </ele-modal>
-</template>
-
-<script>
-  import { addDictionary, updateDictionary } from '@/api/system/dictionary';
-  import {
-    pageDictionaryData,
-    removeDictionaryData,
-    removeDictionaryDataBatch
-  } from '@/api/system/dictionary-data';
-
-  export default {
-    props: {
-      // 弹窗是否打开
-      visible: Boolean,
-      // 修改回显的数据
-      id: String | Number
-    },
-    data() {
-      const defaultForm = {
-        name: '',
-        code: '',
-        appType: 1,
-        enable: 1,
-        remark: '',
-        dictStaticSubmitPOList: []
-      };
-      return {
-        defaultForm,
-        // 表单数据
-        form: { ...defaultForm },
-        // form: {
-        //   name: '',
-        //   code: '',
-        //   appType: 1,
-        //   enable: 1,
-        //   remark: ''
-        // },
-        // 表单验证规则
-        rules: {
-          name: [
-            {
-              required: true,
-              message: '请输入字典名称',
-              trigger: 'blur'
-            }
-          ],
-          code: [
-            {
-              required: true,
-              message: '请输入字典值',
-              trigger: 'blur'
-            }
-          ],
-          appType: [
-            {
-              required: true,
-              message: '请选择应用类型',
-              trigger: 'blur'
-            }
-          ],
-          enable: [
-            {
-              required: true,
-              message: '请选择是否启用',
-              trigger: 'blur'
-            }
-          ],
-          sort: [
-            {
-              required: true,
-              message: '请输入排序号',
-              trigger: 'blur'
-            }
-          ]
-        },
-        // 表格列配置
-        columns: [
-          {
-            columnKey: 'selection',
-            type: 'selection',
-            width: 45,
-            align: 'center'
-          },
-          {
-            columnKey: 'index',
-            type: 'index',
-            width: 45,
-            align: 'center',
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'code',
-            label: '字典编码',
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'name',
-            label: '字典名称',
-
-            showOverflowTooltip: true
-          },
-          // {
-          //   prop: 'appType',
-          //   label: '字典类型',
-
-          //   showOverflowTooltip: true,
-          //   minWidth: 110
-          // },
-          {
-            prop: 'appType',
-            label: '应用类型',
-
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'remark',
-            label: '描述',
-
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'createTime',
-            label: '创建时间',
-
-            showOverflowTooltip: true,
-            minWidth: 110,
-            formatter: (_row, _column, cellValue) => {
-              return this.$util.toDateString(cellValue);
-            }
-          },
-          {
-            columnKey: 'action',
-            label: '操作',
-            width: 130,
-            align: 'center',
-            resizable: false,
-            slot: 'action',
-            showOverflowTooltip: true
-          }
-        ],
-        tableData: [],
-        // 表格选中数据
-        selection: [],
-        datasource: {
-          list: []
-        },
-        // 提交状态
-        loading: false,
-        // 是否是修改
-        isUpdate: false,
-        delectId: 1
-      };
-    },
-    created() {},
-
-    methods: {
-      pushArr() {
-        this.form.dictStaticSubmitPOList.push({
-          code: '',
-          enable: 1,
-          name: '',
-          sort: '',
-          delectId: this.delectId
-        });
-        this.delectId = this.delectId + 1;
-        this.filterArr();
-      },
-      //
-      checkedValue(val) {
-        console.log(val);
-      },
-      removeArr(row) {
-        console.log(row);
-        if (row.row.id) {
-          this.form.dictStaticSubmitPOList.forEach((item) => {
-            if (item.id === row.row.id) {
-              item.deleted = 1;
-            }
-          });
-          this.filterArr();
-        } else {
-          let index = this.form.dictStaticSubmitPOList.findIndex(
-            (item) => item.delectId === row.row.delectId
-          );
-          console.log(index);
-          this.form.dictStaticSubmitPOList.splice(index, 1); // 在数组的指定位置移除对应的元素。 返回移除的
-          this.filterArr();
-        }
-
-        // let falg = this.form.dictStaticSubmitPOList[row.$index].deleted === 0;
-        // if (falg) {
-        //   this.form.dictStaticSubmitPOList[row.$index].deleted = 1;
-        //   this.filterArr();
-        // } else {
-        //   this.form.dictStaticSubmitPOList.splice(row.$index, 1);
-        //   this.filterArr();
-        // }
-      },
-      handleSelectionChange() {},
-      /* 保存编辑 */
-      save() {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            return false;
-          }
-          let falg = this.form.dictStaticSubmitPOList.some(
-            (item, index) => item.code.length === 0
-          );
-          if (falg) {
-            this.$message({
-              message: '字典项编码不能为空',
-              type: 'warning'
-            });
-            return;
-          }
-          this.form.dictStaticSubmitPOList.forEach((item, index) => {
-            if (item.delectId) {
-              delete item.delectId;
-            }
-          });
-
-          this.loading = true;
-          const saveOrUpdate = this.isUpdate ? updateDictionary : addDictionary;
-          saveOrUpdate(this.form)
-            .then((msg) => {
-              this.loading = false;
-              this.$message.success(msg);
-              this.updateVisible(false);
-              this.$emit('done');
-            })
-            .catch((e) => {
-              this.loading = false;
-              // // this.$message.error(e.message);
-            });
-        });
-      },
-      filterArr() {
-        this.tableData = this.form.dictStaticSubmitPOList.filter(
-          (item) => item.deleted !== 1
-        );
-      },
-      /* 更新visible */
-      updateVisible(value) {
-        this.$emit('update:visible', value);
-      },
-
-      async getDetail() {
-        const res = await pageDictionaryData(this.id);
-        this.form = res.data.dictInfoVO;
-
-        this.form.dictStaticSubmitPOList = res.data.dictStaticVOList;
-        if (this.form.dictStaticSubmitPOList.length > 0) {
-          this.filterArr();
-        } else {
-          this.tableTata = [];
-        }
-      }
-    },
-    watch: {
-      visible(visible) {
-        if (visible) {
-          if (this.id) {
-            // this.$util.assignObject(this.form, this.data);
-            this.isUpdate = true;
-            this.getDetail();
-          } else {
-            this.isUpdate = false;
-          }
-        } else {
-          this.$refs.form.clearValidate();
-          this.form = { ...this.defaultForm };
-          this.form.dictStaticSubmitPOList = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后
-          this.tableData = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后。
-        }
-      }
-    }
-  };
-</script>
-<style lang="scss" scoped>
-  .divider {
-    margin-bottom: 20px;
-
-    .title {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
-      div {
-        width: 8px;
-        height: 20px;
-        margin-right: 10px;
-      }
-      span {
-        font-size: 20px;
-      }
-    }
-  }
-</style>

src/views/material/manage/components/dict-data.vue → src/views/material/manage/components/index-data.vue

@@ -52,23 +52,19 @@
       </template>
     </ele-pro-table>
     <!-- 编辑弹窗 -->
-    <dict-edit :visible.sync="showEdit" :id="id" @done="reload" />
+<!--    <dict-edit :visible.sync="showEdit" :id="id" @done="reload" /> -->
   </div>
 </template>
 
 <script>
-  import DictDataSearch from './dict-data-search.vue';
-  import DictDataEdit from './dict-data-edit.vue';
   import {
     pageDictionaryData,
     removeDictionaryData,
     removeDictionaryDataBatch
   } from '@/api/system/dictionary-data';
   import { listDictionaries, removeDictionary } from '@/api/system/dictionary';
-  import DictEdit from './dict-edit.vue';
-
   export default {
-    components: { DictDataSearch, DictDataEdit, DictEdit },
+    components: { },
     data() {
       return {
         // 表格列配置
@@ -176,7 +172,13 @@
           this.id = row.id;
           this.current = row;
         }
-        this.showEdit = true;
+        this.$router.push({
+          path: '/material/manage/manageMaterial',
+          // query: {
+          //   pageTitle: '编辑物品',
+          //   id: row.id
+          // }
+        });
       },
       /* 删除 */
       remove(row) {

src/views/material/manage/components/dict-data-search.vue → src/views/material/manage/components/index-search.vue

@@ -61,15 +61,9 @@
       // 默认表单数据
       const defaultWhere = {
         name: '',
-        code: '',
-        appType: ''
+        code: ''
       };
       return {
-        options: [
-          { value: 0, label: '全部' },
-          { value: 1, label: '业务字典' },
-          { value: 2, label: '数据字典' }
-        ],
         defaultWhere,
         // 表单数据
         where: { ...defaultWhere }
@@ -84,9 +78,6 @@
     methods: {
       /* 搜索 */
       search() {
-        if (this.where.appType === 0) {
-          this.where.appType = '';
-        }
         this.$emit('search', this.where);
       },
       /*  重置 */

src/views/material/manage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ele-body">
     <el-card shadow="never">
-      <DictDataSearch @search="reload" />
+      <IndexSearch @search="reload" />
 <!--      <div style="margin: 5px 0; padding-left: 262px">
         <el-button
           size="small"
@@ -38,7 +38,7 @@
 
         <template v-slot:content>
           <!-- 物料列表 -->
-          <dict-data ref="dictData" v-if="current" :dict-id="current.id" />
+          <IndexData ref="listData" v-if="current" :dict-id="current.id" />
         </template>
       </ele-split-layout>
     </el-card>
@@ -48,14 +48,13 @@
 </template>
 
 <script>
-  import DictData from './components/dict-data.vue';
-  import DictEdit from './components/dict-edit.vue';
-  import DictDataSearch from './components/dict-data-search.vue';
+  import IndexData from './components/index-data.vue';
+  import IndexSearch from './components/index-search.vue';
   import { listDictionaries, removeDictionary } from '@/api/system/dictionary';
-  import { getSubPage } from '@/api/classifyManage';
+  import { getGroupPage } from '@/api/material/list';
   export default {
     name: 'SystemDictionary',
-    components: { DictData, DictEdit, DictDataSearch },
+    components: { IndexData , IndexSearch },
     data() {
       return {
         // 表格列配置
@@ -85,7 +84,7 @@
     methods: {
       /* 表格数据源 */
       datasource() {
-        return getSubPage({pageNum:1,size:-1,parentId: 0});
+        return getGroupPage({pageNum:1,size:-1});
       },
       /* 表格渲染完成回调 */
       done(res) {
@@ -96,7 +95,7 @@
       /* 刷新表格 */
       reload(where) {
         this.$refs.table.reload();
-        this.$refs.dictData.reload(where);
+        this.$refs.listData.reload(where);
       }
     }
   };

src/views/material/manage/manageMaterial.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <el-form label-width="90px"  ref="form" :model="form" :rules="rules">
+         <div class="body-top">
+            <div class="top-left">
+               <div class="ele-page-header ele-cell">
+                 <div class="ele-page-title">管理物料</div>
+               </div>
+               <el-row :gutter="24">
+                 <el-col :span="24">
+                   <el-form-item label="物料组"  label-width="70px" prop="categoryLevelRootName">
+                      <el-input @click.native="chooseMaterial" v-model="form.categoryLevelRootName"/>
+                   </el-form-item>
+                 </el-col>
+               </el-row>
+            </div>
+            <div>
+               <el-button @click="cancel">返回</el-button>
+               <el-button type="primary">保存</el-button>
+            </div>
+         </div>
+         <div class="divider">
+           <div class="title">
+             <div class="ele-bg-primary"></div>
+             <span>基本信息</span>
+           </div>
+           <div class="ele-bg-primary ele-width"></div>
+         </div>
+         <el-row :gutter="24">
+           <el-col :span="8">
+             <el-form-item label="编码" prop="code">
+                <el-input  v-model="form.code"/>
+             </el-form-item>
+           </el-col>
+           <el-col :span="8">
+             <el-form-item label="名称" prop="name">
+                <el-input  v-model="form.name"/>
+             </el-form-item>
+           </el-col>
+           <el-col :span="8">
+             <el-form-item label="分类" prop="categoryName">
+                <el-input  v-model="form.categoryName"/>
+             </el-form-item>
+           </el-col>
+           <el-col :span="8">
+             <el-form-item label="牌号" prop="brand">
+                <el-input  v-model="form.brand"/>
+             </el-form-item>
+           </el-col>
+           <el-col :span="8">
+             <el-form-item label="规格" prop="specifications">
+                <el-input  v-model="form.specifications"/>
+             </el-form-item>
+           </el-col>
+           <el-col :span="8">
+             <el-form-item label="型号" prop="model">
+                <el-input  v-model="form.model"/>
+             </el-form-item>
+           </el-col>
+         </el-row>
+
+
+      </el-form>
+    </el-card>
+
+    <!-- 物料组弹窗 -->
+    <GroupDialog ref="groupRefs" @changeMaterial='determineChoose'/>
+  </div>
+</template>
+
+<script>
+  import GroupDialog from './components/GroupDialog.vue'
+  export default {
+    name: 'ManageMaterial',
+    components: { GroupDialog },
+    data() {
+      return {
+         form:{
+           categoryLevelRootName:'',
+           categoryName:''
+         },
+         // 表单验证规则
+         rules: {
+         	  categoryLevelRootName:[{ required: true, message: '请选择所属物料组', trigger: 'change' }],
+            code:[{ required: true, message: '请输入编码', trigger: 'blur' }],
+            name:[{ required: true, message: '请输入名称', trigger: 'blur' }],
+            categoryName:[{ required: true, message: '请选择所属分类', trigger: 'change' }],
+         },
+         chooseItem:null,
+
+
+      };
+    },
+
+    methods: {
+      chooseMaterial(){
+          this.$refs.groupRefs.open(this.chooseItem)
+      },
+      determineChoose(row){
+        this.chooseItem = row
+        this.$set(this.form,'categoryLevelRootName',row.name)
+      },
+      cancel(){
+        this.$router.go(-1)
+      },
+
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-page-header{
+  	border: none;
+  }
+  .body-top{
+  	display: flex;
+  	align-items:center;
+  	justify-content:space-between;
+  	background: #fff;
+    .top-left{
+       display: flex;
+       align-items:center;
+       justify-content: flex-start;
+       margin-left: -25px;
+        .el-form-item{
+       	  margin-bottom: 0;
+       }
+    }
+
+  }
+  .divider {
+    margin: 20px 0;
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      div {
+        width: 8px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      span {
+        font-size: 20px;
+      }
+    }
+    .ele-width{
+      width: 100%;
+      height: 2px;
+    }
+  }
+</style>