Aa.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <div class="MessageServicMer">
  3. <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
  4. <el-table :data="tableData" border style="width: 80%">
  5. <el-table-column prop="id" label="服务商id" width="180"></el-table-column>
  6. <el-table-column prop="name" label="服务商名" width="120"></el-table-column>
  7. <el-table-column label="发送方式" width="100">
  8. <template slot-scope="scope">
  9. <span v-for="item in sendMethodList" :key="item.code">
  10. <el-tag
  11. size="small"
  12. type="warning"
  13. v-if="scope.row.methodCode == item.code"
  14. >{{item.description}}</el-tag>
  15. </span>
  16. </template>
  17. </el-table-column>
  18. <el-table-column label="操作" width="150">
  19. <template slot-scope="scope">
  20. <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
  21. <el-popconfirm title="是否删除此设备的信息?" @onConfirm="del(scope.row)">
  22. <el-button slot="reference" type="text" size="small">删除</el-button>
  23. </el-popconfirm>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. <el-dialog :title="isAdd?'添加消息点':'编辑消息点'" :visible.sync="showDialog">
  28. <el-row type="flex">
  29. <el-col :span="14">
  30. <el-form ref="dyForm" :model="dyForm" :rules="rules" label-width="140px">
  31. <el-form-item label="服务商名:" prop="name">
  32. <el-input v-model="dyForm.name"></el-input>
  33. </el-form-item>
  34. <el-form-item label="服务商配置信息:">
  35. <el-input v-model="dyForm.info" type="textarea"></el-input>
  36. </el-form-item>
  37. <el-form-item label="发送方式">
  38. <el-select v-model="dyForm.methodCode" placeholder="请选择发送方式">
  39. <el-option
  40. v-for="item in sendMethodList"
  41. :label="item.description"
  42. :value="item.code"
  43. :key="item.code"
  44. ></el-option>
  45. </el-select>
  46. </el-form-item>
  47. <el-form-item>
  48. <el-button @click="showDialog=false">取 消</el-button>
  49. <el-button type="primary" @click="submitForm('dyForm')">保 存</el-button>
  50. </el-form-item>
  51. </el-form>
  52. </el-col>
  53. </el-row>
  54. </el-dialog>
  55. </div>
  56. </template>
  57. <script>
  58. import { mapActions } from "vuex";
  59. const rules = {
  60. code: [{ required: true, message: "请输入消息点编码", trigger: "blur" }],
  61. description: [
  62. { required: true, message: "请输入消息点描述", trigger: "blur" }
  63. ]
  64. };
  65. export default {
  66. name: "MessageServicMer",
  67. data() {
  68. return {
  69. tableData: [],
  70. showDialog: false,
  71. dyForm: {
  72. name: "",
  73. info: "",
  74. methodCode: ""
  75. },
  76. sendMethodList: "",
  77. rules,
  78. isAdd: true
  79. };
  80. },
  81. created() {},
  82. mounted() {
  83. this.getMessageServicMer();
  84. this.getSendMethodList();
  85. },
  86. methods: {
  87. ...mapActions(["fetch"]),
  88. // 获取消息点
  89. getMessageServicMer() {
  90. this.fetch({
  91. api: "/message/provider/list",
  92. method: "GET",
  93. data: {},
  94. success: res => {
  95. console.log(res);
  96. this.tableData = res;
  97. },
  98. fail: err => {
  99. console.log(err);
  100. if (err.errMsg) this.$message.error(err.errMsg);
  101. else this.$message.error("服务器发生异常");
  102. }
  103. });
  104. },
  105. // 获取发送方式
  106. getSendMethodList() {
  107. this.fetch({
  108. api: "/message/method/list",
  109. method: "GET",
  110. data: {},
  111. success: res => {
  112. this.sendMethodList = res;
  113. console.log("sssssssss")
  114. this.dyForm.methodCode = res[0].code;
  115. console.log(this.dyForm)
  116. },
  117. fail: err => {
  118. console.log(err);
  119. if (err.errMsg) this.$message.error(err.errMsg);
  120. else this.$message.error("服务器发生异常");
  121. }
  122. });
  123. },
  124. add() {
  125. this.isAdd = true;
  126. this.showDialog = true;
  127. this.dyForm = {
  128. code: null,
  129. description: "",
  130. remark: ""
  131. };
  132. },
  133. edit(row) {
  134. this.isAdd = false;
  135. this.showDialog = true;
  136. this.dyForm = row;
  137. },
  138. del(row) {
  139. this.fetch({
  140. api: "/message/point/delete",
  141. method: "POST",
  142. data: { id: row.id },
  143. success: res => {
  144. console.log(res);
  145. this.getMessageServicMer();
  146. this.$message, success("删除成功!");
  147. // this.$message.success(res.msg);
  148. },
  149. fail: err => {
  150. console.log(err);
  151. if (err.errMsg) this.$message.error(err.errMsg);
  152. else this.$message.error("服务器发生异常");
  153. }
  154. });
  155. },
  156. submitForm(formName) {
  157. this.$refs[formName].validate(valid => {
  158. if (valid) {
  159. console.log(this.dyForm);
  160. this.isAdd
  161. ? this.reqSave("/message/point/add")
  162. : this.reqSave("/message/point/update");
  163. } else {
  164. return false;
  165. }
  166. });
  167. },
  168. // 请求 保存 (添加 和 更新)
  169. reqSave(api) {
  170. this.fetch({
  171. api,
  172. method: "POST",
  173. data: this.dyForm,
  174. success: res => {
  175. console.log(res);
  176. this.getMessageServicMer();
  177. this.$message.success("添加消息点成功!");
  178. },
  179. fail: err => {
  180. console.log(err);
  181. if (err.errMsg) this.$message.error(err.errMsg);
  182. else this.$message.error("服务器发生异常");
  183. }
  184. });
  185. }
  186. }
  187. };
  188. </script>