PMCORE-3170
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pm-vue-card">
|
<div class="pm-vue-card">
|
||||||
<div class="card pm-vue-card-inside" style="width: 20rem">
|
<div class="card pm-vue-card-inside" style="width: 20rem" @dblclick="dblClick">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<slot> </slot>
|
<slot> </slot>
|
||||||
</div>
|
</div>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "VueCardView",
|
name: "VueCardView",
|
||||||
props: ["columns", "item"],
|
props: ["options", "item"],
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
@@ -19,6 +19,9 @@ export default {
|
|||||||
classBtn(cls) {
|
classBtn(cls) {
|
||||||
return "btn btn-slim btn-force-radius v-btn-header " + cls;
|
return "btn btn-slim btn-force-radius v-btn-header " + cls;
|
||||||
},
|
},
|
||||||
|
dblClick(event){
|
||||||
|
this.options.dblClick(event, this.item, this.options);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
class="pm-vue-card-view-body"
|
class="pm-vue-card-view-body"
|
||||||
:style="{height: height + 'px'}"
|
:style="{height: height + 'px'}"
|
||||||
>
|
>
|
||||||
<vue-card v-for="item in data" :key="item.id">
|
<vue-card v-for="item in data" :key="item.id" :item="item" :options="options">
|
||||||
<slot
|
<slot
|
||||||
v-for="column in options.columns"
|
v-for="column in options.columns"
|
||||||
:name="column"
|
:name="column"
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pm-vue-list">
|
<div class="pm-vue-list">
|
||||||
<div class="card pm-vue-list-inside">
|
<div class="card pm-vue-list-inside" @dblclick.prevent="dblClick">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<slot> </slot>
|
<slot> </slot>
|
||||||
</div>
|
</div>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "VueCardView",
|
name: "VueCardView",
|
||||||
props: ["columns", "item"],
|
props: ["item","options"],
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
@@ -19,6 +19,9 @@ export default {
|
|||||||
classBtn(cls) {
|
classBtn(cls) {
|
||||||
return "btn btn-slim btn-force-radius v-btn-header " + cls;
|
return "btn btn-slim btn-force-radius v-btn-header " + cls;
|
||||||
},
|
},
|
||||||
|
dblClick(event){
|
||||||
|
this.options.dblClick(event, this.item, this.options);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
class="pm-vue-list-view-body"
|
class="pm-vue-list-view-body"
|
||||||
:style="{height: height + 'px'}"
|
:style="{height: height + 'px'}"
|
||||||
>
|
>
|
||||||
<vue-list v-for="item in data" :key="item.id">
|
<vue-list v-for="item in data" :key="item.id" :item="item" :options="options">
|
||||||
<slot
|
<slot
|
||||||
v-for="column in options.columns"
|
v-for="column in options.columns"
|
||||||
:name="column"
|
:name="column"
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
</v-server-table>
|
</v-server-table>
|
||||||
<VueCardView
|
<VueCardView
|
||||||
v-if="typeView === 'CARD'"
|
v-if="typeView === 'CARD'"
|
||||||
:options="optionsVueCardView"
|
:options="optionsVueView"
|
||||||
ref="vueCardView"
|
ref="vueCardView"
|
||||||
>
|
>
|
||||||
<div slot="detail" slot-scope="props">
|
<div slot="detail" slot-scope="props">
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
</VueCardView>
|
</VueCardView>
|
||||||
<VueListView
|
<VueListView
|
||||||
v-if="typeView === 'LIST'"
|
v-if="typeView === 'LIST'"
|
||||||
:options="optionsVueCardView"
|
:options="optionsVueView"
|
||||||
ref="vueListView"
|
ref="vueListView"
|
||||||
>
|
>
|
||||||
<div slot="detail" slot-scope="props">
|
<div slot="detail" slot-scope="props">
|
||||||
@@ -461,7 +461,15 @@ export default {
|
|||||||
* update view in component
|
* update view in component
|
||||||
*/
|
*/
|
||||||
updateView(){
|
updateView(){
|
||||||
|
if (this.typeView === "GRID") {
|
||||||
this.$refs["vueTable"].getData();
|
this.$refs["vueTable"].getData();
|
||||||
|
}
|
||||||
|
if (this.typeView === "CARD") {
|
||||||
|
this.$refs["vueCardView"].getData();
|
||||||
|
}
|
||||||
|
if (this.typeView === "LIST") {
|
||||||
|
this.$refs["vueListView"].getData();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Show options in the ellipsis
|
* Show options in the ellipsis
|
||||||
|
|||||||
@@ -32,8 +32,11 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
optionsVueCardView: {
|
optionsVueView: {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
dblClick:(event, item, options)=>{
|
||||||
|
this.openCase(item);
|
||||||
|
},
|
||||||
headings: {
|
headings: {
|
||||||
detail: "",
|
detail: "",
|
||||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
||||||
@@ -56,10 +59,10 @@ export default {
|
|||||||
"task"
|
"task"
|
||||||
],
|
],
|
||||||
requestFunction(data) {
|
requestFunction(data) {
|
||||||
return that.getCasesVueList(data);
|
return that.getCases(data);
|
||||||
},
|
},
|
||||||
requestFunctionViewMore(data) {
|
requestFunctionViewMore(data) {
|
||||||
return that.getCasesVueListViewMore(data);
|
return that.getCasesViewMore(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -71,7 +74,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Get cases for Vue Card View
|
* Get cases for Vue Card View
|
||||||
*/
|
*/
|
||||||
getCasesVueList(data) {
|
getCases(data) {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt,
|
dt,
|
||||||
start = 0,
|
start = 0,
|
||||||
@@ -104,7 +107,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Get cases for Vue Card View
|
* Get cases for Vue Card View
|
||||||
*/
|
*/
|
||||||
getCasesVueListViewMore(data) {
|
getCasesViewMore(data) {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt,
|
dt,
|
||||||
paged,
|
paged,
|
||||||
|
|||||||
@@ -53,7 +53,7 @@
|
|||||||
</v-server-table>
|
</v-server-table>
|
||||||
<VueCardView
|
<VueCardView
|
||||||
v-if="typeView === 'CARD'"
|
v-if="typeView === 'CARD'"
|
||||||
:options="optionsVueCardView"
|
:options="optionsVueView"
|
||||||
ref="vueCardView"
|
ref="vueCardView"
|
||||||
>
|
>
|
||||||
<div slot="detail" slot-scope="props">
|
<div slot="detail" slot-scope="props">
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
</VueCardView>
|
</VueCardView>
|
||||||
<VueListView
|
<VueListView
|
||||||
v-if="typeView === 'LIST'"
|
v-if="typeView === 'LIST'"
|
||||||
:options="optionsVueListView"
|
:options="optionsVueView"
|
||||||
ref="vueListView"
|
ref="vueListView"
|
||||||
>
|
>
|
||||||
<div slot="detail" slot-scope="props">
|
<div slot="detail" slot-scope="props">
|
||||||
@@ -484,7 +484,15 @@ export default {
|
|||||||
* update view in component
|
* update view in component
|
||||||
*/
|
*/
|
||||||
updateView() {
|
updateView() {
|
||||||
|
if (this.typeView === "GRID") {
|
||||||
this.$refs["vueTable"].getData();
|
this.$refs["vueTable"].getData();
|
||||||
|
}
|
||||||
|
if (this.typeView === "CARD") {
|
||||||
|
this.$refs["vueCardView"].getData();
|
||||||
|
}
|
||||||
|
if (this.typeView === "LIST") {
|
||||||
|
this.$refs["vueListView"].getData();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -32,8 +32,11 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
optionsVueCardView: {
|
optionsVueView: {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
dblClick:(event, item, options)=>{
|
||||||
|
this.openCase(item);
|
||||||
|
},
|
||||||
headings: {
|
headings: {
|
||||||
detail: "",
|
detail: "",
|
||||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
||||||
@@ -56,40 +59,10 @@ export default {
|
|||||||
"task"
|
"task"
|
||||||
],
|
],
|
||||||
requestFunction(data) {
|
requestFunction(data) {
|
||||||
return that.getCasesVueCard(data);
|
return that.getCases(data);
|
||||||
},
|
},
|
||||||
requestFunctionViewMore(data) {
|
requestFunctionViewMore(data) {
|
||||||
return that.getCasesVueCardViewMore(data);
|
return that.getCasesViewMore(data);
|
||||||
}
|
|
||||||
},
|
|
||||||
optionsVueListView: {
|
|
||||||
limit: 10,
|
|
||||||
headings: {
|
|
||||||
detail: "",
|
|
||||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
|
||||||
case_title: this.$i18n.t("ID_CASE_TITLE"),
|
|
||||||
process_name: this.$i18n.t("ID_PROCESS_NAME"),
|
|
||||||
task: this.$i18n.t("ID_TASK"),
|
|
||||||
current_user: this.$i18n.t("ID_CURRENT_USER"),
|
|
||||||
due_date: this.$i18n.t("ID_DUE_DATE"),
|
|
||||||
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
|
|
||||||
priority: this.$i18n.t("ID_PRIORITY")
|
|
||||||
},
|
|
||||||
columns: [
|
|
||||||
"detail",
|
|
||||||
"case_number",
|
|
||||||
"case_title",
|
|
||||||
"process_name",
|
|
||||||
"due_date",
|
|
||||||
"delegation_date",
|
|
||||||
"priority",
|
|
||||||
"task"
|
|
||||||
],
|
|
||||||
requestFunction(data) {
|
|
||||||
return that.getCasesVueCard(data);
|
|
||||||
},
|
|
||||||
requestFunctionViewMore(data) {
|
|
||||||
return that.getCasesVueCardViewMore(data);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -101,7 +74,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Get cases for Vue Card View
|
* Get cases for Vue Card View
|
||||||
*/
|
*/
|
||||||
getCasesVueCard(data) {
|
getCases(data) {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt,
|
dt,
|
||||||
start = 0,
|
start = 0,
|
||||||
@@ -132,7 +105,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Get cases for Vue Card View
|
* Get cases for Vue Card View
|
||||||
*/
|
*/
|
||||||
getCasesVueCardViewMore(data) {
|
getCasesViewMore(data) {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt,
|
dt,
|
||||||
paged,
|
paged,
|
||||||
|
|||||||
@@ -53,7 +53,7 @@
|
|||||||
</v-server-table>
|
</v-server-table>
|
||||||
<VueCardView
|
<VueCardView
|
||||||
v-if="typeView === 'CARD'"
|
v-if="typeView === 'CARD'"
|
||||||
:options="optionsVueCardView"
|
:options="optionsVueView"
|
||||||
ref="vueCardView"
|
ref="vueCardView"
|
||||||
>
|
>
|
||||||
<div slot="detail" slot-scope="props">
|
<div slot="detail" slot-scope="props">
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
</VueCardView>
|
</VueCardView>
|
||||||
<VueListView
|
<VueListView
|
||||||
v-if="typeView === 'LIST'"
|
v-if="typeView === 'LIST'"
|
||||||
:options="optionsVueCardView"
|
:options="optionsVueView"
|
||||||
ref="vueListView"
|
ref="vueListView"
|
||||||
>
|
>
|
||||||
<div slot="detail" slot-scope="props">
|
<div slot="detail" slot-scope="props">
|
||||||
@@ -492,7 +492,15 @@ export default {
|
|||||||
* update view in component
|
* update view in component
|
||||||
*/
|
*/
|
||||||
updateView(){
|
updateView(){
|
||||||
|
if (this.typeView === "GRID") {
|
||||||
this.$refs["vueTable"].getData();
|
this.$refs["vueTable"].getData();
|
||||||
|
}
|
||||||
|
if (this.typeView === "CARD") {
|
||||||
|
this.$refs["vueCardView"].getData();
|
||||||
|
}
|
||||||
|
if (this.typeView === "LIST") {
|
||||||
|
this.$refs["vueListView"].getData();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Show options in the ellipsis
|
* Show options in the ellipsis
|
||||||
|
|||||||
@@ -32,8 +32,11 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
optionsVueCardView: {
|
optionsVueView: {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
dblClick:(event, item, options)=>{
|
||||||
|
this.openCase(item);
|
||||||
|
},
|
||||||
headings: {
|
headings: {
|
||||||
detail: "",
|
detail: "",
|
||||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
||||||
@@ -56,10 +59,10 @@ export default {
|
|||||||
"task"
|
"task"
|
||||||
],
|
],
|
||||||
requestFunction(data) {
|
requestFunction(data) {
|
||||||
return that.getCasesVueList(data);
|
return that.getCases(data);
|
||||||
},
|
},
|
||||||
requestFunctionViewMore(data) {
|
requestFunctionViewMore(data) {
|
||||||
return that.getCasesVueListViewMore(data);
|
return that.getCasesViewMore(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -71,7 +74,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Get cases for Vue Card View
|
* Get cases for Vue Card View
|
||||||
*/
|
*/
|
||||||
getCasesVueList(data) {
|
getCases(data) {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt,
|
dt,
|
||||||
start = 0,
|
start = 0,
|
||||||
@@ -104,7 +107,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Get cases for Vue Card View
|
* Get cases for Vue Card View
|
||||||
*/
|
*/
|
||||||
getCasesVueListViewMore(data) {
|
getCasesViewMore(data) {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt,
|
dt,
|
||||||
paged,
|
paged,
|
||||||
|
|||||||
Reference in New Issue
Block a user