<template>
<div class="transfer-container">
<!-- 左侧表格 -->
<div class="table-container">
<div class="header-box">
<span>设备列表</span>
<span class="checkAll" @click="checkAll">全选</span>
</div>
<div class="select-box">
<div class="select-item">
<span>{{ $t('主机型号:') }}</span>
<a-select v-model="hostModel" @change="changeSelect" :placeholder="$t('请选择主机型号')" allowClear>
<a-select-option v-for="item in periodList" :key="item.id" :value="item.itemDesc" :title="item.itemName">
{{ item.itemName }}
</a-select-option>
</a-select>
</div>
<div class="select-item">
<span>{{ $t('组织名称:') }}</span>
<org-tree-select @treeSelect="orgTreeSelect"></org-tree-select>
</div>
</div>
<!-- 左侧列表 -->
<div class="list-container">
<div v-for="item in leftData" :key="item.personId" class="list-item">
<a-checkbox
v-model="item.checked"
:disabled="item.deviceOnOffLine == 0 || item.configStatus == 1"
class="checkbox"
></a-checkbox>
<div class="device-box">
<div class="top-info">
<span>{{ item.deviceName }}</span>
<span v-show="item.configStatus == 1" @click="openTask(item)">
<hd-icon type="files" />
{{ $t('已配任务') }}
</span>
</div>
<div class="bottom-info">
<span>{{ $t('探测器信息:') }}</span>
<span>{{ item.detectorName }} </span> | <span>{{ item.productModel }} </span> |
<span>{{ item.detectorUniqueCode }} </span>
</div>
</div>
</div>
<a-empty v-show="leftData.length === 0" />
</div>
<div v-if="leftData.length" class="pagination">
<a-pagination
simple
:defaultCurrent="pagination.currentPage"
:total="pagination.totalRows"
@change="changePage"
/>
</div>
</div>
<!-- 中间操作按钮 -->
<div class="transfer-actions">
<a-button type="primary" icon="right" :disabled="selectedLeft.length === 0" @click="moveToRight"> </a-button>
</div>
<!-- 右侧表格 -->
<div class="table-container right-content">
<div class="header-box">
<span>{{ $t('已选择列表') + '(' + rightData.length + ')' }}</span>
<a-button type="primary" :disabled="rightData.length === 0" @click="clearAll"> 清除 </a-button>
</div>
<div class="list-container">
<div v-for="item in rightData" :key="item.personId" class="list-item right-list">
<div class="device-box">
<div class="top-info">
<span>{{ item.deviceName }}</span>
<div>{{ item.detectorOwnerName }}</div>
<span v-show="item.configStatus == 1" @click="openTask(item)">
<hd-icon type="files" />
{{ $t('已配任务') }}
</span>
</div>
<div class="bottom-info">
<span>{{ $t('探测器信息:') }}</span>
<span>{{ item.detectorName }} </span> | <span>{{ item.productModel }} </span> |
<span>{{ item.detectorUniqueCode }} </span>
</div>
</div>
<img src="@/assets/img/icon-remove.png" @click="moveToLeft(item)" alt="" />
</div>
<a-empty v-show="rightData.length === 0" />
</div>
</div>
<!-- 定时任务已存在 -->
<myModal
:params="{ title: $t('已配置任务列表'), showFooter: false }"
:visible="visible"
@cancel="visible = false"
destroyOnClose
>
<template v-slot:header><span></span></template>
<template v-slot:body>
<div class="table_title">
{{ $t('探测名称') }}
</div>
<a-table
:columns="detailColumns"
:scroll="{ x: '100%', y: 400 }"
:dataSource="detailData"
row-key="id"
:pagination="false"
>
</a-table>
</template>
</myModal>
</div>
</template>
<script>
import factory from '../factory'
import myModal from '@/components/scfComponents/modalComponents/modal.vue'
import orgTreeSelect from '@/components/orgTreeSelect/orgTreeSelect'
export default {
components: { myModal, orgTreeSelect },
data() {
return {
visible: false, // 弹窗
periodList: [], // 主机型号列表
orgData: {}, // 组织树数据
leftData: [], // 左侧表格数据
rightData: [], // 右侧表格数据
pagination: {
pageSize: 10,
currentPage: 1,
totalRows: 0,
}, // 分页
// 已配任务列表表头
detailColumns: [
{
title: this.$t('日期'),
dataIndex: 'date',
ellipsis: true,
},
{
title: this.$t('时间'),
dataIndex: 'executeTime',
ellipsis: true,
},
{
title: this.$t('空开操作'),
dataIndex: 'operation',
ellipsis: true,
},
],
// 已配任务列表数据
detailData: [],
}
},
computed: {
// 选中左侧列表
selectedLeft() {
return this.leftData.filter(item => item.checked)
},
},
mounted() {
this.getDic()
// 初始化数据
this.leftData = []
this.rightData = []
},
methods: {
// 主机型号列表
getDic() {
factory.getDic(1080).then(res => {
this.periodList = res
})
},
// 获取左侧表格数据
getLeftTableData() {
let params = {
page: this.pagination.currentPage,
orgCodes: [this.orgData.orgCode],
productModel: this.hostModel,
}
factory.getBatchDetector(params).then(res => {
if (res.success) {
this.leftData = res.data.map(item => ({ ...item, checked: false })) || []
// 如果右侧存在数据需要把数据过滤一下
if (this.rightData.length > 0) {
let ids = this.rightData.map(item => item.id)
this.leftData = this.leftData.filter(item => !ids.includes(item.id))
}
}
})
},
// 查询已存在空开定时任务
getDetectorJob(record) {
factory.getDetectorJob(record.jobId).then(res => {
if (res.success) {
this.detailData =
res.data.map(item => {
item.detectorName = record.detectorName || ''
item.weekList = this.getActiveWeeks(item.rept)
return item
}) || []
}
})
},
// 主机型号
changeSelect(value) {
if (value && Object.keys(this.orgData).length > 0) {
this.getLeftTableData()
} else {
this.leftData = []
}
},
getActiveWeeks(rept) {
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const pattern = rept.split('')
return pattern
.map((char, index) => (char == '1' ? weekDays[index] : null))
.filter(Boolean)
.join('、')
},
// 组织树节点选择
orgTreeSelect(node) {
this.orgData = node
if (this.hostModel && Object.keys(this.orgData).length > 0) {
this.getLeftTableData()
} else {
this.leftData = []
}
},
// 全选
checkAll() {
if (this.leftData.length === 0) return
this.leftData.forEach(item => {
if (item.deviceOnOffLine == 1 && item.configStatus == 0) {
item.checked = true
}
})
},
// 清除
clearAll() {
const newLeft = [...this.leftData]
this.rightData.forEach(rightItem => {
if (!newLeft.some(leftItem => leftItem.id == rightItem.id)) {
newLeft.push({ ...rightItem, checked: false })
}
})
this.leftData = newLeft
this.rightData = []
},
// 向右移动选中项
moveToRight() {
this.rightData = [...this.rightData, ...this.selectedLeft]
this.leftData = this.leftData.filter(item => !this.selectedLeft.some(i => i.id === item.id))
},
// 向左移动单个项
moveToLeft(item) {
this.rightData = this.rightData.filter(i => i.id !== item.id)
this.leftData = [...this.leftData, { ...item, checked: false }]
},
// 打开已配置任务列表
openTask(record) {
this.visible = true
this.getDetectorJob(record)
},
},
}
</script>
<style lang="less" scoped>
.transfer-container {
width: 100%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
}
.table-container {
width: 48%;
height: 100%;
position: relative;
font-family: '微软雅黑';
font-weight: 400;
border: 1px solid #ebedef;
.header-box {
height: 46px;
width: 100%;
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;
color: rgb(21, 23, 26);
font-size: 14px;
font-weight: 700;
.checkAll {
cursor: pointer;
color: rgb(41, 141, 255);
}
}
.select-box {
display: flex;
height: 64px;
padding: 0 20px;
align-items: center;
.select-item {
margin-right: 24px;
color: rgb(157, 166, 177);
> span:first-child {
margin-right: 5px;
}
}
}
.list-container {
padding: 0 20px;
height: 392px;
overflow-y: scroll;
.list-item {
height: 74px;
display: flex;
align-items: center;
.device-box {
margin-left: 16px;
.top-info {
display: flex;
align-items: center;
span {
cursor: pointer;
color: #298dff;
font-size: 14px;
}
div {
height: 24px;
border-radius: 2px;
font-size: 12px;
display: flex;
cursor: default;
margin-right: 24px;
align-items: center;
padding: 0 8px;
color: rgb(66, 75, 86);
background: rgb(236, 238, 240);
}
span:first-child {
color: rgb(21, 23, 26);
font-size: 16px;
cursor: default;
margin-right: 24px;
}
}
.bottom-info {
color: rgb(105, 118, 136);
font-size: 14px;
> span {
margin: 0 5px;
}
}
}
}
}
.pagination {
display: flex;
height: 58px;
align-items: center;
justify-content: flex-end;
}
}
.right-content {
.device-box {
margin: 0;
}
.list-container {
height: 514px;
.list-item {
justify-content: space-between;
.device-box {
margin: 0;
}
img {
width: 20px;
height: 20px;
display: inline-block;
}
}
}
}
.transfer-actions {
margin-top: 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
代码评审
本文介绍了一个简单的HTML表单设计，用于用户输入日期并验证其有效性。通过限制输入范围，确保了日、月、年的数值在合理的范围内。此外，还提供了一个计算按钮，虽然未详细说明其具体功能，但可以推测其作用是计算所输入日期对应的星期。
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
