陈裕财
3 years ago
12 changed files with 316 additions and 264 deletions
-
28src/components/DateField/index.vue
-
251src/components/DateRangeField/index.vue
-
2src/main.js
-
4src/views/xm/core/components/XmIterationSelect.vue
-
193src/views/xm/core/xmIteration/XmIterationAdd.vue
-
4src/views/xm/core/xmIteration/XmIterationBox.vue
-
76src/views/xm/core/xmIteration/XmIterationEdit.vue
-
4src/views/xm/core/xmIteration/XmIterationForLinkComplex.vue
-
2src/views/xm/core/xmIteration/XmIterationInfo.vue
-
4src/views/xm/core/xmIteration/XmIterationMng.vue
-
6src/views/xm/core/xmProduct/XmProductEdit.vue
-
6src/views/xm/core/xmProject/XmProjectEdit.vue
@ -0,0 +1,251 @@ |
|||||
|
<template> |
||||
|
<div class="field-box"> |
||||
|
<el-avatar class="avater" :icon="getMyIcon(dateRange)" :style="{backgroundColor:getMyColor(dateRange)}">{{getMyAvaterInfo(dateRange)}}</el-avatar> |
||||
|
|
||||
|
<div class="field-info"> |
||||
|
<slot name="field-info" :value="dateRange"> |
||||
|
<span class="field-value">{{formatDateRange(dateRange) }} </span> |
||||
|
<slot name="label"> |
||||
|
<span class="field-label">{{label}}</span> |
||||
|
</slot> |
||||
|
</slot> |
||||
|
</div> |
||||
|
<div v-if="disabled!==true" class="my-select" name="select" :value="dateRange"> |
||||
|
|
||||
|
<el-date-picker :type="type" :style="styleObj" v-model="dateRange" :value-format="valueFormat" :format="format" |
||||
|
unlink-panels |
||||
|
:range-separator="rangeSepaSrator" |
||||
|
:start-placeholder="startPlaceholder" |
||||
|
:end-placeholder="endPlaceholder" |
||||
|
:default-range="[-30,0]" |
||||
|
@change="onDateRangeChange" |
||||
|
:picker-options="pickerOptions" |
||||
|
></el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@/common/js/util' |
||||
|
export default { |
||||
|
name: 'date-range', |
||||
|
components: { }, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
dateRange:[], |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
dateRange(){ |
||||
|
|
||||
|
}, |
||||
|
value:{ |
||||
|
deep:true, |
||||
|
handler(){ |
||||
|
this.initData(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
value: { |
||||
|
|
||||
|
}, |
||||
|
label:{ |
||||
|
type:String, |
||||
|
default:'起止时间', |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: 'daterange' |
||||
|
}, |
||||
|
startKey: { |
||||
|
type: String, |
||||
|
default: 'startTime' |
||||
|
}, |
||||
|
|
||||
|
styleObj:{ |
||||
|
typeof:Object, |
||||
|
default:function(){return { maxWidth:'100%' }} |
||||
|
}, |
||||
|
|
||||
|
endKey: { |
||||
|
type: String, |
||||
|
default: 'endTime' |
||||
|
}, |
||||
|
|
||||
|
valueFormat: { |
||||
|
type: String, |
||||
|
default: 'yyyy-MM-dd HH:mm:ss' |
||||
|
}, |
||||
|
|
||||
|
format: { |
||||
|
type: String, |
||||
|
default: 'yyyy-MM-dd' |
||||
|
}, |
||||
|
startPlaceholder: { |
||||
|
type: String, |
||||
|
default: '开始日期' |
||||
|
}, |
||||
|
|
||||
|
endPlaceholder: { |
||||
|
type: String, |
||||
|
default: '结束日期' |
||||
|
}, |
||||
|
rangeSepaSrator:{ |
||||
|
type: String, |
||||
|
default: '~' |
||||
|
}, |
||||
|
pickerOptions:{ |
||||
|
typeof:Object, |
||||
|
default:function(){return util.getPickerOptions('datarange')} |
||||
|
}, |
||||
|
autoDefault:{ |
||||
|
type:Boolean, |
||||
|
default:true, |
||||
|
}, |
||||
|
defaultRange:{ |
||||
|
type:Array, |
||||
|
default:function(){ |
||||
|
return [-15,15] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDateRange(dateRange){ |
||||
|
if(!dateRange||dateRange.length==0){ |
||||
|
return "" |
||||
|
}else{ |
||||
|
if(dateRange.length==1){ |
||||
|
return util.formatDate(new Date(dateRange[0]),this.format) |
||||
|
}else if(dateRange.length==2){ |
||||
|
return util.formatDate(new Date(dateRange[0]),this.format)+this.rangeSepaSrator+util.formatDate(new Date(dateRange[1]),this.format) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
initData(){ |
||||
|
this.dateRange=[]; |
||||
|
if(this.value instanceof Array){ |
||||
|
this.dateRange=this.value |
||||
|
}else if(this.value instanceof Object){ |
||||
|
if(this.value && this.value[this.startKey] && this.value[this.endKey]){ |
||||
|
this.dateRange=[this.value[this.startKey],this.value[this.endKey]] |
||||
|
} |
||||
|
} |
||||
|
if( !this.dateRange || this.dateRange.length===0){ |
||||
|
if(this.autoDefault===true || (this.autoDefault!==false && this.defaultRange && this.defaultRange.length==2)){ |
||||
|
var now=new Date(); |
||||
|
var start=new Date(); |
||||
|
var end=new Date(); |
||||
|
start.setTime(now.getTime() + 3600 * 1000 * 24 * this.defaultRange[0]); |
||||
|
end.setTime(now.getTime() + 3600 * 1000 * 24 * this.defaultRange[1]); |
||||
|
this.dateRange.push(util.formatDate(start,this.valueFormat)) |
||||
|
this.dateRange.push(util.formatDate(end,this.valueFormat)) |
||||
|
this.onDateRangeChange(this.dateRange); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
onDateRangeChange(dates){ |
||||
|
if(this.value && this.value instanceof Object){ |
||||
|
if(dates && dates.length===2){ |
||||
|
this.value[this.startKey]=dates[0] |
||||
|
this.value[this.endKey]=dates[1] |
||||
|
}else if(dates && dates.length===1){ |
||||
|
this.value[this.startKey]=dates[0] |
||||
|
this.value[this.endKey]=null |
||||
|
}else if(dates && dates.length===0){ |
||||
|
this.value[this.startKey]=null |
||||
|
this.value[this.endKey]=null |
||||
|
} |
||||
|
this.$emit('input',this.value) |
||||
|
}else if(this.value instanceof Array){ |
||||
|
this.$emit('input',dates) |
||||
|
} |
||||
|
this.$emit('change',dates) |
||||
|
}, |
||||
|
getMyAvaterInfo(item){ |
||||
|
if(!item||item.length==0){ |
||||
|
return "" |
||||
|
}else{ |
||||
|
return item[0] |
||||
|
} |
||||
|
}, |
||||
|
getMyColor(item){ |
||||
|
if(this.getColor){ |
||||
|
return this.getColor(item) |
||||
|
} |
||||
|
if(item && item.length>0){ |
||||
|
return util.getColor(item[0]) |
||||
|
}else{ |
||||
|
return util.getColor("") |
||||
|
} |
||||
|
}, |
||||
|
getMyIcon(item){ |
||||
|
if(this.getIcon){ |
||||
|
return this.getIcon(item) |
||||
|
}else{ |
||||
|
return "el-icon-date"; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initData(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
|
||||
|
|
||||
|
.field-box { |
||||
|
display: flex; |
||||
|
margin-right:5px; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
.avater { |
||||
|
background-color:#FF9F73; |
||||
|
} |
||||
|
|
||||
|
.field-info { |
||||
|
margin-left: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.field-value { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.field-label{ |
||||
|
font-size: 14px; |
||||
|
color: #C0C4CC; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.my-select{ |
||||
|
margin-left: 5px; |
||||
|
margin-right:5px; |
||||
|
display: none; |
||||
|
} |
||||
|
.btn{ |
||||
|
margin-top: 0px; |
||||
|
visibility:hidden; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.field-box:hover .btn{ |
||||
|
visibility: visible !important; |
||||
|
} |
||||
|
.field-box:hover .my-select{ |
||||
|
|
||||
|
margin-left: 5px; |
||||
|
display: inline; |
||||
|
} |
||||
|
.field-box:hover .field-info{ |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
@ -1,193 +0,0 @@ |
|||||
<template> |
|
||||
<section class="padding border"> |
|
||||
<el-row> |
|
||||
<!--新增界面 XmIteration 迭代定义--> |
|
||||
<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm"> |
|
||||
<el-form-item label="归属产品" prop="productId"> |
|
||||
<xm-product-select v-if="!xmProduct||!xmProduct.id" ref="xmProductSelect" :auto-select="true" :link-project-id="selProject?selProject.id:null" @row-click="onProductRowClick" @clear="onProductClearSelect" @close="productSelectVisible=false"></xm-product-select> |
|
||||
|
|
||||
<span v-else>{{addForm.productName?addForm.pproductName:addForm.productId}}</span> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="上线时间" prop="onlineTime"> |
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="addForm.onlineTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" @change="editSomeFields(editForm,'onlineTime',$event)"></el-date-picker> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="起止时间" prop="startTime"> |
|
||||
<date-range :auto-default="true" start-key="startTime" end-key="endTime" v-model="addForm" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" ></date-range> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="迭代名称" prop="iterationName"> |
|
||||
<el-input v-model="addForm.iterationName" placeholder="迭代名称" minlength="10"></el-input> |
|
||||
<font color="blue">格式如下： 上线日期+主题+V版本号 例如： 2021.6.15购书商城V1.0.9 留空，选日期后自动填写迭代名称</font> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="负责人姓名" prop="adminUsername"> |
|
||||
{{addForm.adminUsername}} <el-button @click="userSelectVisible=true">选择负责人</el-button> |
|
||||
</el-form-item> |
|
||||
<el-form-item style="float:right;"> |
|
||||
<el-button @click.native="handleCancel">取消</el-button> |
|
||||
<el-button v-loading="load.add" type="primary" @click.native="addSubmit" :disabled="load.add==true">提交</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-row> |
|
||||
|
|
||||
<el-drawer append-to-body title="选择员工" :visible.sync="userSelectVisible" size="60%"> |
|
||||
<users-select :select-userids="[]" @confirm="onUserSelected" ref="usersSelect"></users-select> |
|
||||
</el-drawer> |
|
||||
</section> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import util from '@/common/js/util';//全局公共库 |
|
||||
import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询 |
|
||||
import { addXmIteration } from '@/api/xm/core/xmIteration'; |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import UsersSelect from "@/views/mdp/sys/user/UsersSelect"; |
|
||||
|
|
||||
import XmProductSelect from '@/views/xm/core/components/XmProductSelect.vue' |
|
||||
|
|
||||
export default { |
|
||||
computed: { |
|
||||
...mapGetters([ |
|
||||
'userInfo','roles' |
|
||||
]) |
|
||||
}, |
|
||||
props:['xmIteration','visible', 'selProject','xmProduct'], |
|
||||
watch: { |
|
||||
'xmIteration':function( xmIteration ) { |
|
||||
this.addForm = xmIteration; |
|
||||
}, |
|
||||
'visible':function(visible) { |
|
||||
if(visible==true){ |
|
||||
this.addForm.cuserid=this.userInfo.userid |
|
||||
this.addForm.cusername=this.userInfo.username |
|
||||
this.addForm.adminUserid=this.userInfo.userid |
|
||||
this.addForm.adminUsername=this.userInfo.username; |
|
||||
if(this.xmProduct && this.xmProduct.id){ |
|
||||
|
|
||||
this.addForm.productId=this.xmProduct.id |
|
||||
this.addForm.productName=this.xmProduct.productName; |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
'addForm.onlineTime':function(val){ |
|
||||
if(!val){ |
|
||||
return; |
|
||||
} |
|
||||
var date=val.substr(0,10) |
|
||||
date=date.replaceAll('-',''); |
|
||||
this.addForm.iterationName=date+(this.addForm.productName?this.addForm.productName:'-请修改-')+'V1.0.0' |
|
||||
}, |
|
||||
'addForm.productName':function(val){ |
|
||||
var date=this.addForm.onlineTime |
|
||||
if(!date){ |
|
||||
return; |
|
||||
} |
|
||||
date=date.substr(0,10) |
|
||||
date=date.replaceAll('-',''); |
|
||||
this.addForm.iterationName=date+(this.addForm.productName?this.addForm.productName:'-请修改-')+'V1.0.0' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dicts:{},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} |
|
||||
load:{ list: false, edit: false, del: false, add: false },//查询中... |
|
||||
addFormRules: { |
|
||||
iterationName: [ |
|
||||
{ required: true, message: '迭代名称不能为空', trigger: 'change' }, |
|
||||
{ min:10,max:250, message: '名称长度在10-250个字符', trigger: 'change' } |
|
||||
], |
|
||||
productId: [ |
|
||||
{ required: true, message: '产品编号不能为空', trigger: 'change' } |
|
||||
], |
|
||||
onlineTime: [ |
|
||||
{ required: true, message: '上线时间不能为空', trigger: 'change' } |
|
||||
], |
|
||||
startTime:[ |
|
||||
{ required: true, message: '开始时间不能为空', trigger: 'change' } |
|
||||
], |
|
||||
}, |
|
||||
//新增界面数据 迭代定义, |
|
||||
addForm: { |
|
||||
id:'',branchId:'',iterationName:'',startTime:'',endTime:'',onlineTime:'',pid:'',adminUserid:'',adminUsername:'',ctime:'',budgetCost:'',budgetWorkload:'',seqNo:'',istatus:'',cuserid:'',cusername:'',remark:'',iphase:'',isTpl:'',productId:'' |
|
||||
}, |
|
||||
/**begin 在下面加自定义属性,记得补上面的一个逗号**/ |
|
||||
userSelectVisible:false, |
|
||||
productSelectVisible:false, |
|
||||
/**end 在上面加自定义属性**/ |
|
||||
}//end return |
|
||||
},//end data |
|
||||
methods: { |
|
||||
// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听 |
|
||||
handleCancel:function(){ |
|
||||
this.$emit('cancel'); |
|
||||
}, |
|
||||
//新增提交XmIteration 迭代定义 父组件监听@submit="afterAddSubmit" |
|
||||
addSubmit: function () { |
|
||||
this.$refs.addForm.validate((valid) => { |
|
||||
if (valid) { |
|
||||
var params={...this.addForm} |
|
||||
this.$confirm('确认提交迭代吗？', '提示', {}).then(() => { |
|
||||
this.load.add=true |
|
||||
addXmIteration(params).then((res) => { |
|
||||
this.load.add=false |
|
||||
var tips=res.data.tips; |
|
||||
if(tips.isOk){ |
|
||||
this.$emit('submit',res.data.data);// @submit="afterAddSubmit" |
|
||||
} |
|
||||
this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: tips.isOk?'success':'error' }); |
|
||||
}).catch( err => this.load.add=false); |
|
||||
}); |
|
||||
}else{ |
|
||||
this.$notify({position:'bottom-left',showClose:true,message: "表单验证不通过", type: 'error' }); |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
/**begin 在下面加自定义方法,记得补上面的一个逗号**/ |
|
||||
|
|
||||
onUserSelected: function(users) { |
|
||||
if(users.length>1){ |
|
||||
this.$notify.error("只能选一个人"); |
|
||||
return; |
|
||||
} |
|
||||
var user=users[0] |
|
||||
this.addForm.adminUserid=user.userid |
|
||||
this.addForm.adminUsername=user.username |
|
||||
this.userSelectVisible = false; |
|
||||
}, |
|
||||
onProductRowClick(product){ |
|
||||
this.addForm.productId=product.id |
|
||||
this.addForm.productName=product.productName |
|
||||
this.productSelectVisible=false; |
|
||||
}, |
|
||||
onProductClearSelect(){ |
|
||||
this.addForm.productId='' |
|
||||
this.addForm.productName='' |
|
||||
this.productSelectVisible=false; |
|
||||
} |
|
||||
/**end 在上面加自定义方法**/ |
|
||||
|
|
||||
},//end method |
|
||||
components: { |
|
||||
//在下面添加其它组件 'xm-iteration-edit':XmIterationEdit |
|
||||
UsersSelect,XmProductSelect, |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
this.addForm=Object.assign(this.addForm, this.xmIteration); |
|
||||
this.addForm.cuserid=this.userInfo.userid |
|
||||
this.addForm.cusername=this.userInfo.username |
|
||||
this.addForm.adminUserid=this.userInfo.userid |
|
||||
this.addForm.adminUsername=this.userInfo.username; |
|
||||
if(this.xmProduct && this.xmProduct.id){ |
|
||||
|
|
||||
this.addForm.productId=this.xmProduct.id |
|
||||
this.addForm.productName=this.xmProduct.productName; |
|
||||
} |
|
||||
/**在下面写其它函数***/ |
|
||||
|
|
||||
}//end mounted |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue