welfare-admin/src/views/mycourse/trainingPlanList/index.vue

<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <SearchCom
          :form="queryParam"
          :list="queryOptions"
          @search="handleRefresh"
          @reset="
            () => {
              queryParam = {}
              handleRefresh()
            }
          "></SearchCom>
        </a-form>
      </div>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowKey="record => record.id"
      >
        <span slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="status" slot-scope="text, record">
          <a-tag color="red">未开始</a-tag>
        </span>
        <template slot="progress" slot-scope="text, record">
          <a-progress :percent="30" />
        </template>
        <span slot="action" slot-scope="text, record, index">
          <a v-if="index%3 == 1" @click="$refs.userForm.edit(record)">添加课程</a>
          <a v-if="index%3 == 2" @click="$refs.userForm.edit(record)">继续学习</a>
          <a v-if="index%3 == 0">已完成学习</a>
          <!-- <a-divider type="vertical"  />
          <a-dropdown v-if="hasPerm('sys:user:resetPwd') || hasPerm('sys:user:grantRole') || hasPerm('sys:user:del')">
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="hasPerm('sys:user:resetPwd')">
                <a-popconfirm placement="topRight" title="确认重置密码？" @confirm="() => resetPwd(record)">
                  <a>重置密码</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-if="hasPerm('sys:user:grantRole')">
                <a @click="$refs.userRoleForm.userRole(record)">授权角色</a>
              </a-menu-item>
              <a-menu-item v-if="hasPerm('sys:user:delete')">
                <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
        </span>
      </s-table>
      <!-- <user-form ref="userForm" @ok="handleOk" /> -->
      <!-- <user-role-form ref="userRoleForm" @ok="handleOk" /> -->
    </a-card>
  </div>
</template>
<script>
import { STable, SearchCom } from '@/components'
import { userPage, userDel, passwordReset } from '@/api/security/user'
export default {
  components: {
    STable,
    SearchCom
  },
  data () {
    return {
      // 查询参数
      queryParam: {},
       queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
        { type: 'select', placeholder: '课程分类', key: 'courseType', options: [{ name: '年度培训计划', id: 1 }, { name: '单位培训计划', id: 2 }] },
        { type: 'select', placeholder: '课程状态', key: 'courseStatus', options: [{ name: '在修', id: 1 }] }
      ],
      // 表头
      columns: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          title: '课程名称',
          dataIndex: 'courseName'
        },
        {
          title: '课程类别',
          dataIndex: 'type'
        },
        {
          title: '学习时间',
          dataIndex: 'date'
        },
        {
          title: '课程状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: '120px'
        },
        {
          title: '课程进度',
          dataIndex: 'progress',
          scopedSlots: { customRender: 'progress' },
          width: '180px'
        },
        {
          title: '已休学时',
          dataIndex: 'yxxs',
          scopedSlots: { customRender: 'present' }
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return userPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      selectedRows: [], // 选中行的数据
      options: {
      }
    }
  },
  created () {
  },
  methods: {
    handleRefresh () {

    },
    // 重置密码
    resetPwd (record) {
      passwordReset({ id: record.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('重置成功')
          // this.$refs.table.refresh()
        } else {
          this.$message.error('重置失败：' + res.msg)
        }
      })
    },
    // 单个删除
    singleDelete (record) {
      const param = { ids: record.id }
      this.sysUserDelete(param)
    },
    // 批量删除
    batchDelete () {
      const paramIds = this.selectedRowKeys.join(',')
      const param = { ids: paramIds }
      this.sysUserDelete(param)
    },
    sysUserDelete (param) {
      userDel(param)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.msg)
          }
        })
        .catch(err => {
          this.$message.error('删除错误：' + err.msg)
        })
    },
    handleOk () {
      this.$refs.table.refresh()
    }
  }
}
</script>
<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>