Skip to content

M
mes-ui
Commit fe006db7 authored by 周远喜's avatar 周远喜
Browse files
Options

日期范围选择控件完成

parent 1dd6fade
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 95 deletions
assets/css/base.less
View file @ fe006db7
......@@ -45,7 +45,10 @@ div::-webkit-scrollbar-thumb:hover {
div::-webkit-scrollbar-corner {
background: @scrollbar-corner-bg-color;
}
.ivu-date-picker{
display: block;
width: 100%;
}
/*flex*/
.flex {
display: flex;
......
components/page/dateRange.vue
View file @ fe006db7
<template>
<div class="time-view" v-if="startDate && endDate">
<DatePicker
v-if="edit"
:open="open"
:value="value3"
type="datetimerange"
@on-change="handleChange"
@on-clear="handleClear"
@on-ok="handleClear"
confirm
>
<div
class="time-range ivu-input"
href="javascript:void(0)"
@click="handleClick"
>
<Icon type="ios-calendar-outline"></Icon>
<div class="time-view" v-if="startDate && endDate">
<span>{{ startDate }}</span>
<span class="jian-tou">{{ jg }} {{ unit }}</span>
<span>{{ endDate }}</span>
</div>
<span v-else v-text="placeholder"> </span>
</div>
</DatePicker>
<div class="time-view" v-else-if="!edit && startDate && endDate">
<span>{{ startDate }}</span>
<span class="jian-tou">{{ jg }} {{ unit }}</span>
<span class="jian-tou">{{ jg }} {{ unit }}</span>
<span>{{ endDate }}</span>
</div>
</template>
......@@ -9,12 +33,14 @@
import dayjs from "dayjs";
export default {
name: "",
model: {
prop: "value",
event: "on-change",
},
data() {
return {
startDate: null,
endDate: null,
unit: "天",
jg: 0,
value3: [this.value[this.start],this.value[this.endDate]],
open: false,
};
},
props: {
......@@ -23,6 +49,14 @@ export default {
type: String,
default: "startDate",
},
unit: {
type: String,
default: "天",
},
placeholder: {
type: String,
default: "请选择时间范围",
},
end: {
type: String,
default: "endDate",
......@@ -35,44 +69,69 @@ export default {
type: [String, Object],
default: "",
},
edit: {
type: Boolean,
default: false,
},
work: {
type: [String, Number], //传入的work为0，转换为小时，1为天，2为周，3为月
default: 8,
},
},
mounted() {
this.init();
created() {
},
methods: {
init(v) {
if (v) {
var start = dayjs(v[this.start]);
var end = dayjs(v[this.end]);
this.startDate=start.format("YYYY-MM-DD");
this.endDate=end.format("YYYY-MM-DD");
this.jg=end.diff(start,'day');
handleClick() {
this.open = !this.open;
},
handleChange(date, t) {
if (date.length == 2) {
this.value3 = date;
this.value[this.start] = date[0];
this.value[this.end] = dayjs(date[1]).format("YYYY-MM-DD 23:59:59");
this.$emit("on-change", this.value);
}
this.open = false;
},
handleClear() {
this.open = false;
},
},
watch: {
value: {
handler: function (n, v) {
this.init(n);
},
deep: true,
computed: {
startDate() {
if (this.value && this.value[this.start]) {
var start = dayjs(this.value[this.start]);
return start.format("YYYY-MM-DD");
}
},
endDate() {
if (this.value&&this.value[this.end]) {
var end = dayjs(this.value[this.end]);
return end.format("YYYY-MM-DD");
}
},
jg(){
if (this.value&&this.value[this.start] && this.value[this.end]) {
var start = dayjs(this.value[this.start]);
var end = dayjs(this.value[this.end]);
return end.diff(start,'day')+1;
}
}
},
watch: {
value(v){
this.value=[v[this.start],v[this.end]]
}
},
};
</script>
<style lang="less">
.time-view {
display: inline-block;
.jian-tou {
min-width: 55px;
text-align: center;
padding: 0 5px 2px 5px;
padding: 0 5px 2px 5px;
background-image: url("../../assets/imgicon/range.png");
background-size: 100%;
background-repeat: no-repeat;
......
i18n/locale/zh-CN.js
View file @ fe006db7
......@@ -2011,6 +2011,8 @@ document_category: {
deletionTime: '删除时间',
deleterUserId: '删除人',
projectId: '项目id',
direction:"方向",
deliverable:"交付物",
upId: '父级',
title: '标题',
status: '状态',
......
pages/project/plan/add.vue
View file @ fe006db7
......@@ -51,6 +51,23 @@
><FormItem :label="l('upId')" prop="upId">
<Input v-model="entity.upId"></Input> </FormItem
></Col> -->
<Col :span="12"
><FormItem :label="l('type')" prop="type">
<Dictionary
code="mes.project_plan.Type"
v-model="entity.type"
type="radio"
></Dictionary> </FormItem
></Col>
<Col :span="12"
><FormItem :label="l('direction')" prop="direction">
<Dictionary
code="mes.project_plan.direction"
v-model="entity.direction"
type="radio"
></Dictionary> </FormItem
></Col>
<Col :span="24"
><FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"> </Input> </FormItem
......@@ -73,32 +90,34 @@
></Col>
<Col :span="12"
><FormItem :label="l('startDate')" prop="startDate">
<DatePicker
type="date"
v-model="entity.startDate"
></DatePicker> </FormItem
<DateRange v-model="entity" edit></DateRange> </FormItem
></Col>
<Col :span="12"
<!-- <Col :span="12"
><FormItem :label="l('endDate')" prop="endDate">
<DatePicker
type="date"
v-model="entity.endDate"
></DatePicker> </FormItem
></Col>
></Col> -->
<Col :span="12"
><FormItem :label="l('type')" prop="type">
><FormItem :label="l('executor')" prop="executor">
<UserGroup
v-model="entity.executor"
multiple
:projectId="v.projectId"
></UserGroup>
</FormItem>
</Col>
<Col :span="12"
><FormItem :label="l('deliverable')" prop="deliverable">
<Dictionary
code="mes.project_plan.Type"
v-model="entity.type"
code="mes.project_plan.deliverable"
v-model="entity.deliverable"
type="radio"
></Dictionary> </FormItem
></Col>
<Col :span="12"
><FormItem :label="l('executor')" prop="executor">
<UserGroup v-model="entity.executor" multiple :projectId="v.projectId"></UserGroup>
></Dictionary>
</FormItem>
</Col
>
</Col>
<Col :span="24"
><FormItem :label="l('attachment')" prop="attachment">
<files
......@@ -137,8 +156,11 @@ export default {
endDate: null,
type: 0,
attachment: "",
deliverable: 0,
direction: 0,
executor: [],
},
daterange: [],
parmsName: "app=material&eid=1&name=ProjectPlan",
rules: {
title: [{ required: true, message: "必填", trigger: "blur" }],
......@@ -155,6 +177,9 @@ export default {
// }
},
methods: {
dateChange(v, t) {
console.warn(v, t);
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
......
pages/project/plan/index.vue
View file @ fe006db7
......@@ -71,7 +71,78 @@ export default {
// { key:"projectId",title:this.l("projectId") ,align:"left" ,high:true },
// { key:"upId",title:this.l("upId") ,align:"left" ,high:true },
// { type: "selection", width: 80, align: "center" },
{
key: "type",
width: 90,
title: this.l("type"),
align: "center",
high: true,
code: "mes.project_plan.Type",
attr:{
type:'icon'
}
},
{
key: "direction",
title: this.l("direction"),
align: "center",
width:80,
easy: true,
high: true,
},
{
key: "title",
title: this.l("title"),
align: "left",
tree: true,
easy: true,
high: true,
},
{
key: "status",
title: this.l("status"),
align: "center",
width:80,
high: true,
code: "mes.project_plan.Status",
},
// {
// key: "startDate",
// title: this.l("startDate"),
// align: "left",
// high: true
// ,type:"date"
// },
// { key: "endDate", title: this.l("endDate"), align: "left", high: true,type:"date" },
{ key: "endDate",width:250, title: "计划日期", align: "left",render(h,param) {
return h('DateRange',{
attrs:{
value:param.row
}
})
}, },
// {
// key: "attachment",
// title: this.l("attachment"),
// align: "left",
// high: true,
// },
{
key: "executor",
title: this.l("executor"),
align: "left",
high: true,
type:"users",
},
{
key: "deliverable",
title: this.l("deliverable"),
width:80,
align: "center",
easy: true,
high: true,
},
{
title: "操作",
key: "action",
width: 150,
......@@ -142,60 +213,7 @@ export default {
]);
},
},
{
key: "type",
width: 90,
title: this.l("type"),
align: "left",
high: true,
code: "mes.project_plan.Type",
attr:{
type:'icon'
}
},
{
key: "title",
title: this.l("title"),
align: "left",
tree: true,
easy: true,
high: true,
},
{
key: "status",
title: this.l("status"),
align: "left",
high: true,
code: "mes.project_plan.Status",
},
// {
// key: "startDate",
// title: this.l("startDate"),
// align: "left",
// high: true
// ,type:"date"
// },
// { key: "endDate", title: this.l("endDate"), align: "left", high: true,type:"date" },
{ key: "endDate", title: "计划日期", align: "left",render(h,param) {
return h('DateRange',{
attrs:{
value:param.row
}
})
}, },
// {
// key: "attachment",
// title: this.l("attachment"),
// align: "left",
// high: true,
// },
{
key: "executor",
title: this.l("executor"),
align: "left",
high: true,
type:"users",
},
],
};
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment