考勤机管理等页面接口调试
This commit is contained in:
BianLzhaoMin
parent
0f4440dfeb
commit
a05ea7ebc9
|
|
@ -29,7 +29,7 @@ export function getAllPersonListAPI(params) {
|
|||
// 删除人员
|
||||
export function deletePersonAPI(data) {
|
||||
return request({
|
||||
url: '/bmw/kqManager/delWorkerByDevice/',
|
||||
url: '/bmw/kqManager/delWorkerByDevice',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
|
|
@ -79,3 +79,39 @@ export function restartAPI(macNo) {
|
|||
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(ids) {
|
||||
return request({
|
||||
url: '/system/attMacManage/delHisTaskById',
|
||||
method: 'post',
|
||||
data: { ids },
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -529,6 +529,7 @@ export default {
|
|||
|
||||
handleSelectionChange(e) {
|
||||
this.selectedData = e
|
||||
this.$emit('selection-change', e)
|
||||
},
|
||||
|
||||
/* 时间change事件 */
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
:showRightTools="true"
|
||||
ref="subEntryTableRef"
|
||||
:columnsList="columnsList"
|
||||
:sendParams="{
|
||||
subEinStatus: 1,
|
||||
}"
|
||||
:request-api="getSubEntryListAPI"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
:showRightTools="true"
|
||||
ref="teamEntryTableRef"
|
||||
:columnsList="columnsList"
|
||||
:sendParams="{
|
||||
teamEinStatus: 1,
|
||||
}"
|
||||
:request-api="getTeamEntryListAPI"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
|
|
|
|||
|
|
@ -22,8 +22,24 @@
|
|||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node }">
|
||||
<span>{{ node.label }}</span>
|
||||
<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>
|
||||
<span
|
||||
class="node-label"
|
||||
:class="getNodeLabelClass(node.data)"
|
||||
>{{ node.label }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
|
@ -58,47 +74,11 @@ export default {
|
|||
async getTreeData() {
|
||||
try {
|
||||
const res = await getProjectAndMacTreeAPI()
|
||||
|
||||
if (res.code === 200) {
|
||||
this.treeData = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取树形数据失败:', error)
|
||||
// 模拟数据，实际使用时删除
|
||||
this.treeData = [
|
||||
{
|
||||
id: '1',
|
||||
label: '工程1',
|
||||
level: 1,
|
||||
children: [
|
||||
{
|
||||
id: '1-1',
|
||||
label: '考勤机001',
|
||||
macNo: 'MAC001',
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: '1-2',
|
||||
label: '考勤机002',
|
||||
macNo: 'MAC002',
|
||||
level: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: '工程2',
|
||||
level: 1,
|
||||
children: [
|
||||
{
|
||||
id: '2-1',
|
||||
label: '考勤机003',
|
||||
macNo: 'MAC003',
|
||||
level: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
// 树节点过滤
|
||||
|
|
@ -110,15 +90,45 @@ export default {
|
|||
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 ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-card {
|
||||
height: calc(100vh - 120px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
flex: 1;
|
||||
|
|
@ -126,6 +136,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
@ -138,9 +149,11 @@ export default {
|
|||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-height: 0;
|
||||
|
||||
.head-container {
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,6 +165,45 @@ export default {
|
|||
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;
|
||||
}
|
||||
|
||||
&.node-online {
|
||||
.node-label {
|
||||
color: #67c23a;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="height: 100%; overflow: hidden">
|
||||
<el-card class="table-card" shadow="hover">
|
||||
<div class="table-container">
|
||||
<TableModel
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
:isSelectShow="true"
|
||||
:sendParams="sendParams"
|
||||
ref="tableRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template slot="btn">
|
||||
<el-button
|
||||
|
|
@ -64,6 +65,31 @@
|
|||
删除
|
||||
</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>
|
||||
|
|
@ -80,33 +106,47 @@
|
|||
:rules="sendDownFormRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="选择人员：" prop="personIds">
|
||||
<el-select
|
||||
v-model="sendDownFormData.personIds"
|
||||
<el-form-item
|
||||
:label="
|
||||
sendDownFormData.allSelect ? '取消全选' : '全选'
|
||||
"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="allSelect"
|
||||
@change="handleAllSelectChange"
|
||||
>
|
||||
{{ `${allSelect ? '取消全选' : '全选'}` }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择人员：" prop="workerIds">
|
||||
<!-- <el-select
|
||||
multiple
|
||||
filterable
|
||||
placeholder="请选择人员"
|
||||
style="width: 100%"
|
||||
placeholder="请选择人员"
|
||||
:loading="personListLoading"
|
||||
v-model="sendDownFormData.workerIds"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in personList"
|
||||
:key="item.id"
|
||||
:label="`${item.name}(${item.idNumber})`"
|
||||
:value="item.id"
|
||||
v-for="item in personList"
|
||||
:label="`${item.name}`"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="下发内容：" prop="content">
|
||||
<el-input
|
||||
v-model="sendDownFormData.content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
placeholder="请输入下发内容"
|
||||
clearable
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-select> -->
|
||||
|
||||
<el-checkbox-group
|
||||
v-model="sendDownFormData.workerIds"
|
||||
@change="handlePersonChange"
|
||||
>
|
||||
<el-checkbox
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
v-for="item in personList"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row class="dialog-footer-btn">
|
||||
|
|
@ -136,9 +176,9 @@
|
|||
:rules="configFormRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="选择人员：" prop="personIds">
|
||||
<el-form-item label="选择人员：" prop="workerIds">
|
||||
<el-select
|
||||
v-model="configFormData.personIds"
|
||||
v-model="configFormData.workerIds"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="请选择人员"
|
||||
|
|
@ -217,44 +257,60 @@ export default {
|
|||
// 查询表单配置
|
||||
formLabel: [
|
||||
{
|
||||
f_label: '姓名',
|
||||
f_model: 'name',
|
||||
f_label: '关键字',
|
||||
f_model: 'keyWord',
|
||||
f_type: 'ipt',
|
||||
f_width: '180px',
|
||||
},
|
||||
{
|
||||
f_label: '身份证号',
|
||||
f_model: 'idNumber',
|
||||
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: 'name',
|
||||
},
|
||||
{
|
||||
t_label: '身份证号',
|
||||
t_props: 'idNumber',
|
||||
},
|
||||
{
|
||||
t_label: '手机号',
|
||||
t_props: 'phone',
|
||||
},
|
||||
{
|
||||
t_label: '工种',
|
||||
t_props: 'postName',
|
||||
t_props: 'userName',
|
||||
},
|
||||
{
|
||||
t_label: '考勤机编号',
|
||||
t_props: 'macNo',
|
||||
t_props: 'devCode',
|
||||
},
|
||||
|
||||
{
|
||||
t_label: '人脸图片',
|
||||
t_slot: 'faceImage',
|
||||
},
|
||||
{
|
||||
t_label: '绑定时间',
|
||||
t_props: 'bindTime',
|
||||
t_width: '180',
|
||||
t_label: '是否在库',
|
||||
t_slot: 'isOnDataBase',
|
||||
},
|
||||
{
|
||||
t_label: '更新时间',
|
||||
t_props: 'updateTime',
|
||||
},
|
||||
],
|
||||
// 下发弹框配置
|
||||
|
|
@ -273,17 +329,16 @@ export default {
|
|||
},
|
||||
// 下发表单数据
|
||||
sendDownFormData: {
|
||||
personIds: [],
|
||||
content: '',
|
||||
workerIds: [],
|
||||
},
|
||||
// 配置表单数据
|
||||
configFormData: {
|
||||
personIds: [],
|
||||
workerIds: [],
|
||||
configItem: '',
|
||||
},
|
||||
// 下发表单校验规则
|
||||
sendDownFormRules: {
|
||||
personIds: [
|
||||
workerIds: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择人员',
|
||||
|
|
@ -300,7 +355,7 @@ export default {
|
|||
},
|
||||
// 配置表单校验规则
|
||||
configFormRules: {
|
||||
personIds: [
|
||||
workerIds: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择人员',
|
||||
|
|
@ -318,6 +373,8 @@ export default {
|
|||
// 人员列表
|
||||
personList: [],
|
||||
personListLoading: false,
|
||||
allSelect: false,
|
||||
selectedData: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -331,12 +388,9 @@ export default {
|
|||
sendParams() {
|
||||
return {
|
||||
deviceCode: this.macNo || '',
|
||||
proId: this.proId || '',
|
||||
}
|
||||
},
|
||||
// 获取选中的数据
|
||||
selectedData() {
|
||||
return this.$refs.tableRef?.selectedData || []
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
macNo: {
|
||||
|
|
@ -363,12 +417,16 @@ export default {
|
|||
this.$modal
|
||||
.confirm('确定要删除该人员吗？')
|
||||
.then(() => {
|
||||
deletePersonAPI(row.id)
|
||||
deletePersonAPI({
|
||||
deviceCode: this.macNo,
|
||||
workerIds: [row.userId],
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
// 刷新考勤机
|
||||
this.handleRefresh()
|
||||
this.getTableList()
|
||||
this.$emit('refresh-tree')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
|
|
@ -388,13 +446,16 @@ export default {
|
|||
' 条数据吗？',
|
||||
)
|
||||
.then(() => {
|
||||
const ids = this.selectedData.map((item) => item.id)
|
||||
batchDeletePersonAPI(ids)
|
||||
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()
|
||||
this.$emit('refresh-tree')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
|
|
@ -429,7 +490,11 @@ export default {
|
|||
proId: this.proId,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
this.personList = res.rows || res.data || []
|
||||
this.personList = res?.data.map((item) => ({
|
||||
id: item.workerId,
|
||||
name: item.workerName,
|
||||
isSelected: false,
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取人员列表失败:', error)
|
||||
|
|
@ -445,8 +510,7 @@ export default {
|
|||
// 重置下发表单
|
||||
resetSendDownForm() {
|
||||
this.sendDownFormData = {
|
||||
personIds: [],
|
||||
content: '',
|
||||
workerIds: [],
|
||||
}
|
||||
if (this.$refs.sendDownFormRef) {
|
||||
this.$refs.sendDownFormRef.resetFields()
|
||||
|
|
@ -457,17 +521,16 @@ export default {
|
|||
this.$refs.sendDownFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
const params = {
|
||||
macNo: this.macNo,
|
||||
personIds: this.sendDownFormData.personIds,
|
||||
content: this.sendDownFormData.content,
|
||||
deviceCode: this.macNo,
|
||||
workerIds: this.sendDownFormData.workerIds,
|
||||
}
|
||||
sendDownAPI(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('下发成功')
|
||||
this.handleCloseSendDownDialog()
|
||||
this.handleRefresh()
|
||||
this.getTableList()
|
||||
this.$emit('refresh-tree')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
|
|
@ -482,7 +545,7 @@ export default {
|
|||
// 重置配置表单
|
||||
resetConfigForm() {
|
||||
this.configFormData = {
|
||||
personIds: [],
|
||||
workerIds: [],
|
||||
configItem: '',
|
||||
}
|
||||
if (this.$refs.configFormRef) {
|
||||
|
|
@ -495,7 +558,7 @@ export default {
|
|||
if (valid) {
|
||||
const params = {
|
||||
macNo: this.macNo,
|
||||
personIds: this.configFormData.personIds,
|
||||
workerIds: this.configFormData.workerIds,
|
||||
configItem: this.configFormData.configItem,
|
||||
}
|
||||
configAPI(params)
|
||||
|
|
@ -545,15 +608,35 @@ export default {
|
|||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
// 全选
|
||||
handleAllSelectChange(val) {
|
||||
if (val) {
|
||||
this.sendDownFormData.workerIds = this.personList.map(
|
||||
(item) => item.id,
|
||||
)
|
||||
} else {
|
||||
this.sendDownFormData.workerIds = []
|
||||
}
|
||||
},
|
||||
// 人员选择
|
||||
handlePersonChange(value) {
|
||||
console.log(value)
|
||||
},
|
||||
|
||||
handleSelectionChange(e) {
|
||||
this.selectedData = e
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-card {
|
||||
height: calc(100vh - 120px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
flex: 1;
|
||||
|
|
@ -561,6 +644,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
@ -571,9 +655,10 @@ export default {
|
|||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-height: 0;
|
||||
height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
|
||||
}
|
||||
|
||||
.dialog-footer-btn {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,225 @@
|
|||
<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="false"
|
||||
:sendParams="sendParams"
|
||||
ref="tableRef"
|
||||
>
|
||||
<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 } 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',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// API接口
|
||||
requestApi() {
|
||||
return getTaskHistoryListAPI
|
||||
},
|
||||
// 传递给表格的查询参数
|
||||
sendParams() {
|
||||
return {
|
||||
deviceCode: this.macNo || '',
|
||||
}
|
||||
},
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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,268 @@
|
|||
<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="false"
|
||||
:sendParams="sendParams"
|
||||
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 || '',
|
||||
}
|
||||
},
|
||||
},
|
||||
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)
|
||||
deletePersonAPI({
|
||||
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>
|
||||
|
|
@ -7,12 +7,32 @@
|
|||
</el-col>
|
||||
<!-- 右侧表格组件 -->
|
||||
<el-col :span="18" :xs="24">
|
||||
<rightTable
|
||||
ref="rightTableRef"
|
||||
:mac-no="selectedMacNo"
|
||||
:pro-id="selectedProId"
|
||||
@refresh-tree="handleRefreshTree"
|
||||
/>
|
||||
<div class="right-content">
|
||||
<!-- 切换按钮 -->
|
||||
<div class="tab-switch">
|
||||
<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="right-content-table">
|
||||
<component
|
||||
:is="currentComponent"
|
||||
ref="currentTableRef"
|
||||
:mac-no="selectedMacNo"
|
||||
:pro-id="selectedProId"
|
||||
@refresh-tree="handleRefreshTree"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -21,19 +41,35 @@
|
|||
<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
|
||||
activeTab: 'person', // 当前激活的标签页
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前组件名称
|
||||
currentComponent() {
|
||||
const componentMap = {
|
||||
person: 'rightTable',
|
||||
task: 'taskList',
|
||||
taskHistory: 'taskHistoryList',
|
||||
}
|
||||
return componentMap[this.activeTab] || 'rightTable'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 树节点点击事件
|
||||
handleNodeClick(data) {
|
||||
|
|
@ -50,11 +86,24 @@ export default {
|
|||
// }
|
||||
// 刷新右侧表格
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.rightTableRef) {
|
||||
this.$refs.rightTableRef.getTableList()
|
||||
}
|
||||
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) {
|
||||
|
|
@ -65,4 +114,52 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<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 {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding-left: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.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