index.vue 14 KB

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