edit.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. <template>
  2. <div class="warehouseAllocationEdit-wrap">
  3. <a-page-header :ghost="false" @back="handleBack" class="warehouseAllocationEdit-back">
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="warehouseAllocationEdit-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
  7. </template>
  8. <!-- 操作区,位于 title 行的行尾 -->
  9. <template slot="extra">
  10. <a-button key="2" id="warehouseAllocationEdit-preview-btn">打印预览</a-button>
  11. <a-button key="1" type="primary" id="warehouseAllocationEdit-print-btn">快速打印</a-button>
  12. </template>
  13. </a-page-header>
  14. <!-- 基础信息 -->
  15. <a-card size="small" :bordered="false" class="warehouseAllocationEdit-cont">
  16. <a-collapse :activeKey="['1']">
  17. <a-collapse-panel key="1">
  18. <template slot="header">
  19. 基础信息
  20. <!-- <a-button
  21. type="primary"
  22. shape="circle"
  23. size="small"
  24. icon="edit"
  25. class="edit-circle-btn"
  26. id="warehouseAllocationEdit-circle-btn"
  27. @click.stop="handleEditInfo" /> -->
  28. </template>
  29. <a-descriptions :column="3">
  30. <a-descriptions-item label="调出仓库">{{ warehouse?warehouse.outWarehouseName:'' }}</a-descriptions-item>
  31. <a-descriptions-item label="调入仓库">{{ warehouse?warehouse.putWarehouseName:'' }}</a-descriptions-item>
  32. </a-descriptions>
  33. </a-collapse-panel>
  34. </a-collapse>
  35. </a-card>
  36. <!-- 选择产品 -->
  37. <a-card size="small" :bordered="false" class="warehouseAllocationEdit-cont">
  38. <a-collapse :activeKey="['1']">
  39. <a-collapse-panel key="1" header="选择产品">
  40. <!-- 筛选条件 -->
  41. <div class="table-page-search-wrapper">
  42. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  43. <a-row :gutter="15">
  44. <a-col :md="6" :sm="24">
  45. <a-form-item label="产品编码" prop="productCode">
  46. <a-input id="warehouseAllocationEdit-productCode" v-model="queryParam.productCode" placeholder="请输入产品编码" allowClear />
  47. </a-form-item>
  48. </a-col>
  49. <a-col :md="6" :sm="24">
  50. <a-form-item label="产品名称" prop="productName">
  51. <a-input id="warehouseAllocationEdit-productName" v-model="queryParam.productName" placeholder="请输入产品名称" allowClear />
  52. </a-form-item>
  53. </a-col>
  54. <a-col :md="6" :sm="24">
  55. <a-form-item label="原厂编码" prop="productOrigCode">
  56. <a-input id="warehouseAllocationEdit-productOrigCode" v-model="queryParam.productOrigCode" placeholder="请输入原厂编码" allowClear />
  57. </a-form-item>
  58. </a-col>
  59. <template v-if="advanced">
  60. <a-col :md="6" :sm="24">
  61. <a-form-item label="产品品牌" prop="brandSn">
  62. <a-select
  63. placeholder="请选择"
  64. id="warehouseAllocationEdit-state"
  65. allowClear
  66. v-model="queryParam.brandSn"
  67. :showSearch="true"
  68. option-filter-prop="children"
  69. :filter-option="filterOption">
  70. <a-select-option v-for="item in brandData" :key="item.brandSn" :value="item.brandSn">{{ item.brandName }}</a-select-option>
  71. </a-select>
  72. </a-form-item>
  73. </a-col>
  74. <a-col :md="6" :sm="24">
  75. <a-form-item label="产品类别" prop="brandSn">
  76. <a-cascader
  77. :field-names="{ label: 'productTypeName', value: 'productTypeSn', children: 'children'}"
  78. :options="typeData"
  79. id="warehouseAllocationEdit-state"
  80. placeholder="请选择产品类别"
  81. allowClear
  82. v-model="queryParam.brand" />
  83. </a-form-item>
  84. </a-col>
  85. <a-col :md="6" :sm="24">
  86. <a-form-item label="调出仓位" prop="brandSn">
  87. <a-select id="warehouseAllocationEdit-warehouse" placeholder="请选择" allowClear v-model="queryParam.warehouse" style="width: 100%;">
  88. <a-select-option v-for="item in warehouseOutLocData" :key="item.warehouseLocationSn" :value="item.warehouseLocationSn">{{ item.name }}</a-select-option>
  89. </a-select>
  90. </a-form-item>
  91. </a-col>
  92. </template>
  93. <a-col :md="6" :sm="24" style="margin-bottom: 24px;">
  94. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="warehouseAllocationList-refresh">查询</a-button>
  95. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="warehouseAllocationList-reset">重置</a-button>
  96. <a @click="advanced=!advanced" style="margin-left: 8px">
  97. {{ advanced ? '收起' : '展开' }}
  98. <a-icon :type="advanced ? 'up' : 'down'"/>
  99. </a>
  100. </a-col>
  101. </a-row>
  102. </a-form>
  103. </div>
  104. <!-- 列表 -->
  105. <s-table
  106. class="sTable"
  107. ref="table"
  108. size="default"
  109. :rowKey="(record) => record.id"
  110. :columns="columns"
  111. :data="loadData"
  112. :scroll="{ x: 1560 }"
  113. bordered>
  114. <!-- 类别 -->
  115. <template slot="type" slot-scope="text, record">
  116. <span>{{ record.productTypeName2||'' }}</span><span v-if="record.productTypeName3"><strong>-</strong>{{ record.productTypeName3||'' }}</span>
  117. <!-- {{ record.productTypeName2+(record.productTypeName3?('-'+record.productTypeName3):'') }} -->
  118. </template>
  119. <!-- 调入仓位 -->
  120. <template slot="storageQuantity" slot-scope="text, record">
  121. <a-select id="warehouseAllocationEdit-warehouse" placeholder="请选择" allowClear v-model="record.putWarehouseLocationSn" style="width: 100%;">
  122. <a-select-option v-for="item in warehousePutLocData" :key="item.warehouseLocationSn" :value="item.warehouseLocationSn">{{ item.name }}</a-select-option>
  123. </a-select>
  124. </template>
  125. <!-- 调出数量 -->
  126. <template slot="transferOutQuantity" slot-scope="text, record">
  127. <a-input-number
  128. id="warehouseAllocationEdit-allocationQty"
  129. :value="record.allocationQty"
  130. :precision="0"
  131. :min="0"
  132. :max="999999"
  133. placeholder="请输入" />
  134. </template>
  135. <!-- 操作 -->
  136. <template slot="action" slot-scope="text, record">
  137. <a-button size="small" type="link" @click="handleAdd(record)" id="warehouseAllocationEdit-add-btn">添加</a-button>
  138. </template>
  139. </s-table>
  140. </a-collapse-panel>
  141. </a-collapse>
  142. </a-card>
  143. <!-- 已选产品 -->
  144. <a-card size="small" :bordered="false" class="warehouseAllocationEdit-cont">
  145. <a-collapse :activeKey="['1']">
  146. <a-collapse-panel key="1" header="已选产品">
  147. <!-- 总计 -->
  148. <a-alert type="info" showIcon style="margin-bottom:15px">
  149. <div slot="message">总成本:¥<strong>{{ productTotalCost }}</strong>,总数量: <strong>{{ productTotalQty }}</strong> ,总款数: <strong>{{ productTotalCategory }}</strong> </div>
  150. </a-alert>
  151. <!-- 筛选条件 -->
  152. <a-row :gutter="15" justify="space-between">
  153. <a-col :span="17">
  154. <div class="table-page-search-wrapper">
  155. <a-form layout="inline" @keyup.enter.native="$refs.chooseTable.refresh(true)">
  156. <a-row :gutter="15">
  157. <a-col :md="9" :sm="24">
  158. <a-form-item label="产品编码" prop="productCode">
  159. <a-input id="warehouseAllocationEdit-productCode" v-model="chooseParam.productCode" placeholder="请输入产品编码" allowClear />
  160. </a-form-item>
  161. </a-col>
  162. <a-col :md="9" :sm="24">
  163. <a-form-item label="产品名称" prop="productName">
  164. <a-input id="warehouseAllocationEdit-productName" v-model="chooseParam.productName" placeholder="请输入产品名称" allowClear />
  165. </a-form-item>
  166. </a-col>
  167. <a-col :md="6" :sm="24" style="margin-bottom: 24px;">
  168. <a-button type="primary" @click="$refs.chooseTable.refresh(true)" :disabled="disabled" id="warehouseAllocationList-refresh">查询</a-button>
  169. <a-button style="margin-left: 8px" @click="resetChooseSearchForm" :disabled="disabled" id="warehouseAllocationList-reset">重置</a-button>
  170. </a-col>
  171. </a-row>
  172. </a-form>
  173. </div>
  174. </a-col>
  175. <a-col :span="7">
  176. <!-- 暂不做 -->
  177. <!-- <a-button size="small" type="primary" id="warehouseAllocationEdit-pladd-btn" style="margin-bottom: 8px;">批量添加</a-button> -->
  178. <a-button size="small" id="warehouseAllocationEdit-import-btn" style="margin-left: 8px">导入明细</a-button>
  179. <a-button size="small" type="danger" id="warehouseAllocationEdit-del-all-btn" style="margin: 0 0 8px 8px;">整单删除</a-button>
  180. </a-col>
  181. </a-row>
  182. <!-- 列表 -->
  183. <s-table
  184. class="sTable"
  185. ref="chooseTable"
  186. size="default"
  187. :rowKey="(record) => record.id"
  188. :columns="chooseColumns"
  189. :data="chooseLoadData"
  190. :scroll="{ x: 1460 }"
  191. bordered>
  192. <!-- 类别 -->
  193. <template slot="type" slot-scope="text, record">
  194. {{ record.productTypeName2+(record.productTypeName3?('-'+record.productTypeName3):'') }}
  195. </template>
  196. <!-- 调入仓位 -->
  197. <template slot="storageQuantity" slot-scope="text, record">
  198. <a-select id="warehouseAllocationEdit-warehouse" placeholder="请选择" allowClear v-model="record.putWarehouseLocationSn" style="width: 100%;">
  199. <a-select-option v-for="item in warehousePutLocData" :key="item.warehouseLocationSn" :value="item.warehouseLocationSn">{{ item.name }}</a-select-option>
  200. </a-select>
  201. </template>
  202. <!-- 调出数量 -->
  203. <template slot="transferOutQuantity" slot-scope="text, record">
  204. <a-input-number
  205. id="warehouseAllocationEdit-allocationQty"
  206. :value="record.allocationQty"
  207. :precision="0"
  208. :min="0"
  209. :max="999999"
  210. placeholder="请输入" />
  211. </template>
  212. <!-- 操作 -->
  213. <template slot="action" slot-scope="text, record">
  214. <a-button size="small" type="link" @click="handleDel(record)" id="warehouseAllocationEdit-del-btn">删除</a-button>
  215. </template>
  216. </s-table>
  217. </a-collapse-panel>
  218. </a-collapse>
  219. </a-card>
  220. <a-affix :offset-bottom="0">
  221. <div style="text-align: center;width: 100%;background-color: #fff;padding: 30px 0;box-shadow: 0 0 20px #dcdee2;">
  222. <a-button type="primary" id="warehouseAllocationEdit-submit" size="large" @click="handleSubmit" style="padding: 0 60px;">提交</a-button>
  223. </div>
  224. </a-affix>
  225. <!-- 选择基本信息弹框 -->
  226. <basic-info-modal :openModal="openModal" @ok="handleOk" @close="openModal=false" />
  227. </div>
  228. </template>
  229. <script>
  230. import { STable, VSelect } from '@/components'
  231. import basicInfoModal from './basicInfoModal.vue'
  232. import { dealerProductBrandQuery } from '@/api/dealerProductBrand.js'
  233. import { dealerProductTypeList } from '@/api/dealerProductType.js'
  234. import { warehouseLocAllList } from '@/api/warehouse.js'
  235. import { productQuery, allocWarehouseFind, allocWarehouseDetailTotal, allocWarehouseDetailQuery, allocWarehouseDetailSave, allocWarehouseDetailDelete } from '@/api/allocWarehouse.js'
  236. export default {
  237. components: { STable, VSelect, basicInfoModal },
  238. data () {
  239. return {
  240. id: '', // 单据id
  241. queryParam: {
  242. outWarehouseSn: '', // 调出仓库sn
  243. productCode: '', // 产品编码
  244. productName: '', // 产品名称
  245. productOrigCode: '', // 原厂编码
  246. brandName: '', // 品牌
  247. typeName: '' // 类别
  248. },
  249. chooseParam: {
  250. allocationWarehouseSn: '', // 单据sn
  251. productCode: '', // 产品编码
  252. productName: '' // 产品名称
  253. },
  254. productTotalCost: 0, // 总成本
  255. productTotalQty: 0, // 总数量
  256. productTotalCategory: 0, // 总款项
  257. warehouse: null, // 基础信息
  258. brandData: [], // 产品品牌 下拉数据
  259. typeData: [], // 产品类别 下拉数据
  260. warehousePutLocData: [], // 调入仓库仓位 下拉数据
  261. warehouseOutLocData: [], // 调出仓库仓位 下拉数据
  262. disabled: false, // 查询、重置按钮是否可操作
  263. advanced: false, // 高级搜索 展开/关闭
  264. // 表头
  265. columns: [
  266. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  267. { title: '产品编码', dataIndex: 'productCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  268. { title: '产品名称', dataIndex: 'productName', width: 200, align: 'center', ellipsis: true },
  269. { title: '原厂编码', dataIndex: 'productOrigCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  270. { title: '品牌', dataIndex: 'brandName', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
  271. { title: '类别', width: 160, align: 'center', scopedSlots: { customRender: 'type' } },
  272. { title: '调出仓位', dataIndex: 'outWarehouseLocationName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  273. { title: '调入仓位', scopedSlots: { customRender: 'storageQuantity' }, width: 140, align: 'center' },
  274. { title: '库存数量', dataIndex: 'currentQty', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  275. { title: '单位', dataIndex: 'productUnit', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  276. { title: '调出数量', scopedSlots: { customRender: 'transferOutQuantity' }, width: 140, align: 'center' },
  277. { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
  278. ],
  279. // 加载数据方法 必须为 Promise 对象
  280. loadData: parameter => {
  281. this.disabled = true
  282. return productQuery(Object.assign(parameter, this.queryParam)).then(res => {
  283. const data = res.data
  284. const no = (data.pageNo - 1) * data.pageSize
  285. for (var i = 0; i < data.list.length; i++) {
  286. data.list[i].no = no + i + 1
  287. }
  288. this.disabled = false
  289. return data
  290. })
  291. },
  292. // 表头
  293. chooseColumns: [
  294. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  295. { title: '产品编码', dataIndex: 'productCode', width: 140, align: 'center', sorter: true, customRender: function (text) { return text || '--' } },
  296. { title: '产品名称', dataIndex: 'productName', width: 200, align: 'center', customRender: function (text) { return text || '--' } },
  297. { title: '原厂编码', dataIndex: 'productOrigCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  298. { title: '品牌', dataIndex: 'brandName', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
  299. { title: '类别', width: 160, align: 'center', scopedSlots: { customRender: 'type' } },
  300. { title: '调出仓位', dataIndex: 'outWarehouseLocationName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  301. { title: '调入仓位', dataIndex: 'custsNakme', width: 140, align: 'center', scopedSlots: { customRender: 'storageQuantity' } },
  302. { title: '单位', dataIndex: 'productUnit', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  303. { title: '调出数量', scopedSlots: { customRender: 'transferOutQuantity' }, width: 140, align: 'center' },
  304. { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
  305. ],
  306. // 加载数据方法 必须为 Promise 对象
  307. chooseLoadData: parameter => {
  308. this.disabled = true
  309. return allocWarehouseDetailQuery(Object.assign(parameter, this.chooseParam)).then(res => {
  310. const data = res.data
  311. const no = (data.pageNo - 1) * data.pageSize
  312. for (var i = 0; i < data.list.length; i++) {
  313. data.list[i].no = no + i + 1
  314. }
  315. this.getProduceTotal()
  316. this.disabled = false
  317. return data
  318. })
  319. },
  320. openModal: false // 选择基本信息弹框是否显示
  321. }
  322. },
  323. methods: {
  324. // 重置
  325. resetSearchForm () {
  326. this.queryParam.orderBundleNo = ''
  327. this.queryParam.orderBundle.custMobile = ''
  328. this.queryParam.bundleName = ''
  329. this.queryParam.itemName = ''
  330. this.oldTime = undefined
  331. this.newTime = undefined
  332. this.$refs.table.refresh(true)
  333. },
  334. // 已选产品重置查询
  335. resetChooseSearchForm () {
  336. this.chooseParam.productCode = ''
  337. this.chooseParam.productName = ''
  338. this.$refs.chooseTable.refresh(true)
  339. },
  340. // 获取产品品牌
  341. getProductBrand () {
  342. dealerProductBrandQuery({}).then(res => {
  343. this.brandData = res.data || []
  344. })
  345. },
  346. // 获取产品分类
  347. getProductType () {
  348. dealerProductTypeList({}).then(res => {
  349. this.typeData = res.data || []
  350. console.log(res, this.typeData, '--------获取产品分类')
  351. })
  352. },
  353. // 获取仓库仓位
  354. getWarehouseLoc (sn, type) {
  355. warehouseLocAllList({ warehouseSn: sn }).then(res => {
  356. if (type == 'put') {
  357. this.warehousePutLocData = res.data || []
  358. } else {
  359. this.warehouseOutLocData = res.data || []
  360. }
  361. // return res.data || []
  362. })
  363. },
  364. // 查询基础信息
  365. getHouse () {
  366. allocWarehouseFind({ id: this.id }).then(res => {
  367. if (res.status == 200) {
  368. this.warehouse = res.data
  369. this.getWarehouseLoc(this.warehouse.putWarehouseSn, 'put')
  370. this.getWarehouseLoc(this.warehouse.outWarehouseSn, 'out')
  371. } else {
  372. this.warehouse = null
  373. }
  374. })
  375. },
  376. // 已选产品总计查询
  377. getProduceTotal () {
  378. allocWarehouseDetailTotal(this.chooseParam).then(res => {
  379. console.log(res, '-----总计----')
  380. if (res.status == 200) {
  381. this.productTotalCost = this.data.productTotalCost
  382. this.productTotalQty = this.data.productTotalQty
  383. this.productTotalCategory = this.data.productTotalCategory
  384. } else {
  385. this.productTotalCost = 0
  386. this.productTotalQty = 0
  387. this.productTotalCategory = 0
  388. }
  389. })
  390. },
  391. // 添加
  392. handleAdd (row) {
  393. const params = {
  394. }
  395. },
  396. // 删除
  397. handleDel (row) {},
  398. // 编辑基本信息
  399. handleEditInfo () {
  400. this.openModal = true
  401. },
  402. // 基本信息 保存
  403. handleOk () {
  404. },
  405. // 提交
  406. handleSubmit () {},
  407. // 导入明细
  408. handleImport () {
  409. console.log(333)
  410. },
  411. // 返回列表
  412. handleBack () {
  413. this.$router.push({ path: '/allocationManagement/warehouseAllocation/list' })
  414. },
  415. filterOption (input, option) {
  416. return (
  417. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  418. )
  419. }
  420. },
  421. beforeRouteEnter (to, from, next) {
  422. next(vm => {
  423. vm.openModal = false
  424. vm.id = vm.$route.params.id
  425. vm.chooseParam.allocationWarehouseSn = vm.$route.params.sn
  426. vm.getProductBrand()
  427. vm.getProductType()
  428. vm.getHouse()
  429. console.log(vm.id, vm.$route.params, 'vm.id')
  430. })
  431. }
  432. }
  433. </script>
  434. <style lang="less">
  435. .warehouseAllocationEdit-wrap{
  436. .warehouseAllocationEdit-back{
  437. margin-bottom: 15px;
  438. }
  439. .warehouseAllocationEdit-cont{
  440. margin-bottom: 15px;
  441. .sub-title{
  442. font-size: 12px;
  443. color: #808695;
  444. margin-left: 10px;
  445. }
  446. .tag-txt{
  447. font-size: 12px;
  448. color: #ed1c24;
  449. }
  450. .edit-circle-btn{
  451. margin-left: 15px;
  452. i{
  453. vertical-align: text-bottom;
  454. }
  455. }
  456. .import-btn{
  457. margin-left: 15px;
  458. }
  459. }
  460. }
  461. </style>