更新穿梭框

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/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'
+
+  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>