AddEvaIndexModal.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :footer="null"
  6. centered
  7. :title="titleText"
  8. v-model="isshow"
  9. @cancle="cancel"
  10. :width="600">
  11. <a-form :form="form" ref="form" @submit="handleSubmit">
  12. <a-row :gutter="24">
  13. <a-col :span="20">
  14. <!-- 考评指标名称 -->
  15. <a-form-item label="考评指标名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  16. <a-input
  17. allowClear
  18. id="addEvaIndexModal-name"
  19. :maxLength="128"
  20. v-decorator="[
  21. 'formData.name',
  22. { initialValue: formData.name,
  23. getValueFromEvent: $filterEmpty,
  24. rules: [{ required: true, message: '请输入考评指标名称!' }] },
  25. ]"
  26. placeholder="请输入考评指标名称(最多128个字符)" />
  27. </a-form-item>
  28. </a-col>
  29. </a-row>
  30. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  31. <a-button :loading="loading" id="addEvaIndexModal-submit" type="primary" @click="handleSubmit()">
  32. 保存
  33. </a-button>
  34. <a-button id="addEvaIndexModal-cancel" :style="{ marginLeft: '8px' }" @click="cancel()">
  35. 取消
  36. </a-button>
  37. </a-form-item>
  38. </a-form>
  39. </a-modal>
  40. </div>
  41. </template>
  42. <script>
  43. import {
  44. itemIndexSave,
  45. itemIndexDetail
  46. } from '@/api/evaluationItem.js'
  47. export default {
  48. name: 'AddEvaIndexModal',
  49. props: {
  50. visible: {
  51. type: Boolean,
  52. default: false
  53. },
  54. // 关联的考评项id
  55. itemId: {
  56. type: [String, Number],
  57. default: ''
  58. },
  59. // 要编辑的考评指标id
  60. itemIndexId: {
  61. type: [String, Number],
  62. default: ''
  63. }
  64. },
  65. watch: {
  66. visible (newValue, oldValue) {
  67. this.isshow = newValue
  68. },
  69. isshow (newValue, oldValue) {
  70. if (newValue) {
  71. // 编辑 查数据
  72. if (this.itemIndexId) {
  73. this.getData(this.itemIndexId)
  74. }
  75. } else {
  76. this.cancel()
  77. }
  78. }
  79. },
  80. data () {
  81. return {
  82. isshow: this.visible, // 弹框显示隐藏
  83. form: this.$form.createForm(this, {
  84. name: 'AddEvaIndexModal'
  85. }),
  86. formData: {
  87. name: '' // 指标名称
  88. },
  89. loading: false // 确定按钮loading
  90. }
  91. },
  92. computed: {
  93. // 弹框标题
  94. titleText () {
  95. return this.itemIndexId ? '编辑' : '新增'
  96. }
  97. },
  98. methods: {
  99. // 点击弹框x号触发事件
  100. cancel (e) {
  101. this.clear()
  102. this.$emit('close')
  103. },
  104. // 编辑时,获取数据详情
  105. getData (id) {
  106. itemIndexDetail({ id: id }).then(res => {
  107. if (res.status == 200) {
  108. // console.log(res, 'rrrrrrrrrr')
  109. this.form.setFieldsValue({ 'formData.name': res.data.name })
  110. }
  111. })
  112. },
  113. // 保存提交
  114. handleSubmit () {
  115. const _this = this
  116. this.form.validateFields((err, values) => {
  117. if (!err) {
  118. this.loading = true
  119. const params = this.itemIndexId ? Object.assign({ assessItemId: this.itemId, id: this.itemIndexId }, values.formData) : Object.assign({ assessItemId: this.itemId }, values.formData)
  120. // console.log(params, 'ppppppppppppp')
  121. itemIndexSave(params).then(res => {
  122. console.log(res, 'res--save')
  123. if (res.status + '' === '200') {
  124. this.$message.success(res.message ? res.message : '保存成功')
  125. this.$emit('refresh')
  126. setTimeout(function () {
  127. _this.cancel()
  128. }, 300)
  129. } else {
  130. // this.$message.warning(res.message)
  131. }
  132. this.loading = false
  133. })
  134. }
  135. })
  136. },
  137. clear () {
  138. this.form.resetFields()
  139. }
  140. },
  141. beforeCreate () {
  142. this.form = this.$form.createForm(this, {
  143. name: 'AddEvaIndexModal'
  144. })
  145. }
  146. }
  147. </script>
  148. <style scoped>
  149. .modalBox {}
  150. .ant-modal-footer {
  151. display: none;
  152. }
  153. .time-text {
  154. color: #1890FF;
  155. padding: 0px 20px;
  156. cursor: pointer;
  157. }
  158. .labelT {
  159. position: absolute;
  160. left: -135px;
  161. top: 20px;
  162. color: rgba(0, 0, 0, 0.85);
  163. }
  164. </style>