物料管理页面调整

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

@@ -1,12 +1,12 @@
 <template>
-  <el-dialog
-    title="选择分类"
+  <ele-modal
+    :title="title"
     :visible.sync="treeVisible"
     :before-close="handleClose"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     append-to-body
-    width="60%"
+    width="40%"
   >
     <div class="ele-border-lighter sys-organization-list">
       <el-tree
@@ -20,11 +20,11 @@
         @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 v-slot:footer>
+      <el-button @click="handleClose">关闭</el-button>
+      <el-button type="primary" @click="selected">选择</el-button>
+    </template>
+  </ele-modal>
 </template>
 
 <script>
@@ -34,6 +34,8 @@ export default {
     return {
       treeVisible: false,
       treeData: [],
+      current:null,
+      title:'选择分类'
     }
   },
 
@@ -41,26 +43,28 @@ export default {
 
   },
   methods: {
-    open(pid){
+    open(pid,title){
       this.treeVisible = true
+      this.title = title
       this.getTree(pid)
     },
     handleClose () {
       this.treeVisible = false
+      this.current = null
     },
     getTree(pid){
       getTreeByPid(pid).then(res=>{
-         console.log('res',res)
+         this.treeData = res
       })
     },
-    onNodeClick(){
-
+    onNodeClick(node){
+       this.current = node
     },
     selected(){
        if(!this.current){
-         return this.$message.warning('请选择物料组')
+         return this.$message.warning(`请${this.title}`)
        }
-       this.$emit('changeMaterial',this.current)
+       this.$emit('chooseCategory',this.current,this.title)
        this.handleClose()
     },
 

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

@@ -11,7 +11,7 @@
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="附件" prop="allowReturns">
-                <ele-image-upload v-model="form.files" :limit="1" @upload="onUpload" />
+                 <fileUpload v-model="imgList" module="file" :limit="4" ></fileUpload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
@@ -25,26 +25,24 @@
 </template>
 
 <script>
-  import EleImageUpload from 'ele-admin/es/ele-image-upload';
+  import fileUpload from '@/components/upload/fileUpload';
   export default {
     props: {
       form: {
         type: Object,
         default: {}
+      },
+      imgList:{
+        type:Array,
+        default:[]
       }
     },
-    components: { EleImageUpload  },
+    components: { fileUpload  },
     data() {
       return {
-
-
       };
     },
-
     methods: {
-      onUpload(){
-        
-      }
 
 
     }

src/views/material/manage/manageMaterial.vue

@@ -10,7 +10,7 @@
                <el-row :gutter="24">
                  <el-col :span="24">
                    <el-form-item label="物料组"  label-width="70px" prop="categoryLevelGroupName">
-                      <el-input @click.native="chooseMaterial" v-model="form.categoryLevelGroupName"/>
+                      <el-input @click.native="chooseMaterial" v-model="form.categoryLevelGroupName" readonly/>
                    </el-form-item>
                  </el-col>
                </el-row>
@@ -40,7 +40,7 @@
            </el-col>
            <el-col :span="8">
              <el-form-item label="分类" prop="categoryLevelName">
-                <el-input  v-model="form.categoryLevelName"  @click.native="openCategory"/>
+                <el-input  v-model="form.categoryLevelName"  @click.native="openCategory" readonly/>
              </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" :active-value="true" :inactive-value="false"> </el-switch>
+                <el-switch @change="changeProduct" v-model="form.isProduct" :active-value="true" :inactive-value="false"> </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
@@ -118,8 +118,11 @@
              </el-form-item>
            </el-col>
            <el-col :span="8">
-             <el-form-item label="产品分类"  :prop="form.isProduct?'productCategory':''" >
-                <el-input  v-model="form.productCategory"/>
+             <el-form-item label="产品分类"  prop="productCategoryLevelName" :rules='
+                form.isProduct? [{ required: true, trigger: "change", message: "请选择产品分类" }]:[]
+              '
+            >
+                <el-input readonly :disabled="!form.isProduct" v-model="form.productCategoryLevelName" @click.native="openProductCategory"/>
              </el-form-item>
            </el-col>
          </el-row>
@@ -129,7 +132,7 @@
     <!-- 物料组弹窗 -->
     <GroupDialog ref="groupRefs" @changeMaterial='determineChoose'/>
     <!-- 分类选择弹窗 -->
-    <CategoryDialog ref="categoryRefs"/>
+    <CategoryDialog ref="categoryRefs" @chooseCategory='confirmCategory'/>
     <!-- 仓储配置 -->
     <WarehouseInfo ref="warehouseRefs" :form="form"/>
    <!-- 采购 -->
@@ -149,7 +152,7 @@
      <!-- 模具信息 -->
      <MoldInfo ref="moldRefs" :form="form"/>
      <!-- 备注信息 -->
-     <RemarkInfo ref="remarkRefs" :form="form"/>
+     <RemarkInfo ref="remarkRefs" :form="remarkform" :imgList="imgList"/>
   </div>
 </template>
 
@@ -178,24 +181,27 @@
       return {
          form:{
            categoryLevelGroupName:'',
-           categoryLevelName:'',
-           files:[]
-         },
-         // 表单验证规则
-         rules: {
-         	  categoryLevelGroupName:[{ required: true, message: '请选择所属物料组', trigger: 'change' }],
-            code:[{ required: true, message: '请输入编码', trigger: 'blur' }],
-            name:[{ required: true, message: '请输入名称', trigger: 'blur' }],
-            categoryLevelName:[{ required: true, message: '请选择所属分类', trigger: 'change' }],
-            measuringUnit:[{ required: true, message: '请选择计量单位', trigger: 'change' }],
-            isProduct:[{ required: true, message: '请选择是否产品', trigger: 'change' }],
-            productCategory:[{ required: true, trigger: "change", message: "产品分类必填" }]
+           categoryLevelName:''
          },
+         remarkform:{},
+         imgList:[],
          chooseItem:null,
-
-
       };
     },
+    computed:{
+      rules(){
+         const rules ={
+        	  categoryLevelGroupName:[{ required: true, message: '请选择所属物料组', trigger: 'change' }],
+           code:[{ required: true, message: '请输入编码', trigger: 'blur' }],
+           name:[{ required: true, message: '请输入名称', trigger: 'blur' }],
+           categoryLevelName:[{ required: true, message: '请选择所属分类', trigger: 'change' }],
+           measuringUnit:[{ required: true, message: '请选择计量单位', trigger: 'change' }],
+           isProduct:[{ required: true, message: '请选择是否产品', trigger: 'change' }],
+         }
+         return rules
+      }
+    },
+
 
     methods: {
       // 选择所属部门
@@ -212,9 +218,16 @@
 
       chooseMaterial(){
           this.$refs.groupRefs.open(this.chooseItem)
-      },   
+      },
+      // 选择分类
       openCategory(){
-         this.$refs.categoryRefs.open(this.chooseItem.categoryLevelRootId)
+          if(!this.chooseItem) return this.$message.warning('请先选择物料组！')
+          this.$refs.categoryRefs.open(this.chooseItem.categoryLevelRootId,'选择分类')
+      },
+      // 选择产品分类
+      openProductCategory(){
+        if(!this.form.isProduct) return
+          this.$refs.categoryRefs.open(9,'选择产品分类')
       },
       determineChoose(row){
         this.chooseItem = row
@@ -225,13 +238,30 @@
         this.$router.go(-1)
       },
 
+      // 确定分类
+      confirmCategory(node,title){
+         if(title=='选择产品分类'){
+            this.$set(this.form,'productCategoryLevelName',node.name)
+            this.$set(this.form,'productCategoryLevelId',node.id)
+         }else{
+            this.$set(this.form,'categoryLevelName',node.name)
+            this.$set(this.form,'categoryLevelId',node.id)
+         }
+      },
+
+      changeProduct(){
+         if(!this.form.isProduct){
+           this.$refs.manageForm.clearValidate(["productCategoryLevelName"]);
+         }
+      },
+
       // 保存
       submit(){
         this.$refs.manageForm.validate((valid) => {
           if (!valid) {
             return false;
           }
-          console.log('保存了')
+          console.log('保存了',this.remarkform)
 
         });