salesNew.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <div>
  3. <a-affix :target="() => this.$refs.container">
  4. <a-page-header
  5. :ghost="false"
  6. @back="() => $router.go(-1)"
  7. >
  8. <template slot="subTitle">
  9. <a href="javascript:;" @click="() => $router.go(-1)">客户名称:车领主常青二路店</a>
  10. <a-button size="small" style="margin-left:50px" key="0">
  11. 编辑
  12. </a-button>
  13. </template>
  14. <template slot="extra">
  15. <a-button key="2">
  16. 打印预览
  17. </a-button>
  18. <a-button key="1" type="primary">
  19. 快速打印
  20. </a-button>
  21. </template>
  22. </a-page-header>
  23. </a-affix>
  24. <a-card :bordered="false" size="small" class="pages-wrap">
  25. <!-- 查询配件列表 -->
  26. <queryPart></queryPart>
  27. </a-card>
  28. <a-card :bordered="false" size="small" class="pages-wrap">
  29. <!-- alert -->
  30. <a-alert style="margin-bottom: 15px;" type="info">
  31. <div slot="message">
  32. <span>总售价:15;</span>
  33. <span>总款数:6;</span>
  34. <span>总数量:3;</span>
  35. <span>赠品总数量:7;</span>
  36. </div>
  37. </a-alert>
  38. <!-- 查询条件 -->
  39. <a-row :gutter="15">
  40. <a-col :span="18">
  41. <a-form-model layout="inline" :model="productForm" @submit="handleSearch">
  42. <a-form-model-item label="产品编码">
  43. <a-input v-model="productForm.productNo" placeholder="输入产品编码" />
  44. </a-form-model-item>
  45. <a-form-model-item label="产品名称">
  46. <a-input v-model="productForm.productName" placeholder="输入产品名称" />
  47. </a-form-model-item>
  48. <a-form-model-item>
  49. <a-button type="primary">
  50. 查询
  51. </a-button>
  52. <a-button style="margin-left: 10px;">
  53. 重置
  54. </a-button>
  55. </a-form-model-item>
  56. </a-form-model>
  57. </a-col>
  58. <a-col :span="6">
  59. <div style="float:right;overflow: hidden;">
  60. <a-button id="salesNew-dru">导入明细</a-button>
  61. <a-button type="primary" style="margin-left: 15px" id="salesNew-del-all">整单删除</a-button>
  62. </div>
  63. </a-col>
  64. </a-row>
  65. <!-- 已选配件列表 -->
  66. <s-table
  67. class="sTable"
  68. ref="table"
  69. size="default"
  70. :rowKey="(record) => record.id"
  71. :columns="columns"
  72. :data="loadData"
  73. :scroll="{ x: 1500, y: 300 }"
  74. bordered>
  75. <!-- 价格 -->
  76. <template slot="price" slot-scope="text, record">
  77. <editable-cell :text="text" :step="0.1" @change="onCellChange(record.id, 'price', $event)" />
  78. </template>
  79. <!-- 数量 -->
  80. <template slot="salesNums" slot-scope="text, record">
  81. <editable-cell :text="text" :precision="0" @change="onCellChange(record.id, 'salesNums', $event)" />
  82. </template>
  83. </s-table>
  84. </a-card>
  85. </div>
  86. </template>
  87. <script>
  88. import { STable, VSelect } from '@/components'
  89. import queryPart from './queryPart.vue'
  90. import EditableCell from '@/views/common/editInput.js'
  91. export default{
  92. name: 'salesDetail',
  93. components: {
  94. STable,
  95. VSelect,
  96. queryPart,
  97. EditableCell
  98. },
  99. data(){
  100. return {
  101. disabled: false,
  102. dataSource:[],
  103. productForm:{
  104. productNo: '',
  105. productName: ''
  106. },
  107. // 表头
  108. columns: [
  109. {
  110. title: '序号',
  111. dataIndex: 'no',
  112. align: 'center',
  113. width: 100
  114. },
  115. {
  116. title: '产品编码',
  117. dataIndex: 'productNo',
  118. align: 'center',
  119. sorter: true
  120. },
  121. {
  122. title: '产品名称',
  123. dataIndex: 'productName',
  124. align: 'center'
  125. },
  126. {
  127. title: '原厂编码',
  128. dataIndex: 'ycNo',
  129. align: 'center'
  130. },
  131. {
  132. title: '品牌',
  133. dataIndex: 'productBrand',
  134. align: 'center',
  135. sorter: true
  136. },
  137. {
  138. title: '仓库',
  139. dataIndex: 'cangku',
  140. align: 'center',
  141. sorter: true
  142. },
  143. {
  144. title: '仓位',
  145. dataIndex: 'cangwei',
  146. align: 'center'
  147. },
  148. {
  149. title: '辅助单位',
  150. dataIndex: 'pzdw',
  151. align: 'center'
  152. },
  153. {
  154. title: '售价',
  155. dataIndex: 'price',
  156. align: 'center',
  157. width:150,
  158. scopedSlots: { customRender: 'price' },
  159. },
  160. {
  161. title: '销售数量',
  162. dataIndex: 'salesNums',
  163. align: 'center',
  164. width:150,
  165. scopedSlots: { customRender: 'salesNums' },
  166. },
  167. {
  168. title: '单位',
  169. dataIndex: 'dw',
  170. align: 'center'
  171. },
  172. {
  173. title: '售价小计',
  174. dataIndex: 'xj',
  175. align: 'center'
  176. },
  177. {
  178. title: '折后小计',
  179. dataIndex: 'zhxj',
  180. align: 'center'
  181. },
  182. ],
  183. // 加载数据方法 必须为 Promise 对象
  184. loadData: parameter => {
  185. this.disabled = true
  186. // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
  187. // const data = res.data
  188. // const no = (data.pageNo - 1) * data.pageSize
  189. // for (var i = 0; i < data.list.length; i++) {
  190. // data.list[i].no = no + i + 1
  191. // }
  192. // this.disabled = false
  193. // return data
  194. // })
  195. const _this = this
  196. return new Promise(function(resolve, reject){
  197. const data = {
  198. pageNo: 1,
  199. pageSize: 10,
  200. list: [
  201. {
  202. id: '1',
  203. productNo: 'jgqp11111111111',
  204. productName: '产品1',
  205. ycNo: 'jgqp111123545',
  206. productBrand: '箭冠品牌',
  207. productType: '产品分类1',
  208. price: 5.6,
  209. salesNums: 12 ,
  210. }
  211. ],
  212. count: 10
  213. }
  214. const no = (data.pageNo - 1) * data.pageSize
  215. for (var i = 0; i < data.list.length; i++) {
  216. data.list[i].no = no + i + 1
  217. }
  218. _this.disabled = false
  219. _this.dataSource = data.list
  220. resolve(data)
  221. })
  222. },
  223. }
  224. },
  225. methods: {
  226. onCellChange(key, dataIndex, value) {
  227. console.log(key, dataIndex, value)
  228. console.log(this.dataSource)
  229. const dataSource = [...this.dataSource];
  230. const target = dataSource.find(item => item.id === key);
  231. if (target) {
  232. target[dataIndex] = Number(value);
  233. this.dataSource = dataSource;
  234. }
  235. },
  236. handleSearch(){
  237. }
  238. },
  239. }
  240. </script>
  241. <style lang="less">
  242. .pages-wrap{
  243. margin-top: 15px;
  244. .sTable{
  245. margin-top: 15px;
  246. }
  247. }
  248. </style>