proginn-frontend/components/group/ce.vue

// 创建与编辑通用页面组件
<template>
  <ws-page :menuIndex="1">
    <section class="group-edit">
      <h2>{{isEdit ? '编辑' : '创建'}}云端协作群组</h2>
      <section class="inputs">
        <section class="input">
          群组名称：
          <el-input placeholder="请输入" v-model="group"></el-input>
        </section>
        <section class="input">
          管理人员：
          <el-input placeholder="请输入项目经理ID，多个以逗号,隔开" v-model="manager"></el-input>
        </section>
      </section>
      <p class="bold">关联工作</p>
      <el-table
        v-if="list.length"
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%;"
        @select="handleSelectCell"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="工作ID">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="nickname" label="开发者">
          <template slot-scope="scope">{{ `${scope.row.nickname}(${scope.row.developer_uid})` }}</template>
        </el-table-column>
        <el-table-column prop="occupation_name" label="职业方向"></el-table-column>
        <el-table-column prop="status_name" label="状态"></el-table-column>
      </el-table>
      <section class="list-empty" v-else>
        <img src="~@/assets/img/group/empty.png" alt="empty">
        <p>没有符合条件的云端工作</p>
      </section>
      <el-pagination
        class="pagination"
        v-if="pageTotal"
        background
        layout="prev, pager, next"
        :total="pageTotal"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
      <section class="ctrls">
        <el-button type="primary" @click="clickSave">保存</el-button>
        <el-button @click="clickCancel">取消</el-button>
      </section>
    </section>
  </ws-page>
</template>

<script>
import mixinGroup from '@/mixins/group'

export default {
  head() {
    return {
      title: '编辑云端工作群组',
    }
  },
  mixins: [mixinGroup],
  data() {
    return {
      // 当前页面
      currentPage: 1,
      // 列表数据
      list: [],
      // 群组名称
      group: '',
      // 管理人员
      manager: '',
      // 是否是编辑
      isEdit: !!this.$route.query.isEdit,
      // 总条目
      pageTotal: 0,
      pageSize: 8,
      // 初次请求info, 防止点击页码刷掉input内容
      isInitial: true,
      hash: {},
      // 列表缓存数据, 用来保存状态
      tempListData: {},
    }
  },
  computed: {

  },
  mounted() {
    if (this.hasLogined) {
      this.getInfo()
    } else {
      // 前往登录页
      this.goLogin()
    }
  },
  methods: {
    /**
     * 页码变化
     */
    changePage(page) {
      this.currentPage = page
      this.getInfo()
    },
    async getInfo() {
      let jobList
      let res
      let tempBobList = this.tempListData[this.currentPage]
      if (tempBobList) jobList = tempBobList
      else {
        let body = { page: this.currentPage, page_size: this.pageSize }
        if (this.isEdit) body.id = this.detailID
        res = await this.$axios.$post(`/api/group/getInfo`, body)
      }
      // page 默认1 page_size 默认8 id 编辑时必填，创建时不传
      let data
      if (!jobList && res) {
        data = res.data
        jobList = data.job_list
      } else if (!jobList && !res) {
        this.$message({
          message: '请求错误',
          type: 'error',
        })
      }
      this.tempListData[this.currentPage] = jobList
      this.list = jobList.list
      this.pageTotal = jobList.total
      if (this.isInitial) {
        this.isInitial = false
        this.group = data.name || ``
        this.manager = data.manager_uids || ``
      }
      this.$nextTick(() => {
        this.list.forEach(i => {
          if (i.selected) this.$refs.multipleTable.toggleRowSelection(i, true)
        })
      })
    },
    /**
     * 多选控制器处理
     */
    handleSelectionChange(vals) {

    },
    /**
     * 手动点击选项
     */
    handleSelectCell(vals, row) {
      row.selected = !row.selected
    },
    /**
     * （1）点击“保存”，对表单字段进行如下检测：
        如果群组名称为空，toast提示：请输入群组名称
        如果有输入管理人员，进行用户查询，不存在则toast提示：请输入正确的用户ID
        如果没有勾选关联任一工作，toast提示：请选择要关联的工作
        以上检测通过，则向后端提交，成功后弹toast提示：保存成功，然后跳到对应的详情页
     */
    async clickSave() {
      let job_ids = this.getIds()
      if (!this.group) {
        this.$message({
          message: '请输入群组名称',
          icon: 'error',
        })
        return
      } else if (!job_ids.length) {
        this.$message({
          message: '请选择要关联的工作',
          icon: 'error',
        })
        return
      }
      /**
       * 更新
        /api/group/update
        参数：
        name
        manager_uids
        job_ids
        id 必填
       */
      let body = {
        name: this.group,
        manager_uids: this.manager,
        job_ids,
      }
      if (this.isEdit) body.id = this.detailID
      let res = await this.$axios.$post(`/api/group/${this.isEdit ? 'update' : 'create'}`, body)
      if (res) {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        setTimeout(() => {
          this.$router.go(-1)
        }, 1500)
      }
    },
    /**
     * 基于tempListData的全部列表筛选出ids
     */
    getIds() {
      let ids = ``
      Object.keys(this.tempListData).forEach(key => {
        this.tempListData[key].list.forEach(i => {
          if (i.selected) ids += `${i.id},`
        })
      })
      return ids.replace(/,$/, ``)
    },
    clickCancel() {
      this.$confirm('确定不保存已修改的内容吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
  }
}
</script>

<style scoped>
h2 {
  margin: 5px 0 25px;
  text-align: center;
}
.group-edit {
  display: flex;
  flex-direction: column;
  width: 816px;
  background: white;
  padding: 20px;
}
.input,
.bold {
  font-weight: 800;
  font-size: 14px;
}
.input {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.el-input {
  display: flex;
  align-items: center;
  width: 304px;
}
.bold {
  margin: 25px 0 10px;
}
.list-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  color: #999;
  font-size: 14px;
}
.pagination {
  margin: 30px 0;
}
.ctrls {
  margin: 0 0 150px;
}
.el-button {
  width: 120px;
  border: none;
}
.el-button:nth-child(2) {
  background: #ececec;
}
</style>