Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

src/views/haomo/components/details/HmComplexDetail.vue

@@ -4,7 +4,7 @@
     <el-col :span="12" class="detail-content">
       <h2 class="title">详情页面</h2>
       <el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">
-        <el-form-item v-for="column in showColumns" :label="column.name">
+        <el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">
           <div>{{detail[column.codeCamel]}}</div>
         </el-form-item>
       </el-form>
@@ -129,7 +129,7 @@
         console.log(request.defaults)
         console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
       },
-      getList: function () {
+      getList: function() {
         const self = this
         self.listLoading = true
         const params = {}
@@ -137,9 +137,11 @@
         request(self.schema.modelUnderscorePlural, {
           params: params
         }).then(resp => {
+          console.log('=============')
+          console.log(self.schema.modelUnderscorePlural)
           self.list = resp.data
           // 匹配需要展示的用户
-          _.each(self.list, function (item) {
+          _.each(self.list, function(item) {
             if (item.id === self.userId) {
               self.detail = item
             }

src/views/haomo/components/forms/HmComplexForm.vue

@@ -2,7 +2,6 @@
   <el-row type="flex" class="hm-form">
     <el-col :span="6"><div></div></el-col>
     <el-col :span="12" style="border:1px solid orange"><div>
-        <!--标题-->
         <h2 class="title">表单页面</h2>
         <!--表单部分-->
         <!--<el-form :model="form" ref="form" :rules="rules"  label-width="110px" status-icon style="width:80%;margin:0 auto">
@@ -63,8 +62,8 @@
           </el-form-item>
         </el-form>-->
       <el-form label-width="110px" status-icon style="width:80%;margin:0 auto">
-        <el-form-item v-for="column in showColumns" :label="column.name">
-          <el-input :placeholder="column.name"></el-input>
+        <el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name">
+          <el-input :placeholder="column.name" v-model="formModel[column.codeCamel]"></el-input>
         </el-form-item>
         <el-form-item>
           <el-col :span="12">
@@ -95,17 +94,36 @@
     components: {},
     // 混入公共对象
     mixins: [],
+    /**
+     * 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
+     * 对于所有毫末科技的组件，必须传schema，以完成数据的交互
+     */
     props: {
       schema: {
         type: Object,
         required: true
+      },
+      /**
+       * 指定要显示的字段。默认为根据schema得到的所有字段。
+       */
+      fields: {
+        type: Array,
+        required: false,
+        validator: function(value) {
+          if (typeof value !== 'object') {
+            console.warn(`传入的fields不符合要求，必须是数组`)
+            return false
+          }
+
+          return true
+        }
       }
     },
     data() {
       return {
-        list: null,
         form: null,
-        showColumns: [] // 要显示的列数据
+        formModel: {}, // 双向绑定的数据变量
+        showFields: [] // 要显示的字段
         // form: {
         //   name: '',
         //   gender: '男',
@@ -156,11 +174,37 @@
     methods: {
       init() {
         const self = this
-        _.each(self.schema['columns'], function(column) {
-          const tmp = JSON.parse(JSON.stringify(column))
-          self.showColumns.push(tmp)
+        // 如果没有传fields，则全部显示
+        if (!self.fields || !self.fields.length) {
+          _.each(self.schema['columns'], function(column) {
+            const tmp = JSON.parse(JSON.stringify(column))
+            self.$set(tmp, 'code', tmp.code.toLowerCase())
+            self.showFields.push(tmp)
+          })
+          console.log(self.showFields)
+        } else { // 如果传入了fields，则只显示传入的字段
+          self.showFields = JSON.parse(JSON.stringify(self.fields))
+          console.log('1111111')
+          console.log(self.showFields)
+          // 将字符串对象进行替换处理
+          _.each(self.showFields, function(column, index) {
+            if (typeof column === 'string') {
+              // 生成一个新对象
+              var tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
+              console.log(tmp)
+              self.$set(tmp, 'code', tmp.code.toLowerCase())
+              self.$set(self.showFields, index, tmp)
+            }
+          })
+          console.log('2222222')
+          console.log(self.showFields)
+        }
+
+        // 提取v-model绑定的变量
+        _.each(self.showFields, function(item) {
+          self.formModel[item.codeCamel] = ''
         })
-        console.log(self.showColumns)
+        console.log(self.formModel)
         if (!request.defaults.baseURL) {
           request.defaults.baseURL = '/org/api'
         }
@@ -174,14 +218,22 @@
        * 验证失败，禁止提交并给出提示
        */
       onSubmit() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            console.log('提交成功!')
-          } else {
-            console.log('提交失败!!')
-            return false
-          }
+        // this.formModel['X-Auth-Token'] = '111'
+        // console.log(this.formModel)
+        // console.log(this.schema)
+        request(this.schema.modelUnderscorePlural + '/new', {
+          params: this.formModel
+        }).then(resp => {
+          console.log(resp.data)
         })
+        // this.$refs.form.validate((valid) => {
+        //   if (valid) {
+        //     console.log('提交成功!')
+        //   } else {
+        //     console.log('提交失败!!')
+        //     return false
+        //   }
+        // })
       },
       // 重置
       /**

src/views/haomo/components/forms/index.vue

 <template>
   <div>
-    <hm-complex-form :schema="schema['HmUser']">
+    <hm-complex-form :schema="schema['HmUser']" :fields="showFields">
     </hm-complex-form>
   </div>
 </template>
@@ -18,7 +18,9 @@
       'hm-complex-form': HmComplexForm
     },
     data() {
-      return {}
+      return {
+        showFields: ['username', 'loginid', 'password', 'mobile', 'email']
+      }
     },
     computed: {
     },

src/views/haomo/components/tables/HmComplexTable.vue

@@ -21,7 +21,7 @@
     <!-- 表格 -->
     <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
               style="width: 100%">
-      <el-table-column v-for="column in showColumns" align="center" :label="column.name">
+      <el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name">
         <template slot-scope="scope">
           <span>{{ scope.row[column.code] }}</span>
         </template>
@@ -241,16 +241,22 @@
             self.$set(tmp, 'code', tmp.code.toLowerCase())
             self.showColumns.push(tmp)
           })
+          console.log(self.showColumns)
         } else {
           self.showColumns = JSON.parse(JSON.stringify(self.columns))
+          console.log('1111111')
+          console.log(self.showColumns)
           // 将字符串对象进行替换处理
           _.each(self.showColumns, function(column, index) {
             if (typeof column === 'string') {
               const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
+              console.log(tmp)
               self.$set(tmp, 'code', tmp.code.toLowerCase())
               self.$set(self.showColumns, index, tmp)
             }
           })
+          console.log('2222222')
+          console.log(self.showColumns)
         }
 
         // 处理过滤条件