2020-07-6
Posted lvqiupingboke-2019
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2020-07-6相关的知识，希望对你有一定的参考价值。
<template>
<div style="margin-top: -0.5%;margin-left: -0.4%;width: 101%" class="jt-from">
<!-- 弹出框提示-->
<alert-mes ref="alertFrom"></alert-mes>
<div style="border: 0px red solid;width: 130px;position: fixed;z-index: 3;right: -110px;top:200px" id="ddd"
@mouseleave="leave">
<div class="icond" v-on:mouseover="changeActive"
style="border: 0px black solid;width: 18px;height: 40px;background-color: #7fb5ff;border-radius: 5px 0px 0px 5px;display: inline-block;padding-top: 20px">
<a-icon type="double-left" style="position: relative;top: -12px;color: white"/>
</div>
<div
style="border: 0px black solid;width: 110px;display: inline-block;border-radius: 5px 2px 2px 5px;box-shadow:1px 1px 1px #d2d2d2 inset;background-color: #e5f0ff;">
<ul class="rightul">
<li>
<a-checkbox @change="jinben">基本信息</a-checkbox>
</li>
<li>
<a-checkbox @change="xian">其他信息</a-checkbox>
</li>
</ul>
<p class="ptop">返回顶部</p>
</div>
</div>
<div class="ant-alert ant-alert-info" style="position: relative;top:0px;z-index: 1;border: 0px">
<a-button @click="handleOk" size="small" ghost type="link" style="color: #2eabff">保存5</a-button>
<a-button @click="handleReturn(‘/basic/workingShift/list‘)" size="small" ghost type="link" style="color: #2eabff">
返回列表
</a-button>
<a-button @click="handleClear" size="small" ghost type="link" style="color: #2eabff">新增</a-button>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item @click="batchAuditone" key="1">审核</a-menu-item>
<a-menu-item @click="batchUnauditone" key="2">反审核</a-menu-item>
</a-menu>
<a-button type="link" @click="batchAuditone" size="small" ghost style="color: #2eabff"> 审核
<a-icon style="color: rgb(46, 171, 255)" type="caret-down"/>
</a-button>
</a-dropdown>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item @click="batchForbiddenone" key="1">禁用</a-menu-item>
<a-menu-item @click="batchUnforbiddenone" key="2">反禁用</a-menu-item>
</a-menu>
<a-button type="link" @click="batchForbiddenone" size="small" ghost style="color: #2eabff"> 禁用
<a-icon style="color: rgb(46, 171, 255)" type="caret-down"/>
</a-button>
</a-dropdown>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item @click="batchDelone" key="2">删除</a-menu-item>
<a-menu-item @click="copyBill" key="2">复制</a-menu-item>
</a-menu>
<a-button type="link" size="small" ghost style="color: black"> 操作
<a-icon style="color: black" type="caret-down"/>
<!-- style="color: #2c2c2e"-->
</a-button>
</a-dropdown>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item key="1">打印</a-menu-item>
<a-menu-item key="2">预览</a-menu-item>
<a-menu-item key="3">引入</a-menu-item>
<a-menu-item key="4">引出</a-menu-item>
<a-menu-item key="5">附件</a-menu-item>
</a-menu>
<a-button type="link" size="small" ghost style="color: black"> 选项
<a-icon style="color: black" type="caret-down"/>
<!-- style="color: #2c2c2e"-->
</a-button>
</a-dropdown>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item @click="firstItem" key="1">首张</a-menu-item>
<a-menu-item @click="upItem" key="2">前一</a-menu-item>
</a-menu>
<a-button type="link" @click="upItem" size="small" ghost style="color: #2eabff">前一
<a-icon style="color: rgb(46, 171, 255)" type="caret-down"/>
</a-button>
</a-dropdown>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item @click="endItem" key="1">末张</a-menu-item>
<a-menu-item @click="nextItem" key="2">后一</a-menu-item>
</a-menu>
<a-button type="link" @click="nextItem" size="small" ghost style="color: #2eabff">后一
<a-icon style="color: rgb(46, 171, 255)" type="caret-down"/>
</a-button>
</a-dropdown>
</div>
<a-card :bordered="false">
<!-- 操作按钮区域 -->
<div
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<h3 style="color: #2eabff;margin-bottom: -0.3%;font-size: 14px">
<a-icon id="icon1" type="caret-down" @click="jinben"/>
基本信息
</h3>
<div v-show="bol">
<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="编码5" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input @keyup.enter="login" v-decorator="[ ‘shiftNo‘, validatorRules.shiftNo]"
placeholder="保存时自动生成"></a-input>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input @keyup.enter="login" v-decorator="[ ‘shiftName‘, validatorRules.shiftName]"
placeholder=""></a-input>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="是否跨天" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group @change="onChangeDay" v-decorator="[ ‘isDay‘, {‘initialValue‘:this.isDay}]">
<a-radio value="1">是</a-radio>
<a-radio value="2">否</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-time-picker
:default-open-value="moment(‘00:00‘, ‘HH:mm‘)"
format="HH:mm"
:trigger-change="true"
style="width: 100%"
:value="this.startTime"
v-decorator="[‘startTime‘,validatorRules.startTime]"
@change="onChangeStartTime"
/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-time-picker
:default-open-value="moment(‘00:00‘, ‘HH:mm‘)"
:trigger-change="true"
style="width: 100%"
format="HH:mm"
:value="this.endTime"
v-decorator="[‘endTime‘,validatorRules.endTime]"
@change="onChangeEndTime"
/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="工作小时数" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘jobTime‘, validatorRules.jobTime]" disabled>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="8" :lg="16" :md="24" :sm="24" :xs="24">
<a-form-item label="时段描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘tdesc‘, validatorRules.tdesc]" style="width: 124.5%"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="8" :lg="16" :md="24" :sm="24" :xs="24">
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘remark‘, validatorRules.remark]" style="width: 124.5%"></a-input>
</a-form-item>
</a-col>
</a-row>
</div>
<h3 style="color: #2eabff;margin-top: 0.7%;margin-bottom: -0.3%;font-size: 14px">
<a-icon id="icon" type="caret-down" @click="xian"/>
其他信息
</h3>
<div v-show="bool">
<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="所属部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘sysOrgCode‘, validatorRules.sysOrgCode]" disabled
placeholder=""></a-input>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="数据状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag type="list" v-decorator="[‘dataStatus‘, {‘initialValue‘:‘0‘}]"
:trigger-change="true" dictCode="dataState" disabled placeholder="请选择数据状态"/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="禁用状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag type="radio" v-decorator="[‘forbidFlag‘, {‘initialValue‘:0}]"
:trigger-change="true" dictCode="radio" placeholder="请选择禁用状态" disabled/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘createBy‘, validatorRules.createBy]" disabled placeholder=""></a-input>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="修改人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘updateBy‘, validatorRules.updateBy]" disabled placeholder=""></a-input>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="审核人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="[ ‘chkBy‘, validatorRules.chkBy]" disabled placeholder=""></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="" v-decorator="[ ‘createTime‘, validatorRules.createTime]" disabled
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="修改日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="" v-decorator="[ ‘updateTime‘, validatorRules.updateTime]" disabled
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="审核时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="" v-decorator="[ ‘chkTime‘, validatorRules.chkTime]" disabled
:trigger-change="true"
style="width: 100%"/>
</a-form-item>
</a-col>
</a-row>
</div>
</a-form>
</a-spin>
</div>
<mes-department-list-modal ref="modalFrom"></mes-department-list-modal>
<!-- <mesdepartment-modal ref="modalForm"></mesdepartment-modal>-->
</a-card>
</div>
</template>
<script>
import { httpAction } from ‘@/api/manage‘
import pick from ‘lodash.pick‘
import { validateDuplicateValue } from ‘@/utils/util‘
import JDate from ‘@/components/jeecg/JDate‘
import JSearchSelectTag from ‘@/components/dict/JSearchSelectTag‘
import { JeecgListMixin } from ‘@/mixins/JeecgListMixin‘
import { initDictOptions, filterMultiDictText } from ‘@/components/dict/JDictSelectUtil‘
import AlertMes from ‘@/components/mes/AlertMes‘
import KAutoCompletePopup from ‘@/components/mes/KAutoCompletePopup‘
import moment from ‘moment‘;
export default {
name: ‘departmentForm‘,
mixins: [JeecgListMixin],
components: {
JDate,
JSearchSelectTag,
AlertMes,
KAutoCompletePopup
},
data() {
return {
isDay:‘2‘,
startTime:‘‘,
endTime:‘‘,
bol: true,
bool: true,
form: this.$form.createForm(this),
title: ‘操作‘,
width: 800,
visible: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
confirmLoading: false,
validatorRules: {
shiftName: {
rules: [
{ required: true, message: ‘ ‘ }
]
},
startTime: {
rules: [
{ required: true, message: ‘开始时间不能为空‘ }
]
},
endTime: {
rules: [
{ required: true, message: ‘结束时间不能为空‘ }
]
},
},
url: {
list: `${window._CONFIG[‘mes‘]}/base/baseShift/list`,
list1: `${window._CONFIG[‘mes‘]}/base/baseShift/list1`,
add: `${window._CONFIG[‘mes‘]}/base/baseShift/add`,
edit: `${window._CONFIG[‘mes‘]}/base/baseShift/edit`,
entry: `${window._CONFIG[‘mes‘]}/base/baseShift/edit`,
audit: `${window._CONFIG[‘mes‘]}/base/baseShift/audit`,
unAudit: `${window._CONFIG[‘mes‘]}/base/baseShift/unAudit`,
forbid: `${window._CONFIG[‘mes‘]}/base/baseShift/forbid`,
unForbid: `${window._CONFIG[‘mes‘]}/base/baseShift/unForbid`,
delete: `${window._CONFIG[‘mes‘]}/base/baseShift/delete`,
deleteBatch: `${window._CONFIG[‘mes‘]}/base/baseShift/deleteBatch`,
queryById: ‘/base/baseShift/queryById‘
},
angle: 0,
angle1: 0,
}
},
create() {
},
mounted() {
// this.icons()
if (this.$route.query) {
const type = this.$route.query.type
if (type == ‘add‘) {
this.add()
} else if (type == ‘edit‘) {
const record = this.$route.query.record
this.edit(record)
this.setDataItems(this.$route.query.itemIds, record.id)
} else if (type == ‘show‘) {
const record = this.$route.query.record
this.edit(record)
}
}
},
watch: {
},
methods: {
//这是是否跨天的回调
onChangeDay(e) {
console.log(e.target.value)
this.isDay = e.target.value;
this.form.setFieldsValue({
jobTime: ‘‘,
});
this.setJobTime();
},
moment,
//获取时间值：
onChangeStartTime(time, timeString) {
this.startTime = timeString;// 获取点击选择的开始的时间
console.log(`startTime:${this.startTime}`);
this.setJobTime();
},
onChangeEndTime(time, timeString) {
this.endTime = timeString;//获取点击选择的结束的时间
console.log(`endTime:${this.endTime}`);
this.setJobTime();
},
//计算
setJobTime(){
if(this.startTime=="" || this.endTime=="") {
this.form.setFieldsValue({
jobTime: ``,
});
this.jobTime="";
return;
}
// 计算之前统一转为同一个单位
let time1 = this.startTime.split(‘:‘);
// console.log(time1);
let allTime1 = Number(time1[0]) + (Number(time1[1])/60);
let time2 = this.endTime.split(‘:‘);
//console.log(time2);
let allTime2 = Number(time2[0]) + (Number(time2[1])/60);
// console.log(allTime1);
// console.log(allTime2);
let allTime=0;
if(this.isDay==‘1‘){//跨天
allTime=(24-allTime1)+allTime2;
}else if(this.isDay==‘2‘){//bu跨天
if(allTime2<allTime1){
alert(‘开始时间不能大于结束时间‘);
this.form.setFieldsValue({
jobTime: ``,
});
return;
}else{
allTime = allTime2 - allTime1;
}
}
// console.log(allTime);
// 把秒转为时分秒
// let h = Math.floor(allTime / 60);
// let h2 = allTime % 60;
// console.log(time1);${h < 10 ? (String(h)) : h}:${m < 10 ? ("0" + m) : m}
//这是form的获值方法,使用 setFieldsValue 来动态设置其他控件的值。
this.form.setFieldsValue({
jobTime: `${allTime}`
});
this.jobTime=allTime;
},
//鼠标移除
leave() {
var d = document.getElementById(‘ddd‘)
d.style.position = ‘fixed‘
d.style.right = ‘-110px‘
},
// 鼠标移入
changeActive() {
var d = document.getElementById(‘ddd‘)
d.style.position = ‘fixed‘
d.style.right = ‘0px‘
},
//返回提示
//正常
success(par) {
this.$refs.alertFrom.normal(par)
},
//错误
error(par) {
this.$refs.alertFrom.error(par)
},
//警告
warning(par) {
this.$refs.alertFrom.warning(par)
},
//提示
tips(par) {
this.$refs.alertFrom.tips(par)
},
jinben() {
this.angle1 += 180
var ico = document.getElementById(‘icon1‘)
ico.style.transform = ‘rotate(‘ + this.angle1 + ‘deg)‘
this.bol = !this.bol
},
xian() {
this.angle += 180
var ico = document.getElementById(‘icon‘)
ico.style.transform = ‘rotate(‘ + this.angle + ‘deg)‘
this.bool = !this.bool
},
//更换弹出框图标
// icons() {
// var classname = document.getElementsByClassName(‘anticon-cluster‘)
// var son = classname[0].childNodes[0].childNodes
// son[0].setAttribute(‘d‘, ‘M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z‘)
// },
login() {
this.$refs.id.focus()
var inputs = document.getElementsByTagName(‘input‘)
for (var i = 0; i < inputs.length; i++) {
// 如果是最后一个，则焦点回到第一个
if (i == (inputs.length - 1)) {
inputs[0].focus()
break
} else if (thisInput == inputs[i]) {
inputs[i + 1].focus()
break //不加最后一行eles就直接回到第一个输入框
} else { //最后的eles是添加的表单提交方法(如果想实现登陆，可以写入登陆方法)
document.getElementById(‘form‘).submit() //直接form提交
}
}
},
openModal() {
},
//返回值
Callback(itme) {
this.form.setFieldsValue({
sysOrgCode: ‘设置值‘
})
},
//重置
handleClear() {
this.model = {}
this.form.resetFields()
},
add() {
this.edit({})
},
edit(record) {
// alert
console.log(JSON.stringify(record))
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, ‘shiftNo‘, ‘shiftName‘, ‘isDay‘, ‘startTime‘, ‘endTime‘,
‘tdesc‘, ‘remark‘, ‘dataStatus‘, ‘forbidFlag‘, ‘createTime‘, ‘createBy‘, ‘updateBy‘,
‘updateTime‘, ‘sysOrgCode‘, ‘chkTime‘, ‘chkBy‘, ‘tgroup‘))
//重新设置isDay的值，setFieldsValue好像无法设置数字类型？？
this.form.setFieldsValue({isDay:record.isDay+‘‘})
this.isDay = record.isDay
if(record.startTime!=undefined && record.startTime!=null){
this.form.setFieldsValue({startTime:moment(record.startTime, ‘HH:mm‘)})
this.startTime = record.startTime
}
if(record.endTime!=undefined && record.endTime!=null){
this.form.setFieldsValue({endTime:moment(record.endTime, ‘HH:mm‘)})
this.endTime = record.endTime
}
this.setJobTime()
})
},
close() {
this.$emit(‘close‘)
this.visible = false
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped lang="less">
@import ‘~@assets/less/common.less‘;
.rightul li {
list-style-type: none;
line-height: 2;
}
.rightul {
margin-left: -28px;
}
.ptop {
text-align: center;
/*margin-left: 18px;*/
line-height: 2;
border: 0px red solid;
color: #a8bde3;
background-color: #d4e3ff;
border-radius: 0px 0px 2px 5px;
box-shadow: 1px -1px 1px #d2d2d2 inset;
position: relative;
bottom: -14px;
}
.ptop:hover {
background-color: #e6f7ff;
cursor: pointer;
}
/deep/ .ant-col-xl-8 > div > .ant-col-sm-8 {
width: 16.5% !important;
}
/deep/ .xiabie > div > label {
color: blue;
}
</style>
以上是关于2020-07-6的主要内容，如果未能解决你的问题，请参考以下文章