3 changed files with 385 additions and 51 deletions
@ -0,0 +1,360 @@ |
|||||
|
<template> |
||||
|
<div class="g-main"> |
||||
|
<div v-show="pageType == 'list'"> |
||||
|
<div class="m-search"> |
||||
|
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
||||
|
<div> |
||||
|
<!-- <el-form-item label="发布组织" prop="orgId"> |
||||
|
<el-cascader class="u-item-width-normal" size="small" ref="myCascader" v-model.trim="formData.orgId" |
||||
|
:options="orgOptions" :props="orgOptionProps" :show-all-levels="false" @change="handleChangeAgency" |
||||
|
clearable></el-cascader> |
||||
|
</el-form-item> --> |
||||
|
<el-form-item label="任务主题" prop="taskTitle"> |
||||
|
<el-input v-model.trim="formData.taskTitle" class="u-item-width-normal" size="small" clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="创建时间" prop="startTime"> |
||||
|
<el-date-picker v-model.trim="formData.startTime" :picker-options="startPickerOptions" |
||||
|
class="u-item-width-daterange" size="small" type="date" value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
value="yyyy-MM-dd" placeholder="开始时间"> |
||||
|
</el-date-picker> |
||||
|
<span class="u-data-tag">至</span> |
||||
|
<el-date-picker v-model.trim="formData.endTime" :picker-options="endPickerOptions" |
||||
|
class="u-item-width-daterange u-data-tag" size="small" type="date" value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
value="yyyy-MM-dd" placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="状态" prop="taskState"> |
||||
|
<el-select class="u-item-width-normal" v-model.trim="formData.taskState" placeholder="请选择" size="small" |
||||
|
clearable> |
||||
|
<el-option v-for="item in statusArray" :key="item.value" :label="item.label" :value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="创建人" prop="createdBy"> |
||||
|
<el-select class="u-item-width-normal" v-model.trim="formData.createdBy" placeholder="请选择" size="small" |
||||
|
clearable :disabled="manager"> |
||||
|
<el-option v-for="item in createdByArray" :key="item.staffId" :label="item.name" :value="item.staffId"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-col :span="24" align="right"> |
||||
|
<el-button style="margin-left: 30px" size="small" type="primary " @click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left: 10px" size="small" class="diy-button--white" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="m-table" > |
||||
|
<div class="div_btn"> |
||||
|
<el-button size="small" type="primary " @click="handleAdd">新增</el-button> |
||||
|
</div> |
||||
|
<el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="maxTableHeight"> |
||||
|
<el-table-column label="" fixed="left" type="selection" align="center" width="50" /> |
||||
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
||||
|
|
||||
|
<el-table-column prop="agencyName" align="center" label="发布组织" :show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="taskTitle" label="任务主题" min-width="140" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column prop="totalNum" label="分发人数" align="center" :show-overflow-tooltip="true" width="100"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="taskPeriod" align="center" width="100" label="任务周期" :show-overflow-tooltip="true"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.taskPeriod === 'once' ? '一次性' : scope.row.taskPeriod === 'weekly' ? '每周' : scope.row.taskPeriod |
||||
|
=== 'halfMonth'?'每半月': scope.row.taskPeriod === 'month'?'每月':'每季度'}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="resolveNum" align="center" width="110" label="当前任务进度" :show-overflow-tooltip="true"> |
||||
|
<template slot-scope="scope" > |
||||
|
<div style="color: blue;"> |
||||
|
{{ scope.row.resolveNum }}/{{ scope.row.totalNum }} |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="taskStateName" align="center" width="100" label="任务状态" :show-overflow-tooltip="true"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.taskStateName |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="createByName" align="center" width="100" label="创建人" :show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="createdTime" align="center" width="140" :show-overflow-tooltip="true" label="创建时间"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column fixed="right" label="操作" align="center" width="200px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button @click=" handleInfo(scope.row)" type="text" size="small">查看</el-button> |
||||
|
<!-- 取消操作需要做密码校验 --> |
||||
|
<el-button v-if="scope.row.taskState == 'deal'" @click="handleCancel(scope.row)" type="text" size="small" |
||||
|
class="">取消</el-button> |
||||
|
<!-- 取消后可进行删除 --> |
||||
|
<el-button v-if="scope.row.taskState !== 'deal'" @click="handleDel(scope.row)" type="text" size="small" |
||||
|
class="">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div> |
||||
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" |
||||
|
layout="sizes, prev, pager, next, total" :total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="pageType == 'info'"> |
||||
|
<excel-info @handleShowPage="handleShowPage" :taskId=task></excel-info> |
||||
|
</div> |
||||
|
<div v-if="pageType == 'add'"> |
||||
|
<excel-add @handleShowPage="handleShowPage"></excel-add> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import excelInfo from "./cpts/excel-info"; |
||||
|
import excelAdd from "./cpts/excel-add"; |
||||
|
|
||||
|
export default { |
||||
|
components: { excelInfo, excelAdd }, |
||||
|
|
||||
|
data() { |
||||
|
let endDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now(); |
||||
|
if (this.formData.startTime) { |
||||
|
let startTime = new Date(this.formData.startTime); |
||||
|
return ( |
||||
|
time.getTime() > nowData || |
||||
|
time.getTime() < startTime || |
||||
|
time.getTime() === startTime |
||||
|
); |
||||
|
} else { |
||||
|
return time.getTime() > nowData; |
||||
|
} |
||||
|
}; |
||||
|
let startDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now(); |
||||
|
return time.getTime() > nowData; |
||||
|
}; |
||||
|
return { |
||||
|
task: "", |
||||
|
pageType: "list", // 列表list 新增add 详情info |
||||
|
tableData: [], |
||||
|
formData: { |
||||
|
orgId: '',//组织Id |
||||
|
taskTitle: '',//任务主题 |
||||
|
taskState: '',//任务类型 |
||||
|
startTime: '',//开始时间 |
||||
|
endTime: '',//结束时间 |
||||
|
createdBy: ''//创建人 |
||||
|
}, |
||||
|
pageNo: 1, |
||||
|
pageSize: window.localStorage.getItem("pageSize") || 20, |
||||
|
total: 1, |
||||
|
sarr: [], |
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate, |
||||
|
}, |
||||
|
startPickerOptions: { |
||||
|
disabledDate: startDisabledDate, |
||||
|
}, |
||||
|
searchH: 180, |
||||
|
createdByArray: [], |
||||
|
statusArray: [ |
||||
|
{ |
||||
|
label: '已完成', |
||||
|
value: 'resolved' |
||||
|
}, |
||||
|
{ |
||||
|
label: '已取消', |
||||
|
value: 'cancel', |
||||
|
}, |
||||
|
{ |
||||
|
label: '进行中', |
||||
|
value: 'deal', |
||||
|
} |
||||
|
], |
||||
|
manager: false |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
maxTableHeight() { |
||||
|
const h = this.clientHeight - this.searchH - 200 + this.iframeHeight; |
||||
|
const _h = this.clientHeight - 200 - this.searchH; |
||||
|
return this.$store.state.inIframe ? h : _h; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "iframeHeight"]), |
||||
|
}, |
||||
|
watch: { |
||||
|
}, |
||||
|
async mounted() { |
||||
|
const user = this.$store.state.user; |
||||
|
await this.getStafflist() |
||||
|
if (user) { |
||||
|
if (user.roleList.findIndex(item => item === "manager") !== -1) { |
||||
|
this.manager = false; |
||||
|
} else { |
||||
|
this.manager = true; |
||||
|
this.formData.createdBy = this.createdByArray.find(item => item.mobile === user.phone).staffId |
||||
|
} |
||||
|
} |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
methods: { |
||||
|
async handleCancel(item) { |
||||
|
let parms = { |
||||
|
id: item.id, |
||||
|
}; |
||||
|
this.$confirm("取消之后无法恢复，确认取消？", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
requestPost('/actual/base/communityOneTablePublish/cancelTask', parms).then(res => { |
||||
|
if (res.code == 0) { |
||||
|
this.pageNo = 1 |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
if (err == "cancel") { |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
async getStafflist() { |
||||
|
let parms = { |
||||
|
orgId: this.$store.state.user.agencyId, |
||||
|
orgType: 'agency', |
||||
|
pageNo: 1, |
||||
|
pageSize: 100, |
||||
|
}; |
||||
|
let { data, code } = await requestPost('/data/aggregator/org/stafflist', parms) |
||||
|
if (code === 0) { |
||||
|
this.createdByArray = data.staffList; |
||||
|
} |
||||
|
}, |
||||
|
handleShowPage() { |
||||
|
this.pageType = 'list'; |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
handleAdd() { |
||||
|
this.pageType = 'add'; |
||||
|
console.log(this.pageType); |
||||
|
}, |
||||
|
handleInfo(item) { |
||||
|
console.log(item, "dkljsfdlk"); |
||||
|
this.task = item.id |
||||
|
this.pageType = 'info' |
||||
|
}, |
||||
|
getLastItem(list, vals, key) { |
||||
|
let LIST = list || []; |
||||
|
for (let item of LIST) { |
||||
|
// console.log(item[key]); |
||||
|
for (let i of vals) { |
||||
|
if (item[key] === i) { |
||||
|
this.sarr.push(item); |
||||
|
} else { |
||||
|
this.getLastItem(item.subAgencyList, vals, key); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val; |
||||
|
window.localStorage.setItem("pageSize", val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
async getTableData() { |
||||
|
const url = "/actual/base/communityOneTablePublish/page"; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
const { data, code, msg } = await requestGet(url, { |
||||
|
pageSize, |
||||
|
pageNo, |
||||
|
...formData |
||||
|
}); |
||||
|
if (code === 0) { |
||||
|
this.total = data.total || 0; |
||||
|
this.tableData = data.list |
||||
|
? data.list.map((item) => { |
||||
|
return item; |
||||
|
}) |
||||
|
: []; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
handleSearch() { |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
async handleDel(item){ |
||||
|
let parms = { |
||||
|
id: item.id, |
||||
|
}; |
||||
|
this.$confirm("删除之后无法恢复，确认删除？", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
requestPost('/actual/base/communityOneTablePublish/delete', parms).then(res => { |
||||
|
if (res.code == 0) { |
||||
|
this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
if (err == "cancel") { |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
async resetSearch() { |
||||
|
this.$refs.ref_searchform.resetFields(); |
||||
|
this.pageNo = 1; |
||||
|
const user = this.$store.state.user; |
||||
|
if (user) { |
||||
|
if (user.roleList.findIndex(item => item === "manager") !== -1) { |
||||
|
this.manager = false; |
||||
|
} else { |
||||
|
this.manager = true; |
||||
|
this.formData.createdBy = this.createdByArray.find(item => item.mobile === user.phone).staffId |
||||
|
} |
||||
|
} |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
|
||||
|
.m-search { |
||||
|
.u-item-width-normal { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue