purchase-operate.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!-- 采购操作 -->
  2. <template>
  3. <div>
  4. <div class="my-title">{{subTitle}}</div>
  5. <!-- 表单 -->
  6. <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
  7. <div class="form-item" v-for="(item, index) in dataForm.list" :key="item.purchaseDetailId">
  8. <el-row>
  9. <el-col :span="6">
  10. <el-form-item label="物品名称">
  11. <span>{{item.materialName}}</span>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="6">
  15. <el-form-item label="规格/型号">
  16. <span>{{item.specification}}</span>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :span="6">
  20. <el-form-item label="数量">
  21. <span>{{item.cnt}}</span>
  22. </el-form-item>
  23. </el-col>
  24. <el-col :span="6">
  25. <el-form-item label="用途">
  26. <span>{{item.batchNumber}}</span>
  27. </el-form-item>
  28. </el-col>
  29. </el-row>
  30. <el-row class="my-row">
  31. <el-col :span="6">
  32. <el-form-item ref="supplierCheckbox" label="供应商" :prop="'list.' + index + '.supplierId'" :rules="dataRule.supplierId">
  33. <supplier-component v-model="item.supplierId" :supplier-id.sync="item.supplierId"></supplier-component>
  34. </el-form-item>
  35. </el-col>
  36. <el-col :span="6">
  37. <el-form-item ref="supplierInput" label="其他供应商" :prop="'list.' + index + '.supplierOther'" :rules="dataRule.supplierOther">
  38. <el-input v-model="item.supplierOther" placeholder="请输入其他供应商"></el-input>
  39. </el-form-item>
  40. </el-col>
  41. <el-col :span="6">
  42. <el-form-item label="采购依据" :prop="'list.' + index + '.procurementBasis'" :rules="dataRule.procurementBasis">
  43. <el-select
  44. v-model="item.procurementBasis"
  45. placeholder="请选择">
  46. <el-option
  47. v-for="item2 in optionsPB"
  48. :key="item2.code"
  49. :label="item2.value"
  50. :value="item2.code">
  51. </el-option>
  52. </el-select>
  53. </el-form-item>
  54. </el-col>
  55. </el-row>
  56. <el-row class="my-row">
  57. <el-col :span="6">
  58. <el-form-item label="不含税单价" :prop="'list.' + index + '.price'" :rules="dataRule.price">
  59. <el-input-number v-model="item.price" :step="1" :min="0" :precision="1"></el-input-number>
  60. </el-form-item>
  61. </el-col>
  62. <el-col :span="6">
  63. <el-form-item label="含税单价" :prop="'list.' + index + '.taxPrice'" :rules="dataRule.taxPrice">
  64. <el-input-number v-model="item.taxPrice" :step="1" :min="0" :precision="1"></el-input-number>
  65. </el-form-item>
  66. </el-col>
  67. <el-col :span="6">
  68. <el-form-item label="含税总价">
  69. <span>{{ (item.cnt * item.taxPrice).toFixed(1) }}</span>
  70. </el-form-item>
  71. </el-col>
  72. <el-col :span="6">
  73. <el-form-item label="税率" :prop="'list.' + index + '.taxRate'" :rules="dataRule.taxRate">
  74. <el-input-number v-model="item.taxRate" :step="1" :precision="1"/>&nbsp;%
  75. </el-form-item>
  76. </el-col>
  77. </el-row>
  78. </div>
  79. </el-form>
  80. <span slot="footer" class="dialog-footer">
  81. <el-button @click="onChose">取消</el-button>
  82. <el-button type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
  83. </span>
  84. </div>
  85. </template>
  86. <script>
  87. import SupplierComponent from '../common/supplier-component'
  88. import { getDictList } from '@/api/dict'
  89. export default {
  90. name: 'purchase-operate',
  91. components: {
  92. SupplierComponent
  93. },
  94. data () {
  95. let validateSupplier = (rule, value, callback) => {
  96. if (!this.dataForm.supplierId && !this.dataForm.supplierOther) {
  97. callback(new Error('请至少填写一项供应商信息'))
  98. } else {
  99. // 任意值被填写,清除验证提示
  100. if (!this.dataForm.supplierId || !this.dataForm.supplierOther) {
  101. this.$refs.supplierCheckbox.clearValidate()
  102. this.$refs.supplierInput.clearValidate()
  103. }
  104. callback()
  105. }
  106. }
  107. return {
  108. id: 0,
  109. dataForm: {
  110. cnt: 1,
  111. list:[]
  112. },
  113. dataRule: {
  114. supplierId: [{required: true, validator: validateSupplier, trigger: 'change'}],
  115. supplierOther: [{required: true, validator: validateSupplier, trigger: 'blur'}],
  116. procurementBasis: [{ required: true, message: '请选择采购依据', trigger: 'change' }],
  117. price: [{ required: true, message: '请输入不含税单价', trigger: 'change' }],
  118. taxPrice: [{ required: true, message: '请输入含税单价', trigger: 'change' }],
  119. taxRate: [{ required: true, message: '请输入税率', trigger: 'change' }]
  120. },
  121. optionsPB: [], // 采购依据(字典)
  122. subTitle: '' //副标题
  123. }
  124. },
  125. methods: {
  126. onChose () {
  127. this.$emit('onChose')
  128. },
  129. // 获取采购依据字典
  130. getPbList () {
  131. getDictList({type: 'procurement_basis'}).then(({data}) => {
  132. if (data) {
  133. this.optionsPB = data
  134. }
  135. })
  136. },
  137. async init (row) {
  138. if (!row) return
  139. this.getPbList()
  140. // this.dataForm = row
  141. if(row instanceof Array){
  142. this.subTitle = '批量采购'
  143. this.dataForm.list = []
  144. this.dataForm.list = [...row]
  145. } else {
  146. this.subTitle = '采购'
  147. this.dataForm.list = [row]
  148. }
  149. },
  150. validateField (type) {
  151. this.$refs.dataForm.validateField(type)
  152. },
  153. // 表单提交
  154. dataFormSubmit () {
  155. this.$refs['dataForm'].validate((valid) => {
  156. if (valid) {
  157. console.log(1111)
  158. // // 检查供应商
  159. // if (!this.dataForm.supplierId && !this.dataForm.supplierOther) {
  160. // this.$message.error('请填写供应商')
  161. // return
  162. // }
  163. // this.$http({
  164. // url: this.$http.adornUrl(`/biz-service/purchaseDetail/updatePurchaseDetail`),
  165. // method: 'post',
  166. // data: this.$http.adornData({...this.dataForm})
  167. // }).then(({data}) => {
  168. // if (data && data.code === '200') {
  169. // this.$message({
  170. // message: '操作成功',
  171. // type: 'success',
  172. // duration: 1500,
  173. // onClose: () => {
  174. // this.onChose()
  175. // this.$emit('refreshDataList')
  176. // }
  177. // })
  178. // } else {
  179. // this.$message.error(data.msg)
  180. // }
  181. // })
  182. }
  183. })
  184. }
  185. }
  186. }
  187. </script>
  188. <style scoped>
  189. .form-item {
  190. margin: 5px 0;
  191. padding:25px 0 5px;
  192. background-color: #f1f9f9;
  193. border-radius: 10px;
  194. }
  195. </style>