codeItemModal.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <div>
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
  5. <a-form :form="form" @submit="handleSubmit">
  6. <a-row :gutter="24">
  7. <a-col :span="24">
  8. <!-- code -->
  9. <a-form-item label="字典码" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  10. <a-input
  11. disabled
  12. placeholder=""
  13. v-decorator="['formData.lookupCode', {
  14. initialValue: formData.lookupCode,
  15. rules: [] }]"
  16. />
  17. </a-form-item>
  18. </a-col>
  19. </a-row>
  20. <a-row :gutter="24">
  21. <a-col :span="12" style="padding-right: 0px;">
  22. <!-- 名称 -->
  23. <a-form-item label="名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  24. <a-input
  25. placeholder="请输入名称(最多30个字符)"
  26. :maxLength="30"
  27. v-decorator="['formData.dispName', {
  28. initialValue: formData.dispName,
  29. rules: [{ required: true, message: '请输入名称!' }] }]"
  30. />
  31. </a-form-item>
  32. </a-col>
  33. <a-col :span="12">
  34. <!-- 项编码 -->
  35. <a-form-item label="项编码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  36. <a-input
  37. placeholder="请输入项编码"
  38. v-decorator="['formData.code', {
  39. initialValue: formData.code,
  40. rules: [{ required: true, message: '请输入项编码!' }] }]"
  41. />
  42. </a-form-item>
  43. </a-col>
  44. </a-row>
  45. <a-row :gutter="24">
  46. <a-col :span="12" style="padding-right: 0px;">
  47. <a-form-item label="启用" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  48. <a-radio-group
  49. name="radioGroup"
  50. v-decorator="[
  51. 'formData.isEnable',
  52. {
  53. initialValue: formData.isEnable,
  54. rules: [] },
  55. ]"
  56. >
  57. <a-radio :value="1">是</a-radio>
  58. <a-radio :value="0">否</a-radio>
  59. </a-radio-group>
  60. </a-form-item>
  61. </a-col>
  62. <!-- 排序值 -->
  63. <a-col :span="12">
  64. <a-form-item label="排序值" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  65. <a-input-number
  66. style="width: 100%;"
  67. placeholder="请输入排序值(0~999999)"
  68. v-decorator="['formData.sort', {
  69. initialValue: formData.sort,
  70. rules: [{ required: true, message: '请输入排序值!' }] }]"
  71. :max="999999"
  72. :min="0"
  73. />
  74. </a-form-item>
  75. </a-col>
  76. </a-row>
  77. <!-- 扩展参数 -->
  78. <a-row :gutter="24">
  79. <a-col :span="12" style="padding-right: 0px;">
  80. <!-- 扩展一 -->
  81. <a-form-item label="扩展一" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  82. <a-input
  83. placeholder=""
  84. v-decorator="['formData.attr1', {
  85. initialValue: formData.attr1,
  86. rules: [] }]"
  87. />
  88. </a-form-item>
  89. </a-col>
  90. <a-col :span="12">
  91. <!-- 扩展二 -->
  92. <a-form-item label="扩展二" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  93. <a-input
  94. placeholder=""
  95. v-decorator="['formData.attr2', {
  96. initialValue: formData.attr2,
  97. rules: [] }]"
  98. />
  99. </a-form-item>
  100. </a-col>
  101. <a-col :span="12" style="padding-right: 0px;">
  102. <!-- 扩展三 -->
  103. <a-form-item label="扩展三" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  104. <a-input
  105. placeholder=""
  106. v-decorator="['formData.attr3', {
  107. initialValue: formData.attr3,
  108. rules: [] }]"
  109. />
  110. </a-form-item>
  111. </a-col>
  112. <a-col :span="12">
  113. <!-- 扩展四 -->
  114. <a-form-item label="扩展四" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  115. <a-input
  116. placeholder=""
  117. v-decorator="['formData.attr4', {
  118. initialValue: formData.attr4,
  119. rules: [] }]"
  120. />
  121. </a-form-item>
  122. </a-col>
  123. <a-col :span="12" style="padding-right: 0px;">
  124. <!-- 扩展五 -->
  125. <a-form-item label="扩展五" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  126. <a-input
  127. placeholder=""
  128. v-decorator="['formData.attr5', {
  129. initialValue: formData.attr5,
  130. rules: [] }]"
  131. />
  132. </a-form-item>
  133. </a-col>
  134. <a-col :span="12">
  135. <!-- 扩展六 -->
  136. <a-form-item label="扩展六" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  137. <a-input
  138. placeholder=""
  139. v-decorator="['formData.attr6', {
  140. initialValue: formData.attr6,
  141. rules: [] }]"
  142. />
  143. </a-form-item>
  144. </a-col>
  145. </a-row>
  146. <a-row :gutter="24">
  147. <a-col :span="24">
  148. <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  149. <a-textarea
  150. v-decorator="[
  151. 'formData.remarks',
  152. {
  153. initialValue: formData.remarks,
  154. rules: [] },
  155. ]"
  156. :maxLength="500"
  157. style="min-height: 60px;"
  158. placeholder="最多500字符"
  159. autosize />
  160. </a-form-item>
  161. </a-col>
  162. </a-row>
  163. <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
  164. <a-button type="primary" @click="handleSubmit()">
  165. 保存
  166. </a-button>
  167. <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
  168. 取消
  169. </a-button>
  170. </a-form-item>
  171. </a-form>
  172. </a-modal>
  173. </a-spin>
  174. </div>
  175. </template>
  176. <script>
  177. import { STable, VSelect } from '@/components'
  178. import { saveLookUpItem } from '@/api/lookup.js'
  179. export default {
  180. name: 'CodeItemModal',
  181. components: {
  182. STable, VSelect
  183. },
  184. props: {
  185. visible: {
  186. type: Boolean,
  187. default: false
  188. },
  189. data: {
  190. type: Object,
  191. default: function () {
  192. return {}
  193. }
  194. }
  195. },
  196. data () {
  197. return {
  198. spinning: false,
  199. titleText: '添加字典项',
  200. isshow: this.visible,
  201. formLayout: 'horizontal',
  202. form: this.$form.createForm(this, { name: 'miniForm' }),
  203. roleList: [],
  204. formData: {
  205. lookupCode: '',
  206. code: '', // code
  207. dispName: '',
  208. isEnable: 1, // 活动状态
  209. sort: '',
  210. attr1: '',
  211. attr2: '',
  212. attr3: '',
  213. attr4: '',
  214. attr5: '',
  215. attr6: '',
  216. remarks: ''
  217. }
  218. }
  219. },
  220. methods: {
  221. cancel (e) {
  222. this.clear()
  223. this.$emit('close')
  224. },
  225. // 保存提交
  226. handleSubmit () {
  227. const _this = this
  228. this.form.validateFields((err, values) => {
  229. if (!err) {
  230. _this.spinning = true
  231. saveLookUpItem(Object.assign(this.formData, values.formData)).then(res => {
  232. if (res.status == 200) {
  233. this.$message.success(res.message)
  234. this.$emit('refresh')
  235. setTimeout(function () {
  236. _this.cancel()
  237. _this.spinning = false
  238. }, 300)
  239. } else {
  240. _this.spinning = false
  241. // this.$message.error(res.message)
  242. }
  243. })
  244. }
  245. })
  246. },
  247. // 取消
  248. handleCancel () {
  249. const _this = this
  250. this.$confirm({
  251. title: '提示',
  252. content: '确定取消吗?',
  253. centered: true,
  254. onOk () {
  255. _this.clear()
  256. _this.cancel()
  257. }
  258. })
  259. },
  260. clear () {
  261. this.form.resetFields()
  262. delete this.formData.id
  263. this.formData.lookupCode = ''
  264. this.formData.code = ''
  265. this.formData.dispName = ''
  266. this.formData.isEnable = 1
  267. this.formData.sort = ''
  268. this.formData.attr1 = ''
  269. this.formData.attr2 = ''
  270. this.formData.attr3 = ''
  271. this.formData.attr4 = ''
  272. this.formData.attr5 = ''
  273. this.formData.attr6 = ''
  274. this.formData.remarks = ''
  275. }
  276. },
  277. beforeCreate () {
  278. this.form = this.$form.createForm(this, { name: 'miniForm' })
  279. },
  280. watch: {
  281. visible (newValue, oldValue) {
  282. this.isshow = newValue
  283. },
  284. isshow (newValue, oldValue) {
  285. if (newValue) {
  286. if (this.data.id) { // 编辑
  287. this.titleText = '编辑字典项'
  288. this.formData = Object.assign({}, this.data)
  289. delete this.formData.no
  290. this.formData.isEnable = Number(this.formData.isEnable)
  291. } else {
  292. this.formData.lookupCode = this.data.lookupCode
  293. this.titleText = '添加字典项'
  294. }
  295. } else {
  296. this.cancel()
  297. }
  298. }
  299. }
  300. }
  301. </script>
  302. <style >
  303. .modalBox{
  304. width: 650px !important;
  305. }
  306. .ant-modal-footer {
  307. display: none;
  308. }
  309. </style>