coding

src/lang/zh.js

@@ -32,6 +32,8 @@ export default {
     customTreeTable: '自定义树表',
     tab: 'Tab',
     form: '表单',
+    calendar: '日历事项',
+    transfer: '穿梭框',
     createForm: '创建表单',
     editForm: '编辑表单',
     errorPages: '错误页面',

src/router/index.js

@@ -137,6 +137,15 @@ export const asyncRouterMap = [
               icon: 'table'
             }
           },
+          {
+            path: 'transfer',
+            component: _import('haomo/components/transfer/index'),
+            name: '',
+            meta: {
+              title: 'transfer',
+              icon: 'table'
+            }
+          },
           {
             path: 'iconMenu',
             component: _import('haomo/components/iconMenu/index'),

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

@@ -12,7 +12,7 @@
                    element-loading-text="加载中"
                    :model="formModel"
                    :rules="rules"
-                   label-width="110px"
+                   label-width="200px"
                    style="width:80%;margin:0 auto">
             <el-form-item v-for="column in showUserColumns"
                           :key="column.id"
@@ -26,10 +26,10 @@
               <!-- 2 日期选择 -->
               <el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
                               v-model="formModel[column.codeCamel]"
-                              type="datetime"
+                              :type="column.dateType || 'date'"
                               align="right"
                               @change="logTimeChange"
-                              value-format="yyyy-MM-dd HH:mm:ss"
+                              :value-format="column.dateFormate || 'yyyy-MM-dd'"
                               :picker-options="pickerOptions">
               </el-date-picker>
               <!-- 3 下拉框 -->
@@ -129,16 +129,19 @@
        * codeCamel表示要显示的表单字段,
        * name表示自定义的字段名，如果不传，默认为数据库中的字段名，
        * widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，
-       * 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，
+       * 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框)，
        * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
-       * 对于复选框，如果只有一个备选项则不必传options
+       * 对于复选框，如果只有一个备选项则不必传options,
+       * 若表单类型为时间日期，可传入dateType字段，值为date（只显示日期）或datetime（显示日期和时间），如果不传，
+       * 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
+       * 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-dd HH:mm:ss'，如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
        * 示例：[
        *        { name: '姓名', codeCamel: 'username', widgetType: 1 },
        *        { name: '安全级别', codeCamel: 'securityLevel', widgetType: 5 },
        *        { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
        *        { name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
        *        { name: '部门', codeCamel: 'departmentId', widgetType: 4 },
-       *        { name: '新建时间', codeCamel: 'createTime', widgetType: 6 },
+       *        { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
        *        { name: '登陆地址', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
        *      ]
        */
@@ -372,7 +375,9 @@
               // self.$set(tmp, 'code', tmp.code.toLowerCase())
               column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
               self.$set(tmp, 'widgetType', column.widgetType || 1)
-              column.options && self.$set(tmp, 'options', column.options)
+              column.options && self.$set(tmp, 'options', column.options) // 设置下拉框/多选选项
+              column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
+              column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
               self.$set(self.showUserColumns, index, tmp) // 顺序
             }
           })

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

@@ -25,12 +25,12 @@
       return {
         // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
         showUserColumns: [
-          { name: '姓名', codeCamel: 'username', widgetType: 1 },
-          { name: '邮箱', codeCamel: 'email', widgetType: 5 },
+          { name: '用户名称', codeCamel: 'username', widgetType: 1 },
+          { name: '电子邮件', codeCamel: 'email', widgetType: 5 },
           { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
           { name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
           { codeCamel: 'password', widgetType: 4 },
-          { name: '新建时间', codeCamel: 'createTime', widgetType: 6 },
+          { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
           { name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
         ],
         // 要显示按钮
@@ -41,7 +41,7 @@
         ],
         // showUserButtons: []
         // 布局方式
-        layout: { left: 0, middle: 12, right: 12 }
+        layout: { left: 6, middle: 12, right: 6 }
       }
     },
     computed: {

src/views/haomo/components/transfer/HmTransfer.vue

+<template>
+    <el-transfer
+      v-model="value1"
+      :data="data"
+      :titles="title"
+      :button-texts="buttonTexts"
+      :filterable="filterable"
+      filter-placeholder="请输入关键字"
+      @change="handleChange"
+    ></el-transfer>
+</template>
+
+<script>
+  import request from '@/utils/request'
+  import _ from 'lodash'
+
+  /**
+   * 毫末科技的穿梭框组件.
+   *
+   *   demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/transfer
+   * @author 索光旭
+   */
+  export default {
+    name: 'HmTransfer',
+    props: {
+      /**
+       * 必传,组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
+       * 对于所有毫末科技的组件，必须传schema，以完成数据的交互
+       */
+      schema: {
+        type: Object,
+        required: true
+      },
+      /**
+       * 必传,项用于控制是否启用过滤功能
+       */
+      filterable: {
+        type: Boolean,
+        required: true
+      },
+      /**
+       * 非必传,用于修改穿梭框标题显示
+       * 若不传,则显示默认文字list1,list2
+       */
+      title: {
+        type: Array
+      },
+      /**
+       * 非必传,用于修改穿梭框按钮文字显示
+       * 若不传，则默认显示为左右箭头
+       */
+      buttonTexts: {
+        type: Array
+      }
+    },
+    methods: {
+      // 获取所有用户信息
+      getUser: function() {
+        const self = this
+        const params = {}
+        request(self.schema.modelUnderscorePlural, {
+          params: params
+        }).then(resp => {
+          self.list = resp.data
+          // 重新格式化用户信息
+          _.forIn(self.list, function(item, index) {
+            self.data.push({
+              key: index,
+              label: item.username
+              // disabled: index % 4 === 0    //需要禁止选择时设置
+            })
+            // 通过type类型判断左右显示
+            if (item.type !== 0) {
+              self.value1.push(index)
+            }
+          })
+        })
+      },
+      // 更改用户type字段值(入库操作)
+      changeType: function(val, userObj) {
+        const self = this
+        request(self.schema.modelUnderscorePlural + '/' + userObj.id + '/edit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+          params: { type: val }
+        }).then(data => {})
+      },
+      // 监测两侧列表改变事件
+      handleChange(value, directions, moveKey) {
+        const self = this
+        // 判断移动方向
+        if (directions === 'left') {
+          _.each(moveKey, function(key) {
+            const userObj = self.list[key]
+            self.changeType(0, userObj)
+          })
+        } else {
+          _.each(moveKey, function(key) {
+            const userObj = self.list[key]
+            self.changeType(1, userObj)
+          })
+        }
+      }
+    },
+    created: function() {
+      this.getUser()
+    },
+    data() {
+      return {
+        data: [],
+        list: null,
+        value1: [] // 右侧列表显示内容，必须项，否则穿梭功能无法实现
+      }
+    }
+  }
+</script>
+
+<style>
+  .el-transfer{
+    width: 33rem;
+    margin: 10rem auto;
+  }
+</style>

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

+<!--
+  <hm-transfer
+    :schema="schema['HmUser']"                    数据库操作对象 Object
+    :filterable="true"                            是否显示搜索框 Boolean （必须项）
+    :title="['左侧列表', '右侧列表']"               列表标题 Array  （可选项）
+    :buttonTexts="['左移', '右移']"                按钮名称 Array  （可选项）
+  ></hm-transfer>
+-->
+
+<template>
+  <hm-transfer
+    :schema="schema['HmUser']"
+    :filterable="canSearch"
+    :title="listTitle"
+    :buttonTexts="buttonTexts"
+  ></hm-transfer>
+</template>
+
+<script>
+  import HmTransfer from './HmTransfer'
+  import schema from '../../schemas/hm_org_schema'
+  export default {
+    name: 'HmTransferIndex',
+    // 继承其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+      'hm-transfer': HmTransfer
+    },
+    data() {
+      return {}
+    },
+    computed: {},
+    filters: {},
+    created() {
+      this.schema = schema
+      this.canSearch = true
+      this.listTitle = ['左侧列表', '右侧列表']
+      this.buttonTexts = ['左移', '右移']
+    },
+    methods: {}
+  }
+</script>
+
+<style scoped>
+
+</style>