taskDialog.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" width="600px" :before-close="clsoeDialog" append-to-body :close-on-click-modal="false">
  3. <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin: 0 auto">
  4. <el-form-item label="标题" prop="title">
  5. <el-input v-model="temp.title" placeholder="请输入标题" />
  6. </el-form-item>
  7. <el-form-item label="调度周期" prop="interval">
  8. <el-input v-model="temp.interval" placeholder="请输入调度周期" />
  9. </el-form-item>
  10. <el-form-item label="转发格式" prop="encoding">
  11. <el-select v-model="temp.encoding" placeholder="请选择转发格式" style="width: 100%">
  12. <el-option v-for="item in formatOptions" :key="item.value" :label="item.title" :value="item.value"> </el-option>
  13. </el-select>
  14. <!-- <el-input v-model="temp.encoding" placeholder="请输入转发格式"/> -->
  15. </el-form-item>
  16. <el-form-item label="mqtt主题" prop="publishTopic">
  17. <el-input v-model="temp.publishTopic" placeholder="请输入mqtt主题" />
  18. </el-form-item>
  19. <el-form-item label="设备模板" prop="templateNumber">
  20. <el-select v-model="temp.templateNumber" filterable placeholder="请选择设备模板" style="width: 100%">
  21. <el-option v-for="item in templateOptions" :key="item.number" :label="item.title" :value="item.number"> </el-option>
  22. </el-select>
  23. </el-form-item>
  24. </el-form>
  25. <div slot="footer" class="dialog-footer">
  26. <el-button @click="clsoeDialog"> 取 消 </el-button>
  27. <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()"> 保 存 </el-button>
  28. </div>
  29. </el-dialog>
  30. </template>
  31. <script lang="ts">
  32. import api from '/@/api/device/modbus';
  33. import { ElMessage } from 'element-plus';
  34. export default {
  35. components: {},
  36. props: {
  37. formatOptions: {
  38. default: () => [],
  39. },
  40. },
  41. data() {
  42. return {
  43. temp: {
  44. title: '',
  45. interval: '20s',
  46. encoding: 'json',
  47. publishTopic: '',
  48. deviceNumber: '',
  49. number: '',
  50. templateNumber: '',
  51. },
  52. rules: {
  53. title: [{ required: true, message: '请输入模板名称', trigger: 'change' }],
  54. publishTopic: [{ required: true, message: '请输入mqtt主题', trigger: 'change' }],
  55. mode: [{ required: true, message: '请选择模式', trigger: 'change' }],
  56. templateNumber: [{ required: true, message: '请选择模式', trigger: 'change' }],
  57. },
  58. dialogVisible: false,
  59. listLoading: false,
  60. dialogStatus: '',
  61. textMap: {
  62. update: '任务详情',
  63. create: '添加任务',
  64. },
  65. templateOptions: '',
  66. };
  67. },
  68. methods: {
  69. openDialog({ dialogStatus, row, deviceNumber }) {
  70. this.dialogStatus = dialogStatus;
  71. this.temp.deviceNumber = deviceNumber;
  72. if (row) {
  73. // this.temp = { ...row }
  74. this.temp.number = row.Job.number;
  75. this.temp.title = row.Job.title;
  76. this.temp.interval = row.Job.interval;
  77. this.temp.encoding = row.Job.encoding;
  78. this.temp.publishTopic = row.Job.publishTopic;
  79. this.temp.templateNumber = row?.Template?.number;
  80. }
  81. // this.getDict()
  82. this.getTemplateList();
  83. this.dialogVisible = true;
  84. },
  85. clsoeDialog() {
  86. this.dialogVisible = false;
  87. this.temp = {
  88. title: '',
  89. interval: '20s',
  90. encoding: 'json',
  91. publishTopic: '',
  92. deviceNumber: '',
  93. number: '',
  94. templateNumber: '',
  95. };
  96. (this.$refs['dataForm'] as any).resetFields();
  97. },
  98. // 获取模板数据
  99. getTemplateList() {
  100. this.listLoading = true;
  101. api.template
  102. .getList({ page: 1, size: 50 })
  103. .then((res: any) => {
  104. this.templateOptions = res.list || [];
  105. })
  106. .finally(() => {
  107. this.listLoading = false;
  108. });
  109. },
  110. createData() {
  111. (this.$refs['dataForm'] as any).validate((valid: boolean) => {
  112. if (valid) {
  113. api.task.addDeviceJob(this.temp).then(() => {
  114. this.$emit('finish');
  115. this.clsoeDialog();
  116. ElMessage.success('操作成功!');
  117. });
  118. }
  119. });
  120. },
  121. updateData() {
  122. (this.$refs['dataForm'] as any).validate((valid: boolean) => {
  123. if (valid) {
  124. api.task.editDeviceJob(this.temp).then(() => {
  125. this.$emit('finish');
  126. this.clsoeDialog();
  127. ElMessage.success('操作成功!');
  128. });
  129. }
  130. });
  131. },
  132. },
  133. };
  134. </script>
  135. <style lang="scss" scoped></style>