codeModal.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <div>
  3. <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="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. centered: true,
  146. onOk () {
  147. _this.clear()
  148. _this.cancel()
  149. }
  150. })
  151. },
  152. clear () {
  153. this.form.resetFields()
  154. delete this.formData.id
  155. this.formData.name = ''
  156. this.formData.code = ''
  157. this.formData.sort = ''
  158. this.formData.isEnable = ''
  159. this.formData.remarks = ''
  160. }
  161. },
  162. mounted () {
  163. },
  164. beforeCreate () {
  165. this.form = this.$form.createForm(this, { name: 'miniForm' })
  166. },
  167. watch: {
  168. visible (newValue, oldValue) {
  169. this.isshow = newValue
  170. },
  171. isshow (newValue, oldValue) {
  172. if (newValue) {
  173. if (this.data.id) { // 编辑
  174. this.formData.titleText = '编辑字典'
  175. this.formData = Object.assign({}, this.data)
  176. delete this.formData.no
  177. this.formData.isEnable = Number(this.formData.isEnable)
  178. console.log(this.formData, 'this.formData')
  179. } else {
  180. this.formData.titleText = '添加字典'
  181. }
  182. } else {
  183. this.cancel()
  184. }
  185. }
  186. }
  187. }
  188. </script>
  189. <style >
  190. .modalBox{
  191. }
  192. .ant-modal-footer {
  193. display: none;
  194. }
  195. </style>