From 6613785ce4eb0823cd5442ed0bb0987b0eae2069 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 11 五月 2024 13:08:28 +0800
Subject: [PATCH] 1.时间组件DateType封装完成
---
src/components/DateType/index.vue | 357 ++++++++++++++++++++++++++++++++
src/views/workOrder/produceOrderList.vue | 286 +------------------------
2 files changed, 377 insertions(+), 266 deletions(-)
diff --git a/src/components/DateType/index.vue b/src/components/DateType/index.vue
new file mode 100644
index 0000000..fae4de8
--- /dev/null
+++ b/src/components/DateType/index.vue
@@ -0,0 +1,357 @@
+<template>
+ <div>
+ <div
+ v-show="isExpandForm"
+ style="display:flex;justify-content: center;align-items: center;position: relative"
+ >
+
+ <el-popover
+ v-model="cycleTimePopoverIsShow"
+ placement="bottom"
+ width="500"
+ trigger="hover"
+ @show="cycleTimePopoverIsShow=true"
+ >
+ <div class="popoverList">
+ <div class="popoverListItem">
+ <div style="width: 40px">鍛�</div>
+ <el-button
+ :class="cycleTime===1?'selectButton':''"
+ @click="cycleTimeClick(1)"
+ >鏈� 鍛�
+ </el-button>
+ <el-button
+ :class="cycleTime===2?'selectButton':''"
+ @click="cycleTimeClick(2)"
+ >涓� 鍛�
+ </el-button>
+ </div>
+ <div class="popoverListItem">
+ <div style="width: 40px">鏈�</div>
+ <el-button
+ :class="cycleTime===3?'selectButton':''"
+ @click="cycleTimeClick(3)"
+ >鏈� 鏈�
+ </el-button>
+ <el-button
+ :class="cycleTime===4?'selectButton':''"
+ @click="cycleTimeClick(4)"
+ >涓� 鏈�
+ </el-button>
+ </div>
+ <div class="popoverListItem">
+ <div style="width: 40px">瀛�</div>
+ <el-button
+ :class="cycleTime===5?'selectButton':''"
+ @click="cycleTimeClick(5)"
+ >鏈� 瀛�
+ </el-button>
+ <el-button
+ :class="cycleTime===6?'selectButton':''"
+ @click="cycleTimeClick(6)"
+ >涓� 瀛�
+ </el-button>
+ </div>
+ <div class="popoverListItem">
+ <div style="width: 40px">骞�</div>
+ <el-button
+ :class="cycleTime===7?'selectButton':''"
+ @click="cycleTimeClick(7)"
+ >鏈� 骞�
+ </el-button>
+ <el-button
+ :class="cycleTime===8?'selectButton':''"
+ @click="cycleTimeClick(8)"
+ >涓� 骞�
+ </el-button>
+ </div>
+ <div class="popoverListItem">
+ <div style="width: 40px">鍏朵粬</div>
+ <el-button
+ :class="cycleTime===9?'selectButton':''"
+ @click="cycleTimeClick(9)"
+ >杩�3澶�
+ </el-button>
+ <el-button
+ :class="cycleTime===10?'selectButton':''"
+ @click="cycleTimeClick(10)"
+ >杩�7澶�
+ </el-button>
+ <el-button
+ :class="cycleTime===11?'selectButton':''"
+ @click="cycleTimeClick(11)"
+ >杩�14澶�
+ </el-button>
+ <el-button
+ :class="cycleTime===12?'selectButton':''"
+ @click="cycleTimeClick(12)"
+ >浠� 澶�
+ </el-button>
+ <el-button
+ :class="cycleTime===13?'selectButton':''"
+ @click="cycleTimeClick(13)"
+ >鏄� 澶�
+ </el-button>
+ </div>
+
+ </div>
+
+ <div
+ slot="reference"
+ style="width:15px;height:15px;background:transparent;
+ cursor: pointer;position:absolute;z-index: 100;left: 110px;top:13px"
+ />
+
+ </el-popover>
+
+ <el-popover
+ placement="bottom"
+ width="100"
+ trigger="hover"
+ :value="datatypePopoverIsShow"
+ @show="datatypePopoverIsShow=true"
+ >
+ <div class="popoverList">
+ <div class="popoverListItem2">
+ <el-button
+ :class="datatype==='PS'?'selectButton':''"
+ @click="datatypeClick('PS')"
+ >棰勮寮�宸ユ棩鏈�
+ </el-button>
+ </div>
+ <div class="popoverListItem2">
+ <el-button
+ :class="datatype==='PE'?'selectButton':''"
+ @click="datatypeClick('PE')"
+ >棰勮瀹屽伐鏃ユ湡
+ </el-button>
+ </div>
+ <div class="popoverListItem2">
+ <el-button
+ :class="datatype==='ED'?'selectButton':''"
+ @click="datatypeClick('ED')"
+ >棰勮浜や粯鏃ユ湡
+ </el-button>
+ </div>
+ </div>
+
+ <div
+ slot="reference"
+ style="color: #a7a7a7;font-weight: 600; font-size:14px;width: 100px;text-align: center;
+ font-family:'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif';"
+ > {{ datatype === 'PS' ? '棰勮寮�宸ユ棩鏈�' : datatype === 'PE' ? '棰勮瀹屽伐鏃ユ湡' : '棰勮浜や粯鏃ユ湡' }}
+ </div>
+
+ </el-popover>
+
+ <el-date-picker
+ v-model="timeValue"
+ type="daterange"
+ range-separator="~"
+ class="timeMini"
+ size="mini"
+ style="width: 200px;display: flex;line-height: 34px;height: 34px;margin-right: 10px"
+ :clearable="false"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="yyyy-MM-dd"
+ @change="pickerChange"
+ />
+
+ </div>
+
+ </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+export default {
+ name: 'Index',
+ props: {
+ isExpandForm: {
+ type: Boolean,
+ default() {
+ return false
+ }
+ }
+ // cycleTimePopoverIsShow: {
+ // type: Boolean,
+ // default() {
+ // return false
+ // }
+ // },
+ // cycleTime: {
+ // type: Number,
+ // default() {
+ // return 0
+ // }
+ // },
+ // datatypePopoverIsShow: {
+ // type: Boolean,
+ // default() {
+ // return false
+ // }
+ // },
+ // datatype: {
+ // type: String,
+ // default() {
+ // return 'ED'
+ // }
+ // }
+ },
+ data() {
+ return {
+ timeValue: [],
+ cycleTimePopoverIsShow: false,
+ datatype: 'ED',
+ cycleTime: 0,
+ datatypePopoverIsShow: false
+ }
+ },
+ methods: {
+ cycleTimeClick(value) {
+ this.cycleTimePopoverIsShow = false
+
+ const date = new Date()
+ const cWeek = moment(date).format('E')
+ let newDate = []
+ switch (value) {
+ case 1:// 鏈懆
+ newDate = [
+ moment(date).subtract(Number(cWeek) - 1, 'days').format('YYYY-MM-DD'),
+ moment(moment().week(moment().week()).endOf('week').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+ case 2:// 涓婂懆
+ newDate = [
+ moment(moment().add(-13, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().add(-6, 'days').startOf('day').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+
+ case 3:// 鏈湀
+ newDate = [
+ moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+
+ case 4:// 涓婃湀
+ newDate = [
+ moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().month(moment().month()).startOf('month').valueOf()).add(-1, 'days').format('YYYY-MM-DD')
+ ]
+ break
+
+ case 5:// 鏈搴�
+ newDate = [
+ moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+
+ case 6:// 涓婂搴�
+ newDate = [
+ moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+
+ case 7:// 鏈勾
+ newDate = [
+ moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().year(moment().year()).endOf('year').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+
+ case 8:// 鍘诲勾
+ newDate = [
+ moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+
+ case 9:// 杩�3澶�
+ newDate = [
+ moment(moment().add(-2, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+ case 10:// 杩�7澶�
+ newDate = [
+ moment(moment().add(-6, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+ case 11:// 杩�14澶�
+ newDate = [
+ moment(moment().add(-13, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+ case 12:// 浠婂ぉ
+ newDate = [
+ moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+ case 13:// 鏄ㄥぉ
+ newDate = [
+ moment(moment().add(-1, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
+ moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
+ ]
+ break
+ }
+
+ this.timeValue = newDate
+ this.cycleTime = value
+
+ this.$emit('cycleTimeChange', this.timeValue)
+ },
+
+ datatypeClick(value) {
+ this.datatype = value
+ this.datatypePopoverIsShow = false
+ this.$emit('DateTypeChange', this.datatype)
+ },
+
+ pickerChange(value) {
+ this.cycleTime = null
+ this.$emit('cycleTimeChange', value)
+ },
+
+ clearValue() {
+ this.cycleTime = null
+ this.timeValue = []
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+.popoverList {
+ display: flex;
+ flex-direction: column;
+}
+
+.popoverListItem {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.popoverListItem2 {
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.selectButton {
+ color: #42B983;
+}
+
+</style>
diff --git a/src/views/workOrder/produceOrderList.vue b/src/views/workOrder/produceOrderList.vue
index f6009d5..e8e656e 100644
--- a/src/views/workOrder/produceOrderList.vue
+++ b/src/views/workOrder/produceOrderList.vue
@@ -81,148 +81,13 @@
<el-input v-model="form.partspec" style="width: 200px" placeholder="璇疯緭鍏�" />
</el-form-item>
- <div v-show="isExpandForm" style="display:flex;justify-content: center;align-items: center;position: relative">
-
- <el-popover
- v-model="cycleTimePopoverIsShow"
- placement="bottom"
- width="500"
- trigger="hover"
- @show="cycleTimePopoverIsShow=true"
- >
- <div class="popoverList">
- <div class="popoverListItem">
- <div style="width: 40px">鍛�</div>
- <el-button
- :class="cycleTime===1?'selectButton':''"
- @click="cycleTimeClick(1)"
- >鏈� 鍛�</el-button>
- <el-button
- :class="cycleTime===2?'selectButton':''"
- @click="cycleTimeClick(2)"
- >涓� 鍛�</el-button>
- </div>
- <div class="popoverListItem">
- <div style="width: 40px">鏈�</div>
- <el-button
- :class="cycleTime===3?'selectButton':''"
- @click="cycleTimeClick(3)"
- >鏈� 鏈�</el-button>
- <el-button
- :class="cycleTime===4?'selectButton':''"
- @click="cycleTimeClick(4)"
- >涓� 鏈�</el-button>
- </div>
- <div class="popoverListItem">
- <div style="width: 40px">瀛�</div>
- <el-button
- :class="cycleTime===5?'selectButton':''"
- @click="cycleTimeClick(5)"
- >鏈� 瀛�</el-button>
- <el-button
- :class="cycleTime===6?'selectButton':''"
- @click="cycleTimeClick(6)"
- >涓� 瀛�</el-button>
- </div>
- <div class="popoverListItem">
- <div style="width: 40px">骞�</div>
- <el-button
- :class="cycleTime===7?'selectButton':''"
- @click="cycleTimeClick(7)"
- >鏈� 骞�</el-button>
- <el-button
- :class="cycleTime===8?'selectButton':''"
- @click="cycleTimeClick(8)"
- >涓� 骞�</el-button>
- </div>
- <div class="popoverListItem">
- <div style="width: 40px">鍏朵粬</div>
- <el-button
- :class="cycleTime===9?'selectButton':''"
- @click="cycleTimeClick(9)"
- >杩�3澶�</el-button>
- <el-button
- :class="cycleTime===10?'selectButton':''"
- @click="cycleTimeClick(10)"
- >杩�7澶�</el-button>
- <el-button
- :class="cycleTime===11?'selectButton':''"
- @click="cycleTimeClick(11)"
- >杩�14澶�</el-button>
- <el-button
- :class="cycleTime===12?'selectButton':''"
- @click="cycleTimeClick(12)"
- >浠� 澶�</el-button>
- <el-button
- :class="cycleTime===13?'selectButton':''"
- @click="cycleTimeClick(13)"
- >鏄� 澶�</el-button>
- </div>
-
- </div>
-
- <div
- slot="reference"
- style="width:15px;height:15px;background:transparent;
- cursor: pointer;position:absolute;z-index: 100;left: 110px;top:13px"
- />
-
- </el-popover>
-
- <el-popover
- placement="bottom"
- width="100"
- trigger="hover"
- :value="datatypePopoverIsShow"
- @show="datatypePopoverIsShow=true"
- >
- <div class="popoverList">
- <div class="popoverListItem2">
- <el-button
- :class="form.datatype==='PS'?'selectButton':''"
- @click="form.datatype='PS';datatypePopoverIsShow=false"
- >棰勮寮�宸ユ棩鏈�</el-button>
- </div>
- <div class="popoverListItem2">
- <el-button
- :class="form.datatype==='PE'?'selectButton':''"
- @click="form.datatype='PE';datatypePopoverIsShow=false"
- >棰勮瀹屽伐鏃ユ湡</el-button>
- </div>
- <div class="popoverListItem2">
- <el-button
- :class="form.datatype==='ED'?'selectButton':''"
- @click="form.datatype='ED';datatypePopoverIsShow=false"
- >棰勮浜や粯鏃ユ湡</el-button>
- </div>
- </div>
-
- <div
- slot="reference"
- style="color: #a7a7a7;
- font-weight: 600;
- font-family:'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif';
- font-size:14px;width: 100px;text-align: center"
- > {{ form.datatype==='PS'? '棰勮寮�宸ユ棩鏈�':form.datatype==='PE'?'棰勮瀹屽伐鏃ユ湡':'棰勮浜や粯鏃ユ湡' }}
- </div>
-
- </el-popover>
-
- <el-date-picker
- v-model="form.timeValue"
- type="daterange"
- range-separator="~"
- class="timeMini"
- size="mini"
- style="width: 200px;display: flex;line-height: 34px;height: 34px;margin-right: 10px"
- :clearable="false"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- value-format="yyyy-MM-dd"
- @change="pickerChange"
- />
- <!-- :picker-options="pickerOptions"-->
- </div>
+ <DateType
+ ref="DateTypeRef"
+ :is-expand-form="isExpandForm"
+ style="display:flex;justify-content: center;align-items: center;position: relative"
+ @DateTypeChange="DateTypeChange"
+ @cycleTimeChange="cycleTimeChange"
+ />
<!-- <el-form-item-->
<!-- v-show="isExpandForm"-->
@@ -677,12 +542,13 @@
import { SeaveSearchErpOrder } from '@/api/ErpSyncMes'
import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
import moment from 'moment'
+import DateType from '@/components/DateType'
const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
name: 'SCDD',
components: {
- Pagination
+ Pagination, DateType
},
directives: { elDragDialog, waves },
data() {
@@ -699,7 +565,7 @@
}
return {
mouseHoverType: 'mouseout',
- isExpandForm: false,
+ isExpandForm: true,
mainHeight: 0,
tableHeight: 0,
form: {
@@ -724,9 +590,7 @@
page: 1, // 绗嚑椤�
rows: 20 // 姣忛〉澶氬皯鏉�
},
- datatypePopoverIsShow: false,
- cycleTime: null, // 鏃堕棿鍛ㄦ湡
- cycleTimePopoverIsShow: false,
+
erporderstusArr: [
{ code: 'NEW', name: '鏂拌鍗�' },
{ code: 'CREATING', name: '閮ㄥ垎涓嬭揪' },
@@ -849,102 +713,12 @@
},
methods: {
- cycleTimeClick(value) {
- this.cycleTimePopoverIsShow = false
-
- const date = new Date()
- const cWeek = moment(date).format('E')
- let newDate = []
- switch (value) {
- case 1:// 鏈懆
- newDate = [
- moment(date).subtract(Number(cWeek) - 1, 'days').format('YYYY-MM-DD'),
- moment(moment().week(moment().week()).endOf('week').valueOf()).format('YYYY-MM-DD')
- ]
- break
- case 2:// 涓婂懆
- newDate = [
- moment(moment().add(-13, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
- moment(moment().add(-6, 'days').startOf('day').valueOf()).format('YYYY-MM-DD')
- ]
- break
-
- case 3:// 鏈湀
- newDate = [
- moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD'),
- moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD')
- ]
- break
-
- case 4:// 涓婃湀
- newDate = [
- moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD'),
- moment(moment().month(moment().month()).startOf('month').valueOf()).add(-1, 'days').format('YYYY-MM-DD')
- ]
- break
-
- case 5:// 鏈搴�
- newDate = [
- moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD'),
- moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD')
- ]
- break
-
- case 6:// 涓婂搴�
- newDate = [
- moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('YYYY-MM-DD'),
- moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('YYYY-MM-DD')
- ]
- break
-
- case 7:// 鏈勾
- newDate = [
- moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD'),
- moment(moment().year(moment().year()).endOf('year').valueOf()).format('YYYY-MM-DD')
- ]
- break
-
- case 8:// 鍘诲勾
- newDate = [
- moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD'),
- moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD')
- ]
- break
-
- case 9:// 杩�3澶�
- newDate = [
- moment(moment().add(-2, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
- moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
- ]
- break
- case 10:// 杩�7澶�
- newDate = [
- moment(moment().add(-6, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
- moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
- ]
- break
- case 11:// 杩�14澶�
- newDate = [
- moment(moment().add(-13, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
- moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
- ]
- break
- case 12:// 浠婂ぉ
- newDate = [
- moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD'),
- moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
- ]
- break
- case 13:// 鏄ㄥぉ
- newDate = [
- moment(moment().add(-1, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
- moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
- ]
- break
- }
-
- this.form.timeValue = newDate
- this.cycleTime = value
+ DateTypeChange(value) {
+ console.log('asd', value)
+ this.form.datatype = value
+ },
+ cycleTimeChange(val) {
+ this.form.timeValue = val
},
pickerChange(value) {
@@ -1059,6 +833,9 @@
this.form.timeValue = []
this.cycleTime = null
+
+ this.$refs.DateTypeRef.clearValue()
+
this.getErpOrderSearch()
},
// 鍗曢�夋閫変腑鑾峰彇褰撳墠琛屼俊鎭�
@@ -1303,29 +1080,6 @@
<!--鍏叡椤甸潰鏍峰紡-->
<style lang="scss" scoped>
$main_color: #42b983;
-
-.popoverList {
- display: flex;
- flex-direction: column;
-}
-
-.popoverListItem {
- height: 50px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-.popoverListItem2 {
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-.selectButton {
- color: #42B983;
-}
::v-deep .el-range__icon {
line-height: 28px !important;
--
Gitblit v1.9.3