updateCooperate.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <a-modal
  3. centered
  4. class="updateCooperate-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="title"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <div>
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="labelCol"
  18. :wrapper-col="wrapperCol"
  19. id="updateCooperate-form"
  20. >
  21. <a-form-model-item label="商户名称">
  22. {{ form.dealerName }}
  23. </a-form-model-item>
  24. <a-form-model-item label="合作状态" prop="cooperateFlag">
  25. <v-select code="DEALER_COOPERATE_FLAG" id="updateCooperate-cooperateFlag" v-model="form.cooperateFlag" allowClear placeholder="请选择合作状态"></v-select>
  26. </a-form-model-item>
  27. <a-form-model-item label="生效时间" prop="cooperateEffectiveTime">
  28. <a-date-picker
  29. style="width:100%"
  30. id="updateCooperate-cooperateEffectiveTime"
  31. v-model="form.cooperateEffectiveTime"
  32. :format="dateFormat"
  33. placeholder="请选择日期" />
  34. </a-form-model-item>
  35. <div style="display: flex;justify-content: center;padding: 30px 0;">
  36. <a-button id="updateCooperate-cancel-btn" @click="cancel">取消</a-button>
  37. <a-button id="updateCooperate-submit-btn" style="margin-left: 15px;" type="primary" @click="onSubmit">确定</a-button>
  38. </div>
  39. </a-form-model>
  40. </a-spin>
  41. </div>
  42. </a-modal>
  43. </template>
  44. <script>
  45. import { commonMixin } from '@/utils/mixin'
  46. import moment from 'moment'
  47. // 组件
  48. import { VSelect } from '@/components'
  49. // 接口
  50. import { updateCooperate } from '@/api/dealer'
  51. export default {
  52. name: 'UpdateCooperate',
  53. mixins: [commonMixin],
  54. components: { VSelect },
  55. props: {
  56. openUcModal: { // 弹框显示状态
  57. type: Boolean,
  58. default: false
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openUcModal, // 是否打开弹框
  64. spinning: false,
  65. title: '合作设置', // 表格标题
  66. dateFormat: 'YYYY-MM-DD', // 日期格式
  67. labelCol: { span: 5 }, // form表单label布局
  68. wrapperCol: { span: 16 },
  69. // 提交数据
  70. form: {
  71. dealerName: '', // 商户名称
  72. cooperateFlag: undefined, // 合作状态
  73. cooperateEffectiveTime: null// 生效时间
  74. },
  75. // 表单验证规则
  76. rules: {
  77. cooperateFlag: [
  78. { required: true, message: '请选择合作状态', trigger: 'change' }
  79. ],
  80. cooperateEffectiveTime: [
  81. { required: true, message: '请选择生效时间', trigger: 'change' }
  82. ]
  83. }
  84. }
  85. },
  86. methods: {
  87. // 不可选日期
  88. disabledDate (date, dateStrings) {
  89. return date && date.valueOf() > Date.now()
  90. },
  91. // 赋值
  92. setData (row) {
  93. this.form.dealerSn = row.dealerSn
  94. this.form.dealerName = row.dealerName
  95. this.form.cooperateFlag = row.cooperateFlag
  96. this.form.cooperateEffectiveTime = row.cooperateEffectiveTime
  97. },
  98. // 确定提交
  99. onSubmit () {
  100. const _this = this
  101. this.$refs.ruleForm.validate(valid => {
  102. if (valid) {
  103. const params = JSON.parse(JSON.stringify(_this.form))
  104. params.cooperateEffectiveTime = moment(params.cooperateEffectiveTime).format('YYYY-MM-DD') + ' 00:00:00'
  105. _this.spinning = true
  106. updateCooperate(params).then(res => {
  107. if (res.status == 200) {
  108. _this.$message.success(res.message)
  109. _this.$emit('ok')
  110. _this.spinning = false
  111. } else {
  112. _this.spinning = false
  113. }
  114. })
  115. } else {
  116. return false
  117. }
  118. })
  119. },
  120. // 取消
  121. cancel () {
  122. this.$emit('close')
  123. this.$refs.ruleForm.resetFields()
  124. }
  125. },
  126. watch: {
  127. // 父页面传过来的弹框状态
  128. openUcModal (newValue, oldValue) {
  129. this.isShow = newValue
  130. },
  131. // 重定义的弹框状态
  132. isShow (newValue, oldValue) {
  133. if (!newValue) {
  134. this.$emit('close')
  135. }
  136. }
  137. }
  138. }
  139. </script>
  140. <style lang="less">
  141. .merchantInfoManagement-modal{
  142. .ant-modal-body {
  143. padding: 40px 40px 24px;
  144. }
  145. }
  146. </style>