Hooke / w4-vux-template

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8e544940 1 parent 7a744615

test

Inline Side-by-side
Showing 72 changed files with 10684 additions and 19 deletions
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 + <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 + <title><%= htmlWebpackPlugin.options.title %></title>
9 + </head>
10 + <body>
11 + <noscript>
12 + <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 + </noscript>
14 + <div id="login"></div>
15 + <!-- built files will be auto injected -->
16 + </body>
17 +</html>
1 +<template lang="html">
2 + <div v-transfer-dom>
3 + <x-dialog v-model="tmp_show" class="material_dialog" :hide-on-blur="false">
4 + <div class="dialogTitle">录入新/原物料</div>
5 + <div class="material_info">
6 + <ul>
7 + <li>
8 + <label for="">
9 + <span style="margin-top: 0.2rem;">物料类别<em class="red">*</em></span>
10 + </label>
11 + <div class="el-form-item_content">
12 + <!-- <el-select style="width: 100%;" ref="select1" v-model="form.class_id" placeholder="请选择" @blur="blurs('select1')">
13 + <el-option
14 + v-for="item in classList"
15 + :key="item.class_id"
16 + :label="item.name"
17 + :value="item.class_id">
18 + </el-option>
19 + </el-select> -->
20 + <selector placeholder="请选择" v-model="form.class_id" :options="classList" @on-change="changeScroll"></selector>
21 + </div>
22 + </li>
23 + <li>
24 + <label for="">
25 + <span>物料编号<em class="red">*</em></span>
26 + </label>
27 + <div class="el-form-item_content">
28 + <el-input v-model="form.code" placeholder="请输入物料编号"></el-input>
29 + </div>
30 + </li>
31 + <li>
32 + <label for="">
33 + <span>物料名称<em class="red">*</em></span>
34 + </label>
35 + <div class="el-form-item_content">
36 + <el-input v-model="form.name" placeholder="请输入物料名称"></el-input>
37 + </div>
38 + </li>
39 + <li>
40 + <label for="">
41 + <span>适用的品牌<em class="red">*</em></span>
42 + </label>
43 + <div class="el-form-item_content p-right">
44 + <p @click="getBrandList">{{brand_text}}<i class="el-icon-arrow-right"></i></p>
45 + </div>
46 + </li>
47 + <li class="twoLabel">
48 + <label for="">
49 + <span style="font-size: 0.9rem; margin-top: 0.3rem;">订货单位<em class="red">*</em></span>
50 + <div style="width: 5rem;" class="el-form-item">
51 + <selector @on-change="changeScroll" placeholder="请选择" v-model="form.order_unit_name" :options="order_unit_list"></selector>
52 + </div>
53 + </label>
54 + <label>
55 + <span style="font-size: 0.9rem; margin-top: 0.3rem;">盘点单位<em class="red">*</em></span>
56 + <div style="width: 5rem;" class="el-form-item">
57 + <selector @on-change="changeScroll" placeholder="请选择" v-model="form.unit_name" :options="unit_list"></selector>
58 + </div>
59 + </label>
60 + </li>
61 + <li v-if="form.order_unit_name && form.unit_name">
62 + <label>
63 + <span></span>
64 + </label>
65 + <div>
66 + <p>1{{getOrderUnitName(form.order_unit_name)}} = <x-input style="width: 60px;" v-model="form.order_unit_qty" placeholder="请输入"></x-input> {{getUnitName(form.unit_name)}}<em class="red">*</em></p>
67 + </div>
68 + </li>
69 + <li class="twoLabel" v-if="form.order_unit_name && form.unit_name">
70 + <label for="">
71 + <span style="font-size: 0.8rem; margin-top: 0.3rem;">BOM单位<em class="red">*</em></span>
72 + <div class="el-form-item">
73 + <selector placeholder="请选择" v-model="form.bom_unit_name" :options="bom_unit_list" @on-change="bomUnitChange"></selector>
74 + </div>
75 + </label>
76 + <label>
77 + <div class="el-form-item">
78 + <div>1{{getUnitName(form.unit_name)}} = <x-input style="width: 70px;" v-model="form.bom_unit_qty" placeholder="请输入"></x-input> {{bom_unit_name_value}}<em class="red">*</em></div>
79 + </div>
80 + </label>
81 + </li>
82 + </ul>
83 + </div>
84 + <div class="btn" style="padding: 10px;">
85 + <flexbox>
86 + <flexbox-item>
87 + <x-button class="close-btn" @click.native="closeMetrial">取消</x-button>
88 + </flexbox-item>
89 + <flexbox-item>
90 + <x-button class="comfirm-btn" @click.native="addMetrial">完成</x-button>
91 + </flexbox-item>
92 + </flexbox>
93 + </div>
94 + </x-dialog>
95 +
96 + <add-select-brand :show="brand_show" :name="'品牌'" :list="brand_list" :checked_list="checked_list" :span="span" @cancel="cancel" @comfirm="comfirm"></add-select-brand>
97 + </div>
98 +</template>
99 +
100 +<script>
101 +import { Flexbox, FlexboxItem, XDialog, TransferDomDirective as TransferDom, Badge, XButton, Selector, XInput } from 'vux'
102 +import addSelectBrand from 'components/addSelectBrand/index'
103 +export default {
104 + directives: { TransferDom },
105 + components: { Flexbox, FlexboxItem, XDialog, addSelectBrand, Badge, XButton, Selector, XInput },
106 + props: ['show_dialog', 'add_class_list', 'add_brand_list', 'add_checked_list', 'add_order_unit_list', 'add_units_list', 'add_bom_unit_list'],
107 + data () {
108 + return {
109 + pShow: true,
110 + titleText: '新物料匹配供应商',
111 + leftText: '匹配供应商',
112 + rightText: '完成',
113 + scroller_height: '',
114 + list: [],
115 + form: {
116 + class_id: '',
117 + brand_ids: this.$route.params.checked_list,
118 + code: '',
119 + name: '',
120 + order_unit_name: '',
121 + unit_name: '',
122 + order_unit_qty: '',
123 + bom_unit_name: '',
124 + bom_unit_qty: ''
125 + },
126 + brand_text: '已选全部品牌',
127 + brand_show: false,
128 + span: 3,
129 + checked_list: this.add_checked_list,
130 + classList: this.add_class_list,
131 + brand_list: this.add_brand_list,
132 + order_unit_list: this.add_order_unit_list,
133 + unit_list: this.add_units_list,
134 + bom_unit_list: this.add_bom_unit_list,
135 + tmp_show: false,
136 + bom_unit_name_value: ''
137 + }
138 + },
139 + created () {
140 + this.getList();
141 + },
142 + mounted () {
143 + this.scroller_height = ($('body').height() - 50) + 'px';
144 + this.form = {
145 + class_id: '',
146 + brand_ids: this.$route.params.checked_list,
147 + code: '',
148 + name: '',
149 + order_unit_name: '',
150 + unit_name: '',
151 + order_unit_qty: '',
152 + bom_unit_name: '',
153 + bom_unit_qty: ''
154 + }
155 + $('.vux-x-dialog.material_dialog').click(() => {
156 + this.changeScroll()
157 + })
158 + },
159 + watch: {
160 + show_dialog (val, old) {
161 + if (val !== old) {
162 + this.tmp_show = val
163 + }
164 + }
165 + },
166 + methods: {
167 + // 获取新物料列表
168 + getList () {
169 + axios.get('fi/sku/all?ctrl_status=XP_prov')
170 + .then(res => {
171 + if (res.data.ret === 'OK') {
172 + for (let i = 0; i < res.data.content.length; i++) {
173 + res.data.content[i].checked = false
174 + if (res.data.content[i].XP_prov_status === 'DISABLE') {
175 + res.data.content[i].disabled = true
176 + } else {
177 + res.data.content[i].disabled = false
178 + }
179 + }
180 + this.list = res.data.content
181 + } else {
182 + this.list = []
183 + }
184 + })
185 + },
186 + // 选择品牌弹窗
187 + getBrandList () {
188 + this.brand_show = true
189 + this.tmp_show = false
190 + },
191 + // 品牌弹窗组件关闭
192 + cancel (v) {
193 + this.brand_show = v;
194 + this.tmp_show = true
195 + },
196 + // 品牌弹窗组件确定
197 + comfirm (v) {
198 + // console.warn(v);
199 + this.brand_show = false
200 + this.tmp_show = true
201 + this.form.brand_ids = v
202 + this.checked_list = v
203 + if (v.length === 0) {
204 + this.brand_text = '请选择品牌'
205 + }
206 + if (v.length > 0 && v.length !== this.brand_list.length) {
207 + this.brand_text = '已选' + v.length + '种品牌'
208 + }
209 + if (v.length === this.brand_list.length) {
210 + this.brand_text = '已选全部品牌'
211 + }
212 + },
213 + // 匹配供应商
214 + leftClick () {
215 + let newList = _.filter(this.list, val => {
216 + if (val.checked) {
217 + return val
218 + }
219 + })
220 + // console.warn(newList)
221 + if (newList.length > 0) {
222 + sessionStorage.setItem('newList', JSON.stringify(newList))
223 + this.$router.push({path: '/matchingSuppliers'})
224 + } else {
225 + this.$vux.toast.text('请选择物料')
226 + }
227 + },
228 + // 完成
229 + rightClick () {
230 + axios.get('fi/sku/noMatch?ctrl_status=XP_prov')
231 + .then(res => {
232 + if (res.data.ret === 'OK') {
233 + console.warn(res.data.content.count)
234 + let _this = this
235 + if (res.data.content.count > 0) {
236 + _this.$vux.confirm.show({
237 + title: '温馨提示',
238 + content: '<p style="text-align: left; padding: 1.5em 0 1em">还有' + res.data.content.count + '个新商品没有匹配供应商</p>',
239 + confirmText: '继续设置',
240 + cancelText: '否',
241 + showCancelButton: false,
242 + // onCancel () {
243 + // _this.$vux.confirm.hide()
244 + // },
245 + onConfirm () {
246 + _this.$vux.confirm.hide()
247 + }
248 + })
249 + } else {
250 + _this.$vux.confirm.show({
251 + title: '温馨提示',
252 + content: '<p style="text-align: left; padding: 1.5em 0 1em">您已完成所有新物料的供应商匹配，及门店采购价的设置工作，接下来需要设置新物料的门店盘点规则。</p>',
253 + confirmText: '确定',
254 + cancelText: '否',
255 + showCancelButton: false,
256 + // onCancel () {
257 + // _this.$vux.confirm.hide()
258 + // },
259 + onConfirm () {
260 + _this.$router.push({path: '/newInventoryRule'})
261 + }
262 + })
263 + }
264 + } else {
265 + this.$vux.toast.text(res.data.msg)
266 + }
267 + })
268 + },
269 + // element下拉框失去焦点
270 + blurs (val) {
271 + // console.warn(this.$refs)
272 + this.$refs[val].blur()
273 + },
274 + add () {
275 + this.tmp_show = true
276 + },
277 + addMetrial (e) {
278 + if (this.form.class_id === '') {
279 + this.$vux.toast.text('请选择物料类别');
280 + return false;
281 + } else if (this.form.code === '') {
282 + this.$vux.toast.text('请输入物料编号');
283 + } else if (this.form.name === '') {
284 + this.$vux.toast.text('请输入物料名称');
285 + } else if (this.form.code === '') {
286 + this.$vux.toast.text('请输入物料编号');
287 + } else if (this.form.brand_ids.length === 0) {
288 + this.$vux.toast.text('请选择品牌');
289 + } else if (this.form.order_unit_name === '') {
290 + this.$vux.toast.text('请选择门店订货单位');
291 + } else if (this.form.unit_name === '') {
292 + this.$vux.toast.text('请选择门店盘点单位');
293 + } else if (this.form.order_unit_qty === '') {
294 + this.$vux.toast.text('请输入单位换算量');
295 + } else if (this.form.bom_unit_name === '') {
296 + this.$vux.toast.text('请选择BOM单位');
297 + } else if (this.form.bom_unit_qty === '') {
298 + this.$vux.toast.text('请选择BOM单位数');
299 + } else {
300 + this.form.order_unit_name = this.getOrderUnitName(this.form.order_unit_name);
301 + this.form.unit_name = this.getUnitName(this.form.unit_name);
302 + this.form.bom_unit_name = this.bom_unit_name_value;
303 + axios.post('fi/sku/add', this.form)
304 + .then(res => {
305 + if (res.data.ret === 'OK') {
306 + this.$vux.toast.text(res.data.msg);
307 + let brand_ids = _.map(this.brand_list, val => val.brand_id)
308 + this.brand_text = '已选全部品牌'
309 + this.form = {
310 + class_id: '',
311 + brand_ids: brand_ids,
312 + code: '',
313 + name: '',
314 + order_unit_name: '',
315 + unit_name: '',
316 + order_unit_qty: '',
317 + bom_unit_name: '',
318 + bom_unit_qty: ''
319 + }
320 + this.getList()
321 + this.tmp_show = false;
322 + this.$emit('showDM', true);
323 + } else {
324 + this.$vux.toast.text(res.data.msg);
325 + this.tmp_show = false;
326 + this.$emit('showDM', true);
327 + }
328 + })
329 + .catch(error => {
330 + console.error(error);
331 + this.tmp_show = false;
332 + this.$emit('showDM', true);
333 + })
334 + }
335 + // this.getList()
336 + // this.tmp_show = false;
337 + // this.$emit('showDM', true);
338 + },
339 + closeMetrial () {
340 + this.tmp_show = false;
341 + this.$emit('showDM', true);
342 + },
343 + getOrderUnitName (name) {
344 + // 门店订货单位
345 + let unit = _.filter(this.order_unit_list, v => {
346 + if (v.key === name) {
347 + return v.value
348 + }
349 + });
350 + if (unit.length) {
351 + return unit[0]['value']
352 + }
353 + },
354 + getUnitName (name) {
355 + // 门店盘点单位
356 + let unit = _.filter(this.unit_list, v => {
357 + if (v.key === name) {
358 + return v.value
359 + }
360 + });
361 + if (unit.length) {
362 + return unit[0]['value']
363 + }
364 + },
365 + bomUnitChange (name) {
366 + // 门店盘点单位
367 + let unit = _.filter(this.bom_unit_list, v => {
368 + if (v.key === name) {
369 + return v.value
370 + }
371 + });
372 + if (unit.length) {
373 + this.bom_unit_name_value = unit[0]['value'];
374 + }
375 + this.changeScroll()
376 + },
377 + changeScroll () {
378 + $('html,body').scrollTop(0)
379 + }
380 + }
381 +}
382 +</script>
383 +
384 +<style lang="less" scoped>
385 +// 新增物料弹窗
386 +.material_dialog {
387 + font-size: 14px;
388 + .weui-dialog {
389 + width: 100% !important;
390 + max-width: 400px;
391 + text-align: left;
392 + .dialogTitle {
393 + background-color: #8ea9cf;
394 + color: #FFFFFF;
395 + text-align: center;
396 + font-size: 16px;
397 + padding: 0.6rem 0;
398 + }
399 + .material_info {
400 + background-color: #fff;
401 + margin-bottom: 10px;
402 + .red {
403 + font-style: normal;
404 + color: #ff6600;
405 + }
406 + ul {
407 + li {
408 + display: -webkit-flex;
409 + display: flex;
410 + position: relative;
411 + padding: 4px 0 4px 10px;
412 + border-bottom: 1px solid #e5e5e5;
413 + label {
414 + &>span {
415 + display: block;
416 + // float: left;
417 + width: 95px;
418 + height: 36px;
419 + line-height: 36px;
420 + }
421 + }
422 + &.twoLabel {
423 + display: -webkit-flex;
424 + display: flex;
425 + label {
426 + -webkit-flex: 1;
427 + flex: 1;
428 + display: -webkit-flex;
429 + display: flex;
430 + padding-right: 10px;
431 + .el-form-item {
432 + flex: 1;
433 + margin-bottom: 0;
434 + }
435 + }
436 + }
437 + .el-form-item_content{
438 + -webkit-flex: 1;
439 + flex: 1;
440 + float: left!important;
441 + margin-left: 0!important;
442 + line-height: 20px!important;
443 + padding-right: 10px;
444 + &.p-right {
445 + padding-right: 7px;
446 + }
447 + p {
448 + line-height: 36px;
449 + text-align: right;
450 + i {
451 + color: rgb(153, 153, 153);
452 + font-size: 18px;
453 + position: relative;
454 + top: 2px;
455 + }
456 + }
457 + }
458 + }
459 + }
460 + }
461 + .btn {
462 + background-color: #fff;
463 + &>div {
464 + .default-btn {
465 + width: 100%;
466 + height: 38px;
467 + background: #89a9cf!important;
468 + color: #fff!important;
469 + font-size: 16px;
470 + }
471 + .close-btn {
472 + background-color: #ffffff;
473 + color: #8EA8CF;
474 + border: 1px solid #8EA8CF;
475 + width: 100%;
476 + font-size: 16px;
477 + }
478 + .comfirm-btn {
479 + background-color: #8EA8CF;
480 + color: #ffffff;
481 + border: 1px solid #8EA8CF;
482 + width: 100%;
483 + font-size: 16px;
484 + }
485 + }
486 + }
487 + }
488 +}
489 +</style>
1 +<template lang="html">
2 +
3 +</template>
4 +
5 +<script>
6 +export default {
7 +}
8 +</script>
9 +
10 +<style lang="less">
11 +</style>
1 +<template lang="html">
2 + <div class="choose-material-page">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="material-title">请选择{{name}}</div>
6 + <div class="material-wrapper">
7 + <div class="material-classify">
8 + <div>
9 + <check-icon :value.sync="all_checked" @click.native="checkAll(all_checked)">
10 + 全部{{name}}
11 + </check-icon>
12 + <div class="material-content">
13 + <checker
14 + v-model="checkList"
15 + type="checkbox"
16 + default-item-class="item"
17 + selected-item-class="item-selected"
18 + disabled-item-class="item-disabled"
19 + >
20 + <checker-item v-for="(item, index) in list" :key="index" :disabled="item.disabled" :value="item.id" @click.native="itemCheck(item.checked, index)">{{item.name}}</checker-item>
21 + </checker>
22 + </div>
23 + </div>
24 + </div>
25 + </div>
26 + <div style="padding: 10px;">
27 + <flexbox>
28 + <flexbox-item>
29 + <x-button @click.native="cancel" mini style="background-color: #ffffff; color: #8EA8CF; border: 1px solid #8EA8CF; width: 100%;">关闭</x-button>
30 + </flexbox-item>
31 + <flexbox-item>
32 + <x-button @click.native="comfirm" mini style="background-color: #8EA8CF; color: #ffffff; border: 1px solid #8EA8CF; width: 100%;">确定</x-button>
33 + </flexbox-item>
34 + </flexbox>
35 + </div>
36 + </x-dialog>
37 + </div>
38 + </div>
39 +</template>
40 +
41 +<script>
42 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem } from 'vux'
43 +export default {
44 + props: ['show', 'list', 'checked_list', 'span', 'name'],
45 + directives: { TransferDom },
46 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem },
47 + beforeRouteEnter (to, from, next) {
48 + next()
49 + },
50 + mounted () {
51 + // console.warn(this.list)
52 + // console.warn(1)
53 + },
54 + data () {
55 + return {
56 + all_checked: true,
57 + checkList: []
58 + }
59 + },
60 + watch: {
61 + show (val) {
62 + // console.warn(val)
63 + this.checkList = JSON.parse(JSON.stringify(this.checked_list))
64 + if (val) {
65 + let check_list = _.filter(this.list, (val) => {
66 + let tem;
67 + if (val.disabled === false) {
68 + tem = val
69 + }
70 + return tem
71 + });
72 + if (check_list.length > 0 && this.checked_list.length > 0 && check_list.length === this.checked_list.length) {
73 + this.all_checked = true
74 + } else {
75 + this.all_checked = false
76 + }
77 + } else {
78 + this.all_checked = false
79 + }
80 + // this.checkList = val;
81 + }
82 +
83 + },
84 + computed: {
85 + // checkList () {
86 + // return JSON.parse(JSON.stringify(this.checked_list));
87 + // }
88 + },
89 + methods: {
90 + checkAll (checked) {
91 + let check_list = _.filter(this.list, (val) => {
92 + let tem;
93 + if (val.disabled === false) {
94 + tem = val
95 + }
96 + return tem
97 + });
98 + // 勾选所有品牌
99 + if (checked) {
100 + // 选中
101 + for (let i = 0; i < check_list.length; i++) {
102 + check_list[i].checked = true;
103 + }
104 + this.checkList = _.map(check_list, val => val.id)
105 + // this.checked_list = id_list;
106 + } else {
107 + // 取消
108 + this.checkList = []
109 + for (let i = 0; i < check_list.length; i++) {
110 + check_list[i].checked = false;
111 + }
112 + }
113 + },
114 + itemCheck (checked, index) {
115 + // console.warn(this.checkList)
116 + let list = _.filter(this.list, (val) => {
117 + let tem;
118 + if (val.disabled === false) {
119 + tem = val
120 + }
121 + return tem
122 + });
123 + if (checked) {
124 + this.list[index].checked = false;
125 + } else {
126 + this.list[index].checked = true;
127 + }
128 + // console.warn(id_list)
129 + if (list.length !== this.checkList.length) {
130 + this.all_checked = false
131 + } else {
132 + this.all_checked = true
133 + }
134 + },
135 + changeCategory () {
136 + },
137 + cancel () {
138 + // 关闭选择框
139 + this.$emit('cancel', !this.show)
140 + },
141 + comfirm () {
142 + // 确认选择框
143 + this.$emit('comfirm', this.checkList)
144 + }
145 + }
146 +}
147 +</script>
148 +
149 +<style lang="less" scoped>
150 +.material-classify {
151 + text-align: left;
152 + padding: 10px;
153 + .vux-checker-box {
154 + // display: -webkit-flex;
155 + // display: flex;
156 + // flex-wrap: wrap;
157 + // justify-content: space-between;
158 + }
159 + .vux-check-icon {
160 + margin-bottom: 10px;
161 + }
162 +}
163 +.item {
164 + width: 31%;
165 + // flex-basis: 31%;
166 + line-height: 26px;
167 + text-align: center;
168 + border-radius: 3px;
169 + border: 1px solid #ccc;
170 + background-color: #fff;
171 + margin-bottom: 10px;
172 + margin-right: 2%;
173 + &:nth-child(3n) {
174 + margin-right: 0;
175 + }
176 + }
177 + .item-selected {
178 + color: white;
179 + background-color: #8EA8CF;
180 + }
181 + .item-disabled {
182 + color: #cfcfcf;
183 + background-color: #ebeef7;
184 + }
185 +
186 + .weui-dialog {
187 + width: 90% !important;
188 + max-width: 400px;
189 + }
190 +
191 + @media screen and (min-width: 1024px) {
192 + .weui-dialog {
193 + width: 35%;
194 + }
195 + }
196 +
197 + .weui-btn:after {
198 + border: 0 !important;
199 + }
200 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <alert
4 + :title="title"
5 + :value="show"
6 + :button_text="button_text"
7 + @on-show="onShow"
8 + @on-hide="onHide">
9 + 自定义插入内容
10 + </alert>
11 + <group>
12 + <x-switch title="测试开关" v-model="show"></x-switch>
13 + </group>
14 + </div>
15 +</template>
16 +
17 +<script>
18 +import alert from 'components/alert/index'
19 +import { Group, XSwitch } from 'vux'
20 +
21 +export default {
22 + components: { alert, Group, XSwitch },
23 + data () {
24 + return {
25 + title: '温馨提示',
26 + button_text: '确定',
27 + show: false
28 + }
29 + },
30 + mounted () {
31 + },
32 + methods: {
33 + onHide () {
34 + console.warn('on-hide');
35 + },
36 + onShow () {
37 + console.warn('on-show');
38 + }
39 + }
40 +}
41 +</script>
42 +
43 +<style lang="less">
44 +</style>
1 +<template lang="html">
2 + <div v-transfer-dom>
3 + <alert v-model="show"
4 + :title="title"
5 + :button-text="button_text"
6 + @on-show="onShow"
7 + @on-hide="onHide">
8 + <slot></slot>
9 + </alert>
10 + </div>
11 +</template>
12 +
13 +<script>
14 +import { TransferDom, Alert } from 'vux'
15 +
16 +export default {
17 + components: { Alert },
18 + directives: { TransferDom },
19 + props: ['title', 'value', 'button_text'],
20 + data () {
21 + return {
22 + }
23 + },
24 + mounted () {
25 + },
26 + computed: {
27 + show: {
28 + get () {
29 + return this.value
30 + },
31 + set (val) {}
32 + }
33 + },
34 + methods: {
35 + onHide () {
36 + this.$emit('on-hide');
37 + },
38 + onShow () {
39 + this.$emit('on-show');
40 + }
41 + }
42 +}
43 +</script>
44 +
45 +<style lang="less">
46 + .weui-dialog {
47 + width: 90%;
48 + max-width: 50rem;
49 + }
50 + .weui-dialog__btn.weui-dialog__btn_primary {
51 + color: #353535;
52 + }
53 + .weui-dialog__hd {
54 + background-color: #8ea9cf;
55 + color: #FFFFFF;
56 + padding: 0.5em 1.6em 0.5em;
57 + }
58 +
59 +</style>
1 +<template>
2 + <div>
3 + <div class="btn">
4 + <div>
5 + <x-button class="default-btn" @click.native="next">{{btnText}}</x-button>
6 + </div>
7 + </div>
8 + </div>
9 +</template>
10 +
11 +<script>
12 +import { XButton } from 'vux'
13 +export default {
14 + components: { XButton },
15 + props: ['btnText'],
16 + methods: {
17 + next () {
18 + this.$emit('btnClick')
19 + }
20 + }
21 +}
22 +</script>
23 +
24 +<style lang="less" scoped>
25 +.btn {
26 + width: 100%;
27 + background: #fff;
28 + position: fixed;
29 + bottom: 0;
30 + left: 0;
31 + z-index: 100;
32 + &>div {
33 + padding: 6px 10px;
34 + .default-btn {
35 + width: 100%;
36 + height: 38px;
37 + background: #89a9cf!important;
38 + color: #fff!important;
39 + font-size: 16px;
40 + &:after {
41 + border: 1px solid #89a9cf!important;
42 + }
43 + }
44 + }
45 +}
46 +</style>
1 +<template>
2 + <div>
3 + <div class="btn">
4 + <div>
5 + <x-button class="default-btn continue" @click.native="leftClick">{{leftText}}</x-button>
6 + <x-button class="default-btn" @click.native="rightClick">{{rightText}}</x-button>
7 + </div>
8 + </div>
9 + </div>
10 +</template>
11 +<script>
12 +import { XButton } from 'vux'
13 +export default {
14 + props: ['leftText', 'rightText'],
15 + components: {XButton},
16 + methods: {
17 + leftClick () {
18 + this.$emit('leftClick')
19 + },
20 + rightClick () {
21 + this.$emit('rightClick')
22 + }
23 + }
24 +}
25 +</script>
26 +<style lang="less" scoped>
27 + .btn {
28 + width: 100%;
29 + background: #fff;
30 + position: fixed;
31 + bottom: 0;
32 + left: 0;
33 + z-index: 100;
34 + &>div {
35 + display: flex;
36 + display: -webkit-flex;
37 + // align-content: center;
38 + justify-content: space-between;
39 + padding: 6px 10px;
40 + .default-btn {
41 + width: 49%;
42 + height: 38px;
43 + background: #89a9cf!important;
44 + margin: 0;
45 + color: #fff!important;
46 + font-size: 16px;
47 + &.continue {
48 + background-color: #fff!important;
49 + color: #89a9cf!important;
50 + &:after {
51 + width: 199%;
52 + border: 1px solid #89a9cf!important;
53 + }
54 + }
55 + }
56 + }
57 + }
58 +</style>
1 +<template lang="html">
2 + <div style="padding: 20px">
3 + <x-button disabled class="disbaled-btn">确定disabled</x-button>
4 + <x-button class="default-btn">确定default</x-button>
5 + <x-button class="active-btn">确定active</x-button>
6 + <divider> line </divider>
7 + <flexbox>
8 + <flexbox-item><x-button plain class="line-btn">关闭</x-button></flexbox-item>
9 + <flexbox-item><x-button plain class="default-btn">确定</x-button></flexbox-item>
10 + </flexbox>
11 + <divider> line </divider>
12 + <x-button mini plain class="line-btn">选好了</x-button>
13 + </div>
14 +</template>
15 +
16 +<script>
17 +import { Flexbox, FlexboxItem, XButton, Divider } from 'vux'
18 +export default {
19 + components: {
20 + Divider,
21 + Flexbox,
22 + FlexboxItem,
23 + XButton
24 + }
25 +}
26 +</script>
27 +
28 +<style lang="less">
29 +.disbaled-btn {
30 + border: 1px solid #dbdce0;
31 + background: #ebeef7;
32 + color: #c8cbd0
33 +}
34 +.default-btn {
35 + background: #86aace!important;
36 + border: 1px solid #86aace!important;
37 + color: #fff!important;
38 +}
39 +.active-btn {
40 + border: 1px solid #86aace!important;
41 + background: #697f9f!important;
42 + color: #fff!important;
43 +}
44 +.line-btn {
45 + border: 1px solid #8aa0b4!important;
46 + color: #8298b4!important;
47 +}
48 +</style>
1 +<template lang="html">
2 +
3 + <div class="">
4 + <div v-if="type === 'enable'" class="set-enable-btn">
5 + <slot></slot>
6 + </div>
7 + <div v-if="type === 'unable'" class="un-set-btn">
8 + <slot></slot>
9 + </div>
10 + </div>
11 +</template>
12 +
13 +<script>
14 +export default {
15 + props: ['type']
16 +}
17 +</script>
18 +
19 +<style lang="less">
20 + .set-enable-btn {
21 + color: #8EA8CF;
22 + background-color: #FFFFFF;
23 + text-align: center;
24 + margin: 0.5rem 1rem;
25 + padding: 0.5rem 0;
26 + border-radius: .2rem;
27 + font-size: .85rem;
28 + border: 1px solid #8EA8CF;
29 + }
30 + .un-set-btn {
31 + color: white;
32 + background-color: #8EA8CF;
33 + text-align: center;
34 + margin: 0.5rem 1rem;
35 + padding: 0.5rem 0;
36 + border-radius: .2rem;
37 + font-size: .85rem;
38 + }
39 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <cell-swiper :list="list" @clickItem="clickItem" @editItem="editItem" @deleteItem="deleteItem"></cell-swiper>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import cellSwiper from 'components/cellSwiper/index'
9 +
10 +export default {
11 + components: {cellSwiper},
12 + data () {
13 + return {
14 + list: [
15 + {
16 + id: '01',
17 + title: 'item1'
18 + },
19 + {
20 + id: '02',
21 + title: 'item2'
22 + },
23 + {
24 + id: '03',
25 + title: 'item3'
26 + },
27 + {
28 + id: '04',
29 + title: 'item4'
30 + }
31 + ]
32 + }
33 + },
34 + methods: {
35 + clickItem (id) {
36 + console.warn(id);
37 + },
38 + editItem (id) {
39 + console.warn(id);
40 + },
41 + deleteItem (id) {
42 + console.warn(id);
43 + }
44 + }
45 +}
46 +</script>
47 +
48 +<style lang="less">
49 +</style>
1 +<template lang="html">
2 + <div class="container">
3 + <ul>
4 + <li class="list-item " v-for="(item,index) in list " data-type="0">
5 + <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="clickItem($event, item)" :data-id="item.id">
6 + <div class="list-content">
7 + <p class="title">{{item.title}}</p>
8 + </div>
9 + </div>
10 + <div class="edit" @click="editItem($event, item)" :data-index="index" :data-id="item.id">修 改</div>
11 + <div class="delete" @click="deleteItem" :data-index="index" :data-id="item.id">删 除</div>
12 + </li>
13 + </ul>
14 + </div>
15 +</template>
16 +
17 +<script>
18 +/**
19 + * [list 左滑修改删除列表]
20 + * @type {Array}
21 + * @field {id, title}
22 + *
23 + * [clickItem 点击表单项回调, 返回 index]
24 + * @type {Function}
25 + * @callback {index}
26 + *
27 + * [editItem 左滑点击表单编辑回调, 返回 index]]
28 + * @type {Function}
29 + * @callback {index}
30 + *
31 + * [deleteItem 左滑点击表单删除回调, 返回 index]]
32 + * @type {Function}
33 + * @callback {index}
34 + */
35 +export default{
36 + name: 'index',
37 + props: ['list'],
38 + data () {
39 + return {
40 + startX: 0,
41 + endX: 0
42 + }
43 + },
44 + methods: {
45 + // 跳转
46 + clickItem (e, item) {
47 + if (this.checkSlide()) {
48 + this.restSlide();
49 + } else {
50 + // 当前ID
51 + let id = e.currentTarget.dataset.id;
52 + this.$emit('clickItem', id, item)
53 + }
54 + },
55 + // 滑动开始
56 + touchStart (e) {
57 + // 记录初始位置
58 + this.startX = e.touches[0].clientX;
59 + },
60 + // 滑动结束
61 + touchEnd (e) {
62 + // 当前滑动的父级元素
63 + let parentElement = e.currentTarget.parentElement;
64 + // 记录结束位置
65 + this.endX = e.changedTouches[0].clientX;
66 +
67 + // 左滑
68 + if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
69 + this.restSlide();
70 + parentElement.dataset.type = 1;
71 + }
72 +
73 + // 右滑
74 + if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
75 + this.restSlide();
76 + parentElement.dataset.type = 0;
77 + }
78 +
79 + this.startX = 0;
80 + this.endX = 0;
81 + },
82 + // 判断当前是否有滑块处于滑动状态
83 + checkSlide () {
84 + let listItems = document.querySelectorAll('.list-item');
85 +
86 + for (let i = 0; i < listItems.length; i++) {
87 + if (listItems[i].dataset.type == 1) {
88 + return true;
89 + }
90 + }
91 + return false;
92 + },
93 + // 复位滑动状态
94 + restSlide () {
95 + let listItems = document.querySelectorAll('.list-item');
96 + // 复位
97 + for (let i = 0; i < listItems.length; i++) {
98 + listItems[i].dataset.type = 0;
99 + }
100 + },
101 + // 删除
102 + deleteItem (e) {
103 + // 当前索引
104 + let index = e.currentTarget.dataset.index;
105 + // 复位
106 + this.restSlide();
107 + // 删除
108 + // this.list.splice(index, 1);
109 + // 当前ID
110 + // let id = e.currentTarget.dataset.id;
111 + this.$emit('deleteItem', index)
112 + },
113 + // 修改
114 + editItem (e, item) {
115 + // 当前索引
116 + let id = e.currentTarget.dataset.id;
117 + // 复位
118 + this.restSlide();
119 + // 当前ID
120 + this.$emit('editItem', id, item)
121 + }
122 + }
123 +}
124 +</script>
125 +
126 +<style scoped>
127 +.page-title{
128 + text-align: center;
129 + font-size: 17px;
130 + padding: 10px 15px;
131 + position: relative;
132 +}
133 +.page-title:after{
134 + content: " ";
135 + position: absolute;
136 + left: 0;
137 + bottom: 0;
138 + right: 0;
139 + height: 1px;
140 + border-bottom: 1px solid #ccc;
141 + color: #ccc;
142 + -webkit-transform-origin: 0 100%;
143 + transform-origin: 0 100%;
144 + -webkit-transform: scaleY(0.5);
145 + transform: scaleY(0.5);
146 + z-index: 2;
147 +}
148 +.list-item{
149 + position: relative;
150 + height: 3.5rem;
151 + -webkit-transition: all 0.2s;
152 + transition: all 0.2s;
153 +}
154 +.list-item[data-type="0"]{
155 + transform: translate3d(0,0,0);
156 +}
157 +.list-item[data-type="1"]{
158 + transform: translate3d(-12rem,0,0);
159 +}
160 +.list-item:after{
161 + content: " ";
162 + position: absolute;
163 + /* left: 0.6rem; */
164 + left: 0rem;
165 + bottom: 0;
166 + right: 0;
167 + height: 1px;
168 + border-bottom: 1px solid #ebeaee;
169 + color: #ccc;
170 + -webkit-transform-origin: 0 100%;
171 + transform-origin: 0 100%;
172 + -webkit-transform: scaleY(0.5);
173 + transform: scaleY(0.5);
174 + z-index: 2;
175 +}
176 +.list-box{
177 + padding: 0.6rem;
178 + background: #fff;
179 + display: flex;
180 + align-items: center;
181 + -webkit-box-sizing: border-box;
182 + box-sizing: border-box;
183 + justify-content: flex-end;
184 + position: absolute;
185 + top: 0;
186 + right: 0;
187 + bottom: 0;
188 + left: 0;
189 + font-size: 0;
190 +}
191 +.list-item .list-img{
192 + display: block;
193 + width: 3rem;
194 + height: 3rem;
195 +}
196 +.list-item .list-content{
197 + padding: 0.3rem 0 0.3rem 0.6rem;
198 + position: relative;
199 + flex: 1;
200 + flex-direction: column;
201 + align-items: flex-start;
202 + justify-content: center;
203 + overflow: hidden;
204 +}
205 +.list-item .title{
206 + display: block;
207 + color: #333;
208 + overflow: hidden;
209 + font-size: 15px;
210 + font-weight: bold;
211 + text-overflow: ellipsis;
212 + white-space: nowrap;
213 +}
214 +.list-item .tips{
215 + display: block;
216 + overflow: hidden;
217 + font-size: 12px;
218 + color: #999;
219 + line-height: 20px;
220 + text-overflow: ellipsis;
221 + white-space: nowrap;
222 +}
223 +.list-item .time{
224 + display: block;
225 + font-size: 12px;
226 + position: absolute;
227 + right: 0;
228 + top: 0.3rem;
229 + color: #666;
230 +}
231 +.list-item .delete{
232 + width: 6rem;
233 + height: 3.5rem;
234 + background: #fc6621;
235 + font-size: 17px;
236 + color: #fff;
237 + text-align: center;
238 + line-height: 3.5rem;
239 + position: absolute;
240 + top:0;
241 + right: -12rem;
242 +}
243 +.list-item .edit{
244 + width: 6rem;
245 + height: 3.5rem;
246 + background: #f0eff5;
247 + font-size: 17px;
248 + color: #000;
249 + text-align: center;
250 + line-height: 3.5rem;
251 + position: absolute;
252 + top:0;
253 + right: -6.1rem;
254 + border-left: 1px solid #ebeaee;
255 +}
256 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <checker type="checkbox" @on-change="checkerChange" v-model="checkedValue" default-item-class="checklist-item" selected-item-class="checklist-item-selected">
4 + <checker-item :value="item" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
5 + </checker>
6 + </div>
7 +</template>
8 +
9 +<script>
10 +import { Checker, CheckerItem, TransferDom } from 'vux'
11 +export default {
12 + directives: {
13 + TransferDom
14 + },
15 + components: {
16 + Checker,
17 + CheckerItem
18 + },
19 + data () {
20 + return {
21 + checkedValue: [
22 + {
23 + key: '1',
24 + value: '白'
25 + }
26 + ],
27 + options: [
28 + {
29 + key: '1',
30 + value: '白'
31 + },
32 + {
33 + key: '2',
34 + value: '富'
35 + },
36 + {
37 + key: '3',
38 + value: '美'
39 + }
40 + ]
41 + }
42 + },
43 + methods: {
44 + checkerChange (val) {
45 + console.warn(val);
46 + }
47 + }
48 +}
49 +</script>
50 +
51 +<style lang="less" scoped>
52 +.checklist-item {
53 + margin-right: 15px;
54 + span {
55 + display: inline-block;
56 + vertical-align: middle;
57 + }
58 + i {
59 + display: inline-block;
60 + width: 1rem;
61 + height: 1rem;
62 + background-size: cover;
63 + background-image: url(../../assets/unchecked.png);
64 + vertical-align: middle;
65 + margin-right: 0.5rem;
66 + }
67 +}
68 +.checklist-item-selected {
69 + i {
70 + background-image: url(../../assets/checked.png)
71 + }
72 +}
73 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <checker type="checkbox" @on-change="checkerChange" v-model="checkValue" default-item-class="checklist-item" selected-item-class="checklist-item-selected">
4 + <checker-item :value="item.key" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
5 + </checker>
6 + </div>
7 +</template>
8 +
9 +<script>
10 +import { Checker, CheckerItem, TransferDom } from 'vux'
11 +export default {
12 + directives: {
13 + TransferDom
14 + },
15 + components: {
16 + Checker,
17 + CheckerItem
18 + },
19 + data () {
20 + return {
21 + checkValue: ''
22 + }
23 + },
24 + methods: {
25 + checkerChange (val) {
26 + this.$emit('change', val)
27 + }
28 + }
29 +}
30 +</script>
31 +
32 +<style lang="less" scoped>
33 +.checklist-item {
34 + margin-right: 15px;
35 + span {
36 + display: inline-block;
37 + vertical-align: middle;
38 + }
39 + i {
40 + display: inline-block;
41 + width: 1.2rem;
42 + height: 1.2rem;
43 + background-size: cover;
44 + background-image: url(../../assets/unchecked.png);
45 + vertical-align: middle;
46 + margin-right: 0.5rem;
47 + }
48 +}
49 +.checklist-item-selected {
50 + i {
51 + background-image: url(../../assets/checked.png)
52 + }
53 +}
54 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <div class="check-head" style="margin: 0 0 0 10px">
4 + <check-all :value.sync="isAll" @click.native="selectAll(isAll)">全部商品</check-all>
5 + <p style="display: inline-block">
6 + (<span style="color: #8fb5de">{{currSum}}</span>/<span>{{totalSum}}</span>)
7 + </p>
8 + </div>
9 + <demo
10 + @listChange="listCheckerChange"
11 + v-for="item in data"
12 + :id="item.id"
13 + :name="item.name"
14 + :key="item.id"
15 + :list="item.list"
16 + :isCheckAll="item.isCheck"
17 + :currItemCount="item.currItemCount"
18 + :itemTotal="item.itemTotal"
19 + :listCount="testCount"></demo>
20 + </div>
21 +</template>
22 +
23 +<script>
24 +import Demo from 'components/checkBox/index'
25 +import CheckAll from 'components/isCheckAll/index'
26 +export default {
27 + components: { Demo, CheckAll },
28 + data () {
29 + return {
30 + testCount: null,
31 + isAll: false,
32 + currSum: 0,
33 + totalSum: null,
34 + data: [
35 + {
36 + isCheck: true,
37 + id: '123a',
38 + name: '蔬菜类',
39 + currItemCount: 0,
40 + itemTotal: 4,
41 + list: [
42 + {
43 + key: '1',
44 + value: '什锦冷菜'
45 + },
46 + {
47 + key: '2',
48 + value: '经典冷盘甜小菜心太软'
49 + },
50 + {
51 + key: '3',
52 + value: '凉拌黑木耳'
53 + },
54 + {
55 + key: '4',
56 + value: '私房飘香酱牛肉'
57 + }
58 + ]
59 + },
60 + {
61 + isCheck: false,
62 + id: '852a',
63 + name: '肉类',
64 + currItemCount: 0,
65 + itemTotal: 5,
66 + list: [
67 + {
68 + key: 'b',
69 + value: '咸水鸭',
70 + isSelected: true
71 + },
72 + {
73 + key: 'c',
74 + value: '酱香牛肉'
75 + },
76 + {
77 + key: 'd',
78 + value: '羊肉'
79 + },
80 + {
81 + key: 'e',
82 + value: '凉拌猪耳朵'
83 + },
84 + {
85 + key: 'g',
86 + value: '海蜇头'
87 + }
88 + ]
89 + }
90 + ]
91 + }
92 + },
93 + mounted () {
94 + this.totalSum = _.sum(_.map(this.data, 'itemTotal'))
95 + },
96 + methods: {
97 + selectAll (val) {
98 + console.warn(val);
99 + },
100 + listCheckerChange (val) {
101 + this.testCount = val.length
102 + // console.warn(this.testCount);
103 + }
104 + }
105 +}
106 +</script>
107 +
108 +<style lang="css">
109 +</style>
1 +<template>
2 + <div>
3 + <div class="dash-line">
4 + <span></span>
5 + </div>
6 + <div class="check-head" style="margin: 0 0 10px 15px">
7 + <check-all :value.sync="checkAll" @click.native="checkAllClick(checkAll)">{{ name }}</check-all>
8 + <p style="display: inline-block">
9 + (<span style="color: #8fb5de">{{currCount}}</span>/<span>{{currTotal}}</span>)
10 + </p>
11 + </div>
12 + <checker
13 + v-model="checkValue"
14 + type="checkbox"
15 + default-item-class="check-item"
16 + disabled-item-class="check-item-disabled"
17 + selected-item-class="check-item-selected"
18 + @on-change="checkerChange"
19 + class="check-item-wrap-self">
20 + <checker-item
21 + v-for="(item, index) in list"
22 + :key="index"
23 + :value="item.key"
24 + v-if="!item.disabled"
25 + :disabled="item.disabled">{{item.value}}</checker-item>
26 + </checker>
27 + </div>
28 +</template>
29 +
30 +<script>
31 +import { Checker, CheckerItem, CheckIcon, TransferDom } from 'vux'
32 +import CheckAll from 'components/isCheckAll/index'
33 +export default {
34 + props: ['list', 'id', 'name', 'currItemCount', 'itemTotal', 'isCheckAll', 'listCount'],
35 + directives: {
36 + TransferDom
37 + },
38 + components: {
39 + Checker,
40 + CheckerItem,
41 + CheckIcon,
42 + CheckAll
43 + },
44 + data () {
45 + return {
46 + checkValue: '',
47 + currCount: this.currItemCount,
48 + currTotal: this.itemTotal,
49 + checkAll: this.isCheckAll
50 + }
51 + },
52 + mounted () {
53 + if (this.isCheckAll) {
54 + this.checkValue = _.map(this.list, 'key')
55 + this.checkAll = true;
56 + this.currCount = this.checkValue.length
57 + } else {
58 + this.checkValue = this.filterKeys(this.list)
59 + this.checkAll = false;
60 + this.currCount = 0
61 + }
62 + },
63 + watch: {
64 + currItemCount (val) {
65 + this.currCount = val
66 + },
67 + itemTotal (val) {
68 + this.currTotal = val
69 + },
70 + isCheckAll (val) {
71 + this.checkAll = val
72 + }
73 + },
74 + methods: {
75 + filterKeys (arr) {
76 + let lists = [];
77 + _(arr).each(function (item) {
78 + if (item.isSelected && item.isSelected === true) {
79 + lists.push(item.key)
80 + }
81 + })
82 + return lists
83 + },
84 + checkAllClick (val) {
85 + if (val) {
86 + this.checkValue = _.map(this.list, 'key')
87 + this.checkAll = true;
88 + this.currCount = this.checkValue.length
89 + } else {
90 + this.checkValue = []
91 + this.checkAll = false;
92 + this.currCount = 0
93 + }
94 + },
95 + checkerChange (value) {
96 + let checkedCount = value.length;
97 + this.currCount = checkedCount
98 + this.checkAll = checkedCount === this.list.length;
99 + this.$emit('listChange', value)
100 + }
101 + }
102 +}
103 +</script>
104 +
105 +<style lang="less" scoped>
106 +.dash-line {
107 + padding: 0.6rem 0;
108 + span{
109 + display: block;
110 + width: 100%;
111 + border-bottom: 1px dashed #d9d9db;
112 + }
113 +}
114 +.checklist-item {
115 + span {
116 + display: inline-block;
117 + width: 1.2rem;
118 + height: 1.2rem;
119 + background-size: cover;
120 + background-image: url(../../assets/unchecked.png);
121 + vertical-align: middle;
122 + margin-right: 0.5rem;
123 + }
124 +}
125 +.checklist-item-selected {
126 + span {
127 + background-image: url(../../assets/checked.png)
128 + }
129 +}
130 +.check-item {
131 + background: #f6f6f6;
132 + color: #333;
133 + padding: 0.4rem;
134 + border-radius: 0.4rem;
135 + margin: 0.4rem
136 +}
137 +.check-item-disabled {
138 + background: #eaeff7;
139 + color: #ccc;
140 +}
141 +.check-item-selected {
142 + background: #c4d4e7;
143 + color: #2c426b;
144 +}
145 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <checker radio-required @on-change="checkerChange" v-model="checkedValue" default-item-class="radio-item" selected-item-class="radio-item-selected">
4 + <checker-item :value="item.key" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
5 + </checker>
6 + </div>
7 +</template>
8 +
9 +<script>
10 +import { Checker, CheckerItem, TransferDom } from 'vux'
11 +export default {
12 + directives: {
13 + TransferDom
14 + },
15 + components: {
16 + Checker,
17 + CheckerItem
18 + },
19 + data () {
20 + return {
21 + checkedValue: '1',
22 + options: [
23 + {
24 + key: '1',
25 + value: '白'
26 + },
27 + {
28 + key: '2',
29 + value: '富'
30 + },
31 + {
32 + key: '3',
33 + value: '美'
34 + },
35 + {
36 + key: '4',
37 + value: '潘'
38 + }
39 + ]
40 + }
41 + },
42 + methods: {
43 + checkerChange (val) {
44 + console.warn(val);
45 + }
46 + }
47 +}
48 +</script>
49 +
50 +<style lang="less" scoped>
51 +.radio-item {
52 + margin-right: 15px;
53 + span {
54 + display: inline-block;
55 + vertical-align: middle;
56 + }
57 + i {
58 + display: inline-block;
59 + width: 1rem;
60 + height: 1rem;
61 + background-size: cover;
62 + background-image: url(../../assets/unradio.png);
63 + vertical-align: middle;
64 + margin-right: 0.5rem;
65 + }
66 +}
67 +.radio-item-selected {
68 + i {
69 + background-image: url(../../assets/radio.png)
70 + }
71 +}
72 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <checker v-model="radioValue" radio-required default-item-class="radio-item" selected-item-class="radio-item-selected">
4 + <checker-item value="1">hehe</checker-item>
5 + <checker-item value="2">haha</checker-item>
6 + </checker>
7 + </div>
8 +</template>
9 +
10 +<script>
11 +import { Checker, CheckerItem, TransferDom } from 'vux'
12 +export default {
13 + directives: {
14 + TransferDom
15 + },
16 + components: {
17 + Checker,
18 + CheckerItem
19 + },
20 + data () {
21 + return {
22 + radioValue: ''
23 + }
24 + }
25 +}
26 +</script>
27 +
28 +<style lang="less">
29 +.radio-item {
30 + border: 1px solid #ececec;
31 + padding: 5px 15px;
32 +}
33 +.radio-item-selected {
34 + border: 1px solid green;
35 +}
36 +</style>
1 +<template lang="html">
2 + <label>
3 + <input type="checkbox" :checked="shouldBeChecked" :value="value" @change="updateInput">
4 + {{ label }}
5 + </label>
6 +</template>
7 +<script>
8 +export default {
9 + model: {
10 + prop: 'modelValue',
11 + event: 'change'
12 + },
13 + props: {
14 + value: {
15 + type: String
16 + },
17 + modelValue: {
18 + default: false
19 + },
20 + label: {
21 + type: String,
22 + required: true
23 + },
24 + trueValue: {
25 + default: true
26 + },
27 + falseValue: {
28 + default: false
29 + }
30 + },
31 + computed: {
32 + shouldBeChecked () {
33 + if (this.modelValue instanceof Array) {
34 + return this.modelValue.includes(this.value)
35 + }
36 + return this.modelValue === this.trueValue
37 + }
38 + },
39 + methods: {
40 + updateInput (event) {
41 + let isChecked = event.target.checked
42 +
43 + if (this.modelValue instanceof Array) {
44 + let newValue = [...this.modelValue]
45 +
46 + if (isChecked) {
47 + newValue.push(this.value)
48 + } else {
49 + newValue.splice(newValue.indexOf(this.value), 1)
50 + }
51 +
52 + this.$emit('change', newValue)
53 + } else {
54 + this.$emit('change', isChecked ? this.trueValue : this.falseValue)
55 + }
56 + }
57 + }
58 +}
59 +</script>
1 +<template>
2 + <div class="selectbox">
3 + <div class="selectall">
4 + <div class="check-head" style="margin: 0 0 0 10px">
5 + <check-all :value.sync="isAll" @click.native="selectAll(isAll)">全部商品</check-all>
6 + <p style="display: inline-block">
7 + (<span style="color: #8fb5de">{{currSum}}</span>/<span>{{totalSum}}</span>)
8 + </p>
9 + </div>
10 + </div>
11 + <div
12 + class="selectlist"
13 + v-for="(item, index) in data"
14 + :key="item.id">
15 + <div class="dash-line">
16 + <span></span>
17 + </div>
18 + <div class="check-head" style="margin: 0 0 10px 15px">
19 + <check-all :value.sync="item.isCheck" @click.native="checkAllClick(item.isCheck, index)">{{ item.name }}</check-all>
20 + <p style="display: inline-block">
21 + (<span style="color: #8fb5de">{{item.currItemCount}}</span>/<span>{{item.currTotal}}</span>)
22 + </p>
23 + </div>
24 + <checker
25 + v-model="item.selectedList"
26 + type="checkbox"
27 + default-item-class="check-item"
28 + disabled-item-class="check-item-disabled"
29 + selected-item-class="check-item-selected"
30 + @on-change="checkerChange(item.selectedList, index)"
31 + class="check-item-wrap-self">
32 + <checker-item
33 + v-for="(item, index) in item.list"
34 + :key="index"
35 + :value="item.key"
36 + v-if="!item.disabled"
37 + :disabled="item.disabled">{{item.value}}</checker-item>
38 + </checker>
39 + </div>
40 + </div>
41 +</template>
42 +
43 +<script>
44 +import { Checker, CheckerItem, CheckIcon, TransferDom } from 'vux'
45 +import CheckAll from 'components/isCheckAll/index'
46 +export default {
47 + directives: {
48 + TransferDom
49 + },
50 + components: {
51 + Checker,
52 + CheckerItem,
53 + CheckIcon,
54 + CheckAll
55 + },
56 + data () {
57 + return {
58 + isAll: false,
59 + currSum: 0,
60 + totalSum: 0,
61 + source: [
62 + {
63 + isCheck: true,
64 + id: '123a',
65 + name: '蔬菜类',
66 + currItemCount: 0,
67 + itemTotal: 4,
68 + list: [
69 + {
70 + key: '1',
71 + value: '什锦冷菜'
72 + },
73 + {
74 + key: '2',
75 + value: '经典冷盘甜小菜心太软'
76 + },
77 + {
78 + key: '3',
79 + value: '凉拌黑木耳'
80 + },
81 + {
82 + key: '4',
83 + value: '私房飘香酱牛肉'
84 + }
85 + ]
86 + },
87 + {
88 + isCheck: false,
89 + id: '852a',
90 + name: '肉类',
91 + currItemCount: 0,
92 + itemTotal: 5,
93 + list: [
94 + {
95 + key: 'b',
96 + value: '咸水鸭',
97 + isSelected: true
98 + },
99 + {
100 + key: 'c',
101 + value: '酱香牛肉'
102 + },
103 + {
104 + key: 'd',
105 + value: '羊肉'
106 + },
107 + {
108 + key: 'e',
109 + value: '凉拌猪耳朵'
110 + },
111 + {
112 + key: 'g',
113 + value: '海蜇头'
114 + }
115 + ]
116 + }
117 + ],
118 + data: [
119 + {
120 + isCheck: false,
121 + id: '123a',
122 + name: '蔬菜类',
123 + currItemCount: 2,
124 + currTotal: 4,
125 + selectedList: ['1', '2'],
126 + list: [
127 + {
128 + key: '1',
129 + value: '什锦冷菜'
130 + },
131 + {
132 + key: '2',
133 + value: '经典冷盘甜小菜心太软'
134 + },
135 + {
136 + key: '3',
137 + value: '凉拌黑木耳'
138 + },
139 + {
140 + key: '4',
141 + value: '私房飘香酱牛肉'
142 + }
143 + ]
144 + },
145 + {
146 + isCheck: false,
147 + id: '852a',
148 + name: '肉类',
149 + currItemCount: 1,
150 + currTotal: 5,
151 + selectedList: ['b'],
152 + list: [
153 + {
154 + key: 'b',
155 + value: '咸水鸭'
156 + },
157 + {
158 + key: 'c',
159 + value: '酱香牛肉'
160 + },
161 + {
162 + key: 'd',
163 + value: '羊肉'
164 + },
165 + {
166 + key: 'e',
167 + value: '凉拌猪耳朵'
168 + },
169 + {
170 + key: 'g',
171 + value: '海蜇头'
172 + }
173 + ]
174 + }
175 + ]
176 + }
177 + },
178 + mounted () {
179 + this.currSum = _.sum(_.map(this.data, 'currItemCount'))
180 + this.totalSum = _.sum(_.map(this.data, 'currTotal'))
181 + },
182 + methods: {
183 + checkAllClick (val, index) {
184 + const selectedKey = _.map(this.data[index].list, 'key')
185 + if (val === true) {
186 + this.data[index].selectedList = selectedKey
187 + this.data[index].currItemCount = this.data[index].currTotal
188 + } else {
189 + this.data[index].selectedList = []
190 + this.data[index].currItemCount = 0
191 + }
192 + this.currSum = _.sum(_.map(this.data, 'currItemCount'))
193 + if (this.currSum === this.totalSum) {
194 + this.isAll = true
195 + } else {
196 + this.isAll = false
197 + }
198 + },
199 + checkerChange (value, index) {
200 + if (value.length === this.data[index].list.length) {
201 + this.data[index].isCheck = true
202 + } else {
203 + this.data[index].isCheck = false
204 + }
205 + this.data[index].selectedList = value
206 + this.data[index].currItemCount = this.data[index].selectedList.length
207 + this.currSum = _.sum(_.map(this.data, 'currItemCount'))
208 + if (this.currSum === this.totalSum) {
209 + this.isAll = true
210 + } else {
211 + this.isAll = false
212 + }
213 + },
214 + selectAll (val) {
215 + const source = this.data
216 + if (val === true) {
217 + _(source).each(function (item, index) {
218 + source[index].selectedList = _.map(item.list, 'key')
219 + source[index].isCheck = true
220 + })
221 + this.currSum = this.totalSum
222 + } else {
223 + _(source).each(function (item, index) {
224 + source[index].selectedList = []
225 + source[index].isCheck = false
226 + })
227 + this.currSum = 0
228 + }
229 + }
230 + }
231 +}
232 +</script>
233 +
234 +<style lang="less" scoped>
235 +.dash-line {
236 + padding: 0.6rem 0;
237 + span{
238 + display: block;
239 + width: 100%;
240 + border-bottom: 1px dashed #d9d9db;
241 + }
242 +}
243 +.checklist-item {
244 + span {
245 + display: inline-block;
246 + width: 1.2rem;
247 + height: 1.2rem;
248 + background-size: cover;
249 + background-image: url(../../assets/unchecked.png);
250 + vertical-align: middle;
251 + margin-right: 0.5rem;
252 + }
253 +}
254 +.checklist-item-selected {
255 + span {
256 + background-image: url(../../assets/checked.png)
257 + }
258 +}
259 +.check-item {
260 + background: #f6f6f6;
261 + color: #333;
262 + padding: 0.4rem;
263 + border-radius: 0.4rem;
264 + margin: 0.4rem
265 +}
266 +.check-item-disabled {
267 + background: #eaeff7;
268 + color: #ccc;
269 +}
270 +.check-item-selected {
271 + background: #c4d4e7;
272 + color: #2c426b;
273 +}
274 +</style>
1 +<template lang="html">
2 + <div>
3 + <demo></demo>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import demo from './test-index'
9 +export default {
10 + components: {
11 + demo
12 + },
13 + data ( ) {
14 + return {
15 +
16 + }
17 + }
18 +}
19 +</script>
20 +
21 +<style lang="less">
22 +</style>
1 +<template lang="html">
2 + <div class="multiSelect">
3 + <div style="height: 16rem; overflow-y: scroll;">
4 + <div style="border-bottom: 1px dashed #d9d9db;">
5 + <div class="check-head" style="margin: 0.8rem 0 0.8rem 2px">
6 + <check-icon :value.sync="checkAll" @click.native="selectAll(checkAll)">{{allName}}</check-icon>
7 + <p style="display: inline-block">
8 + (<span style="color: #8fb5de">{{currCount}}</span>/<span>{{currTotal}}</span>)
9 + </p>
10 + </div>
11 + </div>
12 + <div
13 + class="list"
14 + v-for="(item, index) in items"
15 + :keys="index">
16 + <div class="check-head" style="margin: 0.4rem 0 0.4rem 15px">
17 + <check-icon :value.sync="item.currCheckAll" @click.native="checkItemAll(item.currCheckAll, index)">{{item.name}}</check-icon>
18 + <p style="display: inline-block">
19 + (<span style="color: #8fb5de">{{item.currItemCount}}</span>/<span>{{item.currItemTotal}}</span>)
20 + </p>
21 + </div>
22 + <checker
23 + v-model="item.selectedList"
24 + type="checkbox"
25 + default-item-class="check-item"
26 + disabled-item-class="check-item-disabled"
27 + selected-item-class="check-item-selected"
28 + @on-change="checkerChange(item.selectedList, index)"
29 + class="check-item-wrap-self">
30 + <checker-item
31 + v-for="(list, index) in item.lists"
32 + :key="index"
33 + :value="list.key"
34 + v-if="!list.disabled"
35 + :disabled="list.disabled">{{list.value}}</checker-item>
36 + </checker>
37 + </div>
38 + </div>
39 + <x-button mini class="default-btn" @click.native="getSelected">完成</x-button>
40 + </div>
41 +</template>
42 +
43 +<script>
44 +import { Checker, CheckerItem, CheckIcon, TransferDom, XButton } from 'vux'
45 +export default {
46 + name: 'multiCheck',
47 + props: ['items', 'allName'],
48 + components: {
49 + Checker,
50 + CheckerItem,
51 + CheckIcon,
52 + TransferDom,
53 + XButton
54 + },
55 + data () {
56 + return {
57 + currAllSelected: [],
58 + checkAll: false,
59 + currCheckAll: false,
60 + currCount: null,
61 + currTotal: null,
62 + currItemCount: null,
63 + currItemTotal: null
64 + }
65 + },
66 + mounted () {
67 + this.currCount = _.sum(_.map(this.items, 'currItemCount'))
68 + this.currTotal = _.sum(_.map(this.items, 'currItemTotal'))
69 + this.getSelectedF(this.items)
70 + },
71 + methods: {
72 + getSelectedF (arr) {
73 + this.currAllSelected = _.flattenDeep(_.map(arr, 'selectedList'))
74 + },
75 + selectAll (val) {
76 + const source = this.items
77 + if (val === true) {
78 + _(source).each(function (item, index) {
79 + source[index].selectedList = _.map(item.lists, 'key')
80 + source[index].currCheckAll = true
81 + })
82 + this.currCount = this.currTotal
83 + } else {
84 + _(source).each(function (item, index) {
85 + source[index].selectedList = []
86 + source[index].currCheckAll = false
87 + })
88 + this.currCount = 0
89 + }
90 + this.getSelectedF(this.items)
91 + },
92 + checkItemAll (val, index) {
93 + const selectedKey = _.map(this.items[index].lists, 'key')
94 + if (val === true) {
95 + this.items[index].selectedList = selectedKey
96 + this.items[index].currItemCount = this.items[index].currItemTotal
97 + } else {
98 + this.items[index].selectedList = []
99 + this.items[index].currItemCount = 0
100 + }
101 + this.currCount = _.sum(_.map(this.items, 'currItemCount'))
102 + if (this.currCount === this.currTotal) {
103 + this.checkAll = true
104 + } else {
105 + this.checkAll = false
106 + }
107 + this.getSelectedF(this.items)
108 + },
109 + checkerChange (value, index) {
110 + this.$emit('listChange', value)
111 + if (value.length === this.items[index].lists.length) {
112 + this.items[index].currCheckAll = true
113 + } else {
114 + this.items[index].currCheckAll = false
115 + }
116 + this.items[index].selectedList = value
117 + this.items[index].currItemCount = this.items[index].selectedList.length
118 + this.currCount = _.sum(_.map(this.items, 'currItemCount'))
119 + if (this.currCount === this.currTotal) {
120 + this.checkAll = true
121 + } else {
122 + this.checkAll = false
123 + }
124 + this.getSelectedF(this.items)
125 + },
126 + getSelected () {
127 + this.$emit('getSelected', this.currAllSelected)
128 + }
129 + }
130 +}
131 +</script>
132 +
133 +<style lang="less">
134 +.multiSelect {
135 + .dash-line {
136 + padding: 0.6rem 0;
137 + span{
138 + display: block;
139 + width: 100%;
140 + border-bottom: 1px dashed #d9d9db;
141 + }
142 + }
143 + .list {
144 + border-bottom: 1px dashed #d9d9db;
145 + padding: 0.3rem 0
146 + }
147 + .check-item {
148 + background: #f6f6f6;
149 + color: #333;
150 + padding: 0.4rem;
151 + border-radius: 0.4rem;
152 + margin: 0.4rem
153 + }
154 + .check-item-disabled {
155 + background: #eaeff7;
156 + color: #ccc;
157 + }
158 + .check-item-selected {
159 + background: #c4d4e7;
160 + color: #2c426b;
161 + }
162 + .default-btn {
163 + display: block;
164 + width: 60%;
165 + margin: 1rem auto 0;
166 + background: #86aace;
167 + border: 1px solid #86aace;
168 + color: #fff;
169 + }
170 + .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
171 + color: #c4d4e7
172 + }
173 +}
174 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <confirm
4 + :title="title"
5 + :value="show"
6 + :left_text="left_text"
7 + :right_text="right_text"
8 + @on-cancel="onCancel"
9 + @on-confirm="onConfirm"
10 + @on-show="onShow"
11 + @on-hide="onHide">
12 + 自定义插入内容
13 + </confirm>
14 + <group>
15 + <x-switch title="测试开关" v-model="show"></x-switch>
16 + </group>
17 + </div>
18 +</template>
19 +
20 +<script>
21 +import confirm from 'components/confirm/index'
22 +import { Group, XSwitch } from 'vux'
23 +
24 +export default {
25 + components: { confirm, Group, XSwitch },
26 + data () {
27 + return {
28 + title: '温馨提示',
29 + left_text: '下一步',
30 + right_text: '继续',
31 + show: false
32 + }
33 + },
34 + mounted () {
35 + },
36 + methods: {
37 + onCancel () {
38 + console.warn('on-cancel');
39 + },
40 + onConfirm (msg) {
41 + console.warn('on-confirm', msg);
42 + },
43 + onHide () {
44 + console.warn('on-hide');
45 + },
46 + onShow () {
47 + console.warn('on-show');
48 + }
49 + }
50 +}
51 +</script>
52 +
53 +<style lang="less">
54 +</style>
1 +<template lang="html">
2 + <div v-transfer-dom>
3 + <confirm v-model="show"
4 + :title="title"
5 + :confirm-text="right_text"
6 + :cancel-text="left_text"
7 + :close-on-confirm="close_confirm"
8 + ref="confirm"
9 + @on-cancel="onCancel"
10 + @on-confirm="onConfirm"
11 + @on-show="onShow"
12 + @on-hide="onHide">
13 + <slot></slot>
14 + </confirm>
15 + </div>
16 +</template>
17 +
18 +<script>
19 +import { TransferDomDirective as TransferDom, Confirm } from 'vux'
20 +
21 +export default {
22 + components: { Confirm },
23 + directives: { TransferDom },
24 + props: {
25 + title: {
26 + required: true
27 + },
28 + value: {
29 + required: true
30 + },
31 + left_text: {
32 + required: true
33 + },
34 + right_text: {
35 + required: true
36 + },
37 + close_confirm: {
38 + default: false
39 + }
40 + },
41 + data () {
42 + return {
43 + }
44 + },
45 + mounted () {
46 + },
47 + computed: {
48 + show: {
49 + get () {
50 + return this.value
51 + },
52 + set (val) {}
53 + }
54 + },
55 + methods: {
56 + onCancel () {
57 + this.$emit('on-cancel');
58 + },
59 + onConfirm (msg) {
60 + this.$emit('on-confirm', msg);
61 + },
62 + onHide () {
63 + this.$emit('on-hide');
64 + },
65 + onShow () {
66 + this.$emit('on-show');
67 + }
68 + }
69 +}
70 +</script>
71 +
72 +<style lang="less">
73 + .weui-dialog__btn.weui-dialog__btn_primary {
74 + color: #353535;
75 + }
76 + .weui-dialog__hd {
77 + background-color: #8ea9cf;
78 + color: #FFFFFF;
79 + padding: 0.5em 1.6em 0.5em;
80 + }
81 +</style>
1 +<template lang="html">
2 + <div class="circleBtn" @click="onClick">
3 + <i>+</i>
4 + <slot name="text" class="text"></slot>
5 + </div>
6 +</template>
7 +
8 +<script>
9 +export default {
10 + data () {
11 + return {
12 +
13 + }
14 + },
15 + methods: {
16 + onClick () {
17 + this.$emit('circleClick')
18 + }
19 + }
20 +}
21 +</script>
22 +
23 +<style lang="less">
24 +.circleBtn{
25 + display: inline-block;
26 + width: 2rem;
27 + height: 2rem;
28 + border: 1px solid #a2b8d6;
29 + border-radius: 50%;
30 + color: #a2b8d6;
31 + position: relative;
32 + i {
33 + height: 1rem;
34 + line-height: 1rem;
35 + font-size: 1.8rem;
36 + font-weight: 100;
37 + font-style: normal;
38 + position: absolute;
39 + left: 50%;
40 + top: 0;
41 + margin-left: -0.6rem;
42 + }
43 + span{
44 + display: inline-block;
45 + width: 2rem;
46 + font-size: 0.7rem;
47 + text-align: center;
48 + position: absolute;
49 + left: 50%;
50 + bottom: 0;
51 + margin-left: -1rem;
52 + }
53 +}
54 +</style>
1 +
2 +<template lang="html">
3 + <div class="">
4 + <demo @circleClick="add"><span slot="text">添加</span></demo>
5 + <demo @circleClick="relative"><span slot="text">关联</span></demo>
6 + </div>
7 +</template>
8 +
9 +<script>
10 +import Demo from 'components/customBtn/circleBtn'
11 +export default {
12 + components: {
13 + Demo
14 + },
15 + methods: {
16 + add () {
17 + console.warn('addd');
18 + },
19 + relative () {
20 + console.warn('relative');
21 + }
22 + }
23 +}
24 +</script>
25 +
26 +<style lang="css">
27 +</style>
1 +<template>
2 + <div class="">
3 + <datetime
4 + :title="dateTitle"
5 + :show="dateShow"
6 + :confirm_text="confirm_text"
7 + :cancel_text="cancel_text"
8 + @on-cancel="onCancel"
9 + @on-confirm="onConfirm"
10 + @on-hide="onHide"
11 + @on-change="onChange"
12 + ></datetime>
13 + </div>
14 +</template>
15 +<script>
16 + import datetime from 'components/datetime/index'
17 + export default {
18 + components: {
19 + datetime
20 + },
21 + data () {
22 + return {
23 + dateTitle: '生日',
24 + dateShow: true,
25 + confirm_text: '确定',
26 + cancel_text: '取消'
27 + }
28 + },
29 + methods: {
30 + onCancel () {
31 + console.warn('on-cancel');
32 + },
33 + onConfirm (msg) {
34 + console.warn('on-confirm', msg);
35 + },
36 + onHide () {
37 + console.warn('on-hide');
38 + },
39 + onShow () {
40 + console.warn('on-show');
41 + },
42 + onChange () {
43 + console.warn('on-show');
44 + }
45 + }
46 + }
47 +</script>
...\ No newline at end of file ...\ No newline at end of file
1 +<template>
2 + <div class="">
3 + <group>
4 + <datetime
5 + v-model="value"
6 + @on-change="onChange"
7 + :title="title"
8 + :confirm-text="confirm_text"
9 + :cancel-text="cancel_text"
10 + :placeholder="placeholder"
11 + @on-cancel="onCancel"
12 + @on-confirm="onConfirm"
13 + @on-hide="onHide"></datetime>
14 + </group>
15 + </div>
16 +</template>
17 +<script>
18 + /*
19 + 参考vux文档 datetime
20 + */
21 + import { Datetime, Group, XButton } from 'vux'
22 + export default {
23 + components: {
24 + Datetime,
25 + Group,
26 + XButton
27 + },
28 + props: ['title', 'confirm_text', 'cancel_text', 'placeholder', 'value'],
29 + data () {
30 + },
31 + mounted () {},
32 + methods: {
33 + onChange (value) {
34 + // console.warn('on-change', value)
35 + },
36 + log (str1, str2 = '') {
37 + console.warn(str1, str2)
38 + },
39 + onConfirm (val) {
40 + this.$emit('on-confirm', val)
41 + },
42 + onCancel () {
43 + this.$emit('on-cancel')
44 + },
45 + onHide () {
46 + this.$emit('on-hide')
47 + }
48 + }
49 + }
50 +</script>
51 +<style lang="less">
52 + .dp-header {
53 + background-color: #89A9CF;
54 + color: #fff;
55 + .dp-item.dp-left, .dp-item.dp-right {
56 + color: #fff!important;
57 + font-size: 14px;
58 + }
59 + }
60 + .dp-item {
61 + .scroller-item {
62 + font-size:14px;
63 + }
64 + .scroller-item-selected {
65 + font-size: 16px;
66 + }
67 + }
68 +</style>
1 +<template lang="html">
2 + <div class="setTimeBox" v-transfer-dom>
3 + <x-dialog v-model="this.$store.state.setTimeBox_show">
4 + <div class="title">设置门店到货时间</div>
5 + <div class="title-prov">{{supplier_name}}</div>
6 + <div class="title-materiel">{{materiel_name}}</div>
7 + <div class="content" v-if="dist_plan.dist_way === 'D'">
8 + <div class="content-title">每天订货</div>
9 + <ul class="list">
10 + <li v-for="(item, index) in store_list" :key="index">
11 + <flexbox>
12 + <flexbox-item :span="4">
13 + <div class="store-name">
14 + <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
15 + <span v-if="item.store_name">{{item.store_name}}</span>
16 + <span v-else>{{item.name}}</span>
17 + </div>
18 + </flexbox-item>
19 + <flexbox-item style="margin-left:2.5rem;" :span="8">
20 + <div>
21 + 第<selector class="selector" v-model="item.dist_day" placeholder="请选择" :options="distDay" @on-change="preventS"></selector>天<selector class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime" @on-change="preventS"></selector>到货
22 + </div>
23 + </flexbox-item>
24 + </flexbox>
25 + </li>
26 + </ul>
27 + </div>
28 + <div class="content" v-if="dist_plan.dist_way === 'W'">
29 + <div class="content-title">每{{getWeek('order')}}订货</div>
30 + <ul class="list">
31 + <li v-for="(item, index) in store_list" :key="index">
32 + <flexbox>
33 + <flexbox-item :span="4">
34 + <div class="store-name">
35 + <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
36 + <span v-if="item.store_name">{{item.store_name}}</span>
37 + <span v-else>{{item.name}}</span>
38 + </div>
39 + </flexbox-item>
40 + <flexbox-item style="margin-left:2.5rem;" :span="8">
41 + <div>
42 + <selector class="selector" v-model="item.dist_day" :placeholder="'请选择'" :options="distWeek" @on-change="preventS"></selector>
43 + <selector class="selector" v-model="item.dist_time" :placeholder="'请选择'" :options="distTime" @on-change="preventS"></selector>
44 + 到货
45 + </div>
46 + </flexbox-item>
47 + </flexbox>
48 + </li>
49 + </ul>
50 + </div>
51 + <div class="content" v-if="dist_plan.dist_way === 'M'">
52 + <div class="content-title">每月{{getMonth(dist_plan.order_day)}}订货</div>
53 + <ul class="list">
54 + <li v-for="(item, index) in store_list" :key="index">
55 + <flexbox>
56 + <flexbox-item :span="4">
57 + <div class="store-name">
58 + <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
59 + <span v-if="item.store_name">{{item.store_name}}</span>
60 + <span v-else>{{item.name}}</span>
61 + </div>
62 + </flexbox-item>
63 + <flexbox-item style="margin-left:2.5rem;" :span="8">
64 + <div>
65 + <selector class="selector" v-model="item.dist_day" placeholder="请选择" :options="distMonth" @on-change="preventS"></selector>
66 + <selector class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime" @on-change="preventS"></selector>
67 + 到货
68 + </div>
69 + </flexbox-item>
70 + </flexbox>
71 + </li>
72 + </ul>
73 + </div>
74 + <div class="add" @click="addItem">
75 + <i class="fa fa-plus-circle fa-2x"></i>
76 + <span>添加相同送货线路的门店</span>
77 + </div>
78 + <div class="set-finish">
79 + <div @click="finishSet()" class="set-finish-btn">确定</div>
80 + </div>
81 + <confirm v-model="show"
82 + :title="'操作提示'"
83 + @on-cancel="onCancel"
84 + @on-confirm="onConfirm">
85 + <div style="padding-top:0.8rem;">你确定要放弃修改并退出吗</div>
86 + </confirm>
87 + </x-dialog>
88 + </div>
89 +</template>
90 +
91 +<script>
92 +import {
93 + TransferDomDirective as TransferDom,
94 + XDialog,
95 + Flexbox,
96 + FlexboxItem,
97 + Selector,
98 + Confirm
99 +} from 'vux'
100 +import { compat } from 'logistics/static/js/compatibility'
101 +export default {
102 + components: {
103 + TransferDom,
104 + XDialog,
105 + Flexbox,
106 + FlexboxItem,
107 + Selector,
108 + Confirm
109 + },
110 + mixins: [compat],
111 + mounted () {
112 + this.$nextTick(() => {
113 + let mask = document.getElementsByClassName('setTimeBox')[0].getElementsByClassName('weui-mask')[0];
114 + mask.addEventListener('click', () => {
115 + this.show = true;
116 + });
117 + });
118 + },
119 + props: ['supplier_name', 'list', 'materiel_name'],
120 + data () {
121 + return {
122 + distDay: [
123 + {
124 + value: 2,
125 + key: 'DAY+1d'
126 + },
127 + {
128 + value: 3,
129 + key: 'DAY+2d'
130 + },
131 + {
132 + value: 4,
133 + key: 'DAY+3d'
134 + },
135 + {
136 + value: 5,
137 + key: 'DAY+4d'
138 + },
139 + {
140 + value: 6,
141 + key: 'DAY+5d'
142 + },
143 + {
144 + value: 7,
145 + key: 'DAY+6d'
146 + },
147 + {
148 + value: 8,
149 + key: 'DAY+7d'
150 + },
151 + {
152 + value: 9,
153 + key: 'DAY+8d'
154 + },
155 + {
156 + value: 10,
157 + key: 'DAY+9d'
158 + }
159 + ],
160 + distWeek: [
161 + {
162 + value: '周一',
163 + key: 'MON'
164 + },
165 + {
166 + value: '周二',
167 + key: 'TUE'
168 + },
169 + {
170 + value: '周三',
171 + key: 'WED'
172 + },
173 + {
174 + value: '周四',
175 + key: 'THU'
176 + },
177 + {
178 + value: '周五',
179 + key: 'FRI'
180 + },
181 + {
182 + value: '周六',
183 + key: 'SAT'
184 + },
185 + {
186 + value: '周日',
187 + key: 'SUN'
188 + },
189 + {
190 + value: '下周一',
191 + key: 'MON+1w'
192 + },
193 + {
194 + value: '下周二',
195 + key: 'TUE+1w'
196 + },
197 + {
198 + value: '下周三',
199 + key: 'WED+1w'
200 + },
201 + {
202 + value: '下周四',
203 + key: 'THU+1w'
204 + },
205 + {
206 + value: '下周五',
207 + key: 'FRI+1w'
208 + },
209 + {
210 + value: '下周六',
211 + key: 'SAT+1w'
212 + },
213 + {
214 + value: '下周日',
215 + key: 'SUN+1w'
216 + }
217 + ],
218 + distMonth: [
219 + {
220 + value: '1号',
221 + key: '1'
222 + },
223 + {
224 + value: '2号',
225 + key: '2'
226 + },
227 + {
228 + value: '3号',
229 + key: '3'
230 + },
231 + {
232 + value: '4号',
233 + key: '4'
234 + },
235 + {
236 + value: '5号',
237 + key: '5'
238 + },
239 + {
240 + value: '6号',
241 + key: '6'
242 + },
243 + {
244 + value: '7号',
245 + key: '7'
246 + },
247 + {
248 + value: '8号',
249 + key: '8'
250 + },
251 + {
252 + value: '9号',
253 + key: '9'
254 + },
255 + {
256 + value: '10号',
257 + key: '10'
258 + },
259 + {
260 + value: '11号',
261 + key: '11'
262 + },
263 + {
264 + value: '12号',
265 + key: '12'
266 + },
267 + {
268 + value: '13号',
269 + key: '13'
270 + },
271 + {
272 + value: '14号',
273 + key: '14'
274 + },
275 + {
276 + value: '15号',
277 + key: '15'
278 + },
279 + {
280 + value: '16号',
281 + key: '16'
282 + },
283 + {
284 + value: '17号',
285 + key: '17'
286 + },
287 + {
288 + value: '18号',
289 + key: '18'
290 + },
291 + {
292 + value: '19号',
293 + key: '19'
294 + },
295 + {
296 + value: '20号',
297 + key: '20'
298 + },
299 + {
300 + value: '21号',
301 + key: '21'
302 + },
303 + {
304 + value: '22号',
305 + key: '22'
306 + },
307 + {
308 + value: '23号',
309 + key: '23'
310 + },
311 + {
312 + value: '24号',
313 + key: '24'
314 + },
315 + {
316 + value: '25号',
317 + key: '25'
318 + },
319 + {
320 + value: '26号',
321 + key: '26'
322 + },
323 + {
324 + value: '27号',
325 + key: '27'
326 + },
327 + {
328 + value: '28号',
329 + key: '28'
330 + },
331 + {
332 + value: '29号',
333 + key: '29'
334 + },
335 + {
336 + value: '30号',
337 + key: '30'
338 + },
339 + {
340 + value: '31号',
341 + key: '31'
342 + },
343 + {
344 + value: '月末',
345 + key: 'last'
346 + },
347 + {
348 + value: '次月1号',
349 + key: '1+1m'
350 + },
351 + {
352 + value: '次月2号',
353 + key: '2+1m'
354 + },
355 + {
356 + value: '次月3号',
357 + key: '3+1m'
358 + },
359 + {
360 + value: '次月4号',
361 + key: '4+1m'
362 + },
363 + {
364 + value: '次月5号',
365 + key: '5+1m'
366 + },
367 + {
368 + value: '次月6号',
369 + key: '6+1m'
370 + },
371 + {
372 + value: '次月7号',
373 + key: '7+1m'
374 + },
375 + {
376 + value: '次月8号',
377 + key: '8+1m'
378 + },
379 + {
380 + value: '次月9号',
381 + key: '9+1m'
382 + },
383 + {
384 + value: '次月10号',
385 + key: '10+1m'
386 + },
387 + {
388 + value: '次月11号',
389 + key: '11+1m'
390 + },
391 + {
392 + value: '次月12号',
393 + key: '12+1m'
394 + },
395 + {
396 + value: '次月13号',
397 + key: '13+1m'
398 + },
399 + {
400 + value: '次月14号',
401 + key: '14+1m'
402 + },
403 + {
404 + value: '次月15号',
405 + key: '15+1m'
406 + },
407 + {
408 + value: '次月16号',
409 + key: '16+1m'
410 + },
411 + {
412 + value: '次月17号',
413 + key: '17+1m'
414 + },
415 + {
416 + value: '次月18号',
417 + key: '18+1m'
418 + },
419 + {
420 + value: '次月19号',
421 + key: '19+1m'
422 + },
423 + {
424 + value: '次月20号',
425 + key: '20+1m'
426 + },
427 + {
428 + value: '次月21号',
429 + key: '21+1m'
430 + },
431 + {
432 + value: '次月22号',
433 + key: '22+1m'
434 + },
435 + {
436 + value: '次月23号',
437 + key: '23+1m'
438 + },
439 + {
440 + value: '次月24号',
441 + key: '24+1m'
442 + },
443 + {
444 + value: '次月25号',
445 + key: '25+1m'
446 + },
447 + {
448 + value: '次月26号',
449 + key: '26+1m'
450 + },
451 + {
452 + value: '次月27号',
453 + key: '27+1m'
454 + },
455 + {
456 + value: '次月28号',
457 + key: '28+1m'
458 + },
459 + {
460 + value: '次月29号',
461 + key: '29+1m'
462 + },
463 + {
464 + value: '次月30号',
465 + key: '30+1m'
466 + },
467 + {
468 + value: '次月31号',
469 + key: '31+1m'
470 + },
471 + {
472 + value: '次月月末',
473 + key: 'last+1m'
474 + }
475 + ],
476 + distTime: [
477 + {
478 + value: '00:00',
479 + key: '00:00'
480 + },
481 + {
482 + value: '00:30',
483 + key: '00:30'
484 + },
485 + {
486 + value: '01:00',
487 + key: '01:00'
488 + },
489 + {
490 + value: '01:30',
491 + key: '01:30'
492 + },
493 + {
494 + value: '02:00',
495 + key: '02:00'
496 + },
497 + {
498 + value: '02:30',
499 + key: '02:30'
500 + },
501 + {
502 + value: '03:00',
503 + key: '03:00'
504 + },
505 + {
506 + value: '03:30',
507 + key: '03:30'
508 + },
509 + {
510 + value: '04:00',
511 + key: '04:00'
512 + },
513 + {
514 + value: '04:30',
515 + key: '04:30'
516 + },
517 + {
518 + value: '05:00',
519 + key: '05:00'
520 + },
521 + {
522 + value: '05:30',
523 + key: '05:30'
524 + },
525 + {
526 + value: '06:00',
527 + key: '06:00'
528 + },
529 + {
530 + value: '06:30',
531 + key: '06:30'
532 + },
533 + {
534 + value: '07:30',
535 + key: '07:30'
536 + },
537 + {
538 + value: '08:00',
539 + key: '08:00'
540 + },
541 + {
542 + value: '08:30',
543 + key: '08:30'
544 + },
545 + {
546 + value: '09:00',
547 + key: '09:00'
548 + },
549 + {
550 + value: '09:30',
551 + key: '09:30'
552 + },
553 + {
554 + value: '10:00',
555 + key: '10:00'
556 + },
557 + {
558 + value: '10:30',
559 + key: '10:30'
560 + },
561 + {
562 + value: '11:00',
563 + key: '11:00'
564 + },
565 + {
566 + value: '11:30',
567 + key: '11:30'
568 + },
569 + {
570 + value: '12:00',
571 + key: '12:00'
572 + },
573 + {
574 + value: '12:30',
575 + key: '12:30'
576 + },
577 + {
578 + value: '13:00',
579 + key: '13:00'
580 + },
581 + {
582 + value: '13:30',
583 + key: '13:30'
584 + },
585 + {
586 + value: '14:00',
587 + key: '14:00'
588 + },
589 + {
590 + value: '14:30',
591 + key: '14:30'
592 + },
593 + {
594 + value: '15:00',
595 + key: '15:00'
596 + },
597 + {
598 + value: '15:30',
599 + key: '15:30'
600 + },
601 + {
602 + value: '16:00',
603 + key: '16:00'
604 + },
605 + {
606 + value: '16:30',
607 + key: '16:30'
608 + },
609 + {
610 + value: '17:00',
611 + key: '17:00'
612 + },
613 + {
614 + value: '17:30',
615 + key: '17:30'
616 + },
617 + {
618 + value: '18:00',
619 + key: '18:00'
620 + },
621 + {
622 + value: '18:30',
623 + key: '18:30'
624 + },
625 + {
626 + value: '19:00',
627 + key: '19:00'
628 + },
629 + {
630 + value: '19:30',
631 + key: '19:30'
632 + },
633 + {
634 + value: '20:00',
635 + key: '20:00'
636 + },
637 + {
638 + value: '20:30',
639 + key: '20:30'
640 + },
641 + {
642 + value: '21:00',
643 + key: '21:00'
644 + },
645 + {
646 + value: '21:30',
647 + key: '21:30'
648 + },
649 + {
650 + value: '22:00',
651 + key: '22:00'
652 + },
653 + {
654 + value: '22:30',
655 + key: '22:30'
656 + },
657 + {
658 + value: '23:00',
659 + key: '23:00'
660 + },
661 + {
662 + value: '23:30',
663 + key: '23:30'
664 + }
665 + ],
666 + dist_plan: {},
667 + store_list: [],
668 + show: false
669 + }
670 + },
671 + /***
672 + * ----------------------------------------------------------------------------
673 + * 父子组件没有嵌套关系，无法获得数组中的index值，需要获得父级当前正在设置的计划
674 + * 并把此计划已设置完的订货计划传到vuex里
675 + * 子组件在从vuex里获得设置到一半的订货计划，在子组件中设置到货计划
676 + * 因为子组件与父组件一起刷新所以mounted不适用
677 + * 需要用watch监听vuex里的stat状态，当父级设置完成订货计划时
678 + * 子组件再设置完到货计划时，将完成的数据一起传给父组件
679 + * ----------------------------------------------------------------------------
680 + * 注意：因为子组件中还可以添加相同线路的门店，已添加的门店若已设置到货时间，那么为了
681 + * 保证已设置的数据不会被清空，需要存到vuex里，当添加完门店回到此组件时，再次展示，并且
682 + * 展示添加的门店。
683 + * ----------------------------------------------------------------------------
684 + */
685 + computed: {
686 + getOrderDetail () {
687 + return this.$store.state.order_detail;
688 + }
689 + },
690 + watch: {
691 + getOrderDetail (val) {
692 + for (let i in val) {
693 + this.dist_plan[i] = val[i];
694 + };
695 + if (this.dist_plan.dist_way === 'W') {
696 + this.distWeek.forEach((v, i) => {
697 + if (this.dist_plan.order_day === v.key) {
698 + this.distWeek = this.distWeek.slice(i);
699 + }
700 + });
701 + } else if (this.dist_plan.dist_way === 'M') {
702 + this.distMonth.forEach((v, i) => {
703 + if (this.dist_plan.order_day === v.key) {
704 + this.distMonth = this.distMonth.slice(i);
705 + }
706 + });
707 + }
708 + },
709 + list: function (val) {
710 + let list = [];
711 + for (let i = 0; i < val.length; i++) {
712 + list.push(val[i]);
713 + }
714 + this.store_list = _.cloneDeep(list);
715 + }
716 + },
717 + methods: {
718 + finishSet () {
719 + for (let n = 0; n < this.store_list.length; n++) {
720 + if (!this.store_list[n].dist_day || !this.store_list[n].dist_time) {
721 + this.$vux.toast.show({
722 + type: 'warn',
723 + text: '到货日期或到货时间不能为空'
724 + });
725 + return;
726 + }
727 + }
728 + this.$store.commit('emptyOldList');
729 + let arr = [];
730 + let list = this.store_list;
731 + list.map(v => {
732 + if (!v.route_name) {
733 + v.route_name = v.city;
734 + }
735 + return v;
736 + })
737 + let obj = _.groupBy(list, 'route_name');
738 + for (let i in obj) {
739 + let saveData = {
740 + route_name: `${i}${obj[i].length}`,
741 + store_list: obj[i]
742 + }
743 + arr.push(saveData);
744 + }
745 + this.$emit('compelete', _.cloneDeep(arr));
746 + this.$store.commit('checksetTimeBox');
747 + },
748 + getWeek (t) {
749 + let str;
750 + switch (t) {
751 + case 'order':
752 + str = this.dist_plan.order_day;
753 + switch (str) {
754 + case 'MON':
755 + return '周一';
756 + case 'TUE':
757 + return '周二';
758 + case 'WED':
759 + return '周三';
760 + case 'THU':
761 + return '周四';
762 + case 'FRI':
763 + return '周五';
764 + case 'SAT':
765 + return '周六';
766 + case 'SUN':
767 + return '周日';
768 + };
769 + break;
770 + case 'dist':
771 + str = this.dist_plan.store_list[arguments[1]].dist_day;
772 + switch (str) {
773 + case 'MON':
774 + return '周一';
775 + case 'TUE':
776 + return '周二';
777 + case 'WED':
778 + return '周三';
779 + case 'THU':
780 + return '周四';
781 + case 'FRI':
782 + return '周五';
783 + case 'SAT':
784 + return '周六';
785 + case 'SUN':
786 + return '周日';
787 + case 'MON+1w':
788 + return '下周一';
789 + case 'TUE+1w':
790 + return '下周二';
791 + case 'WED+1w':
792 + return '下周三';
793 + case 'THU+1w':
794 + return '下周四';
795 + case 'FRI+1w':
796 + return '下周五';
797 + case 'SAT+1w':
798 + return '下周六';
799 + case 'SUN+1w':
800 + return '下周日';
801 + };
802 + break;
803 + }
804 + },
805 + getMonth (str) {
806 + if (str === 'last') {
807 + return '月末'
808 + } else {
809 + if (str.split('+').length > 1) {
810 + if (str.split('+')[0] === 'last') {
811 + return '次月月末'
812 + } else {
813 + return '次月' + str.split('+')[0] + '号'
814 + }
815 + } else {
816 + return str + '号';
817 + }
818 + }
819 + },
820 + deleteItem (i) {
821 + this.store_list.splice(i, 1);
822 + },
823 + addItem () {
824 + this.$store.commit('checksetTimeBox');
825 + this.$store.commit('saveOldList', this.store_list);
826 + this.$emit('addStoreInChild', this.store_list);
827 + },
828 + onCancel () {
829 + this.show = false;
830 + },
831 + onConfirm () {
832 + this.$store.commit('checksetTimeBox');
833 + this.$store.commit('emptyOldList');
834 + }
835 + }
836 +}
837 +</script>
838 +
839 +<style lang="less">
840 +.setTimeBox {
841 + font-size: 14px;
842 + color: #666;
843 + .title {
844 + font-size: 18px;
845 + background: #8ea9cf;
846 + color: #fff;
847 + text-align: center;
848 + padding: 0.6rem 0;
849 + }
850 + .title-prov,
851 + .title-materiel {
852 + padding: 0.2rem 0 0.2rem 0.4rem;
853 + font-size: 16px;
854 + text-align: left;
855 + }
856 + .title-prov {
857 + color: #333;
858 + }
859 + .title-materiel {
860 + color: #8ea9cf;
861 + }
862 + .content {
863 + .content-title {
864 + font-size: 16px;
865 + padding: 0.4rem 0;
866 + text-align: center;
867 + }
868 + .list {
869 + margin: 0;
870 + max-height: 10rem;
871 + overflow-y: auto;
872 + overflow-x: hidden;
873 + li {
874 + list-style: none;
875 + padding: 0.4rem;
876 + border-top: 1px solid #c7c7c7;
877 + .store-name {
878 + i {
879 + color: #8ea9cf;
880 + vertical-align: middle;
881 + }
882 + span {
883 + vertical-align: middle;
884 + }
885 + }
886 + }
887 + }
888 +
889 + select {
890 + width: 4rem;
891 + margin: 0 3px;
892 + padding-left: 10px;
893 + background-color: #fff;
894 + border-radius: 4px;
895 + border: 1px solid #dcdfe6;
896 + color: #606266;
897 + height: 40px;
898 + line-height: 40px;
899 + outline: 0;
900 + transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
901 + }
902 + }
903 +
904 + .add {
905 + text-align: center;
906 + color: #8ea9cf;
907 + padding: 0.5rem 0;
908 + border-top: 3px solid #c7c7c7;
909 + border-bottom: 3px solid #c7c7c7;
910 + i {
911 + vertical-align: middle;
912 + }
913 + span {
914 + vertical-align: middle;
915 + }
916 + }
917 + .set-finish {
918 + width: 90%;
919 + margin: 0 auto;
920 + margin-top: 1rem;
921 + border-radius: 5px;
922 + color: #fff;
923 + background: #8ea9cf;
924 + padding: 0.4rem 0;
925 + }
926 +}
927 +.vux-selector {
928 + display: inline-block !important;
929 + .weui-select {
930 + padding-right: 0 !important;
931 + }
932 +}
933 +</style>
1 +<!--
2 + 复选门店到货时间弹出框
3 +-->
4 +<template>
5 + <div class="setTimeBox" v-transfer-dom>
6 + <x-dialog class="set-bom-prop" v-model="this.$store.state.setTimeBox_show">
7 + <div class="set-bom-prop-title">
8 + <div>设置门店到货时间</div>
9 + </div>
10 + <ul class="title-list">
11 + <li class="supplier">{{supplier_name}}</li>
12 + <li class="materiel">{{materiel_name}}</li>
13 + </ul>
14 + <div v-if="dist_plan.dist_way === 'D'">
15 + <div class="row-title">
16 + 每天订货
17 + </div>
18 + <ul class="row-list">
19 + <li v-for="(item, index) in store_list" :key="index">
20 + <flexbox align="center">
21 + <flexbox-item class="store-name" :span="4">
22 + <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
23 + <span>{{item.name}}</span>
24 + </flexbox-item>
25 + <flexbox-item :span="8">
26 + 第<select v-model="item.dist_day">
27 + <option v-for="(o, oi) in distDay" :value="o.val" :key="oi">{{o.lab}}</option>
28 + </select>天<select v-model="item.dist_time">
29 + <option v-for="(o, oi) in distTime" :value="o" :key="oi">{{o}}</option>
30 + </select>到货
31 + </flexbox-item>
32 + </flexbox>
33 + </li>
34 + </ul>
35 + <div class="add-store" @click="addItem">
36 + <i class="fa fa-plus-circle fa-2x"></i>
37 + <span>添加相同送货线路的门店</span>
38 + </div>
39 + </div>
40 + <ul class="row-list" v-if="dist_plan.dist_way === 'W'">
41 + <li class="row-title">
42 + 每周{{getWeek('order')}}订货
43 + </li>
44 + <li v-for="(item, index) in store_list" :key="index">
45 + <flexbox align="center">
46 + <flexbox-item class="store-name" :span="4">
47 + <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
48 + <span>{{item.name}}</span>
49 + </flexbox-item>
50 + <flexbox-item :span="8">
51 + <select v-model="item.dist_day">
52 + <option v-for="(o, oi) in distWeek" :value="o.val" :key="oi">{{o.lab}}</option>
53 + </select>
54 + <select v-model="item.dist_time">
55 + <option v-for="(o, oi) in distTime" :value="o" :key="oi">{{o}}</option>
56 + </select>
57 + 到货
58 + </flexbox-item>
59 + </flexbox>
60 + </li>
61 + <li class="add-store" @click="addItem">
62 + <i class="fa fa-plus-circle fa-2x"></i>
63 + <span>添加相同送货线路的门店</span>
64 + </li>
65 + </ul>
66 + <ul class="row-list" v-if="dist_plan.dist_way === 'M'">
67 + <li class="row-title">
68 + 每月{{getMonth(dist_plan.order_day)}}订货
69 + </li>
70 + <li v-for="(item, index) in store_list" :key="index">
71 + <flexbox align="center">
72 + <flexbox-item class="store-name" :span="4">
73 + <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
74 + <span>{{item.name}}</span>
75 + </flexbox-item>
76 + <flexbox-item :span="8">
77 + <select v-model="item.dist_day">
78 + <option v-for="(o, oi) in distMonth" :value="o.val" :key="oi">{{o.lab}}</option>
79 + </select>
80 + <select v-model="item.dist_time">
81 + <option v-for="(o, oi) in distTime" :value="o" :key="oi">{{o}}</option>
82 + </select>
83 + 到货
84 + </flexbox-item>
85 + </flexbox>
86 + </li>
87 + <li class="add-store" @click="addItem">
88 + <i class="fa fa-plus-circle fa-2x"></i>
89 + <span>添加相同送货线路的门店</span>
90 + </li>
91 + </ul>
92 + <div class="set-finish">
93 + <div @click="finishSet()" class="set-finish-btn">确定</div>
94 + </div>
95 + </x-dialog>
96 + </div>
97 +</template>
98 +
99 +<script>
100 +import { Flexbox, FlexboxItem, XDialog, TransferDomDirective as TransferDom, Popup, Picker } from 'vux'
101 +export default {
102 + components: {
103 + Flexbox, FlexboxItem, XDialog, TransferDom, Popup, Picker
104 + },
105 + mounted () {
106 + this.$nextTick(() => {
107 + let mask = document.getElementsByClassName('setTimeBox')[0].getElementsByClassName('weui-mask')[0];
108 + mask.addEventListener('click', () => {
109 + this.$store.commit('checksetTimeBox');
110 + this.$store.commit('emptyOldList');
111 + });
112 + });
113 + },
114 + props: ['supplier_name', 'list', 'materiel_name'],
115 + data () {
116 + return {
117 + distDay: [
118 + {
119 + lab: 2,
120 + val: 'DAY+1d'
121 + },
122 + {
123 + lab: 3,
124 + val: 'DAY+2d'
125 + },
126 + {
127 + lab: 4,
128 + val: 'DAY+3d'
129 + },
130 + {
131 + lab: 5,
132 + val: 'DAY+4d'
133 + },
134 + {
135 + lab: 6,
136 + val: 'DAY+5d'
137 + },
138 + {
139 + lab: 7,
140 + val: 'DAY+6d'
141 + },
142 + {
143 + lab: 8,
144 + val: 'DAY+7d'
145 + },
146 + {
147 + lab: 9,
148 + val: 'DAY+8d'
149 + },
150 + {
151 + lab: 10,
152 + val: 'DAY+9d'
153 + }
154 + ],
155 + distWeek: [
156 + {
157 + lab: '周一',
158 + val: 'MON'
159 + },
160 + {
161 + lab: '周二',
162 + val: 'TUE'
163 + },
164 + {
165 + lab: '周三',
166 + val: 'WED'
167 + },
168 + {
169 + lab: '周四',
170 + val: 'THU'
171 + },
172 + {
173 + lab: '周五',
174 + val: 'FRI'
175 + },
176 + {
177 + lab: '周六',
178 + val: 'SAT'
179 + },
180 + {
181 + lab: '周日',
182 + val: 'SUN'
183 + },
184 + {
185 + lab: '下周一',
186 + val: 'MON+1w'
187 + },
188 + {
189 + lab: '下周二',
190 + val: 'TUE+1w'
191 + },
192 + {
193 + lab: '下周三',
194 + val: 'WED+1w'
195 + },
196 + {
197 + lab: '下周四',
198 + val: 'THU+1w'
199 + },
200 + {
201 + lab: '下周五',
202 + val: 'FRI+1w'
203 + },
204 + {
205 + lab: '下周六',
206 + val: 'SAT+1w'
207 + },
208 + {
209 + lab: '下周日',
210 + val: 'SUN+1w'
211 + }
212 + ],
213 + distMonth: [
214 + {
215 + lab: '1号',
216 + val: '1'
217 + },
218 + {
219 + lab: '2号',
220 + val: '2'
221 + },
222 + {
223 + lab: '3号',
224 + val: '3'
225 + },
226 + {
227 + lab: '4号',
228 + val: '4'
229 + },
230 + {
231 + lab: '5号',
232 + val: '5'
233 + },
234 + {
235 + lab: '6号',
236 + val: '6'
237 + },
238 + {
239 + lab: '7号',
240 + val: '7'
241 + },
242 + {
243 + lab: '8号',
244 + val: '8'
245 + },
246 + {
247 + lab: '9号',
248 + val: '9'
249 + },
250 + {
251 + lab: '10号',
252 + val: '10'
253 + },
254 + {
255 + lab: '11号',
256 + val: '11'
257 + },
258 + {
259 + lab: '12号',
260 + val: '12'
261 + },
262 + {
263 + lab: '13号',
264 + val: '13'
265 + },
266 + {
267 + lab: '14号',
268 + val: '14'
269 + },
270 + {
271 + lab: '15号',
272 + val: '15'
273 + },
274 + {
275 + lab: '16号',
276 + val: '16'
277 + },
278 + {
279 + lab: '17号',
280 + val: '17'
281 + },
282 + {
283 + lab: '18号',
284 + val: '18'
285 + },
286 + {
287 + lab: '19号',
288 + val: '19'
289 + },
290 + {
291 + lab: '20号',
292 + val: '20'
293 + },
294 + {
295 + lab: '21号',
296 + val: '21'
297 + },
298 + {
299 + lab: '22号',
300 + val: '22'
301 + },
302 + {
303 + lab: '23号',
304 + val: '23'
305 + },
306 + {
307 + lab: '24号',
308 + val: '24'
309 + },
310 + {
311 + lab: '25号',
312 + val: '25'
313 + },
314 + {
315 + lab: '26号',
316 + val: '26'
317 + },
318 + {
319 + lab: '27号',
320 + val: '27'
321 + },
322 + {
323 + lab: '28号',
324 + val: '28'
325 + },
326 + {
327 + lab: '29号',
328 + val: '29'
329 + },
330 + {
331 + lab: '30号',
332 + val: '30'
333 + },
334 + {
335 + lab: '31号',
336 + val: '31'
337 + },
338 + {
339 + lab: '月末',
340 + val: 'last'
341 + },
342 + {
343 + lab: '次月1号',
344 + val: '1+1m'
345 + },
346 + {
347 + lab: '次月2号',
348 + val: '2+1m'
349 + },
350 + {
351 + lab: '次月3号',
352 + val: '3+1m'
353 + },
354 + {
355 + lab: '次月4号',
356 + val: '4+1m'
357 + },
358 + {
359 + lab: '次月5号',
360 + val: '5+1m'
361 + },
362 + {
363 + lab: '次月6号',
364 + val: '6+1m'
365 + },
366 + {
367 + lab: '次月7号',
368 + val: '7+1m'
369 + },
370 + {
371 + lab: '次月8号',
372 + val: '8+1m'
373 + },
374 + {
375 + lab: '次月9号',
376 + val: '9+1m'
377 + },
378 + {
379 + lab: '次月10号',
380 + val: '10+1m'
381 + },
382 + {
383 + lab: '次月11号',
384 + val: '11+1m'
385 + },
386 + {
387 + lab: '次月12号',
388 + val: '12+1m'
389 + },
390 + {
391 + lab: '次月13号',
392 + val: '13+1m'
393 + },
394 + {
395 + lab: '次月14号',
396 + val: '14+1m'
397 + },
398 + {
399 + lab: '次月15号',
400 + val: '15+1m'
401 + },
402 + {
403 + lab: '次月16号',
404 + val: '16+1m'
405 + },
406 + {
407 + lab: '次月17号',
408 + val: '17+1m'
409 + },
410 + {
411 + lab: '次月18号',
412 + val: '18+1m'
413 + },
414 + {
415 + lab: '次月19号',
416 + val: '19+1m'
417 + },
418 + {
419 + lab: '次月20号',
420 + val: '20+1m'
421 + },
422 + {
423 + lab: '次月21号',
424 + val: '21+1m'
425 + },
426 + {
427 + lab: '次月22号',
428 + val: '22+1m'
429 + },
430 + {
431 + lab: '次月23号',
432 + val: '23+1m'
433 + },
434 + {
435 + lab: '次月24号',
436 + val: '24+1m'
437 + },
438 + {
439 + lab: '次月25号',
440 + val: '25+1m'
441 + },
442 + {
443 + lab: '次月26号',
444 + val: '26+1m'
445 + },
446 + {
447 + lab: '次月27号',
448 + val: '27+1m'
449 + },
450 + {
451 + lab: '次月28号',
452 + val: '28+1m'
453 + },
454 + {
455 + lab: '次月29号',
456 + val: '29+1m'
457 + },
458 + {
459 + lab: '次月30号',
460 + val: '30+1m'
461 + },
462 + {
463 + lab: '次月31号',
464 + val: '31+1m'
465 + },
466 + {
467 + lab: '次月月末',
468 + val: 'last+1m'
469 + }
470 + ],
471 + distTime: [
472 + '00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'
473 + ],
474 + dist_plan: {},
475 + store_line: {
476 + city: '上海3',
477 + store_list: [
478 + {
479 + store_id: '0b805b3a3a9b4d36b5dd9a876592de15',
480 + name: 'XXX门店',
481 + dist_day: '',
482 + dist_time: ''
483 + },
484 + {
485 + store_id: '433f045dba264b6ea5d6bb717589974c',
486 + name: 'XXX门店',
487 + dist_day: '',
488 + dist_time: ''
489 + },
490 + {
491 + store_id: 'd6346c870e384d7ea0d093fc94a82882',
492 + name: 'XXX门店',
493 + dist_day: '',
494 + dist_time: ''
495 + }
496 + ]
497 + },
498 + store_list: []
499 + }
500 + },
501 + /***
502 + * ----------------------------------------------------------------------------
503 + * 父子组件没有嵌套关系，无法获得数组中的index值，需要获得父级当前正在设置的计划
504 + * 并把此计划已设置完的订货计划传到vuex里
505 + * 子组件在从vuex里获得设置到一半的订货计划，在子组件中设置到货计划
506 + * 因为子组件与父组件一起刷新所以mounted不适用
507 + * 需要用watch监听vuex里的stat状态，当父级设置完成订货计划时
508 + * 子组件再设置完到货计划时，将完成的数据一起传给父组件
509 + * ----------------------------------------------------------------------------
510 + * 注意：因为子组件中还可以添加相同线路的门店，已添加的门店若已设置到货时间，那么为了
511 + * 保证已设置的数据不会被清空，需要存到vuex里，当添加完门店回到此组件时，再次展示，并且
512 + * 展示添加的门店。
513 + * ----------------------------------------------------------------------------
514 + */
515 + computed: {
516 + getOrderDetail () {
517 + return this.$store.state.order_detail;
518 + }
519 + },
520 + watch: {
521 + getOrderDetail (val) {
522 + for (let i in val) {
523 + this.dist_plan[i] = val[i];
524 + }
525 + },
526 + list: function (val) {
527 + let list = [];
528 + for (let i = 0; i < val.length; i++) {
529 + list.push(val[i]);
530 + }
531 + this.store_list = _.cloneDeep(list);
532 + }
533 + },
534 + methods: {
535 + finishSet () {
536 + for (let n = 0; n < this.store_list.length; n++) {
537 + if (!this.store_list[n].dist_day || !this.store_list[n].dist_time) {
538 + alert('到货日期或到货时间不能为空');
539 + return;
540 + }
541 + }
542 + this.$store.commit('emptyOldList');
543 + let arr = [];
544 + let obj = {};
545 + let list = this.store_list;
546 + list.forEach((e, i) => {
547 + if (obj.route_name === (e.city || e.route_name)) {
548 + obj.store_list.push(e);
549 + } else if (obj.route_name && obj.route_name !== (e.city || e.route_name)) {
550 + arr.push(obj);
551 + obj = {};
552 + obj.route_name = (e.city || e.route_name);
553 + obj.store_list = [];
554 + obj.store_list.push(e);
555 + } else {
556 + obj.route_name = (e.city || e.route_name);
557 + obj.store_list = [];
558 + obj.store_list.push(e);
559 + }
560 + if (i === list.length - 1) {
561 + arr.push(obj);
562 + }
563 + })
564 + for (let j = 0; j < arr.length; j++) {
565 + arr[j].route_name += arr[j].store_list.length;
566 + }
567 + this.$emit('compelete', _.cloneDeep(arr));
568 + this.$store.commit('checksetTimeBox');
569 + },
570 + getWeek (t) {
571 + let str;
572 + switch (t) {
573 + case 'order':
574 + str = this.dist_plan.order_day;
575 + switch (str) {
576 + case 'MON':
577 + return '周一';
578 + case 'TUE':
579 + return '周二';
580 + case 'WED':
581 + return '周三';
582 + case 'THU':
583 + return '周四';
584 + case 'FRI':
585 + return '周五';
586 + case 'SAT':
587 + return '周六';
588 + case 'SUN':
589 + return '周日';
590 + };
591 + break;
592 + case 'dist':
593 + str = this.dist_plan.store_list[arguments[1]].dist_day;
594 + switch (str) {
595 + case 'MON':
596 + return '周一';
597 + case 'TUE':
598 + return '周二';
599 + case 'WED':
600 + return '周三';
601 + case 'THU':
602 + return '周四';
603 + case 'FRI':
604 + return '周五';
605 + case 'SAT':
606 + return '周六';
607 + case 'SUN':
608 + return '周日';
609 + case 'MON+1w':
610 + return '下周一';
611 + case 'TUE+1w':
612 + return '下周二';
613 + case 'WED+1w':
614 + return '下周三';
615 + case 'THU+1w':
616 + return '下周四';
617 + case 'FRI+1w':
618 + return '下周五';
619 + case 'SAT+1w':
620 + return '下周六';
621 + case 'SUN+1w':
622 + return '下周日';
623 + };
624 + break;
625 + }
626 + },
627 + getMonth (str) {
628 + if (str !== 'last') {
629 + if (str.split('+').length === 1) {
630 + return str + '号';
631 + } else {
632 + return '次月' + str + '号';
633 + }
634 + } else if (str === 'last') {
635 + return '月末';
636 + }
637 + },
638 + deleteItem (i) {
639 + this.store_list.splice(i, 1);
640 + },
641 + addItem () {
642 + this.$store.commit('checksetTimeBox');
643 + this.$store.commit('saveOldList', this.store_list);
644 + this.$emit('addStoreInChild', this.store_list);
645 + }
646 + }
647 +}
648 +</script>
649 +
650 +<style lang="less" scoped>
651 +.set-bom-prop {
652 + font-size: 14px;
653 + color: #666;
654 +}
655 +.weui-dialog {
656 + padding-bottom: 1rem !important;
657 + max-width: 800px !important;
658 +}
659 +.red {
660 + color: red;
661 + font-style: normal;
662 +}
663 +.green {
664 + color: green;
665 +}
666 +.title-list {
667 + font-size: 16px;
668 + color: #333;
669 +}
670 +.supplier {
671 + text-align: left;
672 + padding: 0.4rem 0.8rem;
673 +}
674 +.materiel {
675 + text-align: left;
676 + padding: 0.4rem 0.8rem;
677 + color: #8ea8cf;
678 +}
679 +select {
680 + width: 4rem;
681 + margin: 0 3px;
682 + padding-left: 10px;
683 + background-color: #fff;
684 + border-radius: 4px;
685 + border: 1px solid #dcdfe6;
686 + color: #606266;
687 + height: 40px;
688 + line-height: 40px;
689 + outline: 0;
690 + transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
691 +}
692 +.setTimeBox {
693 + ul {
694 + list-style: none;
695 + margin: 0;
696 + padding: 0;
697 + }
698 + .set-bom-prop {
699 + padding: 0;
700 + min-height: 40px;
701 + font-size: 15px;
702 + line-height: 1.3;
703 + word-wrap: break-word;
704 + word-break: break-all;
705 + color: #999999;
706 + touch-action: none;
707 + .set-bom-prop-title {
708 + background-color: #8ea9cf;
709 + color: #FFFFFF;
710 + padding: 0.5em 1.6em 0.5em;
711 + font-size: 18px;
712 + }
713 + .row-title {
714 + text-align: center;
715 + padding: 0.8rem 0;
716 + border-bottom: 1px solid #c7c7c7;
717 + }
718 + .row-list {
719 + max-height: 25rem;
720 + overflow-x: hidden;
721 + overflow-y: auto;
722 + list-style: none;
723 + li {
724 + display: flex;
725 + padding: 0.4rem 0 0.4rem 0.8rem;
726 + border-bottom: 1px solid #c7c7c7;
727 + em {
728 + font-style: normal;
729 + }
730 + .el-input {
731 + width: 4rem;
732 + margin: 0 3px;
733 + }
734 + .el-input__inner {
735 + padding: 0;
736 + padding-left: 10px;
737 + }
738 + }
739 + .store-name {
740 + i {
741 + vertical-align: middle;
742 + color: #8ea8cf;
743 + }
744 + span {
745 + vertical-align: middle;
746 + line-height: 2em;
747 + }
748 + }
749 + }
750 + .add-store {
751 + padding: 0.4rem 0 0.4rem 0 !important;
752 + border-top: 2px solid #c7c7c7;
753 + border-bottom: 2px solid #c7c7c7;
754 + text-align: center;
755 + i {
756 + vertical-align: middle;
757 + color: #8ea8cf;
758 + }
759 + span {
760 + vertical-align: middle;
761 + line-height: 2em;
762 + }
763 + }
764 + .set-finish {
765 + width: 90%;
766 + margin: 0 auto;
767 + margin-top: 1rem;
768 + border-radius: 0.25rem;
769 + color: white;
770 + padding: 0.35rem 0;
771 + background-color: #8ea8cf;
772 + }
773 + }
774 + .el-input__prefix {
775 + display: none;
776 + }
777 +}
778 +
779 +</style>
1 +<template lang="html">
2 + <div class="distplan_detail" v-if="dialog.route_index !== null">
3 + <x-dialog :show="show">
4 + <div class="dbox">
5 + <p class="dialog-title">相同送货线路的门店</p>
6 + <p style="text-align:center;">
7 + 每<span v-if="dialog.dist_way === 'D'">天</span><span v-if="dialog.dist_way === 'W'">{{getWeek(dialog.order_day)}}</span><span v-if="dialog.dist_way === 'M'">{{getMonth(dialog.order_day)}}</span>订
8 + </p>
9 + <div>
10 + <p class="dialog-subtitle" style="color:#89a9cf">
11 + {{dialog.store_list[dialog.route_index].route_name}}
12 + </p>
13 + <div class="dialog-store-wrap">
14 + <flexbox justify="space-between">
15 + <flexbox-item style="padding-left:2.8rem;text-align:left;">门店名称</flexbox-item>
16 + <flexbox-item style="padding-right:1.2rem;text-align:right;">到货时间</flexbox-item>
17 + </flexbox>
18 + </div>
19 + <div class="dialog-store">
20 + <flexbox justify="space-between" v-for="(ite, i) in dialog.store_list[dialog.route_index].store_list" class="dialog-store-wrap dialog-store-item" :key="i">
21 + <flexbox-item style="padding-left:8px;text-align:left;">{{ite.store_name}}</flexbox-item>
22 + <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'D'">第{{getDay(ite.dist_day)}}天 {{ite.dist_time}} 到货</flexbox-item>
23 + <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'W'">{{getWeek(ite.dist_day)}} {{ite.dist_time}} 到货</flexbox-item>
24 + <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'M'">{{getMonth(ite.dist_day)}} {{ite.dist_time}} 到货</flexbox-item>
25 + </flexbox>
26 + </div>
27 + </div>
28 + <div v-if="type === 'view'" class="close" @click="close" style="margin-bottom:15px;">关闭</div>
29 + <div v-if="type === 'edit'" class="btn-box" style="margin-bottom:15px;">
30 + <div @click="close">关闭</div>
31 + <div @click="edit">修改</div>
32 + </div>
33 + </div>
34 + </x-dialog>
35 + </div>
36 +</template>
37 +
38 +<script>
39 +import { XDialog, Flexbox, FlexboxItem } from 'vux'
40 +export default {
41 + props: ['show', 'type', 'dialog'],
42 + components: {
43 + XDialog,
44 + Flexbox,
45 + FlexboxItem
46 + },
47 + methods: {
48 + getDay (str) {
49 + console.warn(str);
50 + return (Number(str.split('+')[1][0]) + 1);
51 + },
52 + getWeek (str) {
53 + switch (str) {
54 + case 'MON':
55 + return '周一';
56 + case 'TUE':
57 + return '周二';
58 + case 'WED':
59 + return '周三';
60 + case 'THU':
61 + return '周四';
62 + case 'FRI':
63 + return '周五';
64 + case 'SAT':
65 + return '周六';
66 + case 'SUN':
67 + return '周日';
68 + case 'MON+1w':
69 + return '下周一';
70 + case 'TUE+1w':
71 + return '下周二';
72 + case 'WED+1w':
73 + return '下周三';
74 + case 'THU+1w':
75 + return '下周四';
76 + case 'FRI+1w':
77 + return '下周五';
78 + case 'SAT+1w':
79 + return '下周六';
80 + case 'SUN+1w':
81 + return '下周日';
82 + }
83 + },
84 + getMonth (str) {
85 + if (str === 'last') {
86 + return '月末'
87 + } else {
88 + if (str.split('+').length > 1) {
89 + if (str.split('+')[0] === 'last') {
90 + return '次月月末'
91 + } else {
92 + return '次月' + str.split('+')[0] + '号'
93 + }
94 + } else {
95 + return str + '号';
96 + }
97 + }
98 + },
99 + close () {
100 + this.$emit('close', 'store')
101 + },
102 + edit () {
103 + this.$emit('edit', 'store')
104 + }
105 + }
106 +}
107 +</script>
108 +
109 +<style lang="less">
110 +.weui-dialog {
111 + max-width: 600px;
112 +}
113 +.distplan_detail {
114 + .dialog-title {
115 + text-align: center;
116 + padding: 0.6rem 0;
117 + color: #fff;
118 + background: #8ea8cf;
119 + }
120 + .dialog-content {
121 + max-height: 25rem;
122 + overflow-y: scroll;
123 + }
124 + .dialog-subtitle {
125 + padding: 0.4rem 0.8rem;
126 + text-align: left;
127 + }
128 + .dialog-wrap {
129 + &:after {
130 + display: block;
131 + content: '';
132 + clear: both;
133 + }
134 + .dialog-item {
135 + float: left;
136 + width: 45%;
137 + padding: 0.2rem 0;
138 + margin: 0.2rem 0.4rem;
139 + text-align: center;
140 + background: #F0EFF5;
141 + border-radius: 3px;
142 + }
143 + }
144 + .close {
145 + width: 95%;
146 + margin: 0 auto;
147 + background: #8ea8cf;
148 + text-align: center;
149 + padding: 0.4rem 0;
150 + color: #fff;
151 + margin-top: 1rem;
152 + border-radius: 5px;
153 + }
154 + .btn-box {
155 + display: flex;
156 + justify-content: space-around;
157 + margin-top: 1rem;
158 + div {
159 + width: 46%;
160 + border-radius: 5px;
161 + padding: 0.4rem 0;
162 + &:first-of-type {
163 + background: #fff;
164 + color: #89a9cf;
165 + border: 1px solid #89a9cf;
166 + }
167 + &:last-of-type {
168 + background: #89a9cf;
169 + color: #fff;
170 + }
171 + }
172 + }
173 + .dialog-store {
174 + max-height: 25rem;
175 + overflow-y: auto;
176 + }
177 + .dialog-store-wrap {
178 + border-bottom: 1px solid #d6d7dc;
179 + padding-bottom: 0.6rem;
180 + span {
181 + padding: 0.3rem 0;
182 + }
183 + }
184 + .dialog-store-item {
185 + height: 3rem;
186 + padding: 0.4rem 0;
187 + }
188 +}
189 +</style>
1 +<template lang="html">
2 + <div style="background-color: white;">
3 + <flexbox class="inline-wraper-content">
4 + <flexbox-item :span="8" class="left-wrapper">
5 + {{leftText}}
6 + <slot name="left"></slot>
7 + </flexbox-item>
8 + <flexbox-item :span="4">
9 + <slot name="right"></slot>
10 + </flexbox-item>
11 + </flexbox>
12 + <flexbox-item>
13 + <slot name="bottom"></slot>
14 + </flexbox-item>
15 + </div>
16 +</template>
17 +
18 +<script>
19 +import { Flexbox, FlexboxItem } from 'vux'
20 +export default {
21 + props: ['leftText'],
22 + components: { Flexbox, FlexboxItem }
23 +}
24 +</script>
25 +
26 +<style lang="less">
27 + .inline-wraper-content {
28 + border-bottom: 1px solid #eee;
29 + .left-wrapper {
30 + text-indent: 0.5rem;
31 + font-size: 0.85rem;
32 + }
33 + }
34 +</style>
1 +<template lang="html">
2 + <inline-wraper :leftText="v.name" v-for="(v, k) in list" :key="k">
3 + <template slot="left">
4 + <div v-if="!v.is_set" class="unset-name">{{v.name}}</div>
5 + <div v-else class="enable-set-name">{{v.name}} (已设置)</div>
6 + </template>
7 + <template slot="right">
8 + <div style="">
9 + <div v-if="!v.is_set" @click="setBom(v, k)" class="un-set-btn">设置BOM{{bom_code}}</div>
10 + <div v-else @click="editBom(v, k)" class="set-enable-btn">设置BOM{{bom_code}}</div>
11 + </div>
12 + </template>
13 + <template slot="bottom">
14 + <div>
15 + <div v-if="!item.data.is_set" @click="setBom(item.data)" class="un-set-btn">设置BOM{{bom_code > 1 ? bom_code : '1'}}</div>
16 + <div v-else class="set-enable-btn" @click="setBom(item.data)">设置BOM{{bom_code > 1 ? bom_code : '1'}}</div>
17 + </div>
18 + </template>
19 + </inline-wraper>
20 +</template>
21 +
22 +<script>
23 +import inlineWraper from 'components/inlineWraper/index'
24 +export default {
25 + components: {inlineWraper}
26 +}
27 +</script>
28 +
29 +<style lang="less">
30 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <demo :value.sync="demo1" type="all" @update="choose(demo1)">test</demo>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import Demo from 'components/isCheckAll/index'
9 +export default {
10 + components: { Demo },
11 + data () {
12 + return {
13 + demo1: true
14 + }
15 + },
16 + methods: {
17 + choose (val) {
18 + console.warn(val);
19 + }
20 + }
21 +}
22 +</script>
23 +
24 +<style lang="css">
25 +</style>
1 +<template>
2 + <div class="checkBox" @click="updateValue">
3 + <span class="checkItem allSelected" v-show="type === 'all' && value"></span>
4 + <span class="checkItem noSelected" v-show="!value"></span>
5 + <font><slot></slot></font>
6 + </div>
7 +</template>
8 +<script>
9 +export default {
10 + name: 'isCheckAll',
11 + methods: {
12 + updateValue () {
13 + this.$emit('update:value', !this.value)
14 + }
15 + },
16 + props: {
17 + value: {
18 + type: Boolean,
19 + default: false
20 + },
21 + type: {
22 + type: String,
23 + default: 'all'
24 + }
25 + }
26 +}
27 +</script>
28 +
29 +<style lang="less">
30 +.checkBox {
31 + display: inline-block;
32 + .checkItem {
33 + display: inline-block;
34 + width: 1.3rem;
35 + height: 1.3rem;
36 + text-align: center;
37 + vertical-align: middle;
38 + background-size: cover;
39 + }
40 + .allSelected {
41 + background-image: url(../../assets/all.png);
42 + }
43 + .partSelected {
44 + background-image: url(../../assets/part.png);
45 + }
46 + .noSelected {
47 + background-image: url(../../assets/no.png);
48 + }
49 + font {
50 + font-size: 0.9rem;
51 + vertical-align: middle;
52 + }
53 +}
54 +</style>
1 +<template lang="html">
2 + <div class="materiel_detail">
3 + <x-dialog :show="show">
4 + <div class="dbox">
5 + <p class="dialog-title">同时订货的物料</p>
6 + <div class="dialog-content">
7 + <div v-for="(item, index) in list" :key="index">
8 + <p class="dialog-subtitle">
9 + {{item.class_name}}{{item.sku_list.length}}
10 + </p>
11 + <div class="dialog-wrap">
12 + <p class="dialog-item" v-for="(it, i) in item.sku_list">{{it.sku_name}}</p>
13 + </div>
14 + </div>
15 + </div>
16 + <div v-if="type === 'view'" class="close" @click="close" style="margin-bottom:15px;">关闭</div>
17 + <div v-if="type === 'edit'" class="btn-box" style="margin-bottom:15px;">
18 + <div @click="close">关闭</div>
19 + <div @click="edit">修改</div>
20 + </div>
21 + </div>
22 + </x-dialog>
23 + </div>
24 +</template>
25 +
26 +<script>
27 +import { XDialog } from 'vux'
28 +import { setTimeout } from 'timers';
29 +export default {
30 + props: ['type', 'list', 'show'],
31 + components: {
32 + XDialog
33 + },
34 + watch: {
35 + list () {
36 + setTimeout(() => {
37 + let items = document.getElementsByClassName('dialog-item');
38 + console.warn(items);
39 + let leftHeight = 0;
40 + let rightHeight = 0;
41 + for (let i = 0; i < items.length; i++) {
42 + if (!(i % 2)) {
43 + leftHeight = $(items[i]).innerHeight();
44 + } else if (i % 2) {
45 + rightHeight = $(items[i]).innerHeight();
46 + console.warn(leftHeight, rightHeight)
47 + if (leftHeight > rightHeight) {
48 + // items[i].style.height = leftHeight;
49 + items[i].style.paddingBottom = items[i].style.paddingTop = (leftHeight - rightHeight) / 2 + 'px';
50 + } else if (rightHeight > leftHeight) {
51 + // items[i - 1].style.height = rightHeight;
52 + items[i - 1].style.paddingBottom = items[i - 1].style.paddingTop = (rightHeight - leftHeight) / 2 + 'px';
53 + }
54 + }
55 + }
56 + }, 1)
57 + }
58 + },
59 + methods: {
60 + close () {
61 + this.$emit('close', 'materiel')
62 + },
63 + edit () {
64 + this.$emit('edit', 'materiel')
65 + }
66 + }
67 +}
68 +</script>
69 +
70 +<style lang="less" scoped>
71 +.materiel_detail {
72 + .dialog-title {
73 + text-align: center;
74 + padding: 0.6rem 0;
75 + color: #fff;
76 + background: #8ea8cf;
77 + }
78 + .dialog-content {
79 + max-height: 25rem;
80 + overflow-y: scroll;
81 + }
82 + .dialog-subtitle {
83 + padding: 0.4rem 0.8rem;
84 + text-align: left;
85 + }
86 + .dialog-wrap {
87 + display: flex;
88 + align-items: center;
89 + flex-wrap: wrap;
90 + justify-content: space-between;
91 + &:after {
92 + display: block;
93 + content: '';
94 + clear: both;
95 + }
96 + .dialog-item {
97 + width: 45%;
98 + // padding: 0.2rem 0;
99 + margin: 0.2rem 0.4rem;
100 + text-align: center;
101 + background: #F0EFF5;
102 + border-radius: 3px;
103 + }
104 + }
105 + .close {
106 + width: 95%;
107 + margin: 0 auto;
108 + background: #8ea8cf;
109 + text-align: center;
110 + padding: 0.4rem 0;
111 + color: #fff;
112 + margin-top: 1rem;
113 + border-radius: 5px;
114 + }
115 + .btn-box {
116 + display: flex;
117 + justify-content: space-around;
118 + padding-top: 1rem;
119 + margin-top: 1rem;
120 + border-top: 1px solid #f0eff5;
121 + div {
122 + width: 46%;
123 + padding: 0.4rem 0;
124 + border-radius: 5px;
125 + &:first-of-type {
126 + background: #fff;
127 + color: #89a9cf;
128 + border: 1px solid #89a9cf;
129 + }
130 + &:last-of-type {
131 + background: #89a9cf;
132 + color: #fff;
133 + }
134 + }
135 + }
136 + .dialog-store-wrap {
137 + display: flex;
138 + justify-content: space-between;
139 + padding: 0 0.8rem;
140 + border-bottom: 1px solid #d6d7dc;
141 + span {
142 + padding: 0.3rem 0;
143 + }
144 + }
145 +}
146 +</style>
1 +<!--
2 + 添加订货计划弹出框
3 +-->
4 +<template>
5 + <div class="orderPlanBox" v-transfer-dom>
6 + <x-dialog class="set-bom-prop" v-model="this.$store.state.orderPlanBox_show">
7 + <div class="set-bom-prop-title">
8 + <div :title="title">{{title}}</div>
9 + </div>
10 + <ul class="row-list title-list">
11 + <li class="supplier-name">
12 + {{supplier_name}}
13 + </li>
14 + <li class="materiel-name">
15 + {{materiel}}
16 + </li>
17 + <li>
18 + <label for="">
19 + <span>订货频次<em class="red">*</em></span>
20 + </label>
21 + <div class="radioBox">
22 + <el-radio-group v-model="list.dist_way">
23 + <el-radio @change="changeRadio" label="D">每天</el-radio>
24 + <el-radio @change="changeRadio" label="W">每周</el-radio>
25 + <el-radio @change="changeRadio" label="M">每月</el-radio>
26 + </el-radio-group>
27 + </div>
28 + </li>
29 + <li v-if="list.dist_way === 'D' || list.dist_way === 'M'">
30 + 设置送货休息日（休息日将顺延送货)
31 + </li>
32 + <li v-if="list.dist_way === 'D' || list.dist_way === 'M'" class="dailyBox">
33 + <el-checkbox-group class="dailyGroup" v-model="list.rest_date">
34 + <el-checkbox label="MON">周一</el-checkbox>
35 + <el-checkbox label="TUE">周二</el-checkbox>
36 + <el-checkbox label="WED">周三</el-checkbox>
37 + <el-checkbox label="THU">周四</el-checkbox>
38 + <el-checkbox label="FRI">周五</el-checkbox>
39 + <el-checkbox label="SAT">周六</el-checkbox>
40 + <el-checkbox label="SUN">周日</el-checkbox>
41 + </el-checkbox-group>
42 + <div class="dailyLine"></div>
43 + </li>
44 + </ul>
45 + <ul class="detailBox" v-if="list.dist_way === 'W'">
46 + <li>
47 + <flexbox>
48 + <flexbox-item :span="3">
49 + <label for="">
50 + <span>订货计划<em class="red">*</em></span>
51 + </label>
52 + </flexbox-item>
53 + <flexbox-item>
54 + 每
55 + <selector @on-change="preventS" v-model="list.order_day" placeholder="请选择" :options="orderWeek"></selector>
56 + 订货
57 + </flexbox-item>
58 + </flexbox>
59 + </li>
60 + </ul>
61 + <ul class="detailBox" v-if="list.dist_way === 'M'">
62 + <li>
63 + <flexbox>
64 + <flexbox-item :span="3">
65 + <label for="">
66 + <span>订货计划<em class="red">*</em></span>
67 + </label>
68 + </flexbox-item>
69 + <flexbox-item>
70 + 每月
71 + <selector @on-change="preventS" v-model="list.order_day" placeholder="请选择" :options="orderMonth"></selector>
72 + 订货
73 + </flexbox-item>
74 + </flexbox>
75 + </li>
76 + </ul>
77 + <div class="set-finish">
78 + <div @click="finishSet()" class="set-finish-btn">确定</div>
79 + </div>
80 + </x-dialog>
81 + </div>
82 +</template>
83 +
84 +<script>
85 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, Selector } from 'vux'
86 +import { compat } from 'logistics/static/js/compatibility'
87 +export default {
88 + directives: {
89 + TransferDom
90 + },
91 + components: {
92 + XDialog, Flexbox, FlexboxItem, Selector
93 + },
94 + mixins: [compat],
95 + props: ['title', 'supplier_name', 'materiel'],
96 + data () {
97 + return {
98 + orderWeek: [
99 + {
100 + value: '周一',
101 + key: 'MON'
102 + },
103 + {
104 + value: '周二',
105 + key: 'TUE'
106 + },
107 + {
108 + value: '周三',
109 + key: 'WED'
110 + },
111 + {
112 + value: '周四',
113 + key: 'THU'
114 + },
115 + {
116 + value: '周五',
117 + key: 'FRI'
118 + },
119 + {
120 + value: '周六',
121 + key: 'SAT'
122 + },
123 + {
124 + value: '周日',
125 + key: 'SUN'
126 + }
127 + ],
128 + orderMonth: [
129 + {
130 + value: '1号',
131 + key: '1'
132 + },
133 + {
134 + value: '2号',
135 + key: '2'
136 + },
137 + {
138 + value: '3号',
139 + key: '3'
140 + },
141 + {
142 + value: '4号',
143 + key: '4'
144 + },
145 + {
146 + value: '5号',
147 + key: '5'
148 + },
149 + {
150 + value: '6号',
151 + key: '6'
152 + },
153 + {
154 + value: '7号',
155 + key: '7'
156 + },
157 + {
158 + value: '8号',
159 + key: '8'
160 + },
161 + {
162 + value: '9号',
163 + key: '9'
164 + },
165 + {
166 + value: '10号',
167 + key: '10'
168 + },
169 + {
170 + value: '11号',
171 + key: '11'
172 + },
173 + {
174 + value: '12号',
175 + key: '12'
176 + },
177 + {
178 + value: '13号',
179 + key: '13'
180 + },
181 + {
182 + value: '14号',
183 + key: '14'
184 + },
185 + {
186 + value: '15号',
187 + key: '15'
188 + },
189 + {
190 + value: '16号',
191 + key: '16'
192 + },
193 + {
194 + value: '17号',
195 + key: '17'
196 + },
197 + {
198 + value: '18号',
199 + key: '18'
200 + },
201 + {
202 + value: '19号',
203 + key: '19'
204 + },
205 + {
206 + value: '20号',
207 + key: '20'
208 + },
209 + {
210 + value: '21号',
211 + key: '21'
212 + },
213 + {
214 + value: '22号',
215 + key: '22'
216 + },
217 + {
218 + value: '23号',
219 + key: '23'
220 + },
221 + {
222 + value: '24号',
223 + key: '24'
224 + },
225 + {
226 + value: '25号',
227 + key: '25'
228 + },
229 + {
230 + value: '26号',
231 + key: '26'
232 + },
233 + {
234 + value: '27号',
235 + key: '27'
236 + },
237 + {
238 + value: '28号',
239 + key: '28'
240 + },
241 + {
242 + value: '29号',
243 + key: '29'
244 + },
245 + {
246 + value: '30号',
247 + key: '30'
248 + },
249 + {
250 + value: '31号',
251 + key: '31'
252 + },
253 + {
254 + value: '月末',
255 + key: 'last'
256 + }
257 + ],
258 + list: {
259 + dist_way: '',
260 + rest_date: [],
261 + order_day: '',
262 + order_time: ''
263 + }
264 + }
265 + },
266 + mounted () {
267 + // 点击遮罩层，弹框消失 start
268 + this.$nextTick(() => {
269 + let mask = document.getElementsByClassName('orderPlanBox')[0].getElementsByClassName('weui-mask')[0];
270 + mask.addEventListener('click', () => {
271 + this.$store.commit('checkOrderPlanBox');
272 + });
273 + })
274 + // 点击遮罩层，弹框消失 end
275 + },
276 + methods: {
277 + changeRadio () {
278 + // 切换订货频次
279 + this.list.order_day = '';
280 + this.list.rest_date = [];
281 + },
282 + finishSet () {
283 + /**
284 + * 完成
285 + * 把订货计划数据传给父组件
286 + * 注意：如果按每天订货，需要将对象中的order_day设置为DAY
287 + * 任何频次的order_time都可以为空
288 + * ------------------------------------------------------------------
289 + */
290 + let obj = {};
291 + for (let i in this.list) {
292 + obj[i] = this.list[i];
293 + }
294 + obj.route_list = [];
295 + if (obj.dist_way === 'D') {
296 + obj.order_day = 'DAY';
297 + } else if (obj.order_day === '') {
298 + this.$vux.toast.show({
299 + type: 'warn',
300 + text: '订货日期不能为空'
301 + });
302 + return;
303 + }
304 + this.$emit('compelete', obj);
305 + this.$store.commit('checkOrderPlanBox')
306 + }
307 + }
308 +}
309 +</script>
310 +
311 +<style lang="less">
312 +.weui-dialog {
313 + padding-bottom: 1rem !important;
314 + max-width: 800px !important;
315 +}
316 +.red {
317 + color: red;
318 + font-style: normal;
319 +}
320 +.green {
321 + color: green;
322 +}
323 +.orderPlanBox {
324 + ul {
325 + list-style: none;
326 + margin: 0;
327 + padding: 0;
328 + }
329 + .set-bom-prop {
330 + padding: 0;
331 + min-height: 40px;
332 + font-size: 14px;
333 + line-height: 1.3;
334 + word-wrap: break-word;
335 + word-break: break-all;
336 + color: #666;
337 + touch-action: none;
338 + .set-bom-prop-title {
339 + background-color: #8ea9cf;
340 + font-size: 18px;
341 + color: #FFFFFF;
342 + padding: 0.5em 1.6em 0.5em;
343 + }
344 + .title-list {
345 + color: #333;
346 + font-size: 16px;
347 + }
348 + .row-list {
349 + li {
350 + display: flex;
351 + padding: 0.4rem 0 0.4rem 0.8rem;
352 + border-bottom: 1px solid #C7C7C7;
353 + em {
354 + font-style: normal;
355 + }
356 + label {
357 + text-align: left;
358 + &>span {
359 + display: block;
360 + float: left;
361 + height: 36px;
362 + line-height: 36px;
363 + }
364 + }
365 + .radioBox {
366 + display: flex;
367 + justify-content: space-around;
368 + margin-left: 10px;
369 + span {
370 + display: inline-block;
371 + }
372 + .el-radio__label {
373 + padding-left: 0;
374 + }
375 + }
376 + }
377 + .supplier-name {
378 + border: none;
379 + color: #000;
380 + }
381 + .materiel-name {
382 + color: #8ea9cf;
383 + }
384 + .el-form-item_content{
385 + -webkit-flex: 1;
386 + flex: 1;
387 + float: left!important;
388 + margin-left: 0!important;
389 + line-height: 20px!important;
390 + padding-right: 10px;
391 + &.p-right {
392 + padding-right: 7px;
393 + }
394 + p {
395 + line-height: 36px;
396 + text-align: right;
397 + span {
398 + margin-left: 0.3rem;
399 + }
400 + i {
401 + color: rgb(153, 153, 153);
402 + font-size: 18px;
403 + position: relative;
404 + top: 2px;
405 + }
406 + }
407 + }
408 + }
409 +
410 + .detailBox {
411 + max-height: 20rem;
412 + overflow-y: auto;
413 + li {
414 + padding: 0.4rem 0 0.4rem 0.8rem;
415 + border-bottom: 1px solid #C7C7C7;
416 + i {
417 + vertical-align: middle;
418 + color: #8ea8cf;
419 + }
420 + }
421 + .el-input {
422 + width: 4rem;
423 + margin: 0 3px;
424 + }
425 + .el-input__inner {
426 + padding: 0;
427 + padding-left: 10px;
428 + }
429 + select {
430 + width: 4rem;
431 + margin: 0 3px;
432 + padding-left: 10px;
433 + background-color: #fff;
434 + border-radius: 4px;
435 + border: 1px solid #dcdfe6;
436 + color: #606266;
437 + height: 40px;
438 + line-height: 40px;
439 + outline: 0;
440 + transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
441 + }
442 + .el-input__prefix {
443 + display: none;
444 + }
445 + }
446 +
447 + .dailyBox {
448 + position: relative;
449 + .dailyGroup {
450 + .el-checkbox {
451 + float: left;
452 + width: 25%;
453 + margin-left: 0;
454 + }
455 +
456 + &:after {
457 + clear: both;
458 + display: block;
459 + content: "";
460 + }
461 + }
462 + .dailyLine {
463 + width: 100%;
464 + height: 1px;
465 + background: #C7C7C7;
466 + position: absolute;
467 + top: 50%;
468 + left: 0;
469 + }
470 + }
471 +
472 + .set-finish {
473 + width: 90%;
474 + margin: 0 auto;
475 + margin-top: 1rem;
476 + border-radius: 0.25rem;
477 + color: white;
478 + padding: 0.35rem 0;
479 + background-color: #8ea8cf;
480 + }
481 + }
482 +}
483 +.el-picker-panel {
484 + z-index: 9999999 !important;
485 +}
486 +.el-select-dropdown {
487 + z-index: 9999999 !important;
488 +}
489 +.vux-selector {
490 + display: inline-block !important;
491 + .weui-select {
492 + padding-right: 0 !important;
493 + }
494 +}
495 +</style>
1 +<template>
2 + <div class="setTimeBox" v-transfer-dom>
3 + <x-dialog class="set-bom-prop" v-model="this.$store.state.setTimeBox_show">
4 + <div class="set-bom-prop-title">
5 + <div>设置门店到货时间</div>
6 + </div>
7 + <ul class="title-list">
8 + <li class="supplier">{{supplier_name}}</li>
9 + <li class="materiel">{{materiel_name}}</li>
10 + </ul>
11 + <ul class="row-list" v-for="(item, index) in store_list" :key="index" v-if="item.dist_way === 'D'">
12 + <li class="row-title">
13 + 每天订货
14 + </li>
15 + <li>
16 + <flexbox justify="space-between">
17 + <flexbox-item :span="4.5" class="store-name">
18 + <span>{{item.store_name}}</span>
19 + </flexbox-item>
20 + <flexbox-item :span="7" style="text-align:right;padding-right:5px;">
21 + 第
22 + <selector @on-change="preventS" class="selector" v-model="item.dist_day" placeholder="请选择" :options="distDay"></selector>
23 + 天
24 + <selector @on-change="preventS" class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime"></selector>
25 + 到货
26 + </flexbox-item>
27 + </flexbox>
28 + </li>
29 + </ul>
30 + <ul class="row-list" v-for="(item, index) in store_list" :key="index" v-if="item.dist_way === 'W'">
31 + <li class="row-title">
32 + 每周{{getWeek('order')}}订货
33 + </li>
34 + <li>
35 + <flexbox justify="space-between">
36 + <flexbox-item :span="5.5" class="store-name">
37 + <span>{{item.store_name}}</span>
38 + </flexbox-item>
39 + <flexbox-item :span="6.5" style="text-align:right;padding-right:5px;">
40 + <selector @on-change="preventS" class="selector" v-model="item.dist_day" placeholder="请选择" :options="distWeek"></selector>
41 + <selector @on-change="preventS" class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime"></selector>
42 + 到货
43 + </flexbox-item>
44 + </flexbox>
45 + </li>
46 + </ul>
47 + <ul class="row-list" v-for="(item, index) in store_list" :key="index" v-if="item.dist_way === 'M'">
48 + <li class="row-title">
49 + 每月{{getMonth(item.order_day)}}订货
50 + </li>
51 + <li>
52 + <flexbox justify="space-between">
53 + <flexbox-item :span="4.5" class="store-name">
54 + <span>{{item.store_name}}</span>
55 + </flexbox-item>
56 + <flexbox-item :span="7" style="text-align:right;padding-right:5px;">
57 + <selector @on-change="preventS" class="selector" v-model="item.dist_day" placeholder="请选择" :options="distMonth" style="text-align:center;"></selector>
58 + <selector @on-change="preventS" class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime"></selector>
59 + 到货
60 + </flexbox-item>
61 + </flexbox>
62 + </li>
63 + </ul>
64 + <div class="set-finish">
65 + <div @click="finishSet()" class="set-finish-btn">确定</div>
66 + </div>
67 + </x-dialog>
68 + </div>
69 +</template>
70 +
71 +<script>
72 +/**
73 + * 订货送货计划总览设置门店到货时间组件
74 + *
75 + * 此组件是否显示的boolean值存在vuex中，无需传入
76 + *
77 + * @param {string} supplier_name 供应商名
78 + * @param {string} materiel_name 物料组名
79 + * @param {array} list 内容
80 + * @returns {object}
81 + *
82 + * @date 2018-08-31
83 + */
84 +import { Flexbox, FlexboxItem, XDialog, TransferDomDirective as TransferDom, Popup, Picker, Selector } from 'vux'
85 +import { compat } from 'logistics/static/js/compatibility'
86 +export default {
87 + components: {
88 + Flexbox, FlexboxItem, XDialog, TransferDom, Popup, Picker, Selector
89 + },
90 + mixins: [compat],
91 + mounted () {
92 + // 没有关闭按钮的组件，点击遮罩层可以直接关闭此弹框（不保存设置内容）
93 + this.$nextTick(() => {
94 + let mask = document.getElementsByClassName('setTimeBox')[0].getElementsByClassName('weui-mask')[0];
95 + mask.addEventListener('click', () => {
96 + this.$store.commit('checksetTimeBox');
97 + });
98 + });
99 + },
100 + props: ['supplier_name', 'materiel_name', 'list'],
101 + data () {
102 + return {
103 + distDay: [
104 + {
105 + value: 2,
106 + key: 'DAY+1d'
107 + },
108 + {
109 + value: 3,
110 + key: 'DAY+2d'
111 + },
112 + {
113 + value: 4,
114 + key: 'DAY+3d'
115 + },
116 + {
117 + value: 5,
118 + key: 'DAY+4d'
119 + },
120 + {
121 + value: 6,
122 + key: 'DAY+5d'
123 + },
124 + {
125 + value: 7,
126 + key: 'DAY+6d'
127 + },
128 + {
129 + value: 8,
130 + key: 'DAY+7d'
131 + },
132 + {
133 + value: 9,
134 + key: 'DAY+8d'
135 + },
136 + {
137 + value: 10,
138 + key: 'DAY+9d'
139 + }
140 + ],
141 + distWeek: [
142 + {
143 + value: '周一',
144 + key: 'MON'
145 + },
146 + {
147 + value: '周二',
148 + key: 'TUE'
149 + },
150 + {
151 + value: '周三',
152 + key: 'WED'
153 + },
154 + {
155 + value: '周四',
156 + key: 'THU'
157 + },
158 + {
159 + value: '周五',
160 + key: 'FRI'
161 + },
162 + {
163 + value: '周六',
164 + key: 'SAT'
165 + },
166 + {
167 + value: '周日',
168 + key: 'SUN'
169 + },
170 + {
171 + value: '下周一',
172 + key: 'MON+1w'
173 + },
174 + {
175 + value: '下周二',
176 + key: 'TUE+1w'
177 + },
178 + {
179 + value: '下周三',
180 + key: 'WED+1w'
181 + },
182 + {
183 + value: '下周四',
184 + key: 'THU+1w'
185 + },
186 + {
187 + value: '下周五',
188 + key: 'FRI+1w'
189 + },
190 + {
191 + value: '下周六',
192 + key: 'SAT+1w'
193 + },
194 + {
195 + value: '下周日',
196 + key: 'SUN+1w'
197 + }
198 + ],
199 + distMonth: [
200 + {
201 + value: '1号',
202 + key: '1'
203 + },
204 + {
205 + value: '2号',
206 + key: '2'
207 + },
208 + {
209 + value: '3号',
210 + key: '3'
211 + },
212 + {
213 + value: '4号',
214 + key: '4'
215 + },
216 + {
217 + value: '5号',
218 + key: '5'
219 + },
220 + {
221 + value: '6号',
222 + key: '6'
223 + },
224 + {
225 + value: '7号',
226 + key: '7'
227 + },
228 + {
229 + value: '8号',
230 + key: '8'
231 + },
232 + {
233 + value: '9号',
234 + key: '9'
235 + },
236 + {
237 + value: '10号',
238 + key: '10'
239 + },
240 + {
241 + value: '11号',
242 + key: '11'
243 + },
244 + {
245 + value: '12号',
246 + key: '12'
247 + },
248 + {
249 + value: '13号',
250 + key: '13'
251 + },
252 + {
253 + value: '14号',
254 + key: '14'
255 + },
256 + {
257 + value: '15号',
258 + key: '15'
259 + },
260 + {
261 + value: '16号',
262 + key: '16'
263 + },
264 + {
265 + value: '17号',
266 + key: '17'
267 + },
268 + {
269 + value: '18号',
270 + key: '18'
271 + },
272 + {
273 + value: '19号',
274 + key: '19'
275 + },
276 + {
277 + value: '20号',
278 + key: '20'
279 + },
280 + {
281 + value: '21号',
282 + key: '21'
283 + },
284 + {
285 + value: '22号',
286 + key: '22'
287 + },
288 + {
289 + value: '23号',
290 + key: '23'
291 + },
292 + {
293 + value: '24号',
294 + key: '24'
295 + },
296 + {
297 + value: '25号',
298 + key: '25'
299 + },
300 + {
301 + value: '26号',
302 + key: '26'
303 + },
304 + {
305 + value: '27号',
306 + key: '27'
307 + },
308 + {
309 + value: '28号',
310 + key: '28'
311 + },
312 + {
313 + value: '29号',
314 + key: '29'
315 + },
316 + {
317 + value: '30号',
318 + key: '30'
319 + },
320 + {
321 + value: '31号',
322 + key: '31'
323 + },
324 + {
325 + value: '月末',
326 + key: 'last'
327 + },
328 + {
329 + value: '次月1号',
330 + key: '1+1m'
331 + },
332 + {
333 + value: '次月2号',
334 + key: '2+1m'
335 + },
336 + {
337 + value: '次月3号',
338 + key: '3+1m'
339 + },
340 + {
341 + value: '次月4号',
342 + key: '4+1m'
343 + },
344 + {
345 + value: '次月5号',
346 + key: '5+1m'
347 + },
348 + {
349 + value: '次月6号',
350 + key: '6+1m'
351 + },
352 + {
353 + value: '次月7号',
354 + key: '7+1m'
355 + },
356 + {
357 + value: '次月8号',
358 + key: '8+1m'
359 + },
360 + {
361 + value: '次月9号',
362 + key: '9+1m'
363 + },
364 + {
365 + value: '次月10号',
366 + key: '10+1m'
367 + },
368 + {
369 + value: '次月11号',
370 + key: '11+1m'
371 + },
372 + {
373 + value: '次月12号',
374 + key: '12+1m'
375 + },
376 + {
377 + value: '次月13号',
378 + key: '13+1m'
379 + },
380 + {
381 + value: '次月14号',
382 + key: '14+1m'
383 + },
384 + {
385 + value: '次月15号',
386 + key: '15+1m'
387 + },
388 + {
389 + value: '次月16号',
390 + key: '16+1m'
391 + },
392 + {
393 + value: '次月17号',
394 + key: '17+1m'
395 + },
396 + {
397 + value: '次月18号',
398 + key: '18+1m'
399 + },
400 + {
401 + value: '次月19号',
402 + key: '19+1m'
403 + },
404 + {
405 + value: '次月20号',
406 + key: '20+1m'
407 + },
408 + {
409 + value: '次月21号',
410 + key: '21+1m'
411 + },
412 + {
413 + value: '次月22号',
414 + key: '22+1m'
415 + },
416 + {
417 + value: '次月23号',
418 + key: '23+1m'
419 + },
420 + {
421 + value: '次月24号',
422 + key: '24+1m'
423 + },
424 + {
425 + value: '次月25号',
426 + key: '25+1m'
427 + },
428 + {
429 + value: '次月26号',
430 + key: '26+1m'
431 + },
432 + {
433 + value: '次月27号',
434 + key: '27+1m'
435 + },
436 + {
437 + value: '次月28号',
438 + key: '28+1m'
439 + },
440 + {
441 + value: '次月29号',
442 + key: '29+1m'
443 + },
444 + {
445 + value: '次月30号',
446 + key: '30+1m'
447 + },
448 + {
449 + value: '次月31号',
450 + key: '31+1m'
451 + },
452 + {
453 + value: '次月月末',
454 + key: 'last+1m'
455 + }
456 + ],
457 + distTime: [
458 + {
459 + value: '00:00',
460 + key: '00:00'
461 + },
462 + {
463 + value: '00:30',
464 + key: '00:30'
465 + },
466 + {
467 + value: '01:00',
468 + key: '01:00'
469 + },
470 + {
471 + value: '01:30',
472 + key: '01:30'
473 + },
474 + {
475 + value: '02:00',
476 + key: '02:00'
477 + },
478 + {
479 + value: '02:30',
480 + key: '02:30'
481 + },
482 + {
483 + value: '03:00',
484 + key: '03:00'
485 + },
486 + {
487 + value: '03:30',
488 + key: '03:30'
489 + },
490 + {
491 + value: '04:00',
492 + key: '04:00'
493 + },
494 + {
495 + value: '04:30',
496 + key: '04:30'
497 + },
498 + {
499 + value: '05:00',
500 + key: '05:00'
501 + },
502 + {
503 + value: '05:30',
504 + key: '05:30'
505 + },
506 + {
507 + value: '06:00',
508 + key: '06:00'
509 + },
510 + {
511 + value: '06:30',
512 + key: '06:30'
513 + },
514 + {
515 + value: '07:30',
516 + key: '07:30'
517 + },
518 + {
519 + value: '08:00',
520 + key: '08:00'
521 + },
522 + {
523 + value: '08:30',
524 + key: '08:30'
525 + },
526 + {
527 + value: '09:00',
528 + key: '09:00'
529 + },
530 + {
531 + value: '09:30',
532 + key: '09:30'
533 + },
534 + {
535 + value: '10:00',
536 + key: '10:00'
537 + },
538 + {
539 + value: '10:30',
540 + key: '10:30'
541 + },
542 + {
543 + value: '11:00',
544 + key: '11:00'
545 + },
546 + {
547 + value: '11:30',
548 + key: '11:30'
549 + },
550 + {
551 + value: '12:00',
552 + key: '12:00'
553 + },
554 + {
555 + value: '12:30',
556 + key: '12:30'
557 + },
558 + {
559 + value: '13:00',
560 + key: '13:00'
561 + },
562 + {
563 + value: '13:30',
564 + key: '13:30'
565 + },
566 + {
567 + value: '14:00',
568 + key: '14:00'
569 + },
570 + {
571 + value: '14:30',
572 + key: '14:30'
573 + },
574 + {
575 + value: '15:00',
576 + key: '15:00'
577 + },
578 + {
579 + value: '15:30',
580 + key: '15:30'
581 + },
582 + {
583 + value: '16:00',
584 + key: '16:00'
585 + },
586 + {
587 + value: '16:30',
588 + key: '16:30'
589 + },
590 + {
591 + value: '17:00',
592 + key: '17:00'
593 + },
594 + {
595 + value: '17:30',
596 + key: '17:30'
597 + },
598 + {
599 + value: '18:00',
600 + key: '18:00'
601 + },
602 + {
603 + value: '18:30',
604 + key: '18:30'
605 + },
606 + {
607 + value: '19:00',
608 + key: '19:00'
609 + },
610 + {
611 + value: '19:30',
612 + key: '19:30'
613 + },
614 + {
615 + value: '20:00',
616 + key: '20:00'
617 + },
618 + {
619 + value: '20:30',
620 + key: '20:30'
621 + },
622 + {
623 + value: '21:00',
624 + key: '21:00'
625 + },
626 + {
627 + value: '21:30',
628 + key: '21:30'
629 + },
630 + {
631 + value: '22:00',
632 + key: '22:00'
633 + },
634 + {
635 + value: '22:30',
636 + key: '22:30'
637 + },
638 + {
639 + value: '23:00',
640 + key: '23:00'
641 + },
642 + {
643 + value: '23:30',
644 + key: '23:30'
645 + }
646 + ],
647 + store_list: [] // 商店列表
648 + }
649 + },
650 + watch: {
651 + /**
652 + * 需要使用watch方法来监听外部传入list是否改变，然后使用数组push方法触发子组件视图更新
653 + * -------------------------
654 + **/
655 + list: function (val) {
656 + let list = [];
657 + for (let i = 0; i < val.length; i++) {
658 + list.push(val[i]);
659 + }
660 + this.store_list = _.cloneDeep(list);
661 + this.store_list.forEach((v, i) => {
662 + if (v.dist_way === 'W') {
663 + this.distWeek.forEach((w, wi) => {
664 + if (v.order_day === w.key) {
665 + this.distWeek = this.distWeek.slice(wi);
666 + }
667 + });
668 + } else if (v.dist_way === 'M') {
669 + this.distWeek.forEach((m, mi) => {
670 + if (v.order_day === m.key) {
671 + this.distMonth = this.distMonth.slice(mi);
672 + }
673 + });
674 + }
675 + });
676 + console.warn(this.store_list);
677 + }
678 + },
679 + methods: {
680 + finishSet () {
681 + /**
682 + * 确定
683 + * -------------------------
684 + **/
685 + this.$store.commit('checksetTimeBox');
686 + this.$emit('compelete', _.cloneDeep(this.store_list));
687 + },
688 + getWeek (t) {
689 + let str;
690 + switch (t) {
691 + case 'order':
692 + str = this.store_list[0].order_day;
693 + switch (str) {
694 + case 'MON':
695 + return '周一';
696 + case 'TUE':
697 + return '周二';
698 + case 'WED':
699 + return '周三';
700 + case 'THU':
701 + return '周四';
702 + case 'FRI':
703 + return '周五';
704 + case 'SAT':
705 + return '周六';
706 + case 'SUN':
707 + return '周日';
708 + };
709 + break;
710 + case 'dist':
711 + str = this.store_list[arguments[1]].dist_day;
712 + switch (str) {
713 + case 'MON':
714 + return '周一';
715 + case 'TUE':
716 + return '周二';
717 + case 'WED':
718 + return '周三';
719 + case 'THU':
720 + return '周四';
721 + case 'FRI':
722 + return '周五';
723 + case 'SAT':
724 + return '周六';
725 + case 'SUN':
726 + return '周日';
727 + case 'MON+1w':
728 + return '下周一';
729 + case 'TUE+1w':
730 + return '下周二';
731 + case 'WED+1w':
732 + return '下周三';
733 + case 'THU+1w':
734 + return '下周四';
735 + case 'FRI+1w':
736 + return '下周五';
737 + case 'SAT+1w':
738 + return '下周六';
739 + case 'SUN+1w':
740 + return '下周日';
741 + };
742 + break;
743 + }
744 + },
745 + getMonth (str) {
746 + if (str === 'last') {
747 + return '月末'
748 + } else {
749 + if (str.split('+').length > 1) {
750 + if (str.split('+')[0] === 'last') {
751 + return '次月月末'
752 + } else {
753 + return '次月' + str.split('+')[0] + '号'
754 + }
755 + } else {
756 + return str + '号';
757 + }
758 + }
759 + }
760 + }
761 +}
762 +</script>
763 +
764 +<style lang="less">
765 +.weui-dialog {
766 + padding-bottom: 1rem !important;
767 + width: 90% !important;
768 + max-width: 1000px !important;
769 +}
770 +.red {
771 + color: red;
772 + font-style: normal;
773 +}
774 +.green {
775 + color: green;
776 +}
777 +.supplier {
778 + text-align: left;
779 + padding: 0.4rem 0.8rem;
780 +}
781 +.materiel {
782 + text-align: left;
783 + padding: 0.4rem 0.8rem;
784 + color: #8ea8cf;
785 +}
786 +.setTimeBox {
787 + color: #666;
788 + font-size: 14px;
789 + ul {
790 + list-style: none;
791 + margin: 0;
792 + padding: 0;
793 + }
794 + .set-bom-prop {
795 + padding: 0;
796 + min-height: 40px;
797 + font-size: 15px;
798 + line-height: 1.3;
799 + word-wrap: break-word;
800 + word-break: break-all;
801 + color: #999999;
802 + touch-action: none;
803 + .set-bom-prop-title {
804 + font-size: 18px;
805 + background-color: #8ea9cf;
806 + color: #FFFFFF;
807 + padding: 0.5em 1.6em 0.5em;
808 + }
809 + .title-list {
810 + font-size: 16px;
811 + color: #333;
812 + }
813 + .row-list {
814 + li {
815 + display: flex;
816 + padding: 0.4rem 0 0.4rem 0.8rem;
817 + border-bottom: 1px solid #c7c7c7;
818 + em {
819 + font-style: normal;
820 + }
821 + .el-input {
822 + width: 4rem;
823 + margin: 0 3px;
824 + }
825 + .el-input__inner {
826 + padding: 0;
827 + padding-left: 10px;
828 + }
829 + }
830 + .row-title {
831 + display: block;
832 + text-align: center;
833 + padding: 0.8rem 0;
834 + }
835 + .store-name {
836 + i {
837 + vertical-align: middle;
838 + color: #8ea8cf;
839 + }
840 + span {
841 + vertical-align: middle;
842 + line-height: 2em;
843 + }
844 + }
845 + .add-store {
846 + padding-left: 4.5rem;
847 + border-top: 2px solid #c7c7c7;
848 + border-bottom: 4px solid #c7c7c7;
849 + i {
850 + vertical-align: middle;
851 + color: #8ea8cf;
852 + }
853 + span {
854 + vertical-align: middle;
855 + line-height: 2em;
856 + }
857 + }
858 + }
859 + .set-finish {
860 + width: 90%;
861 + margin: 0 auto;
862 + margin-top: 1rem;
863 + border-radius: 0.25rem;
864 + color: white;
865 + padding: 0.35rem 0;
866 + background-color: #8ea8cf;
867 + }
868 + }
869 + .el-input__prefix {
870 + display: none;
871 + }
872 +}
873 +
874 +select {
875 + width: 4rem;
876 + margin: 0 3px;
877 + padding-left: 10px;
878 + background-color: #fff;
879 + border-radius: 4px;
880 + border: 1px solid #dcdfe6;
881 + color: #606266;
882 + height: 40px;
883 + line-height: 40px;
884 + outline: 0;
885 + transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
886 +}
887 +
888 +.vux-selector {
889 + display: inline-block !important;
890 + .weui-select {
891 + padding: 0 5px !important;
892 + border-radius: 5px;
893 + border: 1px solid #d6d7dc;
894 + text-align: center !important;
895 + }
896 +}
897 +.weui-cell_select .weui-cell__bd:after {
898 + display: none !important;
899 +}
900 +.weui-cell:before {
901 + display: none;
902 +}
903 +
904 +</style>
1 +<template>
2 + <div class="pandect_select" v-transfer-dom>
3 + <x-dialog v-model="show">
4 + <div class="pandect_box">
5 + <h4>{{title}}</h4>
6 + <div class="pandect_content">
7 + <ul v-if="type === 'supplier'">
8 + <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.prov_name}}</li>
9 + </ul>
10 + <ul v-if="type === 'materiel'">
11 + <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.name}}</li>
12 + </ul>
13 + <ul v-if="type === 'route'">
14 + <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.name}}</li>
15 + </ul>
16 + </div>
17 + <div class="btn-box">
18 + <div class="close" @click="close">关闭</div>
19 + <div class="confirm" @click="confirm">确定</div>
20 + </div>
21 + </div>
22 + </x-dialog>
23 + </div>
24 +</template>
25 +
26 +<script>
27 +/**
28 + * 订货送货计划总览选择框组件
29 + *
30 + *
31 + * @param {string} title 标题
32 + * @param {array} list 可选择的内容
33 + * @param {boolean} show 是否显示组件
34 + * @param {string} type 类型（根据不同类型，供应商、物料、送货线路，获取到的后端数组字段不同，遍历显示的方式也不同）
35 + * @returns {object}
36 + *
37 + * @date 2018-08-31
38 + */
39 +import { XDialog, TransferDomDirective as TransferDom } from 'vux'
40 +export default {
41 + components: { XDialog, TransferDom },
42 + props: ['title', 'list', 'show', 'type'],
43 + data () {
44 + return {
45 + data: []
46 + }
47 + },
48 + watch: {
49 + list: function (val) {
50 + /**
51 + * 需要使用watch方法来监听外部传入list是否改变，然后使用数组push方法触发子组件视图更新
52 + * ------------------------------------------------------------------
53 + */
54 + this.$vux.loading.hide();
55 + this.data = [];
56 + for (let i = 0; i < val.length; i++) {
57 + // 给每条内容添加一个checked属性，是否选择
58 + val[i].checked = false;
59 + this.data.push(val[i])
60 + }
61 + }
62 + },
63 + methods: {
64 + check (index) {
65 + /**
66 + * 选择某一条内容时，将所有内容的checked设false，并将被选择的内容checked设为true，单选效果
67 + * ------------------------------------------------------------------
68 + */
69 + let arr = []
70 + this.data.forEach(v => {
71 + arr.push(v);
72 + });
73 + this.data = [];
74 + arr.forEach((v, i) => {
75 + v.checked = false;
76 + if (i === index) {
77 + v.checked = true;
78 + }
79 + this.data.push(v);
80 + });
81 + },
82 + close () {
83 + // 关闭
84 + this.$emit('close');
85 + },
86 + confirm () {
87 + /**
88 + * 确认时，返回选中的内容
89 + * ------------------------------------------------------------------
90 + */
91 + let data = null;
92 + this.data.forEach(v => {
93 + if (v.checked) {
94 + data = v;
95 + }
96 + });
97 + this.$emit('confirm', _.cloneDeep(data));
98 + }
99 + }
100 +}
101 +</script>
102 +
103 +<style lang="less" scoped>
104 + .pandect_select {
105 + font-size: 14px;
106 + color: #666;
107 + .pandect_box {
108 + position: relative;
109 + padding-bottom: 3rem;
110 + .pandect_content {
111 + max-height: 20rem;
112 + overflow-y: auto;
113 + }
114 + }
115 + h4 {
116 + font-size: 18px;
117 + color: #333;
118 + padding: 0.4rem 0;
119 + text-align: center;
120 + border-bottom: 1px solid #eee;
121 + }
122 + ul {
123 + margin: 0;
124 + list-style: none;
125 + padding: 0 0.8rem;
126 + li {
127 + padding: 0.4rem 0.6rem;
128 + background: #eee;
129 + margin: 0.6rem 0;
130 + }
131 + .actived {
132 + background: #8ea8cf;
133 + color: #fff;
134 + }
135 + }
136 + .btn-box {
137 + position: absolute;
138 + bottom: 0;
139 + width: 100%;
140 + display: flex;
141 + justify-content: space-around;
142 + div {
143 + width: 48%;
144 + border-radius: 5px;
145 + border: 1px solid #8ea8cf;
146 + text-align: center;
147 + padding: 0.4rem 0;
148 + }
149 + .close {
150 + color: #8ea8cf;
151 + background: #fff;
152 + }
153 + .confirm {
154 + color: #fff;
155 + background: #8ea8cf;
156 + }
157 + }
158 + }
159 +</style>
1 +<template lang="html">
2 + <div class="choose-material-page">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="material-title">
6 + {{title}}
7 + </div>
8 + <div class="wrapper-scroll">
9 + <div v-for="(v, k) in shortcut" :key="k">
10 + <flexbox class="shortcut-title">
11 + <flexbox-item :span="9">
12 + <check-icon @click.native="shortcutCheck(k)" :value.sync="shortcut[k].checked">
13 + <span>{{v.sku_name}}</span>
14 + </check-icon>
15 + </flexbox-item>
16 + <flexbox-item @click.native="shortcutFold(k)" style="margin-left: 0;">
17 + <span style="color: #8EA8CF;">{{v.sku_count}}种物料</span>
18 + <i class="fa fa-chevron-right"></i>
19 + </flexbox-item>
20 + </flexbox>
21 + <div class="shortcut-content fold-content">
22 + <div v-for="(item, index) in v.list" :key="index">{{item.sku_name}}</div>
23 + </div>
24 + </div>
25 + <div class="material-wrapper">
26 + <flexbox>
27 + <flexbox-item :span="7.5">
28 + <check-icon class="material-all-checked" @click.native="checkAll(all_checked)" :value.sync="all_checked">
29 + {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
30 + </check-icon>
31 + </flexbox-item>
32 + <flexbox-item :span="4.5" style="margin-left: 0;">
33 + <div class="add-product-wrapper">
34 + <x-button class="add-btn" @click.native="addProduct" mini>新增原/物料</x-button>
35 + </div>
36 + </flexbox-item>
37 + </flexbox>
38 + <!-- <div class="material-all-checked">
39 + <flexbox>
40 + <flexbox-item :span="7">
41 + {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{product_sum}}）
42 + </flexbox-item>
43 + <flexbox-item :span="6">
44 + <div class="add-product-wrapper">
45 + <x-button class="add-btn" @click.native="cancel" mini>新增原/物料</x-button>
46 + </div>
47 + </flexbox-item>
48 + </flexbox>
49 + </div> -->
50 + <div class="material-classify">
51 + <div v-for="(item, index) in data_list" :key="index">
52 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
53 + <flexbox class="material-classify-title">
54 + <flexbox-item :span="10">
55 + <check-icon class="material-classify-checked" @click.native="changeCategory(index)" :value.sync="data_list[index].checked">
56 + {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.sku_count}}）
57 + </check-icon>
58 + <!-- <div class="material-classify-checked">
59 + {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.sku_count}}）
60 + </div> -->
61 + </flexbox-item>
62 + <flexbox-item @click.native="fold(index)">
63 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
64 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
65 + </div>
66 + </flexbox-item>
67 + </flexbox>
68 + <div class="material-content">
69 + <flexbox :gutter="10" class="flexbox-material" v-for="(m, key) in item.sku_list" :key="key">
70 + <flexbox-item v-for="(v, k) in m" :key="k" class="store-item">
71 + <div v-if="!+v.disabled" @click="itemCheck(v, index, 'click')"
72 + :class="[v.checked === true ? 'flex-checked' : '', 'flex-material']">
73 + {{v.sku_name}}
74 + </div>
75 + <div v-else class="flex-material flex-disabled"> {{v.sku_name}} </div>
76 + </flexbox-item>
77 + </flexbox>
78 + </div>
79 + </div>
80 + </div>
81 + </div>
82 + </div>
83 + <div class="control-wrapper">
84 + <flexbox>
85 + <flexbox-item>
86 + <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
87 + </flexbox-item>
88 + <flexbox-item>
89 + <x-button class="comfirm-btn" @click.native="comfirm" mini>确定</x-button>
90 + </flexbox-item>
91 + </flexbox>
92 + </div>
93 + </x-dialog>
94 + </div>
95 + </div>
96 +</template>
97 +
98 +<script>
99 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
100 +
101 +export default {
102 + props: ['show', 'title', 'caption', 'list', 'span', 'shortcut'],
103 + directives: { TransferDom },
104 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
105 + mounted () {
106 + },
107 + data () {
108 + return {
109 + all_checked: false,
110 + item_checked: false,
111 + data_list: [],
112 + category_num: 0,
113 + product_num: 0,
114 + checked_list: [],
115 + shortcut_checked_list: [],
116 + add_checked_list: []
117 + }
118 + },
119 + watch: {
120 + list (val, old) {
121 + if (val !== old) {
122 + this.data_list = [];
123 + // 动态生成绑定变量
124 + let foo = val;
125 + for (let i = 0; i < foo.length; i++) {
126 + // 补全物料占位
127 + let remainder = foo[i]['sku_list'].length % this.span;
128 + if (remainder > 0) {
129 + for (let y = 0; y < (this.span - remainder); y++) {
130 + foo[i]['sku_list'].push({
131 + sku_id: '',
132 + sku_name: '',
133 + checked: false,
134 + disabled: '0'
135 + })
136 + }
137 + }
138 + // 分割计算
139 + let tmp = [];
140 + while (foo[i]['sku_list'].length) {
141 + tmp.push(foo[i]['sku_list'].splice(0, this.span));
142 + }
143 + this.data_list.push({
144 + checked: false,
145 + name: foo[i]['name'],
146 + num: 0,
147 + sku_count: foo[i]['sku_count'],
148 + sku_list: tmp
149 + });
150 + }
151 + this.add_checked_list = _.uniq(this.add_checked_list)
152 + _.each(this.add_checked_list, item => {
153 + this.itemCheck(item, item.index)
154 + });
155 +
156 + // 模拟选中
157 + _.each(this.data_list, item => {
158 + _.each(item.sku_list, x => {
159 + _.each(x, y => {
160 + _.each(this.add_checked_list, z => {
161 + if (y.sku_id === z.sku_id) {
162 + y.checked = true;
163 + }
164 + })
165 + })
166 + })
167 + });
168 + setTimeout(() => {
169 + for (let i = 0; i < $('.store-item').length; i++) {
170 + if (i % this.span !== 0) {
171 + continue;
172 + }
173 + if ($($('.store-item')[i]).height() > $($('.store-item')[i + 1]).height()) {
174 + $($('.store-item')[i + 1]).css('line-height', $($('.store-item')[i]).height() + 'px')
175 + } else if ($($('.store-item')[i]).height() < $($('.store-item')[i + 1]).height()) {
176 + $($('.store-item')[i]).css('line-height', $($('.store-item')[i + 1]).height() + 'px')
177 + }
178 + }
179 + }, 100);
180 + }
181 + },
182 + category_num (val) {
183 + // 小分类全选状态
184 + if (val === this.category_sum) {
185 + this.all_checked = true;
186 + } else {
187 + this.all_checked = false;
188 + }
189 + }
190 + },
191 + computed: {
192 + category_sum () {
193 + return _.reduce(this.data_list, (sum, n) => {
194 + return sum + n.sku_count;
195 + }, 0);
196 + },
197 + product_sum () {
198 + let foo = _.reduce(this.data_list, (sum, n) => {
199 + return sum + n.sku_count;
200 + }, 0);
201 + return foo;
202 + }
203 + },
204 + methods: {
205 + checkAll (checked) {
206 + // 勾选所有类别
207 + if (checked) {
208 + // 选中
209 + _.each(this.data_list, (item, key) => {
210 + this.data_list[key]['checked'] = true;
211 + this.changeCategory(key)
212 + });
213 + } else {
214 + // 取消
215 + _.each(this.data_list, (item, key) => {
216 + this.data_list[key]['checked'] = false;
217 + this.changeCategory(key)
218 + });
219 + }
220 + },
221 + itemCheck (item, i, method) {
222 + // 选中项
223 + if (method === 'click') {
224 + item.checked = !item.checked;
225 + }
226 + // 选中数量
227 + if (item.checked) {
228 + this.data_list[i]['num'] = this.data_list[i]['num'] < this.data_list[i]['sku_count'] ? this.data_list[i]['num'] + 1 : this.data_list[i]['sku_count'];
229 + // 新增数组内容
230 + this.checked_list.push(item.sku_id);
231 + //
232 + item.index = i;
233 + this.add_checked_list.push(item);
234 + } else {
235 + this.data_list[i]['checked'] = false;
236 + this.data_list[i]['num'] = this.data_list[i]['num'] > 0 ? this.data_list[i]['num'] - 1 : 0;
237 + // 移除数组内容
238 + _.each(this.checked_list, (v, k) => {
239 + if (item.sku_id && v === item.sku_id) {
240 + this.checked_list.splice(k, 1);
241 + }
242 + });
243 + _.each(this.add_checked_list, (v, k) => {
244 + if (v && v.sku_id === item.sku_id) {
245 + this.add_checked_list.splice(k, 1);
246 + }
247 + });
248 + }
249 + // 选中列表项
250 + this.$emit('check', this.add_checked_list);
251 + // 遍历勾选项 全选
252 + // 查询小分类勾选数量
253 + if (this.data_list[i]['num'] === this.data_list[i]['sku_count']) {
254 + this.data_list[i]['checked'] = true;
255 + }
256 + // 小分类勾选状态调整大分类状态
257 + let cat_checked = [];
258 + _.each(this.data_list, item => {
259 + if (item.checked) {
260 + cat_checked.push(item.checked)
261 + }
262 + });
263 + // this.category_num = cat_checked.length < this.data_list.length ? cat_checked.length : this.data_list.length;
264 + this.category_num = this.checked_list.length;
265 + },
266 + changeCategory (i) {
267 + // 勾选分类
268 + if (this.data_list[i]['checked']) {
269 + // 全选
270 + _.each(this.data_list[i]['sku_list'], item => {
271 + _.each(item, v => {
272 + v.checked = true;
273 + // 选中项ID
274 + if (!+v.disabled) {
275 + if (_.indexOf(this.checked_list, v.sku_id) < 0 && v.sku_id) {
276 + this.checked_list.push(v.sku_id);
277 + //
278 + v.index = i;
279 + this.add_checked_list.push(v);
280 + }
281 + }
282 + })
283 + });
284 + // 小分类数量全选
285 + this.data_list[i]['num'] = this.data_list[i]['sku_count'];
286 + // 新增所有分类勾选数量
287 + // this.category_num = this.category_num < this.data_list.length ? this.category_num + 1 : this.data_list.length;
288 + this.category_num = this.checked_list.length;
289 + } else {
290 + // 小分类ID集合
291 + let id_list = [];
292 + // 取消全选
293 + _.each(this.data_list[i]['sku_list'], item => {
294 + _.each(item, v => {
295 + v.checked = false;
296 + // 集合
297 + id_list.push(v.sku_id)
298 + })
299 + });
300 + // 移除数组内容
301 + _.each(id_list, n => {
302 + _.each(this.checked_list, (v, k) => {
303 + if (v === n) {
304 + this.checked_list.splice(k, 1);
305 + }
306 + });
307 + });
308 + this.add_checked_list = _.uniq(this.add_checked_list)
309 + _.each(id_list, n => {
310 + _.each(this.add_checked_list, (v, k) => {
311 + if (v && v.sku_id === n) {
312 + this.add_checked_list.splice(k, 1);
313 + }
314 + });
315 + });
316 + // 小分类数量归零
317 + this.data_list[i]['num'] = 0;
318 + // 减少所有分类勾选数量
319 + // this.category_num = this.category_num > 0 ? this.category_num - 1 : 0;
320 + this.category_num = this.checked_list.length;
321 + }
322 + },
323 + cancel () {
324 + // 关闭选择框
325 + this.$emit('cancel', !this.show);
326 + this.clear();
327 + },
328 + comfirm () {
329 + // 确认选择框
330 + let arr = [];
331 + _.each(this.data_list, x => {
332 + _.each(x.sku_list, y => {
333 + _.each(y, z => {
334 + _.each(this.checked_list, item => {
335 + if (item === z.sku_id) {
336 + z.sku_classname = x.name;
337 + arr.push(z);
338 + }
339 + })
340 + })
341 + })
342 + });
343 + arr = _.uniq(arr);
344 + this.$emit('comfirm', arr);
345 + this.clear();
346 + },
347 + clear () {
348 + // 清空选择项
349 + if (this.all_checked) {
350 + this.all_checked = false;
351 + }
352 + this.category_num = 0;
353 + _.each(this.data_list, (item, key) => {
354 + if (item.checked) {
355 + item.checked = false;
356 + item.num = 0;
357 + }
358 + _.each(item.sku_list, (v, k) => {
359 + _.each(v, x => {
360 + if (x.checked) {
361 + x.checked = false;
362 + item.num = 0;
363 + }
364 + })
365 + })
366 + });
367 + this.checked_list = [];
368 + // 清空快捷
369 + _.each(this.shortcut, item => {
370 + item.checked = false;
371 + });
372 + this.shortcut_checked_list = [];
373 + this.add_checked_list = [];
374 + },
375 + fold (index) {
376 + let has_class = $($('.material-classify-title')[index]).siblings('.material-content').hasClass('fold-content');
377 + if (has_class) {
378 + // 展开
379 + $($('.material-classify-title')[index]).siblings('.material-content').removeClass('fold-content');
380 + $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
381 + } else {
382 + // 折叠
383 + $($('.material-classify-title')[index]).siblings('.material-content').addClass('fold-content');
384 + $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
385 + }
386 + },
387 + shortcutFold (index) {
388 + let has_class = $($('.shortcut-title')[index]).siblings('.shortcut-content').hasClass('fold-content');
389 + if (has_class) {
390 + // 展开
391 + $($('.shortcut-title')[index]).siblings('.shortcut-content').removeClass('fold-content');
392 + $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
393 + } else {
394 + // 折叠
395 + $($('.shortcut-title')[index]).siblings('.shortcut-content').addClass('fold-content');
396 + $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
397 + }
398 + },
399 + shortcutCheck (i) {
400 + // 快捷方式选中
401 + let list = _.map(this.shortcut[i].list, item => {
402 + return item.sku_id
403 + });
404 + if (this.shortcut[i]['checked']) {
405 + // 勾选
406 + this.shortcut_checked_list = this.shortcut_checked_list.concat(list);
407 + //
408 + _.each(this.data_list, (item, key) => {
409 + _.each(item.sku_list, (v, k) => {
410 + _.each(v, x => {
411 + // ID在快捷列表中存在
412 + if (_.indexOf(this.shortcut_checked_list, x.sku_id) >= 0 && !+x.disabled) {
413 + x.checked = true;
414 + if (!+x.disabled) {
415 + if (_.indexOf(this.checked_list, x.sku_id) < 0 && x.sku_id) {
416 + this.checked_list.push(x.sku_id);
417 + }
418 + }
419 + this.setCheck()
420 + }
421 + });
422 + })
423 + });
424 + } else {
425 + // 取消
426 + this.shortcut_checked_list = _.difference(this.shortcut_checked_list, list);
427 + this.removeCheck(list)
428 + }
429 + },
430 + setCheck () {
431 + // 勾选取消大小分类
432 + _.each(this.data_list, i => {
433 + _.each(i.sku_list, x => {
434 + let sum = 0;
435 + _.each(x, item => {
436 + if (_.indexOf(this.shortcut_checked_list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
437 + sum = sum + 1;
438 + if (i.sku_count === sum) {
439 + i.checked = true;
440 + i.num = sum;
441 + } else {
442 + i.checked = false;
443 + i.num = sum;
444 + }
445 + }
446 + })
447 + });
448 + });
449 + let checked_list = []
450 + _.each(this.data_list, i => {
451 + if (i.checked) {
452 + checked_list.push(i.checked)
453 + }
454 + });
455 + // this.category_num = checked_list.length;
456 + this.category_num = this.checked_list.length;
457 + if (this.data_list.length === checked_list.length) {
458 + this.all_checked = true;
459 + }
460 + },
461 + removeCheck (list) {
462 + // 勾选取消大小分类
463 + _.each(this.data_list, i => {
464 + _.each(i.sku_list, x => {
465 + let sum = i.sku_count;
466 + _.each(x, item => {
467 + if (_.indexOf(list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
468 + item.checked = false;
469 + sum = sum - 1;
470 + i.checked = false;
471 + i.num = sum;
472 + }
473 + })
474 + })
475 + });
476 + let checked_list = []
477 + _.each(this.data_list, i => {
478 + if (i.checked) {
479 + checked_list.push(i.checked)
480 + }
481 + });
482 + // this.category_num = checked_list.length;
483 + this.category_num = this.checked_list.length;
484 + if (this.data_list.length !== checked_list.length) {
485 + this.all_checked = false;
486 + }
487 + // 移除数组内容
488 + _.each(list, n => {
489 + _.each(this.checked_list, (v, k) => {
490 + if (v === n) {
491 + this.checked_list.splice(k, 1);
492 + }
493 + });
494 + });
495 + },
496 + addProduct () {
497 + // 打开新增原物料
498 + this.$emit('add', true);
499 + }
500 + }
501 +}
502 +</script>
503 +
504 +<style lang="less">
505 + .choose-material-page {
506 + }
507 +
508 +
509 + .material-title {
510 + padding: 0.5rem;
511 + font-size: 1.1rem;
512 + border-bottom: 1px solid #eee;
513 + }
514 +
515 + .wrapper-scroll {
516 + overflow-y: scroll;
517 + max-height: 30rem;
518 + .shortcut-title {
519 + span {
520 + font-size: 0.8rem;
521 + }
522 + i {
523 + font-size: 0.7rem;
524 + color: #838383;
525 + }
526 + }
527 + .shortcut-content {
528 + text-align: left;
529 + padding: 0rem 0 0.5rem 2rem;
530 + div {
531 + font-size: 0.5rem;
532 + border: 1px solid #8EA8CF;
533 + color: #8EA8CF;
534 + padding: 0.2rem 0.4rem;
535 + margin-right: 0.5rem;
536 + margin-top: 0.5rem;
537 + display: inline-block;
538 + }
539 + }
540 + .fold-content {
541 + height: 0;
542 + overflow: hidden;
543 + padding-bottom: 0;
544 + }
545 + }
546 +
547 + .material-wrapper {
548 + text-align: left;
549 + .material-all-checked {
550 + font-size: 0.9rem;
551 + padding: 0.5rem 0 0.8rem 0.5rem;
552 + }
553 + .material-classify {
554 + .material-classify-checked {
555 + font-size: 0.9rem;
556 + padding: 0.4rem 0.2rem 0.1rem 0.85rem;
557 + }
558 + .material-classify-title {
559 + margin-bottom: 0.5rem;
560 + }
561 + .material-content {
562 + padding: 0 0.5rem;
563 + border-bottom: 1px dashed #eee;
564 + .flexbox-material {
565 + padding-bottom: 10px;
566 + .flex-material {
567 + text-align: center;
568 + color: #333333;
569 + background-color: #f6f6f6;
570 + }
571 + .flex-checked {
572 + color: #2c426b;
573 + background-color: #C4D4E7;
574 + }
575 + .flex-disabled {
576 + color: #CCCCCC;
577 + background-color: #EAEFF7;
578 + }
579 + }
580 + }
581 + .fold-content {
582 + height: 0;
583 + overflow: hidden;
584 + padding-bottom: 0;
585 + }
586 + }
587 + }
588 +
589 + .control-wrapper {
590 + padding: 10px;
591 + .close-btn {
592 + background-color: #ffffff;
593 + color: #8EA8CF;
594 + border: 1px solid #8EA8CF;
595 + width: 100%;
596 + }
597 + .comfirm-btn {
598 + background-color: #8EA8CF;
599 + color: #ffffff;
600 + border: 1px solid #8EA8CF;
601 + width: 100%;
602 + }
603 + }
604 +
605 + .add-product-wrapper {
606 + padding: 10px;
607 + display: inline-block;
608 + .add-btn {
609 + background-color: #ffffff;
610 + color: #8EA8CF;
611 + border: 1px solid #8EA8CF;
612 + width: 100%;
613 + }
614 + }
615 +
616 + .weui-dialog {
617 + width: 90% !important;
618 + max-width: 400px;
619 + }
620 +
621 + @media screen and (min-width: 1024px) {
622 + .weui-dialog {
623 + width: 35%;
624 + }
625 + }
626 +
627 + .weui-btn:after {
628 + border: 0 !important;
629 + }
630 +
631 + .weui-icon-circle {
632 + font-size: 20px !important;
633 + }
634 +
635 + .weui-icon-success {
636 + font-size: 20px !important;
637 + }
638 +
639 + .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
640 + color: #8EA8CF !important;
641 + }
642 +
643 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <select-list :show="show" :title="'请选择物料'" :caption="'所有分类的物料'" :list="list" :shortcut="shortcut_list" :span="2" @cancel="cancel" @comfirm="comfirm"></select-list>
4 + <div @click="showList">
5 + 显示
6 + </div>
7 + </div>
8 +</template>
9 +
10 +<script>
11 +import selectList from 'components/selectList/index'
12 +
13 +export default {
14 + components: { selectList },
15 + data () {
16 + return {
17 + show: false,
18 + list: [{
19 + category: '所有肉类的物料',
20 + sum: 2,
21 + material_list: [{
22 + sku_id: 1,
23 + sku_name: 'XX物料',
24 + checked: false,
25 + disabled: true
26 + }, {
27 + sku_id: 2,
28 + sku_name: 'XX物料',
29 + checked: false,
30 + disabled: false
31 + }]
32 + }, {
33 + category: '所有蔬菜类的物料',
34 + sum: 2,
35 + material_list: [{
36 + sku_id: 11,
37 + sku_name: 'XX物料',
38 + checked: false,
39 + disabled: false
40 + }, {
41 + sku_id: 22,
42 + sku_name: 'XX物料',
43 + checked: false,
44 + disabled: false
45 + }]
46 + }, {
47 + category: '所有蘑菇类的物料',
48 + sum: 2,
49 + material_list: [{
50 + sku_id: 33,
51 + sku_name: 'XX物料',
52 + checked: false,
53 + disabled: false
54 + }, {
55 + sku_id: 44,
56 + sku_name: 'XX物料',
57 + checked: false,
58 + disabled: false
59 + }]
60 + }],
61 + shortcut_list: [{
62 + sku_name: '蔬菜类12+水果8',
63 + sum: 2,
64 + list: [{
65 + sku_id: 1,
66 + sku_name: 'XX物料'
67 + }, {
68 + sku_id: 2,
69 + sku_name: 'XX物料'
70 + }],
71 + checked: false
72 + }, {
73 + sku_name: '肉类10+小器具12',
74 + sum: 2,
75 + list: [{
76 + sku_id: 11,
77 + sku_name: 'XX物料'
78 + }, {
79 + sku_id: 22,
80 + sku_name: 'XX物料'
81 + }],
82 + checked: false
83 + }, {
84 + sku_name: '肉类10+小器具12',
85 + sum: 4,
86 + list: [{
87 + sku_id: 33,
88 + sku_name: 'XX物料'
89 + }, {
90 + sku_id: 44,
91 + sku_name: 'XX物料'
92 + }, {
93 + sku_id: 55,
94 + sku_name: 'XX物料'
95 + }, {
96 + sku_id: 66,
97 + sku_name: 'XXxxxxx物料'
98 + }, {
99 + sku_id: 77,
100 + sku_name: 'XX物料'
101 + }, {
102 + sku_id: 88,
103 + sku_name: 'XX物料'
104 + }, {
105 + sku_id: 99,
106 + sku_name: 'XX物料'
107 + }, {
108 + sku_id: 100,
109 + sku_name: 'XX物料'
110 + }],
111 + checked: false
112 + }]
113 + }
114 + },
115 + methods: {
116 + showList () {
117 + this.show = true;
118 + },
119 + cancel (v) {
120 + this.show = v;
121 + },
122 + comfirm (v) {
123 + console.warn(v);
124 + }
125 + }
126 +}
127 +</script>
128 +
129 +<style lang="less">
130 +</style>
1 +<template lang="html">
2 + <div class="choose-material-page">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="material-title">请选择{{name}}</div>
6 + <div class="material-wrapper">
7 + <div class="material-classify">
8 + <div>
9 + <check-icon :value.sync="all_checked" @click.native="checkAll(all_checked)">
10 + 全部{{name}}（{{checkList.length}}/{{list.length}}）
11 + </check-icon>
12 + <div class="material-content">
13 + <checker
14 + v-model="checkList"
15 + type="checkbox"
16 + default-item-class="item"
17 + selected-item-class="item-selected"
18 + disabled-item-class="item-disabled"
19 + >
20 + <checker-item class="brand_select" v-for="(item, index) in list" :key="index" :disabled="item.disabled" :value="item.id" @click.native="itemCheck(item.checked, index)">{{item.name}}</checker-item>
21 + </checker>
22 + </div>
23 + </div>
24 + </div>
25 + </div>
26 + <div style="padding: 10px;">
27 + <flexbox>
28 + <flexbox-item>
29 + <x-button @click.native="cancel" mini style="background-color: #ffffff; color: #8EA8CF; border: 1px solid #8EA8CF; width: 100%;">关闭</x-button>
30 + </flexbox-item>
31 + <flexbox-item>
32 + <x-button @click.native="comfirm" mini style="background-color: #8EA8CF; color: #ffffff; border: 1px solid #8EA8CF; width: 100%;">确定</x-button>
33 + </flexbox-item>
34 + </flexbox>
35 + </div>
36 + </x-dialog>
37 + </div>
38 + </div>
39 +</template>
40 +
41 +<script>
42 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem } from 'vux'
43 +export default {
44 + props: ['show', 'list', 'checked_list', 'span', 'name'],
45 + directives: { TransferDom },
46 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem },
47 + beforeRouteEnter (to, from, next) {
48 + next()
49 + },
50 + mounted () {
51 + // console.warn(this.list)
52 + // console.warn(1)
53 + },
54 + data () {
55 + return {
56 + all_checked: true,
57 + checkList: []
58 + }
59 + },
60 + watch: {
61 + show (val) {
62 + // console.warn(val)
63 + this.checkList = JSON.parse(JSON.stringify(this.checked_list))
64 + if (val) {
65 + let check_list = _.filter(this.list, (val) => {
66 + let tem;
67 + if (val.disabled === false) {
68 + tem = val
69 + }
70 + return tem
71 + });
72 + // console.warn(check_list, this.checked_list)
73 + if (check_list.length > 0 && this.checked_list.length > 0 && check_list.length === this.checked_list.length) {
74 + this.all_checked = true
75 + } else {
76 + this.all_checked = false
77 + }
78 + } else {
79 + this.all_checked = false
80 + }
81 + // this.checkList = val;
82 + // setTimeout(() => {
83 + // let arr = []
84 + // for (let i = 0; i < $('.brand_select').length; i++) {
85 + // arr.push($('.brand_select').eq(i).height())
86 + // }
87 + // let max = _.max(arr)
88 + // $('.brand_select').height(max)
89 + // }, 100)
90 + }
91 + },
92 + computed: {
93 + // checkList () {
94 + // return JSON.parse(JSON.stringify(this.checked_list));
95 + // }
96 + },
97 + methods: {
98 + checkAll (checked) {
99 + let check_list = _.filter(this.list, (val) => {
100 + let tem;
101 + if (val.disabled === false) {
102 + tem = val
103 + }
104 + return tem
105 + });
106 + // 勾选所有品牌
107 + if (checked) {
108 + // 选中
109 + for (let i = 0; i < check_list.length; i++) {
110 + check_list[i].checked = true;
111 + }
112 + this.checkList = _.map(check_list, val => val.id)
113 + // this.checked_list = id_list;
114 + } else {
115 + // 取消
116 + this.checkList = []
117 + for (let i = 0; i < check_list.length; i++) {
118 + check_list[i].checked = false;
119 + }
120 + }
121 + },
122 + itemCheck (checked, index) {
123 + // console.warn(this.checkList)
124 + let list = _.filter(this.list, (val) => {
125 + let tem;
126 + if (val.disabled === false) {
127 + tem = val
128 + }
129 + return tem
130 + });
131 + if (checked) {
132 + this.list[index].checked = false;
133 + } else {
134 + this.list[index].checked = true;
135 + }
136 + // console.warn(id_list)
137 + if (list.length !== this.checkList.length) {
138 + this.all_checked = false
139 + } else {
140 + this.all_checked = true
141 + }
142 + },
143 + changeCategory () {
144 + },
145 + cancel () {
146 + // 关闭选择框
147 + this.$emit('cancel', !this.show)
148 + },
149 + comfirm () {
150 + // 确认选择框
151 + this.$emit('comfirm', this.checkList)
152 + }
153 + }
154 +}
155 +</script>
156 +
157 +<style lang="less">
158 + .material-title {
159 + line-height: 48px;
160 + font-size: 18px;
161 + }
162 + .material-classify {
163 + text-align: left;
164 + padding: 10px;
165 + .vux-checker-box {
166 + display: flex;
167 + flex-wrap: wrap;
168 + }
169 + .vux-check-icon {
170 + margin-bottom: 10px;
171 + }
172 +
173 + }
174 + .item {
175 + width: 31%;
176 + // flex-basis: 31%;
177 + line-height: 26px;
178 + text-align: center;
179 + border-radius: 3px;
180 + border: 1px solid #ccc;
181 + background-color: #f6f6f6;
182 + margin-bottom: 10px;
183 + margin-right: 2.5%;
184 + color: #333;
185 + display: flex!important;
186 + align-items: center;
187 + justify-content: center;
188 + &:nth-child(3n) {
189 + margin-right: 0;
190 + }
191 + }
192 + .weui-icon-circle {
193 + font-size: 20px!important;
194 + }
195 + .weui-icon-success {
196 + font-size: 20px!important;
197 + }
198 + .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
199 + color: #c4d4e7 !important;
200 + }
201 + .item-selected {
202 + color: #2c426b;
203 + background-color: #c4d4e7;
204 + }
205 + .item-disabled {
206 + color: #cfcfcf;
207 + background-color: #ebeef7;
208 + }
209 +
210 + .weui-dialog {
211 + width: 90% !important;
212 + max-width: 400px;
213 + }
214 +
215 + @media screen and (min-width: 1024px) {
216 + .weui-dialog {
217 + width: 35%;
218 + }
219 + }
220 +
221 + .weui-btn:after {
222 + border: 0 !important;
223 + }
224 +</style>
1 +<template lang="html">
2 + <div class="choose-material-page">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="material-title">{{title}}</div>
6 + <div class="wrapper-scroll">
7 + <div v-for="(v, k) in shortcut" :key="k">
8 + <flexbox class="shortcut-title">
9 + <flexbox-item :span="9">
10 + <check-icon @click.native="shortcutCheck(k)" :value.sync="shortcut[k].checked">
11 + <span>{{v.sku_name}}</span>
12 + </check-icon>
13 + </flexbox-item>
14 + <flexbox-item @click.native="shortcutFold(k)" style="margin-left: 0;">
15 + <span style="color: #8EA8CF;">{{v.sku_count}}种物料</span>
16 + <i class="fa fa-chevron-right"></i>
17 + </flexbox-item>
18 + </flexbox>
19 + <div class="shortcut-content fold-content">
20 + <div v-for="(item, index) in v.list" :key="index">{{item.sku_name}}</div>
21 + </div>
22 + </div>
23 + <div class="material-wrapper">
24 + <check-icon class="material-all-checked" @click.native="checkAll(all_checked)" :value.sync="all_checked">
25 + {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
26 + </check-icon>
27 + <div class="material-classify">
28 + <div class="material-index" v-for="(item, index) in data_list" :key="index">
29 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
30 + <flexbox class="material-classify-title">
31 + <flexbox-item :span="10">
32 + <check-icon class="material-classify-checked" @click.native="changeCategory(index)" :value.sync="data_list[index].checked">
33 + {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.sku_count}}）
34 + </check-icon>
35 + </flexbox-item>
36 + <flexbox-item @click.native="fold(index)">
37 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
38 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
39 + </div>
40 + </flexbox-item>
41 + </flexbox>
42 + <div class="material-content">
43 + <flexbox :gutter="10" class="flexbox-material material-item" v-for="(m, key) in item.sku_list" :key="key">
44 + <flexbox-item v-for="(v, k) in m" :key="k" :class="['material-item' + '-' + k]">
45 + <div v-if="!+v.disabled" @click="itemCheck(v, index, 'click')"
46 + :class="[v.checked === true ? 'flex-checked' : '', 'flex-material']">
47 + {{v.sku_name}}
48 + </div>
49 + <div v-else class="flex-material flex-disabled"> {{v.sku_name}} </div>
50 + </flexbox-item>
51 + </flexbox>
52 + </div>
53 + </div>
54 + </div>
55 + </div>
56 + </div>
57 + <div class="control-wrapper">
58 + <flexbox>
59 + <flexbox-item>
60 + <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
61 + </flexbox-item>
62 + <flexbox-item>
63 + <x-button class="comfirm-btn" @click.native="comfirm" mini>确定</x-button>
64 + </flexbox-item>
65 + </flexbox>
66 + </div>
67 + </x-dialog>
68 + </div>
69 + </div>
70 +</template>
71 +
72 +<script>
73 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
74 +
75 +export default {
76 + props: ['show', 'title', 'caption', 'list', 'span', 'shortcut'],
77 + directives: { TransferDom },
78 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
79 + mounted () {
80 + },
81 + data () {
82 + return {
83 + all_checked: false,
84 + item_checked: false,
85 + data_list: [],
86 + category_num: 0,
87 + checked_list: [],
88 + shortcut_checked_list: []
89 + }
90 + },
91 + watch: {
92 + list (val, old) {
93 + if (val !== old) {
94 + this.data_list = [];
95 + // 动态生成绑定变量
96 + let foo = val;
97 + for (let i = 0; i < foo.length; i++) {
98 + // 补全物料占位
99 + let remainder = foo[i]['sku_list'].length % this.span;
100 + if (remainder > 0) {
101 + for (let y = 0; y < (this.span - remainder); y++) {
102 + foo[i]['sku_list'].push({
103 + sku_id: '',
104 + sku_name: '',
105 + checked: false,
106 + disabled: '0'
107 + })
108 + }
109 + }
110 + // 分割计算
111 + let tmp = [];
112 + while (foo[i]['sku_list'].length) {
113 + tmp.push(foo[i]['sku_list'].splice(0, this.span));
114 + }
115 + this.data_list.push({
116 + checked: false,
117 + name: foo[i]['name'],
118 + num: 0,
119 + sku_count: foo[i]['sku_count'],
120 + sku_list: tmp
121 + });
122 + }
123 + }
124 + setTimeout(() => {
125 + let arr = $('.material-item');
126 + function getDom (dom, index) {
127 + return $(dom).children().eq(index)
128 + }
129 + _.each(arr, (v, k) => {
130 + _.each($(v), x => {
131 + if (getDom(x, 0).height() > getDom(x, 1).height()) {
132 + getDom(x, 1).css('line-height', getDom(x, 0).height() + 'px')
133 + getDom(x, 1).css('height', getDom(x, 0).height() + 'px')
134 + } else if (getDom(x, 0).height() < getDom(x, 1).height()) {
135 + getDom(x, 0).css('line-height', getDom(x, 1).height() + 'px')
136 + getDom(x, 0).css('height', getDom(x, 1).height() + 'px')
137 + }
138 + })
139 + });
140 + }, 100);
141 + },
142 + category_num (val) {
143 + // 小分类全选状态
144 + if (val === this.category_sum) {
145 + this.all_checked = true;
146 + } else {
147 + this.all_checked = false;
148 + }
149 + }
150 + },
151 + computed: {
152 + category_sum () {
153 + return _.reduce(this.data_list, (sum, n) => {
154 + return sum + n.sku_count;
155 + }, 0);
156 + }
157 + },
158 + methods: {
159 + checkAll (checked) {
160 + // 勾选所有类别
161 + if (checked) {
162 + // 选中
163 + _.each(this.data_list, (item, key) => {
164 + this.data_list[key]['checked'] = true;
165 + this.changeCategory(key)
166 + });
167 + } else {
168 + // 取消
169 + _.each(this.data_list, (item, key) => {
170 + this.data_list[key]['checked'] = false;
171 + this.changeCategory(key)
172 + });
173 + }
174 + },
175 + itemCheck (item, i, method) {
176 + // 选中项
177 + if (method === 'click') {
178 + item.checked = !item.checked;
179 + }
180 + // 选中数量
181 + if (item.checked) {
182 + this.data_list[i]['num'] = this.data_list[i]['num'] < this.data_list[i]['sku_count'] ? this.data_list[i]['num'] + 1 : this.data_list[i]['sku_count'];
183 + // 新增数组内容
184 + this.checked_list.push(item.sku_id);
185 + } else {
186 + this.data_list[i]['checked'] = false;
187 + this.data_list[i]['num'] = this.data_list[i]['num'] > 0 ? this.data_list[i]['num'] - 1 : 0;
188 + // 移除数组内容
189 + _.each(this.checked_list, (v, k) => {
190 + if (item.sku_id && v === item.sku_id) {
191 + this.checked_list.splice(k, 1);
192 + }
193 + });
194 + }
195 + // 遍历勾选项 全选
196 + // 查询小分类勾选数量
197 + if (this.data_list[i]['num'] === this.data_list[i]['sku_count']) {
198 + this.data_list[i]['checked'] = true;
199 + }
200 + // 小分类勾选状态调整大分类状态
201 + let cat_checked = [];
202 + _.each(this.data_list, item => {
203 + if (item.checked) {
204 + cat_checked.push(item.checked)
205 + }
206 + });
207 + // this.category_num = cat_checked.length < this.data_list.length ? cat_checked.length : this.data_list.length;
208 + this.category_num = this.checked_list.length;
209 + },
210 + changeCategory (i) {
211 + // 勾选分类
212 + if (this.data_list[i]['checked']) {
213 + // 全选
214 + _.each(this.data_list[i]['sku_list'], item => {
215 + _.each(item, v => {
216 + v.checked = true;
217 + // 选中项ID
218 + if (!+v.disabled) {
219 + if (_.indexOf(this.checked_list, v.sku_id) < 0 && v.sku_id) {
220 + this.checked_list.push(v.sku_id);
221 + }
222 + }
223 + })
224 + });
225 + // 小分类数量全选
226 + this.data_list[i]['num'] = this.data_list[i]['sku_count'];
227 + // 新增所有分类勾选数量
228 + // this.category_num = this.category_num < this.data_list.length ? this.category_num + 1 : this.data_list.length;
229 + this.category_num = this.checked_list.length;
230 + } else {
231 + // 小分类ID集合
232 + let id_list = [];
233 + // 取消全选
234 + _.each(this.data_list[i]['sku_list'], item => {
235 + _.each(item, v => {
236 + v.checked = false;
237 + // 集合
238 + id_list.push(v.sku_id)
239 + })
240 + });
241 + // 移除数组内容
242 + _.each(id_list, n => {
243 + _.each(this.checked_list, (v, k) => {
244 + if (v === n) {
245 + this.checked_list.splice(k, 1);
246 + }
247 + });
248 + });
249 + // 小分类数量归零
250 + this.data_list[i]['num'] = 0;
251 + // 减少所有分类勾选数量
252 + // this.category_num = this.category_num > 0 ? this.category_num - 1 : 0;
253 + this.category_num = this.checked_list.length;
254 + }
255 + },
256 + cancel () {
257 + // 关闭选择框
258 + this.$emit('cancel', !this.show);
259 + this.clear();
260 + },
261 + comfirm () {
262 + // 确认选择框
263 + let arr = [];
264 + _.each(this.data_list, x => {
265 + _.each(x.sku_list, y => {
266 + _.each(y, z => {
267 + _.each(this.checked_list, item => {
268 + if (item === z.sku_id) {
269 + z.sku_classname = x.name;
270 + arr.push(z);
271 + }
272 + })
273 + })
274 + })
275 + });
276 + this.$emit('comfirm', arr);
277 + this.clear();
278 + },
279 + clear () {
280 + // 清空选择项
281 + if (this.all_checked) {
282 + this.all_checked = false;
283 + }
284 + this.category_num = 0;
285 + _.each(this.data_list, (item, key) => {
286 + if (item.checked) {
287 + item.checked = false;
288 + item.num = 0;
289 + }
290 + _.each(item.sku_list, (v, k) => {
291 + _.each(v, x => {
292 + if (x.checked) {
293 + x.checked = false;
294 + item.num = 0;
295 + }
296 + })
297 + })
298 + });
299 + this.checked_list = [];
300 + // 清空快捷
301 + _.each(this.shortcut, item => {
302 + item.checked = false;
303 + });
304 + this.shortcut_checked_list = [];
305 + },
306 + fold (index) {
307 + let has_class = $($('.material-classify-title')[index]).siblings('.material-content').hasClass('fold-content');
308 + if (has_class) {
309 + // 展开
310 + $($('.material-classify-title')[index]).siblings('.material-content').removeClass('fold-content');
311 + $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
312 + } else {
313 + // 折叠
314 + $($('.material-classify-title')[index]).siblings('.material-content').addClass('fold-content');
315 + $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
316 + }
317 + },
318 + shortcutFold (index) {
319 + let has_class = $($('.shortcut-title')[index]).siblings('.shortcut-content').hasClass('fold-content');
320 + if (has_class) {
321 + // 展开
322 + $($('.shortcut-title')[index]).siblings('.shortcut-content').removeClass('fold-content');
323 + $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
324 + } else {
325 + // 折叠
326 + $($('.shortcut-title')[index]).siblings('.shortcut-content').addClass('fold-content');
327 + $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
328 + }
329 + },
330 + shortcutCheck (i) {
331 + // 快捷方式选中
332 + let list = _.map(this.shortcut[i].list, item => {
333 + return item.sku_id
334 + });
335 + if (this.shortcut[i]['checked']) {
336 + // 勾选
337 + this.shortcut_checked_list = this.shortcut_checked_list.concat(list);
338 + //
339 + _.each(this.data_list, (item, key) => {
340 + _.each(item.sku_list, (v, k) => {
341 + _.each(v, x => {
342 + // ID在快捷列表中存在
343 + if (_.indexOf(this.shortcut_checked_list, x.sku_id) >= 0 && !+x.disabled) {
344 + x.checked = true;
345 + if (!+x.disabled) {
346 + if (_.indexOf(this.checked_list, x.sku_id) < 0 && x.sku_id) {
347 + this.checked_list.push(x.sku_id);
348 + }
349 + }
350 + this.setCheck()
351 + }
352 + });
353 + })
354 + });
355 + } else {
356 + // 取消
357 + this.shortcut_checked_list = _.difference(this.shortcut_checked_list, list);
358 + this.removeCheck(list)
359 + }
360 + },
361 + setCheck () {
362 + // 勾选取消大小分类
363 + _.each(this.data_list, i => {
364 + _.each(i.sku_list, x => {
365 + let sum = 0;
366 + _.each(x, item => {
367 + if (_.indexOf(this.shortcut_checked_list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
368 + sum = sum + 1;
369 + if (i.sku_count === sum) {
370 + i.checked = true;
371 + i.num = sum;
372 + } else {
373 + i.checked = false;
374 + i.num = sum;
375 + }
376 + }
377 + })
378 + });
379 + });
380 + let checked_list = []
381 + _.each(this.data_list, i => {
382 + if (i.checked) {
383 + checked_list.push(i.checked)
384 + }
385 + });
386 + // this.category_num = checked_list.length;
387 + this.category_num = this.checked_list.length;
388 + if (this.data_list.length === checked_list.length) {
389 + this.all_checked = true;
390 + }
391 + },
392 + removeCheck (list) {
393 + // 勾选取消大小分类
394 + _.each(this.data_list, i => {
395 + _.each(i.sku_list, x => {
396 + let sum = i.sku_count;
397 + _.each(x, item => {
398 + if (_.indexOf(list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
399 + item.checked = false;
400 + sum = sum - 1;
401 + i.checked = false;
402 + i.num = sum;
403 + }
404 + })
405 + })
406 + });
407 + let checked_list = []
408 + _.each(this.data_list, i => {
409 + if (i.checked) {
410 + checked_list.push(i.checked)
411 + }
412 + });
413 + // this.category_num = checked_list.length;
414 + this.category_num = this.checked_list.length;
415 + if (this.data_list.length !== checked_list.length) {
416 + this.all_checked = false;
417 + }
418 + // 移除数组内容
419 + _.each(list, n => {
420 + _.each(this.checked_list, (v, k) => {
421 + if (v === n) {
422 + this.checked_list.splice(k, 1);
423 + }
424 + });
425 + });
426 + }
427 + }
428 +}
429 +</script>
430 +
431 +<style lang="less">
432 + .choose-material-page {
433 + }
434 +
435 +
436 + .material-title {
437 + padding: 0.5rem;
438 + font-size: 1.1rem;
439 + border-bottom: 1px solid #eee;
440 + }
441 +
442 + .wrapper-scroll {
443 + overflow-y: scroll;
444 + max-height: 30rem;
445 + .shortcut-title {
446 + span {
447 + font-size: 0.8rem;
448 + }
449 + i {
450 + font-size: 0.7rem;
451 + color: #838383;
452 + }
453 + }
454 + .shortcut-content {
455 + text-align: left;
456 + padding: 0rem 0 0.5rem 2rem;
457 + div {
458 + font-size: 0.5rem;
459 + border: 1px solid #8EA8CF;
460 + color: #8EA8CF;
461 + padding: 0.2rem 0.4rem;
462 + margin-right: 0.5rem;
463 + margin-top: 0.5rem;
464 + display: inline-block;
465 + }
466 + }
467 + .fold-content {
468 + height: 0;
469 + overflow: hidden;
470 + padding-bottom: 0;
471 + }
472 + }
473 +
474 + .material-wrapper {
475 + text-align: left;
476 + .material-all-checked {
477 + font-size: 0.9rem;
478 + padding: 0.5rem 0.2rem;
479 + }
480 + .material-classify {
481 + .material-classify-checked {
482 + font-size: 0.9rem;
483 + padding: 0.4rem 0.2rem 0.1rem 0.85rem;
484 + }
485 + .material-classify-title {
486 + margin-bottom: 0.5rem;
487 + }
488 + .material-content {
489 + padding: 0 0.5rem;
490 + border-bottom: 1px dashed #eee;
491 + .flexbox-material {
492 + padding-bottom: 10px;
493 + // align-items: center;
494 + // justify-content: center;
495 + .flex-material {
496 + text-align: center;
497 + color: #333333;
498 + background-color: #f6f6f6;
499 + }
500 + .flex-checked {
501 + color: #2c426b;
502 + background-color: #C4D4E7;
503 + }
504 + .flex-disabled {
505 + color: #CCCCCC;
506 + background-color: #EAEFF7;
507 + }
508 + }
509 + }
510 + .fold-content {
511 + height: 0;
512 + overflow: hidden;
513 + padding-bottom: 0;
514 + }
515 + }
516 + }
517 +
518 + .control-wrapper {
519 + padding: 10px;
520 + .close-btn {
521 + background-color: #ffffff;
522 + color: #8EA8CF;
523 + border: 1px solid #8EA8CF;
524 + width: 100%;
525 + }
526 + .comfirm-btn {
527 + background-color: #8EA8CF;
528 + color: #ffffff;
529 + border: 1px solid #8EA8CF;
530 + width: 100%;
531 + }
532 + }
533 +
534 + .weui-dialog {
535 + width: 90% !important;
536 + max-width: 400px;
537 + }
538 +
539 + @media screen and (min-width: 1024px) {
540 + .weui-dialog {
541 + width: 35%;
542 + }
543 + }
544 +
545 + .weui-btn:after {
546 + border: 0 !important;
547 + }
548 +
549 + .weui-icon-circle {
550 + font-size: 20px !important;
551 + }
552 +
553 + .weui-icon-success {
554 + font-size: 20px !important;
555 + }
556 +
557 + .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
558 + color: #8EA8CF !important;
559 + }
560 +
561 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <select-list :show="show" :title="'请选择物料'" :caption="'所有分类的物料'" :list="list" :shortcut="shortcut_list" :span="2" @cancel="cancel" @comfirm="comfirm"></select-list>
4 + <div @click="showList">
5 + 显示
6 + </div>
7 + </div>
8 +</template>
9 +
10 +<script>
11 +import selectList from 'components/selectList/index'
12 +
13 +export default {
14 + components: { selectList },
15 + data () {
16 + return {
17 + show: false,
18 + list: [{
19 + category: '所有肉类的物料',
20 + sum: 2,
21 + material_list: [{
22 + sku_id: 1,
23 + sku_name: 'XX物料',
24 + checked: false,
25 + disabled: true
26 + }, {
27 + sku_id: 2,
28 + sku_name: 'XX物料',
29 + checked: false,
30 + disabled: false
31 + }]
32 + }, {
33 + category: '所有蔬菜类的物料',
34 + sum: 2,
35 + material_list: [{
36 + sku_id: 11,
37 + sku_name: 'XX物料',
38 + checked: false,
39 + disabled: false
40 + }, {
41 + sku_id: 22,
42 + sku_name: 'XX物料',
43 + checked: false,
44 + disabled: false
45 + }]
46 + }, {
47 + category: '所有蘑菇类的物料',
48 + sum: 2,
49 + material_list: [{
50 + sku_id: 33,
51 + sku_name: 'XX物料',
52 + checked: false,
53 + disabled: false
54 + }, {
55 + sku_id: 44,
56 + sku_name: 'XX物料',
57 + checked: false,
58 + disabled: false
59 + }]
60 + }],
61 + shortcut_list: [{
62 + sku_name: '蔬菜类12+水果8',
63 + sum: 2,
64 + list: [{
65 + sku_id: 1,
66 + sku_name: 'XX物料'
67 + }, {
68 + sku_id: 2,
69 + sku_name: 'XX物料'
70 + }],
71 + checked: false
72 + }, {
73 + sku_name: '肉类10+小器具12',
74 + sum: 2,
75 + list: [{
76 + sku_id: 11,
77 + sku_name: 'XX物料'
78 + }, {
79 + sku_id: 22,
80 + sku_name: 'XX物料'
81 + }],
82 + checked: false
83 + }, {
84 + sku_name: '肉类10+小器具12',
85 + sum: 4,
86 + list: [{
87 + sku_id: 33,
88 + sku_name: 'XX物料'
89 + }, {
90 + sku_id: 44,
91 + sku_name: 'XX物料'
92 + }, {
93 + sku_id: 55,
94 + sku_name: 'XX物料'
95 + }, {
96 + sku_id: 66,
97 + sku_name: 'XXxxxxx物料'
98 + }, {
99 + sku_id: 77,
100 + sku_name: 'XX物料'
101 + }, {
102 + sku_id: 88,
103 + sku_name: 'XX物料'
104 + }, {
105 + sku_id: 99,
106 + sku_name: 'XX物料'
107 + }, {
108 + sku_id: 100,
109 + sku_name: 'XX物料'
110 + }],
111 + checked: false
112 + }]
113 + }
114 + },
115 + methods: {
116 + showList () {
117 + this.show = true;
118 + },
119 + cancel (v) {
120 + this.show = v;
121 + },
122 + comfirm (v) {
123 + console.warn(v);
124 + }
125 + }
126 +}
127 +</script>
128 +
129 +<style lang="less">
130 +</style>
1 +<template lang="html">
2 + <div class="financial_manager">
3 + <!-- <p>请选择</p> -->
4 + <selectPage :text="text" :checkedList="checked" :list="list" @change-text="changeText" @change="selected"></selectPage>
5 + </div>
6 +</template>
7 +
8 +<script>
9 + import selectPage from './index.vue'
10 + export default {
11 + components: {
12 + selectPage
13 + },
14 + data () {
15 + return {
16 + text: '',
17 + checked: ['002', '003'],
18 + list: [
19 + {
20 + id: '001',
21 + value: '肉'
22 + },
23 + {
24 + id: '002',
25 + value: '青菜'
26 + },
27 + {
28 + id: '003',
29 + value: '啤酒'
30 + },
31 + {
32 + id: '004',
33 + value: '水果'
34 + },
35 + {
36 + id: '005',
37 + value: '水果'
38 + },
39 + {
40 + id: '006',
41 + value: '水果'
42 + },
43 + {
44 + id: '007',
45 + value: '水果'
46 + },
47 + {
48 + id: '008',
49 + value: '水果'
50 + },
51 + {
52 + id: '009',
53 + value: '水果'
54 + },
55 + {
56 + id: '010',
57 + value: '水果'
58 + },
59 + {
60 + id: '011',
61 + value: '水果'
62 + }
63 + ]
64 + }
65 + },
66 + methods: {
67 + selected (id) {
68 + console.warn(id);
69 + },
70 + changeText (val) {
71 + this.text = val;
72 + }
73 + }
74 + }
75 +</script>
76 +
77 +<style lang="less">
78 +</style>
1 +<template>
2 + <div class="select-check">
3 + <p><span @touchstart.capture="open">{{text}}<icon class="Icon" type="warn"></icon></span></p>
4 + <transition name="component-fade" mode="out-in">
5 + <div class="select-content" v-if="show">
6 + <p class="select-up">请选择<icon class="Icon Icon_up" type="warn"></icon></p>
7 + <div>
8 + <checker
9 + class="checkbox"
10 + v-model="checkList"
11 + type="checkbox"
12 + default-item-class="select-item"
13 + selected-item-class="select-item-selected"
14 + @on-change="selected"
15 + >
16 + <checker-item v-for="item in list" :key="item.id" :value="item.id" >{{item.value}}</checker-item>
17 + </checker>
18 + <x-button class="select-btn" @click.native="submit">确　定</x-button>
19 + </div>
20 + </div>
21 + </transition>
22 + <!-- </transition-group> -->
23 +
24 + </div>
25 +</template>
26 +<script>
27 +/*
28 + 下拉多选
29 + 数据：
30 + checkList: 选中列表集合;
31 + list: 选项列表集合;
32 +
33 + 方法：
34 + selected: 选项发生改变之后的回调，返回选中项的id;
35 + submit: 点击确定之后的回调;
36 +*/
37 + import { XButton, Checker, CheckerItem, Icon } from 'vux'
38 + export default {
39 + components: {
40 + XButton,
41 + Checker,
42 + CheckerItem,
43 + Icon
44 + },
45 + props: {
46 + text: {
47 + type: String,
48 + default: '请选择'
49 + },
50 + list: {
51 + type: Array,
52 + default: []
53 + },
54 + checkedList: {
55 + type: Array,
56 + default: []
57 + }
58 + },
59 + data () {
60 + return {
61 + show: false,
62 + checkList: []
63 + }
64 + },
65 + created () {
66 + let text;
67 + if (this.checkedList.length != 0) {
68 + text = '已选择' + this.checkedList.length + '个选项';
69 + } else {
70 + text = '请选择'
71 + }
72 + this.$emit('change-text', text)
73 + },
74 + mounted () {
75 + // console.warn(this.checkedList)
76 + this.checkList = this.checkedList
77 + },
78 + methods: {
79 + open () {
80 + this.show = true;
81 + },
82 + selected () {
83 + let text;
84 + if (this.checkList.length != 0) {
85 + text = '已选择' + this.checkList.length + '个选项';
86 + } else {
87 + text = '请选择'
88 + };
89 + this.$emit('change-text', text)
90 + this.$emit('change', this.checkList)
91 + },
92 + submit () {
93 + if (this.checkList.length > 0) {
94 + let text = '已选择' + this.checkList.length + '个选项';
95 + this.$emit('change-text', text)
96 + this.show = false;
97 + } else {
98 + this.$vux.toast.show({
99 + text: '请选择内容',
100 + type: 'text'
101 + })
102 + }
103 + }
104 + }
105 + }
106 +</script>
107 +<style lang="less" scoped>
108 + .select-check {
109 + p {
110 + font-size: 16px;
111 + color: #333;
112 + text-align: right;
113 + padding: 10px 5px 10px 0;
114 + border-bottom: 1px solid #d6d7dc;
115 + .Icon {
116 + position: relative;
117 + font-size: 0;
118 + margin-left: 15px;
119 + }
120 + .Icon:before {
121 + width: 0;
122 + height: 0;
123 + }
124 + .Icon:after {
125 + content: " ";
126 + display: inline-block;
127 + height: 10px;
128 + width: 10px;
129 + border-width: 2px 2px 0 0;
130 + border-color: #C8C8CD;
131 + border-style: solid;
132 + transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
133 + position: relative;
134 + top: -2px;
135 + position: absolute;
136 + top: 50%;
137 + margin-top: -8px;
138 + right: 2px;
139 + }
140 + .Icon_up {
141 + margin-left: 22px;
142 + }
143 + .Icon_up:after {
144 + border-width: 0 2px 2px 0;
145 + margin-top: -11px;
146 + }
147 + }
148 + .checkbox {
149 + padding: 10px 0;
150 + display: flex;
151 + flex-flow: row wrap;
152 + justify-content: space-between;
153 + .select-item {
154 + background-color: #f6f6f6;
155 + color: #999;
156 + font-size: 14px;
157 + text-align: center;
158 + padding: 5px 10px;
159 + margin-bottom: 10px;
160 + line-height: 18px;
161 + border: 1px solid #f6f6f6;
162 + border-radius: 5px;
163 + flex: 0 0 18%;
164 + box-sizing: border-box;
165 + }
166 + .select-item-selected {
167 + background-color: #c4d4e7;
168 + color: #999;
169 + border-color: #c4d4e7;
170 + }
171 + .select-item-disabled {
172 + color: #999;
173 + }
174 + }
175 + .select-btn {
176 + background-color: #c4d4e7;
177 + font-size: 16px;
178 + color: #fff;
179 + &:after{
180 + border: 0;
181 + }
182 + &:not(.weui-btn_disabled):active {
183 + background-color: #89a9cf;
184 + color: #fff;
185 + }
186 + }
187 + }
188 +.component-fade-enter-active, .component-fade-leave-active {
189 + transition: opacity .3s ease;
190 +}
191 +.component-fade-enter, .component-fade-leave-to {
192 + opacity: 0;
193 +}
194 +</style>
1 +<template lang="html">
2 + <div class="choose-material-page">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="material-title">{{title}}</div>
6 + <div class="wrapper-scroll">
7 + <div v-for="(v, k) in shortcut" :key="k">
8 + <flexbox class="shortcut-title">
9 + <flexbox-item :span="9">
10 + <check-icon @click.native="shortcutCheck(k)" :value.sync="shortcut[k].checked">
11 + <span>{{v.store_name}}</span>
12 + </check-icon>
13 + </flexbox-item>
14 + <flexbox-item @click.native="shortcutFold(k)" style="margin-left: 0;">
15 + <span style="color: #8EA8CF;">{{v.store_count}}种物料</span>
16 + <i class="fa fa-chevron-right"></i>
17 + </flexbox-item>
18 + </flexbox>
19 + <div class="shortcut-content fold-content">
20 + <div v-for="(item, index) in v.list" :key="index">{{item.store_name}}</div>
21 + </div>
22 + </div>
23 + <div class="material-wrapper">
24 + <check-icon class="material-all-checked" @click.native="checkAll(all_checked)" :value.sync="all_checked">
25 + {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
26 + </check-icon>
27 + <div class="material-classify">
28 + <div v-for="(item, index) in data_list" :key="index">
29 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
30 + <flexbox class="material-classify-title">
31 + <flexbox-item :span="10">
32 + <check-icon class="material-classify-checked" @click.native="changeCategory(index)" :value.sync="data_list[index].checked">
33 + {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.store_count}}）
34 + </check-icon>
35 + </flexbox-item>
36 + <flexbox-item @click.native="fold(index)">
37 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
38 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
39 + </div>
40 + </flexbox-item>
41 + </flexbox>
42 + <div class="material-content">
43 + <flexbox :gutter="10" class="flexbox-material" v-for="(m, key) in item.store_list" :key="key">
44 + <flexbox-item v-for="(v, k) in m" :key="k">
45 + <div v-if="!+v.disabled" @click="itemCheck(v, index, 'click')"
46 + :class="[v.checked === true ? 'flex-checked' : '', 'flex-material']">
47 + {{v.store_name}}
48 + </div>
49 + <div v-else class="flex-material flex-disabled"> {{v.store_name}} </div>
50 + </flexbox-item>
51 + </flexbox>
52 + </div>
53 + </div>
54 + </div>
55 + </div>
56 + </div>
57 + <div class="control-wrapper">
58 + <flexbox>
59 + <flexbox-item>
60 + <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
61 + </flexbox-item>
62 + <flexbox-item>
63 + <x-button class="comfirm-btn" @click.native="comfirm" mini>确定</x-button>
64 + </flexbox-item>
65 + </flexbox>
66 + </div>
67 + </x-dialog>
68 + </div>
69 + </div>
70 +</template>
71 +
72 +<script>
73 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
74 +
75 +export default {
76 + props: ['show', 'title', 'caption', 'list', 'span', 'shortcut', 'checkedList'],
77 + directives: { TransferDom },
78 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
79 + mounted () {
80 + },
81 + data () {
82 + return {
83 + all_checked: false,
84 + item_checked: false,
85 + data_list: [],
86 + category_num: 0,
87 + checked_list: [],
88 + shortcut_checked_list: []
89 + }
90 + },
91 + watch: {
92 + list (val, old) {
93 + if (val !== old) {
94 + this.data_list = [];
95 + // 动态生成绑定变量
96 + let foo = val;
97 + for (let i = 0; i < foo.length; i++) {
98 + // 补全物料占位
99 + let remainder = foo[i]['store_list'].length % this.span;
100 + if (remainder > 0) {
101 + for (let y = 0; y < (this.span - remainder); y++) {
102 + foo[i]['store_list'].push({
103 + store_id: '',
104 + store_name: '',
105 + checked: false,
106 + disabled: '0'
107 + })
108 + }
109 + }
110 + // 分割计算
111 + let tmp = [];
112 + while (foo[i]['store_list'].length) {
113 + tmp.push(foo[i]['store_list'].splice(0, this.span));
114 + }
115 + this.data_list.push({
116 + checked: false,
117 + name: foo[i]['name'],
118 + num: 0,
119 + store_count: foo[i]['store_count'],
120 + store_list: tmp
121 + });
122 + }
123 + }
124 + },
125 + category_num (val) {
126 + // 小分类全选状态
127 + if (val === this.category_sum) {
128 + this.all_checked = true;
129 + } else {
130 + this.all_checked = false;
131 + }
132 + },
133 + checkedList (val) {
134 + if (val.length !== 0) {
135 + val.forEach(element => {
136 + this.data_list.forEach((data, index) => {
137 + data.store_list.forEach(s => {
138 + s.forEach(v => {
139 + if (element.store_id === v.store_id) {
140 + this.itemCheck(v, index, 'click');
141 + }
142 + })
143 + })
144 + })
145 + });
146 + }
147 + }
148 + },
149 + computed: {
150 + category_sum () {
151 + return _.reduce(this.data_list, (sum, n) => {
152 + return sum + n.store_count;
153 + }, 0);
154 + }
155 + },
156 + methods: {
157 + checkAll (checked) {
158 + // 勾选所有类别
159 + if (checked) {
160 + // 选中
161 + _.each(this.data_list, (item, key) => {
162 + this.data_list[key]['checked'] = true;
163 + this.changeCategory(key)
164 + });
165 + } else {
166 + // 取消
167 + _.each(this.data_list, (item, key) => {
168 + this.data_list[key]['checked'] = false;
169 + this.changeCategory(key)
170 + });
171 + }
172 + },
173 + itemCheck (item, i, method) {
174 + // 选中项
175 + if (method === 'click') {
176 + item.checked = !item.checked;
177 + }
178 + // 选中数量
179 + if (item.checked) {
180 + this.data_list[i]['num'] = this.data_list[i]['num'] < this.data_list[i]['store_count'] ? this.data_list[i]['num'] + 1 : this.data_list[i]['store_count'];
181 + // 新增数组内容
182 + this.checked_list.push(item.store_id);
183 + } else {
184 + this.data_list[i]['checked'] = false;
185 + this.data_list[i]['num'] = this.data_list[i]['num'] > 0 ? this.data_list[i]['num'] - 1 : 0;
186 + // 移除数组内容
187 + _.each(this.checked_list, (v, k) => {
188 + if (item.store_id && v === item.store_id) {
189 + this.checked_list.splice(k, 1);
190 + }
191 + });
192 + }
193 + // 遍历勾选项 全选
194 + // 查询小分类勾选数量
195 + if (this.data_list[i]['num'] === this.data_list[i]['store_count']) {
196 + this.data_list[i]['checked'] = true;
197 + }
198 + // 小分类勾选状态调整大分类状态
199 + let cat_checked = [];
200 + _.each(this.data_list, item => {
201 + if (item.checked) {
202 + cat_checked.push(item.checked)
203 + }
204 + });
205 + this.category_num = cat_checked.length < this.data_list.length ? cat_checked.length : this.data_list.length;
206 + },
207 + changeCategory (i) {
208 + // 勾选分类
209 + if (this.data_list[i]['checked']) {
210 + // 全选
211 + _.each(this.data_list[i]['store_list'], item => {
212 + _.each(item, v => {
213 + v.checked = true;
214 + // 选中项ID
215 + if (!+v.disabled) {
216 + if (_.indexOf(this.checked_list, v.store_id) < 0 && v.store_id) {
217 + this.checked_list.push(v.store_id);
218 + }
219 + }
220 + })
221 + });
222 + // 小分类数量全选
223 + this.data_list[i]['num'] = this.data_list[i]['store_count'];
224 + // 新增所有分类勾选数量
225 + this.category_num = this.category_num < this.data_list.length ? this.category_num + 1 : this.data_list.length;
226 + } else {
227 + // 小分类ID集合
228 + let id_list = [];
229 + // 取消全选
230 + _.each(this.data_list[i]['store_list'], item => {
231 + _.each(item, v => {
232 + v.checked = false;
233 + // 集合
234 + id_list.push(v.store_id)
235 + })
236 + });
237 + // 移除数组内容
238 + _.each(id_list, n => {
239 + _.each(this.checked_list, (v, k) => {
240 + if (v === n) {
241 + this.checked_list.splice(k, 1);
242 + }
243 + });
244 + });
245 + // 小分类数量归零
246 + this.data_list[i]['num'] = 0;
247 + // 减少所有分类勾选数量
248 + this.category_num = this.category_num > 0 ? this.category_num - 1 : 0;
249 + }
250 + },
251 + cancel () {
252 + // 关闭选择框
253 + this.$emit('cancel', !this.show);
254 + this.clear();
255 + },
256 + comfirm () {
257 + // 确认选择框
258 + let arr = [];
259 + _.each(this.data_list, x => {
260 + _.each(x.store_list, y => {
261 + _.each(y, z => {
262 + _.each(this.checked_list, item => {
263 + if (item === z.store_id) {
264 + z.route_name = x.name;
265 + arr.push(z);
266 + }
267 + })
268 + })
269 + })
270 + });
271 + this.$emit('comfirm', arr);
272 + this.clear();
273 + },
274 + clear () {
275 + // 清空选择项
276 + if (this.all_checked) {
277 + this.all_checked = false;
278 + }
279 + this.category_num = 0;
280 + _.each(this.data_list, (item, key) => {
281 + if (item.checked) {
282 + item.checked = false;
283 + item.num = 0;
284 + }
285 + _.each(item.store_list, (v, k) => {
286 + _.each(v, x => {
287 + if (x.checked) {
288 + x.checked = false;
289 + item.num = 0;
290 + }
291 + })
292 + })
293 + });
294 + this.checked_list = [];
295 + // 清空快捷
296 + _.each(this.shortcut, item => {
297 + item.checked = false;
298 + });
299 + this.shortcut_checked_list = [];
300 + },
301 + fold (index) {
302 + let has_class = $($('.material-classify-title')[index]).siblings('.material-content').hasClass('fold-content');
303 + if (has_class) {
304 + // 展开
305 + $($('.material-classify-title')[index]).siblings('.material-content').removeClass('fold-content');
306 + $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
307 + } else {
308 + // 折叠
309 + $($('.material-classify-title')[index]).siblings('.material-content').addClass('fold-content');
310 + $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
311 + }
312 + },
313 + shortcutFold (index) {
314 + let has_class = $($('.shortcut-title')[index]).siblings('.shortcut-content').hasClass('fold-content');
315 + if (has_class) {
316 + // 展开
317 + $($('.shortcut-title')[index]).siblings('.shortcut-content').removeClass('fold-content');
318 + $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
319 + } else {
320 + // 折叠
321 + $($('.shortcut-title')[index]).siblings('.shortcut-content').addClass('fold-content');
322 + $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
323 + }
324 + },
325 + shortcutCheck (i) {
326 + // 快捷方式选中
327 + let list = _.map(this.shortcut[i].list, item => {
328 + return item.store_id
329 + });
330 + if (this.shortcut[i]['checked']) {
331 + // 勾选
332 + this.shortcut_checked_list = this.shortcut_checked_list.concat(list);
333 + //
334 + _.each(this.data_list, (item, key) => {
335 + _.each(item.store_list, (v, k) => {
336 + _.each(v, x => {
337 + // ID在快捷列表中存在
338 + if (_.indexOf(this.shortcut_checked_list, x.store_id) >= 0 && !+x.disabled) {
339 + x.checked = true;
340 + if (!+x.disabled) {
341 + if (_.indexOf(this.checked_list, x.store_id) < 0 && x.store_id) {
342 + this.checked_list.push(x.store_id);
343 + }
344 + }
345 + this.setCheck()
346 + }
347 + });
348 + })
349 + });
350 + } else {
351 + // 取消
352 + this.shortcut_checked_list = _.difference(this.shortcut_checked_list, list);
353 + this.removeCheck(list)
354 + }
355 + },
356 + setCheck () {
357 + // 勾选取消大小分类
358 + _.each(this.data_list, i => {
359 + _.each(i.store_list, x => {
360 + let sum = 0;
361 + _.each(x, item => {
362 + if (_.indexOf(this.shortcut_checked_list, item.store_id) >= 0 && !+item.disabled && item.store_id) {
363 + sum = sum + 1;
364 + if (i.store_count === sum) {
365 + i.checked = true;
366 + i.num = sum;
367 + } else {
368 + i.checked = false;
369 + i.num = sum;
370 + }
371 + }
372 + })
373 + });
374 + });
375 + let checked_list = []
376 + _.each(this.data_list, i => {
377 + if (i.checked) {
378 + checked_list.push(i.checked)
379 + }
380 + });
381 + this.category_num = checked_list.length;
382 + if (this.data_list.length === checked_list.length) {
383 + this.all_checked = true;
384 + }
385 + },
386 + removeCheck (list) {
387 + // 勾选取消大小分类
388 + _.each(this.data_list, i => {
389 + _.each(i.store_list, x => {
390 + let sum = i.store_count;
391 + _.each(x, item => {
392 + if (_.indexOf(list, item.store_id) >= 0 && !+item.disabled && item.store_id) {
393 + item.checked = false;
394 + sum = sum - 1;
395 + i.checked = false;
396 + i.num = sum;
397 + }
398 + })
399 + })
400 + });
401 + let checked_list = []
402 + _.each(this.data_list, i => {
403 + if (i.checked) {
404 + checked_list.push(i.checked)
405 + }
406 + });
407 + this.category_num = checked_list.length;
408 + if (this.data_list.length !== checked_list.length) {
409 + this.all_checked = false;
410 + }
411 + // 移除数组内容
412 + _.each(list, n => {
413 + _.each(this.checked_list, (v, k) => {
414 + if (v === n) {
415 + this.checked_list.splice(k, 1);
416 + }
417 + });
418 + });
419 + }
420 + }
421 +}
422 +</script>
423 +
424 +<style lang="less">
425 + .choose-material-page {
426 + }
427 +
428 +
429 + .material-title {
430 + padding: 0.5rem;
431 + font-size: 18px;
432 + border-bottom: 1px solid #eee;
433 + }
434 +
435 + .wrapper-scroll {
436 + overflow-y: scroll;
437 + max-height: 30rem;
438 + .shortcut-title {
439 + span {
440 + font-size: 0.8rem;
441 + }
442 + i {
443 + font-size: 0.7rem;
444 + color: #838383;
445 + }
446 + }
447 + .shortcut-content {
448 + text-align: left;
449 + padding: 0rem 0 0.5rem 2rem;
450 + div {
451 + font-size: 0.5rem;
452 + border: 1px solid #8EA8CF;
453 + color: #8EA8CF;
454 + padding: 0.2rem 0.4rem;
455 + margin-right: 0.5rem;
456 + margin-top: 0.5rem;
457 + display: inline-block;
458 + }
459 + }
460 + .fold-content {
461 + height: 0;
462 + overflow: hidden;
463 + padding-bottom: 0;
464 + }
465 + }
466 +
467 + .material-wrapper {
468 + text-align: left;
469 + .material-all-checked {
470 + font-size: 0.9rem;
471 + padding: 0.5rem 0.2rem;
472 + }
473 + .material-classify {
474 + .material-classify-checked {
475 + font-size: 0.9rem;
476 + padding: 0.4rem 0.2rem 0.1rem 0.85rem;
477 + }
478 + .material-classify-title {
479 + margin-bottom: 0.5rem;
480 + }
481 + .material-content {
482 + padding: 0 0.5rem;
483 + border-bottom: 1px dashed #eee;
484 + .flexbox-material {
485 + padding-bottom: 10px;
486 + .flex-material {
487 + text-align: center;
488 + background-color: #eee;
489 + }
490 + .flex-checked {
491 + color: white;
492 + background-color: #8EA8CF;
493 + }
494 + .flex-disabled {
495 + color: #cfcfcf;
496 + background-color: #ebeef7;
497 + }
498 + }
499 + }
500 + .fold-content {
501 + height: 0;
502 + overflow: hidden;
503 + padding-bottom: 0;
504 + }
505 + }
506 + }
507 +
508 + .control-wrapper {
509 + padding: 10px;
510 + .close-btn {
511 + background-color: #ffffff;
512 + color: #8EA8CF;
513 + border: 1px solid #8EA8CF;
514 + width: 100%;
515 + }
516 + .comfirm-btn {
517 + background-color: #8EA8CF;
518 + color: #ffffff;
519 + border: 1px solid #8EA8CF;
520 + width: 100%;
521 + }
522 + }
523 +
524 + .weui-dialog {
525 + width: 90% !important;
526 + max-width: 400px;
527 + }
528 +
529 + @media screen and (min-width: 1024px) {
530 + .weui-dialog {
531 + width: 35%;
532 + }
533 + }
534 +
535 + .weui-btn:after {
536 + border: 0 !important;
537 + }
538 +
539 + .weui-icon-circle {
540 + font-size: 20px !important;
541 + }
542 +
543 + .weui-icon-success {
544 + font-size: 20px !important;
545 + }
546 +
547 + .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
548 + color: #8EA8CF !important;
549 + }
550 +
551 +</style>
1 +<template>
2 + <div class="choose_store_multi">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="store-title">{{title}}</div>
6 + <div class="wrap-scroll">
7 + <!-- <div class="store-wrapper">
8 + <check-icon class="store-all-checked" :value.sync="category_checked" @click.native="checkAll">
9 + 所有品牌的门店（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
10 + </check-icon>
11 + </div> -->
12 + <div class="store-classify">
13 + <div v-for="(b, bi) in data_list" :key="bi">
14 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
15 + <flexbox class="brand-classify-title">
16 + <flexbox-item :span="10">
17 + <check-icon v-if="b.city_count != 0" class="brand-classify-checked" @click.native="changeCategory(b, 'brand')" :value.sync="b.checked">
18 + 所有{{b.name}}门店（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
19 + </check-icon>
20 + <check-icon v-else class="brand-classify-checked" :value="false">
21 + 所有{{b.name}}门店（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
22 + </check-icon>
23 + </flexbox-item>
24 + <flexbox-item @click.native="fold(bi, 'brand')">
25 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
26 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
27 + </div>
28 + </flexbox-item>
29 + </flexbox>
30 + <div class="brand-content">
31 + <div class="store-classify">
32 + <div v-for="(c, ci) in b.city_list" :key="ci">
33 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
34 + <flexbox class="store-classify-title">
35 + <flexbox-item style="text-indent:2px;" :span="10">
36 + <check-icon v-if="c.store_count != 0" class="store-classify-checked" :value.sync="c.checked" @click.native="changeCategory(c, 'city', b)">
37 + 所有{{c.name}}{{b.name}}门店（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
38 + </check-icon>
39 + <check-icon v-else class="store-classify-checked" :value="false">
40 + 所有{{c.name}}{{b.name}}门店（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
41 + </check-icon>
42 + </flexbox-item>
43 + <flexbox-item @click.native="fold(bi, 'store', ci)">
44 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
45 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
46 + </div>
47 + </flexbox-item>
48 + </flexbox>
49 + <div class="store-content">
50 + <div class="store-list">
51 + <div v-for="(s, si) in c.store_list" :key="si" @click="itemCheck(s, b, ci)" class="store-item">
52 + <div v-if="!s.disabled"
53 + :class="[s.checked ? 'flex-checked' : '', 'flex-store']">
54 + {{s.name}}
55 + </div>
56 + <div v-else class="flex-store flex-disabled"> {{s.name}} </div>
57 + </div>
58 + </div>
59 + </div>
60 + </div>
61 + </div>
62 + </div>
63 + </div>
64 + </div>
65 + </div>
66 + <div class="control-wrapper">
67 + <flexbox>
68 + <flexbox-item>
69 + <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
70 + </flexbox-item>
71 + <flexbox-item>
72 + <x-button class="confirm-btn" @click.native="confirm" mini>确定</x-button>
73 + </flexbox-item>
74 + </flexbox>
75 + </div>
76 + </x-dialog>
77 + </div>
78 + </div>
79 +</template>
80 +
81 +<script>
82 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
83 +import { Observable } from 'rxjs/Rx'
84 +export default {
85 + directives: { TransferDom },
86 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
87 + props: ['show', 'list', 'title', 'checkList'],
88 + data () {
89 + return {
90 + data_list: [],
91 + category_num: 0,
92 + category_checked: false
93 + }
94 + },
95 + watch: {
96 + list () {
97 + this.data_list = [];
98 + this.category_num = 0;
99 + this.category_checked = false;
100 + Observable.from([...this.list])
101 + .map(b => {
102 + // 品牌
103 + b.checked = false;
104 + b.num = 0;
105 + b.city_count = 0;
106 + b.city_list.forEach(c => {
107 + // 城市
108 + let cnt = 0;
109 + c.checked = false;
110 + c.num = 0;
111 + // c.store_count = c.store_list.length;
112 + // b.city_count += c.store_count;
113 + c.store_list.forEach(s => {
114 + // 门店
115 + s.checked = false;
116 + if (!s.disabled) {
117 + cnt++;
118 + }
119 + })
120 + c.store_count = cnt;
121 + b.city_count += c.store_count;
122 + })
123 + return b;
124 + }).subscribe(v => {
125 + this.data_list.push(v);
126 + // 判断是否有已选中
127 + if (this.checkList.length) {
128 + v.city_list.forEach((c, ci) => {
129 + c.store_list.forEach(s => {
130 + this.checkList.forEach(checkStore => {
131 + if (checkStore.store_id === s.store_id) {
132 + this.itemCheck(s, v, ci, true)
133 + }
134 + })
135 + })
136 + })
137 + }
138 + // 分别计算已选中的
139 + }).unsubscribe();
140 + setTimeout(() => {
141 + for (let i = 0; i < $('.store-item').length; i++) {
142 + if (i % 2 !== 0) {
143 + continue;
144 + }
145 + if ($($('.store-item')[i]).height() > $($('.store-item')[i + 1]).height() && $($('.store-item')[i + 1]).height() !== 0) {
146 + $($('.store-item')[i + 1]).children('div').css('height', $($('.store-item')[i]).height() + 'px')
147 + } else if ($($('.store-item')[i]).height() < $($('.store-item')[i + 1]).height()) {
148 + $($('.store-item')[i]).children('div').css('height', $($('.store-item')[i + 1]).height() + 'px')
149 + }
150 + }
151 + }, 100);
152 + }
153 + },
154 + computed: {
155 + category_sum () {
156 + // 获取门店总数
157 + let sum = 0;
158 + this.data_list.forEach(b => {
159 + b.city_list.forEach(c => {
160 + sum += c.store_count;
161 + })
162 + })
163 + return sum;
164 + }
165 + },
166 + methods: {
167 + fold (index, str, i) {
168 + let has_class = $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).hasClass('fold-content');
169 + if (i && index - 1 >= 0) {
170 + // 不为第一组品牌中的城市
171 + index = this.data_list[index - 1].city_count + i;
172 + } else {
173 + // 不是城市或是第一组品牌中的城市
174 + i ? index = i : '';
175 + }
176 + if (has_class) {
177 + // 展开
178 + $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).removeClass('fold-content');
179 + $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
180 + } else {
181 + // 折叠
182 + $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).addClass('fold-content');
183 + $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
184 + }
185 + },
186 + itemCheck (item, b, ci, bool) {
187 + // 选中/取消选中单条
188 + // item.checked = !item.checked;
189 + bool ? item.checked = bool : item.checked = !item.checked;
190 + // 计算父类的选中个数
191 + if (item.checked) {
192 + b.num++;
193 + b.city_list[ci].num++;
194 + this.category_num++;
195 + } else {
196 + b.num--;
197 + b.city_list[ci].num--;
198 + this.category_num--;
199 + }
200 + this.checkIcon();
201 + },
202 + /*
203 + * 计算num数量判断逻辑：
204 + * 1、如果点击状态为切换状态时，不等于目标状态的门店为待切换门店。
205 + * 2、待切换门店切换状态时，增加或减少num（根据父类的选择状态判断）。
206 + * 3、切换父类状态时，需要避免计算时累加或累减之前已切换过状态且无需在切换的门店。
207 + * 4、只需要计算待切换状态的门店。
208 + * 5、根据被点击父类的状态判断是增加还是减少，选中为增，取消选中为减。
209 + * 6、最后根据num和count来判断子类被点击选中或取消选中时，切换父类的选中状态。
210 + * ------------------------------------------------------------------------
211 + */
212 + changeCategory (item, type, brand) {
213 + // 选中分类
214 + // checkicon会自动重置，当用户看到选中时，传入的是false
215 + item.checked ? item.checked = true : item.checked = false;
216 + if (type === 'brand') {
217 + // 品牌分类
218 + Observable.from(item.city_list)
219 + .map(v => {
220 + v.checked = item.checked;
221 + v.store_list.forEach(s => {
222 + if (!s.disabled) {
223 + // 计算选中数量
224 + if (s.checked == !item.checked && item.checked) {
225 + v.num++;
226 + item.num++;
227 + this.category_num++;
228 + } else if (s.checked == !item.checked && !item.checked) {
229 + v.num--;
230 + item.num--;
231 + this.category_num--;
232 + }
233 + s.checked = item.checked;
234 + }
235 + })
236 + return v;
237 + }).subscribe().unsubscribe();
238 + } else if (type === 'city') {
239 + // 城市分类
240 + Observable.from(item.store_list)
241 + .map(v => {
242 + if (!v.disabled) {
243 + // 计算选中数量
244 + if (v.checked == !item.checked && item.checked) {
245 + brand.num++;
246 + item.num++;
247 + this.category_num++;
248 + } else if (v.checked == !item.checked && !item.checked) {
249 + brand.num--;
250 + item.num--;
251 + this.category_num--;
252 + }
253 + v.checked = item.checked;
254 + }
255 + return v;
256 + }).subscribe().unsubscribe();
257 + }
258 + this.checkIcon();
259 + },
260 + checkAll () {
261 + // 全选
262 + let allCheck = this.category_checked;
263 + allCheck ? allCheck = true : allCheck = false;
264 + let arr = [...this.data_list];
265 + this.data_list = [];
266 + Observable.from(arr)
267 + .map(v => {
268 + v.checked = allCheck;
269 + v.city_list.forEach(c => {
270 + c.checked = allCheck;
271 + c.store_list.forEach(s => {
272 + if (!s.disabled) {
273 + if (s.checked == !allCheck && allCheck) {
274 + v.num++;
275 + c.num++;
276 + this.category_num++;
277 + } else if (s.checked == !allCheck && !allCheck) {
278 + v.num--;
279 + c.num--;
280 + this.category_num--;
281 + }
282 + s.checked = allCheck;
283 + }
284 + })
285 + })
286 + return v;
287 + }).subscribe(v => {
288 + this.data_list.push(v);
289 + }).unsubscribe();
290 + },
291 + checkIcon () {
292 + // 根据选中个数和总数来判断是否让父菜单选中
293 + this.data_list.forEach(b => {
294 + b.num === b.city_count ? b.checked = true : b.checked = false;
295 + b.city_list.forEach(c => {
296 + c.num === c.store_count ? c.checked = true : c.checked = false;
297 + })
298 + })
299 + // 总分类数
300 + this.category_sum === this.category_num ? this.category_checked = true : this.category_checked = false;
301 + let arr = [...this.data_list];
302 + this.data_list.splice(0, [...arr]);
303 + },
304 + cancel () {
305 + this.$emit('cancel');
306 + },
307 + confirm () {
308 + // 返回选中
309 + let data = [];
310 + Observable.create(store$ => {
311 + this.data_list.forEach(b => {
312 + b.city_list.forEach(c => {
313 + c.store_list.forEach(s => {
314 + if (s.checked && !s.disabled) {
315 + s.route_name = c.name;
316 + store$.next(s);
317 + }
318 + })
319 + })
320 + })
321 + }).subscribe(v => {
322 + data.push(v);
323 + }).unsubscribe();
324 + if (!data.length) {
325 + this.$vux.toast.show({
326 + type: 'warn',
327 + text: '请至少选择一个！'
328 + });
329 + return;
330 + }
331 + this.$emit('confirm', data);
332 + }
333 + }
334 +}
335 +</script>
336 +
337 +<style lang="less">
338 +.choose_store_multi {
339 +}
340 +.store-title {
341 + padding: 0.5rem;
342 + font-size: 18px;
343 + border-bottom: 1px solid #eee;
344 +}
345 +.wrap-scroll {
346 + max-height: 30rem;
347 + overflow-y: auto;
348 +}
349 +.store-wrapper {
350 + text-align: left;
351 + .store-all-checked {
352 + font-size: 0.9rem;
353 + padding: 0.5rem 0.2rem;
354 + }
355 +}
356 +
357 +.store-classify {
358 + .store-classify-checked,
359 + .brand-classify-checked {
360 + font-size: 0.9rem;
361 + padding: 0.4rem 0.2rem 0.1rem 0.85rem;
362 + }
363 + .store-classify-title,
364 + .brand-classify-title {
365 + margin-bottom: 0.5rem;
366 + }
367 + .store-content,
368 + .brand-content {
369 + border-bottom: 1px dashed #eee;
370 + .store-list {
371 + &:after {
372 + display: block;
373 + content: "";
374 + clear: both;
375 + }
376 + &>div {
377 + float: left;
378 + margin-left: 2%;
379 + width: 48%;
380 + padding-bottom: 10px;
381 + .flex-store {
382 + text-align: center;
383 + background-color: #f6f6f6;
384 + color: #333;
385 + }
386 + .flex-checked {
387 + color: #2c426b;
388 + background-color: #c4d4e7;
389 + }
390 + .flex-disabled {
391 + color: #ccc;
392 + background-color: #eaeff7;
393 + }
394 + }
395 + }
396 + }
397 + .store-content {
398 + padding: 0 1rem;
399 + }
400 + .fold-content {
401 + height: 0;
402 + overflow: hidden;
403 + padding-bottom: 0;
404 + }
405 +}
406 +.control-wrapper {
407 + padding: 10px;
408 + .close-btn {
409 + background-color: #ffffff;
410 + color: #8EA8CF;
411 + border: 1px solid #8EA8CF;
412 + width: 100%;
413 + }
414 + .confirm-btn {
415 + background-color: #8EA8CF;
416 + color: #ffffff;
417 + border: 1px solid #8EA8CF;
418 + width: 100%;
419 + }
420 +}
421 +.vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
422 + color: #8ea8cf !important;
423 +}
424 +</style>
1 +<template>
2 + <div class="choose_store_multi">
3 + <div v-transfer-dom>
4 + <x-dialog :show.sync="show" class="dialog-demo">
5 + <div class="store-title">{{title}}</div>
6 + <div class="wrap-scroll">
7 + <div class="store-wrapper">
8 + <check-icon class="store-all-checked">
9 + <!-- {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}） -->
10 + 所有品牌的门店（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
11 + </check-icon>
12 + </div>
13 + <div class="store-classify">
14 + <div v-for="(b, bi) in data_list" :key="bi">
15 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
16 + <flexbox class="brand-classify-title">
17 + <flexbox-item style="text-indent:2px;" :span="10">
18 + <check-icon class="brand-classify-checked" :value.sync="b.checked">
19 + {{b.name}}（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
20 + </check-icon>
21 + </flexbox-item>
22 + <flexbox-item @click.native="fold(bi, 'brand')">
23 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
24 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
25 + </div>
26 + </flexbox-item>
27 + </flexbox>
28 + <div class="brand-content">
29 + <div class="store-classify">
30 + <div v-for="(c, ci) in b.city_list" :key="ci">
31 + <div style="border-top: 1px dashed #eee; width: 100%;"></div>
32 + <flexbox class="store-classify-title">
33 + <flexbox-item style="text-indent:4px;" :span="10">
34 + <check-icon class="store-classify-checked" :value.sync="c.checked">
35 + {{c.name}}（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
36 + </check-icon>
37 + </flexbox-item>
38 + <flexbox-item @click.native="fold(bi, 'store', ci)">
39 + <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
40 + <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
41 + </div>
42 + </flexbox-item>
43 + </flexbox>
44 + <div class="store-content">
45 + <div class="store-list">
46 + <div v-for="(s, si) in c.store_list" :key="si" @click="itemCheck(s)">
47 + <div v-if="!+s.disabled"
48 + :class="[s.checked ? 'flex-checked' : '', 'flex-store']">
49 + {{s.name}}
50 + </div>
51 + </div>
52 + </div>
53 + </div>
54 + </div>
55 + </div>
56 + </div>
57 + </div>
58 + </div>
59 + </div>
60 + <div class="control-wrapper">
61 + <flexbox>
62 + <flexbox-item>
63 + <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
64 + </flexbox-item>
65 + <flexbox-item>
66 + <x-button class="confirm-btn" @click.native="confirm" mini>确定</x-button>
67 + </flexbox-item>
68 + </flexbox>
69 + </div>
70 + </x-dialog>
71 + </div>
72 + </div>
73 +</template>
74 +
75 +<script>
76 +import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
77 +import { Observable } from 'rxjs/Rx'
78 +export default {
79 + directives: { TransferDom },
80 + components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
81 + props: ['show', 'list', 'title', 'checkList'],
82 + data () {
83 + return {
84 + data_list: [],
85 + category_num: 0
86 + }
87 + },
88 + watch: {
89 + list () {
90 + this.data_list = [];
91 + Observable.from([...this.list])
92 + .map(b => {
93 + // 品牌
94 + b.checked = false;
95 + b.num = 0;
96 + b.city_count = b.city_list.length;
97 + b.city_list.forEach(c => {
98 + // 城市
99 + c.checked = false;
100 + c.num = 0;
101 + c.store_count = c.store_list.length;
102 + c.store_list.forEach(s => {
103 + // 门店
104 + s.num = 0;
105 + s.checked = false;
106 + })
107 + })
108 + return b;
109 + }).subscribe(v => {
110 + v.city_list.forEach(c => {
111 + c.store_list.forEach(s => {
112 + this.checkList.forEach(checkStore => {
113 + if (checkStore.store_id === s.store_id) {
114 + s.checked = true;
115 + }
116 + })
117 + })
118 + })
119 + this.data_list.push(v);
120 + // 分别计算已选中的
121 + }).unsubscribe();
122 + }
123 + },
124 + computed: {
125 + category_sum () {
126 + // 获取门店总数
127 + let sum = 0;
128 + this.data_list.forEach(b => {
129 + b.city_list.forEach(c => {
130 + sum += c.store_count;
131 + })
132 + })
133 + return sum;
134 + }
135 + },
136 + methods: {
137 + fold (index, str, i) {
138 + let has_class = $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).hasClass('fold-content');
139 + if (i && index - 1 >= 0) {
140 + // 不为第一组品牌中的城市
141 + index = this.data_list[index - 1].city_count + i;
142 + } else {
143 + // 不是城市或是第一组品牌中的城市
144 + i ? index = i : '';
145 + }
146 + if (has_class) {
147 + // 展开
148 + $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).removeClass('fold-content');
149 + $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
150 + } else {
151 + // 折叠
152 + $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).addClass('fold-content');
153 + $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
154 + }
155 + },
156 + itemCheck (item, method) {
157 + // 选中/取消选中单条
158 + item.checked = !item.checked;
159 + let arr = [...this.data_list];
160 + this.data_list.splice(0, [...arr]);
161 + },
162 + cancel () {
163 + this.$emit('cancel');
164 + },
165 + confirm () {
166 + let data = [];
167 + Observable.create(store$ => {
168 + this.data_list.forEach(b => {
169 + b.city_list.forEach(c => {
170 + c.store_list.forEach(s => {
171 + if (s.checked) {
172 + store$.next(s);
173 + }
174 + })
175 + })
176 + })
177 + }).subscribe(v => {
178 + data.push(v);
179 + }).unsubscribe();
180 + this.$emit('confirm', data);
181 + }
182 + }
183 +}
184 +</script>
185 +
186 +<style lang="less">
187 +.choose_store_multi {
188 +}
189 +.store-title {
190 + padding: 0.5rem;
191 + font-size: 18px;
192 + border-bottom: 1px solid #eee;
193 +}
194 +.wrap-scroll {
195 + max-height: 30rem;
196 + overflow-y: auto;
197 +}
198 +.store-wrapper {
199 + text-align: left;
200 + .store-all-checked {
201 + font-size: 0.9rem;
202 + padding: 0.5rem 0.2rem;
203 + }
204 +}
205 +
206 +.store-classify {
207 + .store-classify-checked,
208 + .brand-classify-checked {
209 + font-size: 0.9rem;
210 + padding: 0.4rem 0.2rem 0.1rem 0.85rem;
211 + }
212 + .store-classify-title,
213 + .brand-classify-title {
214 + margin-bottom: 0.5rem;
215 + }
216 + .store-content,
217 + .brand-content {
218 + border-bottom: 1px dashed #eee;
219 + .store-list {
220 + &:after {
221 + display: block;
222 + content: "";
223 + clear: both;
224 + }
225 + &>div {
226 + float: left;
227 + margin-left: .4rem;
228 + width: 48%;
229 + padding-bottom: 10px;
230 + .flex-store {
231 + text-align: center;
232 + background-color: #eee;
233 + }
234 + .flex-checked {
235 + color: white;
236 + background-color: #8EA8CF;
237 + }
238 + .flex-disabled {
239 + color: #cfcfcf;
240 + background-color: #ebeef7;
241 + }
242 + }
243 + }
244 + }
245 + .store-content {
246 + padding: 0 1rem;
247 + }
248 + .fold-content {
249 + height: 0;
250 + overflow: hidden;
251 + padding-bottom: 0;
252 + }
253 +}
254 +.control-wrapper {
255 + padding: 10px;
256 + .close-btn {
257 + background-color: #ffffff;
258 + color: #8EA8CF;
259 + border: 1px solid #8EA8CF;
260 + width: 100%;
261 + }
262 + .confirm-btn {
263 + background-color: #8EA8CF;
264 + color: #ffffff;
265 + border: 1px solid #8EA8CF;
266 + width: 100%;
267 + }
268 +}
269 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <demo @handle="save"></demo>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import demo from 'components/sms/demo'
9 +
10 +export default {
11 + components: { demo },
12 + data () {
13 + return {
14 + }
15 + },
16 + methods: {
17 + save (val) {
18 + console.warn(val)
19 + }
20 + }
21 +}
22 +</script>
23 +
24 +<style lang="less">
25 +</style>
1 +<template lang="html">
2 + <div class="SMS">
3 + <!-- 验证码 -->
4 + <flexbox>
5 + <flexbox-item>
6 + <div class="flex-demo" :span="6">
7 + <x-input
8 + class="smsCodeWrap"
9 + v-model="smsCode"
10 + placeholder="请输入验证码"
11 + required
12 + :show-clear="true"
13 + @on-blur="onBlur"
14 + placeholder-align="left"></x-input>
15 + </div>
16 + </flexbox-item>
17 + <flexbox-item :span="6">
18 + <div class="ctl-btn">
19 + <span v-if="!countDownStatus" @click="getCode()">获取验证码</span>
20 + <span v-else :disabled="countDownStatus" @click="getCode()">{{ countDownDuring }}秒后重新获取</span>
21 + <x-button mini :disabled="this.smsCode === ''" @click.native="submitCode()">确定</x-button>
22 + </div>
23 + </flexbox-item>
24 + </flexbox>
25 + <toast v-model="smsCodeMsgShow" :time="1500">{{smsCodeMsg}}</toast>
26 + </div>
27 +</template>
28 +
29 +<script>
30 +import { Flexbox, FlexboxItem, XInput, XButton, Alert, TransferDomDirective as TransferDom, Toast } from 'vux'
31 +export default {
32 + directives: {
33 + TransferDom
34 + },
35 + components: {
36 + Flexbox,
37 + FlexboxItem,
38 + XInput,
39 + XButton,
40 + Alert,
41 + Toast
42 + },
43 + props: [ 'TYPE' ],
44 + data () {
45 + return {
46 + smsCode: '',
47 + smsCodeMsg: '验证码发送成功',
48 + smsCodeMsgShow: false,
49 + countDownDuring: 60,
50 + countDownStatus: false
51 + }
52 + },
53 + computed: {
54 + },
55 + methods: {
56 + onBlur () {},
57 + countDown () {
58 + this.countDownStatus = true
59 + // 倒计时 一分钟
60 + if (this.countDownDuring > 0) {
61 + var Timer = setInterval(() => {
62 + this.countDownDuring = this.countDownDuring - 1;
63 + }, 1000);
64 + } else {
65 + this.countDownStatus = true
66 + }
67 + setTimeout(() => {
68 + // 倒计时状态
69 + clearInterval(Timer)
70 + this.countDownStatus = false
71 + this.countDownDuring = 60
72 + }, 60000)
73 + },
74 + getCode () {
75 + // 获取验证码
76 + // axios.post('b/auth/pin', { type: this.TYPE })
77 + // .then(res => {
78 + // if (res.data.ret === 'OK') {
79 + // this.smsCodeMsgShow = true
80 + // // 激活倒计时
81 + // this.countDown()
82 + // } else {
83 + // this.smsCodeMsgShow = true
84 + // this.smsCodeMsg = '出错了'
85 + // console.warn(res);
86 + // }
87 + // })
88 + // .catch(err => {
89 + // console.error(err);
90 + // })
91 + this.countDown()
92 + },
93 + submitCode () {
94 + // 验证验证码
95 + this.$emit('handle', this.smsCode)
96 + this.smsCode = ''
97 + }
98 + }
99 +}
100 +</script>
101 +
102 +<style lang="less">
103 +.smsCodeWrap {
104 + font-size: 0.9rem;
105 + /* border: 1px solid #ccc; */
106 + padding: 3px 8px!important;
107 + /* border-radius: 5px */
108 +}
109 +.ctl-btn {
110 + span {
111 + display: inline-block;
112 + padding: 3px 8px;
113 + background: #f2f2f2;
114 + font-size: 0.9rem;
115 + border-radius: 5px;
116 + color: #45547a;
117 + }
118 +}
119 +</style>
1 +<template>
2 + <div class="">
3 + <tabBar @on-change="onIndexChange" :tabList="tabList"></tabBar>
4 + </div>
5 +</template>
6 +<script>
7 + import tabBar from 'components/tabBar/index'
8 + export default {
9 + components: {
10 + tabBar
11 + },
12 + data () {
13 + return {
14 + tabList: [
15 + {
16 + name: '首页',
17 + imgurl: '',
18 + num: '2',
19 + selected: false,
20 + link: ''
21 + },
22 + {
23 + name: '购物车',
24 + imgurl: '',
25 + num: '',
26 + selected: true,
27 + link: ''
28 + }
29 + ]
30 + }
31 + },
32 + methods: {
33 + onIndexChange (index) {
34 + console.warn(index)
35 + }
36 + }
37 + }
38 +</script>
...\ No newline at end of file ...\ No newline at end of file
1 +<template>
2 + <div class="tabBar">
3 + <tabbar @on-index-change="onChange">
4 + <tabbar-item v-for="(item, index) in tabList" :key="index" :selected="item.selected" :badge="item.num" :link="item.link">
5 + <img slot="icon" :src="item.imgUrl">
6 + <span slot="label">{{item.name}}</span>
7 + </tabbar-item>
8 + </tabbar>
9 + </div>
10 +</template>
11 +<script>
12 + /*
13 + 底部导航栏组件
14 + tablist: {
15 + num: 消息标记数量，传空值则没有标记,
16 + link: 跳转页面链接,
17 + imgUrl: 导航图标,
18 + name: 导航名称
19 + selected: 是否选中当前项
20 + }
21 + onChange：底部导航选中改变时的回调
22 + */
23 + import { Tabbar, TabbarItem } from 'vux'
24 + export default {
25 + components: {
26 + Tabbar,
27 + TabbarItem
28 + },
29 + props: ['tabList'],
30 + data () {
31 + return {}
32 + },
33 + methods: {
34 + onChange (index) {
35 + this.$emit('on-change', index)
36 + }
37 + }
38 + };
39 +</script>
40 +<style lang="less">
41 +.tabBar {
42 + .weui-tabbar__icon {
43 + position: relative;
44 + .vux-badge-single {
45 + width: auto;
46 + min-width: 16px;
47 + }
48 + }
49 + .weui-tabbar__icon > sup {
50 + position: absolute;
51 + top: 0;
52 + left: 35px;
53 + transform: translateX(-50%);
54 + z-index: 101;
55 + }
56 + .weui-tabbar__item.vux-tabbar-simple {
57 + padding: 0 10px;
58 + height: 50px;
59 + line-height: 50px;
60 + }
61 + .vux-tabbar-simple .weui-tabbar__label {
62 + font-size: 14px;
63 + line-height: 50px;
64 + }
65 + .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
66 + color: #89A9CF;
67 + }
68 +}
69 +
70 +</style>
1 +<template lang="html">
2 + <div class="">
3 + <tab-swiper :list="list" :default_selected="default_selected" @on-item-click="onItemClick"></tab-swiper>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import tabSwiper from 'components/tabSwiper/index'
9 +
10 +export default {
11 + components: { tabSwiper },
12 + data () {
13 + return {
14 + list: ['消息', '通讯录'],
15 + default_selected: '消息'
16 + }
17 + },
18 + methods: {
19 + onItemClick (index) {
20 + console.warn(index);
21 + }
22 + }
23 +}
24 +</script>
25 +
26 +<style lang="less" scoped>
27 +</style>
1 +<template lang="html">
2 + <div class="tab-wrapper">
3 + <div class="tab-content">
4 + <tab bar-active-color="#8da9cf" :custom-bar-width="getBarWidth">
5 + <tab-item active-class="active" v-for="(item, index) in list" :key="index" :class="{'vux-1px-r': index+1!==list.length}" :selected="default_selected === item" @on-item-click="onItemClick">{{item}}</tab-item>
6 + </tab>
7 + </div>
8 + </div>
9 +</template>
10 +
11 +<script>
12 +/**
13 + * [参考用法 vux tab 组件]
14 + *
15 + * [list tab 显示名称]
16 + * @type {Array}
17 + *
18 + * [default_selected tab 默认显示名称]
19 + * @type {String}
20 + *
21 + * [on-item-click 点击回调返回 index]
22 + */
23 +import { Tab, TabItem } from 'vux'
24 +
25 +export default {
26 + components: { Tab, TabItem },
27 + props: ['list', 'default_selected'],
28 + data () {
29 + return {
30 + getBarWidth: function (index) {
31 + return (index + 1) * 40 + 'px'
32 + }
33 + }
34 + },
35 + methods: {
36 + onItemClick (index) {
37 + this.$emit('on-item-click', index)
38 + }
39 + }
40 +}
41 +</script>
42 +
43 +<style lang="less" scoped>
44 +@import '~vux/src/styles/1px.less';
45 +@import '~vux/src/styles/center.less';
46 +
47 +.vux-tab .vux-tab-item {
48 + background: none;
49 +}
50 +.vux-1px-r:after {
51 + height: 50%;
52 + top: 30%;
53 +}
54 +
55 +.active {
56 + color: #8da9cf !important;
57 + border-color: #8da9cf!important;
58 +}
59 +
60 +.tab-wrapper {
61 + padding: 1rem 1rem 0 1rem;
62 + .tab-content {
63 + border-top: 1px solid #dddddf;
64 + border-left: 1px solid #dddddf;
65 + border-right: 1px solid #dddddf;
66 + }
67 +}
68 +</style>
1 +<template>
2 + <div>
3 + <div class="title">
4 + <p>{{text}}</p>
5 + <p class="rightText" v-if="pShow" @click="topClick">{{rightText}}</p>
6 + </div>
7 + </div>
8 +</template>
9 +<script>
10 +export default {
11 + props: ['text', 'pShow', 'rightText'],
12 + data () {
13 + return {}
14 + },
15 + methods: {
16 + topClick () {
17 + this.$emit('topClick')
18 + }
19 + }
20 +}
21 +</script>
22 +
23 +<style lang="less" scoped>
24 + .title {
25 + width: 100%;
26 + height: 44px;
27 + background-color: #333;
28 + position: fixed;
29 + top: 0;
30 + left: 0;
31 + color: #fff;
32 + font-size: 16px;
33 + // line-height: 44px;
34 + text-align: center;
35 + z-index: 10;
36 + display: flex;
37 + align-items: center;
38 + &>p:first-child {
39 + line-height: 20px;
40 + flex: 1;
41 + }
42 + .rightText {
43 + position: absolute;
44 + top: 0;
45 + right: 20px;
46 + line-height: 44px;
47 + }
48 + }
49 +</style>
50 +
1 +<template>
2 + <div>
3 + <div v-show="multiple">
4 + <label for="file">+</label>
5 + <img v-show="multiple && imgShow" :src="img" alt="">
6 + <input id="file" type="file" multiple @change="selectImg">
7 + </div>
8 + <div v-show="!multiple">
9 + <label for="file1">+</label>
10 + <input id="file1" type="file" @change="selectImg">
11 + </div>
12 + </div>
13 +</template>
14 +<script>
15 + export default {
16 + props: {
17 + multiple: {
18 + type: Boolean,
19 + default: false
20 + },
21 + action: {
22 + type: String,
23 + default: ''
24 + },
25 + img: {
26 + type: String,
27 + default: ''
28 + }
29 + },
30 + data () {
31 + return {
32 + imgShow: false
33 + }
34 + },
35 + mounted () {
36 + console.warn(this.action)
37 + },
38 + methods: {
39 + selectImg (file) {
40 + console.warn(file)
41 + let formData = new FormData()
42 + formData.append('file', file.target.files[0])
43 + formData.append('type', 'test')
44 + this.$vux.loading.show({
45 + text: '正在上传'
46 + })
47 + axios.post(this.action, formData)
48 + .then((res) => {
49 + console.warn(res)
50 + this.imgShow = true;
51 + this.$vux.loading.hide()
52 + this.$emit('success', res.data)
53 + })
54 + }
55 + }
56 + }
57 +</script>
58 +<style lang="less" scoped>
59 + div {
60 + margin-top: 10px;
61 + }
62 + label {
63 + display: inline-block;
64 + width: 48px;
65 + height: 48px;
66 + border: 1px solid #d6d7dc;
67 + text-align: center;
68 + line-height: 46px;
69 + color: #d6d7dc;
70 + font-size: 42px;
71 + cursor: pointer;
72 + vertical-align: top;
73 + }
74 + img {
75 + width: 50px;
76 + height: 50px;
77 + }
78 + input[type="file"] {
79 + display: none;
80 + }
81 +</style>
1 +<template>
2 + <div class="vux-x-input weui-cell">
3 + <div class="weui-cell__bd weui-cell__primary">
4 + <input class="weui-input" style="text-align: center;" type="number" v-on="listeners" v-model="val" ref="input" :placeholder="placeholder" :disabled="disabled" @focus="onFocus">
5 + </div>
6 + </div>
7 +</template>
8 +
9 +<script type="text/ecmascript-6">
10 +export default {
11 + mounted () {
12 + this.updateValue(this.value)
13 + },
14 + name: 'vue-pattern-input',
15 + props: {
16 + value: {
17 + required: true,
18 + default: '',
19 + type: [Number, String]
20 + },
21 + regExp: {
22 + type: RegExp,
23 + default: null
24 + },
25 + replacement: {
26 + type: String,
27 + default: ''
28 + },
29 + placeholder: {
30 + type: String,
31 + default: ''
32 + },
33 + disabled: {
34 + type: Boolean,
35 + default: false
36 + }
37 + },
38 + data () {
39 + return {
40 + val: '',
41 + tmp: ''
42 + }
43 + },
44 + computed: {
45 + listeners () {
46 + const listeners = {}
47 +
48 + Object.keys(this.$listeners).forEach(fnName => {
49 + listeners[fnName] = (e) => {
50 + let val = e.target.value !== '' ? e.target.value : e.data
51 + // console.warn(val);
52 + this.$listeners[fnName](val)
53 + }
54 + })
55 +
56 + listeners.input = (e) => {
57 + let val = e.target.value !== '' ? e.target.value : e.data
58 + // console.warn(val);
59 + this.updateValue(val)
60 + }
61 +
62 + return listeners
63 + }
64 + },
65 + methods: {
66 + // format the value of input
67 + formatValue (val) {
68 + let formattedValue = ''
69 + // const formattedValue = val.toString().replace(this.regExp, this.replacement)
70 + val = _.isNull(val) ? '' : val
71 + if (this.regExp.test(val.toString())) {
72 + formattedValue = val.toString();
73 + this.tmp = val.toString()
74 + } else {
75 + formattedValue = this.tmp ? this.tmp : ' '
76 + }
77 +
78 + return formattedValue
79 + },
80 +
81 + // update the value of input
82 + updateValue (val) {
83 + const formattedValue = this.formatValue(val)
84 +
85 + this.val = formattedValue
86 + this.emitInput(formattedValue)
87 + this.emitChange(formattedValue)
88 + },
89 +
90 + // emit input event
91 + emitInput (val) {
92 + this.$emit('input', val)
93 + },
94 +
95 + // emit change event
96 + emitChange () {
97 + this.$emit('change', this.val)
98 + },
99 + onFocus (e) {
100 + this.$emit('on-focus', e);
101 + }
102 + },
103 + watch: {
104 + // watch value prop
105 + value (val) {
106 + if (val !== this.val) {
107 + this.updateValue(val)
108 + }
109 + }
110 + }
111 +}
112 +</script>
113 +
114 +<style lang="less">
115 + .vux-x-input.weui-cell {
116 + border: 1px solid #eee;
117 + padding: 0;
118 + border-radius: .2rem;
119 + }
120 +
121 + .weui-cell__bd {
122 + -ms-flex: 1;
123 + flex: 1;
124 + }
125 +
126 + .weui-input {
127 + width: 100%;
128 + border: 0;
129 + outline: 0;
130 + -webkit-appearance: none;
131 + background-color: transparent;
132 + font-size: inherit;
133 + color: inherit;
134 + height: 1.41176471em;
135 + line-height: 1.41176471;
136 + }
137 +</style>
1 +/* jshint esversion: 6 */
2 +import axios from 'axios'
3 +import router from './router'
4 +
5 +// 请求拦截器
6 +axios.interceptors.request.use(
7 + config => {
8 + // 发送请求前
9 + return config;
10 + },
11 + error => {
12 + // 请求错误处理
13 + return Promise.reject(error);
14 + })
15 +
16 +// 响应拦截器
17 +axios.interceptors.response.use(
18 + response => {
19 + return response;
20 + },
21 + error => {
22 + if (error.response) {
23 + switch (error.response.status) {
24 + case 401:
25 + router.replace({
26 + path: '/'
27 + })
28 + break;
29 + case 404:
30 + router.replace({
31 + path: '/'
32 + })
33 + break;
34 + }
35 + }
36 + return Promise.reject(error.response.data);
37 + })
38 +
39 +export default axios;
1 +// 多页面测试入口文件
2 +import Vue from 'vue'
3 +import Vuex from 'vuex'
4 +import store from './vuex/store'
5 +import router from './router'
6 +import VueRouter from 'vue-router'
7 +import axios from './http'
8 +import login from './login.vue'
9 +import { sync } from 'vuex-router-sync'
10 +import FastClick from 'fastclick'
11 +import { WechatPlugin, LoadingPlugin, ToastPlugin, ConfirmPlugin, TransferDom, AlertPlugin } from 'vux'
12 +// import 'font-awesome/css/font-awesome.css'
13 +
14 +sync(store, router)
15 +Vue.use(VueRouter)
16 +Vue.use(Vuex)
17 +Vue.use(WechatPlugin)
18 +Vue.use(LoadingPlugin)
19 +Vue.use(ToastPlugin)
20 +Vue.use(ConfirmPlugin)
21 +Vue.use(AlertPlugin)
22 +Vue.directive('transfer-dom', TransferDom)
23 +
24 +Vue.config.productionTip = false
25 +Vue.prototype.method = function () {}
26 +
27 +FastClick.attach(document.body)
28 +
29 +new Vue({
30 + el: '#login',
31 + store,
32 + router,
33 + axios,
34 + render: h => h(login)
35 +})
1 +<template lang="html">
2 + <div id="login" style="height:100%;">
3 + <x-header
4 + :left-options="{showBack: false}"
5 + :title="title">
6 + </x-header>
7 + <router-view style="margin-top: 3rem"></router-view>
8 + </div>
9 +</template>
10 +
11 +<script>
12 +import { XHeader } from 'vux'
13 +import { mapState } from 'vuex'
14 +export default {
15 + components: { XHeader },
16 + data () {
17 + return {
18 + isIndex: true,
19 + showMore: true
20 + }
21 + },
22 + computed: {
23 + ...mapState({
24 + title: state => state.title
25 + })
26 + },
27 + watch: {
28 + $route: 'fetchData'
29 + },
30 + mounted () {
31 + },
32 + methods: {
33 + fetchData () {
34 + if (this.$route.meta.isIndex) {
35 + this.isIndex = true
36 + } else {
37 + this.isIndex = false
38 + }
39 + }
40 + }
41 +}
42 +</script>
43 +
44 +<style lang="less">
45 + @import '~vux/src/styles/reset.less';
46 + @import '~vux/src/styles/1px.less';
47 + @import '~vux/src/styles/close.less';
48 + html, body {
49 + font-family: '微软雅黑', Microsoft YaHei;
50 + height: 100%;
51 + width: 100%;
52 + overflow-x: hidden;
53 + background-color: #F0EFF5;
54 + #login {
55 + .vux-header {
56 + width: 100%;
57 + position: absolute;
58 + left: 0;
59 + top: 0;
60 + z-index: 100;
61 + background: #333;
62 + .vux-header-title {
63 + color: #fff;
64 + }
65 + }
66 + }
67 + }
68 +</style>
1 +export default [
2 + {
3 + path: '/',
4 + name: '登录',
5 + component: r => {
6 + require(['./views/login'], r)
7 + }
8 + },
9 + {
10 + path: '/function_list',
11 + name: '功能列表',
12 + component: r => {
13 + require(['./views/function_list'], r)
14 + }
15 + }
16 +]
1 +import Vue from 'vue'
2 +import VueRouter from 'vue-router'
3 +import ConfigRouter from './route.js'
4 +// import NProgress from 'nprogress'
5 +// import 'nprogress/nprogress.css'
6 +import store from './vuex/store'
7 +
8 +Vue.use(VueRouter)
9 +// NProgress.configure({ minimum: 0.1, easing: 'ease', speed: 500 });
10 +
11 +const router = new VueRouter({
12 + history: false,
13 + hashbang: true,
14 + base: __dirname,
15 + routes: ConfigRouter
16 +})
17 +
18 +router.beforeEach((to, from, next) => {
19 + store.commit('updateLoadingStatus', true)
20 + next()
21 +})
22 +
23 +router.afterEach((to, from, next) => {
24 + store.commit('updateLoadingStatus', false)
25 +})
26 +
27 +export default router
1 +function initFontSize (baseFontSize, baseWidth) {
2 + let clientWidth = document.documentElement.clientWidth || window.innerWidth()
3 + let size = Math.floor(clientWidth / baseWidth * baseFontSize)
4 + document.querySelector('html').style.fontSize = size + 'px'
5 +}
6 +initFontSize(100, 1080)
7 +window.onresize = function () {
8 + initFontSize(100, 1080)
9 +}
1 +<template>
2 + <div class="function_list">
3 + <x-header title="功能列表" :left-options="{showBack: false}"></x-header>
4 + <ul class="list">
5 + <li v-for="(item, index) in fun_list" :key="index" @click="goHandler(index)">
6 + <span>{{item.name}}</span>
7 + </li>
8 + </ul>
9 + <bottomBtn :btnText="'返回登录'" @btnClick="btnClick"></bottomBtn>
10 + </div>
11 +</template>
12 +
13 +<script>
14 +import { XHeader } from 'vux'
15 +import bottomBtn from 'components/bottomBtn/index'
16 +export default {
17 + components: { XHeader, bottomBtn },
18 + beforeRouteEnter (to, from, next) {
19 + function getFunctionList () {
20 + return axios.get('b/auth/getFunctions')
21 + }
22 + axios.all([getFunctionList()])
23 + .then(axios.spread(fun => {
24 + to.params.fun = fun.data.content
25 + console.warn(fun.data.content);
26 + next();
27 + }))
28 + },
29 + data () {
30 + return {
31 + fun_list: this.$route.params.fun
32 + }
33 + },
34 + mounted () {
35 + let lis = document.getElementsByTagName('li');
36 + for (let i = 0; i < lis.length; i++) {
37 + lis[i].style.height = lis[i].offsetWidth + 'px';
38 + }
39 + },
40 + methods: {
41 + goHandler (i) {
42 + let url = this.$route.params.fun[i].boh_url.split('boh');
43 + let loc = window.location;
44 + console.warn(loc);
45 + if (loc.hostname === 'localhost') {
46 + let res = url[1] ? loc.origin + url[1] : url[0];
47 + window.location.href = res;
48 + } else {
49 + let host = loc.hostname;
50 + if (!isNaN(Number(host.split('.')[0]))) {
51 + let res = url[1] ? loc.origin + url[1] : url[0];
52 + window.location.href = res;
53 + } else {
54 + window.location.href = this.$route.params.fun[i].boh_url;
55 + }
56 + }
57 + },
58 + btnClick () {
59 + this.$router.push('/');
60 + }
61 + }
62 +}
63 +</script>
64 +
65 +<style lang="less" scoped>
66 +.function_list {
67 + .list {
68 + margin: 0;
69 + margin-top: 3rem;
70 + list-style: none;
71 + li {
72 + float: left;
73 + text-align: center;
74 + border: 1px solid #ccc;
75 + width: 32.5%;
76 + background: #fff;
77 + position: relative;
78 + span {
79 + position: absolute;
80 + width: 100%;
81 + top: 50%;
82 + left: 50%;
83 + transform: translate(-50%, -50%);
84 + }
85 + }
86 + &:after {
87 + display: block;
88 + content: '';
89 + clear: both;
90 + }
91 + }
92 +}
93 +</style>
1 +<template>
2 + <div class="login">
3 + <p>
4 + <span>用户名</span>
5 + <input v-model="login_data.login_code" @keyup.enter="loginHandler"></input>
6 + </p>
7 + <p>
8 + <span>密码</span>
9 + <input type="password" v-model="login_data.login_password" @keyup.enter="loginHandler"></input>
10 + </p>
11 + <el-button type="primary" @click="loginHandler">登录</el-button>
12 + </div>
13 +</template>
14 +
15 +<script>
16 +export default {
17 + data () {
18 + return {
19 + login_data: {
20 + login_code: '',
21 + login_password: '1'
22 + }
23 + }
24 + },
25 + methods: {
26 + loginHandler () {
27 + if (this.login_data.login_code === '') {
28 + this.$vux.toast.show({
29 + type: 'warn',
30 + text: '请输入账号！'
31 + })
32 + return;
33 + }
34 + axios.post('b/auth/syslogin', this.login_data)
35 + .then(res => {
36 + if (res.data.ret === 'OK') {
37 + let user = res.data.content.user;
38 + window.localStorage['user_name'] = user.user_name
39 + window.localStorage['role'] = user.role
40 + window.localStorage['user_id'] = user.user_id
41 + if (user.role === 'PB') {
42 + window.localStorage['prov_id'] = user.parent_id;
43 + }
44 + if (user.role === 'FB') {
45 + window.localStorage['fran_id'] = user.parent_id;
46 + }
47 + if (user.role === 'SM' || user.role === 'SE') {
48 + window.localStorage['store_id'] = user.parent_id;
49 + }
50 + this.$router.push('./function_list')
51 + } else {
52 + this.$vux.toast.text(res.data.msg);
53 + }
54 + })
55 + .catch(err => {
56 + console.error(err);
57 + })
58 + }
59 + }
60 +}
61 +</script>
62 +
63 +<style lang="less" scoped>
64 +.login {
65 + position: absolute;
66 + top: 25%;
67 + left: 50%;
68 + transform: translateX(-50%);
69 + padding: 1.8rem 2.5rem;
70 + width: 15rem;
71 + button {
72 + margin-top: 1.2rem;
73 + position: absolute;
74 + right: 2.5rem;
75 + }
76 + input {
77 + display: block;
78 + width: 95%;
79 + padding: 0.8rem 0.4rem;
80 + background: #fff;
81 + border: 1px solid #d6d7dc;
82 + font-size: 0.95rem;
83 + }
84 +}
85 +</style>
1 +export const increment = ({ commit }) => {
2 + commit('INCREMENT')
3 +}
4 +export const decrement = ({ commit }) => {
5 + commit('DECREMENT')
6 +}
1 +export const getCount = state => {
2 + return state.count
3 +}
1 +import Vue from 'vue'
2 +import Vuex from 'vuex'
3 +import * as actions from './actions'
4 +import * as getters from './getters'
5 +
6 +Vue.use(Vuex)
7 +
8 +// 应用初始状态
9 +const state = {
10 + isLoading: false,
11 + title: '登录',
12 + form: '',
13 + direction: 'forward'
14 +}
15 +
16 +// 定义所需的 mutations
17 +const mutations = {
18 + updateLoadingStatus (state, status) {
19 + state.isLoading = status
20 + },
21 + changeTitle (state, title) {
22 + state.title = title
23 + },
24 + savedForm (state, form) {
25 + state.form = form
26 + },
27 + UPDATE_DIRECTION (state, direction) {
28 + state.direction = direction
29 + }
30 +}
31 +
32 +// 创建 store 实例
33 +export default new Vuex.Store({
34 + actions,
35 + getters,
36 + state,
37 + mutations
38 +})
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home">
3 - <!-- <x-header></x-header> --> 3 + <x-header></x-header>
4 <img alt="Vue logo" src="../assets/logo.png"> 4 <img alt="Vue logo" src="../assets/logo.png">
5 <HelloWorld msg="Welcome to Your Vue.js App"/> 5 <HelloWorld msg="Welcome to Your Vue.js App"/>
6 </div> 6 </div>
...@@ -9,23 +9,22 @@ ...@@ -9,23 +9,22 @@
9 <script> 9 <script>
10 // @ is an alias to /src 10 // @ is an alias to /src
11 import HelloWorld from '@/components/HelloWorld.vue' 11 import HelloWorld from '@/components/HelloWorld.vue'
12 -// import { XHeader } from 'vux' 12 +import { XHeader } from 'vux'
13 13
14 export default { 14 export default {
15 name: 'home', 15 name: 'home',
16 components: { 16 components: {
17 - HelloWorld 17 + HelloWorld,
18 - // XHeader 18 + XHeader
19 }, 19 },
20 mounted () { 20 mounted () {
21 - console.warn(axios); 21 + axios.get('b/auth/getFunctions')
22 - // axios.get('b/auth/getFunctions') 22 + .then(res => {
23 - // .then(res => { 23 + console.warn(res);
24 - // console.warn(res); 24 + })
25 - // }) 25 + .catch(error => {
26 - // .catch(error => { 26 + console.error(error);
27 - // console.error(error); 27 + });
28 - // });
29 } 28 }
30 } 29 }
31 </script> 30 </script>
......
1 /* jshint esversion: 6 */ 1 /* jshint esversion: 6 */
2 const vuxLoader = require('vux-loader'); 2 const vuxLoader = require('vux-loader');
3 +const path = require('path');
3 const webpack = require('webpack'); 4 const webpack = require('webpack');
4 -// const merge = require('webpack-merge');
5 5
6 module.exports = { 6 module.exports = {
7 // 基本路径 7 // 基本路径
...@@ -28,11 +28,20 @@ module.exports = { ...@@ -28,11 +28,20 @@ module.exports = {
28 // 提取出来的通用 chunk 和 vendor chunk。 28 // 提取出来的通用 chunk 和 vendor chunk。
29 chunks: ['chunk-vendors', 'chunk-common', 'index'] 29 chunks: ['chunk-vendors', 'chunk-common', 'index']
30 }, 30 },
31 - // 当使用只有入口的字符串格式时， 31 + login: {
32 - // 模板会被推导为 `public/subpage.html` 32 + // page 的入口
33 - // 并且如果找不到的话，就回退到 `public/index.html`。 33 + entry: 'src/multiPages/login/login.js',
34 - // 输出文件名会被推导为 `subpage.html`。 34 + // 模板来源
35 - subpage: 'src/subpage/main.js' 35 + template: 'public/login.html',
36 + // 在 dist/index.html 的输出
37 + filename: 'login.html',
38 + // 当使用 title 选项时，
39 + // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
40 + title: '登录页',
41 + // 在这个页面中包含的块，默认情况下会包含
42 + // 提取出来的通用 chunk 和 vendor chunk。
43 + chunks: ['chunk-vendors', 'chunk-common', 'login']
44 + }
36 }, 45 },
37 // eslint-loader 是否在保存的时候检查 46 // eslint-loader 是否在保存的时候检查
38 lintOnSave: 'error', 47 lintOnSave: 'error',
...@@ -57,6 +66,12 @@ module.exports = { ...@@ -57,6 +66,12 @@ module.exports = {
57 'moment': 'moment' 66 'moment': 'moment'
58 }) 67 })
59 ); 68 );
69 + config.resolve.extensions.push('.less');
70 + config.resolve.extensions.push('.css');
71 + //
72 + config.resolve.alias.src = path.resolve(__dirname, './src/src');
73 + config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
74 + config.resolve.alias.components = path.resolve(__dirname, './src/components');
60 if (process.env.NODE_ENV === 'production') { 75 if (process.env.NODE_ENV === 'production') {
61 // 为生产环境修改配置... 76 // 为生产环境修改配置...
62 } else { 77 } else {
...@@ -114,7 +129,7 @@ module.exports = { ...@@ -114,7 +129,7 @@ module.exports = {
114 }, 129 },
115 before: app => {}, 130 before: app => {},
116 overlay: { 131 overlay: {
117 - warnings: true, 132 + warnings: false,
118 errors: true 133 errors: true
119 } 134 }
120 }, 135 },
......