index.vue 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="main-contain">
  3. <div class="position">
  4. <bread-crumb :crumbs="crumbs"></bread-crumb>
  5. <el-button
  6. size="small"
  7. icon="el-icon-circle-plus-outline"
  8. type="primary"
  9. @click="addMode"
  10. >新增</el-button
  11. >
  12. </div>
  13. <div class="app-container">
  14. <el-row>
  15. <el-col :span="24">
  16. <el-table
  17. :data="tableData"
  18. :row-style="{ color: '#303133' }"
  19. :header-cell-style="{
  20. backgroundColor: 'rgb(245, 247, 250)',
  21. color: '#606266'
  22. }"
  23. border
  24. >
  25. <el-table-column label="型号名称" align="center">
  26. <template slot-scope="scope">
  27. <span>{{ scope.row.device_mode }}</span>
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="操作" align="center">
  31. <template slot-scope="scope">
  32. <el-tooltip
  33. class="item"
  34. effect="dark"
  35. content="编辑"
  36. placement="top"
  37. >
  38. <el-button
  39. type="primary"
  40. icon="el-icon-edit-outline"
  41. size="small"
  42. @click="EditMode(scope.row.id)"
  43. ></el-button>
  44. </el-tooltip>
  45. <el-tooltip
  46. class="item"
  47. effect="dark"
  48. content="删除"
  49. placement="top"
  50. >
  51. <el-button
  52. type="danger"
  53. icon="el-icon-delete"
  54. size="small"
  55. @click="DeleteMode(scope.row.id, scope.$index)"
  56. ></el-button>
  57. </el-tooltip>
  58. </template>
  59. </el-table-column>
  60. </el-table>
  61. </el-col>
  62. </el-row>
  63. <el-dialog
  64. title="添加设备型号"
  65. :visible.sync="dialogVisible"
  66. width="30%"
  67. center
  68. >
  69. <el-form :model="form" ref="form" :rules="ModeRules">
  70. <el-form-item label="设备型号:" required prop="device_mode">
  71. <el-input style="width:200px" v-model="form.device_mode"></el-input>
  72. </el-form-item>
  73. </el-form>
  74. <span slot="footer" class="dialog-footer">
  75. <el-button @click="dialogVisible = false">取 消</el-button>
  76. <el-button type="primary" @click="SaveMode('form')">保存</el-button>
  77. </span>
  78. </el-dialog>
  79. <el-dialog
  80. title="编辑设备型号"
  81. :visible.sync="editDialogVisible"
  82. width="30%"
  83. center
  84. >
  85. <el-form :model="form" ref="form" :rules="ModeRules">
  86. <el-form-item label="设备型号:">
  87. <el-input style="width:200px" v-model="form.device_mode"></el-input>
  88. </el-form-item>
  89. </el-form>
  90. <span slot="footer" class="dialog-footer">
  91. <el-button @click="editDialogVisible = false">取 消</el-button>
  92. <el-button type="primary" @click="UpdateMode('form')">保存</el-button>
  93. </span>
  94. </el-dialog>
  95. </div>
  96. </div>
  97. </template>
  98. <script>
  99. // eslint-disable-next-line no-unused-vars
  100. import BreadCrumb from "@/xt_pages/components/bread-crumb";
  101. import {
  102. SaveMode,
  103. getAllMode,
  104. EditMode,
  105. UpdateMode,
  106. DeleteMode
  107. } from "@/api/manage";
  108. export default {
  109. name: "index.vue",
  110. data() {
  111. return {
  112. crumbs: [
  113. { path: false, name: "设备管理" },
  114. { path: "/device/mode", name: "型号管理" }
  115. ],
  116. dialogVisible: false,
  117. editDialogVisible: false,
  118. tableData: [],
  119. form: {
  120. id: "",
  121. device_mode: ""
  122. },
  123. ModeRules: {
  124. device_mode: [{ required: true, message: "请填写设备型号" }]
  125. }
  126. };
  127. },
  128. methods: {
  129. addMode() {
  130. this.dialogVisible = true;
  131. },
  132. SaveMode(formName) {
  133. this.$refs[formName].validate(valid => {
  134. if (valid) {
  135. // eslint-disable-next-line no-undef
  136. SaveMode(this.form).then(response => {
  137. // eslint-disable-next-line no-empty
  138. if (response.data.state === 1) {
  139. var mode = response.data.data.mode;
  140. this.form.device_mode = "";
  141. this.dialogVisible = false;
  142. this.getAllMode();
  143. }
  144. });
  145. }
  146. });
  147. },
  148. getAllMode() {
  149. getAllMode().then(response => {
  150. if (response.data.state === 1) {
  151. var mode = response.data.data.mode;
  152. this.tableData = mode;
  153. console.log(mode);
  154. }
  155. });
  156. },
  157. EditMode(id) {
  158. this.editDialogVisible = true;
  159. EditMode(id).then(response => {
  160. if (response.data.state === 1) {
  161. var mode = response.data.data.mode;
  162. this.form.id = mode.id;
  163. this.form.device_mode = mode.device_mode;
  164. }
  165. });
  166. },
  167. UpdateMode(formName) {
  168. this.$refs[formName].validate(valid => {
  169. if (valid) {
  170. UpdateMode(this.form.id, this.form).then(response => {
  171. if (response.data.state === 1) {
  172. var mode = response.data.data.mode;
  173. this.editDialogVisible = false;
  174. this.getAllMode();
  175. }
  176. });
  177. }
  178. });
  179. },
  180. DeleteMode(id, index) {
  181. this.$confirm(
  182. "确认要删除所选信息吗? <br>删除后,信息将无法恢复",
  183. "删除提示",
  184. {
  185. dangerouslyUseHTMLString: true,
  186. confirmButtonText: "确定",
  187. cancelButtonText: "取消",
  188. type: "warning"
  189. }
  190. ).then(() => {
  191. DeleteMode(id, index).then(response => {
  192. if (response.data.state === 1) {
  193. // eslint-disable-next-line no-unused-vars
  194. var msg = response.data.data.msg;
  195. this.tableData.splice(index, 1);
  196. } else {
  197. this.$message.error("该型号已绑定设备,不能删除");
  198. }
  199. });
  200. });
  201. }
  202. },
  203. created() {
  204. this.getAllMode();
  205. }
  206. };
  207. </script>
  208. <style scoped></style>