material_pre_request.vue
7.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!--
* @Date: 2024-07-23 12:53:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-23 18:27:27
* @FilePath: /temple_material_request/src/views/material_pre_request.vue
* @Description: 待申领物资页面
-->
<template>
<div class="material-pre-request-page">
<div class="list-wrapper">
<van-sticky>
<van-row justify="space-between" class="select-all-item">
<van-col span="8">
<!-- TODO：编辑模式下，不能确认申请 -->
<van-icon name="passed" size="1.25rem" /> <span :style="{ color: styleColor.baseColor }">全选</span>
<!-- TODO：非编辑模式下，显示购物车总数量 -->
<span :style="{ color: styleColor.baseColor }">品项数: 1000</span>
</van-col>
<van-col span="16" :style="{ textAlign: 'right', fontSize: '0.85rem', color: styleColor.baseColor }">
<van-icon name="records-o" /> 编辑
<van-icon name="delete-o" /> 删除
</van-col>
</van-row>
</van-sticky>
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="item in list" :key="item" class="list-boxer">
<van-row align="center" justify="space-between">
<van-col span="16" style="display: flex;">
<van-icon name="passed" size="1.25rem" /> <div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
</van-col>
<van-col span="8" style="display: flex; align-items: center;">
<van-field v-model="num_value" style="border: 1px solid #f0f0f0; padding: 0; border-radius: 5px;" label="" label-width="0" input-align="center" placeholder="数量" type="number" >
<template #left-icon></template>
</van-field> <span style="font-size: 0.9rem; color: #666;">个</span>
</van-col>
</van-row>
</div>
</van-list>
<div style="height: 6rem;"></div>
<div style="position: fixed; left: 0; right: 0; bottom:4.5rem; padding: 1rem;">
<van-button icon="plus" type="primary" :color="styleColor.baseColor" plain block @click="addMore">添加更多</van-button>
</div>
</div>
<div class="control-bar">
<!-- -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center;" @click="showPicker = true">
<div style="font-size: 0.85rem; color: #202020;">使用时间:</div>
<div style="border: 1px solid #f0f0f0; border-radius: 5px; padding: 0.5rem 0.35rem 0.5rem 1rem; min-width: 6rem; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between;">{{ use_date }} <van-icon name="notes-o" size="1rem" :color="styleColor.baseColor" /></div>
</div>
<div style="display: flex; align-items: center;">
<van-button type="primary" :color="styleColor.baseColor" @click="onConfirmRequest">确定申领</van-button>
</div>
</div>
</div>
</div>
<van-popup v-model:show="showPicker" position="bottom">
<van-date-picker
v-model="currentDate"
title="日期选择"
:min-date="minDate"
:max-date="maxDate"
:columns-type="columns_type"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
<van-dialog v-model:show="showType" @confirm="onDialogConfirm" title="" show-cancel-button :confirm-button-color="styleColor.baseColor">
<div style="padding: 1.5rem 0 0; text-align: center; font-size: 0.95rem; font-weight: bold;">请确认您本次是为哪个组别申领物资</div>
<div style="display: flex; align-items: center; padding: 1rem;">
<!-- <div style="font-size: 0.9rem; margin-right: 1rem; width: 5rem;">申领组: </div> -->
<div>
<van-radio-group v-model="type_checked" direction="horizontal" style="font-size: 0.9rem;">
<van-radio name="1" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">单选框 1</van-radio>
<van-radio name="2" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">单选框 2</van-radio>
<van-radio name="3" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">单选框 3</van-radio>
</van-radio-group>
</div>
</div>
</van-dialog>
<choose-material :show="show_choose_material" @close="onCloseChoose"></choose-material>
<material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { styleColor } from "@/constant.js";
import dayjs from "dayjs";
import chooseMaterial from '@/components/chooseMaterial/index.vue';
import materialDetail from '@/components/materialDetail/index.vue';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const num_value = ref('');
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
list.value.push(list.value.length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (list.value.length >= 40) {
finished.value = true;
}
}, 1000);
};
const onClickTitle = (item) => { // 点击物资标题回调
console.warn(item);
show_material_detail.value = true;
}
const showPicker = ref(false);
const currentDate = ref([]);
const columns_type = ref(['year', 'month', 'day']);
const minDate = ref();
const maxDate = ref();
const use_date = ref('');
const onConfirm = ({ selectedValues, selectedOptions }) => {
use_date.value = selectedValues.join("-");
showPicker.value = false;
};
onMounted(() => {
minDate.value = new Date()
})
const addMore = () => { // 添加更多回调
console.warn('addMore');
show_choose_material.value = true;
}
const onConfirmRequest = () => { // 确定申领回调
console.warn('onConfirmRequest');
showType.value = true;
}
const showType = ref(false);
const type_checked = ref('');
const onDialogConfirm = () => {
console.warn(type_checked.value);
}
const show_choose_material = ref(false);
const onCloseChoose = () => {
show_choose_material.value = false;
}
const show_material_detail = ref(false);
const onCloseDetail = () => {
show_material_detail.value = false;
}
</script>
<style lang="less" scoped>
.material-pre-request-page {
.list-wrapper {
position: relative;
width: 100%;
.select-all-item {
padding: 0.5rem 1rem;
background-color: white;
}
.list-boxer {
margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
}
}
.control-bar {
display: flex; position: fixed; padding: 1rem 1.5rem; left: 0; right: 0; bottom: 0; background-color: white; width: calc(100% - 3rem); box-shadow: 0rem -0.33rem 0.33rem 0.08rem rgba(0,0,0,0.06); display: flex; flex-direction: column;
}
}
:deep(.van-picker__confirm) {
color: #A67939;
}
</style>