AddEvaModal.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <div>
  3. <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="600">
  4. <a-form :form="form" :model="formData" 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="addEvaModal-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-row :gutter="24">
  23. <a-col :span="20">
  24. <!-- 适用模式 -->
  25. <a-form-item label="适用模式:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  26. <v-select
  27. ref="orgType"
  28. id="addEvaModal-scopeType"
  29. allowClear
  30. mode="multiple"
  31. @change="scopeTypeChange"
  32. v-decorator="[
  33. 'formData.scopeType',
  34. { initialValue: formData.scopeType,
  35. rules: [{ required: true, message: '请选择适用模式!' }] },
  36. ]"
  37. code="TASK_TYPE"></v-select>
  38. </a-form-item>
  39. </a-col>
  40. </a-row>
  41. <a-row :gutter="24">
  42. <a-col :span="20">
  43. <!-- 考评方案说明 -->
  44. <a-form-item label="考评方案说明:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  45. <a-textarea
  46. allowClear
  47. id="addEvaModal-desc"
  48. :maxLength="500"
  49. Input.TextArea
  50. :autoSize="{minRows:5}"
  51. v-decorator="[
  52. 'formData.desc',
  53. { initialValue: formData.desc },
  54. ]"
  55. placeholder="请输入考评方案说明" />
  56. </a-form-item>
  57. </a-col>
  58. </a-row>
  59. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  60. <a-button :loading="loading" id="addEvaModal-submit" type="primary" @click="handleSubmit()">
  61. 确定
  62. </a-button>
  63. <a-button id="addEvaModal-cancel" :style="{ marginLeft: '8px' }" @click="handleCancel()">
  64. 取消
  65. </a-button>
  66. </a-form-item>
  67. </a-form>
  68. </a-modal>
  69. </div>
  70. </template>
  71. <script>
  72. import {
  73. VSelect
  74. } from '@/components'
  75. import {
  76. planSave,
  77. planDetail
  78. } from '@/api/evaluationPlan.js'
  79. export default {
  80. name: 'AddEvaModal',
  81. components: {
  82. VSelect
  83. },
  84. props: {
  85. visible: {
  86. type: Boolean,
  87. default: false
  88. },
  89. // 要编辑的方案id
  90. itemId: {
  91. type: [String, Number],
  92. default: ''
  93. }
  94. },
  95. watch: {
  96. visible (newValue, oldValue) {
  97. this.isshow = newValue
  98. },
  99. isshow (newValue, oldValue) {
  100. if (newValue) {
  101. this.form.resetFields()
  102. // 编辑查详情
  103. if (this.itemId) {
  104. this.getFormData(this.itemId)
  105. }
  106. } else {
  107. this.cancel()
  108. }
  109. }
  110. },
  111. data () {
  112. return {
  113. isshow: this.visible, // 弹框显示隐藏
  114. form: this.$form.createForm(this, {
  115. name: 'AddEvaModal'
  116. }),
  117. formData: {
  118. name: '', // 方案名称
  119. scopeType: [], // 适用类型
  120. desc: '' // 方案说明
  121. },
  122. loading: false, // 确定按钮loading
  123. options: [{
  124. code: 'VIDEO_INSPECTION',
  125. dispName: '视频巡店',
  126. id: 1
  127. },
  128. {
  129. code: 'SPOT_INSPECTION',
  130. dispName: '现场巡店',
  131. id: 12
  132. },
  133. {
  134. code: 'POINT_INSPECTION',
  135. dispName: '点检',
  136. id: 13
  137. }
  138. ]
  139. }
  140. },
  141. computed: {
  142. // 弹框标题
  143. titleText () {
  144. return this.itemId ? '编辑' : '新增'
  145. }
  146. },
  147. methods: {
  148. // 点击弹框x号触发事件
  149. cancel (e) {
  150. this.formData = {
  151. name: '', // 方案名称
  152. scopeType: [], // 适用类型
  153. desc: '' // 方案说明
  154. }
  155. this.$emit('close')
  156. },
  157. // 查详情
  158. getFormData (id) {
  159. planDetail({
  160. id: id
  161. }).then(res => {
  162. if (res.status == 200) {
  163. // console.log(res, 'rrrrrrrrrr')
  164. this.formData = Object.assign(this.formData, res.data)
  165. this.formData.scopeType = this.formData.scopeType.split(',')
  166. }
  167. })
  168. },
  169. // 使用模式改变
  170. scopeTypeChange (v) {
  171. this.formData.scopeType = v
  172. },
  173. // 保存提交
  174. handleSubmit () {
  175. const _this = this
  176. this.form.validateFields((err, values) => {
  177. if (!err) {
  178. this.loading = true
  179. const params = this.itemId ? Object.assign({
  180. id: this.itemId
  181. }, values.formData) : values.formData
  182. params.scopeType = params.scopeType.join(',')
  183. // console.log(params, 'ppppppppppppp')
  184. planSave(params).then(res => {
  185. console.log(res, 'res--save')
  186. if (res.status + '' === '200') {
  187. this.$message.success(res.message ? res.message : '保存成功')
  188. this.$emit('refresh')
  189. setTimeout(function () {
  190. _this.cancel()
  191. }, 300)
  192. } else {
  193. // this.$message.warning(res.message)
  194. }
  195. this.loading = false
  196. })
  197. }
  198. })
  199. },
  200. // 取消
  201. handleCancel () {
  202. const _this = this
  203. this.$confirm({
  204. title: '提示',
  205. content: '确定取消吗?',
  206. okText: '确定',
  207. cancelText: '取消',
  208. onOk () {
  209. _this.cancel()
  210. }
  211. })
  212. }
  213. },
  214. beforeCreate () {
  215. this.form = this.$form.createForm(this, {
  216. name: 'AddEvaModal'
  217. })
  218. }
  219. }
  220. </script>
  221. <style scoped>
  222. .modalBox {}
  223. .ant-modal-footer {
  224. display: none;
  225. }
  226. .time-text {
  227. color: #1890FF;
  228. padding: 0px 20px;
  229. cursor: pointer;
  230. }
  231. .labelT {
  232. position: absolute;
  233. left: -135px;
  234. top: 20px;
  235. color: rgba(0, 0, 0, 0.85);
  236. }
  237. </style>