AddEvaItemModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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="addEvaItemModal-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-row :gutter="24">
  31. <a-col :span="20">
  32. <!-- 考评项目说明 -->
  33. <a-form-item label="考评项目说明:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  34. <a-textarea
  35. allowClear
  36. id="addEvaItemModal-desc"
  37. :maxLength="500"
  38. Input.TextArea
  39. :autoSize="{minRows:5}"
  40. v-decorator="[
  41. 'formData.desc',
  42. { initialValue: formData.desc,getValueFromEvent: $filterEmpty },
  43. ]"
  44. placeholder="请输入考评项目说明(最多500个字符)" />
  45. </a-form-item>
  46. </a-col>
  47. </a-row>
  48. <a-form-item :wrapper-col="{ span: 15, offset: 9 }">
  49. <a-button :loading="loading" id="addEvaItemModal-submit" type="primary" @click="handleSubmit()">
  50. 保存
  51. </a-button>
  52. <a-button id="addEvaItemModal-cancel" :style="{ marginLeft: '8px' }" @click="cancel()">
  53. 取消
  54. </a-button>
  55. </a-form-item>
  56. </a-form>
  57. </a-modal>
  58. </div>
  59. </template>
  60. <script>
  61. import {
  62. STable,
  63. VSelect
  64. } from '@/components'
  65. import {
  66. itemDetail,
  67. itemSave
  68. } from '@/api/evaluationItem.js'
  69. export default {
  70. name: 'AddEvaItemModal',
  71. components: {
  72. STable,
  73. VSelect
  74. },
  75. props: {
  76. visible: {
  77. type: Boolean,
  78. default: false
  79. },
  80. // 要编辑的项目id
  81. itemId: {
  82. type: [String, Number],
  83. default: ''
  84. }
  85. },
  86. watch: {
  87. visible (newValue, oldValue) {
  88. this.isshow = newValue
  89. },
  90. isshow (newValue, oldValue) {
  91. if (newValue) {
  92. this.form.resetFields()
  93. // 编辑查详情
  94. if (this.itemId) {
  95. this.getFormData(this.itemId)
  96. }
  97. } else {
  98. this.cancel()
  99. }
  100. }
  101. },
  102. data () {
  103. return {
  104. isshow: this.visible, // 弹框显示隐藏
  105. form: this.$form.createForm(this, {
  106. name: 'AddEvaItemModal'
  107. }),
  108. formData: {
  109. name: '', // 方案名称
  110. desc: '' // 方案说明
  111. },
  112. loading: false // 确定按钮loading
  113. }
  114. },
  115. computed: {
  116. // 弹框标题
  117. titleText () {
  118. return this.itemId ? '编辑' : '新增'
  119. }
  120. },
  121. methods: {
  122. // 点击弹框x号触发事件
  123. cancel (e) {
  124. this.formData.name = ''
  125. this.formData.desc = ''
  126. this.$emit('close')
  127. },
  128. // 查详情
  129. getFormData (id) {
  130. itemDetail({
  131. id: id
  132. }).then(res => {
  133. if (res.status == 200) {
  134. // console.log(res, 'rrrrrrrrrr')
  135. this.formData = Object.assign(this.formData, res.data)
  136. console.log(this.formData, 'this.formData')
  137. }
  138. })
  139. },
  140. // 保存提交
  141. handleSubmit () {
  142. this.form.validateFields((err, values) => {
  143. if (!err) {
  144. this.loading = true
  145. const params = this.itemId ? Object.assign({
  146. id: this.itemId
  147. }, values.formData) : values.formData
  148. // console.log(params, 'ppppppppppppp')
  149. itemSave(params).then(res => {
  150. console.log(res, 'res--save')
  151. if (res.status + '' === '200') {
  152. this.$message.success(res.message ? res.message : '保存成功')
  153. this.$emit('refresh')
  154. setTimeout(() => {
  155. this.cancel()
  156. }, 300)
  157. } else {
  158. // this.$message.warning(res.message)
  159. }
  160. this.loading = false
  161. })
  162. }
  163. })
  164. },
  165. // 取消
  166. handleCancel () {
  167. const _this = this
  168. this.$confirm({
  169. title: '提示',
  170. content: '确定取消吗?',
  171. okText: '确定',
  172. cancelText: '取消',
  173. onOk () {
  174. _this.cancel()
  175. }
  176. })
  177. },
  178. clear () {
  179. this.form.resetFields()
  180. }
  181. },
  182. beforeCreate () {
  183. this.form = this.$form.createForm(this, {
  184. name: 'AddEvaItemModal'
  185. })
  186. }
  187. }
  188. </script>
  189. <style scoped>
  190. .modalBox {}
  191. .ant-modal-footer {
  192. display: none;
  193. }
  194. .time-text {
  195. color: #1890FF;
  196. padding: 0px 20px;
  197. cursor: pointer;
  198. }
  199. .labelT {
  200. position: absolute;
  201. left: -135px;
  202. top: 20px;
  203. color: rgba(0, 0, 0, 0.85);
  204. }
  205. </style>