codeModal.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <div>
  3. <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancel="cancel">
  4. <a-form :form="form" @submit="handleSubmit">
  5. <!-- 类别编码 -->
  6. <a-form-item label="类别编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  7. <a-input
  8. placeholder="请输入类别编码"
  9. :disabled="true"
  10. v-decorator="['formData.code', {
  11. initialValue: formData.code,
  12. rules: [{ required: true, message: '请输入类别编码!' }] }]"
  13. />
  14. </a-form-item>
  15. <!-- 名称 -->
  16. <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  17. <a-input
  18. placeholder="请输入名称(最多30个字符)"
  19. :maxLength="30"
  20. v-decorator="['formData.name', {
  21. initialValue: formData.name,
  22. rules: [{ required: true, message: '请输入名称!' }] }]"
  23. />
  24. </a-form-item>
  25. <!-- 排序值 -->
  26. <a-form-item label="排序值" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  27. <a-input-number
  28. style="width: 100%;"
  29. placeholder="请输入排序值(0~999999)"
  30. v-decorator="['formData.sort', {
  31. initialValue: formData.sort,
  32. rules: [{ required: true, message: '请输入排序值!' }] }]"
  33. :max="999999"
  34. :min="0"
  35. />
  36. </a-form-item>
  37. <!-- 状态 -->
  38. <a-form-item label="启用" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  39. <a-radio-group
  40. name="radioGroup"
  41. v-decorator="[
  42. 'formData.isEnable',
  43. {
  44. initialValue: formData.isEnable,
  45. rules: [{ required: true, message: '请选择状态!' }] },
  46. ]"
  47. >
  48. <a-radio :value="1">是</a-radio>
  49. <a-radio :value="0">否</a-radio>
  50. </a-radio-group>
  51. </a-form-item>
  52. <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  53. <a-textarea
  54. v-decorator="[
  55. 'formData.remarks',
  56. { initialValue: formData.remarks,
  57. rules: [] },
  58. ]"
  59. :maxLength="500"
  60. style="min-height: 60px;"
  61. placeholder="最多500字符"
  62. autosize />
  63. </a-form-item>
  64. <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
  65. <a-button type="primary" @click="handleSubmit()">
  66. 保存
  67. </a-button>
  68. <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
  69. 取消
  70. </a-button>
  71. </a-form-item>
  72. </a-form>
  73. </a-modal>
  74. </div>
  75. </template>
  76. <script>
  77. import { STable, VSelect } from '@/components'
  78. import { saveLookUp } from '@/api/lookup.js'
  79. export default {
  80. name: 'CodeModal',
  81. components: {
  82. STable, VSelect
  83. },
  84. props: {
  85. visible: {
  86. type: Boolean,
  87. default: false
  88. },
  89. data: {
  90. type: Object,
  91. default: function () {
  92. return {}
  93. }
  94. }
  95. },
  96. data () {
  97. return {
  98. titleText: '添加字典',
  99. isshow: this.visible,
  100. formLayout: 'horizontal',
  101. form: this.$form.createForm(this, { name: 'miniForm' }),
  102. formData: {
  103. name: '',
  104. code: '',
  105. sort: '',
  106. isEnable: '', // 活动状态
  107. remarks: ''
  108. }
  109. }
  110. },
  111. methods: {
  112. cancel (e) {
  113. this.clear()
  114. this.$emit('close')
  115. },
  116. // 保存提交
  117. handleSubmit () {
  118. const _this = this
  119. this.form.validateFields((err, values) => {
  120. if (!err) {
  121. console.log(values.formData, ' formData.type222222222')
  122. saveLookUp(Object.assign(this.formData, values.formData)).then(res => {
  123. console.log(res, 'res--save')
  124. if (res.status + '' === '200') {
  125. this.$message.success(res.message ? res.message : '保存成功')
  126. this.$emit('refresh')
  127. setTimeout(function () {
  128. _this.cancel()
  129. }, 300)
  130. } else {
  131. // this.$message.warning(res.message)
  132. }
  133. })
  134. }
  135. })
  136. },
  137. // 取消
  138. handleCancel () {
  139. const _this = this
  140. this.$confirm({
  141. title: '提示',
  142. content: '确定取消吗?',
  143. okText: '确定',
  144. cancelText: '取消',
  145. onOk () {
  146. _this.clear()
  147. _this.cancel()
  148. }
  149. })
  150. },
  151. clear () {
  152. this.form.resetFields()
  153. delete this.formData.id
  154. this.formData.name = ''
  155. this.formData.code = ''
  156. this.formData.sort = ''
  157. this.formData.isEnable = ''
  158. this.formData.remarks = ''
  159. }
  160. },
  161. mounted () {
  162. },
  163. beforeCreate () {
  164. this.form = this.$form.createForm(this, { name: 'miniForm' })
  165. },
  166. watch: {
  167. visible (newValue, oldValue) {
  168. this.isshow = newValue
  169. },
  170. isshow (newValue, oldValue) {
  171. if (newValue) {
  172. if (this.data.id) { // 编辑
  173. this.formData.titleText = '编辑字典'
  174. this.formData = Object.assign({}, this.data)
  175. delete this.formData.no
  176. this.formData.isEnable = Number(this.formData.isEnable)
  177. console.log(this.formData, 'this.formData')
  178. } else {
  179. this.formData.titleText = '添加字典'
  180. }
  181. } else {
  182. this.cancel()
  183. }
  184. }
  185. }
  186. }
  187. </script>
  188. <style >
  189. .modalBox{
  190. }
  191. .ant-modal-footer {
  192. display: none;
  193. }
  194. </style>