You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
taicangZongzhi-PC/src/views/netSecurity/DataSource/index.vue

705 lines
19 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="container-main" ref="main">
<div class="search-hearder" ref="topSearch">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="auto"
>
<el-form-item label="来源类型" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择来源类型"
clearable
size="small"
>
<el-option
v-show="filterShow(dict.dictValue)"
v-for="dict in sourceType"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="资产名称" prop="assetName">
<el-input
v-model="queryParams.assetName"
placeholder="请输入资产名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属单位" prop="affUnit">
<el-input
v-model="queryParams.affUnit"
placeholder="请输入所属单位"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="layui-table-tool" ref="tableTool">
<el-button
type="primary"
size="mini"
@click="handleAdd()"
v-hasPermi="['zongzhi:source:add']"
>新增</el-button
>
<el-button
type="success"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['zongzhi:source:edit']"
>修改</el-button
>
<el-button
type="danger"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['zongzhi:source:remove']"
>删除</el-button
>
<el-button
type="warning"
size="mini"
:loading="exportLoading"
@click="handleExport"
v-hasPermi="['zongzhi:source:export']"
>导出</el-button
>
</div>
<el-table
v-loading="loading"
:data="sourceList"
:height="tableHeigth"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="来源类型" align="center" prop="type">
<template slot-scope="scope">
<dict-tag
:options="dict.type.tc_data_source_type"
:value="scope.row.type"
/>
</template>
</el-table-column>
<el-table-column
label="资产名称"
align="center"
prop="assetName"
show-overflow-tooltip
/>
<el-table-column
label="所属单位"
align="center"
prop="affUnit"
show-overflow-tooltip
/>
<el-table-column
label="所属分组"
align="center"
prop="affGroups"
show-overflow-tooltip
/>
<el-table-column
label="网站/系统名称"
align="center"
prop="systeamName"
show-overflow-tooltip
/>
<el-table-column
label="网站地址"
align="center"
prop="url"
show-overflow-tooltip
/>
<el-table-column label="启用/禁用" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isStatus"
@change="changeSwitch($event, scope.row.id)"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="200"
fixed="right"
>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleInfo(scope.row)"
v-hasPermi="['zongzhi:source:list']"
>
查看
</el-button>
<el-button
type="success"
size="mini"
@click="handleUpdate(scope.row)"
v-hasPermi="['zongzhi:source:edit']"
>修改</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)"
v-hasPermi="['zongzhi:source:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改数据来源对话框 -->
<el-dialog
:visible.sync="open"
width="1000px"
append-to-body
custom-class="dialog-box"
>
<div slot="title" class="dialog-title">{{ title }}</div>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="auto"
class="dialog-from"
>
<el-row>
<el-col :span="12">
<el-form-item label="区域" prop="areaId">
<el-cascader
v-model="form.areaId"
:options="townList"
:props="treeProps"
clearable
></el-cascader> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="来源类型" prop="type">
<el-select v-model="form.type" placeholder="请选择来源类型">
<el-option
v-show="filterShow(dict.dictValue)"
v-for="dict in sourceType"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
></el-option>
</el-select> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12"
><el-form-item label="资产名称" prop="assetName">
<el-input
v-model="form.assetName"
placeholder="请输入资产名称"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="所属单位" prop="affUnit">
<el-input
v-model="form.affUnit"
placeholder="请输入所属单位"
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12"
><el-form-item label="所属分组" prop="affGroups">
<el-input
v-model="form.affGroups"
placeholder="请输入所属分组"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="网站/系统名称" prop="systeamName">
<el-input
v-model="form.systeamName"
placeholder="请输入网站/系统名称"
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="网站地址" prop="url">
<el-input
v-model="form.url"
placeholder="请输入网站地址"
/> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="IP地址" prop="ipAddress">
<el-input
v-model="form.ipAddress"
placeholder="请输入IP地址"
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12"
><el-form-item label="操作系统" prop="os">
<el-select v-model="form.os" placeholder="请选择操作系统">
<el-option
v-for="dict in dict.type.tc_os"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="版本" prop="versions">
<el-input
v-model="form.versions"
placeholder="请输入版本"
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12"
><el-form-item label="是否关注重点" prop="isFocus">
<el-select
v-model="form.isFocus"
placeholder="请选择是否关注重点"
>
<el-option
v-for="dict in dict.type.tc_yes_no"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="级别" prop="level">
<el-select v-model="form.level" placeholder="请选择级别">
<el-option
v-for="dict in dict.type.tc_net_safety_level"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select> </el-form-item
></el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!--查看数据来源详情页-->
<el-dialog
:visible.sync="infoOpen"
width="1000px"
append-to-body
:close-on-click-modal="false"
:destroy-on-close="true"
custom-class="dialog-box"
>
<div slot="title" class="dialog-title">{{ infoTitle }}</div>
<el-descriptions
title="数据来源"
:column="2"
border
labelClassName="desLable"
>
<el-descriptions-item label="区域">{{
$filterTown(form.areaId)
}}</el-descriptions-item>
<el-descriptions-item label="来源类型">
<dict-tag
:options="dict.type.tc_data_source_type"
:value="form.type"
/>
</el-descriptions-item>
<el-descriptions-item label="资产名称">{{
form.assetName
}}</el-descriptions-item>
<el-descriptions-item label="所属单位">{{
form.affUnit
}}</el-descriptions-item>
<el-descriptions-item label="所属分组">{{
form.affGroups
}}</el-descriptions-item>
<el-descriptions-item label="网站/系统名称">{{
form.systeamName
}}</el-descriptions-item>
<el-descriptions-item label="网站地址">{{
form.url
}}</el-descriptions-item>
<el-descriptions-item label="IP地址">{{
form.ipAddress
}}</el-descriptions-item>
<el-descriptions-item label="操作系统">
<dict-tag :options="dict.type.tc_os" :value="form.os" />
</el-descriptions-item>
<el-descriptions-item label="版本">{{
form.versions
}}</el-descriptions-item>
<el-descriptions-item label="是否关注重点">
<dict-tag :options="dict.type.tc_yes_no" :value="form.isFocus" />
</el-descriptions-item>
<el-descriptions-item label="级别">
<dict-tag
:options="dict.type.tc_net_safety_level"
:value="form.level"
/>
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import {
listSource,
getSource,
delSource,
addSource,
updateSource,
exportSource,
} from "@/api/zongzhi/netSecurity/DataSource/index.js";
export default {
computed: {
...mapGetters(["townList", "treeProps"]),
},
name: "Source",
//注释字典
dicts: ["tc_yes_no", "tc_net_safety_level", "tc_data_source_type", "tc_os"],
data() {
return {
tableHeigth: 0,
//查看详情
infoOpen: false,
//详情标题
infoTitle: "",
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 数据来源表格数据
sourceList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
type: null,
assetName: null,
affUnit: null,
notType: null,
},
// 表单参数
form: {},
// 表单校验
rules: {},
sourceType: [],
};
},
watch: {
$route: {
// $route可以用引号也可以不用引号
handler(to, from) {
if (to.name == "DataSource") {
this.queryParams.notType = "5,6";
//不显示type 5,6
} else if (to.name == "Jgdw") {
this.queryParams.notType = "3,4,6,7";
// 显示type5
} else if (to.name == "Webjc") {
this.queryParams.notType = "3,4,5,7";
// 显示type6
}
},
deep: true, // 深度观察监听
immediate: true, // 第一次初始化渲染就可以监听到
},
},
created() {
this.getDicts("tc_data_source_type").then((response) => {
this.sourceType = response.data;
});
// //给表格一个固定值
this.$nextTick(() => {
this.tableHeigth =
this.$refs.main.offsetHeight -
(this.$refs.topSearch.offsetHeight +
this.$refs.tableTool.offsetHeight) -
46;
this.getList();
});
},
methods: {
changeSwitch(e, id) {
let data = {
id,
isStatus: e,
};
updateSource(data).then((res) => {
this.$modal.msgSuccess(e == true ? "启用成功" : "禁用成功");
});
},
/**过滤显示 */
filterShow(value) {
let routeName = this.$route.name;
if (routeName == "DataSource") {
if (value == 3 || value == 4 || value == 7) {
return true;
} else {
return false;
}
} else if (routeName == "Jgdw") {
if (value == 3 || value == 4 || value == 6 || value == 7) {
return false;
} else {
return true;
}
} else if (routeName == "Webjc") {
if (value == 3 || value == 4 || value == 5 || value == 7) {
return false;
} else {
return true;
}
}
},
/**过滤显示 */
filterTitle(name, key) {
let routeName = this.$route.meta.title;
this[key] = name + routeName;
console.log(this.infoTitle);
},
/** 查询数据来源列表 */
getList() {
this.loading = true;
listSource(this.queryParams).then((response) => {
this.sourceList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
areaId: null,
type: null,
assetName: null,
affUnit: null,
affGroups: null,
systeamName: null,
url: null,
ipAddress: null,
os: null,
versions: null,
isFocus: null,
level: null,
createId: null,
createBy: null,
createTime: null,
updateId: null,
updateBy: null,
updateTime: null,
remark: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/**查看按钮操作 */
handleInfo(row) {
this.reset();
const id = row.id || this.ids;
getSource(id).then((response) => {
response.data.areaId = JSON.parse(response.data.areaId);
this.form = response.data;
this.infoOpen = true;
// this.infoTitle = "查看数据来源详情";
this.filterTitle("查看", "infoTitle");
});
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
// this.title = "添加数据来源";
this.filterTitle("添加", "title");
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getSource(id).then((response) => {
response.data.areaId = JSON.parse(response.data.areaId);
this.form = response.data;
this.open = true;
// this.title = "修改数据来源";
this.filterTitle("修改", "title");
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.form.areaId = JSON.stringify(this.form.areaId);
if (this.form.id != null) {
updateSource(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSource(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm(
'是否确认删除数据来源编号为"' + ids + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
return delSource(ids);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有数据来源数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.download(
"/zongzhi/source/export",
{
...this.queryParams,
},
"数据来源_" + new Date().getTime() + ".xlsx"
);
this.exportLoading = false;
})
.catch(() => {});
},
},
};
</script>