index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. <template>
  2. <div id="MaterialClassDivision">
  3. <div v-if="isList">
  4. <el-card style="height: calc(100vh - 15vh);position: relative;overflow: scroll;">
  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. max-height="480"
  212. style="font-size: 12px;"
  213. @selection-change="handleSelectionChange"
  214. >
  215. <el-table-column show-overflow-tooltip type="selection" width="55" />
  216. <el-table-column show-overflow-tooltip label="物料分类编码" align="center" width="120" prop="materialClassify"/>
  217. <!-- <el-table-column show-overflow-tooltip label="物料分类名称" align="center" width="200" prop="materialClassifyName" /> -->
  218. <el-table-column show-overflow-tooltip label="一级分类名称" align="center" width="120" prop="materialClassifyOneName" />
  219. <el-table-column show-overflow-tooltip label="二级分类名称" align="center" width="120" prop="materialClassifyTwoName" />
  220. <el-table-column show-overflow-tooltip label="三级分类名称" align="center" width="120" prop="materialClassifyThreeName"/>
  221. <el-table-column show-overflow-tooltip label="四级分类名称" align="center" width="120" prop="materialClassifyFourName" />
  222. <el-table-column show-overflow-tooltip label="物料编码" align="center" width="120" prop="materialCode" />
  223. <el-table-column show-overflow-tooltip label="物料名称" align="center" width="150" prop="materialName" />
  224. <el-table-column show-overflow-tooltip label="生产厂商" align="center" width="150" prop="manufacturer" />
  225. <el-table-column show-overflow-tooltip label="所属组织" align="center" width="200" prop="orgName"/>
  226. <el-table-column show-overflow-tooltip label="订单员" align="center" width="100" prop="orderPersonalName" />
  227. <el-table-column show-overflow-tooltip label="采购员" align="center" width="100" prop="buyerName" />
  228. <el-table-column show-overflow-tooltip label="订单部门" align="center" width="150" prop="orderDeptName" />
  229. <el-table-column show-overflow-tooltip label="部门" align="center" width="150" prop="puDeptName" />
  230. <el-table-column show-overflow-tooltip label="创建人" align="center" width="100" prop="createByName" />
  231. <el-table-column show-overflow-tooltip label="创建时间" align="center" width="150" prop="createTime" />
  232. <el-table-column show-overflow-tooltip label="修改人" align="center" width="100" prop="updateByName" />
  233. <el-table-column show-overflow-tooltip label="修改时间" align="center" width="150" prop="updateTime" />
  234. <el-table-column
  235. fixed="right"
  236. label="操作"
  237. align="center"
  238. width="150"
  239. >
  240. <template slot-scope="scope">
  241. <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
  242. <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
  243. <el-button type="text" size="mini" @click="deleteids(scope.row)">删除</el-button>
  244. </template>
  245. </el-table-column>
  246. </el-table>
  247. <el-pagination
  248. background
  249. @size-change="handleSizeChange"
  250. @current-change="handleCurrentChange"
  251. :current-page="queryParams.pageNum"
  252. :page-sizes="[10, 20, 50, 100]"
  253. :page-size="10"
  254. layout="total, sizes, prev, pager, next, jumper"
  255. :total=total>
  256. </el-pagination>
  257. </el-card>
  258. </div>
  259. <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
  260. <fourClass
  261. ref="fourClass"
  262. @doSubmit="acceptFourClass"
  263. :single="true"
  264. />
  265. <popDialog
  266. ref="contractSelect"
  267. @doSubmit="selectionsToInput"
  268. :single="true"
  269. />
  270. <Refers ref="refer" @doSubmit="selectionsRefer" :single="true"/>
  271. </div>
  272. </template>
  273. <script>
  274. import Add from './add.vue'
  275. import CollapseTransition from '@/components/MyCollapse/collapse.vue'
  276. import {getDivisionList, delDivision} from '@/api/purchase/basic.js'
  277. // 物料分类
  278. import fourClass from '@/components/PopDialog/fourClass.vue'
  279. // 物料编码
  280. import popDialog from '@/components/PopDialog/index.vue'
  281. import Refers from '@/components/Refers/refers.vue'
  282. export default {
  283. name: 'MaterialClassDivision',
  284. components: {
  285. Add,
  286. CollapseTransition,
  287. fourClass,
  288. popDialog,
  289. Refers
  290. },
  291. data() {
  292. return {
  293. expanded: false,
  294. // 页面配置
  295. isList: true,
  296. // 页面状态
  297. page: '',
  298. queryParams: {
  299. materialClassifyOne: '',
  300. materialClassifyOneName: '',
  301. materialClassifyTwo: '',
  302. materialClassifyTwoName: '',
  303. materialClassifyThree: '',
  304. materialClassifyThreeName: '',
  305. materialClassify: '',
  306. materialClassifyFourName: '',
  307. materialCode: '',
  308. materialName: '',
  309. orderPersonal: '',
  310. buyer: '',
  311. manufacturer: '',
  312. remark: '',
  313. pageNum: 1,
  314. pageSize: 10
  315. },
  316. options: [{
  317. value: 'Y', label: '是',
  318. }, {
  319. value: 'N', label: '否'
  320. }],
  321. staffOptions: [],
  322. staff2Options: [],
  323. referCondition: {
  324. type: '',
  325. isPage: true,
  326. title: ''
  327. },
  328. tableList: [],
  329. total: 0,
  330. rowDetail: {},
  331. disable: false,
  332. allSelection: []
  333. }
  334. },
  335. created() {
  336. this.getList(this.queryParams)
  337. },
  338. methods: {
  339. getList(params){
  340. getDivisionList(params).then(res => {
  341. if (res.code === 200) {
  342. this.tableList = res.rows
  343. this.total = res.total
  344. }
  345. })
  346. },
  347. searchList() {
  348. this.getList(this.queryParams)
  349. },
  350. resetList() {
  351. this.queryParams = {
  352. materialClassifyOne: '',
  353. materialClassifyOneName: '',
  354. materialClassifyTwo: '',
  355. materialClassifyTwoName: '',
  356. materialClassifyThree: '',
  357. materialClassifyThreeName: '',
  358. materialClassify: '',
  359. materialClassifyFourName: '',
  360. materialCode: '',
  361. materialName: '',
  362. orderPersonal: '',
  363. buyer: '',
  364. manufacturer: '',
  365. remark: '',
  366. pageNum: 1,
  367. pageSize: 10
  368. }
  369. this.getList(this.queryParams)
  370. },
  371. deletes() {
  372. if (this.allSelection.length == 0) {
  373. this.$modal.notifyWarning("请至少选择一条数据!");
  374. } else {
  375. let param = this.allSelection.map(item => item.id)
  376. let rows = param.join()
  377. this.$modal.confirm('确认删除选择数据?').then(() => {
  378. delDivision(rows).then(res => {
  379. if (res.code === 200) {
  380. this.$modal.notifySuccess("删除成功");
  381. this.getList(this.queryParams)
  382. }
  383. })
  384. }).catch(() => { })
  385. }
  386. },
  387. handleSelectionChange(selection) {
  388. console.log('选中', selection)
  389. this.allSelection = selection
  390. },
  391. handleCommand(command) {
  392. alert(command)
  393. },
  394. addDivision() {
  395. this.isList = false
  396. this.page = 'add'
  397. this.disable = false
  398. },
  399. check(row) {
  400. this.isList = false
  401. this.page = 'check'
  402. this.rowDetail = row
  403. this.disable = true
  404. },
  405. edit(row) {
  406. this.isList = false
  407. this.page = 'edit'
  408. this.rowDetail = row
  409. this.disable = false
  410. },
  411. deleteids(row) {
  412. console.log('row', row)
  413. this.$modal.confirm('确认信息').then(() => {
  414. delDivision(row.id).then(res => {
  415. if (res.code === 200) {
  416. this.$modal.notifySuccess("删除成功");
  417. this.getList(this.queryParams)
  418. }
  419. })
  420. }).catch(() => {})
  421. },
  422. handleSizeChange(val) {
  423. console.log(`每页 ${val} 条`);
  424. this.queryParams.pageSize = val
  425. this.getList(this.queryParams)
  426. },
  427. handleCurrentChange(val) {
  428. console.log(`当前页: ${val}`);
  429. this.queryParams.pageNum = val
  430. this.getList(this.queryParams)
  431. },
  432. drop() {
  433. this.expanded = !this.expanded
  434. },
  435. // 物料分类显示列表
  436. chooseFourClass() {
  437. this.$refs.fourClass.init()
  438. },
  439. // 选择物料分类
  440. acceptFourClass(selections) {
  441. console.log('收到的四级分类', selections)
  442. this.queryParams.materialClassify = selections.code
  443. },
  444. // 显示物料编码列表
  445. test01() {
  446. this.$refs.contractSelect.init()
  447. },
  448. selectionsToInput(selections) {
  449. this.queryParams.materialCode = selections[0].code
  450. },
  451. // 选择默认采购组织
  452. chooseRefer(type, isPage, title) {
  453. this.referCondition.type = type
  454. this.referCondition.isPage = isPage
  455. this.referCondition.title = title
  456. this.$refs.refer.init(this.referCondition)
  457. },
  458. selectionsRefer(selection) {
  459. if (this.referCondition.title == '订单员') {
  460. this.staffOptions = selection
  461. this.queryParams.orderPersonal = selection[0].code
  462. }
  463. if (this.referCondition.title == '采购员') {
  464. this.staff2Options = selection
  465. this.queryParams.buyer = selection[0].code
  466. }
  467. }
  468. }
  469. }
  470. </script>
  471. <style lang="scss" scoped>
  472. #MaterialClassDivision {
  473. height: calc(100vh - 84px);
  474. padding: 12px;
  475. box-sizing: border-box;
  476. overflow-y: scroll;
  477. }
  478. .btn_grooup {
  479. margin-bottom: 10px;
  480. display: flex;
  481. justify-content: flex-end;
  482. }
  483. .lines {
  484. margin-top: 0;
  485. }
  486. ::v-deep .el-table__row > td {
  487. border: none;
  488. }
  489. ::v-deep .el-card .el-form-item {
  490. margin-bottom: 10px;
  491. }
  492. .el-pagination {
  493. margin-top: 10px;
  494. text-align: right;
  495. }
  496. </style>
  497. <style>
  498. .exporttable {
  499. border: solid 1px #c0c0c0;
  500. }
  501. .el-table .el-table__header-wrapper th {
  502. font-size: 14px;
  503. }
  504. </style>