Skip to content

T
TF-MOM-WEB
Commit 3a1c5d64 authored by xioln's avatar xioln
Browse files
Options

工厂日历和sqcdp维护

parent 93b2f455
Hide whitespace changes
Inline Side-by-side
Showing with 2192 additions and 1 deletion
applications/dee-mes/src/privateComponents/components/PurchasingWarehousingNewOrEdit/component/storageDetailsCreateCom.vue
View file @ 3a1c5d64
......@@ -1466,7 +1466,7 @@ export default {
`/ExtDxProcessResourceType/search`,
{
'pageFrom': 1,
'pageSize': 9999,
'pageSize': 100,
'searchItems': {
'children': [
{
......
applications/dee-mes/src/privateComponents/components/Sqcdp/components/calendar.vue 0 → 100644
View file @ 3a1c5d64
<template>
<!-- 日历 -->
<section class="sqcdp-calendar">
<div class="left">
<p class="title">
<span class="week">周一</span>
<span class="week">周二</span>
<span class="week">周三</span>
<span class="week">周四</span>
<span class="week">周五</span>
<span class="week">周六</span>
<span class="week">周日</span>
</p>
<div class="day" element-loading-spinner="el-loading-spinner">
<!-- 空格 -->
<div
v-for="(item, j) in enull"
v-show="enull > 0"
:key="item + '11'"
class="none"
:class="{ 'last-child': j + 1 === enull }"
/>
<!-- 几号 -->
<div
v-for="(item, i) in day"
:key="i"
class="day-item"
:class="{ brNone: (enull + i + 1 - 7) % 7 == 0 }"
>
<el-popover v-if="activeName === 'S'" trigger="hover" placement="top">
<div>
<h3 style="text-align: center; margin-bottom: 10px">备注</h3>
<el-input
v-model="item.smark"
style="width: 400px"
type="textarea"
:rows="3"
placeholder="请输入备注"
@blur="rmark(item)"
/>
</div>
<i slot="reference" class="el-icon-info" />
</el-popover>
<el-popover
v-else-if="activeName === 'Q'"
trigger="click"
placement="top"
>
<div>
<h3 style="text-align: center; margin-bottom: 10px">备注</h3>
<el-input
v-model="item.qmark"
style="width: 400px"
type="textarea"
placeholder="请输入备注"
:rows="3"
@blur="rmark(item)"
/>
</div>
<i slot="reference" class="el-icon-info" />
</el-popover>
<el-popover
v-else-if="activeName === 'C'"
trigger="hover"
placement="top"
>
<div>
<h3 style="text-align: center; margin-bottom: 10px">备注</h3>
<el-input
v-model="item.cmark"
style="width: 400px"
type="textarea"
:rows="3"
placeholder="请输入备注"
@blur="rmark(item)"
/>
</div>
<i slot="reference" class="el-icon-info" />
</el-popover>
<el-popover
v-else-if="activeName === 'D'"
trigger="hover"
placement="top"
>
<div>
<h3 style="text-align: center; margin-bottom: 10px">备注</h3>
<el-input
v-model="item.dmark"
style="width: 400px"
type="textarea"
:rows="3"
placeholder="请输入备注"
@blur="rmark(item)"
/>
</div>
<i slot="reference" class="el-icon-info" />
</el-popover>
<el-popover
v-else-if="activeName === 'P'"
trigger="hover"
placement="top"
>
<div>
<h3 style="text-align: center; margin-bottom: 10px">备注</h3>
<el-input
v-model="item.pmark"
style="width: 400px"
type="textarea"
:rows="3"
placeholder="请输入备注"
/>
</div>
<i slot="reference" class="el-icon-info" />
</el-popover>
<p class="smark">
{{ item.calendar }}
</p>
<div v-if="activeName === 'S'" class="classes">
风险
<el-select
v-model="item.srisk"
class="select"
:disabled="!unitNo"
:class="[
item.srisk === 'Yellow'
? 'yellow'
: '' || item.srisk === 'Red'
? 'red'
: '' || item.srisk === 'null'
? 'greenyellow'
: '',
]"
@change="selectClasses(item)"
>
<el-option
v-for="item in optionData"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
<div v-else-if="activeName === 'Q'" class="classes">
风险
<el-select
v-model="item.qrisk"
class="select"
:disabled="!unitNo"
:class="[
item.qrisk === 'Yellow'
? 'yellow'
: '' || item.qrisk === 'Red'
? 'red'
: '' || item.qrisk === 'null'
? 'greenyellow'
: '',
]"
@change="selectClasses(item)"
>
<el-option
v-for="item in optionData"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
<div v-else-if="activeName === 'C'" class="classes">
风险
<el-select
v-model="item.crisk"
class="select"
:disabled="!unitNo"
:class="[
item.crisk === 'Yellow'
? 'yellow'
: '' || item.crisk === 'Red'
? 'red'
: '' || item.crisk === 'null'
? 'greenyellow'
: '',
]"
@change="selectClasses(item)"
>
<el-option
v-for="item in optionData"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
<div v-else-if="activeName === 'D'" class="classes">
风险
<el-select
v-model="item.drisk"
class="select"
:disabled="!unitNo"
:class="[
item.drisk === 'Yellow'
? 'yellow'
: '' || item.drisk === 'Red'
? 'red'
: '' || item.drisk === 'null'
? 'greenyellow'
: '',
]"
@change="selectClasses(item)"
>
<el-option
v-for="item in optionData"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
<div v-else-if="activeName === 'P'" class="classes">
风险
<el-select
v-model="item.prisk"
class="select"
:disabled="!unitNo"
:class="[
item.prisk === 'Yellow'
? 'yellow'
: '' || item.prisk === 'Red'
? 'red'
: '' || item.prisk === 'null'
? 'greenyellow'
: '',
]"
@change="selectClasses(item)"
>
<el-option
v-for="item in optionData"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
</div>
</div>
<div v-if="day.length === 0" class="no-data">暂无数据</div>
</div>
<!-- 描述 -->
<div class="right">
<p v-for="item in descriptionRisk[activeName]" :key="item.id">
<span
:class="[
item.dictKey === 'Yellow'
? 'yellow'
: '' || item.dictKey === 'Red'
? 'red'
: '' || item.dictKey === 'null'
? 'greenyellow'
: '',
]"
/>{{ item.dictValue }}
</p>
</div>
</section>
</template>
<script>
// import { post } from '@/utils/http'
export default {
components: {},
props: {
month: {
type: Number,
default: () => null
},
year: {
type: String,
default: () => null
},
activeName: {
type: String,
default: () => null
}
},
data() {
return {
// 空格
enull: 0,
// 加载图标
loading: false,
// 日期
day: [],
// 风险下拉框
optionData: [],
descriptionRisk: {
S: [
{ id: 1, dictKey: 'Yellow', dictValue: '安全事故未消除' },
{ id: 2, dictKey: 'Red', dictValue: '发生安全事故' },
{ id: 3, dictKey: 'null', dictValue: '无事故发生' }
],
Q: [
{ id: 1, dictKey: 'Yellow', dictValue: '提出预审埋单' },
{ id: 2, dictKey: 'Red', dictValue: '提交FRR单' },
{ id: 3, dictKey: 'null', dictValue: '正常' }
],
C: [
// { id: 1, dictKey: 'Yellow', dictValue: '13243' },
{ id: 2, dictKey: 'Red', dictValue: '无成本损失' },
{ id: 3, dictKey: 'null', dictValue: '产生报废单' }
],
D: [
// { id: 1, dictKey: 'Yellow', dictValue: '13243' },
{ id: 2, dictKey: 'Red', dictValue: '计划未完成' },
{ id: 3, dictKey: 'null', dictValue: '计划完成' }
],
P: [
// { id: 1, dictKey: 'Yellow', dictValue: '13243' },
{ id: 2, dictKey: 'Red', dictValue: '出勤率小于90%' },
{ id: 3, dictKey: 'null', dictValue: '出勤率大于90%' }
]
},
unitNo: null
}
},
computed: { },
watch: {
activeName: {
handler(val) {}
}
},
mounted() {
this.searchDictData()
},
created() {},
methods: {
// 创建确认调用
init() {
this.$nextTick(() => {
this.getData(this.year, this.month)
})
},
// 初始化日历
getData(year, month, unitNo) {
this.unitNo = unitNo
this.day = []
this.enull = 0
if (year === null || month === null || year === undefined) return
var date = null
date = new Date(`${year}-${month}-1`).getDay()
var month1 = null
var month2 = null
var year2 = year
if (month <= 9) {
month1 = '0' + month
month2 = '0' + (month + 1)
} else {
month1 = month
month2 = month + 1
if (month === 12) {
year2 = parseInt(year) + 1
month2 = '0' + 1
}
}
if (month === 9) {
month2 = month + 1
}
this.loading = true
var data = []
var sorties = ''
try {
data =
this.$parent.$parent.$parent.$parent.$parent.$parent.sqcdpParams.query
.data
sorties =
this.$parent.$parent.$parent.$parent.$parent.$parent.sqcdpParams.query
.sorties
} catch (err) {
console.info(err)
}
if (sorties) {
this.day = data
if (date === 0) {
this.enull = 7 - 1
} else if (date === 1) {
this.enull = 0
} else {
this.enull = date - 1
}
this.loading = false
this.$parent.$parent.$parent.$parent.sqcdpParams.query.sorties = false
} else {
const params = {
searchItems: {
items: [
{
fieldName: 'calendar',
operator: 'GTE',
value: `${year}-${month1}-01 00:00:00`
},
{
fieldName: 'calendar',
operator: 'LT',
value: `${year2}-${month2}-01 00:00:00`
}
],
operator: 'AND'
},
openProps: [
{
name: 'shift'
}
],
sortItem: [
{
fieldName: 'calendar',
sortOrder: 'ASC'
}
]
}
if (unitNo && unitNo !== '工厂') {
params.searchItems.items.push({
fieldName: 'unitNo',
operator: 'EQ',
value: unitNo
})
} else {
params.searchItems.items.push({
fieldName: 'unitNo',
operator: 'ISNULL',
value: null
})
}
this.$api.searchApi('FactoryCalendar', params)
.then((res) => {
res.items.content.map((item) => {
item.calendar = item.calendar.substr(5, 5)
if (!item.srisk) {
item.srisk += ''
}
if (!item.qrisk) {
item.qrisk += ''
}
if (!item.crisk) {
item.crisk += ''
}
if (!item.drisk) {
item.drisk += ''
}
if (!item.prisk) {
item.prisk += ''
}
})
this.day = res.items.content
})
.catch((err) => console.log(err))
.finally(() => {
this.loading = false
if (date === 0) {
this.enull = 7 - 1
} else if (date === 1) {
this.enull = 0
} else {
this.enull = date - 1
}
})
}
},
// 风险颜色查询
searchDictData() {
this.$utils.getDicListByCode('RiskColor').then((res) => {
this.optionData = res
}).catch((err) => console.log(err))
.finally(() => {})
},
// /风险颜色修改
selectClasses(item, index) {
var params = {}
switch (this.activeName) {
case 'S':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
srisk: item.srisk // 此处为需要修改字段
}
break
case 'Q':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
qrisk: item.qrisk // 此处为需要修改字段
}
break
case 'C':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
crisk: item.crisk // 此处为需要修改字段
}
break
case 'D':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
drisk: item.drisk // 此处为需要修改字段
}
break
case 'P':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
prisk: item.prisk + '' // 此处为需要修改字段
}
break
}
this.$api.recursion('FactoryCalendar', params)
.then((res) => {
this.reset('操作')
})
.catch((err) => console.log(err))
.finally(() => {})
},
// 备注
rmark(item, index) {
var params = {}
switch (this.activeName) {
case 'S':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
smark: item.smark // 此处为需要修改字段
}
break
case 'Q':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
qmark: item.qmark // 此处为需要修改字段
}
break
case 'C':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
cmark: item.cmark // 此处为需要修改字段
}
break
case 'D':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
dmark: item.dmark // 此处为需要修改字段
}
break
case 'P':
params = {
id: item.id,
subTypeName: 'FactoryCalendar',
operator: 'MODIFY',
pmark: item.pmark + '' // 此处为需要修改字段
}
break
}
this.$api.recursion('FactoryCalendar', params)
.then((res) => {
this.reset('操作')
})
.catch((err) => console.log(err))
.finally(() => {})
},
// 重置弹出框
reset(message) {
this.$utils.showMessageSuccess(message)
}
}
}
</script>
<style lang="scss">
.sqcdp-calendar {
display: flex;
border-bottom: 1px solid #e4e7ed;
border-left: 1px solid #e4e7ed;
border-right: 1px solid #e4e7ed;
height: calc(100% - 1px);
overflow: hidden;
// margin-top: 20px;
.left {
flex: 7;
height: 100%;
// overflow: auto;
position: relative;
.title {
display: flex;
line-height: 40px;
height: 40px;
.week {
flex: 1;
text-align: center;
}
}
.day {
border-top: 1px solid #e4e7ed;
display: flex;
flex-wrap: wrap;
flex-direction: row;
height: calc(100% - 40px);
overflow: auto;
.day-item {
width: 14.285%;
// height: 120px;
border-right: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.el-icon-info {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
}
.smark {
// background-color: rgb(87, 138, 105);
font-size: 18px;
width: 120px;
margin: 10px auto 0;
// color: #fff;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.classes {
width: 150px;
margin: 20px auto;
cursor: pointer;
font-size: 14px;
.select {
width: 110px;
}
.greenyellow {
.el-input__inner {
background-color: #5daf34;
color: #000 !important;
}
}
.yellow {
.el-input__inner {
background-color: yellow;
color: #000 !important;
}
}
.red {
.el-input__inner {
background-color: red;
color: #000 !important;
}
}
}
.rest {
text-align: center;
margin-top: 30px;
font-size: 20px;
cursor: pointer;
}
}
.brNone {
border-right: none !important;
}
.none {
box-sizing: border-box;
float: left;
width: 14.285%;
// height: 120px;
// border-right: 1px solid #ccc;
border-bottom: 1px solid #e4e7ed;
}
.last-child {
border-right: 1px solid #e4e7ed;
}
}
.loading {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
> img {
width: 40px;
height: 40px;
margin-top: 300px;
}
}
.no-data {
width: 100%;
text-align: center;
margin-top: 25%;
font-size: 16px;
color: #666;
// display: flex;
// align-items: center;
}
}
.right {
flex: 1;
// height: 655px;
border-left: 1px solid #e4e7ed;
// text-align: center;
padding-top: 10px;
p {
line-height: 30px;
font-size: 12px;
span {
display: inline-block;
height: 20px;
width: 80px;
margin: 0 10px;
vertical-align: middle;
}
.greenyellow {
background-color: #5daf34;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
}
}
}
</style>
<style lang="scss" scoped></style>
applications/dee-mes/src/privateComponents/components/Sqcdp/components/header.vue 0 → 100644
View file @ 3a1c5d64
<template>
<section class="header_content">
<!-- 年份选择 -->
<el-select
v-model="yearValue"
class="yearpart input-with-select el-input--small"
style=" width: 100px; margin-right:10px"
@change="handleYearChange"
>
<el-option
v-for="item in yearData"
:key="item"
:label="item + '年'"
:value="item"
/>
</el-select>
<!-- 月份选择 -->
<span class="subtract icon" @click="subtract"> &lt; </span>
<el-select
v-model="months"
style=" width: 100px; margin-right:10px"
class="monthpart input-with-select el-input--small"
@change="handleMonthChange"
>
<el-option
v-for="item in month"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span class="plus icon" @click="plus">&gt; </span>
<span style="font-size: 14px;color: #606266;margin-right:10px">站位</span>
<el-select
v-model="stance"
style=" width: 100px; margin-right:10px"
class="monthpart input-with-select el-input--small"
@change="handleStance"
>
<el-option
v-for="(item, index) in stanceList"
:key="index"
:label="item.extcode"
:value="item.extcode"
/>
</el-select>
</section>
<!-- 弹出框 -->
</template>
<script>
export default {
components: {},
props: {
yearData: {
type: Array,
default: () => []
},
year: {
type: String,
default: () => null
}
},
data() {
return {
yearValue: null,
month: [],
months: null,
stanceList: [],
stance: '工厂',
stanceName: '',
disabled: false
}
},
computed: {
yea() {
return this.year
}
},
watch: {
yea: {
handler(val) {
this.yearValue = val
if (val) {
this.months = new Date().getMonth() + 1
this.initSelectMonth()
} else {
this.month = []
this.months = null
}
},
deep: true
}
},
created() {
this.getStance()
},
mounted() {
setTimeout(() => {
if (this.yea != null) {
this.months = new Date().getMonth() + 1
}
}, 200)
},
methods: {
// 初始化月份
initSelectMonth() {
//
this.month = []
for (let i = 1; i <= 12; i++) {
this.month.push({ value: i, label: i + '月' })
}
},
// 年份下拉框触发
handleYearChange() {
this.$emit('getYear', this.yearValue)
},
// 月份下拉框触发
handleMonthChange() {
this.$emit('getMonth', this.months)
},
// 站位下拉框触发
handleStance() {
this.$emit('handleStance', this.stance)
},
subtract() {
if (this.yea === null) return
if (this.months === 1) return
this.months--
this.$emit('getMonth', this.months)
},
plus() {
if (this.yea === null) return
if (this.months >= 12) return
this.months++
this.$emit('getMonth', this.months)
},
// 获取站位
getStance() {
this.$api.searchApi('ExtStandPosition', {}).then(res => {
this.stanceList = res.items.content
this.stanceList.unshift({
extcode: '工厂'
})
}).catch(err => console.log(err)).finally(() => {
}).finally(() => {
this.stance = '工厂'
// var serialNumber = false
// try {
// serialNumber = this.$parent.$parent.$parent.$parent.sqcdpParams.query.serialNumber
// } catch (err) {
// console.info(err)
// }
// if (serialNumber) {
// this.stance = serialNumber
// } else {
// this.stance = '工厂'
// }
})
},
// 返回站位名称
returnStanceName(item, index) {
return index > 0 ? item + '站位' : item
}
}
}
</script>
<style lang="scss">
.header_content {
.icon {
color: #666;
}
.plus {
margin-right: 10px;
}
.subtract {
margin-right: 5px;
}
}
</style>
applications/dee-mes/src/privateComponents/components/Sqcdp/index.vue 0 → 100644
View file @ 3a1c5d64
<!--
* @Author: ljm
* @Date: 2021-06-22
* @LastEditTime:
* @Description: sqcdp维护
* @FilePath: applications/dee-mes/src/views/mes/baseData/sqcdp/index.vue
-->
<template>
<section class="wordCalendar">
<Header
ref="header"
:year-data="yearData"
:year="year"
@getMonth="handleMonth"
@handleStance="handleStance"
@getYear="handleYear"
/>
<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
<el-tab-pane label="S（安全）" name="S">
<Calender ref="calenderS" :active-name="activeName" :month="month" :year="year" />
</el-tab-pane>
<el-tab-pane label="Q（质量）" name="Q">
<Calender ref="calenderQ" :active-name="activeName" :month="month" :year="year" />
</el-tab-pane>
<el-tab-pane label="C（成本）" name="C">
<Calender ref="calenderC" :active-name="activeName" :month="month" :year="year" />
</el-tab-pane>
<el-tab-pane label="D（进度）" name="D">
<Calender ref="calenderD" :active-name="activeName" :month="month" :year="year" />
</el-tab-pane>
<el-tab-pane label="P（人员）" name="P">
<Calender ref="calenderP" :active-name="activeName" :month="month" :year="year" />
</el-tab-pane>
</el-tabs>
<!-- <Calender ref="calender" :unit-no="unitNo" :month="month" :year="year" /> -->
</section>
</template>
<script>
import Header from './components/header'
import Calender from './components/calendar'
import { post } from '@/utils/http'
export default {
name: 'SqcdpMaintain',
componentName: 'Sqcdp维护',
components: {
Header,
Calender
},
data() {
return {
activeName: 'S',
month: null,
year: null,
yearData: [],
unitNo: null
}
},
mounted() {
this.initYear()
},
created() {},
methods: {
// 月份下拉框触发
handleMonth(month) {
this.month = month
this.selectTab(this.activeName)
},
tabClick($event) {
this.selectTab($event.name)
},
selectTab(activeName) {
this.$refs['calender' + activeName].getData(this.year, this.month, this.unitNo)
},
// 年份下拉框触发
handleYear(year) {
this.year = year
this.month = new Date().getMonth() + 1
this.selectTab(this.activeName)
},
// 站位下拉框触发
handleStance(val) {
if (val === '工厂') {
this.unitNo = null
} else {
this.unitNo = val
}
this.selectTab(this.activeName)
},
// 初始年份
initYear() {
post('/FactoryCalendar/getAllFactoryYear')
.then((res) => {
this.yearData = res.items.sort()
this.year = res.items[0]
this.month = new Date().getMonth() + 1
})
.catch((err) => console.log(err))
.finally(() => {
this.$refs['calender' + this.activeName].getData(this.year, this.month, this.unitNo)
// var name = ''
// var serialNumber = ''
// try {
// name = this.$parent.$parent.$parent.sqcdpParams.query.name
// serialNumber = this.$parent.$parent.$parent.sqcdpParams.query.serialNumber
// } catch (err) {
// console.info(err)
// }
// if (name) {
// this.activeName = name
// this.handleStance(serialNumber)
// } else {
// }
})
}
}
}
</script>
<style lang="scss">
.wordCalendar {
width: 100%;
height: 100%;
.el-tabs{
width: 100%;
height: calc(100% - 2px);
}
.el-tabs__header{
margin-top: 20px;
margin-bottom: 0;
}
.el-tabs__content{
height: calc(100% - 41px);
.el-tab-pane{
width: 100%;
height: 100%;
}
}
}
</style>
applications/dee-mes/src/privateComponents/components/WordCalendar/components/calendar.vue 0 → 100644
View file @ 3a1c5d64
<template>
<!-- 日历 -->
<section class="calendar">
<div class="left">
<p class="title">
<span class="week">周一</span><span class="week">周二</span><span class="week">周三</span><span class="week">周四</span><span class="week">周五</span><span class="week">周六</span><span class="week">周日</span>
</p>
<div class="day" element-loading-spinner="el-loading-spinner">
<!-- 空格 -->
<div
v-for="(item, j) in enull"
v-show="enull > 0"
:key="item + '11'"
class="none"
:class="{ 'last-child': j + 1 === enull }"
/>
<!-- 几号 -->
<div
v-for="(item, i) in day"
:key="i"
class="day-item"
:class="{ brNone: (enull + i + 1 - 7) % 7 == 0 }"
>
<p class="mark" :class="{ 'mark-rest': item.isHoliday }">
{{ item.calendar }}
</p>
<div
v-if="item.isHoliday"
class="rest"
@dblclick.stop="selectClasses(item, i)"
>
休息
</div>
<div v-else class="classes" @dblclick.stop="selectClasses(item, i)">
班次
<el-select
v-model="item.shift.id"
class="select"
@change="selectClasses(item)"
>
<el-option
v-for="item2 in optionData"
:key="item2.id"
:label="item2.name"
:value="item2.id"
>{{ item2.name }}</el-option>
</el-select>
</div>
</div>
</div>
<div v-if="day.length===0" class="no-data">暂无数据</div>
<!-- <div v-show="loading" class="loading">
<img src="/icons/loading.gif" alt="">
</div> -->
</div>
<!-- 描述 -->
<div class="right">
<p><span class="word" />工作日</p>
<p><span class="rest" />休息</p>
<p>提示：可以双击班次或休息切换</p>
</div>
</section>
</template>
<script>
// import { post } from '../../../../utils/http'
// import Vue from 'vue'
// Vue.prototype.$bus = new Vue()
export default {
components: {},
props: {
month: {
type: Number,
default: () => null
},
year: {
type: String,
default: () => null
},
unitNo: {
type: String,
default: () => null
}
},
data() {
return {
// 空格
enull: 0,
// 加载图标
loading: false,
// 日期
day: [],
// 班次下拉框
optionData: []
}
},
mounted() {},
created() {
this.getClasses()
},
methods: {
// 创建确认调用
init() {
this.$nextTick(() => {
this.getData(this.year, this.month, this.unitNo)
})
},
// 初始化日历
getData(year, month, unitNo) {
this.day = []
this.enull = 0
if (year === null || month === null || year === undefined) return
var date = null
date = new Date(`${year}-${month}-1`).getDay()
var month1 = null
var month2 = null
var year2 = year
if (month <= 9) {
month1 = '0' + month
month2 = '0' + (month + 1)
} else {
month1 = month
month2 = month + 1
if (month === 12) {
year2 = parseInt(year) + 1
month2 = '0' + 1
}
}
if (month === 9) {
month2 = month + 1
}
const params = {
// indices: ['FactoryCalendar'],
searchItems: {
items: [
{
fieldName: 'calendar',
operator: 'GTE',
value: `${year}-${month1}-01 00:00:00`
},
{
fieldName: 'calendar',
operator: 'LT',
value: `${year2}-${month2}-01 00:00:00`
}
],
operator: 'AND'
},
openProps: [
{
name: 'shift'
}
],
sortItem: [
{
fieldName: 'calendar',
sortOrder: 'ASC'
}
]
}
if (unitNo && unitNo !== '工厂') {
params.searchItems.items.push({
fieldName: 'unitNo',
operator: 'EQ',
value: unitNo
})
} else {
params.searchItems.items.push({
fieldName: 'unitNo',
operator: 'ISNULL',
value: null
})
}
// if (!unitNo || unitNo === '' || unitNo === null || unitNo === undefined || unitNo === '工厂') {
// params.searchItems.items.push({
// fieldName: 'unitNo',
// operator: 'ISNULL',
// value: null
// })
// } else {
// params.searchItems.items.push({
// fieldName: 'unitNo',
// operator: 'EQ',
// value: unitNo
// })
// }
this.loading = true
this.$api.searchApi('FactoryCalendar', params)
.then((res) => {
res.items.content.map((v) => {
v.calendar = v.calendar.substr(5, 5)
})
this.day = res.items.content
})
.catch((err) => console.log(err))
.finally(() => {
this.loading = false
if (date === 0) {
this.enull = 7 - 1
} else if (date === 1) {
this.enull = 0
} else {
this.enull = date - 1
}
})
},
// 选择班次和切换是否休息
selectClasses(item, index) {
if (index !== undefined) {
this.day[index].isHoliday = !this.day[index].isHoliday
}
const params = {
operator: 'MODIFY',
id: item.id,
// dxClassname: 'com.tf.mes.vo.basedata.FactoryCalendarVO',
subTypeName: 'FactoryCalendar',
shiftId: item.shift.id,
isHoliday: item.isHoliday
}
this.$api.recursion('FactoryCalendar', params)
.then((res) => {
this.reset('操作')
})
.catch((err) => console.log(err))
.finally(() => {})
},
// 获取班次
getClasses() {
const params = {
pageFrom: '',
pageSize: '',
indices: ['Shift'],
searchItems: {
items: [],
operator: 'AND'
},
parentFilter: true,
openProps: [],
sortItem: [
{
fieldName: 'modifyTime',
sortOrder: 'desc'
}
]
}
// 发送请求
this.$api.searchApi('Shift', params)
.then((res) => {
this.optionData = res.items.content
this.selectId = res.items.content[0].id
})
.catch((err) => console.log(err))
.finally(() => {})
},
// 重置弹出框
reset(message) {
this.$utils.showMessageSuccess(message)
}
}
}
</script>
<style lang="scss">
.calendar {
display: flex;
border: 1px solid #ccc;
height: calc(100% - 53px);
overflow: hidden;;
margin-top: 20px;
.left {
flex: 7;
height: 100%;
// overflow: auto;
position: relative;
.title {
display: flex;
line-height: 40px;
.week {
flex: 1;
text-align: center;
}
}
.day {
border-top: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: auto;
height: calc(100% - 40px);
.day-item {
width: 14.285%;
// height: 120px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mark {
background-color: rgb(87, 138, 105);
font-size: 18px;
width: 120px;
margin: 10px auto 0;
color: #fff;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.mark-rest {
background-color: #ccc;
}
.classes {
width: 150px;
margin: 20px auto;
font-size: 14px;
cursor: pointer;
.select {
width: 110px;
}
}
.rest {
text-align: center;
// margin-top: 30px;
margin: 20px auto;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
}
}
.brNone {
border-right: none !important;
}
.none {
box-sizing: border-box;
float: left;
width: 14.285%;
// height: 120px;
// border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.last-child {
border-right: 1px solid #ccc;
}
}
.loading {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
> img {
width: 40px;
height: 40px;
margin-top: 300px;
}
}
.no-data{
width: 100%;
text-align: center;
margin-top: 25%;
font-size: 16px;
color: #666;
// display: flex;
// align-items: center;
}
}
.right {
flex: 1;
// height: 655px;
border-left: 1px solid #ccc;
// text-align: center;
padding-top: 10px;
p {
line-height: 30px;
span {
display: inline-block;
height: 20px;
width: 80px;
margin: 0 10px;
vertical-align: middle;
}
.word {
background-color: rgb(87, 138, 105);
}
.rest {
background-color: #ccc;
}
&:last-child {
padding: 0 10px;
color: red;
line-height: 25px;
}
}
}
}
</style>
<style lang="scss" scoped>
</style>
applications/dee-mes/src/privateComponents/components/WordCalendar/components/dialog.vue 0 → 100644
View file @ 3a1c5d64
<template>
<!-- 弹出框 -->
<dee-dialog
:title="title"
:dialog-visible.sync="visible"
width="50%"
:before-close="handleClose"
element-loading-spinner="el-loading-spinner"
>
<!-- 创建编辑表单 -->
<Form ref="form" :title="title" @handleSave="hadleFormSave">
<section class="btn">
<el-button
:disabled="disabled"
type="primary"
size="medium"
@click="$refs.form.validate()"
>确定</el-button>
<el-button
:disabled="disabled"
size="medium"
@click="handleClose"
>取消</el-button>
</section>
</Form>
<!-- <div v-show="loading" class="loading">
<img src="/icons/loading.gif" alt="">
</div> -->
</dee-dialog>
</template>
<script>
import Form from './form'
import { post } from '@/utils/http'
export default {
components: {
Form
},
props: {
stance: {
type: String,
default: () => ''
}
},
data() {
return {
// 加载
loading: false,
// 显示弹出框
visible: false,
// 按钮禁用
disabled: false,
// 弹出框title
title: ''
// years: [],
// 表单数控
// forms: {}
}
},
created() {},
methods: {
// 打开弹出框
open(title) {
this.title = title
this.visible = true
},
// 保存功能
hadleFormSave(form) {
console.log('form', form)
this.disabled = true
var newStartYear = null
var newStoptYear = null
if (form.startYear.toString().includes('-')) {
newStartYear = form.startYear
newStoptYear = form.stopYear
} else {
newStartYear = `${form.startYear}-01-01`
newStoptYear = `${form.stopYear}-12-31`
}
var week = []
form.checkboxWord.filter((v) => {
if (v.isWord) {
week.push(v.id)
}
})
this.loading = true
if (this.title === '创建工厂日历') {
const params = {
// id: '',
isValidCode: 'Y',
shiftId: form.classes,
shiftIdType: 'Shift',
// subTypeName: 'FactoryCalendar',
endTime: newStoptYear + ' 00:00:00',
startTime: newStartYear + ' 00:00:00',
workDays: week
}
post('FactoryCalendar/batchInsertCalendar', params)
.then((res) => {})
.catch((err) => console.log(err))
.finally(() => {
this.disabled = false
this.visible = false
// this.$parent.init()
this.$emit('handledialogClick')
this.$parent.$parent.$refs.calender.init()
// })
this.$refs.form.reset()
this.reset('创建日历')
this.loading = false
})
} else {
const params = {
// subTypeName: 'FactoryCalendar',
unitNo: this.stance === '工厂' ? null : this.stance,
shiftId: form.classes,
shiftIdType: 'Shift',
startTime: newStartYear + ' 00:00:00',
endTime: newStoptYear + ' 00:00:00',
workDays: week
}
post('FactoryCalendar/batchUpdateCalendar', params)
.then((res) => {
this.$parent.$parent.$refs.calender.init()
this.$refs.form.reset()
this.reset('批量设置')
})
.catch((err) => console.log(err))
.finally(() => {
this.disabled = false
this.visible = false
this.loading = false
})
}
},
// 重置弹出框
reset(message) {
this.visible = false
this.$utils.showMessageSuccess(message)
},
// 取消
handleClose() {
this.$refs.form.reset()
this.visible = false
}
}
}
</script>
<style lang="scss" >
.loading {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
text-align: center;
z-index: 9;
opacity: 0.9;
> img {
width: 40px;
height: 40px;
margin-top: 450px;
}
}
</style>
applications/dee-mes/src/privateComponents/components/WordCalendar/components/form.vue 0 → 100644
View file @ 3a1c5d64
<template>
<el-form ref="form" :model="form" label-width="150px" :rules="rules">
<div v-if="title === '创建工厂日历'">
<el-col :span="12">
<el-form-item label="开始年份" prop="startYear">
<el-select v-model="form.startYear" placeholder="请选择开始年份">
<el-option v-for="(item,i) in initYear" :key="i" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="right" label="结束年份" prop="stopYear">
<el-select v-model="form.stopYear" placeholder="请选择结束年份">
<el-option v-for="(item,i) in initYear" :key="i" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</div>
<div v-else>
<el-col :span="12">
<el-form-item label="开始日期" prop="startYear">
<el-date-picker
v-model="form.startYear"
style="width:195px"
type="date"
placeholder="请选择日期(年月日)"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
<!-- <el-input /> -->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束日期" prop="stopYear">
<el-date-picker
v-model="form.stopYear"
style="width:195px"
type="date"
placeholder="请选择日期(年月日)"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
:picker-options="pickerExpireOptions"
/>
<!-- <el-input /> -->
</el-form-item>
</el-col>
</div>
<el-col :span="12">
<el-form-item label="班次" prop="classes">
<el-select v-model="form.classes" placeholder="请选择班次" @change="handleSelectClasses(form.classes)">
<el-option v-for="item in optionData" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="remark" label="班次说明" prop="remark">
<el-input v-model="form.remark" :disabled="true" style="width:195px" placeholder="自动带出班次说明" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="每周工作日" prop="checkboxWord">
<!-- <el-checkbox-group> -->
<el-checkbox
v-for="(item,i) in form.checkboxWord"
:key="i"
:label="item.name"
:value="item.isWord"
name="checkboxWord"
@change="handleCheckbox(i)"
/>
<!-- </el-checkbox-group> -->
</el-form-item>
</el-col>
<el-col :span="24">
<!-- <el-form-item> -->
<slot />
<!-- </el-form-item> -->
</el-col>
</el-form>
</template>
<script>
// import Vue from 'vue'
// Vue.prototype.$bus = new Vue()
import { post } from '@/utils/http'
export default {
props: {
title: {
type: String,
default: () => null
}
},
data() {
var validateStartYear = (rule, value, callback) => { // 开始年份验证
if (value === null) {
callback(new Error('请选择开始年份'))
} else {
if (this.form.stopYear !== null) {
if (value > this.form.stopYear) {
callback(new Error('开始年份不能大于结束年份'))
}
callback()
}
}
}
var validateStopYear = (rule, value, callback) => { // 结束年份验证
if (value === null) {
callback(new Error('请选择结束年份'))
} else {
callback()
}
}
return {
pickerIssueOptions: { // 批量设置日期选择范围
disabledDate: (time) => {
var month = new Date().getMonth() + 1
var day = new Date().getDate()
month < 9 ? month = '0' + month : month
day < 9 ? day = '0' + day : day
return (
time < new Date(`${this.startYear}-${month}-${day} 00:00:00`) || time > new Date(`${this.stopYear}-12-31 00:00:00`)
)
}
},
pickerExpireOptions: {// 批量设置日期选择范围
disabledDate: (time) => {
return (
time < new Date(this.form.startYear + ' 00:00:00')
)
// return (
// time < new Date(this.form.startYear + ' 00:00:00') || time > new Date(this.stopYear + '-12-31 00:00:00')
// )
}
},
disabled: false,
optionData: [],
startYear: null,
stopYear: null,
form: {
startYear: null,
stopYear: null,
classes: null,
remark: '',
checkboxWord: [
{ name: '周一', isWord: false, id: 1 },
{ name: '周二', isWord: false, id: 2 },
{ name: '周三', isWord: false, id: 3 },
{ name: '周四', isWord: false, id: 4 },
{ name: '周五', isWord: false, id: 5 },
{ name: '周六', isWord: true, id: 6 },
{ name: '周日', isWord: true, id: 7 }]
},
rules: {
startYear: [
{ required: true, validator: validateStartYear, trigger: 'change' }
],
stopYear: [
{ required: true, validator: validateStopYear, trigger: 'change' }
],
classes: [{ required: true, message: '请选择班次', trigger: 'change' }]
}
}
},
computed: {
initYear() {
var year = new Date().getFullYear()// 获取当前年
var result = []
for (let i = 0; i < 100; i++) {
result.push({ value: (year + i), label: (year + i) + '年' })
}
return result
}
},
mounted() {
this.reset()
this.getClasses()
this.getStartStopYear()
},
methods: {
// 获取开始结束年份
getStartStopYear() {
const params = {
'sortItem': [
{
'fieldName': 'calendar',
'sortOrder': 'desc'
}
]
}
post('/FactoryCalendar/getAllFactoryYear', params).then(res => {
res.items.sort()
this.startYear = res.items.shift()
this.stopYear = res.items.pop()
}).catch(err => console.log(err)).finally(() => {
})
},
// 班次选中
handleSelectClasses(id) {
var data = this.optionData.filter(v => v.id === id)
this.form.remark = data[0].remark
},
// 获取班次
getClasses() {
const params = {
'pageFrom': '',
'pageSize': '',
'indices': [
'Shift'
],
'searchItems': {
'items': [],
'operator': 'AND'
},
'parentFilter': true,
'openProps': [
],
'sortItem': [
{
'fieldName': 'modifyTime',
'sortOrder': 'desc'
}
]
}
// 发送请求
this.$api.searchApi('Shift', params).then(res => {
this.optionData = res.items.content
}).catch(err => console.log(err)).finally(() => {})
},
// 重置表单
reset() {
this.$refs['form'].resetFields()
this.form.checkboxWord.map((v, i) => {
if (i < 5) {
v.isWord = true
} else {
v.isWord = false
}
})
},
// 复选框点击
handleCheckbox(index) {
this.form.checkboxWord[index].isWord = !this.form.checkboxWord[index].isWord
},
// 验证表单
validate() {
this.$refs.form.validate((valid) => {
if (!valid) {
this.$utils.showMessageWarning('请选择年份')
return false
}
this.$emit('handleSave', this.form)
})
}
}
}
</script>
<style lang="scss">
.btn{
text-align: center;
}
</style>
applications/dee-mes/src/privateComponents/components/WordCalendar/components/header.vue 0 → 100644
View file @ 3a1c5d64
<template>
<section class="header_content">
<!-- 年份选择 -->
<el-select v-model="yearValue" class="yearpart input-with-select el-input--small" style=" width: 100px; margin-right:10px" @change="handleYearChange">
<el-option
v-for="item in yearData"
:key="item"
:label="item+'年'"
:value="item"
/>
</el-select>
<!-- 月份选择 -->
<span class="subtract icon" @click="subtract" />
<el-select v-model="months" style=" width: 100px; margin-right:10px" class="monthpart input-with-select el-input--small" @change="handleMonthChange">
<el-option
v-for="item in month"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span class="plus icon" @click="plus">></span>
<span style="font-size: 14px;color: #606266;margin-right:10px">站位</span>
<el-select v-model="stance" class="input-with-select el-input--small monthpart" style=" width: 100px; margin-right:10px" @change="handleStance">
<el-option
v-for="(item,index) in stanceList"
:key="index"
:label="item.extcode"
:value="item.extcode"
/>
</el-select>
<el-button :disabled="disabled" size="small" @click="$refs.dialog.open('创建工厂日历')">创建</el-button>
<el-button :disabled="disabled" size="small" @click="$refs.dialog.open('批量设置')">批量设置</el-button>
<!-- 弹出框 -->
<Dialog ref="dialog" :stance="stance" @handledialogClick="$emit('handledialogClick')" /></section>
</template>
<script>
import Dialog from './dialog'
export default {
components: {
Dialog
},
props: {
yearData: {
type: Array,
default: () => []
},
year: {
type: String,
default: () => null
}
},
data() {
return {
yearValue: null,
month: [],
months: null,
stanceList: [],
stance: '工厂',
stanceName: '',
disabled: false
}
},
computed: {
yea() {
return this.year
}
},
watch: {
yea: {
handler(val) {
this.yearValue = val
if (val) {
this.months = new Date().getMonth() + 1
this.initSelectMonth()
} else {
this.month = []
this.months = null
}
},
deep: true
}
},
created() {
this.getStance()
},
mounted() {
setTimeout(() => {
if (this.yea != null) {
this.months = new Date().getMonth() + 1
}
}, 200)
},
methods: {
// 初始化月份
initSelectMonth() {
//
this.month = []
for (let i = 1; i <= 12; i++) {
this.month.push({ value: i, label: i + '月' })
}
},
// 年份下拉框触发
handleYearChange() {
this.$emit('getYear', this.yearValue)
// this.months = new Date().getMonth() + 1
// this.handleMonthChange()
},
// 月份下拉框触发
handleMonthChange() {
this.$emit('getMonth', this.months)
},
// 站位下拉框触发
handleStance() {
this.$emit('handleStance', this.stance)
this.months = new Date().getMonth() + 1
// if (this.stance === '工厂') {
// this.disabled = false
// } else {
// this.disabled = true
// }
},
subtract() {
if (this.yea === null) return
if (this.months === 1) return
this.months--
this.$emit('getMonth', this.months)
},
plus() {
if (this.yea === null) return
if (this.months >= 12) return
this.months++
this.$emit('getMonth', this.months)
},
// 获取站位
getStance() {
this.$api.searchApi('ExtStandPosition', {}).then(res => {
this.stanceList = res.items.content
this.stanceList.unshift({
extcode: '工厂'
})
}).catch(err => console.log(err)).finally(() => {
})
},
// 返回站位名称
returnStanceName(item, index) {
return index > 0 ? item + '站位' : item
}
}
}
</script>
<style lang="scss">
.header_content{
.icon{
color: #666;
}
.plus{
margin-right: 10px;
}
.subtract{
margin-right: 5px;
}
}
</style>
applications/dee-mes/src/privateComponents/components/WordCalendar/index.vue 0 → 100644
View file @ 3a1c5d64
<!--
* @Author: ljm
* @Date: 2021-03-10
* @Description: 工厂日历定义
* @FilePath: applications/dee-mes/src/views/mes/baseData/wordCalendar/index.vue
-->
<template>
<section class="wordCalendar">
<Header
ref="header"
:year-data="yearData"
:year="year"
@handleStance="handleStance"
@handledialogClick="handledialogClick"
@getMonth="handleMonth"
@getYear="handleYear"
/>
<Calender ref="calender" :unit-no="unitNo" :month="month" :year="year" />
</section>
</template>
<script>
import Header from './components/header'
import Calender from './components/calendar'
import { post } from '@/utils/http'
export default {
name: 'WordCalendar',
componentName: '工厂日历',
components: {
Header,
Calender
},
data() {
return {
month: null,
year: null,
yearData: [],
unitNo: null
}
},
mounted() {
this.initYear()
},
created() {},
methods: {
// 月份下拉框触发
handleMonth(month) {
this.month = month
this.$refs.calender.getData(this.year, this.month, this.unitNo)
},
// 年份下拉框触发
handleYear(year) {
this.year = year
this.month = new Date().getMonth() + 1
this.$refs.calender.getData(this.year, this.month, this.unitNo)
},
// 弹出框确认触发
handledialogClick() {
this.initYear()
},
// 初始年份
initYear() {
// this.$refs.calender.getData('2105', 8, this.unitNo || '')
var url = null
if (this.unitNo) {
url = `/FactoryCalendar/getAllFactoryYear?unitNo=${
this.unitNo + ''
}`
} else {
url = '/FactoryCalendar/getAllFactoryYear?unitNo='
}
post(url, {})
.then((res) => {
this.yearData = res.items.sort()
if (!this.year) {
this.year = res.items[0]
this.month = new Date().getMonth() + 1
}
this.$refs.calender.getData(this.year, this.month, this.unitNo)
})
.catch((err) => console.log(err))
.finally(() => {})
},
// 站位下拉框触发
handleStance(val) {
if (val === '工厂') {
this.unitNo = null
} else {
this.unitNo = val
}
this.initYear()
}
}
}
</script>
<style lang="scss">
.wordCalendar {
width: 100%;
height: 100%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment