index.vue 16 KB

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