123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <template>
- <div class="body-wrapper">
- <div>
- <h2 style="color: #3498db;margin-bottom: 20px;display: inline-block;width: 90%">服务发布列表</h2>
- <el-button type="primary" @click="handleAdd">发布服务</el-button>
- </div>
- <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
- <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
- </el-table-column>
- </el-table>
- <div class="table-pagination">
- <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
- :current-page.sync="pageNum" :page-size.sync="pageSize">
- </el-pagination>
- </div>
- <el-dialog
- :title="title"
- :visible.sync="dialogVisible"
- width="50%"
- custom-class="audit-dialog">
- <div style="height: 100px" class="form-div">
- <el-form ref="formLabelAlign" label-position="left" label-width="80px" :model="formLabelAlign">
- <el-form-item label="接口名称" required>
- <el-input v-model="formLabelAlign.interfaceName"></el-input>
- </el-form-item>
- <el-form-item label="接口地址" required>
- <el-input v-model="formLabelAlign.interfaceUrl"></el-input>
- </el-form-item>
- <!-- <el-form-item label="提交状态">-->
- <!-- <el-input v-model="formLabelAlign.submitState"></el-input>-->
- <!-- </el-form-item>-->
- <!-- <el-form-item label="发布状态">-->
- <!-- <el-input v-model="formLabelAlign.publicState"></el-input>-->
- <!-- </el-form-item>-->
- </el-form>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="handleConfirm('formLabelAlign')">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import api from "@/api/audit.js";
- export default {
- components: {},
- data() {
- return {
- columns: [
- {
- label: '接口名称',
- key: 'interfaceName'
- },
- {
- label: '接口地址',
- key: 'interfaceUrl'
- },
- {
- label: '发布状态',
- key: 'publicState'
- },
- {
- label: '发布人',
- key: 'createUser'
- }
- ],
- tableData: [],
- total: 0,
- pageSize: 10,
- pageNum: 1,
- dialogVisible: false,
- formLabelAlign: {
- interfaceName: '',
- interfaceUrl: ''
- },
- title: ''
- }
- },
- mounted() {
- this.getTableData()
- },
- watch: {
- },
- methods: {
- handlePageChange() {
- this.getTableData()
- },
- handleAdd () {
- this.title = '发布服务'
- this.formLabelAlign = {}
- this.dialogVisible = true
- },
- handleConfirm(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- api.servicePublic(this.formLabelAlign).then(res => {
- if(res.code === 200) {
- this.dialogVisible = false
- this.$message({
- message: '发布成功!',
- type: 'success'
- })
- this.getTableData()
- }
- })
- }
- })
- },
- getTableData() {
- const {pageNum, pageSize, searchWords} = this
- api.serviceListByPage({pageNum, pageSize, resourceName: searchWords}).then(res => {
- this.tableData = res.data.records || []
- this.total = res.data.total
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .form-wrapper {
- margin-bottom: 20px;
- }
- /deep/ .el-input__inner {
- background: #2d3744;
- border: none;
- border-radius: 0;
- }
- /deep/ .el-select {
- height: 40px;
- .el-input__inner {
- height: 40px;
- }
- .el-input__prefix, .el-input__suffix {
- height: 40px;
- }
- /* 下面设置右侧按钮居中 */
- .el-input__suffix {
- top: 0px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: nowrap;
- flex-direction: row;
- align-content: flex-start;
- }
- /* 输入框加上上下边是 32px + 2px =34px */
- .el-input__icon {
- line-height: 0px;
- }
- }
- /deep/ .form-wrapper .el-button {
- background: linear-gradient(90deg,#0158d9,#3c97e4);
- width: 100px;
- height: 40px;
- }
- .body-wrapper {
- padding: 20px;
- background: #0c0c0c;
- .table-pagination{
- text-align: right;
- }
- }
- .audit-dialog{
- .mg-bt{
- margin-bottom: 24px;
- }
- .label{
- text-align: right;
- }
- .form-div{
- /deep/ .el-input__inner{
- height: 35px;
- width: 90%;
- border: 1px solid #a6a5a5;
- color: #fff;
- }
- }
- }
- </style>
|