kd-aiot-frontend/src/views/material/BOMmanage/components/attribute.vue

<template>
  <div>
    <el-form
      label-width="100px"
      :rules="rules"
      ref="form"
      :model="attributeData"
    >
      <el-row>
     
        <el-col :span="8" label-width="100px">
          <el-form-item label="名称:" prop="name">
            <el-input
              placeholder=""
              v-model="category.name"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="编码:" prop="code">
            <el-input
              placeholder=""
              v-model="category.code"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="牌号:" prop="brandNum">
            <el-input
              placeholder=""
              v-model="category.brandNum"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="型号:" prop="modelType">
            <el-input
              placeholder=""
              v-model="category.modelType"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="规格:" prop="specification">
            <el-input
              placeholder=""
              v-model="category.specification"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="计量单位:" prop="measuringUnit">
            <el-input
              placeholder=""
              v-model="category.measuringUnit"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="重量单位:" prop="weightUnit">
            <el-input
              placeholder=""
              v-model="category.weightUnit"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="包装单位:" prop="packingUnit">
            <el-input
              placeholder=""
              v-model="category.packingUnit"
              
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="毛重:" prop="roughWeight">
            <el-input
              placeholder=""
              v-model="category.roughWeight"
            
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="净重:" prop="netWeight">
            <el-input
              placeholder=""
              v-model="category.netWeight"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item
            label="加工类型:"
            prop="isConsumable"
            v-if="[1, 23, 9, 28].includes(Number(category.categoryLevelPathId))"
          >
            <el-input
              placeholder=""
              :v-model="category.isConsumable == 1 ? '批量' : '单件'"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="生产类型:" prop="produceType">
            <el-select
              v-model="attributeData.produceType"
               :disabled="attributeData.approvalStatus != 0"
              filterable
              multiple
              class="ele-block"
            >
              <el-option
                v-for="item in dictList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="属性类型:" prop="attributeType">
            <el-select
              v-model="attributeData.attributeType"
               :disabled="attributeData.approvalStatus != 0"
              filterable
              multiple
              class="ele-block"
            >
              <el-option
                v-for="item in attributeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="8" label-width="100px">
          <el-form-item label="材料" prop="materialsName">
            <el-input
              placeholder=""
              v-model="attributeData.materialsName"
               :disabled="attributeData.approvalStatus != 0"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="bom路线" prop="bomTypeRouting">
            <el-input
              placeholder=""
              v-model="attributeData.bomTypeRouting"
               :disabled="attributeData.approvalStatus != 0"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" label-width="100px">
          <el-form-item label="来源" prop="sourceData">
            <el-input
              placeholder=""
              v-model="attributeData.sourceData"
               :disabled="attributeData.approvalStatus != 0"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="用量" prop="dosage">
            <el-input placeholder="" v-model="attributeData.dosage"  :disabled="attributeData.approvalStatus != 0"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" label-width="100px">
          <el-form-item label="基本数量" prop="baseCount">
            <el-input
              placeholder=""
              v-model="attributeData.baseCount"
              :disabled="attributeData.approvalStatus != 0"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="物料库路径" prop="name">
            <el-input
              placeholder=""
              v-model="attributeData.materielPath"
               :disabled="attributeData.approvalStatus != 0"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>



      <el-row>
        <el-col :span="20" label-width="100px">
          <el-form-item label="备注" prop="name">
            <el-input
              placeholder=""
              v-model="attributeData.remake"
               :disabled="attributeData.approvalStatus != 0"
              type="textarea"
              :rows="2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" label-width="100px">
          <el-form-item label="创建人" prop="name">
            <el-input
              placeholder=""
              disabled
              v-model="attributeData.createName"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" label-width="100px">
          <el-form-item label="创建时间" prop="name">
            <el-input
              placeholder=""
              disabled
              v-model="attributeData.createTime"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
 

      <div class="btn_box" v-if="attributeData.status != 1">
        <el-button type="primary" @click="handleUpdate">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { getByCode } from '@/api/system/dictionary-data';
  import { bomCategoryUpdate } from '@/api/material/BOM';

  export default {
    components: {},

    data() {
      return {
        form: {},
        category: {
          name: ''
        },
        statusOptions: [
          {
            label: '默认',
            value: '0'
          },
          {
            label: '归档',
            value: '1'
          }
        ],
        bomTypeOptions: [
          {
            label: 'PBOM',
            value: '1'
          },
          {
            label: 'MBOM',
            value: '2'
          },
          {
            label: 'ABOM',
            value: '3'
          }
        ],

        attributeList: [
        {
            label: '总装',
            value: 1
          },
          {
            label: '部件',
            value: 2
          },
          {
            label: '零',
            value: 3
          },{
            label: '原材料',
            value: 4
          }
        ],
        dictList: [],

        rules: {
          dosage: [{ required: true, message: ' ', trigger: 'blur' }],
          baseCount: [{ required: true, message: ' ', trigger: 'blur' }],
          produceType: [{ required: true, message: ' ', trigger: 'blur' }],
          attributeType:  [{ required: true, message: ' ', trigger: 'blur' }],
        },

      };
    },

    created() {
      this.getDictList('productionType');
    },

    beforeDestroy() {},
    methods: {
      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      handleUpdate() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.category.produceType = this.attributeData.produceType;
            bomCategoryUpdate(this.attributeData).then((res) => {
              this.$message.success('修改成功');
            });
          } else {
            return false;
          }
        });
      }
    },
    props: {
      attributeData: {
        type: Object,
        default: {}
      }
    },

    watch: {
      attributeData(val) {
        console.log(Object.prototype.hasOwnProperty.call(val, 'category'));
        if (Object.prototype.hasOwnProperty.call(val, 'category')) {
          this.category = val.category;
          this.attributeData.produceType = val.category.produceType;
         
          this.$forceUpdate();
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-form-item {
    margin-bottom: 10px !important;
  }
</style>