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
              filterable
              multiple
              class="ele-block"
            >
              <el-option
                v-for="item in produceTypeList"
                :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
              filterable
              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-col :span="8" label-width="100px">
          <el-form-item label="属性类型:" prop="componentAttribute">
            <el-select
              v-model="attributeData.componentAttribute"
              disabled
              filterable
              multiple
              class="ele-block"
            >
              <el-option
                v-for="item in lbjtList"
                :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="用量" >
            <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>
      <el-col :span="8" label-width="100px">
        <el-form-item label="来源版本号" prop="name">
          <!-- {{ attributeData }} -->
          <el-input
            placeholder=""
            disabled
            v-model="attributeData.resourceBomVersion"
          ></el-input>
        </el-form-item>
      </el-col>

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

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

  export default {
    components: {},

    data() {
      return {
        produceTypeList,
        form: {},
        category: {
          name: ''
        },
        // attributeData: {
        //   baseCount:1,
        // },

        statusOptions: [
          {
            label: '默认',
            value: '0'
          },
          {
            label: '归档',
            value: '1'
          }
        ],
        bomTypeOptions: [
          {
            label: 'PBOM',
            value: '1'
          },
          {
            label: 'MBOM',
            value: '2'
          },
          {
            label: 'ABOM',
            value: '3'
          }
        ],
        dictList: [
          {
            label: '加工',
            value: 1
          },
          {
            label: '装配',
            value: 3
          }
        ],
        lbjtList: [
          {
            label: '自制件',
            value: 1
          },
          {
            label: '采购件',
            value: 2
          },
          {
            label: '外协件',
            value: 3
          },
          {
            label: '受托件',
            value: 4
          }
        ],
        attributeList: [],
        // 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' }],
          componentAttribute: [
            { required: true, message: ' ', trigger: 'blur' }
          ]
        }
      };
    },

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

    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]]
          };
        });
      },

      async getAttriButeList(code) {
        let { data: res } = await getByCode(code);
        this.attributeList = 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: {}
      },
      isWt: {
        type: Boolean,
        default: false
      }
    },

    mounted() {
      console.log(this.attributeData, 'attributeData');
    },

    watch: {
      attributeData(val) {
        console.log(val);
        val.baseCount = val.baseCount || 1;
        if (Object.prototype.hasOwnProperty.call(val, 'category')) {
          this.category = val.category;
          this.attributeData.produceType = val.category.produceType;
          // this.attributeData.baseCount = val.baseCount||1;
          // console.log(this.attributeData,'985');
          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>