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">{{titileStatus==0?'修改':titileStatus==1?'复制':'添加'}}物料</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>
         <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" :disabled="titileStatus==0?true:false"/>
             </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.weightUnit">
                  </DictSelection>
                </div>
             </el-form-item>
           </el-col>
           <el-col :span="8" class='net-box'>
             <el-form-item label="净重" prop="netWeight">
                  <el-input  v-model="form.netWeight"/>
             </el-form-item>
             <el-form-item label-width="15px" prop="weightUnit" style="width: 45%;">
                <DictSelection class="line-select" dictName="重量单位" clearable v-model="form.weightUnit">
                </DictSelection>
             </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="1" :inactive-value="0"> </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>

         <!-- 物料组弹窗 -->
         <GroupDialog ref="groupRefs" @changeMaterial='determineChoose'/>
         <!-- 分类选择弹窗 -->
         <CategoryDialog ref="categoryRefs" @chooseCategory='confirmCategory'/>
         <!-- 仓储配置 -->
         <WarehouseInfo ref="warehouseRefs" :form="categoryWms"/>
         <!-- 生产信息 -->
          <ProductionInfo ref="productionRefs" :form="categoryMes"/>
          <!-- 计划 -->
          <PlanInfo ref="planRefs" :form="categoryAps"/>
          <!-- 质量配置 -->
          <QualityInfo ref="qualityRefs" :form="categoryQms"/>
          <!-- 舟皿信息 -->
          <BoatInfo ref="qualityRefs" :form="categoryPallet"/>
          <!-- 周转车信息 -->
          <TurnoverInfo ref="turnoverRefs" :form="categoryVehicle"/>
          <!-- 模具信息 -->
          <MoldInfo ref="moldRefs" :form="categoryMold"/>
          <!-- 备注信息 -->
          <RemarkInfo ref="remarkRefs" :form="remarkform"/>
         <div class="footer-btn">
             <el-button @click="cancel">返回</el-button>
             <el-button type="primary" @click="submit" :loading="loading">保存</el-button>
          </div>
      </el-form>
    </el-card>

  </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';
  import { addMaterial , editMaterial , getDetailInfo } from '@/api/material/manage.js';
  import { finishPageTab , reloadPageTab } from '@/utils/page-tab-util';
  import { deepClone } from '@/utils/index'
  export default {
    name: 'ManageMaterial',
    components: {
      GroupDialog , deptSelect , personSelect , WarehouseInfo , ProductionInfo ,
      PlanInfo , QualityInfo , BoatInfo , TurnoverInfo , MoldInfo , RemarkInfo , CategoryDialog
    },
    data() {
      const defaultForm = {
        categoryLevelGroupName:'',
        categoryLevelName:''
      };
      return {
         loading:false,
         form:{...defaultForm},
         categoryAps:{
           unit:1,
           orderIntervalUnit:1
         },
         categoryMes:{},
         categoryMold:{},
         categoryPallet:{},
         categoryQms:{},
         categoryVehicle:{},
         remarkform:{
           remarkAttach:[]
         },
         categoryWms:{},
         chooseItem:null,
         PathInfo:{},
         titileStatus:1
      };
    },
    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' }],
           packingUnit:[{ required: true, message: '请选择包装单位', trigger: 'change' }],
           isProduct:[{ required: true, message: '请选择是否产品', trigger: 'change' }],
           netWeight:[{ required: true, message: '请输入净重', trigger: 'blur' }],
           weightUnit:[{ required: true, message: '请选择重量单位', trigger: 'change' }]
         }
         return rules
      }
    },

    created() {
        this.chooseItem = JSON.parse(this.$route.query.chooseTab)
        this.$set(this.form,'categoryLevelGroupName',this.chooseItem.name)
        this.$set(this.form,'categoryLevelGroupId',this.chooseItem.id)
        this.titileStatus = this.$route.query.status
        this.$nextTick(() => {
          this.$refs.directorRef.getList();
        });
       if(this.$route.query.id){
          this.getDetail(this.$route.query.id)
       }
    },

    methods: {
      // 获取详情
      getDetail(id){
        getDetailInfo(id).then(res=>{
           const info = deepClone(res)
           this.form = {
             ...info.category
           }
           this.judgeSet(info)
           delete this.form.remarkAttach
           delete this.form.remark
           this.$set(this.remarkform,'remarkAttach',info.category.remarkAttach)
           this.$set(this.remarkform,'remark',info.category.remark)
           this.$set(this.form,'categoryLevelGroupName',this.chooseItem.name)
           if(this.titileStatus == 1){
              delete this.form.code
              delete this.form.id
           }
        })
      },

      // 判断字段类型并赋值
      judgeSet(info){
         if(typeof info.categoryAps == 'string'){
            this.categoryAps = {}
         }else{
            this.categoryAps = info.categoryAps
         }
         if(typeof info.categoryMes == 'string'){
            this.categoryMes = {}
         }else{
            this.categoryMes = info.categoryMes
         }
         if(typeof info.categoryMold == 'string'){
            this.categoryMold = {}
         }else{
            this.categoryMold = info.categoryMold
         }
         if(typeof info.categoryPallet == 'string'){
            this.categoryPallet = {}
         }else{
            this.categoryPallet = info.categoryPallet
         }
         if(typeof info.categoryQms == 'string'){
            this.categoryQms = {}
         }else{
            this.categoryQms = info.categoryQms
         }
         if(typeof info.categoryVehicle == 'string'){
            this.categoryVehicle = {}
         }else{
            this.categoryVehicle = info.categoryVehicle
         }
         if(typeof info.categoryWms == 'string'){
            this.categoryWms = {}
         }else{
            this.categoryWms = info.categoryWms
         }
      },

      // 选择所属部门
      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){
        if(this.chooseItem.id!=row.id){
          this.chooseItem = row
          this.$set(this.form,'categoryLevelGroupName',row.name)
          this.$set(this.form,'categoryLevelGroupId',row.id)
          this.$set(this.form,'categoryLevelName',null)
          this.$set(this.form,'categoryLevelId',null)
        }

      },
      cancel(){
        finishPageTab()
        this.$router.go(-1)
      },

      // 确定分类
      confirmCategory(node,title,PathInfo){
         if(title=='选择产品分类'){
            this.$set(this.form,'productCategoryLevelName',node.name)
            this.$set(this.form,'productCategoryLevelId',node.id)
            this.remarkform.productNode = node
         }else{
            this.$set(this.form,'categoryLevelName',node.name)
            this.$set(this.form,'categoryLevelId',node.id)
            this.remarkform.categoryNode = node
            this.PathInfo = PathInfo
         }
      },

      changeProduct(){
         if(!this.form.isProduct){
           this.$refs.manageForm.clearValidate(["productCategoryLevelName"]);
           this.$set(this.form,'productCategoryLevelName','')
           this.$set(this.form,'productCategoryLevelId','')
         }
      },

      // 保存
      submit(){
        this.$refs.manageForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          const data = {
            categoryWms:this.categoryWms,
            categoryAps:this.categoryAps,
            categoryMes:this.categoryMes,
            categoryMold:this.categoryMold,
            categoryPallet:this.categoryPallet,
            categoryQms:this.categoryQms,
            categoryVehicle:this.categoryVehicle,
            category:{
              ...this.form,
              ...this.remarkform,
              ...this.PathInfo
            }
          };
          // const saveOrUpdate = this.form.id ? editMaterial : addMaterial;
          addMaterial(data)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              finishPageTab()
              reloadPageTab({ fullPath: '/material/manage' });
              this.$router.go(-1)
            })
            .catch((e) => {
              this.loading = false;
            });
        })

      }

    }
  };
</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;
    }
  }
  .footer-btn{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:20px auto;
  }
  .net-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
</style>