| New file |
| | |
| | | <template> |
| | | <view> |
| | | <view class="page-header"> |
| | | <view class="search-item"> |
| | | <view class="left">日期间隔</view> |
| | | <view class="right"> |
| | | <picker mode="selector" :value="curDateGap" :range="dateRangePicker" |
| | | @change="onDateRangePickerChangeHandler"> |
| | | <input disabled v-model="curDateGap" placeholder="请选择日期间隔" /> |
| | | <view class="picker-overlay"></view> |
| | | </picker> |
| | | </view> |
| | | </view> |
| | | <view class="search-item"> |
| | | <view class="left">开始日期</view> |
| | | <view class="right"> |
| | | <uni-datetime-picker :clear-icon="false" type="date" v-model="startDate" |
| | | :disabled="!enableCustomDateRange"> |
| | | <view class="datetime-picker-inner" |
| | | :class="enableCustomDateRange?'font__enable':'font__disable'"> |
| | | <text>{{ startDate }}</text> |
| | | </view> |
| | | </uni-datetime-picker> |
| | | </view> |
| | | </view> |
| | | <view class="search-item"> |
| | | <view class="left">结束日期</view> |
| | | <view class="right"> |
| | | <uni-datetime-picker :clear-icon="false" type="date" v-model="endDate" |
| | | :disabled="!enableCustomDateRange"> |
| | | <view class="datetime-picker-inner" |
| | | :class="enableCustomDateRange?'font__enable':'font__disable'">{{ endDate }}</view> |
| | | </uni-datetime-picker> |
| | | </view> |
| | | </view> |
| | | <view class="search-item"> |
| | | <view class="left">单据号</view> |
| | | <view class="right"> |
| | | <input type="text" auto-focus v-model="HBillNo" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="button-groups"> |
| | | <button type="default" size="mini" class="btn-b" @tap.stop="onAddClickHandler">新增</button> |
| | | <button type="default" size="mini" class="btn-c" @tap.stop="onSearchClickHandler">查询</button> |
| | | <button type="default" size="mini" class="btn-a" @tap.stop="onResetClickHandler">重置</button> |
| | | </view> |
| | | </view> |
| | | <view style="width: 100%;height: 16rpx;background-color: #e5e5e5;"></view> |
| | | <scroll-view id="pageContent" scroll-y class="page-content" :style="{height: pageContentHeight + 'px'}"> |
| | | <view v-for="(item,index) in listData" :key="index"> |
| | | <uni-card :title="item.物料代码" :extra="item.单据号" style="margin: 10px;" |
| | | @tap="showDetail = showDetail==index?-1:index"> |
| | | <view class="card-detail"> |
| | | <view class="detail" v-if="item.物料代码"> |
| | | <text>物料代码:</text>{{item.物料代码}} |
| | | </view> |
| | | <view class="detail" v-if="item.物料名称"> |
| | | <text>物料名称:</text>{{item.物料名称}} |
| | | </view> |
| | | <view class="detail" v-if="item.部门代码"> |
| | | <text>部门代码:</text>{{item.部门代码}} |
| | | </view> |
| | | <view class="detail" v-if="item.部门"> |
| | | <text>部门:</text>{{item.部门}} |
| | | </view> |
| | | <view class="detail" v-if="item.业务员代码"> |
| | | <text>业务员代码:</text>{{item.业务员代码}} |
| | | </view> |
| | | <view class="detail" v-if="item.业务员"> |
| | | <text>业务员:</text>{{item.业务员}} |
| | | </view> |
| | | <view class="detail" v-if="item.结算方式"> |
| | | <text>结算方式:</text>{{item.结算方式}} |
| | | </view> |
| | | <view class="detail" v-if="item.供应商代码"> |
| | | <text>供应商代码:</text>{{item.供应商代码}} |
| | | </view> |
| | | <view class="detail" v-if="item.供应商"> |
| | | <text>供应商:</text>{{item.供应商}} |
| | | </view> |
| | | <view class="detail" v-if="item.币别"> |
| | | <text>币别:</text>{{item.币别}} |
| | | </view> |
| | | <view class="detail" v-if="item.汇率"> |
| | | <text>汇率:</text>{{item.汇率}} |
| | | </view> |
| | | <!-- --> |
| | | <view class="detail" v-if="item.主管"> |
| | | <text>主管:</text>{{item.主管}} |
| | | </view> |
| | | <view class="detail" v-if="item.采购方式"> |
| | | <text>采购方式:</text>{{item.采购方式}} |
| | | </view> |
| | | |
| | | <view class="detail" v-if="item.含税单价"> |
| | | <text>含税单价:</text>{{item.含税单价}} |
| | | </view> |
| | | <view class="detail" v-if="item.折扣率"> |
| | | <text>折扣率:</text>{{item.折扣率}} |
| | | </view> |
| | | <view class="detail" v-if="item.实际含税单价"> |
| | | <text>实际含税单价:</text>{{item.实际含税单价}} |
| | | </view> |
| | | </view> |
| | | <view class="card-detail" v-if="showDetail == index"> |
| | | <view class="detail" v-if="item.制单人"> |
| | | <text>制单人:</text>{{item.制单人}} |
| | | </view> |
| | | <view class="detail" v-if="item.制单日期"> |
| | | <text>制单日期:</text>{{item.制单日期.substr(0,10)}} |
| | | </view> |
| | | <view class="detail" v-if="item.审核人"> |
| | | <text>审核人:</text>{{item.审核人}} |
| | | </view> |
| | | <view class="detail" v-if="item.审核日期"> |
| | | <text>审核日期:</text>{{item.审核日期.substr(0,10)}} |
| | | </view> |
| | | <view class="detail" v-if="item.修改人"> |
| | | <text>修改人:</text>{{item.修改人}} |
| | | </view> |
| | | <view class="detail" v-if="item.修改日期"> |
| | | <text>修改日期:</text>{{item.修改日期.substr(0,10)}} |
| | | </view> |
| | | <view class="detail" v-if="item.关闭人"> |
| | | <text>关闭人:</text>{{item.关闭人}} |
| | | </view> |
| | | <view class="detail" v-if="item.关闭日期"> |
| | | <text>关闭日期:</text>{{item.关闭日期.substr(0,10)}} |
| | | </view> |
| | | <view class="detail" v-if="item.作废人"> |
| | | <text>作废人:</text>{{item.作废人}} |
| | | </view> |
| | | <view class="detail" v-if="item.作废日期"> |
| | | <text>作废日期:</text>{{item.作废日期.substr(0,10)}} |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | <view class="more" v-if="showDetail == index && operations != index"> |
| | | <view class="part" style="border-right: 1px solid #eee;"> |
| | | <uni-icons type="top" style="color: #888;margin-right: 10rpx;" size="14"></uni-icons>收起 |
| | | </view> |
| | | <view class="part" @tap.stop="operations = operations==index?-1:index"> |
| | | <uni-icons type="more-filled" style="color: #888;margin-right: 10rpx;" |
| | | size="14"></uni-icons>操作 |
| | | </view> |
| | | </view> |
| | | <view class="more" v-if="showDetail != index && operations != index"> |
| | | <view class="part" style="border-right: 1px solid #eee;"> |
| | | <uni-icons type="bottom" style="color: #888;margin-right: 10rpx;" size="14"></uni-icons>更多信息 |
| | | </view> |
| | | <view class="part" @tap.stop="operations = operations==index?-1:index"> |
| | | <uni-icons type="more-filled" style="color: #888;margin-right: 10rpx;" |
| | | size="14"></uni-icons>操作 |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="op" v-if="operations == index"> |
| | | <!-- <button class="op3" size="mini" plain @tap.stop="edit(item)">编辑</button> --> |
| | | <button class="op4" size="mini" plain @tap.stop="del(item)">删除</button> |
| | | <button class="op5" size="mini" plain @tap.stop="operations = -1">取消操作</button> |
| | | </view> |
| | | </uni-card> |
| | | </view> |
| | | <view class="over" v-if="listData.length == 0">暂无数据</view> |
| | | </scroll-view> |
| | | <!-- 分页器 --> |
| | | <view class="page-footer"> |
| | | <uni-pagination id="pagination" title="标题文字" v-model="pageMeta.curPage" :pageSize="pageMeta.size" |
| | | :total="pageMeta.total" @change="onPageChangeHandler"></uni-pagination> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import dayjs from 'dayjs' |
| | | import { |
| | | CommonUtils |
| | | } from '@/utils/common.js' |
| | | import { |
| | | getUserInfo |
| | | } from "../../utils/auth"; |
| | | export default { |
| | | data() { |
| | | return { |
| | | // 计算卡片列表高度 |
| | | pagination_top: 0, |
| | | pageContent_top: 0, |
| | | // 分页控制 |
| | | pageMeta: { |
| | | curPage: 1, |
| | | size: 50, |
| | | total: 0, |
| | | }, |
| | | // 滚动控制 |
| | | scrollTop: 0, |
| | | old: { |
| | | scrollTop: 0 |
| | | }, |
| | | |
| | | dateRangePicker: ["任意间隔", "今天", "近两天", "近三天", "近四天", "近五天", "近六天", "近七天", "近30天"], |
| | | curDateGap: "近七天", |
| | | enableCustomDateRange: false, |
| | | startDate: dayjs(new Date()).subtract(7, 'day').format('YYYY-MM-DD'), |
| | | endDate: dayjs(new Date()).format('YYYY-MM-DD'), |
| | | HBillNo: '', |
| | | |
| | | listData: [], |
| | | showDetail: -1, |
| | | operations: -1, |
| | | } |
| | | }, |
| | | computed: { |
| | | pageContentHeight: { |
| | | get() { |
| | | return (this.pagination_top - this.pageContent_top) |
| | | } |
| | | }, |
| | | }, |
| | | onLoad() { |
| | | this.onSearchClickHandler() |
| | | }, |
| | | onPullDownRefresh() { |
| | | this.onSearchClickHandler() |
| | | }, |
| | | async onReady() { |
| | | // #ifndef MP-WEIXIN |
| | | let query = uni.createSelectorQuery().in(this) |
| | | query.select("#pagination") |
| | | .boundingClientRect((data) => { |
| | | if (data) { |
| | | this.pagination_top = data.top |
| | | } else { |
| | | console.log("未找到#pagination节点"); |
| | | } |
| | | }) |
| | | .exec(); |
| | | query.select("#pageContent") |
| | | .boundingClientRect((data) => { |
| | | if (data) { |
| | | this.pageContent_top = data.top |
| | | } else { |
| | | console.log("未找到#pageContent节点"); |
| | | } |
| | | }) |
| | | .exec(); |
| | | // #endif |
| | | |
| | | }, |
| | | methods: { |
| | | goTop: function(e) { |
| | | // 解决view层不同步的问题 |
| | | this.scrollTop = this.old.scrollTop |
| | | this.$nextTick(function() { |
| | | this.scrollTop = 0 |
| | | }); |
| | | }, |
| | | onDateRangePickerChangeHandler({ |
| | | detail |
| | | }) { |
| | | this.enableCustomDateRange = false |
| | | this.curDateGap = this.dateRangePicker[detail.value] |
| | | let date = new Date() |
| | | switch (this.curDateGap) { |
| | | case "今天": |
| | | this.startDate = dayjs(date).format("YYYY-MM-DD") |
| | | break; |
| | | case "近一天": |
| | | this.startDate = dayjs(date).subtract(1, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近两天": |
| | | this.startDate = dayjs(date).subtract(2, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近三天": |
| | | this.startDate = dayjs(date).subtract(3, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近四天": |
| | | this.startDate = dayjs(date).subtract(4, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近五天": |
| | | this.startDate = dayjs(date).subtract(5, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近六天": |
| | | this.startDate = dayjs(date).subtract(6, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近七天": |
| | | this.startDate = dayjs(date).subtract(7, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | case "近30天": |
| | | this.startDate = dayjs(date).subtract(30, 'day').format("YYYY-MM-DD") |
| | | break; |
| | | } |
| | | if (this.curDateGap == '任意间隔') { |
| | | this.enableCustomDateRange = true |
| | | } |
| | | }, |
| | | onSearchClickHandler() { |
| | | let sWhere = "" |
| | | if (this.startDate) { |
| | | sWhere += " and CONVERT(varchar(100),日期, 23) >= '" + this.startDate + "'"; |
| | | } |
| | | if (this.endDate) { |
| | | sWhere += " and CONVERT(varchar(100),日期, 23) <= '" + this.endDate + "'"; |
| | | } |
| | | if (this.HBillNo) { |
| | | sWhere += " and 单据号 like '%" + this.HBillNo + "%'"; |
| | | } |
| | | this.get_DisplayPage(sWhere); |
| | | }, |
| | | clear() { |
| | | this.curDateGap = "近七天" |
| | | this.enableCustomDateRange = false |
| | | this.startDate = dayjs(new Date()).subtract(7, 'day').format('YYYY-MM-DD') |
| | | this.endDate = dayjs(new Date()).format('YYYY-MM-DD') |
| | | this.HBillNo = '' |
| | | }, |
| | | async onResetClickHandler() { |
| | | this.clear() |
| | | await this.$nextTick() |
| | | this.onSearchClickHandler() |
| | | }, |
| | | get_DisplayPage(sWhere) { |
| | | CommonUtils.doRequest2({ |
| | | url: '/Cg_POOrderBill/QueryListEdit', |
| | | data: { |
| | | "sWhere": sWhere, |
| | | "user": getUserInfo()["Czymc"], |
| | | }, |
| | | resFunction: (res) => { |
| | | let { |
| | | data, |
| | | Message, |
| | | count |
| | | } = res.data |
| | | console.log('res.data: ', res.data); |
| | | this.listData = data; |
| | | this.pageMeta.total = count |
| | | uni.stopPullDownRefresh() |
| | | } |
| | | }) |
| | | }, |
| | | onPageChangeHandler() { |
| | | this.onSearchClickHandler() |
| | | this.goTop() |
| | | }, |
| | | // 新增 |
| | | onAddClickHandler() { |
| | | uni.navigateTo({ |
| | | url: "/pages/EmployeeRecords/EmployeeRecordsBill?operationType=1" |
| | | }) |
| | | }, |
| | | //删除点检记录单 |
| | | del(item) { |
| | | console.log(item); |
| | | uni.showModal({ |
| | | title: '删除确认', |
| | | content: '确认要删除吗,删除后不能恢复', |
| | | success: (res) => { |
| | | if (res.confirm) { |
| | | console.log('用户点击确定'); |
| | | CommonUtils.doRequest2({ |
| | | url: '/Sc_EmployeeSignInNoteBillController/deleteBill', |
| | | data: { |
| | | HItemID: item['HInterID'], |
| | | user: getUserInfo()['Czymc'] |
| | | }, |
| | | resFunction: (res) => { |
| | | let { |
| | | data, |
| | | count, |
| | | Message |
| | | } = res.data |
| | | if (count == 1) { |
| | | uni.showToast({ |
| | | icon: count === 1 ? 'success' : 'error', |
| | | title: Message, |
| | | duration: 2000 |
| | | }); |
| | | |
| | | // 等待提示显示完成再刷新 |
| | | setTimeout(() => { |
| | | this.onSearchClickHandler(); |
| | | }, 2000); |
| | | } else { |
| | | uni.showToast({ |
| | | icon: 'none', |
| | | title: Message |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | } else if (res.cancel) { |
| | | console.log('用户点击取消'); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .page-header { |
| | | display: flex; |
| | | box-sizing: border-box; |
| | | padding: 20rpx; |
| | | flex-direction: column; |
| | | gap: 10rpx; |
| | | font-size: 32rpx; |
| | | |
| | | .search-item { |
| | | display: flex; |
| | | flex-direction: row; |
| | | gap: 10rpx; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .left { |
| | | width: 4em; |
| | | } |
| | | |
| | | .right { |
| | | flex: 1; |
| | | position: relative; |
| | | border-radius: 22rpx; |
| | | border: 1px solid #acacac; |
| | | display: flex; |
| | | padding: 4rpx 10rpx; |
| | | |
| | | picker { |
| | | width: 100%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | input { |
| | | width: inherit; |
| | | padding: 8rpx 20rpx; |
| | | font-size: 30rpx; |
| | | } |
| | | |
| | | .datetime-picker-inner { |
| | | padding: 8rpx 20rpx; |
| | | font-size: 30rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .font__enable { |
| | | color: #000; |
| | | } |
| | | |
| | | .font__disable { |
| | | color: #cccccc; |
| | | } |
| | | } |
| | | |
| | | .button-groups { |
| | | box-sizing: border-box; |
| | | padding: 10rpx 0 0 0; |
| | | display: flex; |
| | | flex-direction: row; |
| | | gap: 10rpx; |
| | | justify-content: space-between; |
| | | |
| | | button { |
| | | border-radius: 50rpx; |
| | | width: 180rpx; |
| | | height: 66rpx; |
| | | line-height: 66rpx; |
| | | font-size: 28rpx; |
| | | } |
| | | |
| | | .btn-a { |
| | | background-color: #acacac; |
| | | color: #fff; |
| | | } |
| | | |
| | | .btn-b { |
| | | background-color: #41a863; |
| | | color: #fff; |
| | | } |
| | | |
| | | .btn-c { |
| | | background-color: #3a78ff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .page-content { |
| | | // height: 40vh; |
| | | box-sizing: border-box; |
| | | padding: 10rpx 0; |
| | | |
| | | .card-detail { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | line-height: 120%; |
| | | |
| | | .detail { |
| | | // width: 50%; |
| | | font-size: 26rpx; |
| | | margin-bottom: 12rpx; |
| | | color: #555; |
| | | margin-right: 20rpx; |
| | | |
| | | text { |
| | | color: #999; |
| | | font-size: 26rpx; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .more { |
| | | color: #888; |
| | | font-size: 24rpx; |
| | | display: flex; |
| | | border-top: 1px solid #eee; |
| | | padding-top: 20rpx; |
| | | |
| | | .part { |
| | | width: 50%; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .op { |
| | | display: flex; |
| | | justify-content: space-around; |
| | | margin-top: 20rpx; |
| | | |
| | | button { |
| | | padding: 0; |
| | | width: 150rpx; |
| | | font-size: 25rpx; |
| | | } |
| | | |
| | | .op1 { |
| | | border: 1px solid #41a863; |
| | | color: #41a863; |
| | | } |
| | | |
| | | .op2 { |
| | | border: 1px solid #d98d00; |
| | | color: #d98d00; |
| | | } |
| | | |
| | | .op3 { |
| | | border: 1px solid #3a78ff; |
| | | color: #3a78ff; |
| | | } |
| | | |
| | | .op4 { |
| | | border: 1px solid #da0000; |
| | | color: #da0000; |
| | | } |
| | | |
| | | .op5 { |
| | | border: 1px solid #888; |
| | | color: #888; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .page-footer { |
| | | position: fixed; |
| | | bottom: 0; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | padding: 32rpx 40rpx; |
| | | } |
| | | </style> |