index.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <template>
  2. <template-page
  3. ref="pageRef"
  4. :getList="getList"
  5. :exportList="exportList"
  6. :columnParsing="columnParsing"
  7. :optionsEvensGroup="optionsEvensGroup"
  8. :tableAttributes="tableAttributes"
  9. :tableEvents="tableEvents"
  10. >
  11. <el-dialog
  12. title=""
  13. width="600px"
  14. :modal="true"
  15. :visible.sync="formDialog"
  16. :show-close="true"
  17. :close-on-click-modal="false"
  18. :modal-append-to-body="false"
  19. append-to-body
  20. :before-close="formCancel"
  21. >
  22. <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
  23. <zj-form-module title="新增" label-width="90px" :form-data="formData" :form-items="formItems"> </zj-form-module>
  24. </zj-form-container>
  25. <div slot="footer" class="dialog-footer">
  26. <el-button size="mini" @click="formCancel">取 消</el-button>
  27. <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
  28. </div>
  29. </el-dialog>
  30. </template-page>
  31. </template>
  32. <script>
  33. import TemplatePage from '@/components/template/template-page-1.vue'
  34. import {
  35. partsOldOutList,
  36. partsOldOutExport,
  37. partsOldOutAdd
  38. } from '@/api/material-system/center/center-old-parts-shop-out'
  39. import { getWebsit } from '@/api/customerManagement.js'
  40. import { getGoodsList } from '@/api/auxiliaryFittings/auxiliarySalesReturnOrder'
  41. import operation_mixin from '@/components/template/operation_mixin.js'
  42. export default {
  43. components: { TemplatePage },
  44. mixins: [operation_mixin],
  45. data() {
  46. return {
  47. // 表格属性
  48. tableAttributes: {},
  49. // 表格事件
  50. tableEvents: {},
  51. // 事物类型
  52. objectTypeList: [
  53. { label: '退旧件', value: '退旧件' },
  54. { label: '无件返回', value: '无件返回' },
  55. { label: '新件退库', value: '新件退库' }
  56. ],
  57. websitList: [],
  58. partsList: [],
  59. formDialog: false,
  60. formData: {
  61. objectType: '',
  62. objectTypeName: '',
  63. partsName: '',
  64. partsNumber: '',
  65. qty: '',
  66. applyNo: '',
  67. materialGroupId: '',
  68. materialGroupName: '',
  69. remark: '',
  70. unitId: '',
  71. unitName: '',
  72. voucherNo: '',
  73. totalNumber: 0,
  74. websitId: '',
  75. websitName: '',
  76. partsWebsitId: ''
  77. }
  78. }
  79. },
  80. computed: {
  81. optionsEvensGroup() {
  82. return [
  83. [
  84. [
  85. this.optionsEvensAuth('add', {
  86. click: () => {
  87. getWebsit({ type: 'C', status: true, queryPartsWebsit: true }).then(res => {
  88. this.websitList = res.data.map(item => ({ label: item.name, value: item.websitId, ...item }))
  89. this.formDialog = true
  90. })
  91. }
  92. })
  93. ]
  94. ]
  95. ]
  96. },
  97. formItems() {
  98. return [
  99. {
  100. name: 'el-select',
  101. md: 24,
  102. options: this.objectTypeList,
  103. attributes: {
  104. placeholder: '请选择',
  105. clearable: true,
  106. filterable: true
  107. },
  108. formItemAttributes: {
  109. label: '事物类型',
  110. prop: 'objectType',
  111. rules: [{ required: true, message: '请选择', trigger: 'blur' }]
  112. },
  113. events: {
  114. change: val => {
  115. this.formData.partsNumber = ''
  116. this.formData.partsName = ''
  117. this.formData.materialGroupId = ''
  118. this.formData.materialGroupName = ''
  119. this.formData.unitId = ''
  120. this.formData.unitName = ''
  121. this.formData.totalNumber = ''
  122. if (val) {
  123. this.formData.objectTypeName = this.objectTypeList.find(item => item.value === val)?.label || ''
  124. } else {
  125. this.formData.objectTypeName = ''
  126. }
  127. }
  128. }
  129. },
  130. {
  131. name: 'el-select',
  132. md: 24,
  133. options: this.websitList,
  134. attributes: {
  135. placeholder: '请选择',
  136. clearable: true,
  137. filterable: true
  138. },
  139. formItemAttributes: {
  140. label: '网点',
  141. prop: 'websitId',
  142. rules: [{ required: true, message: '请选择', trigger: 'blur' }]
  143. },
  144. events: {
  145. change: v => {
  146. var data = this.websitList.find(item => item.websitId === v)
  147. if (data) {
  148. this.formData.websitName = data?.name
  149. this.formData.partsWebsitId = data?.partsWebsitId
  150. } else {
  151. this.formData.websitName = ''
  152. this.formData.partsWebsitId = ''
  153. }
  154. this.getOptions(v)
  155. }
  156. }
  157. },
  158. {
  159. name: 'el-select',
  160. md: 24,
  161. options: this.partsList,
  162. attributes: {
  163. placeholder: '请选择',
  164. clearable: true,
  165. filterable: true
  166. },
  167. formItemAttributes: {
  168. label: '配件名称',
  169. prop: 'partsNumber',
  170. rules: [{ required: true, message: '请选择', trigger: 'blur' }]
  171. },
  172. events: {
  173. change: async val => {
  174. if (val) {
  175. var item = this.partsList.find(item => item.value === val)
  176. if (item) {
  177. this.formData.partsName = item?.label
  178. this.formData.materialGroupId = item.data.materialGroupId
  179. this.formData.materialGroupName = item.data.materialGroupName
  180. this.formData.unitId = item.data.unitId
  181. this.formData.unitName = item.data.unitName
  182. this.formData.totalNumber = (() => {
  183. if (!!~['新件退库'].indexOf(this.formData.objectType)) {
  184. return item.data.newQty
  185. } else if (!!~['退旧件', '无件返回'].indexOf(this.formData.objectType)) {
  186. return item.data.oldQty
  187. } else {
  188. return 0
  189. }
  190. })()
  191. return
  192. }
  193. }
  194. this.formData.partsName = ''
  195. this.formData.materialGroupId = ''
  196. this.formData.materialGroupName = ''
  197. this.formData.unitId = ''
  198. this.formData.unitName = ''
  199. this.formData.totalNumber = 0
  200. }
  201. }
  202. },
  203. {
  204. name: 'el-input',
  205. md: 24,
  206. attributes: { placeholder: '请输入', disabled: true },
  207. formItemAttributes: { label: '物料组名称', prop: 'materialGroupName' }
  208. },
  209. {
  210. name: 'el-input',
  211. md: 24,
  212. attributes: { placeholder: '请输入', disabled: true },
  213. formItemAttributes: { label: '单位名称', prop: 'unitName' }
  214. },
  215. {
  216. name: 'el-input',
  217. md: 12,
  218. attributes: { placeholder: '请输入', type: 'number' },
  219. formItemAttributes: {
  220. label: '数量',
  221. prop: 'qty',
  222. rules: [
  223. { required: true, message: '请输入', trigger: 'blur' },
  224. {
  225. validator: (rule, value, callback) => {
  226. console.log(value)
  227. if (value && value > this.formData.totalNumber) {
  228. callback(new Error('值不能大于剩余数量'))
  229. } else {
  230. callback()
  231. }
  232. },
  233. trigger: 'blur'
  234. }
  235. ]
  236. }
  237. },
  238. {
  239. name: 'el-input',
  240. md: 12,
  241. attributes: { placeholder: '请输入', type: 'number', disabled: true },
  242. formItemAttributes: { label: '剩余数量', prop: 'totalNumber' }
  243. },
  244. {
  245. name: 'el-input',
  246. md: 24,
  247. attributes: { placeholder: '请输入' },
  248. formItemAttributes: { label: '申请单号', prop: 'applyNo' }
  249. },
  250. {
  251. name: 'el-input',
  252. md: 24,
  253. attributes: { placeholder: '请输入' },
  254. formItemAttributes: { label: '凭证号', prop: 'voucherNo' }
  255. },
  256. {
  257. name: 'el-input',
  258. md: 24,
  259. attributes: { placeholder: '请输入', type: 'textarea', rows: 3 },
  260. formItemAttributes: { label: '开单备注', prop: 'remark' }
  261. }
  262. ]
  263. }
  264. },
  265. methods: {
  266. // 列表请求函数
  267. getList: partsOldOutList,
  268. // 列表导出函数
  269. exportList: partsOldOutExport,
  270. // 表格列解析渲染数据更改
  271. columnParsing(item, defaultData) {
  272. return defaultData
  273. },
  274. // 获取选择下拉
  275. getOptions(websitId) {
  276. if (websitId) {
  277. getGoodsList({
  278. type: 'P',
  279. websitId: websitId
  280. }).then(res => {
  281. this.partsList = res.data.map(item => ({ label: item.partsNumber, value: item.id, data: item }))
  282. })
  283. } else {
  284. this.partsList = []
  285. }
  286. },
  287. formCancel() {
  288. this.formData = {
  289. objectType: '',
  290. objectTypeName: '',
  291. partsName: '',
  292. partsNumber: '',
  293. qty: '',
  294. applyNo: '',
  295. materialGroupId: '',
  296. materialGroupName: '',
  297. remark: '',
  298. unitId: '',
  299. unitName: '',
  300. voucherNo: '',
  301. totalNumber: 0
  302. }
  303. this.$refs.formRef.$refs['inlineForm'].clearValidate()
  304. this.formDialog = false
  305. },
  306. formConfirm() {
  307. this.$refs.formRef.validate(valid => {
  308. if (valid) {
  309. partsOldOutAdd([this.formData]).then(res => {
  310. this.$refs.pageRef.refreshList()
  311. this.$message({
  312. type: 'success',
  313. message: `添加成功!`
  314. })
  315. this.formCancel()
  316. })
  317. }
  318. })
  319. }
  320. }
  321. }
  322. </script>
  323. <style lang="scss" scoped></style>