下拉框Select+标签页tabs使用实战

项目后台首页之项目总览，

一、需求如下：

当点击Select全部项目下拉框选中某一项时，触发事件渲染表格，同时状态默认回到进行中状态。
新建分组，新建成功后同时出现在Select全部项目下拉框中。
点击表格中状态下的图片给每行项目上锁/解锁。
移动状态：每行项目在进行中/已完成/已过期三种状态中自由切换，当前项目状态停留在某一种时(如: 进行中)，那么你在移动到下一个状态时(如: 已完成)，需要把当前停留的状态(进行中)给排除掉，也就是说只显示已完成/已过期两种状态。
移动分组：这里分为默认分组和自定义分组两种。如当前项目位置在默认分组下，那这个项目只能移到自定义分组中去，并且在选择移动时，还要把默认分组给排除掉；如当前项目位置在自定金分组下，那这个项目只能移到自定义分组中去，并且在选择移动时，不仅把默认分组给排除掉，还要把当前所在自定义组也给排除掉。

附最终效果图：

image.png

二、页面布局：

链接：https://element.eleme.cn/#/zh-CN/component/select

三、代码分解如下：

// api引入进来
import { createCustomGroup, getUserGroupCounts, getProjects, modifyProject, moveProjectIntoCustomGroup, moveProjectIntoOtherCustomGroup } from '@/api/home/home'
import qs from 'Qs'

export default {
  data () {
    return {
      activeName: 'first', //默认进来是定位在进行中状态
      input: '',
      userId: '',
      tableData: [], //定义一个空的数组
      andr_project_user_group_id: 'all',  //默认进来是查询全部项目
      state: '0',  //默认进来是查询全部项目中的进行中状态
      form: {
        region: '',
        add: '',
        otherGroup: '',
        area: ''
      },
      num: '',
      value: '',
      totalProjectList: [],
      dialogFormRemove: false,  //移动状态对话框
      dialogFormAdd: false,  // 新建分组对话框
      getProjectId: '',
      getGroupId: '',
      // 默认的移动三种状态
      stateList: [{label: '移动至进行中', value: '0'}, {label: '移动至已完成', value: '1'}, {label: '移动至已过期', value: '2'}], 
      changeState: '',
      changeGroupState: '',
      dialogFormVisible: false,  //移动分组对话框
      moveProjectList: []
    }
  },

  methods: {
    // 选择全部项目里的某一项查询
    currentProject ($event) {
      this.andr_project_user_group_id = $event  //当前选中的某一项赋值给id
      this.activeName = 'first'   //每次点击不同项目时，始终切换到进行中
      this.state = '0'   //每次点击不同项目时，始终切换到进行中
      this.getProjectsByStateAndGroupId(this.state, $event) //每次点击时的不同状态和点击的项目id
    },
    // 进行中/已完成/已过期切换
    handleClick (tab, event) {
      if (tab.name === 'first') {
        this.state = 0 
      } else if (tab.name === 'second') {
        this.state = 1
      } else if (tab.name === 'third') {
        this.state = 2
      }
      //初始化
      this.stateList = [{label: '移动至进行中', value: '0'}, {label: '移动至已完成', value: '1'}, {label: '移动至已过期', value: '2'}]
      this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
    },
    // 登录成功后进入后台首页(表格)
    getProjectsByStateAndGroupId (state, id) {
      var params = {
        state: state,
        andrProjectUserGroupId: id
      }
      // 同一接口个别参数不同，但请求后端时里的代码一样，合并
      this.getProjectByApi(params)
    },
    // 登录成功后进入后台首页
    getProjectByApi (params) {
      getProjects(qs.stringify(params)).then(response => {
        if (response.data.retcode === 2000) {
          this.tableData = response.data.data.projects
          this.num = response.data.data.counts
          if (this.tableData) {
            this.tableData.forEach(function (row) {
              if (row.is_block === 0) {
                row.is_block_url = require('@/assets/img/unlock.png')
              } else if (row.is_block === 1) {
                row.is_block_url = require('@/assets/img/lock.png')
              }
            })
          }
          this.$message.success(response.data.retmsg)
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
    // 点击项目上锁解锁
    modifyProject (row) {
      var block = row.is_block === 0 ? 1 : 0
      var projectState = {
        userId: this.userId,
        projectId: row.andr_project_id,
        groupId: row.groupId,
        isBlock: block,
        type: '0'
      }
      modifyProject(qs.stringify(projectState)).then(response => {
        if (response.data.retcode === 2000) {
          this.$message.success(response.data.retmsg)
          // 更改锁定状态后，刷新页面
          this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
    // 搜索
    searchClick () {
      var params = {
        state: this.state,
        andrProjectUserGroupId: this.andr_project_user_group_id,
        condition: this.input
      }
      // 同一接口个别参数不同，但请求后端时里的代码一样，合并
      this.getProjectByApi(params)
    },
    // 查询下拉框全部项目
    getUserGroupCounts () {
      var params = {
        token: '' // 登陆成功后一直有携带token,这里可直接查询
      }
      getUserGroupCounts(qs.stringify(params)).then(response => {
        if (response.data.retcode === 2000) {
          this.totalProjectList = response.data.data
          this.$message.success(response.data.retmsg)
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
    // 显示新建分组对话框
    addStageClick () {
      this.dialogFormAdd = true
    },
    // 新建分组
    addGroupClick () {
      if (!this.form.add) {
        this.$message.error('新建分组名称不能为空')
        return
      }
      var addGroup = {
        token: '', // 登陆成功后一直有携带token,这里可直接查询
        customName: this.form.add
      }
      createCustomGroup(qs.stringify(addGroup)).then(response => {
        if (response.data.retcode === 2000) {
          this.dialogFormAdd = false
          this.$message.success(response.data.retmsg)
          // 这里新建分组成功之后，再调用一次更新全部项目接口
          this.getUserGroupCounts()
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
    // 显示移动状态对话框
    removeClick (row) {
      this.dialogFormRemove = true
      this.getProjectId = row.andr_project_id
      this.getGroupId = row.groupId
      // 每一种状态移动时,把自身状态过滤掉,显示其它两种状态
      var list = this.stateList.filter(function (state) {
        return state.value != row.state
      })
      console.log(list)
      // 当初始过滤时stateList数组里还是3种状态,list数组过滤后只有两种状态,把它赋值给stateList
      this.stateList = list
      
      //另一种实现方法
      // if (row.state === 0) {
      //   this.stateList = [{label: '移动至已完成', value: '1'}, {label: '移动至已过期', value: '2'}]
      // } else if (row.state === 1) {
      //   this.stateList = [{label: '移动至进行中', value: '0'}, {label: '移动至已过期', value: '2'}]
      // } else if (row.state === 2) {
      //   this.stateList = [{label: '移动至进行中', value: '0'}, {label: '移动至已完成', value: '1'}]
      // }
    },
    // 选中的移动状态
    changeStateClick ($event) {
      this.changeState = $event  //即将要移动的状态赋值,下面调接口需要
    },
    // 移动状态(进行中/已完成/已过期)
    move () {
      if (!this.changeState) {
        this.$message.error('移动区域不能为空')
        return
      }
      var moveProject = {
        userId: this.userId,
        type: 1,
        state: this.changeState,
        projectId: this.getProjectId,
        groupId: this.getGroupId
      }
      modifyProject(qs.stringify(moveProject)).then(response => {
        if (response.data.retcode === 2000) {
          this.dialogFormRemove = false
          this.$message.success(response.data.retmsg)
          this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
    // 显示移动分组对话框
    removeProjectClick (row) {
      this.dialogFormVisible = true
      this.getProjectId = row.andr_project_id
      // 过滤移动分组中默认的3项(全部项目/我负责的/我参与的)
      // 以及从自定义分组移动至另自定义分组时，把当前所处在全部项目中的自己也要过滤掉
      var _this = this // 把全局this赋值给局部
      var groupList = this.totalProjectList.filter(function (project) {
        return project.andr_project_user_group_id !== 'all' &&
          project.andr_project_user_group_id !== 'charge' &&
          project.andr_project_user_group_id !== 'joined' &&
          project.andr_project_user_group_id !== _this.andr_project_user_group_id
      })
      this.moveProjectList = groupList
    },
    // 选中的移动分组状态
    chooseGroup ($event) {
      this.changeGroupState = $event
    },
    // 移动分组
    moveOtherClick () {
      if (this.andr_project_user_group_id === 'all' ||
        this.andr_project_user_group_id === 'charge' ||
        this.andr_project_user_group_id === 'joined') {
        // 从默认分组移动至自定义分组中
        var params = {
          projectId: this.getProjectId,
          andrProjectUserGroupId: this.changeGroupState
        }
        moveProjectIntoCustomGroup(qs.stringify(params)).then(response => {
          if (response.data.retcode === 2000) {
            this.dialogFormVisible = false
            this.$message.success(response.data.retmsg)
            this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
          } else {
            this.$message.error(response.data.retmsg)
          }
        })
      } else {
        // 从自定义分组移动至另自定义分组中
        var custom = {
          userId: this.userId,
          projectId: this.getProjectId,
          andrProjectUserGroupIdFrom: this.andr_project_user_group_id,
          andrProjectUserGroupIdTo: this.changeGroupState
        }
        moveProjectIntoOtherCustomGroup(qs.stringify(custom)).then(response => {
          if (response.data.retcode === 2000) {
            this.dialogFormVisible = false
            this.$message.success(response.data.retmsg)
            this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
          } else {
            this.$message.error(response.data.retmsg)
          }
        })
      }
    }
  },
  created () {
    this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
    this.getUserGroupCounts()
  }
}

四、相关效果图如下：

4.1 新建分组

image.png
4.2 移动状态

image.png
4.3 移动分组(从默认项移动到自定义分组)

image.png
4.4 移动分组(从自定义分组移动到另一个自定义分组)

image.png

下拉框Select+标签页tabs使用实战

一、需求如下：

附最终效果图：

二、页面布局：

三、代码分解如下：

四、相关效果图如下：

你可能感兴趣的:(下拉框Select+标签页tabs使用实战)