kd-aiot-frontend/src/views/material/manage/manageMaterial.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <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">
                 <div class="ele-page-title">管理物料</div>
               </div>
               <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" readonly/>
                   </el-form-item>
                 </el-col>
               </el-row>
            </div>
            <div>
               <el-button @click="cancel">返回</el-button>
               <el-button type="primary" @click="submit">保存</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="categoryLevelName">
                <el-input  v-model="form.categoryLevelName"  @click.native="openCategory" readonly/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="牌号" prop="brandNum">
                <el-input  v-model="form.brandNum"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="规格" prop="specification">
                <el-input  v-model="form.specification"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="型号" prop="modelType">
                <el-input  v-model="form.modelType"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="计量单位" prop="measuringUnit">
                <DictSelection dictName="计量单位" clearable v-model="form.measuringUnit">
                </DictSelection>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="包装单位" prop="packingUnit">
                <DictSelection dictName="包装单位" clearable v-model="form.packingUnit">
                </DictSelection>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="体积">
                <div class="form-line">
                  <el-input  v-model="form.volume"/>
                  <DictSelection class="line-select" dictName="体积单位" clearable v-model="form.volumeUnit">
                  </DictSelection>
                </div>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="毛重">
                <div class="form-line">
                  <el-input  v-model="form.roughWeight"/>
                  <DictSelection class="line-select" dictName="重量单位" clearable v-model="form.roughWeightUnit">
                  </DictSelection>
                </div>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="净重">
                <div class="form-line">
                  <el-input  v-model="form.netWeight"/>
                  <DictSelection class="line-select" dictName="重量单位" clearable v-model="form.netWeightUnit">
                  </DictSelection>
                </div>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="是否产品" prop="isProduct">
                <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">
             <el-form-item label="所属部门">
                <deptSelect v-model="form.deptLeaderId" @changeGroup="searchDeptNodeClick"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="负责人">
                <personSelect
                  ref="directorRef"
                  v-model="form.deptId"
                  @selfChange="handleDirectorChange"
                  :init="false"
                />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <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>
      </el-form>
    </el-card>

    <!-- 物料组弹窗 -->
    <GroupDialog ref="groupRefs" @changeMaterial='determineChoose'/>
    <!-- 分类选择弹窗 -->
    <CategoryDialog ref="categoryRefs" @chooseCategory='confirmCategory'/>
    <!-- 仓储配置 -->
    <WarehouseInfo ref="warehouseRefs" :form="form"/>
   <!-- 采购 -->
    <ProcureInfo ref="procureRefs" :form="form"/>
    <!-- 生产信息 -->
     <ProductionInfo ref="productionRefs" :form="form"/>
     <!-- 计划 -->
     <PlanInfo ref="planRefs" :form="form"/>
     <!-- 销售信息 -->
     <SalesInfo ref="salesRefs" :form="form"/>
     <!-- 质量配置 -->
     <QualityInfo ref="qualityRefs" :form="form"/>
     <!-- 舟皿信息 -->
     <BoatInfo ref="qualityRefs" :form="form"/>
     <!-- 周转车信息 -->
     <TurnoverInfo ref="turnoverRefs" :form="form"/>
     <!-- 模具信息 -->
     <MoldInfo ref="moldRefs" :form="form"/>
     <!-- 备注信息 -->
     <RemarkInfo ref="remarkRefs" :form="remarkform" :imgList="imgList"/>
  </div>
</template>

<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';
  import PlanInfo from './components/PlanInfo.vue';
  import SalesInfo from './components/SalesInfo.vue';
  import QualityInfo from './components/QualityInfo.vue';
  import BoatInfo from './components/BoatInfo.vue';
  import TurnoverInfo from './components/TurnoverInfo.vue';
  import MoldInfo from './components/MoldInfo.vue';
  import RemarkInfo from './components/RemarkInfo.vue';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  export default {
    name: 'ManageMaterial',
    components: {
      GroupDialog , deptSelect , personSelect , WarehouseInfo , ProcureInfo ,ProductionInfo ,
      PlanInfo , SalesInfo , QualityInfo , BoatInfo , TurnoverInfo , MoldInfo , RemarkInfo , CategoryDialog
    },
    data() {
      return {
         form:{
           categoryLevelGroupName:'',
           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: {
      // 选择所属部门
      searchDeptNodeClick (id, info) {
        // 根据部门获取人员
        const params = { executeGroupId: id };
        this.$nextTick(() => {
          this.$refs.directorRef.getList(params);
        });
      },
      //选择负责人
      handleDirectorChange (id, info) {
      },

      chooseMaterial(){
          this.$refs.groupRefs.open(this.chooseItem)
      },
      // 选择分类
      openCategory(){
          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
        this.$set(this.form,'categoryLevelGroupName',row.name)
        this.$set(this.form,'categoryLevelGroupId',row.id)
      },
      cancel(){
        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('保存了',this.remarkform)

        });

      }

    }
  };
</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;
    }
  }
  .form-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line-select{
      margin-left:15px;
    }
  }
</style>