TableEdit.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" @close="close">
  3. <el-form ref="form" :model="form" :rules="rules">
  4. <div class="lists">
  5. <el-form-item label="编号" prop="id">
  6. <el-input class="inputs" v-model="form.id" autocomplete="off" :disabled="!idAdd?true:false"></el-input>
  7. </el-form-item>
  8. <el-form-item label="编码" prop="code">
  9. <el-input class="inputs" v-model.trim="form.code" autocomplete="off"></el-input>
  10. </el-form-item>
  11. </div>
  12. <div class="lists">
  13. <el-form-item label="名称" prop="name">
  14. <el-input class="inputs" v-model="form.name" autocomplete="off"></el-input>
  15. </el-form-item>
  16. <el-form-item label="风场编号" prop="windpowerstationId">
  17. <el-select v-model="form.windpowerstationId" placeholder="请选择" clearable>
  18. <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
  19. </el-option>
  20. </el-select>
  21. </el-form-item>
  22. </div>
  23. <div class="lists">
  24. <el-form-item label="工程编号" prop="projectId">
  25. <el-select v-model="form.projectId" placeholder="请选择" clearable>
  26. <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
  27. </el-option>
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="风电线编号" prop="lineId">
  31. <el-select v-model="form.lineId" placeholder="请选择" clearable>
  32. <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
  33. </el-option>
  34. </el-select>
  35. </el-form-item>
  36. </div>
  37. <div class="lists">
  38. <el-form-item label="接入类型" prop="types">
  39. <el-input class="inputs" v-model.trim="form.types" autocomplete="off"></el-input>
  40. </el-form-item>
  41. </div>
  42. </el-form>
  43. <div slot="footer" class="dialog-footer">
  44. <el-button @click="close">取 消</el-button>
  45. <el-button type="primary" @click="save">确 定</el-button>
  46. </div>
  47. </el-dialog>
  48. </template>
  49. <script>
  50. import api from '@/api/station'
  51. import dayjs from "dayjs";
  52. export default {
  53. name: 'TableEdit',
  54. props: {
  55. options: {
  56. type: Array,
  57. default: []
  58. },
  59. stationList: {
  60. type: Array,
  61. // 报错
  62. // default: []
  63. default: function () {
  64. return []
  65. }
  66. },
  67. },
  68. data() {
  69. return {
  70. form: {
  71. id: '',
  72. name: '',
  73. code: '',
  74. },
  75. rules: {
  76. id: [{ required: true, trigger: 'blur', message: '请输入' }],
  77. name: [{ required: true, trigger: 'blur', message: '请输入' }],
  78. code: [{ required: true, trigger: 'blur', message: '请输入' }],
  79. aname: [{ required: true, trigger: 'blur', message: '请输入' }],
  80. capacity: [{ required: true, trigger: 'blur', message: '请输入' }],
  81. capacityunit: [{ required: true, trigger: 'blur', message: '请输入' }],
  82. model: [{ required: true, trigger: 'blur', message: '请输入' }],
  83. ordernum: [{ required: true, trigger: 'blur', message: '请输入' }],
  84. quantity: [{ required: true, trigger: 'blur', message: '请输入' }],
  85. },
  86. title: '',
  87. dialogFormVisible: false,
  88. idAdd: true,
  89. }
  90. },
  91. created() { },
  92. methods: {
  93. showEdit(row) {
  94. if (!row) {
  95. this.title = '添加'
  96. this.idAdd = true
  97. } else {
  98. this.title = '编辑'
  99. this.idAdd = false
  100. this.form = Object.assign({}, row)
  101. }
  102. this.dialogFormVisible = true
  103. },
  104. close() {
  105. this.$refs['form'].resetFields()
  106. this.form = this.$options.data().form
  107. this.dialogFormVisible = false
  108. this.$emit('fetch-data')
  109. },
  110. save() {
  111. this.$refs['form'].validate(async (valid) => {
  112. if (valid) {
  113. api.addLine(this.form).then(res => {
  114. if (res.data) {
  115. this.$message({
  116. type: 'success',
  117. message: '添加成功!'
  118. });
  119. this.$emit('save-success');
  120. this.dialogFormVisible = false
  121. }
  122. })
  123. } else {
  124. return false
  125. }
  126. })
  127. },
  128. handleChange() {
  129. },
  130. onBlur(val, param) {
  131. if (typeof (this.form[param]) !== 'number') {
  132. this.form[param] = val.replace(/[^0-9]/ig, "")
  133. }
  134. },
  135. },
  136. }
  137. </script>
  138. <style lang="less" scoped>
  139. .inputs {
  140. width: 200px;
  141. }
  142. .lists {
  143. display: flex;
  144. flex-direction: row;
  145. align-items: center;
  146. justify-content: space-between;
  147. }
  148. </style>