index.vue 14 KB

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