index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  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" ref="sideTree" />
  7. </div>
  8. </div>
  9. <div class="bill-main">
  10. <module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
  11. @resert="onRefresh" @clickHandle="clickHandle" @detail="openEdit" @onRefresh="onRefresh">
  12. </module-view>
  13. </div>
  14. <!-- 新增/编辑弹窗 -->
  15. <el-dialog :title="popTitle+'商品分类'" :visible.sync="dialogFormVisible" width="30%" :destroy-on-close="true">
  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 ProductClassification extends Vue {
  35. // 左边
  36. parentIds : any = ''
  37. // 右边
  38. timeNum = 0;
  39. timer : any = null
  40. popTitle : any = ''
  41. radio : any = 0
  42. dialogFormVisible : boolean = false
  43. treeConfig = {
  44. attr: {
  45. retConfig: {
  46. id: 'id',
  47. },
  48. defaultExpandAll: true,
  49. label: 'name',
  50. // resType: 'data'
  51. },
  52. // request: {
  53. // url: '/maindata/maindataMaterialCategory/treeList',
  54. // method: 'GET'
  55. // }
  56. }
  57. config : any = {
  58. attr: {
  59. calculateH: true
  60. },
  61. search: {
  62. attr: {
  63. size: 'mini',
  64. },
  65. columns: [
  66. [{
  67. span: 6,
  68. label: '名称',
  69. prop: 'name',
  70. component: 'by-input',
  71. labelWidth: '70px',
  72. compConfig: {
  73. attr: {
  74. placeholder: '请输入名称',
  75. clearable: true
  76. },
  77. },
  78. },
  79. {
  80. span: 6,
  81. label: '简称',
  82. prop: 'shortName',
  83. component: 'by-input',
  84. labelWidth: '70px',
  85. compConfig: {
  86. attr: {
  87. placeholder: '请输入简称',
  88. clearable: true
  89. },
  90. },
  91. },
  92. {
  93. span: 6,
  94. label: '状态',
  95. prop: 'status',
  96. component: 'by-select',
  97. labelWidth: '70px',
  98. compConfig: {
  99. attr: {
  100. placeholder: '请选择状态',
  101. clearable: true,
  102. size: 'small',
  103. data: [{
  104. value: 0,
  105. label: '正常'
  106. }, {
  107. value: 1,
  108. label: '禁用'
  109. }]
  110. }
  111. }
  112. },
  113. ]
  114. ]
  115. },
  116. tool: {
  117. tools: {
  118. add: true,
  119. search: true,
  120. refresh: true
  121. }
  122. },
  123. table: {
  124. attr: {
  125. size: 'mini',
  126. align: 'left',
  127. checkbox: false,
  128. },
  129. columns: [{
  130. width: 300,
  131. title: '名称',
  132. field: 'name',
  133. isDetail: true,
  134. }, {
  135. width: 300,
  136. title: '简称',
  137. field: 'shortName'
  138. },
  139. {
  140. width: 300,
  141. title: '备注',
  142. field: 'remark',
  143. }, {
  144. width: 80,
  145. title: '状态',
  146. field: 'status',
  147. align: 'center',
  148. component: Assembly,
  149. },{
  150. width: 120,
  151. title: '操作',
  152. action: true,
  153. plugins: [{
  154. icon: 'el-icon-edit',
  155. name: '编辑',
  156. audit: '',
  157. event: {
  158. click: (item : any) => {
  159. (this as any).openEdit(item)
  160. }
  161. }
  162. }, {
  163. name: '删除',
  164. event: {
  165. click: (item : any) => (this as any).doDelete(item)
  166. }
  167. }]
  168. }]
  169. },
  170. }
  171. addConfig = {
  172. attr: {
  173. size: 'small',
  174. rules: {
  175. name: [{
  176. required: true, message: '请输入名称', trigger: 'blur'
  177. }],
  178. // parentName: [{
  179. // required: true, message: '请选择上级', trigger: 'change'
  180. // }],
  181. }
  182. },
  183. columns: [
  184. [
  185. {
  186. span: 23,
  187. label: '上级',
  188. labelWidth: '70px',
  189. prop: 'parentName',
  190. component: 'select-tree',
  191. compConfig: {
  192. attr: {
  193. label: 'name',
  194. clearable: true,
  195. retConfig: {
  196. parentId: 'id',
  197. parentName: 'name',
  198. },
  199. defaultExpandAll: true
  200. },
  201. request: {
  202. url: '/maindata/maindataMaterialCategory/treeUseList',
  203. method: 'GET'
  204. }
  205. }
  206. },
  207. {
  208. span: 23,
  209. labelWidth: '70px',
  210. label: '名称',
  211. prop: 'name',
  212. component: 'by-input',
  213. },
  214. {
  215. span: 23,
  216. labelWidth: '70px',
  217. label: '简称',
  218. slot: true,
  219. prop: 'shortName',
  220. component: 'by-input',
  221. },
  222. {
  223. span: 23,
  224. labelWidth: '70px',
  225. label: '状态',
  226. slot: true,
  227. prop: 'status',
  228. },
  229. {
  230. span: 23,
  231. labelWidth: '70px',
  232. label: '备注',
  233. slot: true,
  234. prop: 'remark',
  235. component: 'by-input',
  236. compConfig: {
  237. attr: {
  238. size: 'mini',
  239. placeholder: '请输入备注',
  240. type: 'textarea'
  241. },
  242. }
  243. },
  244. ],
  245. ]
  246. }
  247. mounted() {
  248. this.timer = setInterval(() => {
  249. this.getDataList()
  250. }, 500)
  251. this.getTreeList();
  252. }
  253. getTreeList(){
  254. api.treeList('maindataMaterialCategory').then((res : any) => {
  255. console.log(res);
  256. var data:any = [{
  257. id: 0,
  258. name: '物料分类',
  259. children: res.data
  260. }];
  261. (this as any).$refs.sideTree.setData(data);
  262. })
  263. }
  264. //点击树获取数据
  265. onChangeTree(e : any) {
  266. let data : any = {};
  267. e.isContain ? data.ids = e.id : data.parentId = e.id;
  268. this.parentIds = (this as any).$lodash.cloneDeep(e.id);
  269. this.parentIds.shift();
  270. data.pageSize = 20;
  271. data.pageNo = 1;
  272. let loading = this.$loading({ target: '.main-container' });
  273. api.childrenTreeList(data, 'maindataMaterialCategory').then((res : any) => {
  274. loading.close();
  275. if (res.code === 200) {
  276. (this.$refs.moduleView as any).setTableValue(res.data.records);
  277. let page = {
  278. pageNo: res.data.current, //当前页
  279. pageSize: res.data.size, //每页条数
  280. total: res.data.total //总条数
  281. };
  282. (this.$refs.moduleView as any).setPage(page);
  283. }
  284. }).catch(() => loading.close());
  285. }
  286. // 确认新增/编辑
  287. confirm() {
  288. (this as any).$refs.addFormId.validate().then(() => {
  289. let query = (this as any).$refs.addFormId.getValue();
  290. console.log('确认新增/编辑 ==> ', query);
  291. query.status = this.radio;
  292. this.dialogFormVisible = false;
  293. if (this.popTitle === '新增') {
  294. api.saveList(query, 'maindataMaterialCategory').then((res : any) => {
  295. if (res.code === 200) {
  296. this.$message.success(this.popTitle + '成功!');
  297. // (this as any).$refs.sideTree.request();
  298. this.getTreeList();
  299. this.getDataList();
  300. } else this.$message.error(res.msg);
  301. }).catch(() => {});
  302. } else if (this.popTitle === '编辑') {
  303. if(!query.parentId){
  304. query.parentId=0
  305. }
  306. if(query.parentId==query.id){
  307. this.$message.error('不能设置自己是自己的上级节点')
  308. return false
  309. }
  310. api.updateList(query, 'maindataMaterialCategory').then((res : any) => {
  311. if (res.code === 200) {
  312. this.$message.success(this.popTitle + '成功!');
  313. // (this as any).$refs.sideTree.request();
  314. this.getTreeList();
  315. this.getDataList();
  316. } else this.$message.error(res.msg);
  317. }).catch(() => {});
  318. }
  319. }).catch(() => {});
  320. }
  321. // 获取列表数据
  322. getDataList() {
  323. if (!this.$refs.moduleView) {
  324. if (this.timeNum > 5) {
  325. clearInterval(this.timer)
  326. }
  327. this.timeNum++;
  328. return
  329. }
  330. clearInterval(this.timer)
  331. let query = (this.$refs.moduleView as any).getQuery();
  332. if (this.parentIds.length > 0) query.parentIds = this.parentIds;
  333. console.log('表单字段 ==> ', query);
  334. this.getPageList(query);
  335. }
  336. getPageList(query : any) {
  337. let loading = this.$loading({ target: '.main-container' });
  338. api.pageList(query, 'maindataMaterialCategory').then((res : any) => {
  339. loading.close();
  340. if (res.code === 200) {
  341. (this.$refs.moduleView as any).setTableValue(res.data.records);
  342. let page = {
  343. pageNo: res.data.current, //当前页
  344. pageSize: res.data.size, //每页条数
  345. total: res.data.total //总条数
  346. };
  347. (this.$refs.moduleView as any).setPage(page);
  348. } else this.$message.error(res.msg);
  349. }).catch(() => loading.close());
  350. }
  351. // 工具栏方法
  352. clickHandle(e : any) {
  353. if (e === 'onAdd') this.onAdd();
  354. }
  355. // 打开新增
  356. onAdd() {
  357. this.popTitle = '新增'
  358. this.dialogFormVisible = true;
  359. this.radio = 0
  360. this.getTreeList();
  361. setTimeout(() => {
  362. (this as any).$refs.addFormId.setValue();
  363. (this as any).$refs.addFormId.$refs['parentName--comp'][0].request();
  364. }, 0)
  365. }
  366. // 打开编辑
  367. openEdit(e : any) {
  368. console.log('打开编辑 ==> ', e);
  369. this.popTitle = '编辑'
  370. let loading = this.$loading({ target: '.main-container' });
  371. this.getTreeList();
  372. api.single({ id: e.id }, 'maindataMaterialCategory').then((res : any) => {
  373. if (res.code === 200) {
  374. let data = res.data;
  375. this.radio = data.status;
  376. if(data.parentId!=0){
  377. api.single({ id: data.parentId }, 'maindataMaterialCategory').then((res : any) => {
  378. loading.close();
  379. if (res.code === 200) {
  380. data.parentName = res.data.name;
  381. this.dialogFormVisible = true;
  382. setTimeout(() => { (this as any).$refs.addFormId.setValue(data) }, 0);
  383. }
  384. }).catch(() => loading.close());
  385. }else{
  386. loading.close();
  387. this.dialogFormVisible = true;
  388. setTimeout(() => { (this as any).$refs.addFormId.setValue(data) }, 0);
  389. }
  390. }
  391. }).catch(() => loading.close());
  392. }
  393. // 操作删除
  394. doDelete(item : any) {
  395. this.$confirm('确定删除吗,此操作不能撤销!', '注意', {
  396. confirmButtonText: '确定',
  397. cancelButtonText: '取消',
  398. type: 'warning',
  399. center: true
  400. }).then(() => {
  401. api.delCategoryId({ id: item.id }, 'maindataMaterialCategory').then((res : any) => {
  402. if (res.code === 200) {
  403. // (this as any).$refs.sideTree.request();
  404. this.getTreeList();
  405. this.getDataList();
  406. this.$message.success('删除成功');
  407. } else this.$message.error(res.msg);
  408. })
  409. }).catch(() => this.$message.info('已取消删除'));
  410. }
  411. // 刷新/重置
  412. onRefresh() {
  413. (this as any).$refs.moduleView.clearSearch();
  414. // (this as any).$refs.sideTree.request();
  415. this.getTreeList();
  416. this.parentIds = '';
  417. this.getDataList();
  418. }
  419. }
  420. </script>
  421. <style lang="scss" scoped>
  422. .my-container {
  423. width: 100%;
  424. box-sizing: border-box;
  425. display: flex;
  426. padding: 16px;
  427. height: 100%;
  428. .bill-left {
  429. position: relative;
  430. border-right: solid #EEE 1px;
  431. padding-right: 16px;
  432. flex-shrink: 0;
  433. .bill-tab {
  434. width: 150px;
  435. height: 100%;
  436. transition: all .5s;
  437. overflow: hidden;
  438. }
  439. .tab-title {
  440. font-size: 16px;
  441. padding-bottom: 16px;
  442. width: 200px;
  443. }
  444. }
  445. .bill-main {
  446. width: calc(100% - 16px);
  447. box-sizing: border-box;
  448. margin-left: 16px;
  449. position: relative;
  450. height: 100%;
  451. overflow-y: hidden;
  452. }
  453. }
  454. </style>