| | |
| | | <div class="header-content"> |
| | | <div class="search"> |
| | | <span style="padding-right:20px">筛选条件:</span> |
| | | <el-select v-model="context" placeholder="请选择"> |
| | | <el-select v-model="context" placeholder="请选择" @change="getBayonetListData"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | |
| | | <main> |
| | | <div class="main-content"> |
| | | <div class="main-title"> |
| | | <el-button class="el-icon-plus" type="primary" @click="dialogCreate = true">添加</el-button> |
| | | <el-button class="el-icon-plus" type="primary" @click="showDialog(false, null)">添加</el-button> |
| | | <el-button @click="handleExport">导出卡口</el-button> |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <MyTable |
| | | <MyTable |
| | | :tableOption="tableOption" |
| | | :tableData="list" |
| | | :pageShow="false"> |
| | | <template #operation="info"> |
| | | <el-link :underline="false" style="color:#4b9bb7">编辑</el-link> |
| | | <el-link :underline="false" style="color:#4b9bb7" @click="showDialog(true, info)">编辑</el-link> |
| | | </template> |
| | | </MyTable> |
| | | </div> |
| | | </main> |
| | | <footer> |
| | | <!-- 添加卡口 --> |
| | | <el-dialog title="添加卡口" :visible.sync="dialogCreate" width="60%" :before-close="handleClose"> |
| | | <MyCreate :addBayonet="addBayonet"></MyCreate> |
| | | <el-dialog :title="getDialogTitle" :visible.sync="isShowDialog" width="60%" :before-close="handleClose"> |
| | | <MyCreate @closeDialog="closeDialog" :originalBayonet="originalBayonet" :isEdit="isEdit"></MyCreate> |
| | | </el-dialog> |
| | | </footer> |
| | | </div> |
| | |
| | | <script> |
| | | import MyCreate from './create' |
| | | import MyTable from '@/components/Table' |
| | | import {myDownLoad} from '@/utils/helper' |
| | | import { createNamespacedHelpers } from "vuex"; |
| | | const { mapActions } = createNamespacedHelpers("bayonet"); |
| | | import bayonet from "@/api/system/bayonet"; |
| | | import {downloadFile} from "@/utils/helper"; |
| | | |
| | | export default { |
| | | components: { |
| | | MyCreate, MyTable, |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogCreate: false, |
| | | isShowDialog: false, |
| | | context: 0, |
| | | options: [ |
| | | { |
| | |
| | | type: 'text', |
| | | prop: 'latitude', |
| | | }, |
| | | // { |
| | | // label: '所属区域', |
| | | // type: 'text', |
| | | // prop: '', |
| | | // }, |
| | | { |
| | | label: '域名/IP', |
| | | type: 'text', |
| | |
| | | }, |
| | | ] |
| | | }, |
| | | originalBayonet: null, |
| | | isEdit: false |
| | | } |
| | | }, |
| | | |
| | | computed: { |
| | | getDialogTitle() { |
| | | return this.isEdit ? '编辑卡口' : '新建卡口'; |
| | | }, |
| | | }, |
| | | created() { |
| | | const { setTableData } = this; |
| | | setTableData(); |
| | | this.getBayonetListData(); |
| | | }, |
| | | methods: { |
| | | // 弹窗关闭 |
| | | handleClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | done(); |
| | | }) |
| | | }, |
| | | ...mapActions(['getBayonetList', 'exportBayonetList','addBayonet']), |
| | | // 设置tableData |
| | | async setTableData() { |
| | | const { current, size, context } = this; |
| | | let arr = await this.getBayonetList({ |
| | | // bayonetName:context, |
| | | current, size |
| | | getBayonetListData() { |
| | | bayonet.getBayonetList({ bayonetName: '', current: this.current, size: this.size }) |
| | | .then(data => { |
| | | this.list = data; |
| | | }) |
| | | this.list = arr.data.data |
| | | }, |
| | | // 导出 |
| | | async handleExport(){ |
| | | const { current, size, context } = this; |
| | | let arr = await this.exportBayonetList({ |
| | | current, size |
| | | .catch(err => { |
| | | this.$message({ type: 'error', message: err }); |
| | | }) |
| | | myDownLoad(arr); |
| | | console.log(arr); |
| | | } |
| | | }, |
| | | // 弹窗关闭 |
| | | handleClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | done(); |
| | | }) |
| | | }, |
| | | |
| | | closeDialog() { |
| | | this.isShowDialog = false; |
| | | }, |
| | | |
| | | handleExport() { |
| | | bayonet.exportBayonetList({ bayonetName: this.context, current: this.current, size: this.size }) |
| | | .then(res => { |
| | | downloadFile(res); |
| | | this.$message({ type: 'success', message: '操作成功' }); |
| | | }) |
| | | .catch(err => { |
| | | this.$message({ type: 'error', message: err }); |
| | | }) |
| | | }, |
| | | showDialog(isEdit, data) { |
| | | this.isShowDialog = true; |
| | | this.isEdit = isEdit; |
| | | this.originalBayonet = data; |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | |
| | | .header-content { |
| | | padding: 0 40px; |
| | |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | |
| | | .main-title { |
| | | line-height: 60px; |