AddEvaIndexModal.vue 4.1 KB

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