front-end/hdApp/src/admin/work/list.vue

<template>
  <view class="app-main app-content">
    <view class="input-wrap_box">

      <view @click="setSearchType" style="font-size:30upx;margin-right:10upx;color:#666666">
      <text>编号</text>
      </view>

      <view> <AppSearchModule placeholder="请输入编号" @input="searchFn"/> </view>

      <view class="select-dn_bx">
        <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='时间' />
      </view>
    </view>
    <view class="app-tabs">
      <app-tabs :tabs="tabs" :isFixed="false" :top="50" :currentTab="tabIndex" :height="100" @change="change" itemWidth="33%" />
    </view>
    <div class="list-wrap">
      <block v-if="!$util.isEmpty(list.data)">
        <div class="list" v-for="(item, index) in list.data" :key="index">

          <workItem :item="item"  @cancel="cancel" @printWork="printWork"></workItem>

        </div>
      </block>
      <block v-else>
        <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
      </block>
    </div>

    <view class="app-footer"> <view class="admin-button-com middle blue" style="margin-right:60upx;font-size:30upx;height:70upx;line-height:70upx;width:160upx;" @click="pageTo({url:'/admin/work/add'})">新增</view> </view>

  </view>
</template>
<script>
import AppTabs from "@/components/plugin/tabs";
import NotLogin from "@/components/not-login";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
import { list } from "@/mixins";
import { mapGetters } from "vuex";
import { getWorkList,cancelWork,print} from "@/api/work";
import AppSearchModule from "@/components/module/app-search";
import DropShopSelect from "@/components/module/shopSelect";
import workItem from "./components/workItem";
import DateSelect from "@/components/module/dateSelect";
export default {
  name: "list",
  components: {
    AppTabs,
    AppWrapperEmpty,
    ModalModule,
    AppSearchModule,
    DropShopSelect,
    workItem,
    DateSelect,
    NotLogin
  },
  mixins: [list],
  computed: { ...mapGetters(["getLoginInfo", "getDictionariesInfo"]) },
  data() {
    return {
    	orderId:'',
      seekVal: "",
      isShow: false,
      customizationTime: [],
      customizationTimeType: "",
      tabIndex: 0,
      tabs: [
        {
          name: "全部",
          value: '',
          id: -1,
        },
        {
          name: "待完成",
          value: '',
          id: 0,
        },
        {
          name: "已完成",
          value: '',
          id: 1,
        }
      ],
      selectItemId: "",
      operateIndex: null,
      operateData: {},
      classifyForm: {
        categoryId: "",
        usageId: "",
      },
      searchType:0,
      searchTypeName:'名称',
      searchTime:'',
      startTime:'',
      endTime:''
    };
  },
  onPullDownRefresh() {
    this.resetList();
    this._list()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    if (!this.list.finished) {
      this._list().then((res) => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  mounted() {
  },
  onLoad() {
    let tabIndex = uni.getStorageSync("switchTabQuery") || null;
    if (tabIndex) {
      uni.removeStorageSync("switchTabQuery");
      this.tabIndex = parseInt(tabIndex.tabIndex);
    }
    this._list();
  },
  methods: {
    printWork(item){
			print({id:item.id}).then(res=>{
				if(res.code == 1){
					this.$msg(res.msg)
				}
			})
    },
    cancel(item){
			let that = this
			that.$util.confirmModal({content:'确认取消？'},() => {
						cancelWork({id:item.id}).then(res=>{
							if(res.code == 1){
								item.status = 2
								that.$msg('取消成功')
							}
						})
			})
    },
    setSearchType(){
      let that = this
      uni.showActionSheet({
        itemList: ['搜索类型：', '名称', '编号'],
        success: function (respond) {
          let currentIndex = respond.tapIndex
          if(currentIndex == 0){
            return false
          }
          that.searchType = Number(currentIndex) - 1
          that.searchTypeName = that.searchType == 0 ? '名称' : '编号'
          that.searchFn()
        }
      })
    },
    selectDateFn(val) {
      this.searchTime = val.searchTime
      this.startTime = val.startTime
      this.endTime = val.endTime
      this.resetList();
      this._list();
    },
    searchFn(e) {
      this.resetList();
      this.seekVal = e;
      this._list()
    },
    _list() {
      return getWorkList({
        searchTime: this.searchTime,
        startTime: this.startTime,
        endTime: this.endTime,
        status: this.tabs[this.tabIndex].id,
        name: this.seekVal,
        page: this.list.page,
        searchType:this.searchType,
      }).then((res) => {
        this.completes(res);
        if (this.$util.isEmpty(res.data)){
          return false
        }
      });
    },
    change(e) {
      if (this.tabIndex == e.index) {
        return false;
      } else {
        this.tabIndex = e.index;
        this.resetList();
        this._list();
      }
    },
    classifyOrder(id) {
      this.currentOrderId = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.admin-button-com {
  width: 140upx;
  height: 60upx;
  padding: 0;
  line-height: 60upx;
  text-align: center;
  font-size: 26upx;
  &.active {
    border: 1upx solid #ccc;
  }
}
page{
	width: 750upx;
	overflow: hidden;
}
.app-content {
  padding-top: 100upx;
  padding-bottom: 1upx;
	overflow: hidden;
  .select-dn_bx {
    padding-left: 18upx;
  }

  .app-tabs {
    position: fixed;
    /* 手机mobile屏幕小于1000px */
    @media screen and (max-width: 1100px) {
      width: 100%;
    }
    /* 收银台cashier屏幕大于1000px */
    @media screen and (min-width:1100px) {
      width: 40%;
    }    
    z-index: 9;
  }
  .input-wrap_box {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 10;
    /* 手机mobile屏幕小于1000px */
    @media screen and (max-width: 1100px) {
      width: 100%;
    }
    /* 收银台cashier屏幕大于1000px */
    @media screen and (min-width:1100px) {
      width: 40%;
    }    
    height: 100upx;
    display: flex;
    align-items: center;
    padding: 0 30upx;
    & > view:nth-child(2) {
      flex: 1;
    }
  }
  .list-wrap {
    padding-top: 100upx;
    .list {
      background-color: #fff;
      margin-bottom: 20upx;
    }
  }
	.app-footer {
		justify-content: flex-end;
	}
}
.upload-confirm-wrap {
  max-height: 600upx;
  overflow-y: auto;
  .modal-tit {
    @include disFlex(center, center);
    font-size: 40upx;
    margin-top: 30upx;
    margin-bottom: 50upx;
    .iconfont {
      color: #09bb07;
      margin-right: 20upx;
      font-size: 50upx;
    }
  }
  .sel-wrap {
    color: $fontColor2;
    font-size: 32upx;
    .sel-tit {
      text-align: left;
    }
    .sel-btn {
      @include disFlex(center, flex-start);
      flex-wrap: wrap;
      padding: 10upx 0 40upx;
      .admin-button-com {
        margin-right: 20upx;
        margin-top: 20upx;
        padding-top: 16upx;
        padding-bottom: 16upx;
        border-radius: 4upx;
      }
    }
  }
}
</style>