sap特性视图模块

src/components/SapPropertyData/index.vue

@@ -2,13 +2,16 @@
   <div class="base-info">
     <el-form :model="sapData" ref="form" label-width="120px" size="mini">
       <el-row class="form-wrap" :gutter="gutter">
-        <template v-for="item in sapProperties">
-          <el-col :span="span" :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="sapData[item.sapField]" :item="item"/>
-            </el-form-item>
-          </el-col>
+        <template v-for="(sapProperties, key) in sapPropertyMap">
+          <el-divider content-position="left">{{ getViewTypeName(key) }}</el-divider>
+          <template v-for="item in sapProperties">
+            <el-col :span="span" :key="item.id">
+              <el-form-item :label="item.name" :prop="item.sapField"
+                            :rules="{required: item.required, validator: (rule, value, callback) => onValidate(rule, value, callback, item), trigger: ['blur', 'change']}">
+                <el-input-all v-model="sapData[item.sapField]" :item="item"/>
+              </el-form-item>
+            </el-col>
+          </template>
         </template>
       </el-row>
 
@@ -25,6 +28,7 @@ import {listByType} from '@/api/mes/md/sapproperty'
 import { addData, updateData, listData } from '@/api/mes/md/sapPropertyData'
 
 export default {
+  dicts: ['sap_property_view', 'sap_property_relation'],
   props: {
     gutter: {type: Number, default: 10},
     span: {type: Number, default: 8},
@@ -32,7 +36,7 @@ export default {
   data() {
     return {
       loading: false,
-      sapProperties: [],
+      sapPropertyMap: [],
       customer: {},
       form: {
         type: null,
@@ -89,10 +93,21 @@ export default {
       }
     },
 
-    setData(data, sapData, sapProperties) {
-      for (let property of sapProperties) {
-        let propertyData = data[property.relationField]
-        sapData[property.sapField] = propertyData || sapData[property.sapField]
+    getViewTypeName(viewType) {
+      let viewTypeDict = this.dict.type.sap_property_view.find(item => item.value == this.form.type && item.raw.cssClass === viewType)
+      return viewTypeDict.label
+    },
+
+    setData(data, sapData, sapPropertyMap) {
+      let keys = Object.keys(sapPropertyMap)
+      for (const key of keys) {
+        if (!sapPropertyMap.hasOwnProperty(key)) continue
+        if (!sapData[key]) sapData[key] = {}
+        let properties = sapPropertyMap[key]
+        for (let property of properties) {
+          let propertyData = data[property.relationField]
+          sapData[key][property.sapField] = propertyData || sapData[key][property.sapField]
+        }
       }
       console.log(sapData)
       this.sapData = sapData
@@ -107,7 +122,13 @@ export default {
       // 获取sap特性列表
       listByType({type}).then(res => {
         let sapProperties = res.data || []
-        this.sapProperties = sapProperties
+        let sapPropertyMap = sapProperties.reduce((sapPropertyMap, item) => {
+          if (!sapPropertyMap[item.viewType]) sapPropertyMap[item.viewType] = []
+          sapPropertyMap[item.viewType].push(item)
+          return sapPropertyMap
+        }, {})
+        console.log(sapPropertyMap)
+        this.sapPropertyMap = sapPropertyMap
         if (relationId) {
           // 获取sap特性值
           listData({type, relationId}).then(resp => {
@@ -115,10 +136,10 @@ export default {
             this.form.id = row.id
             sapData = JSON.parse(row.sapData)
             // 再次赋值
-            this.setData(data, sapData, sapProperties)
+            this.setData(data, sapData, sapPropertyMap)
           })
         } else {
-          this.setData(data, sapData, sapProperties)
+          this.setData(data, sapData, sapPropertyMap)
         }
       })
     }

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

@@ -111,12 +111,12 @@
     </el-table>
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="960px">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="特性类型" prop="type">
-              <el-select v-model="form.type" placeholder="请选择特性类型" clearable filterable>
+              <el-select v-model="form.type" placeholder="请选择特性类型" @change="onChangeType" clearable filterable>
                 <el-option v-for="item in dict.type.sap_property_type" :key="item.value" v-bind="item"/>
               </el-select>
             </el-form-item>
@@ -124,9 +124,7 @@
           <el-col :span="8">
             <el-form-item label="视图类型" prop="viewType">
               <el-select v-model="form.viewType" placeholder="请选择视图类型" clearable filterable>
-                <template v-for="item in viewTypes">
-                  <el-option v-if="!item.types || item.types.includes(form.type)" :key="item.value" v-bind="item"/>
-                </template>
+                <el-option v-for="item in viewTypes" :key="item.value" v-bind="item"/>
               </el-select>
             </el-form-item>
           </el-col>
@@ -193,7 +191,7 @@ import { listPropertytype } from '@/api/mes/md/propertytype'
 
 export default {
   name: "Client",
-  dicts: ['mes_client_type','sys_yes_no','sys_data_type','sap_property_type'],
+  dicts: ['mes_client_type','sys_yes_no','sys_data_type','sap_property_type', 'sap_property_view', 'sap_property_relation'],
   data() {
     return {
       //自动生成编码
@@ -238,39 +236,8 @@ export default {
         money: 1,
         enableFlag: 'Y',
       },
-      viewTypes: [
-        {label: '基本信息', value: '1', types: ''},
-        {label: '客户品牌联系人', value: '2', types: ''},
-        {label: '银行数据', value: '3', types: ''},
-        {label: '公司代码', value: '4', types: ''},
-        {label: '销售组织', value: '5', types: ''},
-      ],
-      relationFields: [
-        {label: '客户编码', value: 'client_code'},
-        {label: '客户名称', value: 'client_name'},
-        {label: '客户简称', value: 'client_nick'},
-        {label: '客户英文名称', value: 'client_en'},
-        {label: '客户简介', value: 'client_des'},
-        {label: '客户LOGO地址', value: 'client_logo'},
-        {label: '客户类型', value: 'client_type'},
-        {label: '客户地址', value: 'address'},
-        {label: '客户官网地址', value: 'website'},
-        {label: '客户邮箱地址', value: 'email'},
-        {label: '客户电话', value: 'tel'},
-        {label: '联系人1', value: 'contact1'},
-        {label: '联系人1-电话', value: 'contact1_tel'},
-        {label: '联系人1-邮箱', value: 'contact1_email'},
-        {label: '联系人2', value: 'contact2'},
-        {label: '联系人2-电话', value: 'contact2_tel'},
-        {label: '联系人2-邮箱', value: 'contact2_email'},
-        {label: '统一社会信用代码', value: 'credit_code'},
-        {label: '是否启用', value: 'enable_flag'},
-        {label: '备注', value: 'remark'},
-        {label: '预留字段1', value: 'attr1'},
-        {label: '预留字段2', value: 'attr2'},
-        {label: '预留字段3', value: 'attr3'},
-        {label: '预留字段4', value: 'attr4'},
-      ],
+      viewTypes: [],
+      relationFields: [],
       // 表单校验
       rules: {
         type: [{ required: true, message: '特性类型不能为空', trigger: ['blur', 'change']}],
@@ -288,6 +255,10 @@ export default {
     this.getList();
   },
   methods: {
+    onChangeType(val) {
+      this.viewTypes = this.dict.type.sap_property_view.filter(item => item.value === val).map(item => ({label: item.label, value: item.raw.cssClass}))
+      this.relationFields = this.dict.type.sap_property_relation.filter(item => item.value === val).map(item => ({label: item.label, value: item.raw.cssClass}))
+    },
     toDataType() {
       this.$router.push({ path: '/mes/md/propertytype'})
     },