You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

637 lines
20 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '发起任务' : '编辑任务'" :form="form"
:rules='rules' @submit="submit">
<template v-slot:name>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>任务名称
</div>
<div class="xy-table-item-content">
<el-input v-model="form.name" placeholder="请输入任务名称" clearable style="width: 400px;"></el-input>
</div>
</div>
</template>
<template v-slot:unit_type>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>任务类型:
</div>
<div class="xy-table-item-content">
<el-select v-model="form.unit_type" filterable clearable placeholder="请选择任务类型" style="width: 400px;">
<el-option v-for="item in unitTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:start_date>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>开始日期:
</div>
<div class="xy-table-item-content">
<el-date-picker style="width: 400px;" v-model="form.start_date" value-format="yyyy-MM-dd" type="date"
placeholder="选择开始日期">
</el-date-picker>
</div>
</div>
</template>
<template v-slot:end_date>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>结束日期:
</div>
<div class="xy-table-item-content">
<el-date-picker style="width: 400px;" v-model="form.end_date" value-format="yyyy-MM-dd" type="date"
placeholder="选择结束日期">
</el-date-picker>
</div>
</div>
</template>
<template v-slot:is_audit>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>是否审批:
</div>
<div class="xy-table-item-content">
<el-radio-group v-model="form.is_audit" @change='changeAudit'>
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</div>
</div>
</template>
<template v-slot:audit_admin_id v-if="form.is_audit==1">
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>审批人:
</div>
<div class="xy-table-item-content">
<el-select v-model="form.audit_admin_id" filterable clearable placeholder="请选择审批人" style="width: 400px;">
<el-option v-for="item in userdata" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:file_ids>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>附件:
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :file-list="pictureList" ref="pictureUpload"
style="width:600px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
:on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</div>
</template>
<template v-slot:content>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>说明:
</div>
<div class="xy-table-item-content">
<el-input v-model="form.content" :rows='5' type='textarea' placeholder="请输入说明" clearable
style="width:400px"></el-input>
</div>
</div>
</template>
<template v-slot:end_type>
<div class="xy-table-item">
<div class="xy-table-item-label" style="width:140px">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>任务完成要求:
</div>
<div class="xy-table-item-content" style='min-width:600px'>
<el-select style="width: 400px;" v-model="form.end_type" filterable clearable placeholder="请选择任务完成要求">
<el-option v-for="item in endTypeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:end_content>
<div class="xy-table-item">
<div class="xy-table-item-label" style="width:140px">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>任务完成详情:
</div>
<div class="xy-table-item-content">
<el-input v-model="form.end_content" :rows='5' type='textarea' placeholder="请输入任务完成详情" clearable
style="width: 400px;"></el-input>
</div>
</div>
</template>
<template v-slot:name7>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>用户类型选择:
</div>
<div class="xy-table-item-content" style="width:400px">
<el-radio-group v-model="form.name7" @change='changeName7'>
<el-radio :label="1">人员</el-radio>
<el-radio :label="2" v-if='form.type!=4'>部门</el-radio>
<el-radio :label="3" v-if='form.type!=4'>组别</el-radio>
</el-radio-group>
</div>
</div>
</template>
<template v-slot:accept_admin_ids v-if='form.name7==1'>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>
</div>
<div class="xy-table-item-content" style='min-width:600px'>
<el-transfer filterable :titles="['待选择', '已选择']" :props="{key: 'id',label: 'name'}"
:filter-method="filterMethod" :format="{ noChecked: '${total}',hasChecked: '${checked}/${total}' }"
filter-placeholder="请选择参与人员" v-model="form.accept_admin_ids" :data="userdata">
</el-transfer>
</div>
</div>
</template>
<template v-slot:accept_department_ids v-if='form.name7==2&&form.type!=4'>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>
</div>
<div class="xy-table-item-content" style='min-width:600px'>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="form.accept_department_ids" @change="handleCheckedDeptChange">
<el-checkbox @change="handleCheckedDeptSingleChange" v-for="dept in deptOptions" :label="dept.id"
:key="dept.id">{{dept.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<template v-slot:mission_groups v-if='form.name7==3&&form.type!=4'>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>
</div>
<div class="xy-table-item-content" style='min-width:600px'>
<Button type='primary' @click="mission_groups_list.push({name:'',type:1,link_id:[]})">新增组别</Button>
<div v-for="(item,index) in mission_groups_list" style='margin:10px;margin-left:0'>
<div>
<Button style="margin-right:10px" @click="mission_groups_list.splice(index,1)">删除</Button>
组别:{{item.name=mission_groups_name[index]}}
<el-radio-group v-model="item.type" @change='item.link_id=[]' style="margin:10px;margin-right:20px">
<el-radio :label="1">人员</el-radio>
<el-radio :label="2"></el-radio>
</el-radio-group>
<el-select v-if='item.type==1' v-model="item.link_id" clearable filterable multiple placeholder="请选择人员">
<el-option v-for="item in userdata" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select v-if='item.type==2' v-model="item.link_id" clearable filterable multiple placeholder="请选择部门">
<el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
Message
} from 'element-ui'
import {
getparameteritem
} from "@/api/system/dictionary.js";
import {
save,
get
} from "@/api/task/unit.js";
import {
listdept
} from "@/api/system/department.js"
import {
listCommonuser
} from "@/api/common.js"
import {
getToken
} from '@/utils/auth'
export default {
components: {
},
data() {
return {
isShow: false,
type: 'add',
id: '',
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
pictureList: [],
deptOptions: [],
checkAll: false,
isIndeterminate: true,
userdata: [],
filterMethod(query, item) {
return item.name.indexOf(query) > -1;
},
unitTypeList: [{
id: 1,
value: '专项检查'
}, {
id: 2,
value: '资料收集'
}, {
id: 3,
value: '网络安全'
}],
endTypeList: [{
id: 1,
name: '提交文字'
}, {
id: 2,
name: '提交附件'
}, {
id: 3,
name: '提交文字与附件'
}],
form: {
type: '',
name: '',
unit_type: '',
start_date: '',
end_date: '',
is_audit: 0,
audit_admin_id: '',
audit_status: 1,
file_ids: '',
content: '',
end_type: '',
end_content: '',
type: '',
name7: 1,
accept_admin_ids: [],
accept_department_ids: [],
mission_groups: []
},
mission_groups_list: [{
name: '',
type: 1,
link_id: []
}],
mission_groups_name: ['一组', '二组', '三组', '四组', '五组', '六组', '七组', '八组', '九组', '十组'],
rules: {
name: [{
required: true,
message: '请输入任务名称'
}],
start_date: [{
required: true,
message: '请选择开始时间'
}],
end_date: [{
required: true,
message: '请选择结束时间'
}],
unit_type: [{
required: true,
message: '请选择任务类型'
}]
}
}
},
created() {
this.uploadOther.token = getToken();
if (this.$route.path) {
let path = this.$route.path.split("_")
this.form.type = path[1]
}
this.loadDeptOptions()
this.loadUser()
},
methods: {
changeName7(e) {
if (e) {
this.form.accept_department_ids = []
this.form.accept_admin_ids = []
this.form.mission_groups = []
this.form.mission_groups_list = []
}
},
changeAudit(e) {
console.log("e",e)
if (e == 1) {
this.form.audit_status = 0
this.form.audit_admin_id = ''
} else {
this.form.audit_status = 1
this.form.audit_admin_id = 0
}
},
// 选择科室
loadDeptOptions() {
listdept().
then((res) => {
for (var m of res) {
m.checked = false;
}
this.deptOptions = res;
}).catch(error => {
console.log(error)
reject(error)
})
},
loadUser() {
listCommonuser({
page_size: 999
}).
then((res) => {
this.userdata = res.data ? res.data.reverse() : [];
}).catch(error => {
console.log(error)
})
},
handleCheckAllChange(val) {
let options = [];
for (var m of this.deptOptions) {
options.push(m.id);
}
this.form.accept_department_ids = val ? options : [];
this.isIndeterminate = false;
},
handleCheckedDeptSingleChange(v) {
//如果出现取消的操作 就要执行删除
console.log(v);
var that = this;
if (this.form.accept_department_ids)
that.delDeptItem();
},
//删除操作
delDeptItem() {
for (var m of this.deptOptions) {
if (this.form.accept_department_ids.indexOf(m.id) == -1) {
var d = this.form.accept_department_ids.filter(function(t) {
return t.department_id == m.id;
})
if (d.length != 0) {
delDep(d[0].id).then(response => {}).catch(error => {
console.log(error)
})
}
}
}
},
handleCheckedDeptChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.deptOptions.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.deptOptions.length;
},
async getDetail() {
const res = await get(this.id)
this.form = {
type: res?.type,
name: res?.name,
unit_type: res?.unit_type,
start_date: res?.start_date,
end_date: res?.end_date,
is_audit: res.audit_admin_id ? 1 : 0,
audit_admin_id: res.audit_admin_id ? res.audit_admin_id : '',
audit_status: res.audit_status?res.audit_status:1,
file_ids: res?.file_ids,
content: res?.content,
end_type: res?.end_type,
end_content: res?.end_content,
name7: res.accept_department_ids.length > 0 ? 2 : (res.accept_admin_ids.length > 0 ? 1 : (res
.groups.length > 0 ? 3 : 1)),
accept_admin_ids: res?.accept_admin_ids,
accept_department_ids: res?.accept_department_ids,
mission_groups: res?.groups
}
this.mission_groups_list = []
for (var g of res.groups) {
this.mission_groups_list.push({
name: g.name,
type: g.type,
link_id: g.link_id
})
}
// this.mission_groups_list = res?.mission_groups
for (var f of res.files) {
this.pictureList.push({
id: f.id,
url: f.url,
name: f.original_name
})
}
// res.guide_upload ? this.guidePictureList.push(res.guide_upload) : ''
},
submit() {
let _files = []
if (this.pictureList.length > 0) {
for (var h of this.pictureList) {
if (h.response) {
_files.push(h.response.id)
} else {
_files.push(h.id)
}
}
this.form.file_ids = _files
} else {
this.form.file_ids = []
}
if(this.form.is_audit==0){
this.form.audit_admin_id = 0
this.audit_status = 1
}else{
this.audit_status = 0
if(!this.form.audit_admin_id){
Message({
type: 'warning',
message: `请选择审批人`
})
return
}
}
// console.log("this.form",this.form)
// return
if (this.form.name7 == 3) {
if (this.mission_groups_list.length == 0) {
Message({
type: 'warning',
message: `请新增组别`
})
return
}
for (let k of this.mission_groups_list) {
if (k.link_id.length == 0) {
Message({
type: 'warning',
message: `请选择小组成员`
})
return
}
}
}
this.form.mission_groups = this.mission_groups_list
// return
if (this.type === 'add') {
save({
...this.form
}).then(res => {
Message({
type: 'success',
message: '新增任务成功'
})
this.isShow = false
this.$emit('refresh')
})
return
}
if (this.type === 'editor') {
save({
id: this.id,
...this.form
}).then(res => {
Message({
type: 'success',
message: '编辑任务成功'
})
this.isShow = false
this.$emit('refresh')
})
}
},
handleRemove(file, fileList) {
this.pictureList = fileList
},
handlesuccess(response, file, fileList) {
this.pictureList = fileList
},
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
this.pictureList = []
this.mission_groups_list = [{
name: '',
type: 1,
link_id: []
}]
this.$refs['dialog'].reset()
}
}
}
}
</script>
<style scoped lang="scss">
::v-deep .name7,::v-deep .content,
::v-deep .end_type,
::v-deep .file_ids{
flex-basis: 100%;
}
::v-deep .type {
display: none;
}
.xy-table-item-label {
width: 140px;
}
.img__delete {
transform: scale(0.8, 0.8);
position: absolute;
top: 4px;
right: 4px;
}
::v-deep .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
::v-deep .el-upload--picture-card {
font-size: 28px;
color: #8c939d;
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
text-align: center;
}
::v-deep .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
text-align: center;
}
::v-deep .avatar {
width: 80px !important;
display: block;
border-radius: 6px;
}
// ::v-deep .xy-table-item-label {
// width: 160px !important;
// }
::v-deep .el-date-editor .el-range-separator {
width: auto !important;
}
::v-deep .el-input-number .el-input__inner {
text-align: left !important;
}
.searchCompanys {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.el-input {
width: 80%
}
}
</style>