sap特性数据模块

src/api/mes/md/sapPropertyData.js

+import request from '@/utils/request'
+
+// 查询客户SAP特性信息列表
+export function listData(query) {
+  return request({
+    url: '/md/sapPropertyData/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询客户SAP特性信息详细
+export function getData(id) {
+  return request({
+    url: '/md/sapPropertyData/' + id,
+    method: 'get'
+  })
+}
+
+// 新增客户SAP特性信息
+export function addData(data) {
+  return request({
+    url: '/md/sapPropertyData',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改客户SAP特性信息
+export function updateData(data) {
+  return request({
+    url: '/md/sapPropertyData',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除客户SAP特性信息
+export function delData(id) {
+  return request({
+    url: '/md/sapPropertyData/' + id,
+    method: 'delete'
+  })
+}

src/views/mes/md/client/components/SapProperty.vue → src/components/SapPropertyData/index.vue

 <template>
   <div class="base-info">
-    <el-form :model="form" ref="form" label-width="120px" size="mini">
-      <el-row class="form-wrap" :gutter="10">
+    <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="8" :key="item.id">
+          <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="form[item.sapField]" :item="item"/>
+              <el-input-all v-model="sapData[item.sapField]" :item="item"/>
             </el-form-item>
           </el-col>
         </template>
       </el-row>
-    </el-form>
 
-    <div>
-      <el-button @click="onConfirm">确认</el-button>
-    </div>
+      <div class="footer">
+        <el-button type="primary" @click="onConfirm" :loading="loading" size="mini">确认</el-button>
+      </div>
+    </el-form>
 
   </div>
 </template>
 
 <script>
 import {listByType} from '@/api/mes/md/sapproperty'
+import { addData, updateData, listData } from '@/api/mes/md/sapPropertyData'
 
 export default {
   props: {
-
+    gutter: {type: Number, default: 10},
+    span: {type: Number, default: 8},
   },
   data() {
     return {
+      loading: false,
       sapProperties: [],
       customer: {},
-      form: {},
+      form: {
+        type: null,
+        relationId: null,
+      },
+      sapData: {
+      },
       sapProperty: {
         id: '',
         type: '',
@@ -54,7 +62,19 @@ export default {
   },
   methods: {
     onConfirm() {
-      console.log(this.form)
+      if (!Object.keys(this.sapData).length) return
+      console.log(this.sapData)
+      if (this.loading) return
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.form.sapData = JSON.stringify(this.sapData)
+          let handleEdit = this.form.id ? updateData : addData
+          handleEdit(this.form).then(() => this.$message.success('操作成功')).finally(() => this.loading = false)
+        } else {
+          this.$message.error("请检查表单")
+        }
+      })
     },
     onValidate(rule, value, callback, item) {
       if (value === '' || value == null) {
@@ -68,11 +88,38 @@ export default {
         callback()
       }
     },
-    init() {
+
+    setData(data, sapData, sapProperties) {
+      for (let property of sapProperties) {
+        let propertyData = data[property.relationField]
+        sapData[property.sapField] = propertyData || sapData[property.sapField]
+      }
+      console.log(sapData)
+      this.sapData = sapData
+    },
+
+    init(type, relationId, data = {}) {
+      console.log(relationId)
       this.$refs.form && this.$refs.form.resetFields()
-      this.form = {}
-      listByType({type: 1}).then(res => {
-        this.sapProperties = res.data
+      this.form.type = type
+      this.form.relationId = relationId
+      let sapData = {}
+      // 获取sap特性列表
+      listByType({type}).then(res => {
+        let sapProperties = res.data || []
+        this.sapProperties = sapProperties
+        if (relationId) {
+          // 获取sap特性值
+          listData({type, relationId}).then(resp => {
+            let row = resp.rows[0] || {sapData: '{}'}
+            this.form.id = row.id
+            sapData = JSON.parse(row.sapData)
+            // 再次赋值
+            this.setData(data, sapData, sapProperties)
+          })
+        } else {
+          this.setData(data, sapData, sapProperties)
+        }
       })
     }
   },
@@ -83,8 +130,12 @@ export default {
 </script>
 
 <style scoped>
-  .form-wrap {
-    max-height: 400px;
-    overflow-y: auto;
-  }
+.form-wrap {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.footer {
+  text-align: right;
+}
 </style>

src/main.js

@@ -33,6 +33,8 @@ import Editor from "@/components/Editor"
 import ElInputMoney from "@/components/ElInputMoney"
 // sap输入框
 import ElInputAll from "@/components/ElInputAll"
+// sap特性数据表单
+import SapPropertyData from "@/components/SapPropertyData"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
@@ -69,6 +71,7 @@ Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('ElInputMoney', ElInputMoney)
 Vue.component('ElInputAll', ElInputAll)
+Vue.component('SapPropertyData', SapPropertyData)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)

src/views/mes/md/client/components/ClientContact.vue

@@ -233,9 +233,9 @@ export default {
         ...this.queryParams
       }, `contact_${new Date().getTime()}.xlsx`)
     },
-    init(clientId) {
-      if (!clientId) return
-      this.queryParams.clientId = clientId
+    init(form) {
+      if (!form.clientId) return
+      this.queryParams.clientId = form.clientId
       this.getList()
     },
   }

src/views/mes/md/client/components/PaymentRelation.vue

@@ -126,7 +126,9 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        clientId: null,        relatedClientId: null,      },
+        clientId: null,
+        relatedClientId: null,
+      },
       // 表单参数
       form: {},
       // 表单校验
@@ -226,9 +228,9 @@ export default {
         ...this.queryParams
       }, `relation_${new Date().getTime()}.xlsx`)
     },
-    init(clientId) {
-      if (!clientId) return
-      this.queryParams.clientId = clientId
+    init(form) {
+      if (!form.clientId) return
+      this.queryParams.clientId = form.clientId
       this.getList()
     }
   }

src/views/mes/md/client/components/UrgeEmail.vue

@@ -247,9 +247,9 @@ export default {
         ...this.queryParams
       }, `email_${new Date().getTime()}.xlsx`)
     },
-    init(clientId) {
-      if (!clientId) return
-      this.queryParams.clientId = clientId
+    init(form) {
+      if (!form.clientId) return
+      this.queryParams.clientId = form.clientId
       this.getList()
     }
   }

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

@@ -171,7 +171,7 @@
     />
 
     <!-- 添加或修改客户对话框 -->
-    <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="120px">
         <el-row :gutter="10">
           <el-col :span="8">
@@ -252,7 +252,7 @@
             <PaymentRelation ref="PaymentRelation"/>
           </el-tab-pane>
           <el-tab-pane label="SAP特性" name="SapProperty">
-            <SapProperty ref="SapProperty"/>
+            <SapPropertyData ref="SapProperty"/>
           </el-tab-pane>
         </el-tabs>
 
@@ -275,14 +275,13 @@ import ClientContact from '@/views/mes/md/client/components/ClientContact'
 import DeliveryInfo from '@/views/mes/md/client/components/DeliveryInfo'
 import FinanceInfo from '@/views/mes/md/client/components/FinanceInfo'
 import PaymentRelation from '@/views/mes/md/client/components/PaymentRelation'
-import SapProperty from '@/views/mes/md/client/components/SapProperty'
 
 import {genCode} from "@/api/system/autocode/rule"
 export default {
   name: "Client",
   dicts: ['mes_client_type','sys_yes_no'],
   components: {
-    AddrInfo, BaseInfo, DeliveryInfo, FinanceInfo, UrgeEmail, PaymentRelation, ClientContact, SapProperty
+    AddrInfo, BaseInfo, DeliveryInfo, FinanceInfo, UrgeEmail, PaymentRelation, ClientContact
   },
   data() {
     return {
@@ -540,7 +539,8 @@ export default {
       }
     },
     onTabClick() {
-      this.$refs[this.activeName].init && this.$refs[this.activeName].init(this.form.clientId)
+      if (this.activeName === 'SapProperty') this.$refs.SapProperty.init(1, this.form.clientId, this.form)
+      else this.$refs[this.activeName].init && this.$refs[this.activeName].init(this.form)
     }
   }
 };