vue模板页面和使用

模板页面

<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>