|
|
|
@ -1,36 +1,254 @@ |
|
|
|
<template> |
|
|
|
<!-- 新建任务 --> |
|
|
|
<div class=''> |
|
|
|
<el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr" :limit="1" |
|
|
|
:accept="'.xlsx'" :with-credentials="true" :show-file-list="false" :auto-upload="true" |
|
|
|
:on-success="handleExcelSuccess" :before-upload="beforeExcelUpload"> |
|
|
|
<template #trigger> |
|
|
|
<el-button type="primary">上传报表模板</el-button> |
|
|
|
</template> |
|
|
|
</el-upload> |
|
|
|
<div class="g-add"> |
|
|
|
<div class='card' :style="{ height: tableHeight }"> |
|
|
|
<div class="flex title"> |
|
|
|
<h3>新建任务</h3> |
|
|
|
<el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button> |
|
|
|
</div> |
|
|
|
<el-form :model="form" label-width="120px" :rules="dataRule" ref="dataForm"> |
|
|
|
<el-form-item prop="theme" label="任务主题"> |
|
|
|
<el-input v-model="form.theme" placeholder="请输入内容" clearable class="cell-width-1"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="任务类型" prop="type"> |
|
|
|
<el-select v-model.trim="form.type" placeholder="请选择" size="small" clearable class="cell-width-1"> |
|
|
|
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="任务周期" prop="cycle"> |
|
|
|
<el-radio-group v-model.trim="form.cycle" @change="handleChangeCycle"> |
|
|
|
<el-radio label="once">一次性</el-radio> |
|
|
|
<el-radio label="week">每周</el-radio> |
|
|
|
<!-- <el-radio label="halfAMonth">每半月</el-radio> |
|
|
|
<el-radio label="month">每月</el-radio> |
|
|
|
<el-radio label="quarter">每季度</el-radio> --> |
|
|
|
</el-radio-group> |
|
|
|
<span>（说明：当任务周期选择每周/每月/每半月/每季度时，系统会于每个时间阶段的第一天自动创建阶段性子任务）</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="完成时限" prop="timeLimit" v-if="form.cycle"> |
|
|
|
<template v-if="form.cycle === 'once'"> |
|
|
|
<el-date-picker v-model="form.timeLimit" type="datetime" placeholder="选择日期时间"> |
|
|
|
</el-date-picker> |
|
|
|
</template> |
|
|
|
<template v-if="form.cycle === 'week'"> |
|
|
|
<el-select v-model.trim="form.week" placeholder="请选择" size="small" clearable |
|
|
|
class="cell-width-1" style="margin-left: 10px;"> |
|
|
|
<el-option v-for="item in weekList" :key="item.value" :label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-time-picker class="cell-width-1" v-model="form.timeLimit" placeholder="选择时间" style="margin-left: 10px;"> |
|
|
|
</el-time-picker> |
|
|
|
</template> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="分发人员" prop="distributionPersonnel"> |
|
|
|
<el-cascader class="u-item-width-normal" size="small" ref="myCascader" v-model="cascaderAgencyId" |
|
|
|
@change="handleChangeAgency" :options="orgOptions" :props="orgOptionProps" |
|
|
|
:show-all-levels="false" clearable></el-cascader> |
|
|
|
<el-select v-model.trim="form.distributionPersonnel" placeholder="请选择" size="small" clearable |
|
|
|
@remove-tag="removeTag" multiple class="cell-width-1" collapse-tags style="margin-left: 10px;" |
|
|
|
@change="changeTag" c> |
|
|
|
<el-option v-for="item in allStafflist" :key="item.value" :label="item.name" |
|
|
|
:value="item.staffId"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="`已选（${selfTag.length}）人`" v-if="selfTag.length != 0"> |
|
|
|
<div> |
|
|
|
<el-tag v-for="tag in selfTag" :key="tag.staffId" closable @close="removeTag(tag)" |
|
|
|
style="margin-right: 10px;"> |
|
|
|
<span> {{ tag.name }}</span> |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="上传模板" prop="templateUrl"> |
|
|
|
<el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr" |
|
|
|
v-if="!form.templateUrl" :limit="1" :accept="'.xlsx'" :with-credentials="true" |
|
|
|
:show-file-list="false" :auto-upload="true" :on-success="handleExcelSuccess" |
|
|
|
:before-upload="beforeExcelUpload"> |
|
|
|
<template #trigger> |
|
|
|
<el-button type="primary">上传报表模板</el-button> |
|
|
|
</template> |
|
|
|
</el-upload> |
|
|
|
<section v-else class="upload"> |
|
|
|
<img :src="require(`@/assets/images/index/Excel.png`)" alt=""> |
|
|
|
<span>{{ fileName }}</span> |
|
|
|
<el-button type="text" @click="removeFile(file)" style="margin-left: 16px;"> 删除</el-button> |
|
|
|
</section> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="任务要求" prop="taskRequirements" style="display: block"> |
|
|
|
<el-input class="cell-width-2" type="textarea" maxlength="500" show-word-limit :rows="5" |
|
|
|
placeholder="请输入事件内容，不超过500字" v-model.trim="form.taskRequirements"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div class="div-btn"> |
|
|
|
<el-button style="margin-left: 10px" size="small" class="diy-button--white" @click="handelClickBack">取 |
|
|
|
消</el-button> |
|
|
|
<el-button style="margin-left: 20px" type="primary" size="small" |
|
|
|
@click="handleClickSave">发布任务</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="showTemplate"> |
|
|
|
<ExcelTemplateConfirmation :showTemplate="showTemplate" :fileUrl="fileUrl"/> |
|
|
|
<ExcelTemplateConfirmation :showTemplate="showTemplate" :fileUrl="form.templateUrl" :fileName="fileName" |
|
|
|
@handelHideTemplate="handelHideTemplate" @saveLuckysheetJson="getSheetJson" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import ExcelTemplateConfirmation from './excel-template-confirmation.vue'; |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
uploadUlr:window.SITE_CONFIG["apiURL"] + |
|
|
|
cascaderAgencyId: [], |
|
|
|
fileName: '', |
|
|
|
orgOptions: [], |
|
|
|
orgOptionProps: { |
|
|
|
// multiple: false, |
|
|
|
value: 'agencyId', |
|
|
|
label: 'agencyName', |
|
|
|
children: 'subAgencyList', |
|
|
|
checkStrictly: true |
|
|
|
}, uploadUlr: window.SITE_CONFIG["apiURL"] + |
|
|
|
"/oss/file/upload", |
|
|
|
fileUrl:'', |
|
|
|
showTemplate:false |
|
|
|
showTemplate: false, |
|
|
|
form: { |
|
|
|
theme: '',//任务主题 |
|
|
|
type: '1',//任务类型 |
|
|
|
cycle: 'once',//任务周期 |
|
|
|
timeLimit: '',//完成时限 |
|
|
|
week: '',//周 |
|
|
|
distributionPersonnel: [],//分发人员 |
|
|
|
templateUrl: '',//上传模板 |
|
|
|
taskRequirements: '',//任务要求 |
|
|
|
}, |
|
|
|
dataRule: { |
|
|
|
theme: [{ required: true, message: "任务主题不能为空", trigger: "blur" },], |
|
|
|
cycle: [{ required: 'true', message: '任务周期不能为空', trigger: 'blur' }], |
|
|
|
distributionPersonnel: [{ required: 'true', message: '分发人员不能为空', trigger: 'blur' }], |
|
|
|
templateUrl: [{ required: 'true', message: '模板不能为空', trigger: 'blur' }], |
|
|
|
timeLimit: [{ required: 'true', message: '完成时限不能为空', trigger: 'blur' }], |
|
|
|
}, |
|
|
|
typeList: [ |
|
|
|
{ |
|
|
|
label: '数据提报', |
|
|
|
value: '1' |
|
|
|
} |
|
|
|
], |
|
|
|
weekList: [ |
|
|
|
{ |
|
|
|
label: '每周一', |
|
|
|
value: '1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '每周二', |
|
|
|
value: '2' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '每周三', |
|
|
|
value: '3' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '每周四', |
|
|
|
value: '4' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '每周五', |
|
|
|
value: '5' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '每周六', |
|
|
|
value: '6' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '每周日', |
|
|
|
value: '7' |
|
|
|
} |
|
|
|
], |
|
|
|
// workPersonnelList: [], |
|
|
|
allStafflist: [], |
|
|
|
selfTag: [], |
|
|
|
sarr: [], |
|
|
|
agencyId: '', |
|
|
|
agencylevel: '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { }, |
|
|
|
methods: { |
|
|
|
async handleChangeAgency(val) { |
|
|
|
this.sarr = [] |
|
|
|
this.getLastItem( |
|
|
|
this.orgOptions, |
|
|
|
val, |
|
|
|
"agencyId" |
|
|
|
); |
|
|
|
this.agencylevel = this.sarr[this.sarr.length - 1].level; |
|
|
|
this.agencyId = this.sarr[this.sarr.length - 1].agencyId; |
|
|
|
this.getStafflist() |
|
|
|
}, |
|
|
|
getLastItem(list, vals, key) { |
|
|
|
let LIST = list || []; |
|
|
|
for (let item of LIST) { |
|
|
|
for (let i of vals) { |
|
|
|
if (item[key] === i) { |
|
|
|
this.sarr.push(item); |
|
|
|
} else { |
|
|
|
this.getLastItem(item.subAgencyList, vals, key); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
getStafflist() { |
|
|
|
let parms = { |
|
|
|
orgId: this.agencyId, |
|
|
|
orgType: 'agency', |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 100, |
|
|
|
}; |
|
|
|
this.$http.post("data/aggregator/org/stafflist", parms).then((resp) => { |
|
|
|
// this.workPersonnelList = resp.data.data.staffList; |
|
|
|
if (resp.data.data.staffList) { |
|
|
|
this.allStafflist = this.allStafflist.concat(resp.data.data.staffList) |
|
|
|
console.log(this.allStafflist); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getOrgTreeList() { |
|
|
|
this.$http |
|
|
|
.post('/gov/org/customeragency/agencygridtree', {}) |
|
|
|
.then(({ data: res }) => { |
|
|
|
if (res.code !== 0) { |
|
|
|
return this.$message.error(res.msg) |
|
|
|
} else { |
|
|
|
this.orgOptions = [] |
|
|
|
this.orgOptions.push(res.data) |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
return this.$message.error('网络错误') |
|
|
|
}) |
|
|
|
}, |
|
|
|
handelClickBack() { |
|
|
|
this.$emit('handleShowPage') |
|
|
|
}, |
|
|
|
handelHideTemplate() { |
|
|
|
this.showTemplate = false; |
|
|
|
this.fileUrl = ''; |
|
|
|
}, |
|
|
|
getSheetJson(val) { |
|
|
|
this.luckysheetJson = val.sheets; |
|
|
|
this.showTemplate = false; |
|
|
|
}, |
|
|
|
handleExcelSuccess(e) { |
|
|
|
if(e.code === 0){ |
|
|
|
if (e.code === 0) { |
|
|
|
this.showTemplate = true; |
|
|
|
this.fileUrl = e.data.url |
|
|
|
this.form.templateUrl = e.data.url |
|
|
|
} |
|
|
|
}, |
|
|
|
beforeExcelUpload(file) { |
|
|
|
@ -47,6 +265,7 @@ export default { |
|
|
|
if (!isLt1M) { |
|
|
|
this.$message.error("上传文件大小不能超过 10MB!"); |
|
|
|
} |
|
|
|
this.fileName = file.name |
|
|
|
return fileType && isLt1M; |
|
|
|
}, |
|
|
|
handleFileChange(file, newFileList) { |
|
|
|
@ -63,12 +282,105 @@ export default { |
|
|
|
return; |
|
|
|
} |
|
|
|
}, |
|
|
|
removeTag(val) { |
|
|
|
const valueToRemove = val.staffId || val[0]; |
|
|
|
this.form.distributionPersonnel = this.form.distributionPersonnel.filter(item => item != valueToRemove); |
|
|
|
this.selfTag = this.workPersonnelList.filter(item => this.form.distributionPersonnel.includes(item.staffId)); |
|
|
|
}, |
|
|
|
changeTag() { |
|
|
|
this.selfTag = this.allStafflist.filter(item => this.form.distributionPersonnel.includes(item.staffId)); |
|
|
|
}, |
|
|
|
handleChangeCycle(val){ |
|
|
|
if(val === 'once'){ |
|
|
|
this.form.week = ''; |
|
|
|
this.form.timeLimit = ''; |
|
|
|
}else{ |
|
|
|
this.form.timeLimit = ''; |
|
|
|
} |
|
|
|
}, |
|
|
|
handleClickSave() { |
|
|
|
console.log(this.form, 'addForm'); |
|
|
|
this.$refs['dataForm'].validate(valid => { |
|
|
|
if (valid) { |
|
|
|
this.saveLuckysheet() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
async saveLuckysheet() { |
|
|
|
delete this.luckysheetJson[0].data |
|
|
|
console.log(this.luckysheetJson); |
|
|
|
const { data, code, msg } = await requestPost(`/actual/base/luckySheet/workbook/createByJson?fileName=${this.fileName}`, this.luckysheetJson) |
|
|
|
if (code === 0) { |
|
|
|
console.log(data, '新建成功'); |
|
|
|
|
|
|
|
} else { |
|
|
|
console.log(msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
removeFile() { |
|
|
|
this.form.templateUrl = ''; |
|
|
|
this.fileName = ''; |
|
|
|
this.luckysheetJson = {} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getOrgTreeList() |
|
|
|
}, |
|
|
|
components: { ExcelTemplateConfirmation }, |
|
|
|
computed: { |
|
|
|
tableHeight() { |
|
|
|
return (this.clientHeight - 140) + 'px' |
|
|
|
|
|
|
|
}, |
|
|
|
...mapGetters(['clientHeight', 'resolution']), |
|
|
|
}, |
|
|
|
components: {ExcelTemplateConfirmation}, |
|
|
|
computed: {}, |
|
|
|
watch: {}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped></style> |
|
|
|
<style lang='scss' scoped> |
|
|
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|
|
|
|
|
|
|
.title { |
|
|
|
position: relative; |
|
|
|
margin: 0 16px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
width: 4px; |
|
|
|
height: 16px; |
|
|
|
background: #5493ff; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 16px; |
|
|
|
left: -16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 5px; |
|
|
|
margin: 10px 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.div-btn { |
|
|
|
position: absolute; |
|
|
|
bottom: 30px; |
|
|
|
right: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.cell-width-2 { |
|
|
|
width: 500px; |
|
|
|
} |
|
|
|
|
|
|
|
.upload { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
margin-right: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
