codeItemModal.vue 11 KB

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