增加考勤机管理页面
This commit is contained in:
BianLzhaoMin
parent
d8639e758d
commit
7733815782
|
|
@ -0,0 +1,117 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取工程和考勤机树形数据
|
||||||
|
export function getProjectAndMacTreeAPI() {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/getProKqjTree',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据考勤机编号获取人员列表
|
||||||
|
export function getPersonListByMacNoAPI(params) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/getWorkerByDeviceId',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有人员列表
|
||||||
|
export function getAllPersonListAPI(params) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/getProDeviceWorker',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除人员
|
||||||
|
export function deletePersonAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/delWorkerByDevice',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除人员
|
||||||
|
export function batchDeletePersonAPI(ids) {
|
||||||
|
return request({
|
||||||
|
url: '/system/attMacManage/batchDeletePerson',
|
||||||
|
method: 'post',
|
||||||
|
data: { ids },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下发
|
||||||
|
export function sendDownAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/pushWorkerByDevice',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 配置
|
||||||
|
export function configAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/attMacManage/config',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
export function refreshAPI(macNo) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/refreshDevice',
|
||||||
|
method: 'post',
|
||||||
|
data: { deviceCode: macNo },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重启
|
||||||
|
export function restartAPI(macNo) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/restartDevice',
|
||||||
|
method: 'post',
|
||||||
|
data: { deviceCode: macNo },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取任务列表
|
||||||
|
export function getTaskListAPI(params) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/getTaskList',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除任务
|
||||||
|
export function deleteTaskAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/delTaskById',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取任务历史列表
|
||||||
|
export function getTaskHistoryListAPI(params) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/getHisTaskList',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除任务
|
||||||
|
export function batchDeleteTaskAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/bmw/kqManager/delHisTaskById',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,234 @@
|
||||||
|
<template>
|
||||||
|
<el-card class="tree-card" shadow="hover">
|
||||||
|
<div class="tree-container">
|
||||||
|
<div class="head-container">
|
||||||
|
<el-input
|
||||||
|
v-model="filterText"
|
||||||
|
placeholder="请输入关键字"
|
||||||
|
clearable
|
||||||
|
size="small"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
style="margin-bottom: 20px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<el-tree
|
||||||
|
:data="treeData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree"
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
highlight-current
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="custom-tree-node"
|
||||||
|
:class="getNodeClass(node.data)"
|
||||||
|
slot-scope="{ node }"
|
||||||
|
>
|
||||||
|
<span class="node-content">
|
||||||
|
<span
|
||||||
|
v-if="node.data.level == 2"
|
||||||
|
class="status-dot"
|
||||||
|
:class="getStatusDotClass(node.data)"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<el-tooltip
|
||||||
|
:content="node.label"
|
||||||
|
placement="top"
|
||||||
|
:disabled="!isTextOverflow(node.label)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="node-label"
|
||||||
|
:class="getNodeLabelClass(node.data)"
|
||||||
|
>
|
||||||
|
{{ node.label }}
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getProjectAndMacTreeAPI } from '@/api/system/attMacManage.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LeftTree',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterText: '',
|
||||||
|
treeData: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree.filter(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTreeData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取树形数据
|
||||||
|
async getTreeData() {
|
||||||
|
try {
|
||||||
|
const res = await getProjectAndMacTreeAPI()
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.treeData = res.data || []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取树形数据失败:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 树节点过滤
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
// 树节点点击事件
|
||||||
|
handleNodeClick(data) {
|
||||||
|
this.$emit('node-click', data)
|
||||||
|
},
|
||||||
|
// 获取节点样式类
|
||||||
|
getNodeClass(data) {
|
||||||
|
if (data.level === 2 && data.onLine === 1) {
|
||||||
|
return 'node-online'
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
// 获取状态点样式类
|
||||||
|
getStatusDotClass(data) {
|
||||||
|
if (data.level == 2) {
|
||||||
|
if (data.onLine == 1) {
|
||||||
|
return 'status-dot-online'
|
||||||
|
} else {
|
||||||
|
return 'status-dot-offline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
|
||||||
|
getNodeLabelClass(data) {
|
||||||
|
if (data.level == 2) {
|
||||||
|
if (data.onLine == 1) {
|
||||||
|
return 'node-label-online'
|
||||||
|
} else {
|
||||||
|
return 'node-label-offline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 判断文本是否溢出
|
||||||
|
* 业务背景：当节点名称过长时，需要显示 tooltip 提示完整名称
|
||||||
|
* 设计决策：通过检查文本长度来判断是否需要显示 tooltip，避免短文本也显示提示
|
||||||
|
* @param {string} text - 节点文本内容
|
||||||
|
* @returns {boolean} 是否溢出
|
||||||
|
*/
|
||||||
|
isTextOverflow(text) {
|
||||||
|
if (!text) return false
|
||||||
|
// 根据实际容器宽度，这里假设超过 20 个字符可能需要省略
|
||||||
|
// 实际项目中可以根据容器宽度动态计算
|
||||||
|
return text.length > 20
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.tree-card {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
::v-deep .el-card__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.head-container {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree {
|
||||||
|
.custom-tree-node {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-right: 8px;
|
||||||
|
|
||||||
|
.node-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot-online {
|
||||||
|
background-color: #67c23a;
|
||||||
|
box-shadow: 0 0 4px rgba(103, 194, 58, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-label-online {
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot-offline {
|
||||||
|
background-color: #f56c6c;
|
||||||
|
box-shadow: 0 0 4px rgba(245, 108, 108, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-label {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.node-online {
|
||||||
|
.node-label {
|
||||||
|
color: #67c23a;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,833 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%; overflow: hidden">
|
||||||
|
<el-card class="table-card" shadow="hover">
|
||||||
|
<div class="table-container">
|
||||||
|
<TableModel
|
||||||
|
:formLabel="formLabel"
|
||||||
|
:columnsList="columnsList"
|
||||||
|
:request-api="requestApi"
|
||||||
|
:showOperation="true"
|
||||||
|
:isSelectShow="true"
|
||||||
|
:sendParams="sendParams"
|
||||||
|
:isIndexShow="false"
|
||||||
|
ref="tableRef"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<template slot="btn">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
:disabled="selectedData.length === 0"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-download"
|
||||||
|
@click="handleSendDown"
|
||||||
|
>
|
||||||
|
下发
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-setting"
|
||||||
|
@click="handleConfig"
|
||||||
|
>
|
||||||
|
配置
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
:disabled="refreshCountdown > 0"
|
||||||
|
@click="handleRefresh"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
refreshCountdown > 0
|
||||||
|
? `刷新(${refreshCountdown}s)`
|
||||||
|
: '刷新'
|
||||||
|
}}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="warning"
|
||||||
|
icon="el-icon-switch-button"
|
||||||
|
:disabled="restartCountdown > 0"
|
||||||
|
@click="handleRestart"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
restartCountdown > 0
|
||||||
|
? `重启(${restartCountdown}s)`
|
||||||
|
: '重启'
|
||||||
|
}}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template slot="handle" slot-scope="{ data }">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(data)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="faceImage" slot-scope="{ data }">
|
||||||
|
<ImagePreview
|
||||||
|
:src="data.faceImage"
|
||||||
|
height="60px"
|
||||||
|
width="60px"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="isOnDataBase" slot-scope="{ data }">
|
||||||
|
<el-tag
|
||||||
|
v-if="data.isOnDataBase == 1"
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
在库
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
v-if="data.isOnDataBase == 0"
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
不在库
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</TableModel>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 下发弹框 -->
|
||||||
|
<DialogModel
|
||||||
|
:dialogConfig="sendDownDialogConfig"
|
||||||
|
@closeDialogOuter="handleCloseSendDownDialog"
|
||||||
|
>
|
||||||
|
<template slot="outerContent">
|
||||||
|
<el-form
|
||||||
|
ref="sendDownFormRef"
|
||||||
|
:model="sendDownFormData"
|
||||||
|
:rules="sendDownFormRules"
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<el-form-item
|
||||||
|
:label="
|
||||||
|
sendDownFormData.allSelect ? '取消全选' : '全选'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-checkbox
|
||||||
|
v-model="allSelect"
|
||||||
|
@change="handleAllSelectChange"
|
||||||
|
>
|
||||||
|
{{ `${allSelect ? '取消全选' : '全选'}` }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="未下发人员：" prop="unSendPersonIds">
|
||||||
|
<el-checkbox-group
|
||||||
|
v-model="sendDownFormData.unSendPersonIds"
|
||||||
|
@change="handleUnSendPersonChange"
|
||||||
|
>
|
||||||
|
<el-checkbox
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.id"
|
||||||
|
v-for="item in unSendPersonList"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="已下发人员：" prop="sentPersonIds">
|
||||||
|
<el-checkbox-group
|
||||||
|
v-model="sendDownFormData.sentPersonIds"
|
||||||
|
@change="handleSentPersonChange"
|
||||||
|
>
|
||||||
|
<el-checkbox
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.id"
|
||||||
|
v-for="item in sentPersonList"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-row class="dialog-footer-btn">
|
||||||
|
<el-button size="medium" @click="handleCloseSendDownDialog">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="medium"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSendDownSubmit"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
</DialogModel>
|
||||||
|
|
||||||
|
<!-- 配置弹框 -->
|
||||||
|
<DialogModel
|
||||||
|
:dialogConfig="configDialogConfig"
|
||||||
|
@closeDialogOuter="handleCloseConfigDialog"
|
||||||
|
>
|
||||||
|
<template slot="outerContent">
|
||||||
|
<el-form
|
||||||
|
ref="configFormRef"
|
||||||
|
:model="configFormData"
|
||||||
|
:rules="configFormRules"
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<el-form-item label="选择人员：" prop="workerIds">
|
||||||
|
<el-select
|
||||||
|
v-model="configFormData.workerIds"
|
||||||
|
multiple
|
||||||
|
filterable
|
||||||
|
placeholder="请选择人员"
|
||||||
|
style="width: 100%"
|
||||||
|
:loading="personListLoading"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in personList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="`${item.name}(${item.idNumber})`"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="配置项：" prop="configItem">
|
||||||
|
<el-input
|
||||||
|
v-model="configFormData.configItem"
|
||||||
|
type="textarea"
|
||||||
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||||
|
placeholder="请输入配置项"
|
||||||
|
clearable
|
||||||
|
maxlength="500"
|
||||||
|
show-word-limit
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-row class="dialog-footer-btn">
|
||||||
|
<el-button size="medium" @click="handleCloseConfigDialog">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="medium"
|
||||||
|
type="primary"
|
||||||
|
@click="handleConfigSubmit"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
</DialogModel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel'
|
||||||
|
import DialogModel from '@/components/DialogModel'
|
||||||
|
import {
|
||||||
|
getPersonListByMacNoAPI,
|
||||||
|
getAllPersonListAPI,
|
||||||
|
deletePersonAPI,
|
||||||
|
batchDeletePersonAPI,
|
||||||
|
refreshAPI,
|
||||||
|
restartAPI,
|
||||||
|
sendDownAPI,
|
||||||
|
configAPI,
|
||||||
|
} from '@/api/system/attMacManage.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'RightTable',
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
DialogModel,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
macNo: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
proId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
subId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
teamId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 查询表单配置
|
||||||
|
formLabel: [
|
||||||
|
{
|
||||||
|
f_label: '关键字',
|
||||||
|
f_model: 'keyWord',
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_width: '180px',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
f_label: '人员编号',
|
||||||
|
f_model: 'userId',
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_width: '180px',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
f_label: '是否在库',
|
||||||
|
f_model: 'isOnDataBase',
|
||||||
|
f_type: 'sel',
|
||||||
|
f_width: '180px',
|
||||||
|
f_selList: [
|
||||||
|
{
|
||||||
|
label: '在库',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '不在库',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 表格列配置
|
||||||
|
columnsList: [
|
||||||
|
{
|
||||||
|
t_label: '人员编号',
|
||||||
|
t_props: 'userId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '姓名',
|
||||||
|
t_props: 'userName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '考勤机编号',
|
||||||
|
t_props: 'devCode',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
t_label: '人脸图片',
|
||||||
|
t_slot: 'faceImage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '是否在库',
|
||||||
|
t_slot: 'isOnDataBase',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '更新时间',
|
||||||
|
t_props: 'updateTime',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 下发弹框配置
|
||||||
|
sendDownDialogConfig: {
|
||||||
|
outerVisible: false,
|
||||||
|
outerTitle: '下发',
|
||||||
|
outerWidth: '50%',
|
||||||
|
maxHeight: '80vh',
|
||||||
|
},
|
||||||
|
// 配置弹框配置
|
||||||
|
configDialogConfig: {
|
||||||
|
outerVisible: false,
|
||||||
|
outerTitle: '配置',
|
||||||
|
outerWidth: '50%',
|
||||||
|
maxHeight: '80vh',
|
||||||
|
},
|
||||||
|
// 下发表单数据
|
||||||
|
sendDownFormData: {
|
||||||
|
workerIds: [],
|
||||||
|
|
||||||
|
// 未下发人员
|
||||||
|
unSendPersonIds: [],
|
||||||
|
// 已下发人员
|
||||||
|
sentPersonIds: [],
|
||||||
|
},
|
||||||
|
// 配置表单数据
|
||||||
|
configFormData: {
|
||||||
|
workerIds: [],
|
||||||
|
configItem: '',
|
||||||
|
},
|
||||||
|
// 下发表单校验规则
|
||||||
|
sendDownFormRules: {
|
||||||
|
unSendPersonIds: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择人员',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 配置表单校验规则
|
||||||
|
configFormRules: {
|
||||||
|
unSendPersonList: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择人员',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
configItem: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入配置项',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 人员列表
|
||||||
|
personList: [],
|
||||||
|
personListLoading: false,
|
||||||
|
allSelect: false,
|
||||||
|
selectedData: [],
|
||||||
|
// 未下发人员
|
||||||
|
unSendPersonList: [],
|
||||||
|
// 已下发人员
|
||||||
|
sentPersonList: [],
|
||||||
|
// 刷新倒计时（秒）
|
||||||
|
refreshCountdown: 0,
|
||||||
|
// 刷新倒计时定时器
|
||||||
|
refreshTimer: null,
|
||||||
|
// 重启倒计时（秒）
|
||||||
|
restartCountdown: 0,
|
||||||
|
// 重启倒计时定时器
|
||||||
|
restartTimer: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 根据是否有考勤机编号决定使用哪个API
|
||||||
|
requestApi() {
|
||||||
|
return this.macNo
|
||||||
|
? getPersonListByMacNoAPI
|
||||||
|
: getPersonListByMacNoAPI
|
||||||
|
},
|
||||||
|
// 传递给表格的查询参数
|
||||||
|
sendParams() {
|
||||||
|
return {
|
||||||
|
deviceCode: this.macNo || '',
|
||||||
|
proId: this.proId || '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
macNo: {
|
||||||
|
handler() {
|
||||||
|
// 当考勤机编号变化时，刷新表格
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件销毁前清理定时器
|
||||||
|
* 业务背景：避免组件销毁后定时器仍在运行导致的内存泄漏
|
||||||
|
* 设计决策：在组件销毁前清除所有定时器
|
||||||
|
*/
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.refreshTimer) {
|
||||||
|
clearInterval(this.refreshTimer)
|
||||||
|
this.refreshTimer = null
|
||||||
|
}
|
||||||
|
if (this.restartTimer) {
|
||||||
|
clearInterval(this.restartTimer)
|
||||||
|
this.restartTimer = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取表格列表（供父组件调用）
|
||||||
|
getTableList() {
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$modal
|
||||||
|
.confirm('确定要删除该人员吗？')
|
||||||
|
.then(() => {
|
||||||
|
deletePersonAPI({
|
||||||
|
deviceCode: this.macNo,
|
||||||
|
workerIds: [row.userId],
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
// 刷新考勤机
|
||||||
|
this.handleRefresh()
|
||||||
|
this.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
// 批量删除
|
||||||
|
handleBatchDelete() {
|
||||||
|
if (this.selectedData.length === 0) {
|
||||||
|
this.$modal.msgWarning('请选择要删除的数据')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$modal
|
||||||
|
.confirm(
|
||||||
|
'确定要删除选中的 ' +
|
||||||
|
this.selectedData.length +
|
||||||
|
' 条数据吗？',
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
const ids = this.selectedData.map((item) => item.userId)
|
||||||
|
deletePersonAPI({
|
||||||
|
deviceCode: this.macNo,
|
||||||
|
workerIds: ids,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('批量删除成功')
|
||||||
|
this.handleRefresh()
|
||||||
|
this.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
// 下发
|
||||||
|
handleSendDown() {
|
||||||
|
if (!this.macNo) {
|
||||||
|
this.$modal.msgWarning('请先选择考勤机')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.sendDownDialogConfig.outerVisible = true
|
||||||
|
this.resetSendDownForm()
|
||||||
|
this.getPersonList()
|
||||||
|
},
|
||||||
|
// 配置
|
||||||
|
handleConfig() {
|
||||||
|
if (!this.macNo) {
|
||||||
|
this.$modal.msgWarning('请先选择考勤机')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.configDialogConfig.outerVisible = true
|
||||||
|
this.resetConfigForm()
|
||||||
|
this.getPersonList()
|
||||||
|
},
|
||||||
|
// 获取人员列表
|
||||||
|
async getPersonList() {
|
||||||
|
this.personListLoading = true
|
||||||
|
try {
|
||||||
|
const res = await getAllPersonListAPI({
|
||||||
|
proId: this.proId,
|
||||||
|
deviceCode: this.macNo,
|
||||||
|
subId: this.subId,
|
||||||
|
teamId: this.teamId,
|
||||||
|
})
|
||||||
|
if (res.code === 200) {
|
||||||
|
// this.unSendPersonList = res?.data.map((item) => ({
|
||||||
|
// id: item.workerId,
|
||||||
|
// name: item.workerName,
|
||||||
|
// isSelected: false,
|
||||||
|
// }))
|
||||||
|
|
||||||
|
this.unSendPersonList = res?.data
|
||||||
|
.filter((item) => item.isIssue == 0)
|
||||||
|
.map((item) => ({
|
||||||
|
id: item.workerId,
|
||||||
|
name: item.workerName,
|
||||||
|
isSelected: false,
|
||||||
|
}))
|
||||||
|
|
||||||
|
this.sentPersonList = res?.data
|
||||||
|
.filter((item) => item.isIssue == 1)
|
||||||
|
.map((item) => ({
|
||||||
|
id: item.workerId,
|
||||||
|
name: item.workerName,
|
||||||
|
isSelected: false,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取人员列表失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.personListLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 关闭下发弹框
|
||||||
|
handleCloseSendDownDialog() {
|
||||||
|
this.sendDownDialogConfig.outerVisible = false
|
||||||
|
this.resetSendDownForm()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 重置下发表单
|
||||||
|
* 业务背景：关闭弹框或重新打开时需要清空表单数据
|
||||||
|
* 设计决策：需要重置所有表单字段，包括未下发和已下发人员ID数组，避免 undefined 导致的错误
|
||||||
|
*/
|
||||||
|
resetSendDownForm() {
|
||||||
|
this.sendDownFormData = {
|
||||||
|
workerIds: [],
|
||||||
|
// 未下发人员
|
||||||
|
unSendPersonIds: [],
|
||||||
|
// 已下发人员
|
||||||
|
sentPersonIds: [],
|
||||||
|
}
|
||||||
|
this.allSelect = false
|
||||||
|
if (this.$refs.sendDownFormRef) {
|
||||||
|
this.$refs.sendDownFormRef.resetFields()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 提交下发表单
|
||||||
|
* 业务背景：将选中的未下发人员下发到考勤机
|
||||||
|
* 设计决策：使用 unSendPersonIds 作为提交参数，因为表单绑定的是该字段
|
||||||
|
*/
|
||||||
|
handleSendDownSubmit() {
|
||||||
|
this.$refs.sendDownFormRef.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const params = {
|
||||||
|
deviceCode: this.macNo,
|
||||||
|
workerIds: this.sendDownFormData.unSendPersonIds,
|
||||||
|
}
|
||||||
|
sendDownAPI(params)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('下发成功')
|
||||||
|
this.handleCloseSendDownDialog()
|
||||||
|
this.handleRefresh()
|
||||||
|
this.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 关闭配置弹框
|
||||||
|
handleCloseConfigDialog() {
|
||||||
|
this.configDialogConfig.outerVisible = false
|
||||||
|
this.resetConfigForm()
|
||||||
|
},
|
||||||
|
// 重置配置表单
|
||||||
|
resetConfigForm() {
|
||||||
|
this.configFormData = {
|
||||||
|
workerIds: [],
|
||||||
|
configItem: '',
|
||||||
|
}
|
||||||
|
if (this.$refs.configFormRef) {
|
||||||
|
this.$refs.configFormRef.resetFields()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 提交配置表单
|
||||||
|
handleConfigSubmit() {
|
||||||
|
this.$refs.configFormRef.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const params = {
|
||||||
|
macNo: this.macNo,
|
||||||
|
workerIds: this.configFormData.workerIds,
|
||||||
|
configItem: this.configFormData.configItem,
|
||||||
|
}
|
||||||
|
configAPI(params)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('配置成功')
|
||||||
|
this.handleCloseConfigDialog()
|
||||||
|
this.getTableList()
|
||||||
|
this.$emit('refresh-tree')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 刷新考勤机
|
||||||
|
* 业务背景：刷新考勤机数据，获取最新的人员信息
|
||||||
|
* 设计决策：刷新成功后启动10秒倒计时，防止频繁刷新对服务器造成压力
|
||||||
|
*/
|
||||||
|
handleRefresh() {
|
||||||
|
if (!this.macNo) {
|
||||||
|
this.$modal.msgWarning('请先选择考勤机')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 如果正在倒计时，不允许刷新
|
||||||
|
if (this.refreshCountdown > 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
refreshAPI(this.macNo)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('刷新成功')
|
||||||
|
this.getTableList()
|
||||||
|
// 启动倒计时
|
||||||
|
this.startRefreshCountdown()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 启动刷新倒计时
|
||||||
|
* 业务背景：刷新成功后需要等待10秒才能再次刷新
|
||||||
|
* 设计决策：使用定时器每秒更新倒计时，倒计时结束后清除定时器
|
||||||
|
*/
|
||||||
|
startRefreshCountdown() {
|
||||||
|
// 清除之前的定时器
|
||||||
|
if (this.refreshTimer) {
|
||||||
|
clearInterval(this.refreshTimer)
|
||||||
|
this.refreshTimer = null
|
||||||
|
}
|
||||||
|
// 设置倒计时为10秒
|
||||||
|
this.refreshCountdown = 10
|
||||||
|
// 启动定时器，每秒减1
|
||||||
|
this.refreshTimer = setInterval(() => {
|
||||||
|
this.refreshCountdown--
|
||||||
|
if (this.refreshCountdown <= 0) {
|
||||||
|
// 倒计时结束，清除定时器
|
||||||
|
clearInterval(this.refreshTimer)
|
||||||
|
this.refreshTimer = null
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 重启考勤机
|
||||||
|
* 业务背景：重启考勤机设备，恢复设备状态
|
||||||
|
* 设计决策：重启成功后启动10秒倒计时，防止频繁重启对设备造成损害
|
||||||
|
*/
|
||||||
|
handleRestart() {
|
||||||
|
if (!this.macNo) {
|
||||||
|
this.$modal.msgWarning('请先选择考勤机')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 如果正在倒计时，不允许重启
|
||||||
|
if (this.restartCountdown > 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$modal
|
||||||
|
.confirm('确定要重启该考勤机吗？')
|
||||||
|
.then(() => {
|
||||||
|
restartAPI(this.macNo)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('重启成功')
|
||||||
|
// 启动倒计时
|
||||||
|
this.startRestartCountdown()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 启动重启倒计时
|
||||||
|
* 业务背景：重启成功后需要等待10秒才能再次重启
|
||||||
|
* 设计决策：使用定时器每秒更新倒计时，倒计时结束后清除定时器
|
||||||
|
*/
|
||||||
|
startRestartCountdown() {
|
||||||
|
// 清除之前的定时器
|
||||||
|
if (this.restartTimer) {
|
||||||
|
clearInterval(this.restartTimer)
|
||||||
|
this.restartTimer = null
|
||||||
|
}
|
||||||
|
// 设置倒计时为10秒
|
||||||
|
this.restartCountdown = 10
|
||||||
|
// 启动定时器，每秒减1
|
||||||
|
this.restartTimer = setInterval(() => {
|
||||||
|
this.restartCountdown--
|
||||||
|
if (this.restartCountdown <= 0) {
|
||||||
|
// 倒计时结束，清除定时器
|
||||||
|
clearInterval(this.restartTimer)
|
||||||
|
this.restartTimer = null
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 全选
|
||||||
|
handleAllSelectChange(val) {
|
||||||
|
if (val) {
|
||||||
|
this.sendDownFormData.unSendPersonIds =
|
||||||
|
this.unSendPersonList.map((item) => item.id)
|
||||||
|
|
||||||
|
this.sendDownFormData.sentPersonIds = this.sentPersonList.map(
|
||||||
|
(item) => item.id,
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.sendDownFormData.unSendPersonIds = []
|
||||||
|
this.sendDownFormData.sentPersonIds = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 未下发人员选择
|
||||||
|
handleUnSendPersonChange(value) {
|
||||||
|
if (
|
||||||
|
value.length == this.unSendPersonList.length &&
|
||||||
|
this.sendDownFormData.sentPersonIds.length ==
|
||||||
|
this.sentPersonList.length
|
||||||
|
) {
|
||||||
|
this.allSelect = true
|
||||||
|
} else {
|
||||||
|
this.allSelect = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 已下发人员选择
|
||||||
|
handleSentPersonChange(value) {
|
||||||
|
if (
|
||||||
|
value.length == this.sentPersonList.length &&
|
||||||
|
this.sendDownFormData.unSendPersonIds.length ==
|
||||||
|
this.unSendPersonList.length
|
||||||
|
) {
|
||||||
|
this.allSelect = true
|
||||||
|
} else {
|
||||||
|
this.allSelect = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectionChange(e) {
|
||||||
|
this.selectedData = e
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.table-card {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
::v-deep .el-card__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer-btn {
|
||||||
|
text-align: right;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%; overflow: hidden">
|
||||||
|
<el-card class="table-card" shadow="hover">
|
||||||
|
<div class="table-container">
|
||||||
|
<TableModel
|
||||||
|
:formLabel="formLabel"
|
||||||
|
:columnsList="columnsList"
|
||||||
|
:request-api="requestApi"
|
||||||
|
:showOperation="false"
|
||||||
|
:isSelectShow="true"
|
||||||
|
:sendParams="sendParams"
|
||||||
|
:isIndexShow="false"
|
||||||
|
ref="tableRef"
|
||||||
|
:pageSizes="[100, 200, 500]"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<template slot="btn">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
:disabled="selectedData.length === 0"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template slot="transStatus" slot-scope="{ data }">
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="info"
|
||||||
|
v-if="data.transStatus == 0"
|
||||||
|
>
|
||||||
|
待执行
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
v-if="data.transStatus == 1"
|
||||||
|
>
|
||||||
|
执行中
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
v-if="data.transStatus == 2"
|
||||||
|
>
|
||||||
|
已完成
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
v-if="data.transStatus == 3"
|
||||||
|
>
|
||||||
|
任务繁忙-人员占用
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
v-if="
|
||||||
|
data.transStatus == 4 || data.transStatus == 5
|
||||||
|
"
|
||||||
|
>
|
||||||
|
失败
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</TableModel>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel'
|
||||||
|
import {
|
||||||
|
getTaskHistoryListAPI,
|
||||||
|
batchDeleteTaskAPI,
|
||||||
|
} from '@/api/system/attMacManage.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TaskHistoryList',
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
macNo: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
proId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 查询表单配置
|
||||||
|
formLabel: [
|
||||||
|
{
|
||||||
|
f_label: '任务编码',
|
||||||
|
f_model: 'cmdCode',
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_width: '180px',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
f_label: '任务名称',
|
||||||
|
f_model: 'cmdName',
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_width: '180px',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
f_label: '执行状态',
|
||||||
|
f_model: 'transStatus',
|
||||||
|
f_type: 'sel',
|
||||||
|
f_width: '180px',
|
||||||
|
f_selList: [
|
||||||
|
{
|
||||||
|
label: '待执行',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '执行中',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '已完成',
|
||||||
|
value: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '任务繁忙-人员占用',
|
||||||
|
value: '3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '失败',
|
||||||
|
value: '4',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 表格列配置
|
||||||
|
columnsList: [
|
||||||
|
{
|
||||||
|
t_label: '任务ID',
|
||||||
|
t_props: 'taskId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '任务编号',
|
||||||
|
t_props: 'cmdCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '任务名称',
|
||||||
|
t_props: 'cmdName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '请求参数',
|
||||||
|
t_props: 'cmdParam',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '执行时间',
|
||||||
|
t_props: 'exeTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '创建时间',
|
||||||
|
t_props: 'createTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '状态',
|
||||||
|
t_slot: 'transStatus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '异常内容',
|
||||||
|
t_props: 'msg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selectedData: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// API接口
|
||||||
|
requestApi() {
|
||||||
|
return getTaskHistoryListAPI
|
||||||
|
},
|
||||||
|
// 传递给表格的查询参数
|
||||||
|
sendParams() {
|
||||||
|
return {
|
||||||
|
deviceCode: this.macNo || '',
|
||||||
|
pageSize: 100,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
macNo: {
|
||||||
|
handler() {
|
||||||
|
// 当考勤机编号变化时，刷新表格
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取表格列表（供父组件调用）
|
||||||
|
getTableList() {
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.selectedData = val
|
||||||
|
},
|
||||||
|
handleBatchDelete() {
|
||||||
|
if (this.selectedData.length === 0) {
|
||||||
|
this.$modal.msgWarning('请选择要删除的数据')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$modal
|
||||||
|
.confirm(
|
||||||
|
'确定要删除选中的 ' +
|
||||||
|
this.selectedData.length +
|
||||||
|
' 条数据吗？',
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
const ids = this.selectedData.map((item) => item.taskId)
|
||||||
|
batchDeleteTaskAPI({
|
||||||
|
taskId: ids.join(','),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('批量删除成功')
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.table-card {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
::v-deep .el-card__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,271 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%; overflow: hidden">
|
||||||
|
<el-card class="table-card" shadow="hover">
|
||||||
|
<div class="table-container">
|
||||||
|
<TableModel
|
||||||
|
:formLabel="formLabel"
|
||||||
|
:columnsList="columnsList"
|
||||||
|
:request-api="requestApi"
|
||||||
|
:showOperation="false"
|
||||||
|
:isSelectShow="true"
|
||||||
|
:isIndexShow="false"
|
||||||
|
:sendParams="sendParams"
|
||||||
|
:pageSizes="[100, 200, 500]"
|
||||||
|
ref="tableRef"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<template slot="btn">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
:disabled="selectedData.length === 0"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template slot="transStatus" slot-scope="{ data }">
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="info"
|
||||||
|
v-if="data.transStatus == 0"
|
||||||
|
>
|
||||||
|
待执行
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
v-if="data.transStatus == 1"
|
||||||
|
>
|
||||||
|
执行中
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
v-if="data.transStatus == 2"
|
||||||
|
>
|
||||||
|
已完成
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
v-if="data.transStatus == 3"
|
||||||
|
>
|
||||||
|
任务繁忙-人员占用
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
v-if="
|
||||||
|
data.transStatus == 4 || data.transStatus == 5
|
||||||
|
"
|
||||||
|
>
|
||||||
|
失败
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</TableModel>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel'
|
||||||
|
import { getTaskListAPI, deleteTaskAPI } from '@/api/system/attMacManage.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TaskHistoryList',
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
macNo: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
proId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 查询表单配置
|
||||||
|
formLabel: [
|
||||||
|
{
|
||||||
|
f_label: '任务编码',
|
||||||
|
f_model: 'cmdCode',
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_width: '180px',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
f_label: '任务名称',
|
||||||
|
f_model: 'cmdName',
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_width: '180px',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
f_label: '执行状态',
|
||||||
|
f_model: 'transStatus',
|
||||||
|
f_type: 'sel',
|
||||||
|
f_width: '180px',
|
||||||
|
f_selList: [
|
||||||
|
{
|
||||||
|
label: '待执行',
|
||||||
|
value: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '执行中',
|
||||||
|
value: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '已完成',
|
||||||
|
value: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '任务繁忙-人员占用',
|
||||||
|
value: '3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '失败',
|
||||||
|
value: '4',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 表格列配置
|
||||||
|
columnsList: [
|
||||||
|
{
|
||||||
|
t_label: '任务ID',
|
||||||
|
t_props: 'taskId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '任务编号',
|
||||||
|
t_props: 'cmdCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '任务名称',
|
||||||
|
t_props: 'cmdName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '请求参数',
|
||||||
|
t_props: 'cmdParam',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '执行时间',
|
||||||
|
t_props: 'exeTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '创建时间',
|
||||||
|
t_props: 'createTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '状态',
|
||||||
|
t_slot: 'transStatus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t_label: '异常内容',
|
||||||
|
t_props: 'msg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selectedData: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// API接口
|
||||||
|
requestApi() {
|
||||||
|
return getTaskListAPI
|
||||||
|
},
|
||||||
|
// 传递给表格的查询参数
|
||||||
|
sendParams() {
|
||||||
|
return {
|
||||||
|
deviceCode: this.macNo || '',
|
||||||
|
pageSize: 100,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
macNo: {
|
||||||
|
handler() {
|
||||||
|
// 当考勤机编号变化时，刷新表格
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取表格列表（供父组件调用）
|
||||||
|
getTableList() {
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.selectedData = val
|
||||||
|
},
|
||||||
|
handleBatchDelete() {
|
||||||
|
// console.log(this.selectedData)
|
||||||
|
if (this.selectedData.length === 0) {
|
||||||
|
this.$modal.msgWarning('请选择要删除的数据')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$modal
|
||||||
|
.confirm(
|
||||||
|
'确定要删除选中的 ' +
|
||||||
|
this.selectedData.length +
|
||||||
|
' 条数据吗？',
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
const ids = this.selectedData.map((item) => item.taskId)
|
||||||
|
deleteTaskAPI({
|
||||||
|
taskId: ids.join(','),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('批量删除成功')
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.table-card {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
::v-deep .el-card__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<!-- 左侧树形组件 -->
|
||||||
|
<el-col :span="6" :xs="24">
|
||||||
|
<leftTree ref="leftTreeRef" @node-click="handleNodeClick" />
|
||||||
|
</el-col>
|
||||||
|
<!-- 右侧表格组件 -->
|
||||||
|
<el-col :span="18" :xs="24">
|
||||||
|
<div class="right-content">
|
||||||
|
<!-- 切换按钮 -->
|
||||||
|
<div class="tab-switch">
|
||||||
|
<div class="tab-switch-left">
|
||||||
|
<el-radio-group v-model="activeTab" size="medium">
|
||||||
|
<el-radio-button label="person"
|
||||||
|
>人员列表</el-radio-button
|
||||||
|
>
|
||||||
|
<el-radio-button label="task"
|
||||||
|
>任务列表</el-radio-button
|
||||||
|
>
|
||||||
|
<el-radio-button label="taskHistory"
|
||||||
|
>任务历史</el-radio-button
|
||||||
|
>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<div class="tab-switch-right">
|
||||||
|
<div class="selected-node-info">
|
||||||
|
<i class="el-icon-location-outline"></i>
|
||||||
|
<span class="label">当前节点：</span>
|
||||||
|
<span class="value">{{
|
||||||
|
selectedNodeName || '未选择'
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-content-table">
|
||||||
|
<component
|
||||||
|
:is="currentComponent"
|
||||||
|
ref="currentTableRef"
|
||||||
|
:mac-no="selectedMacNo"
|
||||||
|
:pro-id="selectedProId"
|
||||||
|
:sub-id="selectedSubId"
|
||||||
|
:team-id="selectedTeamId"
|
||||||
|
@refresh-tree="handleRefreshTree"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import leftTree from './components/leftTree.vue'
|
||||||
|
import rightTable from './components/rightTable.vue'
|
||||||
|
import taskList from './components/taskList.vue'
|
||||||
|
import taskHistoryList from './components/taskHistoryList.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AttMacManage',
|
||||||
|
components: {
|
||||||
|
leftTree,
|
||||||
|
rightTable,
|
||||||
|
taskList,
|
||||||
|
taskHistoryList,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedMacNo: '', // 选中的考勤机编号
|
||||||
|
selectedProId: '', // 选中的工程id
|
||||||
|
selectedSubId: '', // 选中的分包id
|
||||||
|
selectedTeamId: '', // 选中的班组id
|
||||||
|
selectedNodeName: '', // 选中的节点名称
|
||||||
|
activeTab: 'person', // 当前激活的标签页
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前组件名称
|
||||||
|
currentComponent() {
|
||||||
|
const componentMap = {
|
||||||
|
person: 'rightTable',
|
||||||
|
task: 'taskList',
|
||||||
|
taskHistory: 'taskHistoryList',
|
||||||
|
}
|
||||||
|
return componentMap[this.activeTab] || 'rightTable'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 树节点点击事件
|
||||||
|
handleNodeClick(data) {
|
||||||
|
console.log('data选择的节点', data)
|
||||||
|
|
||||||
|
this.selectedMacNo = data.id
|
||||||
|
this.selectedProId = data.proId
|
||||||
|
this.selectedSubId = data.subId
|
||||||
|
this.selectedTeamId = data.teamId
|
||||||
|
|
||||||
|
this.selectedNodeName = data.name
|
||||||
|
// if (data.level === 2) {
|
||||||
|
// // 二级节点（考勤机）
|
||||||
|
// this.selectedMacNo = data.id
|
||||||
|
// } else {
|
||||||
|
// // 一级节点（工程）或根节点，显示所有人员
|
||||||
|
// this.selectedMacNo = ''
|
||||||
|
// }
|
||||||
|
// 刷新右侧表格
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.refreshCurrentTable()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 刷新当前表格
|
||||||
|
refreshCurrentTable() {
|
||||||
|
const ref = this.$refs.currentTableRef
|
||||||
|
if (ref && ref.getTableList) {
|
||||||
|
ref.getTableList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 标签页切换
|
||||||
|
handleTabChange(val) {
|
||||||
|
console.log('val', val)
|
||||||
|
// 切换标签页后刷新当前表格
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.refreshCurrentTable()
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
// 刷新左侧树
|
||||||
|
handleRefreshTree() {
|
||||||
|
if (this.$refs.leftTreeRef) {
|
||||||
|
this.$refs.leftTreeRef.getTreeData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.app-container {
|
||||||
|
// height: calc(100vh - 120px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-row {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-switch {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-switch-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-switch-right {
|
||||||
|
margin-left: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-node-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 16px;
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #409eff;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #909399;
|
||||||
|
margin-right: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
max-width: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content-table {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-radio-group {
|
||||||
|
.el-radio-button__inner {
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue