管理物料页面提交

src/api/material/list.js

@@ -38,3 +38,5 @@ export async function removeItem (data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+

src/api/material/manage.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request';
+
+
+// 根据分类组编码查询分类树信息
+export async function getTreeByPid (pid) {
+  const res = await request.get(`/main/categoryLevel/getTreeByPid/${pid}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

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

@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    title="选择分类"
+    :visible.sync="treeVisible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    width="60%"
+  >
+    <div class="ele-border-lighter sys-organization-list">
+      <el-tree
+        ref="tree"
+        :data="treeData"
+        highlight-current
+        node-key="id"
+        :props="{ label: 'name' }"
+        :expand-on-click-node="false"
+        :default-expand-all="true"
+        @node-click="onNodeClick"
+      />
+    </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 { getTreeByPid } from '@/api/material/manage.js'
+export default {
+  data () {
+    return {
+      treeVisible: false,
+      treeData: [],
+    }
+  },
+
+  watch: {
+
+  },
+  methods: {
+    open(pid){
+      this.treeVisible = true
+      this.getTree(pid)
+    },
+    handleClose () {
+      this.treeVisible = false
+    },
+    getTree(pid){
+      getTreeByPid(pid).then(res=>{
+         console.log('res',res)
+      })
+    },
+    onNodeClick(){
+
+    },
+    selected(){
+       if(!this.current){
+         return this.$message.warning('请选择物料组')
+       }
+       this.$emit('changeMaterial',this.current)
+       this.handleClose()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .sys-organization-list {
+    height: calc(100vh - 264px);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+
+  .sys-organization-list :deep(.el-tree-node__content) {
+    height: 40px;
+
+    & > .el-tree-node__expand-icon {
+      margin-left: 10px;
+    }
+  }
+</style>

src/views/material/manage/manageMaterial.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ele-body">
     <el-card shadow="never">
-      <el-form label-width="120px"  ref="form" :model="form" :rules="rules">
+      <el-form label-width="120px"  ref="manageForm" :model="form" :rules="rules">
          <div class="body-top">
             <div class="top-left">
                <div class="ele-page-header ele-cell">
@@ -17,7 +17,7 @@
             </div>
             <div>
                <el-button @click="cancel">返回</el-button>
-               <el-button type="primary">保存</el-button>
+               <el-button type="primary" @click="submit">保存</el-button>
             </div>
          </div>
          <div class="divider">
@@ -40,7 +40,7 @@
            </el-col>
            <el-col :span="8">
              <el-form-item label="分类" prop="categoryLevelName">
-                <el-input  v-model="form.categoryLevelName"/>
+                <el-input  v-model="form.categoryLevelName"  @click.native="openCategory"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
@@ -99,7 +99,7 @@
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否产品" prop="isProduct">
-                <el-switch v-model="form.isProduct"> </el-switch>
+                <el-switch v-model="form.isProduct" :active-value="true" :inactive-value="false"> </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
@@ -118,8 +118,8 @@
              </el-form-item>
            </el-col>
            <el-col :span="8">
-             <el-form-item label="产品分类">
-                <el-input  v-model="form.categoryLevelName"/>
+             <el-form-item label="产品分类"  :prop="form.isProduct?'productCategory':''" >
+                <el-input  v-model="form.productCategory"/>
              </el-form-item>
            </el-col>
          </el-row>
@@ -128,7 +128,8 @@
 
     <!-- 物料组弹窗 -->
     <GroupDialog ref="groupRefs" @changeMaterial='determineChoose'/>
-
+    <!-- 分类选择弹窗 -->
+    <CategoryDialog ref="categoryRefs"/>
     <!-- 仓储配置 -->
     <WarehouseInfo ref="warehouseRefs" :form="form"/>
    <!-- 采购 -->
@@ -154,6 +155,7 @@
 
 <script>
   import GroupDialog from './components/GroupDialog.vue';
+  import CategoryDialog from './components/CategoryDialog.vue';
   import WarehouseInfo from './components/WarehouseInfo.vue';
   import ProcureInfo from './components/ProcureInfo.vue';
   import ProductionInfo from './components/ProductionInfo.vue';
@@ -170,7 +172,7 @@
     name: 'ManageMaterial',
     components: {
       GroupDialog , deptSelect , personSelect , WarehouseInfo , ProcureInfo ,ProductionInfo ,
-      PlanInfo , SalesInfo , QualityInfo , BoatInfo , TurnoverInfo , MoldInfo , RemarkInfo
+      PlanInfo , SalesInfo , QualityInfo , BoatInfo , TurnoverInfo , MoldInfo , RemarkInfo , CategoryDialog
     },
     data() {
       return {
@@ -187,6 +189,7 @@
             categoryLevelName:[{ required: true, message: '请选择所属分类', trigger: 'change' }],
             measuringUnit:[{ required: true, message: '请选择计量单位', trigger: 'change' }],
             isProduct:[{ required: true, message: '请选择是否产品', trigger: 'change' }],
+            productCategory:[{ required: true, trigger: "change", message: "产品分类必填" }]
          },
          chooseItem:null,
 
@@ -209,6 +212,9 @@
 
       chooseMaterial(){
           this.$refs.groupRefs.open(this.chooseItem)
+      },   
+      openCategory(){
+         this.$refs.categoryRefs.open(this.chooseItem.categoryLevelRootId)
       },
       determineChoose(row){
         this.chooseItem = row
@@ -219,6 +225,18 @@
         this.$router.go(-1)
       },
 
+      // 保存
+      submit(){
+        this.$refs.manageForm.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          console.log('保存了')
+
+        });
+
+      }
+
     }
   };
 </script>