welfare-admin/src/views/project/trainPlan/TrainPlanForm.vue

<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: { STable },
  props: {},
  data() {
    // 这里存放数据
    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: {

    // 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() { this.initYears() },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
};

</script>
<style scoped>
</style>