SAP特性更新

src/api/mes/md/sapField.js

+import request from '@/utils/request'
+
+// 查询Sap特性视图列表
+export function pageView(data) {
+  return request({
+    url: '/md/mdSapField/page',
+    method: 'post',
+    data
+  })
+}
+
+// 查询Sap特性视图列表
+export function listView(query) {
+  return request({
+    url: '/md/mdSapField/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询Sap特性视图列表
+export function listViewVo(query) {
+  return request({
+    url: '/md/mdSapField/listVo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询Sap特性视图详细
+export function getView(params) {
+  return request({
+    url: '/md/mdSapField/',
+    method: 'get',
+    params
+  })
+}
+
+// 新增Sap特性视图
+export function addView(data) {
+  return request({
+    url: '/md/mdSapField',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改Sap特性视图
+export function updateView(data) {
+  return request({
+    url: '/md/mdSapField',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除Sap特性视图
+export function delView(id) {
+  return request({
+    url: '/md/mdSapField/' + id,
+    method: 'delete'
+  })
+}

src/components/ElInputAll/index.vue

 <template>
   <div class="el-input-all">
-    <el-input v-if="item.dataType === 1" v-model="value" class="input-item" :placeholder="'请输入' + item.name" clearable :disabled="!!item.relationField"/>
-    <el-input-number v-if="item.dataType === 2" v-model="value" class="input-item" :placeholder="'请输入' + item.name" clearable :disabled="!!item.relationField"/>
-    <el-input-money v-if="item.dataType === 3" v-model="value" class="input-item" :placeholder="'请输入' + item.name" clearable :disabled="!!item.relationField"/>
-    <el-date-picker v-if="item.dataType === 4" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.relationField" type="date"/>
-    <el-time-picker v-if="item.dataType === 5"  v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.relationField"/>
-    <el-date-picker v-if="item.dataType === 6" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.relationField" type="datetime"/>
-    <el-select v-if="item.dataType === 7" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable filterable :disabled="!!item.relationField">
-      <el-option v-for="option in item.dictDataList" :key="option.id" :value="option.value" :label="option.name"/>
+    <el-input v-if="item.dataType == 1" v-model.trim="value" class="input-item" :placeholder="'请输入' + item.name" clearable :disabled="!!item.field"/>
+    <el-input v-else-if="item.dataType == 2" v-model.number="value" class="input-item" :placeholder="'请输入' + item.name" clearable :disabled="!!item.field"/>
+    <el-input-money v-else-if="item.dataType == 3" v-model="value" class="input-item" :placeholder="'请输入' + item.name" clearable :disabled="!!item.field"/>
+    <el-date-picker v-else-if="item.dataType == 4" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.field" type="date"/>
+    <el-time-picker v-else-if="item.dataType == 5"  v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.field"/>
+    <el-date-picker v-else-if="item.dataType == 6" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.field" type="datetime"/>
+    <el-select v-else-if="item.dataType == 7" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable filterable :disabled="!!item.field">
+      <el-option v-for="option in item.dictList" :key="option.id" :value="option.value" :label="option.name"/>
     </el-select>
+    <el-cascader v-else-if="item.dataType == 8" v-model="value" class="input-item" :placeholder="'请选择' + item.name" clearable :disabled="!!item.field" :options="item.dictList"/>
   </div>
 </template>
 
@@ -37,7 +38,11 @@ export default {
   data() {
     return {}
   },
-  methods: {},
+  methods: {
+    showChildren() {
+
+    },
+  },
   created() {
 
   }

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

@@ -142,14 +142,19 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col v-if="form.type === '1'" :span="12">
-            <el-form-item label="最大长度" prop="length">
-              <el-input v-model.trim.number="form.length" placeholder="请输入最大长度" clearable/>
-            </el-form-item>
-            <el-form-item label="正则" prop="regEx">
-              <el-input v-model.trim="form.regEx" placeholder="请输入正则" clearable/>
-            </el-form-item>
-          </el-col>
+          <template v-if="form.type === '1'">
+            <el-col :span="12">
+              <el-form-item label="最大长度" prop="length">
+                <el-input v-model.trim.number="form.length" placeholder="请输入最大长度" clearable/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="正则" prop="regEx">
+                <el-input v-model.trim="form.regEx" placeholder="请输入正则" clearable/>
+              </el-form-item>
+            </el-col>
+          </template>
+
           <template v-if="['2', '3'].includes(form.type)">
             <el-col :span="12">
               <el-form-item label="最小值" prop="min">

src/views/mes/md/sapField/components/SapForm.vue

+<template>
+  <el-form ref="form" class="sap-form" :label-width="labelWidth" size="mini">
+    <SapFormContext v-for="item in sapFieldList" v-model="sapForm[item.sapField]" :item="item" :key="item.id" :label-width="labelWidth"/>
+    <div class="form-footer">
+      <el-button type="primary" @click="onConfirm">确认</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script>
+import SapFormContext from '@/views/mes/md/sapField/components/SapFormContext'
+import { listViewVo } from '@/api/mes/md/sapField'
+import { addData, updateData } from '@/api/mes/md/sapPropertyData'
+
+export default {
+  components: {
+    SapFormContext
+  },
+  props: {
+    labelWidth: { type: String, default: '150px' },
+  },
+  data() {
+    return {
+      loading: false,
+      relationId: null,
+      sapForm: {},
+      sapFieldList: []
+    }
+  },
+  methods: {
+    onConfirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.loading = true
+          let data = {}
+          data.sapData = JSON.stringify(this.sapForm)
+          console.log(this.form)
+          let handleEdit = this.form.id ? updateData : addData
+          handleEdit(this.form).then(() => this.$message.success('操作成功')).finally(() => this.loading = false)
+        }
+      })
+    },
+    init(type, relationId, data = { ITEM: [{ SIZE: [{}] }, { SIZE: [{}] }] }) {
+      console.log(type, relationId)
+      let params = { type, parentId: 0 }
+      listViewVo(params).then(res => {
+        this.sapFieldList = res.data
+        this.sapForm = this.initSapForm(res.data, data)
+        console.log(this.sapFieldList, this.sapForm)
+      })
+    },
+    initSapForm(sapFieldList, data = {}) {
+      let sapForm = {}
+      for (let i = 0; i < sapFieldList.length; i++) {
+        const item = sapFieldList[i]
+        let itemData = data[item.field]
+
+        if (item.dataType == 9) {
+          sapForm[item.sapField] = this.initSapForm(item.children, itemData || {})
+        } else if (item.dataType == 10) {
+          sapForm[item.sapField] = sapForm[item.sapField] || []
+          itemData = itemData || []
+          for (let j = 0; j < itemData.length; j++) {
+            const subItemData = itemData[j]
+            sapForm[item.sapField][j] = this.initSapForm(item.children, subItemData)
+          }
+        } else {
+          sapForm[item.sapField] = itemData
+        }
+      }
+      return sapForm
+    }
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped>
+.sap-form {
+  margin-bottom: 50px;
+}
+</style>

src/views/mes/md/sapField/components/SapFormContext.vue

+<template>
+  <div class="SapFormContent">
+    <el-col :span="colSpan" v-if="[1,2,3,4,5,6,7,8].some(i => i == item.dataType)">
+      <sap-form-item :item="item" :label-width="labelWidth">
+        <el-input-all v-model="value" :item="item"/>
+      </sap-form-item>
+    </el-col>
+
+    <template v-else>
+      <el-col class="obj-title">{{ item.name }}</el-col>
+      <!-- 对象 -->
+      <template v-if="item.dataType === 9">
+        <template v-for="child in item.children">
+          <sap-form-item :item="child" :label-width="labelWidth">
+            <el-input-all v-model="value[child.sapField]" :item="child"/>
+          </sap-form-item>
+        </template>
+      </template>
+
+      <!-- 数组 -->
+      <template v-if="item.dataType === 10">
+        <div style="width: 100%; overflow-x: auto">
+          <div>
+            <div class="item-head clearfix" style="width: max-content;">
+              <div v-for="child in item.children" :key="child.id + 'head'" class="item-label">{{ child.name }}</div>
+            </div>
+            <template v-for="(sub, i) in value"><!-- ITEM -->
+              <div class="item-content" style="width: max-content;" :key="'sub' + '' + i">
+                <template v-for="(child, j) in item.children">
+                  <div v-if="[1,2,3,4,5,6,7,8].some(dataType => dataType == child.dataType)" class="item-value" :key="child.id + j">
+                    <sap-form-item :item="child" :label-width="labelWidth">
+                      <el-input-all v-model="sub[child.sapField]" :item="child"/>
+                    </sap-form-item>
+                  </div>
+                  <template v-else>
+                    <div class="item-value">
+                      <el-button type="text" size="mini" @click="onShowSize(sub)">查看</el-button>
+                    </div>
+                    <div class="item-sub clearfix" v-if="sub.showSize">
+                      <div class="item-sub-head" style="width: max-content;">
+                        <div v-for="son in child.children" :key="son.id + 'head'" class="item-sub-label">{{ son.name }}</div>
+                      </div>
+                      <!-- SIZE -->
+                      <div v-for="leaf in sub[child.sapField]" class="item-child-content clearfix" style="width: max-content;">
+                        <div v-for="(son, j) in child.children" class="item-value" :key="son.id + '' + j">
+                          <sap-form-item :item="son" :label-width="labelWidth">
+                            <el-input-all v-model="leaf[son.sapField]" :item="son"/>
+                          </sap-form-item>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </template>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import SapFormItem from '@/views/mes/md/sapField/components/SapFormItem'
+
+export default {
+  name: 'SapFormContext',
+  components: {
+    SapFormItem
+  },
+  model: {prop: 'val', event: 'update'},
+  props: {
+    val: { type: [Number, String, Date, Array, Object] },
+    item: { type: Object, required: true },
+    showLabel: { type: Boolean, default: true },
+    colSpan: { type: Number, default: 6 },
+    labelWidth: { type: String, default: '100px'},
+  },
+  computed: {
+    value: {
+      get() {
+        return this.val
+      },
+      set(val) {
+        this.$emit('update', val)
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    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()
+      }
+    },
+    onShowSize(sub) {
+      sub.showSize = !sub.showSize
+      this.$forceUpdate()
+    }
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped>
+.obj-title {
+  line-height: 40px;
+  font-weight: bold;
+  margin: 20px;
+}
+.item-label, .item-value, .item-sub-label {
+  width: 150px;
+  float: left;
+  line-height: 50px;
+  overflow: hidden;
+  text-wrap: nowrap;
+  margin-left: 10px;
+}
+
+.item-sub {
+  width: 100%;
+}
+</style>

src/views/mes/md/sapField/components/SapFormItem.vue

+<template>
+  <el-form-item
+    :label="labelWidth == '0px' ? '' : item.name"
+    :label-width="labelWidth"
+    :rules="item.required ? {required: item.required, validator: (rule, value, callback) => onValidate(rule, value, callback, item), trigger: ['change']} : null">
+    <slot></slot>
+  </el-form-item>
+</template>
+
+<script>
+
+export default {
+  props: ['item', 'labelWidth'],
+  data() {
+    return {}
+  },
+  methods: {
+    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()
+      }
+    }
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/mes/md/sapField/edit.vue

+<template>
+  <div class="property-edit">
+    <el-dialog :title="form.id ? '编辑SAP特性' : '新增SAP特性'" :visible.sync="visible" width="950px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="特性类型" prop="type">
+              <el-select v-model="form.type" placeholder="请选择特性类型" clearable>
+                <el-option v-for="item in dict.type['sap_property_type']" :key="item.value" :label="item.label" :value="item.value"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数据类型" prop="dataType">
+              <el-select v-model="form.dataType" placeholder="请选择数据类型">
+                <el-option v-for="item in dict.type['sys_data_type']" :key="item.value" :label="item.label" :value="item.value"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="特性名称" prop="name">
+              <el-input v-model.trim="form.name" placeholder="请输入视图名称"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="特性属性" prop="field">
+              <el-input v-model.trim="form.field" placeholder="请输入视图属性"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="sap属性" prop="sapField">
+              <el-input v-model.trim="form.sapField" placeholder="请输入sap属性"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否必填" prop="required">
+              <el-select v-model="form.required" placeholder="请选择是否必填">
+                <el-option label="是" value="1"/>
+                <el-option label="否" value="0"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="错误提示语" prop="errMsg">
+              <el-input v-model.trim="form.errMsg" placeholder="请输入错误提示语"/>
+            </el-form-item>
+          </el-col>
+          <template v-if="form.dataType == '1'">
+            <el-col :span="12">
+              <el-form-item label="最大长度" prop="length">
+                <el-input v-model.trim="form.length" type="number" placeholder="请输入长度"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="正则" prop="regEx">
+                <el-input v-model.trim="form.regEx" placeholder="请输入正则"/>
+              </el-form-item>
+            </el-col>
+          </template>
+          <template v-if="['2', '3'].includes(form.dataType)">
+            <el-col :span="12">
+              <el-form-item label="最小值" prop="min">
+                <el-input v-model.trim="form.min" type="number" placeholder="请输入最小值"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="最大值" prop="max">
+                <el-input v-model.trim="form.max" type="number" placeholder="请输入最大值"/>
+              </el-form-item>
+            </el-col>
+          </template>
+          <template v-if="['7', '8'].includes(form.dataType)">
+            <el-col :span="12">
+              <el-form-item label="枚举" prop="dictId">
+                <el-select v-model="form.dictId" placeholder="请选择枚举类型" filterable remote :remote-method="onSearchDict" clearable>
+                  <el-option v-for="item in dictList" :key="item.id" :value="item.id" :label="item.name"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </template>
+          <template v-if="['9', '10'].includes(form.dataType)">
+            <el-col :span="12">
+              <el-form-item :label="form.dataType == '9' ? '对象属性' : '列表属性'" prop="ids">
+                <el-select v-model="form.ids" :placeholder="form.dataType == '9' ? '请选择对象属性' : '请选择列表属性'"
+                           multiple disabled clearable @click.native="onShowSelector">
+                  <el-option v-for="item in form.subList" :key="item.id" :value="item.id" :label="item.name"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+    <property-selector ref="propertySelector" :id="form.id" @handleConfirm="onSelectProperty"/>
+  </div>
+</template>
+
+<script>
+
+import { listPropertyDict } from '@/api/mes/md/propertydict'
+import { addView, getView, updateView } from '@/api/mes/md/sapField'
+import PropertySelector from '@/views/mes/md/sapField/selector'
+const formData = {
+  type: null,
+  name: null,
+  field: null,
+  sapField: null,
+  dataType: null,
+  required: null,
+  errMsg: null,
+  length: null,
+  regEx: null,
+  min: null,
+  max: null,
+  dictId: null,
+  ids: [],
+  subList: [],
+}
+export default {
+  dicts: ['sap_property_type', 'sys_data_type'],
+  components: {
+    PropertySelector
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      dictList: [],
+      propertyViews: [],
+      form: {},
+      rules: {
+        type: [{required: true, message: '请选择 特性类型', trigger: 'change'}],
+        name: [{required: true, message: '请输入 特性名称', trigger: 'change'}],
+        field: [{required: true, message: '请输入 特性属性', trigger: 'change'}],
+        sapField: [{required: true, message: '请输入 SAP属性', trigger: 'change'}],
+        dataType: [{required: true, message: '请选择 数据类型', trigger: 'change'}],
+        required: [{required: true, message: '请选择 是否必填', trigger: 'change'}],
+        errMsg: [{required: true, max: 20, message: '请输入 错误提示语，不能超过20字', trigger: 'change'}],
+        length: [{required: true, pattern: /^[0-9]+$/, message: '请输入 长度', trigger: 'change'}],
+        min: [{required: true, pattern: /^[0-9]+$/, message: '请输入 最小值', trigger: 'change'}],
+        max: [{required: true, pattern: /^[0-9]+$/, message: '请输入 最大值', trigger: 'change'}],
+        dictId: [{required: true, message: '请选择 字典', trigger: 'change'}],
+        subList: [{required: true, type: 'array', message: '请选择 属性', trigger: 'change'}],
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.loading) return
+          this.loading = true
+          let editForm = this.form.id ? updateView : addView
+          editForm(this.form).then(() => {
+            this.$modal.msgSuccess('操作成功')
+            this.$emit("handleSubmit")
+            this.visible = false
+          }).finally(() => this.loading = false)
+        } else {
+          this.loading = false
+        }
+      })
+    },
+    onSearchDict(key) {
+      listPropertyDict({ name: key }).then(response => this.dictList = response.rows)
+    },
+    onSelectProperty(selectList) {
+      this.form.subList = selectList
+      this.form.ids = selectList.map(item => item.id)
+    },
+    onShowSelector() {
+      this.$refs.propertySelector.init(this.form)
+    },
+    init(id) {
+      this.visible = true
+      this.$refs.form && this.$refs.form.resetFields()
+      this.form = formData
+      if (id) {
+        getView({id}).then(resp => {
+          this.form = resp.data
+          this.form.ids = resp.data.subList.map(item => item.id)
+        })
+      }
+    },
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="特性类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择特性类型" clearable>
+          <el-option v-for="item in dict.type['sap_property_type']" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="特性名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入视图名称" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="关联属性" prop="field">
+        <el-input v-model="queryParams.field" placeholder="请输入视图属性" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="sap属性" prop="sapField">
+        <el-input v-model="queryParams.sapField" placeholder="请输入sap属性" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['md:sapField:add']" type="primary" plain icon="el-icon-plus" size="mini" @click="showEdit(null)">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['md:sapField:edit']" type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="showEdit(ids)">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['md:sapField:remove']" type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['md:sapField:export']" type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="page.records" row-key="id" lazy :load="onLoad" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55"/>
+      <el-table-column label="特性名称" prop="name">
+        <span slot-scope="{row}" :style="{marginLeft: (!row.hasChildren && row.parentId == 0) ? '25px' : '' }">
+          {{ row.name }}
+        </span>
+      </el-table-column>
+      <el-table-column label="特性类型" prop="type" width="120">
+        <template slot-scope="{row}">
+          {{ (dict.type['sap_property_type'].find(item => item.value == row.type) || {label: row.type}).label }}
+        </template>
+      </el-table-column>
+      <el-table-column label="数据类型" prop="dataType" width="90">
+        <template slot-scope="{row}">
+          {{ (dict.type['sys_data_type'].find(item => item.value == row.dataType) || {label: row.dataType}).label }}
+        </template>
+      </el-table-column>
+      <el-table-column label="关联属性" prop="field" width="120"/>
+      <el-table-column label="sap属性" prop="sapField" width="120"/>
+      <el-table-column label="是否必填" prop="required" width="85">
+        <template slot-scope="{row}">{{ row.required ? '是' : '否' }}</template>
+      </el-table-column>
+      <el-table-column label="是否显示" prop="show" width="85">
+        <template slot-scope="{row}">{{ row.show ? '是' : '否' }}</template>
+      </el-table-column>
+      <el-table-column label="错误提示语" prop="errMsg"/>
+      <el-table-column label="操作" class-name="small-padding fixed-width" width="150">
+        <template slot-scope="{row}">
+          <el-button v-hasPermi="['md:sapField:edit']" size="mini" type="text" icon="el-icon-edit" @click="showEdit(row.id)">修改</el-button>
+          <el-button v-hasPermi="['md:sapField:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
+          <el-button size="mini" type="text" @click="onShowPreview(row)">预览</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="page.total>0" :total="page.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="getList"/>
+    <edit-property ref="editProperty" @handleSubmit="getList"/>
+    <el-dialog :visible.sync="showPreview" width="100%">
+      <el-form>
+        <el-row :gutter="10">
+          <SapForm ref="sapForm"/>
+        </el-row>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { delView, pageView, listView, listViewVo } from '@/api/mes/md/sapField'
+import EditProperty from '@/views/mes/md/sapField/edit'
+import SapForm from '@/views/mes/md/sapField/components/SapForm'
+export default {
+  dicts: ['sap_property_type', 'sys_data_type'],
+  components: {
+    EditProperty,
+    SapForm,
+  },
+  data() {
+    return {
+      loading: false,
+      showPreview: false,
+      page: { records: [], total: 0 },
+      queryParams: { current: 1, size: 10, parentId: 0 },
+      dictList: [],
+      ids: [],
+      single: true,
+      multiple: true,
+      showSearch: true,
+      open: false,
+    }
+  },
+  methods: {
+    /** 新增按钮操作 */
+    showEdit(id) {
+      this.$refs.editProperty.init(id)
+    },
+    onShowPreview(row) {
+      this.showPreview = true
+      this.$nextTick(() => this.$refs.sapForm.init(row.type, row.id))
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除Sap特性视图编号为"' + ids + '"的数据项？').then(() => {
+        return delView(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('md/view/export', {
+        ...this.queryParams
+      }, `view_${new Date().getTime()}.xlsx`)
+    },
+    onLoad(tree, treeNode, resolve) {
+      listView({parentId: tree.id}).then(res => resolve(res.data))
+    },
+    /** 查询Sap特性视图列表 */
+    getList() {
+      this.loading = true
+      pageView(this.queryParams).then(response => {
+        this.page.records = response.data.rows
+        this.page.total = response.data.total
+      }).finally(() => this.loading = false)
+    },
+    handleQuery() {
+      this.queryParams.current = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    }
+  },
+  created() {
+    this.getList()
+  }
+}
+</script>

src/views/mes/md/sapField/selector.vue

+<template>
+  <el-dialog :visible.sync="visible" title="sap特性选择">
+    <el-table v-loading="loading" ref="multipleTable" :data="page.records" lazy row-key="id" @selection-change="onSelect">
+      <el-table-column type="selection" reserve-selection width="55"/>
+      <el-table-column label="特性类型" prop="type">
+        <template slot-scope="{row}">
+          {{ (dict.type['sap_property_type'].find(item => item.value == row.type) || {label: row.type}).label }}
+        </template>
+      </el-table-column>
+      <el-table-column label="数据类型" prop="dataType">
+        <template slot-scope="{row}">
+          {{ (dict.type['sys_data_type'].find(item => item.value == row.dataType) || {label: row.dataType}).label }}
+        </template>
+      </el-table-column>
+      <el-table-column label="特性名称" prop="name"/>
+      <el-table-column label="特性属性" prop="field"/>
+      <el-table-column label="sap属性" prop="sapField"/>
+      <el-table-column label="是否必填" prop="required">
+        <template slot-scope="{row}">{{ row.required == 1 ? '是' : '否' }}</template>
+      </el-table-column>
+      <el-table-column label="错误提示语" prop="errMsg"/>
+    </el-table>
+    <pagination v-show="page.total>0" :total="page.total" :page.sync="pageReq.current" :limit.sync="pageReq.size" @pagination="getList"/>
+    <div slot="footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="onConfirm">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import { pageView } from '@/api/mes/md/sapField'
+
+export default {
+  dicts: ['sap_property_type', 'sys_data_type'],
+  props: ['id'],
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      ids: [],
+      selectList: [],
+      page: {records: [], total: 0},
+      pageReq: {
+        current: 1,
+        size: 10,
+      },
+    }
+  },
+  methods: {
+    onConfirm() {
+      this.visible = false
+      this.$emit("handleConfirm", this.selectList)
+    },
+    onSelect(val) {
+      this.selectList = val
+    },
+    getList(fn) {
+      this.loading = true
+      this.pageReq.pId = this.id
+      pageView(this.pageReq).then(res => {
+        this.page.records = res.data.rows
+        this.page.total = res.data.total
+        fn && fn()
+      }).finally(() => this.loading = false)
+    },
+    init(form) {
+      this.visible = true
+      this.pageReq.pId = form.id
+      this.pageReq.type = form.type
+      this.getList(() => {
+        if (form.subList && form.subList.length) {
+          form.subList.forEach(sub => {
+            this.$refs.multipleTable.toggleRowSelection({id: sub.id})
+          })
+        } else {
+          this.$refs.multipleTable.clearSelection()
+        }
+      })
+    },
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>