<template>
<div class="app-container">
<el-form :model="queryParams"
ref="queryRef"
:inline="true"
v-show="showSearch"
label-width="68px">
<el-form-item label="分类名称"
prop="name">
<el-input v-model="queryParams.name"
placeholder="请输入分类名称"
clearable
@keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="父级id 1级为0"
prop="parentId">
<el-input v-model="queryParams.parentId"
placeholder="请输入父级id 1级为0"
clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="负责人名称"
prop="dutyUser">
<el-input v-model="queryParams.dutyUser"
placeholder="请输入负责人名称"
clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="手机号"
prop="phone">
<el-input v-model="queryParams.phone"
placeholder="请输入手机号"
clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="职位"
prop="position">
<el-input v-model="queryParams.position"
placeholder="请输入职位"
clearable
@keyup.enter="handleQuery" />
</el-form-item> -->
<el-form-item>
<el-button type="primary"
icon="Search"
@click="handleQuery">搜索</el-button>
<el-button icon="Refresh"
@click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10"
class="mb8">
<el-col :span="1.5">
<el-button type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['cameraResource:cameraGroupInfo:add']">新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['cameraResource:cameraGroupInfo:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['cameraResource:cameraGroupInfo:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['cameraResource:cameraGroupInfo:export']">导出</el-button>
</el-col> -->
<right-toolbar v-model:showSearch="showSearch"
@queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading"
:data="cameraGroupInfoList"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55"
align="center" />
<el-table-column label="分类名称"
align="center"
prop="name" />
<el-table-column label="摄像头数量"
align="center"
prop="number" />
<el-table-column label="创建时间"
align="center"
prop="createTime" />
<el-table-column label="更新时间"
align="center"
prop="updateTime" />
<el-table-column label="操作"
align="center"
class-name="small-padding fixed-width">
<template #default="scope">
<el-button link
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['cameraResource:cameraGroupInfo:edit']">修改</el-button>
<el-button link
type="primary"
icon="Edit"
@click="handleconfiguration(scope.row)"
v-hasPermi="['business:floodControlDepartment:edit']">配置摄像头</el-button>
<!-- <el-button link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['cameraResource:cameraGroupInfo:remove']">删除</el-button> -->
<!-- <el-button link
type="primary"
icon="View"
@click="handleDetail(scope.row)"
v-hasPermi="['cameraResource:cameraGroupInfo:view']">详情</el-button> -->
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改自定义视频分组-分组对话框 -->
<el-dialog :title="title"
v-model="open"
width="500px"
append-to-body>
<el-form ref="cameraGroupInfoRef"
:model="form"
:rules="rules"
label-width="120px">
<el-form-item label="分类名称"
prop="name">
<el-input v-model="form.name"
placeholder="请输入分类名称" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary"
@click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 自定义视频分组-分组详情 -->
<el-dialog title="自定义视频分组-分组详情"
v-model="detailOpen"
width="800px"
append-to-body
class="dialog-detail-box">
<div class="dialog-form-detail flex flex-r flex-wrap">
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">分类名称</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.name}}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">父级id 1级为0</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.parentId}}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">负责人名称</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.dutyUser}}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">手机号</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.phone}}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">职位</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.position}}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">备注</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.remark}}
</div>
</div>
<div class="flex flex-r">
<div class="detail-label flex flex-align-center">状态</div>
<div class="detail-value flex flex-align-center">
{{dialogFormDetail.status}}
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 配置摄像头 -->
<el-dialog title="配置摄像头"
v-model="AddDialog2"
width="800px"
append-to-body
class="dialog-detail-box">
<div id=" ">
<el-transfer filterable
:filter-method="filterMethod"
filter-placeholder="请输入名称"
v-model="transferUserValue"
:data="transferUserData"
style="text-align: left"
:titles="['待选列表', '已有列表']"
:button-texts="['移除列表', '添加列表']"
:props="{
key: 'id',
label: 'name',
}"
@change="transferChange"
v-loading="transferloading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"></el-transfer>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="AddDialog2 = false">关 闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="CameraGroupInfo">
import {
pagecameraGroupInfo,
getcameraGroupInfo,
delcameraGroupInfo,
addcameraGroupInfo,
updatecameraGroupInfo,
batchRemove,
batchSave,
getNotBoundData,
getBoundData
} from "@/api/cameraResource/cameraGroupInfo";
const { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus'
const cameraGroupInfoList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const detailOpen = ref(false);
const groupId = ref('')
const AddDialog2 = ref(false)
const transferUserValue = ref([])
const transferUserData = ref([])
const yifenpei = ref([])
const transferloading = ref(false)
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
parentId: null,
dutyUser: null,
phone: null,
position: null,
status: null,
},
rules: {
name: [{ required: true, message: "不能为空", trigger: "blur" }],
},
dialogFormDetail: {}, //详情弹框数据
});
const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
// 配置摄像头
function handleconfiguration (row) {
groupId.value = row.id
// 查询已绑定的人员列表
AddDialog2.value = true
Getallvideo()
Getyifenpei()
}
function Getallvideo () {
let prams = {
groupId: groupId.value
}
getNotBoundData(prams).then(res => {
console.log(res.data);
transferUserData.value = res.data
})
}
// 查询已分配的用户
function Getyifenpei () {
getBoundData({ groupId: groupId.value }).then(res => {
if (res.code == 200) {
transferUserValue.value = []
yifenpei.value = res.data
console.log(res.data);
res.data.map(item => {
transferUserValue.value.push(item.id)
})
}
})
}
function filterMethod (query, item) {
let string = item.name
return string.indexOf(query) > -1;
}
function transferChange (value, direction, movedKeys) {
transferloading.value = true;
// console.log(value, direction, movedKeys);
let params = ''
let list = []
let AxiosUrl = "";
if (direction == "left") {
AxiosUrl = batchRemove;
yifenpei.value.map(item => {
for (var k in movedKeys) {
if (movedKeys[k] == item.id) {
// list.push(item.id)
list.push({
cameraName: item.name,
indexCode: item.indexCode,
id: item.id,
})
}
}
})
params = {
cameraInfoList: list,
gourpId: groupId.value
}
// var a = new FormData()
// a.append('ids', list.join(","))
// params = a
} else {
transferUserData.value.map(item => {
for (var k in value) {
if (value[k] == item.id) {
list.push({
cameraName: item.name,
indexCode: item.indexCode,
id: item.id,
})
}
}
})
params = {
cameraInfoList: list,
gourpId: groupId.value
}
AxiosUrl = batchSave;
}
AxiosUrl(params).then(response => {
if (response.code === 200) {
ElMessage({ message: response.msg, type: 'success' })
} else {
ElMessage({ message: response.msg, type: 'warning' })
}
Getyifenpei()
Getallvideo()
setTimeout(() => {
getList();
}, 100);
// gettreeList()
// getlistfloodControlDepartment()
transferloading.value = false;
})
.catch(response => {
transferloading.value = false;
});
}
/** 查询自定义视频分组-分组列表 */
function getList () {
// loading.value = true;
pagecameraGroupInfo(queryParams.value).then(response => {
cameraGroupInfoList.value = response.data;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel () {
open.value = false;
detailOpen.value = false;
reset();
}
// 表单重置
function reset () {
form.value = {
id: null,
name: null,
parentId: null,
dutyUser: null,
phone: null,
position: null,
remark: null,
status: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
proxy.resetForm("cameraGroupInfoRef");
}
/** 搜索按钮操作 */
function handleQuery () {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery () {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange (selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd () {
reset();
open.value = true;
title.value = "添加自定义视频分组-分组";
}
/** 修改按钮操作 */
function handleUpdate (row) {
reset();
const _id = row.id || ids.value
getcameraGroupInfo(_id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改自定义视频分组-分组";
});
}
/** 提交按钮 */
function submitForm () {
proxy.$refs["cameraGroupInfoRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updatecameraGroupInfo(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addcameraGroupInfo(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete (row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除自定义视频分组-分组编号为"' + _ids + '"的数据项？').then(function () {
return delcameraGroupInfo(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => { });
}
/** 导出按钮操作 */
function handleExport () {
proxy.download('cameraResource/cameraGroupInfo/export', {
...queryParams.value
}, `cameraGroupInfo_${new Date().getTime()}.xlsx`)
}
//查看详情操作
function handleDetail (row) {
detailOpen.value = true;
dialogFormDetail.value = row;
}
getList();
</script>
