292 lines
8.0 KiB
Vue
292 lines
8.0 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2025-02-12 13:49:47
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2025-02-17 13:14:23
|
||
* @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\index.vue
|
||
* @Description: 海信-互通立交
|
||
-->
|
||
<template>
|
||
<div class="content">
|
||
<el-form :model="interForm" ref="interForm" size="small" :inline="true" label-width="7rem">
|
||
<el-form-item label="互通立交名称" prop="name">
|
||
<el-select v-model="interForm.name" placeholder="请输入互通立交名称" filterable remote clearable reserve-keyword
|
||
:filter-method="handleRemoteMethod" @change="handleRemoteMethod">
|
||
<el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
|
||
:value="item.label"></el-option> </el-select>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="病害类型" prop="defectType">
|
||
<el-select v-model="interForm.defectType" placeholder="请选择病害" clearable>
|
||
<el-option v-for="item in tableDefect" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</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>
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
|
||
</el-button>
|
||
</el-col>
|
||
<!-- <el-col :span="1.5">
|
||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
|
||
@click="handleDelete(null)">删除
|
||
</el-button>
|
||
</el-col> -->
|
||
</el-row>
|
||
<!-- 表格 -->
|
||
<el-table ref="setupTable" :data="interList" v-loading="loading" @selection-change="handleSelectionChange"
|
||
style="width: 100%">
|
||
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
||
<el-table-column type="index" label="序号"> </el-table-column>
|
||
<el-table-column label="名称" align="center" prop="name" />
|
||
<el-table-column label="互通立交Id(海信)" align="center" prop="crossId">
|
||
</el-table-column>
|
||
<el-table-column label="桩号" align="center" prop="stake" />
|
||
<el-table-column label="code" align="center" prop="code" />
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑
|
||
</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页组件 -->
|
||
<div class="pagination-part">
|
||
<el-pagination background :current-page.sync="pagination.pageNum" @current-change="handleCurrentChange"
|
||
:page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.pageSize" @size-change="handleSizeChange"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
<!-- 新增弹窗 -->
|
||
<el-dialog :title="title" :visible.sync="addVisible" width="50rem" append-to-body :close-on-click-modal="false"
|
||
destroy-on-close>
|
||
<add-inter v-if="addVisible" :tableDefect="tableDefect" :segmentList="segmentList" :dialogItem="dialogItem"
|
||
@cancel="addCancel"></add-inter>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getList, getDropDown, delData } from "@/api/xj/hisense/inter-change"
|
||
import AddInter from "./components/add-inter.vue"
|
||
|
||
export default {
|
||
name: "InterChange",
|
||
components: {
|
||
AddInter,
|
||
},
|
||
data() {
|
||
return {
|
||
// 搜索绑定菜单
|
||
interForm: {
|
||
name: "",
|
||
},
|
||
searchForm: {},
|
||
// 路段下拉数据
|
||
segmentList: [],
|
||
// 病害下拉数据
|
||
tableDefect: [],
|
||
|
||
// 列表数据
|
||
interList: [],
|
||
// 列表加载状态
|
||
loading: false,
|
||
// 列表勾选框数据
|
||
checkIds: [],
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 分页-列表总数
|
||
tableTotal: 0,
|
||
// 分页-页数页码
|
||
pagination: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
|
||
// 弹窗标题
|
||
title: "新增",
|
||
// 新增弹窗显隐控制
|
||
addVisible: false,
|
||
// 传弹窗数据
|
||
dialogItem: {},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getTableData()
|
||
this.getDownList()
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 模糊搜索
|
||
* @param {*} str 模糊搜索字段
|
||
* @return {*}
|
||
*/
|
||
handleRemoteMethod(str) {
|
||
this.interForm.name = str;
|
||
this.getDownList();
|
||
},
|
||
/**
|
||
* @description: 获取下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getDownList() {
|
||
getDropDown({ name: this.interForm.name }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.segmentList = data
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* @description: 点击搜索
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleQuery() {
|
||
this.searchForm = JSON.parse(JSON.stringify(this.interForm));
|
||
this.pagination.pageNum = 1;
|
||
this.getTableData();
|
||
},
|
||
|
||
/**
|
||
* @description: 点击重置
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
resetQuery() {
|
||
this.interForm = {
|
||
name: "",
|
||
defectType: "",
|
||
}
|
||
this.searchForm = {}
|
||
this.getTableData();
|
||
},
|
||
|
||
/**
|
||
* @description: 点击新增事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleAdd() {
|
||
this.addVisible = true;
|
||
this.dialogItem = {};
|
||
},
|
||
|
||
/**
|
||
* @description: 获取列表数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getTableData() {
|
||
const dataItem = {
|
||
...this.searchForm,
|
||
...this.pagination,
|
||
}
|
||
getList(dataItem).then(({ rows, code, total }) => {
|
||
if (code === 200) {
|
||
this.interList = rows;
|
||
this.tableTotal = total;
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* @description: 列表选择改变事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleSelectionChange(selection) {
|
||
this.checkIds = selection.map((item) => item.id);
|
||
this.multiple = !selection.length;
|
||
},
|
||
|
||
/**
|
||
* @description: 点击编辑事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleUpdate(value) {
|
||
this.addVisible = true;
|
||
this.dialogItem = value;
|
||
},
|
||
|
||
/**
|
||
* @description: 点击删除事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleDelete(row) {
|
||
// const checkIds = row ? row.id : this.checkIds;
|
||
// if (!checkIds.length) {
|
||
// this.$modal.msgWarning("请选择要删除的记录");
|
||
// return;
|
||
// }
|
||
this.$modal
|
||
.confirm(`是否确认删除选中的1条记录？`)
|
||
.then(() => {
|
||
return delData(row.id);
|
||
})
|
||
.then(() => {
|
||
this.getTableData();
|
||
// this.$refs.defectTable.clearSelection();
|
||
this.$modal.msgSuccess("删除成功");
|
||
})
|
||
.catch(() => { });
|
||
},
|
||
|
||
/**
|
||
* @description: 切换分页
|
||
* @param {*} arg
|
||
* @return {*}
|
||
*/
|
||
handleCurrentChange(arg) {
|
||
this.pagination.pageNum = arg;
|
||
this.getTableData();
|
||
},
|
||
|
||
/**
|
||
* @description: 切换每条/页
|
||
* @param {*} arg
|
||
* @return {*}
|
||
*/
|
||
handleSizeChange(arg) {
|
||
this.pagination.pageSize = arg;
|
||
this.getTableData();
|
||
},
|
||
|
||
/**
|
||
* @description: 关闭弹窗事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
addCancel() {
|
||
this.addVisible = false;
|
||
this.dialogItem = {};
|
||
this.getTableData();
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100vh - 5.4rem);
|
||
padding: 1rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 分页样式 */
|
||
.pagination-part {
|
||
width: 100%;
|
||
display: flex;
|
||
padding-top: 1rem;
|
||
justify-content: flex-end;
|
||
}
|
||
</style>
|