<template>
<div>
<myModal :params="myModalParams" :visible="visible" :destroyOnClose="true" @submit="handleOk" @cancel="handleCancel"
:getContainer="getEle">
<template v-slot:header><span></span></template>
<template v-slot:body>
<a-form-model ref="addEditDiffForm" :model="formData" :rules="rules" :label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }">
<h3>{{ $t('基本信息') }}</h3>
<a-row>
<a-col :span="10">
<a-form-model-item :label="$t('组织')" prop="orgName">
<org-tree-select :checkStat="0" :defaultOrg="orgInfoObj" @treeSelect="treeSelect"></org-tree-select>
</a-form-model-item>
</a-col>
<a-col :span="14">
<a-form-model-item :label="$t('起止日期')" prop="startAndEndTime">
<a-range-picker v-model="formData.startAndEndTime" valueFormat="YYYY-MM-DD" @change="onChangeTime"
:allowClear="false">
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>
</a-form-model-item>
</a-col>
</a-row>
<div style="display: flex;align-items: center;justify-content: space-between;">
<h3 style="margin: 0;">{{ $t('时段设置') }}</h3>
<div class="color-box">
<div class="color-item" v-for="(item, index, key) in colorObj" :key="key">
<span :style="{ backgroundColor: item.color}"></span>
<span>{{item.title}}</span>
</div>
</div>
</div>
<!-- 时段设置 -->
<div class="time-setting">
<div class="time-item" v-for="item in timeArr" :key="item.timeNum"
:style="{backgroundColor: item.periodTimeCode ? colorObj[item.periodTimeCode].color : ''}">
<span>{{item.time}}</span>
<div class="choose-color">
<div class="checked-color-item" v-for="(color, index, key) in colorObj" :key="key + index"
@click="changeColor(item, index)">
<span :style="{ backgroundColor: color.color}"></span>
<span>{{color.title.substring(0, 1)}}</span>
</div>
</div>
</div>
</div>
</a-form-model>
</template>
</myModal>
</div>
</template>
<script>
import factory from '../factory';
import myModal from "@/components/scfComponents/modalComponents/modal.vue";
import orgTreeSelect from "@/components/scfComponents/orgTreeSelect/orgTreeSelect";
export default {
components: { myModal, orgTreeSelect },
data () {
return {
myModalParams: {
title: ""
},
isAdd: true,
visible: false,
formData: {
orgName: "",
orgCode: "",
},
timeArr: [],
costCenterList: [],
colorObj: {
'1': { color: "#ff6054", title: this.$t("尖电") },
'2': { color: '#ffd26a', title: this.$t("峰电") },
'3': { color: '#6a75ff', title: this.$t("平电") },
'4': { color: '#15bcb0', title: this.$t("谷电") },
},
orgInfoObj:{}
}
},
props: {
orgInfo: {
type: Object,
default: () => {
return {}
},
},
},
computed: {
rules () {
return {
orgName: [{ required: true, message: this.$t("请选择所属组织"), trigger: "change" }],
startAndEndTime: [{ required: true, message: this.$t("请选择起止日期"), trigger: ["blur", "change"] }]
}
},
},
methods: {
moment,
getEle () {
return document.querySelector('.standard-page')
},
// 峰谷时段详情
getPeakValleyDetail (id) {
factory.getPeakValleyDetail(id).then(res => {
if (res.success) {
this.formData = {
id: res.data.id,
orgCode: res.data.orgCode,
orgName: res.data.orgName,
startTime: res.data.startTime,
endTime: res.data.endTime,
startAndEndTime: [res.data.startTime, res.data.endTime]
}
this.orgInfoObj = {
orgCode: res.data.orgCode,
orgName: res.data.orgName,
}
let timeArr = res.data.timeQuantumEntityList || []
this.timeArr = timeArr.length > 0 ? this.sortByField(timeArr, 'timeNum') : []
}
})
},
// 保存数据
async saveData () {
let params = {
orgCode: this.formData.orgCode,
orgName: this.formData.orgName,
startTime: this.formData.startTime,
endTime: this.formData.endTime,
timeQuantumEntityList: this.timeArr
}
if (this.isAdd) {
let res = await factory.addPeakValley(params)
if (res.success) {
this.$message.success(this.$t("新增成功"))
this.$parent.getTableList()
this.visible = false
} else {
this.$message.error(res.data)
}
} else {
params.id = this.formData.id
let res = await factory.updatePeakValley(params)
if (res.success) {
this.$message.success(this.$t("修改成功"))
this.$parent.getTableList()
this.visible = false
} else {
this.$message.error(res.data)
}
}
},
// 打开弹窗
showModal (record) {
console.log("showModal ==", record);
this.timeArr = []
if (record) {
this.isAdd = false
this.myModalParams.title = this.$t("编辑峰谷时段")
this.getPeakValleyDetail(record.id)
} else {
this.isAdd = true
this.myModalParams.title = this.$t("新增峰谷时段")
this.formData = {
orgCode: this.orgInfo.orgCode,
orgName: this.orgInfo.orgName
}
this.orgInfoObj = this.orgInfo
this.getTimeArr()
}
this.visible = true
},
// 获取时间数组
getTimeArr () {
for (let index = 0; index < 24; index++) {
// 补零
let hour = String(index).padStart(2, "0")
let time = `${hour}:00-${hour}:59`
this.timeArr.push({ time, timeNum: index, periodTimeCode: '3' })
}
},
// 根据某个字段排序
sortByField (arr, field) {
return arr.sort((a, b) => {
if (a[field] < b[field]) return -1
if (a[field] > b[field]) return 1
return 0;
});
},
changeColor (record, periodTimeCode) {
record.periodTimeCode = periodTimeCode
this.$forceUpdate()
},
onChangeTime (dates, dateStrings) {
if (dateStrings.length) {
this.formData.startAndEndTime = dateStrings
this.formData.startTime = dateStrings[0]
this.formData.endTime = dateStrings[1]
}
},
// 树节点选择
treeSelect (triggerNode) {
this.formData.orgName = triggerNode.title || '';
this.formData.orgCode = triggerNode.value || '';
},
// 确定
handleOk () {
this.$refs.addEditDiffForm.validate(valid => {
if (valid) {
this.saveData()
}
})
},
// 取消
handleCancel () {
this.visible = false
},
},
}
</script>
<style lang="less" scoped>
.color-box {
display: flex;
.color-item {
display: flex;
align-items: center;
color: #b4bfcc;
margin-right: 24px;
span:first-child {
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 2px;
display: inline-block;
}
}
}
.time-setting {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.time-item {
width: 128px;
height: 48px;
display: flex;
font-size: 12px;
margin-top: 8px;
overflow: hidden;
color: #ffffff;
margin-right: 8px;
border-radius: 4px;
position: relative;
align-items: center;
justify-content: center;
.choose-color {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
.checked-color-item {
span:first-child {
width: 12px;
height: 12px;
border-radius: 2px;
display: inline-block;
}
}
}
&:hover .choose-color {
display: flex;
cursor: pointer;
background-color: #12171d;
.checked-color-item {
flex: 1;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
}
}
}
}
</style>代码评审
最新发布
本文介绍了一个简单的模态窗体操作示例，展示了如何使用C++通过创建并显示模态窗体来获取用户的输入结果，并根据结果进行相应的处理。
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
