AddEvaIndexModal.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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: 15, offset: 9 }">
  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. replaceDqm (str) {
  114. // console.log(str.split('"'))
  115. const arr = str.split('"')
  116. let ret = ''
  117. for (let i = 0; i < arr.length; i++) {
  118. if (i != arr.length - 1) {
  119. ret = ret + arr[i] + ((i % 2 == 0) ? '“' : '”')
  120. } else {
  121. ret = ret + arr[i]
  122. }
  123. }
  124. return ret
  125. },
  126. // 保存提交
  127. handleSubmit () {
  128. const _this = this
  129. this.form.validateFields((err, values) => {
  130. if (!err) {
  131. this.loading = true
  132. values.formData.name = this.replaceDqm(values.formData.name)
  133. const params = this.itemIndexId ? Object.assign({ assessItemId: this.itemId, id: this.itemIndexId }, values.formData) : Object.assign({ assessItemId: this.itemId }, values.formData)
  134. // console.log(params, 'ppppppppppppp')
  135. itemIndexSave(params).then(res => {
  136. console.log(res, 'res--save')
  137. if (res.status + '' === '200') {
  138. this.$message.success(res.message ? res.message : '保存成功')
  139. this.$emit('refresh')
  140. setTimeout(function () {
  141. _this.cancel()
  142. }, 300)
  143. } else {
  144. // this.$message.warning(res.message)
  145. }
  146. this.loading = false
  147. })
  148. }
  149. })
  150. },
  151. clear () {
  152. this.form.resetFields()
  153. }
  154. },
  155. beforeCreate () {
  156. this.form = this.$form.createForm(this, {
  157. name: 'AddEvaIndexModal'
  158. })
  159. }
  160. }
  161. </script>
  162. <style scoped>
  163. .modalBox {}
  164. .ant-modal-footer {
  165. display: none;
  166. }
  167. .time-text {
  168. color: #1890FF;
  169. padding: 0px 20px;
  170. cursor: pointer;
  171. }
  172. .labelT {
  173. position: absolute;
  174. left: -135px;
  175. top: 20px;
  176. color: rgba(0, 0, 0, 0.85);
  177. }
  178. </style>