AddEvaIndexModal.vue 4.3 KB

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