<template>
<div class="addTaskModal" v-if="visible">
<editAndAddPage :router="'/basicConfiguration'" :title="titles" @cancel="cancel" @submit="submit">
<template v-slot:pageBody>
<div class="main-body-box">
<a-form-model
:label-col="{ span: 2 }"
:wrapper-col="{ span: 22 }"
ref="ruleForm"
:rules="rules"
:model="modalData"
>
<a-form-model-item label=""></a-form-model-item>
<a-form-model-item :label="$t('任务名称:')" prop="taskName">
<a-input :placeholder="$t('请输入任务名称')" v-model="modalData.taskName" maxLength="25"> </a-input>
</a-form-model-item>
<a-form-model-item :label="$t('包含设备:')">
<Transfer ref="transferRef" :hostModel="modalData.hostModel"></Transfer>
</a-form-model-item>
<a-form-model-item :label="$t('空开配置:')">
<div class="config_content">
<div class="config_item" v-for="(item, index) in configArr" :key="index">
<div class="config_title">
<a-
select v-model="item.configTypeCode" :placeholder="$t('请选择')">
<a-
select-option
:value="el.configTypeCode"
v-for="el in item.configNameOptions"
:key="el.configTypeCode"
:title="$t(el.configTypeName)"
>
{{ $t(el.configTypeName) }}
</a-
select-option>
</a-
select>
<hd-icon type="delete" @click="delConfig(index)" />
</div>
<div class="config_main">
<div class="type_info">
<span>{{ $t('操作类型:') }}</span>
<a-radio-group v-model="item.cmd" @change="onChange">
<a-radio-button value="0"> {{ $t('分闸') }}</a-radio-button>
<a-radio-button value="1"> {{ $t('合闸') }} </a-radio-button>
</a-radio-group>
</div>
<div class="time_info">
<span>{{ $t('时间范围:') }}</span>
<a-time-picker
class="mgb_12"
format="HH:mm"
valueFormat="HH:mm"
v-model="item.excTime"
:placeholder="$t('选择时间')"
/>
</div>
<div class="week_info">
<span>{{ $t('运行周期:') }}</span>
<div class="week_list">
<div
class="week_item"
v-for="(day, indx) in item.weekList"
:key="indx"
@click="toggleDay(day, item)"
:class="{
selected: day.value == 1 }"
>
<div>{{ day.name }}</div>
<div v-show="day.value == 1" class="triangle"></div>
<div v-show="day.value == 1" class="checkmark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="addBtn" @click="addConfig">
<hd-icon type="add" />
{{ $t('新增空开配置') }}
</div>
</a-form-model-item>
</a-form-model>
</div>
</template>
</editAndAddPage>
</div>
</template>
<script>
import reg from '@/common/js/reg'
import factory from '../factory'
import Transfer from './Transfer.vue'
import editAndAddPage from '@/components/scfComponents/editAndAddPage/editAndAddPage.vue'
export default {
components: { Transfer, editAndAddPage },
data() {
return {
titles: '新增空开定时任务',
visible: false,
modalData: {
taskName: '',
hostModel: undefined,
},
rules: {
taskName: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
{ pattern: reg.name, message: this.$t('仅允许输入汉字、字母、数字与_-.@字符') },
],
},
configArr: [
{
cmd: '',
excTime: '',
configNameOptions: this.getConfigTypeOptions(),
weekList: [
{ name: '周日', value: 0 },
{ name: '周一', value: 0 },
{ name: '周二', value: 0 },
{ name: '周三', value: 0 },
{ name: '周四', value: 0 },
{ name: '周五', value: 0 },
{ name: '周六', value: 0 },
],
},
],
}
},
computed: {},
mounted() {},
methods: {
// 打开弹窗
showModal() {
this.visible = true
// 获取主机型号
this.modalData = {
taskName: '',
hostModel: undefined,
}
},
toggleDay(day, item) {
day.value = day.value == 0 ? 1 : 0
const values = item.weekList.map(day => day.value)
item.configValue.rept = values.join('') + '00'
},
// 获取空开配置
getConfigTypeOptions() {
let arr = []
for (let i = 0; i < 31; i++) {
const configTypeCode = (1026 + i).toString()
const configTypeName = this.$t('空开配置') + i
arr.push({ configTypeCode, configTypeName })
}
return arr
},
// 添加配置项
addConfig() {
this.configArr.push({
cmd: '',
excTime: '',
configNameOptions: this.getConfigTypeOptions(),
weekList: [
{ name: '周日', value: 0 },
{ name: '周一', value: 0 },
{ name: '周二', value: 0 },
{ name: '周三', value: 0 },
{ name: '周四', value: 0 },
{ name: '周五', value: 0 },
{ name: '周六', value: 0 },
],
})
},
// 删除配置项
delConfig(index) {
if (this.configArr.length == 1) {
this.$message.destroy()
this.$message.warning(this.$t('至少保留一个配置项'))
} else {
this.configArr.splice(index, 1)
}
},
// 取消
cancel() {
this.visible = false
},
// 确定
submit() {
this.$refs.ruleForm.validate(valid => {
if (!valid) return
const detectorList = this.$refs.transferRef.get
SelectedData() || []
if (detectorList.length === 0) {
this.$message.destroy()
this.$message.warning(this.$t('请选择设备列表'))
return
}
let errMsg = ''
let configs = this.configArr.filter(item => item.isCheck)
if (configs.length === 0) {
errMsg = this.$t('请选择配置定时开合闸')
} else {
for (let i = 0; i < configs.length; i++) {
const { configValue, configTypeName, cmd, excTime } = configs[i]
if (cmd == null || cmd === '' || (typeof cmd === 'string' && cmd.trim() === '')) {
errMsg = `${this.$t('请选择')}${configTypeName}${this.$t('分合闸')}`
break
} else if (!excTime) {
errMsg = `${this.$t('请选择')}${configTypeName}${this.$t('时间')}`
break
} else if (!configValue.rept || configValue.rept == '000000000') {
errMsg = `${this.$t('请选择')}${configTypeName}${this.$t('周期')}`
break
}
configValue.cmd = cmd
configValue.excTime = moment(excTime, 'HH:mm').valueOf()
configValue.time = moment().valueOf()
}
}
if (errMsg) {
this.$message.destroy()
this.$message.warning(errMsg)
return
}
let params = {
commandMode: '0', // 配置模式 主机0 探测器1
issueType: '1', // 1为首次下发 2为重新下发
jobName: this.modalData.taskName,
userCode: localStorage.getItem('userId'),
detectorList: detectorList.map(item => ({
...item,
channelNo: `${item.systemAddress}@${item.partUnitLoopCode}@${item.channelNo}`,
})),
configs,
}
console.log(params)
factory.batchConfig(params).then(res => {
if (res.success) {
this.$message.destroy()
this.$message.success('操作成功')
this.handleCancel()
this.$parent.getTableList()
}
})
})
},
},
}
</script>
<style lang="less" scoped>
.addTaskModal {
width: 100%;
height: 100%;
text-align: left;
box-sizing: border-box;
}
.main-body-box {
.config_content {
border-radius: 4px;
border: 1px solid #ebedef;
.config_title {
height: 48px;
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid rgb(229, 231, 234);
background: rgb(242, 243, 244);
justify-content: space-between;
}
.config_main {
height: 176px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
color: rgb(105, 118, 136);
font-family: '阿里巴巴普惠体';
font-size: 14px;
font-weight: 400;
background: rgb(255, 255, 255);
.type_info {
display: flex;
align-items: center;
}
.week_info {
display: flex;
align-items: center;
.week_list {
display: flex;
.week_item {
height: 40px;
width: 82px;
display: flex;
cursor: default;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid rgb(217, 220, 224);
border-radius: 4px;
margin-right: 12px;
color: rgb(105, 118, 136);
font-family: '阿里巴巴普惠体';
font-size: 14px;
font-weight: 400;
&.
selected {
color: #006fff;
border: 1px solid rgb(0, 111, 255);
}
.triangle {
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 24px 24px;
border-color: transparent transparent #006fff transparent;
}
/* 对勾实现 */
.checkmark {
position: absolute;
bottom: 5px; /* 调整位置使其在
三角形内居中 */
right: 4px; /* 调整位置使其在
三角形内居中 */
width: 8px;
height: 5px;
transform: rotate(-45deg);
&::before {
content: '';
position: absolute;
width: 2px;
height: 5px;
background-color: white;
left: 0;
top: 0;
}
&::after {
content: '';
position: absolute;
width: 6px;
height: 2px;
background-color: white;
right: 0;
bottom: 0;
}
}
}
}
}
span {
margin-right: 8px;
}
}
}
.addBtn {
width: 100%;
height: 32px;
cursor: default;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin-top: 12px;
color: rgb(41, 141, 255);
border: 1px dashed rgb(41, 141, 255);
background: rgba(41, 141, 255, 0.1);
}
}
</style>如何实现每次新增不可以重复选择空开配置名称
本文介绍了一种CSS样式的兼容性设置方法，通过使用appearance属性的不同值，可以使select元素在不同浏览器中呈现一致的外观。
扫一扫
3043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
