service_publish.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <div class="body-wrapper">
  3. <div>
  4. <h2 style="color: #3498db;margin-bottom: 20px;display: inline-block;width: 90%">服务发布列表</h2>
  5. <el-button type="primary" @click="handleAdd">发布服务</el-button>
  6. </div>
  7. <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
  8. <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
  9. </el-table-column>
  10. </el-table>
  11. <div class="table-pagination">
  12. <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
  13. :current-page.sync="pageNum" :page-size.sync="pageSize">
  14. </el-pagination>
  15. </div>
  16. <el-dialog
  17. :title="title"
  18. :visible.sync="dialogVisible"
  19. width="50%"
  20. custom-class="audit-dialog">
  21. <div style="height: 100px" class="form-div">
  22. <el-form ref="formLabelAlign" label-position="left" label-width="80px" :model="formLabelAlign">
  23. <el-form-item label="接口名称" required>
  24. <el-input v-model="formLabelAlign.interfaceName"></el-input>
  25. </el-form-item>
  26. <el-form-item label="接口地址" required>
  27. <el-input v-model="formLabelAlign.interfaceUrl"></el-input>
  28. </el-form-item>
  29. <!-- <el-form-item label="提交状态">-->
  30. <!-- <el-input v-model="formLabelAlign.submitState"></el-input>-->
  31. <!-- </el-form-item>-->
  32. <!-- <el-form-item label="发布状态">-->
  33. <!-- <el-input v-model="formLabelAlign.publicState"></el-input>-->
  34. <!-- </el-form-item>-->
  35. </el-form>
  36. </div>
  37. <span slot="footer" class="dialog-footer">
  38. <el-button @click="dialogVisible = false">取 消</el-button>
  39. <el-button type="primary" @click="handleConfirm('formLabelAlign')">确 定</el-button>
  40. </span>
  41. </el-dialog>
  42. </div>
  43. </template>
  44. <script>
  45. import api from "@/api/audit.js";
  46. export default {
  47. components: {},
  48. data() {
  49. return {
  50. columns: [
  51. {
  52. label: '接口名称',
  53. key: 'interfaceName'
  54. },
  55. {
  56. label: '接口地址',
  57. key: 'interfaceUrl'
  58. },
  59. {
  60. label: '发布状态',
  61. key: 'publicState'
  62. },
  63. {
  64. label: '发布人',
  65. key: 'createUser'
  66. }
  67. ],
  68. tableData: [],
  69. total: 0,
  70. pageSize: 10,
  71. pageNum: 1,
  72. dialogVisible: false,
  73. formLabelAlign: {
  74. interfaceName: '',
  75. interfaceUrl: ''
  76. },
  77. title: ''
  78. }
  79. },
  80. mounted() {
  81. this.getTableData()
  82. },
  83. watch: {
  84. },
  85. methods: {
  86. handlePageChange() {
  87. this.getTableData()
  88. },
  89. handleAdd () {
  90. this.title = '发布服务'
  91. this.formLabelAlign = {}
  92. this.dialogVisible = true
  93. },
  94. handleConfirm(formName) {
  95. this.$refs[formName].validate((valid) => {
  96. if (valid) {
  97. api.servicePublic(this.formLabelAlign).then(res => {
  98. if(res.code === 200) {
  99. this.dialogVisible = false
  100. this.$message({
  101. message: '发布成功!',
  102. type: 'success'
  103. })
  104. this.getTableData()
  105. }
  106. })
  107. }
  108. })
  109. },
  110. getTableData() {
  111. const {pageNum, pageSize, searchWords} = this
  112. api.serviceListByPage({pageNum, pageSize, resourceName: searchWords}).then(res => {
  113. this.tableData = res.data.records || []
  114. this.total = res.data.total
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style lang="scss" scoped>
  121. .form-wrapper {
  122. margin-bottom: 20px;
  123. }
  124. /deep/ .el-input__inner {
  125. background: #2d3744;
  126. border: none;
  127. border-radius: 0;
  128. }
  129. /deep/ .el-select {
  130. height: 40px;
  131. .el-input__inner {
  132. height: 40px;
  133. }
  134. .el-input__prefix, .el-input__suffix {
  135. height: 40px;
  136. }
  137. /* 下面设置右侧按钮居中 */
  138. .el-input__suffix {
  139. top: 0px;
  140. display: flex;
  141. justify-content: center;
  142. align-items: center;
  143. flex-wrap: nowrap;
  144. flex-direction: row;
  145. align-content: flex-start;
  146. }
  147. /* 输入框加上上下边是 32px + 2px =34px */
  148. .el-input__icon {
  149. line-height: 0px;
  150. }
  151. }
  152. /deep/ .form-wrapper .el-button {
  153. background: linear-gradient(90deg,#0158d9,#3c97e4);
  154. width: 100px;
  155. height: 40px;
  156. }
  157. .body-wrapper {
  158. padding: 20px;
  159. background: #0c0c0c;
  160. .table-pagination{
  161. text-align: right;
  162. }
  163. }
  164. .audit-dialog{
  165. .mg-bt{
  166. margin-bottom: 24px;
  167. }
  168. .label{
  169. text-align: right;
  170. }
  171. .form-div{
  172. /deep/ .el-input__inner{
  173. height: 35px;
  174. width: 90%;
  175. border: 1px solid #a6a5a5;
  176. color: #fff;
  177. }
  178. }
  179. }
  180. </style>