vue 템 플 릿 페이지 와 사용
85396 단어 핸드폰 노트
<template>
<!-- -->
<div>
<!-- -->
<van-nav-bar
left-text=" "
left-arrow
:fixed="true"
:placeholder="true"
@click-left="onClickLeft"
>
<template #right>
<van-search
@search="searchSubClick"
v-if="searchKeyShow"
v-model="searchKey"
:placeholder="search_text_tip"
show-action
>
<template #action>
<div @click="searchSubClick"> </div>
</template>
</van-search>
<van-icon v-if="iconShow" @click="onClickIcon" :name="icon" size="0.7rem" />
</template>
</van-nav-bar>
<div>
<!-- tab -->
<van-tabs
:color="tabsColor"
v-model="active"
swipeable
sticky
:offset-top="setRemToPx(46)"
@change="tabsChange"
:type="tabsTybe"
>
<!-- -->
<van-pull-refresh v-model="flag.refresh" @refresh="onRefresh">
<!-- tab -->
<van-tab v-for="(item) in tabArr" :key="item.value" >
<template slot="title">
{{item.text}}
<van-tag type="danger" round v-show="item.total>0">{{item.total}}</van-tag>
</template>
<van-list
v-model="flag.listLoading"
:immediate-check="false"
:finished="flag.finished"
@load="onLoad"
>
<!-- -->
<slot name="tabContent"></slot>
</van-list>
<!-- -->
<van-empty description=" " v-show="item.total == 0" />
</van-tab>
</van-pull-refresh>
</van-tabs>
</div>
<!-- -->
<van-popup
v-model="flag.rightShow"
class="rightShow"
position="right"
:style="{ width: '80%',height:'100%' }"
>
<!-- -->
<slot name="rightPopup"></slot>
<!-- -->
<div class="submitButton">
<van-button
round
plain
type="info"
class="sub"
v-if="resetSubShow"
@click="resetSubClick"
> </van-button>
<van-button round class="sub" v-if="searchSubShow" type="info" @click="searchSubClick"> </van-button>
</div>
</van-popup>
</div>
</template>
<script>
export default {
props: {
refresh: {
//
type: Function
},
load: {
//
type: Function
},
tabsTybe: {
type: String,
default: "line" //
},
tabArr: {
type: Array,
default: function() {
return [];
}
},
searchKeyShow: {
type: Boolean,
default: true //
},
icon: {
type: String,
default: "descending" //
},
iconShow: {
type: Boolean,
default: false // ,
},
search_text_tip: {
type: String,
default: " " //
},
rightSearchTextShow: {
type: Boolean,
default: true //
},
resetSubShow: {
type: Boolean,
default: true //
},
searchSubShow: {
type: Boolean,
default: true //
},
pageSize: {
type: Number,
default: 30 //
},
tabsColor: {
type: String,
default: "#ee0a24" //
}
},
data() {
return {
flag: {
refresh: false,
rightShow: false,
listLoading: false,
finished: true
},
active: 0,
searchKey: "",
rightSearchText: "",
total: 0,
pageIndex: 0
};
},
methods: {
//tab
tabsChange(e) {
this.$emit("tabsChange", e);
},
//
onClickLeft() {
this.$router.back();
},
//
onClickIcon() {
this.flag.rightShow = true;
},
//
searchSubClick() {
this.flag.rightShow=false;
this.$emit("searchSubClick", this.searchKey);
},
//
resetSubClick() {
this.$emit("resetSubClick");
},
//
SearchEnter(e) {
this.$emit("SearchEnter", e);
},
//
onRefresh() {
this.pageIndex = 0;
this.total = 0;
this.refresh().then(res => {
this.flag.refresh = false;
this.isFenYe(res);
});
},
//
onLoad() {
this.pageIndex += 1;
this.load(this.pageIndex).then(res => {
this.flag.listLoading = false;
this.isFenYe(res);
});
},
//
isFenYe(total) {
this.total = total;
if (total > (this.pageIndex + 1) * this.pageSize) {
//
this.flag.finished = false;
} else {
//
this.flag.finished = true;
}
}
},
mounted() {
//
this.$emit("init", () => {
this.onRefresh(this.active);
});
},
watch: {}
};
</script>
<style scoped>
.rightShow {
width: "70";
height: "100%";
}
.submitButton {
text-align: center;
bottom: 0;
position: relative;
}
.sub {
width: 120px;
margin: 12px;
}
</style>
호출 된 하위 페이지
<!-- -->
<template>
<div class="mySqsq">
<!-- -->
<van-action-sheet v-model="popup.dateShow" title=" ">
<inlineCalendar ref="inlineCalendar" mode="during" @change="dateChange" :enableTouch="false" />
</van-action-sheet>
<!-- -->
<van-popup v-model="popup.fangAn2" position="bottom" :style="{ height: '100%', width: '100%' }">
<fang-an
:schemeCode="2"
:paramsStr="{schemeCode:'2',condition:{},resultData:'',key:''}"
@back="popup.fangAn2=false"
@getFanAnValue="getFanAnValue2"
></fang-an>
</van-popup>
<!-- -->
<van-popup
v-model="popup.fangAn81"
position="bottom"
:style="{ height: '100%', width: '100%' }"
>
<fang-an
:schemeCode="81"
:paramsStr="{schemeCode:'81',condition:{},resultData:'',key:'',masterType :'BEFOREAPPLY'}"
@back="popup.fangAn81=false"
@getFanAnValue="getFanAnValue81"
></fang-an>
</van-popup>
<!-- -->
<van-popup
v-model="popup.fangAn60"
position="bottom"
:style="{ height: '100%', width: '100%' }"
>
<fang-an
:schemeCode="60"
:paramsStr="{schemeCode:'60',condition:{},resultData:'',key:'',masterType :'BEFOREAPPLY'}"
@back="popup.fangAn60=false"
@getFanAnValue="getFanAnValue60"
></fang-an>
</van-popup>
<!-- -->
<common-xian-shi1
search_text_tip=" 、 "
:iconShow="true"
:tabArr="tabArr"
@searchSubClick="searchSubClick"
@init="init"
:load="onLoad"
:refresh="onRefresh"
@tabsChange="tabsChange"
@resetSubClick="resetSubClick"
>
<!-- -->
<template slot="rightPopup">
<van-cell title=" " is-link center @click="popup.dateShow = true">
<span v-html="createDate"></span>
</van-cell>
<van-cell title=" " is-link @click="popup.fangAn2=true" :value="deptText" />
<van-cell title=" " is-link @click="popup.fangAn81=true" :value="formText" />
<van-cell title=" " is-link @click="popup.fangAn60=true" :value="formName" />
</template>
<!-- -->
<template #tabContent>
<van-panel v-for=" (row,index) in listData" :key="index" @click="contentClick(row)">
<div slot="header" class="van-cell van-panel__header">
<div class="van-cell__title">
<span>{{row.applyName}}</span>
</div>
<div v-html="statusRenderer(row)"></div>
</div>
<div class="wxtItemContent1">
<p> : {{row.djh}}</p>
<p> : {{row.formName}}</p>
</div>
<div slot="footer" class="wxtItemContent2">
<span class="wxtApplyDate">{{moment(row.inputDate).format("YYYY-MM-DD")}}</span>
</div>
</van-panel>
</template>
</common-xian-shi1>
</div>
</template>
<script>
const commonXianShi1 = () => import("@/components/commonXianShi1");
const fangAn = () => import("@/components/getFangAn");
import { findBeforeapplyData } from "@/request/sqsq";
import moment from "moment";
export default {
components: {
//
commonXianShi1,
fangAn
},
computed: {
createDate: function() {
return this.form.createDateA && this.form.createDateB
? `${this.form.createDateA}
${this.form.createDateB}`
: "";
}
},
data() {
return {
moment,
active: 0,
pageSize: 30,
java: {
nowInputUserId: "",
nowInputUserName: "",
nowDeptId: "",
nowDeptName: ""
},
popup: {
fangAn60: false,
dateShow: false,
fangAn2: false,
fangAn81: false
},
formText: "", // ,
deptText: "", //
formName: "", //
form: {
keys: "", //
createDateA: "", //
createDateB: "", //
deptId: "", //
formId: "", //
formTypeId: "" //
},
tabArr: [
{
id: 2,
text: " ",
value: "10,20,40,50",
total: "0"
},
{
id: 1,
text: " ",
value: "30",
total: "0"
}
],
listData: []
};
},
created() {},
methods: {
//
init(callback) {
this.java.nowInputUserId = this.$store.state.wxtUserInfo.userId;
this.java.nowInputUserName = this.$store.state.wxtUserInfo.userName;
this.java.nowDeptId = this.$store.state.wxtUserInfo.deptId;
this.java.nowDeptName = this.$store.state.wxtUserInfo.deptName;
callback && callback();
},
//
statusRenderer(row) {
switch (row.status) {
case 10:
return " ";
case 20:
return ` (${row.flowNodeName})`;
case 30:
return " ";
case 40:
return " ( )";
case 50:
return " ";
case 70:
return " ";
}
},
// --
getFanAnValue2(data) {
this.form.deptId = data.value;
this.deptText = data.text;
this.popup.fangAn2 = false;
},
//
getFanAnValue81(data) {
this.formJson = data;
this.form.formId = data.value;
this.formText = data.text;
this.popup.fangAn81 = false;
},
// --
getFanAnValue60(data) {
this.form.formTypeId = data.value;
this.formName = data.text;
this.popup.fangAn60 = false;
},
//
dateChange(obj) {
if (obj.length > 1) {
this.form.createDateA = moment(obj[0].$d).format("YYYY-MM-DD");
this.form.createDateB = moment(obj[1].$d).format("YYYY-MM-DD");
this.popup.dateShow = false;
}
},
//
searchSubClick(key) {
this.form.keys = key;
this.onRefresh();
},
//
onRefresh() {
this.listData = [];
return this.getData(0);
},
//
onLoad(pageIndex) {
return this.getData(pageIndex);
},
//
getData(pageIndex) {
return new Promise(resolve => {
let json = {
status: this.tabArr[this.active].value,
inputUserId: this.java.nowInputUserId,
pageIndex: pageIndex,
pageSize: this.pageSize
};
findBeforeapplyData({ ...this.form, ...json }).then(res => {
this.tabArr[this.active].total = res.total;
this.tabArr[this.active].total = res.total;
this.listData = [...this.listData, ...res.data];
resolve(res.total);
});
});
},
//tab
tabsChange(e) {
this.active = e;
this.onRefresh();
},
//
contentClick(row) {
row.tableCode = "wxt_beforeapply";
row.operationType = "look";
this.$router.push({
name: "sqsqAudit",
query: {
eleItem: this.Base64.encode(JSON.stringify(row))
}
});
},
//
resetSubClick() {
this.formText = "", // ,
this.deptText = "", //
this.formName = "", //
this.form = {
keys: "", //
createDateA: "", //
createDateB: "", //
deptId: "", //
formId: "", //
formTypeId: "" //
};
}
}
};
</script>
<style scoped>
@import "~@/css/moban1.css";
</style>
좋은 웹페이지 즐겨찾기
