123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282 |
- <template>
- <div>
- <div class="box">
- <el-tabs v-model="formData.status" type="card">
- <el-tab-pane v-for="(item,index) in tabsOption" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
- </el-tabs>
- <el-form ref="formData" :inline="true" :model="formData" label-width="80px">
- <el-form-item label="积分类型">
- <el-select v-model="formData.pt_id" clearable placeholder="请选择积分类型">
- <el-option v-for="item in point_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="排序">
- <el-select v-model="formData.sort" placeholder="请选择排序">
- <el-option v-for="item in sort" :key="item.id" :label="item.name" :value="item.code"></el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <div v-if="formData.status == 'running'">
- <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail" >
- <el-table-column label="任务内容" prop="task_name">
- <template slot-scope="scope">
- <span class="font-flex-word" style="max-width: 200px;">{{scope.row.task_name}}驱蚊器翁请问请问恶趣味恶趣味</span>
- </template>
- </el-table-column>
- <el-table-column label="积分">
- <template slot-scope="scope">
- <span>{{scope.row.point_config.base_point}}</span>
- </template>
- </el-table-column>
- <el-table-column label="截止时间" prop="expire_time"></el-table-column>
- <el-table-column label="操作" prop="owner_id">
- <template slot-scope="scope">
- <el-link type="primary" :underline='false' @click.stop="completeBtn(scope.row)">完成任务</el-link>
- </template>
- </el-table-column>
- <template slot="empty">
- <noData></noData>
- </template>
- </el-table>
- </div>
- <div v-else>
- <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail">
- <el-table-column label="任务内容" prop="task_name">
- <template slot-scope="scope">
- <span class="font-flex-word" style="max-width: 200px;">{{scope.row.task_name}}</span>
- </template>
- </el-table-column>
- <el-table-column label="积分">
- <template slot-scope="scope">
- <span>{{scope.row.point_config.base_point}}</span>
- </template>
- </el-table-column>
- <el-table-column label="截止时间" prop="expire_time"></el-table-column>
- <template slot="empty">
- <noData></noData>
- </template>
- </el-table>
- </div>
- <center style="padding: 20px 0;">
- <el-pagination
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :page-sizes="[10, 20, 50, 100]"
- layout="total, sizes, prev, pager, next"
- :current-page="formData.page"
- :page-size="formData.page_size"
- :total="total">
- </el-pagination>
- </center>
- </div>
- <el-drawer
- :custom-class="'drawer_details'"
- :visible.sync="completeShow"
- wrapperClosable
- :with-header="false"
- size="500px">
- <div class="details_title">完成任务</div>
- <div class="details_content">
- <el-form :model="detail_form" ref="detail_form" label-width="80px">
- <el-form-item label="任务备注" prop="remark" :rules="[{ required: true, message: '请填写任务备注(限20字)', trigger: 'blur' }]">
- <el-input v-model="detail_form.remark" type="textarea" max="20"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button @click="resetForm('detail_form')">取消</el-button>
- <el-button type="primary" @click="onSubmit('detail_form')">提交</el-button>
- </el-form-item>
- </el-form>
- </div>
- </el-drawer>
- <!-- 详情弹窗 -->
- <taskDetailsPopup :visible.sync="showDetailPopup" v-if="showDetailPopup" :id="detailId" :title="'任务详情'"></taskDetailsPopup>
- </div>
- </template>
- <script>
- import noData from '@/components/noData';
- import taskDetailsPopup from '@/views/common/taskDetailsPopup'
- export default {
- name: 'my_task',
- data() {
- return {
- active: 'running',
- tabsOption: [
- { label: '待完成', name: 'running' },
- { label: '待审批', name: 'complete' },
- { label: '已审批', name: 'reviewed' },
- ],
- list: [],
- loading: false,
- total: null,
- sort:[{id: 1,code: 'expire',name: '按截止时间'}, {id: 2,code: 'publish',name: '按发布时间'}],
- point_type: null,
- detail_form:{
- id: '',
- remark: ''
- },
- formData: {
- status: "running",
- pt_id: 0,
- sort: 'publish',
- today: '0',
- page: 1,
- page_size: 10,
- },
- completeShow: false,
- showDetailPopup: false,
- detailId: null,
- showDetailPopup: false,
- showRepetitiveTasksPopup: false,
- showRewardTaskDetailsPopup: false
- }
- },
- components: {taskDetailsPopup,noData},
- watch:{
- 'formData.pt_id'(val){
- this.get_list()
- },
- 'formData.sort'(val){
- this.get_list()
- },
- 'formData.status'(val){
- this.formData.page = 1
- this.formData.pt_id = 0
- this.formData.sort = 'expire'
- this.list = []
- this.get_list()
- }
- },
- mounted() {
- this.get_list()
- this.point_type = this.getPointType()
- },
- methods: {
- // 点击完成
- completeBtn(data){
- this.detail_form.id = data.id
- this.completeShow = true
- },
- //提交完成任务
- onSubmit(formName){
- this.$refs[formName].validate((valid) => {
- if (valid) {
- let self = this
- let data = {
- work_id: self.detail_form.id,
- progress: '100',
- remark: self.detail_form.remark,
- state:'1'
- }
- self.$axios('post','/api/integral/work',data).then(res => {
- if (res.data.code == 1) {
- self.$message.success(res.data.msg);
- self.$refs[formName].resetFields();
- self.completeShow = false
- self.get_list()
- } else {
- self.$message.error(res.data.msg);
- }
- })
- }
- });
- },
- //重置表单
- resetForm(formName){
- this.$refs[formName].resetFields();
- this.completeShow = false
- },
- getPointType(){
- let point = window.plus?JSON.parse(puls.storage.getItem('types')):JSON.parse(localStorage.getItem('types'))
- // point.splice(0,1)
- point.unshift({code: "AF",id: 0,name: "全部"})
- return point
- },
- // 页码变更
- handleCurrentChange(val) {
- this.formData.page = val
- this.get_list()
- },
- handleSizeChange(val){
- this.formData.page_size = val
- this.get_list()
- },
- openDetail(row){
- this.detailId = parseInt(row.id)
- this.showDetailPopup = true
- },
- get_list(){
- let self = this
- self.loading = true
- let params = JSON.parse(JSON.stringify(this.formData))
- if (params.pt_id == 0) {
- delete params.pt_id
- }
- self.$axios('get','/api/integral/work/list',params).then((res) => {
- if (res.data.code == 1) {
- self.list = res.data.data.list
- self.total = res.data.data.total
- }else{
- self.$message.error(res.data.data.msg)
- }
- }).finally(() => {
- self.loading = false
- })
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .box{
- min-height: calc(100vh - 184px);
- min-width: 800px;
- background-color: #fff;
- padding: 20px;
- }
- ::v-deep .el-table tr:hover{
- cursor:pointer
- }
- .details_content {
- padding: 20px;
- height: calc(100vh - 60px);
- overflow: auto;
- .row_title {
- position: relative;
- margin: 0 0 20px 0;
- padding-top: 12px;
- font-size: 16px;
- color: #303133;
- line-height: 22px;
- }
- .row_title:before {
- position: absolute;
- top: 0;
- content: ' ';
- width: 100%;
- border-top: 1px #f8f8f8 solid;
- }
- .el-row {
- margin-bottom: 10px;
- font-size: 14px;
- .el-col-4 {
- color: #606266;
- }
- }
- }
- .details_title {
- font-size: 18px;
- padding: 20px;
- border-bottom: 1px #efefef solid;
- }
- </style>
|