SetEvaDefaultModal.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :footer="null"
  6. title="默认方案设置"
  7. v-model="isshow"
  8. @cancle="cancel"
  9. :width="600">
  10. <a-form :form="form" ref="form" @submit="handleSubmit">
  11. <a-row :gutter="24">
  12. <a-col :span="24">
  13. <!-- 视频巡店默认方案 -->
  14. <a-form-item label="视频巡店默认方案:" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
  15. <a-select
  16. id="setEvaDefaultModal-videoType"
  17. @change="videoTypeChange"
  18. v-decorator="[
  19. 'formData.videoType',
  20. { initialValue: formData.videoType,
  21. rules: [{ required: true, message: '请选择考评方案(单选)!' }] },
  22. ]"
  23. placeholder="请选择考评方案(单选)"
  24. >
  25. <a-select-option v-for="item in planList" :key="item.id" :value="item.id">
  26. {{ item.name }}
  27. </a-select-option>
  28. </a-select>
  29. </a-form-item>
  30. </a-col>
  31. </a-row>
  32. <a-row :gutter="24">
  33. <a-col :span="24">
  34. <!-- 现场巡店默认方案 -->
  35. <a-form-item label="现场巡店默认方案:" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
  36. <a-select
  37. id="setEvaDefaultModal-spotType"
  38. placeholder="请选择考评方案(单选)"
  39. @change="spotTypeChange"
  40. v-decorator="[
  41. 'formData.spotType',
  42. { initialValue: formData.spotType,
  43. rules: [{ required: true, message: '请选择考评方案(单选)!' }] },
  44. ]">
  45. <a-select-option v-for="item in planList" :key="item.id" :value="item.id">
  46. {{ item.name }}
  47. </a-select-option>
  48. </a-select>
  49. </a-form-item>
  50. </a-col>
  51. </a-row>
  52. <a-row>
  53. <a-col :span="22">
  54. 说明:如果默认方案被删除,系统将自动获取对应类别下最新一条启用的模板作为默认方案模板
  55. </a-col>
  56. </a-row>
  57. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  58. <a-button :loading="loading" id="setEvaDefaultModal-submit" type="primary" @click="handleSubmit()">
  59. 确定
  60. </a-button>
  61. <a-button id="setEvaDefaultModal-cancle" :style="{ marginLeft: '8px' }" @click="cancel()">
  62. 取消
  63. </a-button>
  64. </a-form-item>
  65. </a-form>
  66. </a-modal>
  67. </div>
  68. </template>
  69. <script>
  70. import {
  71. STable,
  72. VSelect
  73. } from '@/components'
  74. import {
  75. planQuery,
  76. planDefaultSave
  77. } from '@/api/evaluationPlan.js'
  78. export default {
  79. name: 'AddEvaModal',
  80. components: {
  81. STable,
  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. defaultPlanList: {
  96. type: Array,
  97. default: function () {
  98. return []
  99. }
  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. this.pageInit()
  111. } else {
  112. this.cancel()
  113. }
  114. }
  115. },
  116. data () {
  117. return {
  118. isshow: this.visible, // 弹框显示隐藏
  119. form: this.$form.createForm(this, {
  120. name: 'AddEvaModal'
  121. }),
  122. // 默认值设为undefined, 解决placeholder不生效问题
  123. formData: {
  124. videoType: undefined, // 视频巡店默认方案
  125. spotType: undefined // 现场巡店默认方案
  126. },
  127. planList: [], // 考评方案列表
  128. loading: false // 确定按钮loading
  129. }
  130. },
  131. computed: {},
  132. mounted () {
  133. // 获取方案列表数据
  134. this.getPlanList()
  135. },
  136. methods: {
  137. pageInit () {
  138. if (this.defaultPlanList.length) {
  139. this.formData.videoType = this.defaultPlanList.find(item => item.scopeType == 'VIDEO_INSPECTION').assessId
  140. this.formData.spotType = this.defaultPlanList.find(item => item.scopeType == 'SPOT_INSPECTION').assessId
  141. }
  142. },
  143. // 点击弹框x号触发事件
  144. cancel (e) {
  145. this.formData.videoType = undefined
  146. this.formData.spotType = undefined
  147. this.$emit('close')
  148. },
  149. // 获取方案列表数据
  150. getPlanList () {
  151. planQuery().then(res => {
  152. if (res.status == 200) {
  153. this.planList = res.data
  154. } else {
  155. this.planList = []
  156. }
  157. })
  158. },
  159. // 视频巡店默认方案改变
  160. videoTypeChange (v) {
  161. this.formData.videoType = v
  162. },
  163. // 现场巡店默认方案改变
  164. spotTypeChange (v) {
  165. this.formData.spotType = v
  166. },
  167. // 保存提交
  168. handleSubmit () {
  169. const _this = this
  170. this.form.validateFields((err, values) => {
  171. if (!err) {
  172. this.loading = true
  173. const params = [{
  174. assessId: values.formData.videoType,
  175. scopeType: 'VIDEO_INSPECTION'
  176. },
  177. {
  178. assessId: values.formData.spotType,
  179. scopeType: 'SPOT_INSPECTION'
  180. }
  181. ]
  182. planDefaultSave(params).then(res => {
  183. console.log(res, 'res--save')
  184. if (res.status + '' === '200') {
  185. this.$message.success(res.message ? res.message : '保存成功')
  186. // 保存后更新默认方案
  187. this.$emit('refresh')
  188. setTimeout(function () {
  189. _this.cancel()
  190. }, 300)
  191. } else {
  192. // this.$message.warning(res.message)
  193. }
  194. this.loading = false
  195. })
  196. }
  197. })
  198. },
  199. // 取消
  200. handleCancel () {
  201. const _this = this
  202. this.$confirm({
  203. title: '提示',
  204. content: '确定取消吗?',
  205. okText: '确定',
  206. cancelText: '取消',
  207. onOk () {
  208. _this.cancel()
  209. }
  210. })
  211. }
  212. },
  213. beforeCreate () {
  214. this.form = this.$form.createForm(this, {
  215. name: 'AddEvaModal'
  216. })
  217. }
  218. }
  219. </script>
  220. <style scoped>
  221. .modalBox {}
  222. .ant-modal-footer {
  223. display: none;
  224. }
  225. .time-text {
  226. color: #1890FF;
  227. padding: 0px 20px;
  228. cursor: pointer;
  229. }
  230. .labelT {
  231. position: absolute;
  232. left: -135px;
  233. top: 20px;
  234. color: rgba(0, 0, 0, 0.85);
  235. }
  236. </style>