是小王呀\24601
6 months ago
2 changed files with 368 additions and 2 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