<script setup name="LockTask">
|
import { ref, onMounted, reactive, computed, watchEffect, nextTick } from "vue";
|
import addTask from "./addTask.vue";
|
import {
|
getLockBl,
|
setLockBl,
|
cancelLockBl,
|
} from "@/api/lockManager.js";
|
|
import { checkSnId } from '@/api/user.js';
|
import useStation from "@/hooks/useStationList.js";
|
import useElement from "@/hooks/useElement.js";
|
const { stationName1, stationName2, stationName3, stationName4,
|
stationList1, stationList2, stationList3, stationList4,
|
} = useStation();
|
|
const { $loading, $message, $confirm, $confirmPwdDo } = useElement();
|
|
const tableData = ref([]);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
|
const addVisible = ref(false);
|
|
const filter = reactive({
|
name: "",
|
type: undefined,
|
});
|
|
function getList() {
|
let params = {
|
pageNum: pageNum.value,
|
pageSize: pageSize.value,
|
lockName: filter.name.trim() || undefined,
|
stationName1: stationName1.value || undefined,
|
stationName2: stationName2.value || undefined,
|
stationName3: stationName3.value || undefined,
|
stationName4: stationName4.value || undefined
|
};
|
|
getLockBl(params).then((res) => {
|
let { code, data, data2 } = res;
|
let _total = 0;
|
let _list = [];
|
if (code && data) {
|
_list = data2.list.map(v => ({
|
...v,
|
state: { 1: '生效', 2: '已取消' }[v.type],
|
}));
|
_total = data2.total;
|
}
|
tableData.value = _list;
|
total.value = _total;
|
});
|
}
|
|
|
function add() {
|
console.log('add', '=============');
|
addVisible.value = true;
|
}
|
|
function handleSizeChange(val) {
|
pageSize.value = val;
|
getList();
|
}
|
|
function handleCurrentChange(val) {
|
pageNum.value = val;
|
getList();
|
}
|
|
function cancel(scope) {
|
// console.log('row', scope.row, '=============');
|
$confirmPwdDo(() => {
|
let loading = $loading();
|
cancelLockBl(scope.row.num).then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
// console.log(data);
|
$message.success('操作成功');
|
getList();
|
} else {
|
$message.error('操作失败');
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
});
|
|
}
|
|
function okHandle() {
|
addVisible.value = false;
|
getList();
|
}
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
<!-- <div class="hdw-card-container">
|
<yc-card title="区域列表" is-full>
|
<hdw-tree @item-click="itemClickHandler"></hdw-tree>
|
</yc-card>
|
</div> -->
|
</div>
|
<div class="page-content">
|
<yc-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<el-button type="primary" size="small" @click="add"
|
><svg-icon icon-class="add"></svg-icon>添加</el-button
|
>
|
|
|
<div class="tools-filter">
|
<div class="tools-filter-item">
|
<div class="filter-label">省：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="stationName1"
|
clearable
|
placeholder="请选择"
|
@change="() => nextTick(() => getList())"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList1"
|
:key="'province_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">市：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="stationName2"
|
clearable
|
placeholder="请选择"
|
@change="() => nextTick(() => getList())"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList2"
|
:key="'city_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">区县：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="stationName3"
|
clearable
|
placeholder="请选择"
|
@change="() => nextTick(() => getList())"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList3"
|
:key="'list2_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">机房：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="stationName4"
|
clearable
|
placeholder="请选择"
|
@change="() => nextTick(() => getList())"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList4"
|
:key="'list3_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</div>
|
</div>
|
|
<div class="tools-filter-item">
|
<div class="filter-label">锁具名称：</div>
|
<div class="filter-content">
|
<el-input
|
@input="getList"
|
placeholder="请输入锁具名称..."
|
v-model="filter.name"
|
size="small"
|
></el-input>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">生效状态：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="filter.type"
|
placeholder="请选择"
|
@change="getList"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option label="全部" value="" />
|
<el-option label="生效" :value="1" />
|
<el-option label="已取消" :value="2" />
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<el-button type="primary" size="small" @click="getList"
|
><svg-icon icon-class="search"></svg-icon>查询</el-button
|
>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table
|
stripe
|
:data="tableData"
|
border
|
style="width: 100%; height: 100%"
|
>
|
<el-table-column type="index" fixed="left" width="50" />
|
<el-table-column prop="lockId" label="锁具ID" width="180" />
|
<el-table-column
|
prop="lockName"
|
label="锁具名称"
|
width="180"
|
/>
|
<el-table-column prop="stationName" label="机房" />
|
<el-table-column prop="state" label="生效状态" width="180" />
|
<el-table-column
|
prop="startTime"
|
label="开始时间"
|
width="180"
|
/>
|
<el-table-column
|
prop="stopTime"
|
label="结束时间"
|
width="180"
|
/>
|
<el-table-column
|
align="center"
|
fixed="right"
|
label="操作"
|
width="200"
|
>
|
<template #default="scope">
|
<el-button
|
type="primary"
|
size="small"
|
v-if="scope.row.type == 1"
|
@click="cancel(scope)"
|
>取消</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination
|
v-model:current-page="pageNum"
|
v-model:page-size="pageSize"
|
:page-sizes="[10,20, 40, 60, 80, 100, 200, 300, 400]"
|
size="small"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer"></div>
|
<!-- 编辑 新建 -->
|
<el-dialog
|
v-model="addVisible"
|
title="新增计划"
|
width="500"
|
align-center
|
:close-on-click-modal="false"
|
:z-index="1000"
|
>
|
<add-task
|
v-if="addVisible"
|
@close="addVisible = false"
|
@ok="okHandle"
|
></add-task>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 320px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
|
.page-content-tools {
|
display: flex;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
&+.item {
|
margin-left: 20px;
|
}
|
|
.label {
|
&::after {
|
content: ":";
|
}
|
}
|
|
.value {
|
margin-left: 8px;
|
font-weight: bold;
|
color: #090;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.dialog-title {
|
color: #000;
|
font-size: 16px;
|
padding-left: 0.8em;
|
}
|
|
:deep(.el-dialog__body) {
|
flex: 1;
|
}
|
</style>
|
