<template>
|
<a-drawer
|
:title='title'
|
:width='drawerWidth'
|
@close='handleCancel'
|
:visible='visible'
|
:confirmLoading='confirmLoading'>
|
|
<div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
|
<a-spin :spinning='confirmLoading'>
|
<a-form-model ref='form' :model='model' :rules='validatorRules'>
|
|
<a-form-model-item label='任务类型' :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
<a-radio-group @change='onChangeMenuType' v-model='model.menuType'>
|
<a-radio :disabled='disableEdit' :value='0'>一级任务</a-radio>
|
<a-radio :disabled='disableEdit' :value='1'>子任务</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
label='任务名称'
|
prop='xmhj'
|
hasFeedback>
|
<a-input placeholder='请输入任务名称' v-model='model.xmhj' :readOnly='disableSubmit' />
|
</a-form-model-item>
|
|
|
<a-form-model-item
|
v-show='model.menuType!=0'
|
label='上级菜单'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
:validate-status='validateStatus'
|
:hasFeedback='true'
|
:required='true'>
|
<span slot='help'>{{ validateStatus == 'error' ? '请选择上级菜单' : ' ' }}</span>
|
<a-tree-select
|
style='width:100%'
|
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
|
:treeData='treeData'
|
v-model='model.pid'
|
placeholder='请选择父级菜单'
|
:disabled='diasableTree'
|
@change='handleParentIdChange'>
|
</a-tree-select>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='qssj'
|
label='起始时间'>
|
<a-date-picker
|
style='width: 100%'
|
placeholder='请选择起始时间'
|
v-model='model.qssj'
|
:format='dateFormat'
|
:readOnly='disableSubmit'
|
@change='chooseBegTime'
|
:getCalendarContainer='node => node.parentNode' />
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='yjwcsj'
|
label='预计完成时间'>
|
<a-date-picker
|
style='width: 100%'
|
placeholder='请选择预计完成时间'
|
v-model='model.yjwcsj'
|
:format='dateFormat'
|
:readOnly='disableSubmit'
|
@change='chooseFinTime'
|
:getCalendarContainer='node => node.parentNode' />
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
label='持续时间'>
|
<a-input placeholder='请输入持续天数' v-model='model.cxsj' :readOnly='disableSubmit' />
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
label='实际完成时间'>
|
<a-date-picker
|
style='width: 100%'
|
placeholder='实际完成时间'
|
v-model='model.sjwcsj'
|
:format='dateFormat'
|
:readOnly='disableSubmit'
|
/>
|
</a-form-model-item>
|
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
label='完成进度'>
|
|
<a-radio-group v-model='model.wcjd'>
|
<a-radio :value=0>未完成</a-radio>
|
<a-radio :value=1>已完成</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
label='资源名称'>
|
<!-- <j-select-user-by-dep placeholder='请选择资源名称' v-model='model.zymc' :multi='true'
|
:trigger-change='false'></j-select-user-by-dep>-->
|
<j-select-multi-dep-user placeholder='请选择资源名称' v-model='model.zymc' />
|
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='sortNo'
|
label='排序'>
|
<a-input-number placeholder='请输入菜单排序' v-model='model.sortNo' style='width: 200px'
|
:readOnly='disableSubmit' />
|
<a-input-number v-show='false' placeholder='项目id' v-model='model.pro' style='width: 200px'
|
:readOnly='disableSubmit' />
|
</a-form-model-item>
|
|
|
</a-form-model>
|
|
<!-- 选择图标 -->
|
|
</a-spin>
|
<a-row :style="{textAlign:'right'}">
|
<a-button :style="{marginRight: '8px'}" @click='handleCancel'>
|
关闭
|
</a-button>
|
<a-button :disabled='disableSubmit' @click='handleOk' type='primary'>确定</a-button>
|
</a-row>
|
</div>
|
</a-drawer>
|
</template>
|
|
<script>
|
import { queryLinkList, addLink, editLink } from '@/api/pro'
|
import JSelectUserByDepModal from '@/components/jeecgbiz/modal/JSelectUserByDepModal'
|
import moment from 'moment'
|
import JSelectMultiDepUser from '@comp/jeecgbiz/JSelectMultiDepUser'
|
|
export default {
|
name: 'linkModal',
|
props: {
|
projectId: {
|
type: String
|
}
|
},
|
components: {
|
JSelectMultiDepUser,
|
JSelectUserByDepModal
|
},
|
data() {
|
return {
|
drawerWidth: 700,
|
treeData: [],
|
title: '操作',
|
visible: false,
|
disableSubmit: false,
|
disableEdit: false,
|
model: {},
|
dateFormat: 'YYYY-MM-DD',
|
show: true,//根据菜单类型，动态显示隐藏表单元素
|
menuLabel: '菜单名称',
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
confirmLoading: false,
|
|
validateStatus: ''
|
}
|
},
|
computed: {
|
diasableTree: function() {
|
if (this.disableSubmit | this.disableEdit) {
|
return true
|
}
|
return false
|
},
|
validatorRules: function() {
|
return {
|
xmhj: [{ required: true, message: '请输入项目环节!' }],
|
qssj: [{ required: this.show, message: '请选择起始时间!' }],
|
yjwcsj: [{ required: this.show, message: '请选择预计完成时间!' }],
|
cxsj: [{ required: true, message: '请输入持续时间!' }],
|
sjwcsj: [{ required: true, message: '请选择实际完成时间!' }],
|
wcjd: [{ required: true, message: '请选择完成进度!' }],
|
sortNo: [{ required: true, message: '请输入排序!' }]
|
}
|
}
|
},
|
created() {
|
},
|
methods: {
|
moment,
|
loadTree() {
|
var that = this
|
console.log({ pro: this.projectId })
|
queryLinkList({ pro: this.projectId }).then((res) => {
|
if (res.success) {
|
console.log(res)
|
that.treeData = []
|
let treeList = res.result
|
for (let a = 0; a < treeList.length; a++) {
|
let temp = treeList[a]
|
temp.isLeaf = temp.leaf
|
that.treeData.push(temp)
|
}
|
}
|
})
|
},
|
add() {
|
//初始化默认值
|
this.edit({ sortNo: 1.0, pro: this.projectId, leaf: true })
|
},
|
edit(record) {
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
if (record.pid) {
|
record.menuType = 1
|
|
} else {
|
record.menuType = 0
|
}
|
|
this.model = Object.assign({}, record)
|
|
//根据菜单类型，动态展示页面字段
|
console.log('record: ', record)
|
this.menuLabel = this.model.menuType == 2 ? '按钮/权限' : '菜单名称'
|
|
this.visible = true
|
this.loadTree()
|
},
|
chooseBegTime(date, datestr) {
|
if (!this.model.yjwcsj) {
|
return
|
}
|
let yjwcsj = this.model.yjwcsj
|
|
if (typeof this.model.yjwcsj == 'object') {
|
|
yjwcsj = this.model.yjwcsj.format('YYYY-MM-DD')
|
}
|
var date1 = new Date(datestr)
|
var date2 = new Date(yjwcsj)
|
|
console.info(yjwcsj)
|
console.info(date)
|
console.info(datestr)
|
|
var diffTime = date2.getTime() - date1.getTime()
|
var diffDay = diffTime / (1000 * 3600 * 24)
|
console.info(diffDay)
|
if(diffTime < 0){
|
return
|
}
|
this.model.cxsj = diffDay +1
|
|
},
|
chooseFinTime(date, datestr) {
|
if (!this.model.qssj) {
|
return
|
}
|
let qssj = this.model.qssj
|
if (typeof this.model.qssj == 'object') {
|
qssj = this.model.qssj.format('YYYY-MM-DD')
|
}
|
var date1 = new Date(qssj)
|
var date2 = new Date(datestr)
|
console.info(qssj)
|
console.info(datestr)
|
var diffTime = date2.getTime() - date1.getTime()
|
var diffDay = diffTime / (1000 * 3600 * 24)
|
console.info(diffDay)
|
if(diffTime < 0){
|
return
|
}
|
this.model.cxsj = diffDay + 1
|
|
},
|
close() {
|
this.$emit('close')
|
this.disableSubmit = false
|
this.visible = false
|
this.$refs.form.resetFields()
|
},
|
handleOk() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
//编辑避免错误设置
|
|
if (this.model.id) {
|
if (this.model.id == this.model.pid) {
|
this.$message.error('错误设置！')
|
return false
|
}
|
}
|
|
if (this.model.sjwcsj) this.model.sjwcsj = moment(new Date(this.model.sjwcsj)).format('YYYY-MM-DD')
|
if (this.model.qssj) this.model.qssj = moment(new Date(this.model.qssj)).format('YYYY-MM-DD')
|
if (this.model.yjwcsj) this.model.yjwcsj = moment(new Date(this.model.yjwcsj)).format('YYYY-MM-DD')
|
|
|
if ((this.model.menuType == 1) && !this.model.pid) {
|
that.validateStatus = 'error'
|
that.$message.error('请检查你填的类型以及信息是否正确！')
|
return
|
} else {
|
that.validateStatus = 'success'
|
}
|
that.confirmLoading = true
|
let obj
|
if (!this.model.id) {
|
obj = addLink(this.model)
|
} else {
|
obj = editLink(this.model)
|
}
|
obj.then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok')
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
validateNumber(rule, value, callback) {
|
if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
|
callback()
|
} else {
|
callback('请输入正整数!')
|
}
|
},
|
|
onChangeMenuType(e) {
|
|
this.show = true
|
this.menuLabel = '菜单名称'
|
|
this.$nextTick(() => {
|
/* this.$refs.form.validateField(['url', 'component'])*/
|
})
|
},
|
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
handleParentIdChange(value) {
|
if (!value) {
|
this.validateStatus = 'error'
|
} else {
|
this.validateStatus = 'success'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
