index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <template>
  2. <div class="my-container">
  3. <div class="bill-left">
  4. <div class="bill-tab">
  5. <div class="tab-title">导航</div>
  6. <side-tree :propConfig="treeConfig" @onChange="onChangeTree" />
  7. </div>
  8. </div>
  9. <div class="bill-main">
  10. <module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
  11. @resert="getDataList" @clickHandle="clickHandle" @detail="openEdit" @onRefresh="onRefresh">
  12. </module-view>
  13. </div>
  14. <!-- 新增/编辑弹窗 -->
  15. <el-dialog :title="popTitle+'供应商'" :visible.sync="dialogFormVisible" width="30%">
  16. <by-form :propConfig="addConfig" ref="addFormId">
  17. <template v-slot:status class="clearfix">
  18. <el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="0">正常</el-radio>
  19. <el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="1">禁用</el-radio>
  20. </template>
  21. </by-form>
  22. <div slot="footer" class="dialog-footer">
  23. <el-button @click="dialogFormVisible = false">取 消</el-button>
  24. <el-button type="primary" @click="confirm">确 定</el-button>
  25. </div>
  26. </el-dialog>
  27. </div>
  28. </template>
  29. <script lang="ts">
  30. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  31. import api from "@/api/currency";
  32. import Assembly from "@/components/Assembly/material.vue";
  33. @Component
  34. export default class Supplier extends Vue {
  35. baseURL : any = process.env.VUE_APP_BASE_API
  36. loading : any = null
  37. timeNum = 0;
  38. timer : any = null
  39. popTitle : any = ''
  40. radio : any = 0
  41. dialogFormVisible : boolean = false
  42. parentId: any = '';
  43. treeConfig = {
  44. attr: {
  45. retConfig: {
  46. id: 'id',
  47. name: 'name'
  48. },
  49. defaultExpandAll: true,
  50. label: 'name',
  51. resType: 'data'
  52. },
  53. request: {
  54. url: '/maindata/maindataMaterialCategory/treeList',
  55. method: 'GET'
  56. }
  57. }
  58. config : any = {
  59. search: {
  60. attr: {
  61. size: 'mini'
  62. },
  63. columns: [
  64. [{
  65. span: 6,
  66. label: '名称',
  67. prop: 'name',
  68. component: 'by-input',
  69. labelWidth: '70px',
  70. compConfig: {
  71. attr: {
  72. placeholder: '请输入名称',
  73. clearable: true
  74. },
  75. },
  76. }, {
  77. span: 6,
  78. label: '负责人',
  79. prop: 'contacts',
  80. component: 'by-input',
  81. labelWidth: '70px',
  82. compConfig: {
  83. attr: {
  84. placeholder: '请输入负责人',
  85. clearable: true
  86. }
  87. }
  88. },
  89. {
  90. span: 6,
  91. label: '状态',
  92. prop: 'status',
  93. labelWidth: '70px',
  94. component: 'by-select',
  95. compConfig: {
  96. attr: {
  97. placeholder: '请选择状态',
  98. clearable: true,
  99. data: [{
  100. value: 0,
  101. label: '正常'
  102. }, {
  103. value: 1,
  104. label: '禁用'
  105. }]
  106. }
  107. }
  108. },
  109. ]
  110. ]
  111. },
  112. tool: {
  113. tools: {
  114. add: true,
  115. delete: true,
  116. search: true,
  117. refresh: true
  118. }
  119. },
  120. table: {
  121. attr: {
  122. size: 'mini',
  123. seq: true,
  124. align: 'center',
  125. checkbox: true,
  126. height: 600
  127. },
  128. columns: [{
  129. title: '名称',
  130. field: 'name',
  131. isDetail: true,
  132. width: 300,
  133. },
  134. {
  135. title: '负责人',
  136. field: 'contacts',
  137. width: 300,
  138. },
  139. {
  140. width: 80,
  141. title: '状态',
  142. field: 'status',
  143. component: Assembly,
  144. }, {
  145. width: 500,
  146. title: '备注',
  147. field: 'remark',
  148. }, {
  149. width: 120,
  150. title: '操作',
  151. action: true,
  152. plugins: [{
  153. icon: 'el-icon-edit',
  154. name: '编辑',
  155. audit: '',
  156. event: {
  157. click: (item : any) => {
  158. (this as any).openEdit(item)
  159. }
  160. }
  161. }, {
  162. name: '删除',
  163. event: {
  164. click: (item : any) => (this as any).doDelete2(item)
  165. }
  166. }]
  167. }]
  168. },
  169. }
  170. addConfig = {
  171. attr: {
  172. size: 'small',
  173. rules: {
  174. name: [{
  175. required: true, message: '请输入名称', trigger: 'blur'
  176. }],
  177. contacts: [{
  178. required: true, message: '请输入负责人', trigger: 'blur'
  179. }]
  180. }
  181. },
  182. columns: [
  183. [
  184. {
  185. span: 23,
  186. labelWidth: '70px',
  187. label: '名称',
  188. prop: 'name',
  189. component: 'by-input',
  190. },
  191. {
  192. span: 23,
  193. labelWidth: '70px',
  194. label: '负责人',
  195. prop: 'contacts',
  196. component: 'by-input',
  197. },
  198. {
  199. span: 23,
  200. labelWidth: '70px',
  201. label: '状态',
  202. slot: true,
  203. prop: 'status',
  204. },
  205. ],
  206. [
  207. {
  208. span: 23,
  209. labelWidth: '70px',
  210. label: '备注',
  211. prop: 'remark',
  212. component: 'by-input',
  213. compConfig: {
  214. attr: {
  215. size: 'mini',
  216. placeholder: '请输入备注',
  217. type: 'textarea'
  218. },
  219. }
  220. },
  221. ]
  222. ]
  223. }
  224. mounted() {
  225. this.timer = setInterval(() => {
  226. this.getDataList()
  227. }, 300)
  228. }
  229. //点击树获取数据
  230. onChangeTree(e : any) {
  231. console.log('点击结果:', e)
  232. this.parentId = e.id[0]
  233. api.childrenTreeList({ id: e.id[0], pageNo: 1, pageSize: 999 }, 'maindataMaterialSupplier').then((res : any) => {
  234. if (res.code === 200) {
  235. (this.$refs.moduleView as any).setTableValue(res.data);
  236. let page = {
  237. pageNo: res.data.current, //当前页
  238. pageSize: res.data.size, //每页条数
  239. total: res.data.total //总条数
  240. };
  241. (this.$refs.moduleView as any).setPage(page)
  242. }
  243. })
  244. }
  245. // 确认新增/编辑
  246. confirm() {
  247. (this as any).$refs.addFormId.validate().then(() => {
  248. let query = (this as any).$refs.addFormId.getValue();
  249. console.log(query);
  250. query.status = this.radio;
  251. this.dialogFormVisible = false;
  252. if (this.popTitle === '新增') {
  253. api.saveList(query, 'maindataMaterialSupplier').then((res : any) => {
  254. if (res.code === 200) {
  255. this.$message.success(this.popTitle + '成功!');
  256. this.getDataList();
  257. } else this.$message.error(res.msg);
  258. })
  259. } else if (this.popTitle === '编辑') {
  260. api.updateList(query, 'maindataMaterialSupplier').then((res : any) => {
  261. if (res.code === 200) {
  262. this.$message({
  263. type: 'success',
  264. message: this.popTitle + '成功!'
  265. });
  266. this.getDataList();
  267. } else this.$message.error(res.msg);
  268. })
  269. }
  270. })
  271. }
  272. // 获取列表数据
  273. getDataList() {
  274. if (!this.$refs.moduleView) {
  275. if (this.timeNum > 5) {
  276. clearInterval(this.timer)
  277. }
  278. this.timeNum++;
  279. return
  280. }
  281. clearInterval(this.timer)
  282. let query = (this.$refs.moduleView as any).getQuery();
  283. api.pageList(query, 'maindataMaterialSupplier').then((res : any) => {
  284. if (res.code === 200) {
  285. (this.$refs.moduleView as any).setTableValue(res.data.records);
  286. let page = {
  287. pageNo: res.data.current, //当前页
  288. pageSize: res.data.size, //每页条数
  289. total: res.data.total //总条数
  290. };
  291. (this.$refs.moduleView as any).setPage(page)
  292. } else this.$message.error(res.msg);
  293. })
  294. }
  295. // 工具栏方法
  296. clickHandle(e : any) {
  297. if (e === 'onAdd') this.onAdd();
  298. if (e === 'onDelete') this.onDelete();
  299. if (e === 'onExport') this.onExport();
  300. }
  301. // 打开新增
  302. onAdd() {
  303. this.popTitle = '新增'
  304. this.dialogFormVisible = true;
  305. this.radio = 0
  306. setTimeout(() => {
  307. if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue('');
  308. }, 0)
  309. }
  310. // 打开编辑
  311. openEdit(e : any) {
  312. this.popTitle = '编辑'
  313. this.dialogFormVisible = true;
  314. this.radio = e.status
  315. setTimeout(() => {
  316. if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue(e);
  317. }, 0)
  318. }
  319. // 工具栏删除
  320. onDelete() {
  321. let selectData = (this.$refs.moduleView as any).getSelectData()
  322. let ids = '';
  323. if (selectData.length > 0) {
  324. selectData.map((v : any) => {
  325. ids += v.id + ','
  326. })
  327. } else return this.$message({ type: 'warning', message: '请选择删除数据' })
  328. ids = ids.slice(0, ids.length - 1);
  329. this.$confirm('确定删除吗,此操作不能撤销!', '注意', {
  330. confirmButtonText: '确定',
  331. cancelButtonText: '取消',
  332. type: 'warning',
  333. center: true
  334. }).then(() => {
  335. api.deleteList({ ids: ids }, 'maindataMaterialSupplier').then((res : any) => {
  336. if (res.code === 200) {
  337. this.getDataList();
  338. this.$message({
  339. type: 'success',
  340. message: '删除成功!'
  341. });
  342. } else this.$message.error(res.msg);
  343. })
  344. }).catch(() => {
  345. this.$message({
  346. type: 'info',
  347. message: '已取消删除'
  348. });
  349. });
  350. }
  351. // 操作删除
  352. doDelete2(item : any) {
  353. this.$confirm('确定删除吗,此操作不能撤销!', '注意', {
  354. confirmButtonText: '确定',
  355. cancelButtonText: '取消',
  356. type: 'warning',
  357. center: true
  358. }).then(() => {
  359. api.deleteList({ ids: item.id }, 'maindataMaterialSupplier').then((res : any) => {
  360. if (res.code === 200) {
  361. this.getDataList();
  362. this.$message({
  363. type: 'success',
  364. message: '删除成功!'
  365. });
  366. } else this.$message.error(res.msg);
  367. })
  368. }).catch(() => {
  369. this.$message.info('已取消删除');
  370. });
  371. }
  372. // 刷新
  373. onRefresh() {
  374. this.loading = this.$loading({ target: '.main-container' });
  375. (this as any).$refs.moduleView.clearSearch();
  376. api.pageList({}, 'maindataMaterialSupplier').then((res : any) => {
  377. if (res.code === 200) {
  378. (this.$refs.moduleView as any).setTableValue(res.data.records);
  379. let page = {
  380. pageNo: res.data.current, //当前页
  381. pageSize: res.data.size, //每页条数
  382. total: res.data.total //总条数
  383. };
  384. (this.$refs.moduleView as any).setPage(page);
  385. this.loading.close();
  386. } else this.$message.error(res.msg);
  387. })
  388. }
  389. //导出
  390. onExport() {
  391. let urlArr = '/maindata/maindataMaterial';
  392. let query = (this.$refs.moduleView as any).getQuery();
  393. (this as any).$download(urlArr + '/export', {
  394. ...query
  395. }, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
  396. }
  397. }
  398. </script>
  399. <style lang="scss" scoped>
  400. .my-container {
  401. width: 100%;
  402. box-sizing: border-box;
  403. display: flex;
  404. padding: 16px;
  405. .search-btn {
  406. width: 100%;
  407. display: flex;
  408. justify-content: flex-end;
  409. margin-bottom: 20px;
  410. }
  411. .bill-left {
  412. position: relative;
  413. border-right: solid #EEE 1px;
  414. padding-right: 16px;
  415. flex-shrink: 0;
  416. // box-sizing: border-box;
  417. .bill-tab {
  418. width: 150px;
  419. height: 100%;
  420. transition: all .5s;
  421. overflow: hidden;
  422. }
  423. .title {
  424. font-size: 16px;
  425. padding-bottom: 16px;
  426. width: 200px;
  427. }
  428. .bill-nav {
  429. font-size: 14px;
  430. height: 30px;
  431. line-height: 30px;
  432. width: 200px;
  433. box-sizing: border-box;
  434. padding: 0 8px;
  435. cursor: pointer;
  436. margin-bottom: 2px;
  437. border-radius: 5px;
  438. }
  439. .onBill {
  440. background-color: #bde3f7;
  441. }
  442. .bill-nav:hover {
  443. background-color: #bde3f7;
  444. }
  445. .close {
  446. height: 22px;
  447. width: 22px;
  448. border-radius: 50%;
  449. border: solid #EEE 1px;
  450. position: absolute;
  451. top: 30px;
  452. right: -11px;
  453. background-color: #FFF;
  454. display: flex;
  455. justify-content: center;
  456. align-items: center;
  457. cursor: pointer;
  458. }
  459. }
  460. .bill-main {
  461. width: calc(100% - 16px);
  462. box-sizing: border-box;
  463. margin-left: 16px;
  464. position: relative;
  465. .bill-box {
  466. width: 100%;
  467. position: absolute;
  468. left: 0;
  469. top: 0;
  470. opacity: 0;
  471. z-index: -1;
  472. transition: all .5s;
  473. .bill-tool,
  474. .table-tool {
  475. width: 100%;
  476. padding-bottom: 16px;
  477. }
  478. .form {
  479. margin-bottom: 8px;
  480. }
  481. }
  482. .on-show {
  483. opacity: 1;
  484. z-index: 1;
  485. }
  486. }
  487. }
  488. </style>