穿梭框测试提交

src/config/router.config.js

@@ -88,7 +88,7 @@ export const asyncRouterMap = [
             path: '/project/add',
             name: 'ProjectForm',
             component: () => import('@/views/project/ProjectForm'),
-            meta: { title: '新增项目', keepAlive: true, permission: ['form'] }
+            meta: { title: '新增项目', keepAlive: true, permission: ['form'], show: false}
           },
           {
             path: '/project/unitSelect',

src/core/lazy_use.js

@@ -45,7 +45,9 @@ import {
   Descriptions,
   message,
   notification,
-  space
+  space,
+  Transfer,
+  Tree
 } from 'ant-design-vue'
 import Viser from 'viser-vue'
 
@@ -99,6 +101,8 @@ Vue.use(Result)
 Vue.use(Statistic)
 Vue.use(Descriptions)
 Vue.use(space)
+Vue.use(Tree)
+Vue.use(Transfer)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message

src/views/project/ProjectList.vue

@@ -9,12 +9,22 @@
           <a-select-option value="null">全部</a-select-option>
           <a-select-option value="1">运行中</a-select-option>
           <a-select-option value="2">已结束</a-select-option>
-          <a-select-option value="1">未发布</a-select-option>
+          <a-select-option value="3">未发布</a-select-option>
         </a-select>
         开始时间:
-        <a-date-picker v-model="queryParam.startDate" style="width: 100%" placeholder="请输入开始时间" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+        <a-date-picker
+          v-model="queryParam.startDate"
+          style="width: 100%"
+          placeholder="请输入开始时间"
+          valueFormat="YYYY-MM-DD HH:mm:ss"
+        />
         结束时间:
-        <a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+        <a-date-picker
+          v-model="queryParam.endDate"
+          style="width: 100%"
+          placeholder="请输入结束时间"
+          valueFormat="YYYY-MM-DD HH:mm:ss"
+        />
         培训方式:
         <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" style="width: 120px">
           <a-select-option value="null">全部</a-select-option>
@@ -36,7 +46,7 @@
       <s-table
         ref="table"
         size="default"
-        rowKey="key"
+        rowKey="id"
         :columns="columns"
         :data="loadData"
         :rowSelection="options.rowSelection"
@@ -70,11 +80,11 @@ import router from '@/router/index.js'
 
 export default {
   name: 'ProjectList',
-  props: { },
+  props: {},
   components: {
     STable,
     ProjectForm,
-    router
+    router,
   },
   data() {
     return {
@@ -82,20 +92,22 @@ export default {
       queryParam: {},
       // 表头
       columns: [
-        { title: '序号', width: 60, scopedSlots: { customRender: 'serial' } },
+        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
         { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
         {
           title: '时间',
           dataIndex: 'startDate',
+          key: 'startDate',
           customRender: (text, record, index) => {
             return record.startDate + ' - ' + record.endDate
           },
         },
-        { title: '人数', dataIndex: 'personNum', customRender: (text) => text + '人' },
-        { title: '项目类型', dataIndex: 'projectType' },
+        { title: '人数', key: 'personNum', dataIndex: 'personNum', customRender: (text) => text + '人' },
+        { title: '项目类型', dataIndex: 'projectType', key: 'projectType' },
         {
           title: '项目状态',
           dataIndex: 'status',
+          key: 'status',
           customRender: (text, record, index) => {
             //项目状态 1-未发布 2-未开始 3-进行中  4-已完成  5-已中止
             if (text == 1) {
@@ -115,15 +127,15 @@ export default {
             }
           },
         },
-        { title: '创建人员', dataIndex: 'createBy' },
-        { title: '创建时间', dataIndex: 'createDate' },
-        {
-          title: '操作',
-          key: 'operation',
-          width: 200,
-          align: 'center',
-          scopedSlots: { customRender: 'action' },
-        },
+        { title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
+        { title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
+        // {
+        //   title: '操作',
+        //   width: 200,
+        //   key: 'status',
+        //   align: 'center',
+        //   scopedSlots: { customRender: 'action' },
+        // },
       ],
 
       // 加载数据方法 必须为 Promise 对象
@@ -145,7 +157,7 @@ export default {
     handledCreate() {
       return this.$router.push(
         // {name: 'ProjectForm'}
-        {path: 'project/project/add',}
+        { path: 'project/project/add' }
       )
       // router.push()
     },

src/views/project/ProjectUnitSelect.vue

@@ -1,38 +1,108 @@
 <template>
-<div>
-    <h1>我是张三</h1>
-</div>
+  <div>
+    <a-transfer
+      class="tree-transfer"
+      :data-source="treeData"
+      :list-style="{
+        height: '600px',
+      }"
+      :titles="['全部单位列表', '已经选中单位']"
+      :target-keys="targetKeys"
+      :render="(item) => item.title"
+      :show-select-all="false"
+      @change="onChange"
+    >
+      <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
+        <a-tree
+          v-if="direction === 'left'"
+          blockNode
+          checkable
+          checkStrictly
+          defaultExpandAll
+          :checkedKeys="[...selectedKeys, ...targetKeys]"
+          :treeData="treeData"
+          @check="
+            (_, props) => {
+              onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
+            }
+          "
+          @select="
+            (_, props) => {
+              onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
+            }
+          "
+        />
+      </template>
+    </a-transfer>
+  </div>
 </template>
-
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》'
+const treeData = [
+  { id: '0-0', title: '0-0' },
+  {
+    id: '0-1',
+    title: '0-1',
+    children: [
+      { id: '0-1-0', title: '0-1-0' },
+      { id: '0-1-1', title: '0-1-1' },
+    ],
+  },
+  { id: '0-2', title: '0-3' },
+]
+
+const transferDataSource = []
+function flatten(list = []) {
+  list.forEach((item) => {
+    transferDataSource.push(item)
+    flatten(item.children)
+  })
+}
+flatten(JSON.parse(JSON.stringify(treeData)))
+
+function isChecked(selectedKeys, eventKey) {
+  return selectedKeys.indexOf(eventKey) !== -1
+}
+
+function handleTreeData(data, targetKeys = []) {
+  data.forEach((item) => {
+    item['disabled'] = targetKeys.includes(item.id)
+    if (item.children) {
+      handleTreeData(item.children, targetKeys)
+    }
+  })
+  return data
+}
 
 export default {
-//import引入的组件需要注入到对象中才能使用
-components: {},
-props: {},
-data() {
-//这里存放数据
-return {};
-},
-//计算属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {},
-created() {},  //生命周期 - 创建完成（可以访问当前this实例）
-mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
-};
-
+  data() {
+    return {
+      targetKeys: [],
+      dataSource: transferDataSource,
+    }
+  },
+  computed: {
+    treeData() {
+      return handleTreeData(treeData, this.targetKeys)
+    },
+  },
+  methods: {
+    onChange(targetKeys) {
+      console.log('Target Keys:', targetKeys)
+      this.targetKeys = targetKeys
+    },
+    onChecked(_, e, checkedKeys, itemSelect) {
+      const { eventKey } = e.node
+      itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
+    },
+  },
+}
 </script>
+
+
 <style scoped>
-</style>
+.tree-transfer .ant-transfer-list:first-child {
+  width: 50%;
+  flex: none;
+  height: 100%;
+}
+</style>