web-base-admin-h5/src/pages/index/index.vue

<template>
  <view class="content">
    <view class="header_a">
      <view class="header">
        <view class="head_l">
          <img :src="userInfo.headPath" alt="" />
          <view>{{ userInfo.userName }}</view>
        </view>
        <view class="head_r">
          <view @click="openTop">搜索</view>
          <img src="@/assets/images/loginOut.png" alt="" @click="logOut" />
        </view>
      </view>
    </view>
    <view class="zhan"></view>
    <view class="kuang">
      <view class="kuang_t">
        <view @click="changeTab(0)" :class="isCLick == 0 ? 'act' : 'old'"
          >待办</view
        >
        <view @click="changeTab(1)" :class="isCLick == 1 ? 'act' : 'old'"
          >已办</view
        >
        <view @click="changeTab(2)" :class="isCLick == 2 ? 'act' : 'old'"
          >签呈接收</view
        >
      </view>
      <view class="kuang_i" v-for="(item, index) in tableData" :key="index">
        <!-- <view class="tit1"
              v-show="isCLick != 2">来源:{{ item.signSourceVal }}</view> -->
        <view class="tit1" v-show="isCLick != 2"
          >签呈编号:{{ item.approvalCode }}</view
        >
        <view class="tit1" v-show="isCLick == 2"
          >发起人:{{ item.userName }}</view
        >
        <view class="tit1" v-show="isCLick != 2"
          >发起人:{{ item.creation }}</view
        >
     
        <view class="kuang_if">
          <view class="tit1">业务类型:{{ item.approvalBusinessVal }}</view>
          <view class="tit2" v-show="isCLick != 2">{{
            item.approveStatusVal
          }}</view>
          <view
            :class="item.receiveStatus == 0 ? 'tit3' : 'tit2'"
            v-show="isCLick == 2"
            >{{ item.receiveStatusVal }}</view
          >
        </view>
        <u-steps :current="item.approvalIndex"
                 v-show="isCLick != 2"
                 dot
                 class="xian">
          <u-steps-item v-for="ctem,cndex in item.detailList"
                        :key="cndex"
                        :title="ctem.nickName"
                        :desc="ctem.useTime">
          </u-steps-item>
        </u-steps>
        <view class="tit1" v-show="isCLick == 1"
          >抄送人:{{ item.sendStr }}</view
        >
        <view class="timeCss">
          <view>
            <view class="tit3" v-show="isCLick == 1"
              >总耗时:{{ item.useTime }}</view
            >
            <view class="tit3">创建日期:{{ item.creationTime }}</view>
            <view class="tit3" v-show="isCLick == 2"
              >终审时间:{{ item.sendTime }}</view
            >
            <view class="tit3" v-show="isCLick == 1"
              >终审日期:{{ item.endTime }}</view
            >
          </view>
          <view class="timeCss_r">
            <u-button
              size="mini"
              class="kung_b"
              type="primary"
              @click="openSign(item.approvalCode)"
              :plain="true"
              text="查看签呈"
            ></u-button>
            <u-button
              size="mini"
              v-show="isCLick == 2 && item.receiveStatus == 1"
              class="kung_b"
              color="#37BF46"
              @click="toReceive(item.pkId)"
              :plain="true"
              text="接收"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 顶部搜索 -->
    <u-popup :show="isTop" mode="top" @close="isTop = false">
      <view class="tt">
        <u--form
          labelPosition="left"
          labelWidth="auto"
          :model="select"
          ref="uForm"
        >
          <u-row gutter="10">
            <u-col span="6" v-show="isCLick == 2">
              <u-form-item label="发起人">
                <u--input fontSize="12" v-model="select.userName"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6" v-show="isCLick != 2">
              <u-form-item label="签呈编号">
                <u--input
                  fontSize="12"
                  v-model="select.approvalCode"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item label="业务类型">
                <picker
                  :range="ywsqList"
                  range-key="label"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.approvalBusinessVals"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6" v-show="isCLick != 2">
              <u-form-item label="业务类型内容">
                <u--input
                  fontSize="12"
                  v-model="select.approvalBusinessVal"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6" v-show="isCLick == 1">
              <u-form-item label="签呈状态">
                <picker
                  :range="approveStatusList"
                  range-key="label"
                  @change="bindPickerChange3"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.approveStatusVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12" v-show="isCLick != 2">
              <u-form-item label="情况说明">
                <u--input fontSize="12" v-model="select.remark"></u--input>
              </u-form-item>
            </u-col>
          </u-row>

          <u-row gutter="10">
            <u-col span="6" v-show="isCLick == 2">
              <u-form-item label="签呈状态">
                <picker
                  :range="readStateList"
                  range-key="label"
                  @change="bindPickerChange4"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.receiveStatusVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                label="创建日期"
                @click="(isData = true), (setTime = 0)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.creationTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10" v-show="isCLick == 1">
            <u-col span="12">
              <u-form-item
                label="终审日期"
                @click="(isData = true), (setTime = 1)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.endTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10" v-show="isCLick == 2">
            <u-col span="12">
              <u-form-item
                label="终审日期"
                @click="(isData = true), (setTime = 2)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.sendTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
        <view class="footer">
          <u-button
            @click="getList1"
            color="#C8161D"
            text="搜索"
            class="btnn"
          ></u-button>
          <u-button @click="reset" text="重置"></u-button>
        </view>
      </view>
    </u-popup>
    <!-- 时间picker -->
    <u-calendar
      @close="isData = false"
      :closeOnClickOverlay="true"
      :show="isData"
      :allowSameDay="true"
      mode="range"
      :maxDate="calendar.maxDate"
      :minDate="calendar.minDate"
      :monthNum="calendar.monthNum"
      @confirm="confirm"
    ></u-calendar>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball
      ref="exportBall"
      v-show="isCLick != 0"
      @handleExport="handleExport"
    />
  </view>
</template>
<script>
import * as login from "@/api/login";
import * as api from "@/api/index";
export default {
  data() {
    return {
      userInfo: {},
      isCLick: 0,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      select: {},
      isTop: false,
      ywsqList: [],
      sourceList: [],
      checkList: [],
      approveStatusList: [],
      isData: false,
      setTime: 0,
      calendar: {
        minDate: "",
        maxDate: "",
        monthNum: 25,
      },
      readStateList: [],
    };
  },
  onLoad() {
    // 测试请求

    if (uni.getStorageSync("userInfo")) {
      this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
    }
    this.getData();

    this.chooseTimed();
  },
  onShow() {
    this.queryParams.pageNum = 1;
      this.tableData = [];
    this.getList();
  },
  methods: {
    // 设置默认日期，最大值为今天，最小值为去年今天
    chooseTimed() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month <= 9) {
        month = "0" + month;
      }
      if (day <= 9) {
        day = "0" + day;
      }
      let minyear = year - 1;
      let maxyear = year + 1;
      this.calendar.minDate = minyear + "-" + month + "-" + day;
      this.calendar.maxDate = maxyear + "-" + month + "-" + day;
    },
    openSign(id) {
      uni.navigateTo({
        url:
          "/pages/index/onlineSign?id=" +
          id +
          "&index=" +
          this.isCLick +
          "&pkId=" +
          this.pkId,
      });
    },
    handleExport() {
      let url, nameEd;
      if (this.isCLick == 1) {
        url = "/system/manage/index/export-approval";
        nameEd = "已办";
      } else {
        url = "/system/manage/index/receive-approval-export";
        nameEd = "签呈接收";
      }
      let obj = Object.assign({}, this.select, this.queryParams);
      this.$refs.exportBall.handleExport(
        url,
        obj,
        `${nameEd}${new Date().getTime()}`
      );
    },
    toReceive(id) {
      api
        .receiveApproval({
          pkIdList: [id],
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            this.getList1();
          }
        });
    },
    confirm(e) {
      if (this.setTime == 0) {
        this.$set(this.select, "creationTime", [e[0], e[e.length - 1]]);
        this.$set(
          this.select,
          "creationTimeVal",
          e[0] + " 至 " + e[e.length - 1]
        );
      } else if (this.setTime == 1) {
        console.log(222);
        this.$set(this.select, "endTime", [e[0], e[e.length - 1]]);
        this.$set(this.select, "endTimeVal", e[0] + " 至 " + e[e.length - 1]);
      } else {
        this.$set(this.select, "sendTime", [e[0], e[e.length - 1]]);
        this.$set(this.select, "sendTimeVal", e[0] + " 至 " + e[e.length - 1]);
      }

      this.isData = false;
    },
    getData() {
      api.signSource().then((res) => {
        this.sourceList = res.data;
      });
      api.approvalBusiness().then((res) => {
        this.ywsqList = res.data;
      });
      api.approvalOperation().then((res) => {
        this.checkList = res.data;
      });
      api.approvalStatus().then((res) => {
        this.approveStatusList = res.data;
      });
      api.readState().then((res) => {
        this.readStateList = res.data;
      });
    },
    bindPickerChange(e) {
      this.$set(
        this.select,
        "signSourceVal",
        this.sourceList[e.detail.value].label
      );
      this.$set(
        this.select,
        "signSource",
        this.sourceList[e.detail.value].value
      );
    },
    bindPickerChange1(e) {
      this.$set(
        this.select,
        "approvalBusinessVals",
        this.ywsqList[e.detail.value].label
      );
      this.$set(
        this.select,
        "approvalBusiness",
        this.ywsqList[e.detail.value].value
      );
    },
    // bindPickerChange2(e) {
    //   this.$set(
    //     this.select,
    //     "approvalOperationVal",
    //     this.checkList[e.detail.value].label
    //   );
    //   this.$set(
    //     this.select,
    //     "approvalOperation",
    //     this.checkList[e.detail.value].value
    //   );
    // },
    bindPickerChange3(e) {
      this.$set(
        this.select,
        "approveStatusVal",
        this.approveStatusList[e.detail.value].label
      );
      this.$set(
        this.select,
        "approveStatus",
        this.approveStatusList[e.detail.value].value
      );
    },
    bindPickerChange4(e) {
      this.$set(
        this.select,
        "receiveStatusVal",
        this.readStateList[e.detail.value].label
      );
      this.$set(
        this.select,
        "receiveStatus",
        this.readStateList[e.detail.value].value
      );
    },
    openTop() {
      this.isTop = true;
    },
    onReachBottom() {
      this.queryParams.pageNum++;
      this.getList();
    },
    changeTab(index) {
      this.isCLick = index;
      this.queryParams.pageNum = 1;
      this.tableData = [];
      this.getList();
    },
    getList() {
      let select = {
        userName: this.select.userName,
        receiveStatus: this.select.receiveStatus,
        remark: this.select.remark,
        approvalBusinessVal: this.select.approvalBusinessVal,
        approvalCode: this.select.approvalCode,
        approvalBusiness: this.select.approvalBusiness,
        approveStatus: this.select.approveStatus,
        creationTime: this.select.creationTime,
        endTime: this.select.endTime,
      };
      if (this.isCLick == 0) {
        api.waitApproval(select).then((res) => {
          this.tableData = res.data;
        });
      } else if (this.isCLick == 1) {
        api
          .completeApproval(Object.assign({}, this.queryParams, select))
          .then((res) => {
            this.total = res.total;
            res.rows.forEach((item) => {
              if (item.approvalIndex == undefined) {
                item.approvalIndex = item.detailList.length;
              }
            });
            this.tableData = this.tableData.concat(res.rows);
          });
      } else {
        api
          .receiveApprovalList(Object.assign({}, this.queryParams, this.select))
          .then((res) => {
            this.tableData = this.tableData.concat(res.rows);
            this.total = res.total;
          });
      }
    },
    getList1() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.isTop = false;
      this.getList();
    },
    reset() {
      this.select = {};
    },
    logOut() {
      uni.showModal({
        title: '确定退出吗',
        success: function (res) {
          if (res.confirm) {
            login.logout().then(() => {
              uni.reLaunch({
                url: "/pages/login/index",
              });
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
}
.header_a {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  z-index: 1;
}
.header {
  background: #ffffff;
  padding: 22rpx 44rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  .head_l {
    display: flex;
    align-items: center;
    img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      margin-right: 20rpx;
    }
  }
  .head_r {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    font-family: PingFang SC-Semibold, PingFang SC;
    img {
      width: 34rpx;
      height: 34rpx;
      margin-left: 20rpx;
    }
  }
}
.zhan {
  height: 130rpx;
}
.kuang {
  background: #ffffff;
  padding: 14rpx 22rpx;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 10px 10px 10px 10px;
  margin: 20rpx 24rpx;
  .kuang_t {
    font-size: 12px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 400;
    color: #999;
    display: flex;
    align-items: center;
    view {
      padding-bottom: 4rpx;
    }
    .old {
      margin-right: 20rpx;
    }
    .act {
      margin-right: 20rpx;
      font-size: 14px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      border-bottom: 4rpx solid #1678ff;
    }
  }
  .kuang_i {
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
    padding: 20rpx 0 40rpx 0;
    // border: 1px solid rgba(0,0,0,0.05);
    .xian {
      margin: 20rpx 0;
    }
    .kuang_if {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tit1 {
      font-size: 12px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-top: 10rpx;
    }
    .tit2 {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ed1d25;
    }
    .tit3 {
      font-size: 10px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 10rpx;
    }
  }
  .timeCss {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .timeCss_r {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kung_b {
    margin-left: 10rpx;
    width: 140rpx;
    // margin-top: 10rpx;
  }
}
.tt {
  padding: 20rpx;
  margin-top: 40px;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  .btnn {
    margin-right: 40rpx;
  }
}
::v-deep .u-input {
  padding: 0 9px !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 12px;
}
::v-deep .u-form-item__body {
  padding: 5px 0;
}
</style>