codeItemModal.vue 9.3 KB

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