产品SAP特性

src/views/mes/md/product/components/sapProperty.vue

+<template>
+  <div class="base-info">
+    <el-form :model="form" ref="form" label-width="120px" size="mini">
+      <el-row class="form-wrap" :gutter="10">
+        <template v-for="item in sapProperties">
+          <el-col :span="8" :key="item.id">
+            <el-form-item :label="item.name" :prop="item.sapField"
+                          :rules="{required: true, validator: (rule, value, callback) => onValidate(rule, value, callback, item), trigger: ['blur', 'change']}">
+              <el-input-all v-model="form[item.sapField]" :item="item"/>
+            </el-form-item>
+          </el-col>
+        </template>
+      </el-row>
+    </el-form>
+
+    <div>
+      <el-button @click="onConfirm">确认</el-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {listByType} from '@/api/mes/md/sapproperty'
+
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+      sapProperties: [],
+      customer: {},
+      form: {},
+      sapProperty: {
+        id: '',
+        type: '',
+        viewType: '',
+        name: '',
+        typeId: '',
+        sapField: '',
+        relationField: '',
+        typeName: '',
+        dataType: '',
+        length: '',
+        min: '',
+        max: '',
+        regEx: '',
+        dictId: '',
+        errMsg: '',
+        dictDataList: []
+      },
+    }
+  },
+  methods: {
+    onConfirm() {
+      console.log(this.form)
+    },
+    onValidate(rule, value, callback, item) {
+      if (value === '' || value == null) {
+        callback(new Error(item.errMsg))
+      } else {
+        if (item.dataType === 1) {
+          if (value.length > item.length || !new RegExp(item.regEx).test(value)) callback(new Error(item.errMsg))
+        } else if ([2, 3].includes(item.dataType)) {
+          if (value < item.min || value > max) callback(new Error(item.errMsg))
+        }
+        callback()
+      }
+    },
+    init() {
+      this.$refs.form && this.$refs.form.resetFields()
+      this.form = {}
+      listByType({type: 5}).then(res => {
+        this.sapProperties = res.data
+      })
+    }
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped>
+  .form-wrap {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+</style>

src/views/mes/md/product/index.vue

@@ -509,7 +509,7 @@
           </el-col>
         </el-row>
       </el-form>
-      <el-tabs type="border-card" v-if="form.itemId != null && form.itemOrProduct == 'PRODUCT'">
+      <el-tabs type="border-card" v-model="activeName" @tab-click="onTabClick" v-if="form.itemId != null && form.itemOrProduct == 'PRODUCT'">
         <el-tab-pane label="基本信息">
           <BaseInfo
             ref="baseInfo"
@@ -551,6 +551,9 @@
         <el-tab-pane label="客户loss">
           <CustomerLoss :optType="optType" :itemId="form.itemId"></CustomerLoss>
         </el-tab-pane>
+        <el-tab-pane label="SAP特性" name="SapProperty">
+          <SapProperty ref="SapProperty"/>
+        </el-tab-pane>
         <el-tab-pane label="SOP">
           <SOPTab :itemId="form.itemId" :optType="optType"></SOPTab>
         </el-tab-pane>
@@ -629,6 +632,7 @@ import FaceColor from "./components/faceColor.vue";
 import BackFaceColor from "./components/backFaceColor.vue";
 import CustomerLoss from "./components/customerLoss.vue";
 import ItemBom from "./components/itembom.vue";
+import SapProperty from './components/sapProperty.vue'
 import SOPTab from "./components/sop.vue";
 import { listAllUnitmeasure } from "@/api/mes/md/unitmeasure";
 import { genCode } from "@/api/system/autocode/rule";
@@ -641,6 +645,7 @@ export default {
   name: "MdItem",
   dicts: ["sys_yes_no", "mes_item_product"],
   components: {
+    SapProperty,
     Treeselect,
     BaseInfo,
     SpecProperty,
@@ -657,6 +662,7 @@ export default {
   },
   data() {
     return {
+      activeName: 'BaseInfo',
       // 遮罩层
       loading: true,
       // 选中数组
@@ -852,6 +858,7 @@ export default {
       if (this.queryParams.itemTypeId != 0) {
         this.form.itemTypeId = this.queryParams.itemTypeId;
       }
+      this.activeName = 'BaseInfo'
       this.optType = "add";
       this.open = true;
       this.title = "新增物料/产品";
@@ -860,6 +867,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       this.getTreeselect();
+      this.activeName = 'BaseInfo'
       const itemId = row.itemId || this.ids;
       getMdItem(itemId).then((response) => {
         this.form = response.data;
@@ -981,6 +989,9 @@ export default {
         this.form.itemCode = null;
       }
     },
+    onTabClick() {
+      this.$refs[this.activeName].init && this.$refs[this.activeName].init(this.form.itemId)
+    }
   },
 };
 </script>