codeModal.vue 5.6 KB

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