index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. <template>
  2. <div id="MaterialClassDivision">
  3. <div v-if="isList">
  4. <el-card style="position: relative;">
  5. <el-form class="search_area" label-width="130px">
  6. <el-row :gutter="10">
  7. <el-col :span="1.5">
  8. <el-form-item label="物料一级大类编码">
  9. <el-input
  10. v-model="queryParams.materialClassifyOne"
  11. clearable
  12. size="mini"
  13. style="width: 200px"
  14. />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="1.5">
  18. <el-form-item label="物料一级大类名称">
  19. <el-input
  20. v-model="queryParams.materialClassifyOneName"
  21. clearable
  22. size="mini"
  23. style="width: 200px"
  24. />
  25. </el-form-item>
  26. </el-col>
  27. <el-col :span="1.5">
  28. <el-form-item label="物料二级大类编码">
  29. <el-input
  30. v-model="queryParams.materialClassifyTwo"
  31. clearable
  32. size="mini"
  33. style="width: 200px"
  34. />
  35. </el-form-item>
  36. </el-col>
  37. <el-col :span="1.5">
  38. <el-form-item label="物料二级大类名称">
  39. <el-input
  40. v-model="queryParams.materialClassifyTwoName"
  41. clearable
  42. size="mini"
  43. style="width: 200px"
  44. />
  45. </el-form-item>
  46. </el-col>
  47. <!-- <el-col :span="1.5"> -->
  48. <!-- <el-form-item label="" label-width="20px"> -->
  49. <div style="position: absolute;top: 3px;right: 10px;">
  50. <el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">搜索</el-button>
  51. <el-button size="mini" icon="el-icon-refresh" plain @click="resetList">重置</el-button>
  52. </div>
  53. <!-- </el-form-item> -->
  54. <!-- </el-col> -->
  55. </el-row>
  56. <CollapseTransition>
  57. <div v-show="expanded">
  58. <el-row :gutter="10">
  59. <el-col :span="1.5">
  60. <el-form-item label="物料三级大类编码">
  61. <el-input
  62. v-model="queryParams.materialClassifyThree"
  63. clearable
  64. size="mini"
  65. style="width: 200px"
  66. />
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="1.5">
  70. <el-form-item label="物料三级大类名称">
  71. <el-input
  72. v-model="queryParams.materialClassifyThreeName"
  73. clearable
  74. size="mini"
  75. style="width: 200px"
  76. />
  77. </el-form-item>
  78. </el-col>
  79. <el-col :span="1.5">
  80. <el-form-item label="物料四级大类编码">
  81. <el-input size="mini" style="width: 200px" readonly v-model="queryParams.materialClassify">
  82. <el-button slot="append" icon="el-icon-more" @click="chooseFourClass"></el-button>
  83. </el-input>
  84. </el-form-item>
  85. </el-col>
  86. <el-col :span="1.5">
  87. <el-form-item label="物料四级大类名称">
  88. <el-input
  89. v-model="queryParams.materialClassifyFourName"
  90. clearable
  91. size="mini"
  92. style="width: 200px"
  93. />
  94. </el-form-item>
  95. </el-col>
  96. </el-row>
  97. <el-row :gutter="10">
  98. <el-col :span="1.5">
  99. <el-form-item label="物料编码">
  100. <el-input style="width: 200px" size="mini" readonly v-model="queryParams.materialCode">
  101. <el-button slot="append" icon="el-icon-more" @click="test01"></el-button>
  102. </el-input>
  103. </el-form-item>
  104. </el-col>
  105. <el-col :span="1.5">
  106. <el-form-item label="物料名称">
  107. <el-input
  108. v-model="queryParams.materialName"
  109. clearable
  110. size="mini"
  111. style="width: 200px"
  112. />
  113. </el-form-item>
  114. </el-col>
  115. <el-col :span="1.5">
  116. <el-form-item label="订单员">
  117. <el-select
  118. ref="staffs"
  119. size="mini"
  120. style="width: 200px"
  121. v-model="queryParams.orderPersonal"
  122. clearable
  123. @focus="chooseRefer('CONTACTS_PARAM', true, '订单员')"
  124. >
  125. <el-option
  126. v-for="item in staffOptions"
  127. :key="item.id"
  128. :label="item.name"
  129. :value="item.code"
  130. />
  131. </el-select>
  132. </el-form-item>
  133. </el-col>
  134. <el-col :span="1.5">
  135. <el-form-item label="采购员">
  136. <el-select
  137. ref="staffs2"
  138. size="mini"
  139. style="width: 200px"
  140. v-model="queryParams.buyer"
  141. clearable
  142. @focus="chooseRefer('CONTACTS_PARAM', true, '采购员')"
  143. >
  144. <el-option
  145. v-for="item in staff2Options"
  146. :key="item.id"
  147. :label="item.name"
  148. :value="item.code"
  149. />
  150. </el-select>
  151. </el-form-item>
  152. </el-col>
  153. </el-row>
  154. <el-row :gutter="10">
  155. <el-col :span="1.5">
  156. <el-form-item label="生产厂家">
  157. <el-input
  158. v-model="queryParams.manufacturer"
  159. size="mini"
  160. placeholder=""
  161. clearable
  162. style="width: 200px"
  163. />
  164. </el-form-item>
  165. </el-col>
  166. <el-col :span="1.5">
  167. <el-form-item label="备注">
  168. <el-input
  169. v-model="queryParams.remark"
  170. size="mini"
  171. placeholder=""
  172. clearable
  173. style="width: 200px"
  174. />
  175. </el-form-item>
  176. </el-col>
  177. </el-row>
  178. </div>
  179. </CollapseTransition>
  180. </el-form>
  181. <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
  182. <div class="btn_grooup">
  183. <el-button type="primary" size="mini" @click="addDivision">新增</el-button>
  184. <!-- <el-dropdown size="mini" @command="handleCommand">
  185. <el-button size="mini" type="primary" style="margin-left: 10px;">
  186. 导入<i class="el-icon-arrow-down el-icon--right"></i>
  187. </el-button>
  188. <el-dropdown-menu slot="dropdown">
  189. <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
  190. <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
  191. </el-dropdown-menu>
  192. </el-dropdown>
  193. <el-dropdown size="mini" @command="handleCommand">
  194. <el-button size="mini" type="primary" style="margin: 0 10px;">
  195. 导出<i class="el-icon-arrow-down el-icon--right"></i>
  196. </el-button>
  197. <el-dropdown-menu slot="dropdown">
  198. <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
  199. <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
  200. </el-dropdown-menu>
  201. </el-dropdown> -->
  202. <el-button type="primary" size="mini" @click="deletes">删除</el-button>
  203. </div>
  204. <el-table
  205. :data="tableList"
  206. fit
  207. :cell-style="{ borderColor: '#c0c0c0' }"
  208. :header-cell-style="{ borderColor: '#c0c0c0' }"
  209. class="exporttable"
  210. border
  211. height="390"
  212. max-height="390"
  213. style="font-size: 12px;"
  214. @selection-change="handleSelectionChange"
  215. >
  216. <el-table-column show-overflow-tooltip type="selection" width="55" fixed="left"/>
  217. <el-table-column show-overflow-tooltip label="序号" type="index" align="center" width="50px" fixed="left"/>
  218. <el-table-column show-overflow-tooltip label="物料分类编码" align="center" width="120" prop="materialClassify"/>
  219. <!-- <el-table-column show-overflow-tooltip label="物料分类名称" align="center" width="200" prop="materialClassifyName" /> -->
  220. <el-table-column show-overflow-tooltip label="一级分类名称" align="center" width="120" prop="materialClassifyOneName" />
  221. <el-table-column show-overflow-tooltip label="二级分类名称" align="center" width="120" prop="materialClassifyTwoName" />
  222. <el-table-column show-overflow-tooltip label="三级分类名称" align="center" width="120" prop="materialClassifyThreeName"/>
  223. <el-table-column show-overflow-tooltip label="四级分类名称" align="center" width="120" prop="materialClassifyFourName" />
  224. <el-table-column show-overflow-tooltip label="物料编码" align="center" width="120" prop="materialCode" />
  225. <el-table-column show-overflow-tooltip label="物料名称" align="center" width="150" prop="materialName" />
  226. <el-table-column show-overflow-tooltip label="生产厂商" align="center" width="150" prop="manufacturer" />
  227. <el-table-column show-overflow-tooltip label="所属组织" align="center" width="200" prop="orgName"/>
  228. <el-table-column show-overflow-tooltip label="订单员" align="center" width="100" prop="orderPersonalName" />
  229. <el-table-column show-overflow-tooltip label="采购员" align="center" width="100" prop="buyerName" />
  230. <el-table-column show-overflow-tooltip label="订单部门" align="center" width="150" prop="orderDeptName" />
  231. <el-table-column show-overflow-tooltip label="部门" align="center" width="150" prop="puDeptName" />
  232. <el-table-column show-overflow-tooltip label="创建人" align="center" width="100" prop="createByName" />
  233. <el-table-column show-overflow-tooltip label="创建时间" align="center" width="150" prop="createTime" />
  234. <el-table-column show-overflow-tooltip label="修改人" align="center" width="100" prop="updateByName" />
  235. <el-table-column show-overflow-tooltip label="修改时间" align="center" width="150" prop="updateTime" />
  236. <el-table-column
  237. fixed="right"
  238. label="操作"
  239. align="center"
  240. width="150"
  241. >
  242. <template slot-scope="scope">
  243. <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
  244. <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
  245. <el-button type="text" size="mini" @click="deleteids(scope.row)">删除</el-button>
  246. </template>
  247. </el-table-column>
  248. </el-table>
  249. <el-pagination
  250. background
  251. @size-change="handleSizeChange"
  252. @current-change="handleCurrentChange"
  253. :current-page="queryParams.pageNum"
  254. :page-sizes="[10, 20, 50, 100]"
  255. :page-size="10"
  256. layout="total, sizes, prev, pager, next, jumper"
  257. :total=total>
  258. </el-pagination>
  259. </el-card>
  260. </div>
  261. <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
  262. <fourClass
  263. ref="fourClass"
  264. @doSubmit="acceptFourClass"
  265. :single="true"
  266. />
  267. <popDialog
  268. ref="contractSelect"
  269. @doSubmit="selectionsToInput"
  270. :single="true"
  271. />
  272. <Refers ref="refer" @doSubmit="selectionsRefer" :single="true"/>
  273. </div>
  274. </template>
  275. <script>
  276. import Add from './add.vue'
  277. import CollapseTransition from '@/components/MyCollapse/collapse.vue'
  278. import {getDivisionList, delDivision} from '@/api/purchase/basic.js'
  279. // 物料分类
  280. import fourClass from '@/components/PopDialog/fourClass.vue'
  281. // 物料编码
  282. import popDialog from '@/components/PopDialog/index.vue'
  283. import Refers from '@/components/Refers/refers.vue'
  284. export default {
  285. name: 'MaterialClassDivision',
  286. components: {
  287. Add,
  288. CollapseTransition,
  289. fourClass,
  290. popDialog,
  291. Refers
  292. },
  293. data() {
  294. return {
  295. expanded: false,
  296. // 页面配置
  297. isList: true,
  298. // 页面状态
  299. page: '',
  300. queryParams: {
  301. materialClassifyOne: '',
  302. materialClassifyOneName: '',
  303. materialClassifyTwo: '',
  304. materialClassifyTwoName: '',
  305. materialClassifyThree: '',
  306. materialClassifyThreeName: '',
  307. materialClassify: '',
  308. materialClassifyFourName: '',
  309. materialCode: '',
  310. materialName: '',
  311. orderPersonal: '',
  312. buyer: '',
  313. manufacturer: '',
  314. remark: '',
  315. pageNum: 1,
  316. pageSize: 10
  317. },
  318. options: [{
  319. value: 'Y', label: '是',
  320. }, {
  321. value: 'N', label: '否'
  322. }],
  323. staffOptions: [],
  324. staff2Options: [],
  325. referCondition: {
  326. type: '',
  327. isPage: true,
  328. title: ''
  329. },
  330. tableList: [],
  331. total: 0,
  332. rowDetail: {},
  333. disable: false,
  334. allSelection: []
  335. }
  336. },
  337. created() {
  338. this.getList(this.queryParams)
  339. },
  340. methods: {
  341. getList(params){
  342. getDivisionList(params).then(res => {
  343. if (res.code === 200) {
  344. this.tableList = res.rows
  345. this.total = res.total
  346. }
  347. })
  348. },
  349. searchList() {
  350. this.getList(this.queryParams)
  351. },
  352. resetList() {
  353. this.queryParams = {
  354. materialClassifyOne: '',
  355. materialClassifyOneName: '',
  356. materialClassifyTwo: '',
  357. materialClassifyTwoName: '',
  358. materialClassifyThree: '',
  359. materialClassifyThreeName: '',
  360. materialClassify: '',
  361. materialClassifyFourName: '',
  362. materialCode: '',
  363. materialName: '',
  364. orderPersonal: '',
  365. buyer: '',
  366. manufacturer: '',
  367. remark: '',
  368. pageNum: 1,
  369. pageSize: 10
  370. }
  371. this.getList(this.queryParams)
  372. },
  373. deletes() {
  374. if (this.allSelection.length == 0) {
  375. this.$modal.notifyWarning("请至少选择一条数据!");
  376. } else {
  377. let param = this.allSelection.map(item => item.id)
  378. let rows = param.join()
  379. this.$modal.confirm('确认删除选择数据?').then(() => {
  380. delDivision(rows).then(res => {
  381. if (res.code === 200) {
  382. this.$modal.notifySuccess("删除成功");
  383. this.getList(this.queryParams)
  384. }
  385. })
  386. }).catch(() => { })
  387. }
  388. },
  389. handleSelectionChange(selection) {
  390. console.log('选中', selection)
  391. this.allSelection = selection
  392. },
  393. handleCommand(command) {
  394. alert(command)
  395. },
  396. addDivision() {
  397. this.isList = false
  398. this.page = 'add'
  399. this.disable = false
  400. },
  401. check(row) {
  402. this.isList = false
  403. this.page = 'check'
  404. this.rowDetail = row
  405. this.disable = true
  406. },
  407. edit(row) {
  408. this.isList = false
  409. this.page = 'edit'
  410. this.rowDetail = row
  411. this.disable = false
  412. },
  413. deleteids(row) {
  414. console.log('row', row)
  415. this.$modal.confirm('确认信息').then(() => {
  416. delDivision(row.id).then(res => {
  417. if (res.code === 200) {
  418. this.$modal.notifySuccess("删除成功");
  419. this.getList(this.queryParams)
  420. }
  421. })
  422. }).catch(() => {})
  423. },
  424. handleSizeChange(val) {
  425. console.log(`每页 ${val} 条`);
  426. this.queryParams.pageSize = val
  427. this.getList(this.queryParams)
  428. },
  429. handleCurrentChange(val) {
  430. console.log(`当前页: ${val}`);
  431. this.queryParams.pageNum = val
  432. this.getList(this.queryParams)
  433. },
  434. drop() {
  435. this.expanded = !this.expanded
  436. },
  437. // 物料分类显示列表
  438. chooseFourClass() {
  439. this.$refs.fourClass.init()
  440. },
  441. // 选择物料分类
  442. acceptFourClass(selections) {
  443. console.log('收到的四级分类', selections)
  444. this.queryParams.materialClassify = selections.code
  445. },
  446. // 显示物料编码列表
  447. test01() {
  448. this.$refs.contractSelect.init()
  449. },
  450. selectionsToInput(selections) {
  451. this.queryParams.materialCode = selections[0].code
  452. },
  453. // 选择默认采购组织
  454. chooseRefer(type, isPage, title) {
  455. this.referCondition.type = type
  456. this.referCondition.isPage = isPage
  457. this.referCondition.title = title
  458. this.$refs.refer.init(this.referCondition)
  459. },
  460. selectionsRefer(selection) {
  461. if (this.referCondition.title == '订单员') {
  462. this.staffOptions = selection
  463. this.queryParams.orderPersonal = selection[0].code
  464. }
  465. if (this.referCondition.title == '采购员') {
  466. this.staff2Options = selection
  467. this.queryParams.buyer = selection[0].code
  468. }
  469. }
  470. }
  471. }
  472. </script>
  473. <style lang="scss" scoped>
  474. #MaterialClassDivision {
  475. padding: 12px;
  476. box-sizing: border-box;
  477. overflow-y: scroll;
  478. }
  479. .btn_grooup {
  480. margin-bottom: 10px;
  481. display: flex;
  482. justify-content: flex-end;
  483. }
  484. .lines {
  485. margin-top: 0;
  486. }
  487. ::v-deep .el-table__row > td {
  488. border: none;
  489. }
  490. ::v-deep .el-card .el-form-item {
  491. margin-bottom: 3px;
  492. }
  493. .el-pagination {
  494. margin-top: 10px;
  495. text-align: right;
  496. }
  497. </style>
  498. <style>
  499. .exporttable {
  500. border: solid 1px #c0c0c0;
  501. }
  502. .el-table .el-table__header-wrapper th {
  503. font-size: 14px;
  504. }
  505. </style>