codeItemModal.vue 10 KB

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