AddEvaModal.vue 6.4 KB

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