AddEvaModal.vue 6.4 KB

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