培训计划调整

src/api/trainplan/index.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+const trainPlanAPI = {
+    add: '/trainPlan/add',
+}
+
+export function trainPlanAdd(params) {
+    return request({
+        url: trainPlanAPI.add,
+        method: 'post',
+        data: params
+    })
+}

src/views/project/form/ProjectCourseSelect.vue

@@ -5,7 +5,7 @@
         <a-col :span="4" id="tree">
           <a-menu v-model="menuKey" mode="horizontal" @select="menuChack">
             <a-menu-item key="sys">系统课程</a-menu-item>
-            <a-menu-item key="self" >自主课程</a-menu-item> 
+            <a-menu-item key="self">自主课程</a-menu-item>
             <!-- :disabled="tabDis" -->
           </a-menu>
           <!-- :defaultExpandedKeys="defaultExpandedKeys" -->
@@ -32,7 +32,9 @@
               </a-row>
             </a-form>
             <!-- onChange: onSelectChange, -->
-            <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange,  onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
+            <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" 
+              :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange, 
+               onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
               <span slot="serial" slot-scope="text, record, index">
                 {{ index + 1 }}
               </span>

src/views/project/trainPlan/TrainPlanForm.vue

@@ -1,29 +1,177 @@
 <template>
   <a-card :bordered="false" title="培训计划">
+    <a-form-model ref="form" :rules="rules" :model="form" :layout="'horizontal'">
+      <a-form-model-item label="培训计划名称" prop="name">
+        <a-input v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="培训计划年度" prop="year">
+        <a-select v-model="form.year" placeholder="--请选择--" defaultValue=''>
+          <a-select-option v-for="entity in years" :key="Number(entity)"> {{ entity }}年度 </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-button type="primary" size="default" icon="plus" @click="showDrawer" style="margin-right: 8px;">选择项目</a-button>
+      <a-table v-if="selectedRows.length > 0" rowKey="id" :columns="columns" :data-source="selectedRows" :pagination="false"></a-table>
+      <a-form-model-item label="备注">
+        <a-input v-model="form.remark" type="textarea" />
+      </a-form-model-item>
+      <a-col :span="24" style="text-align: center;">
+        <a-button type="primary" size="default" @click="handleSave" style="margin-right: 8px;">保存</a-button>
+        <a-button type="danger" size="default" @click="showConfirm">关闭</a-button>
+      </a-col>
+    </a-form-model>
 
+    <a-drawer title="选择项目" placement="right" :width="800" :closable="false" :visible="visible" :after-visible-change="afterVisibleChange" @close="onClose">
+      <s-table ref="table" size="default" rowKey="id" :columns="columns" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange,  onSelect: tableOnSelect ,onSelectAll: tableAllSelected }" :data="loadData" :pageNum="Number(this.$route.query.projectPageNum) || 1">
+      </s-table>
+    </a-drawer>
   </a-card>
 </template>
 
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 // 例如：import 《组件名称》 from '《组件路径》'
+import { STable } from '@/components'
+import { getProjectList } from '@/api/project/project'
+import { trainPlanAdd } from '@/api/trainplan';
 
 export default {
   // import引入的组件需要注入到对象中才能使用
-  components: {},
+  components: { STable },
   props: {},
   data() {
     // 这里存放数据
-    return {};
+    return {
+      queryParam: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      total: 10,
+      visible: false,
+      years: [],
+      form: {
+        name: '',
+        year: Number,
+        projectIds: [],
+        status: 1, //未发布
+      },
+      rowSelection: {},
+      selectedRows: [],
+      selectedRowKeys: [],
+      rules: {
+        name: [{ required: true, message: '请输入培训计划名称', trigger: 'blur' }],
+        year: [{ required: true, message: '请选择培训计划年度', trigger: 'change' }],
+      },
+      columns: [
+        { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
+        { title: '创建人', dataIndex: 'createBy', key: 'createBy' },
+        { title: '创建时间', dataIndex: 'createDate', key: 'createDate' }
+      ],
+      loadData: (parameter) => {
+        return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+    };
   },
   // 计算属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+
+    // TODO 保存计划的方法
+    handleSave() {
+      this.form.projectIds = this.selectedRowKeys;
+      this.$refs.form.validate(validate => {
+        if (validate) {
+          if (this.form.projectIds.length > 0) {
+            console.log('form', this.form)
+            trainPlanAdd(Object.assign({}, this.form)).then((res) => {
+              if (res.code == 200) {
+                this.$router.push({
+                  path: '/trainPlan/list/'+this.$route.query.t,
+                  query: {
+                    t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
+                    trainPlanPageNum: this.$route.query.trainPlanPageNum, //当前页
+                  },
+                })
+              } else{
+                this.$message.error('保存失败！')
+              }
+            })
+          } else {
+            this.$message.warning('项目不能为空，请选择项目后重新提交！')
+          }
+
+        }
+      })
+    },
+
+    /** 提示框 START */
+    showConfirm() {
+      this.$confirm({
+        title: '提示',
+        content: h => <span style="color:red;font-size:15px;">关闭后当前未保存的数据将丢失! 确认关闭吗?</span>,
+        onOk() { console.log('OK'); },
+        onCancel() { console.log('Cancel'); },
+        class: 'test',
+      });
+    },
+    /** 提示框 END */
+
+    /** TABLE START */
+    /** 表格行选中后触发 */
+    onSelectChange(selectedRowKeys, selectedRows) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys)
+      console.log('选择的表格数据 : ', selectedRows)
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    /** table取消勾选 */
+    tableOnSelect(record, selected, selectedRows, nativeEvent) {
+      if (!selected) { //取消勾选操作
+        let keys = this.selectedRowKeys.filter(item => item != record.id);
+        let rows = this.selectedRows.filter(item => item.id != record.id);
+
+        this.selectedRows = rows;
+        this.selectedRowKeys = keys;
+      }
+    },
+    /** table取消全选 */
+    tableAllSelected(selected, selectedRows, changeRows) {
+      if (!selected) { //取消勾选操作
+        let exKeys = changeRows.map(value => { return value.id })
+        let keys = this.selectedRowKeys.filter(item => { return !exKeys.includes(item) });
+        let rows = this.selectedRows.filter(item => { return !exKeys.includes(item.id) });
+
+        this.selectedRows = rows;
+        this.selectedRowKeys = keys;
+      }
+    },
+    /** TABLE END */
+
+    /** 抽屉使用的方法 ---start */
+    afterVisibleChange(val) {
+      console.log('visible', val);
+    },
+    showDrawer() {
+      this.visible = true;
+    },
+    onClose() {
+      this.visible = false;
+    },
+    /** 抽屉使用的方法 ---end */
+
+    /** 初始化年度 */
+    initYears() {
+      for (let i = 0; i < 5; i++) {
+        this.years.push(new Date().getFullYear() - 2 + i);
+      }
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() { },
+  created() { this.initYears() },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() { },
   // 生命周期 - 创建之前

src/views/project/trainPlan/TrainPlanList.vue

@@ -47,7 +47,7 @@ export default {
   data() {
     // 这里存放数据
     return {
-      title: '',
+      title: '培训计划列表',
       queryParam: {
         name: '',
         year: '',
@@ -94,12 +94,25 @@ export default {
   // 监控data中的数据变化
   watch: {
     $route(to, from) {  //to是前往的路由  from是去往的路由 同一个组件只会渲染一次
+      console.log("监控到变化")
       this.changeType(to.path)
       this.$refs.table.refresh(true)
     },
   },
   // 方法集合
   methods: {
+    // 增改
+    handledCreate(record) {
+      console.log(this.queryParam)
+      this.$router.push({
+        path: '/project/trainPlan/TrainPlanForm',
+        query: {
+          t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
+          trainPlanId: record.id, //项目id
+          trainPlanPageNum: this.$refs.table.localPagination.current, //当前页
+        },
+      })
+    },
     //变更类型
     changeType(path) {
       console.log('变更路由:', path)
@@ -111,28 +124,31 @@ export default {
       }
       let str = arr[arr.length - 1]
       this.queryParam.type = str
-      str == 'year' ? this.title='年度培训计划列表' : this.title='单位培训计划列表'
+      str == 'year' ? this.title = '年度培训计划列表' : this.title = '单位培训计划列表'
     },
-    // 生命周期 - 创建完成（可以访问当前this实例）
+  },
-    created() { this.changeType(this.$route.path) },
+  // 生命周期 - 创建完成（可以访问当前this实例）
-    // 生命周期 - 挂载完成（可以访问DOM元素）
+  created() {
-    mounted() { },
+    this.changeType(this.$route.path)
-    // 生命周期 - 创建之前
+  },
-    beforeCreate() { },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
-    // 生命周期 - 挂载之前
+  mounted() { },
-    beforeMount() { },
+  // 生命周期 - 创建之前
-    // 生命周期 - 更新之前
+  beforeCreate() { },
-    beforeUpdate() { },
+  // 生命周期 - 挂载之前
-    // 生命周期 - 更新之后
+  beforeMount() { },
-    updated() { },
+  // 生命周期 - 更新之前
-    // 生命周期 - 销毁之前
+  beforeUpdate() { },
-    beforeDestroy() { },
+  // 生命周期 - 更新之后
-    // 生命周期 - 销毁完成
+  updated() { },
-    destroyed() { },
+  // 生命周期 - 销毁之前
-    // 如果页面有keep-alive缓存功能，这个函数会触发
+  beforeDestroy() { },
-    activated() { }
+  // 生命周期 - 销毁完成
-  }
+  destroyed() { },
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
 }
+
 </script>
 <style scoped>
 </style>