index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  1. <template>
  2. <div class="my-container">
  3. <!-- <transition-group name="fade" style="position: relative;width: 100%;display: flex;"> -->
  4. <div class="bill-left" v-show="isShow==='home'" key="item">
  5. <div class="bill-tab">
  6. <div class="bill-title">导航</div>
  7. <side-tree :propConfig="treeConfig" @onChange="onChangeTree" ref="sideTree" />
  8. </div>
  9. </div>
  10. <div class="bill-main" v-show="isShow==='home'" key="item2">
  11. <module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
  12. @resert="onRefresh" @clickHandle="clickHandle" @detail="openEdit" @onRefresh="onRefresh">
  13. </module-view>
  14. </div>
  15. <!-- 新增/编辑弹窗 -->
  16. <div class="detil" v-show="isShow==='add'" key="item3">
  17. <by-tool :propConfig="toolConfig" @clickHandle="insideTools" ref="byTool" />
  18. <div class="box-shadow">
  19. <by-form :propConfig="addConfig" ref="addFormId">
  20. <template v-slot:k3ServerUrl="{value}" class="clearfix">
  21. <!-- <i class="el-icon-question" title="私有云必须配置金蝶云星空产品地址,K3Cloud/结尾,若为公有云则必须置空"></i> -->
  22. <!-- <vxe-input v-model="value.k3ServerUrl" style="width:calc(100% - 25px);margin-left: 10px;"></vxe-input> -->
  23. <vxe-input v-model="value.k3ServerUrl" style="width: 27.2%;"></vxe-input>
  24. <div style="display: inline-block;margin-left: 17px;color: #ababab;">
  25. <span style="color: red;margin-right: 5px;">*</span>私有云必须配置金蝶云星空产品地址,K3Cloud/结尾,若为公有云则必须置空
  26. </div>
  27. </template>
  28. <template v-slot:status class="clearfix">
  29. <el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="0">正常</el-radio>
  30. <el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="1">禁用</el-radio>
  31. </template>
  32. </by-form>
  33. </div>
  34. </div>
  35. <!-- </transition-group> -->
  36. </div>
  37. </template>
  38. <script lang="ts">
  39. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  40. import api from "@/api/currency";
  41. import Assembly from "@/components/Assembly/material.vue";
  42. @Component
  43. export default class Supplier extends Vue {
  44. isShow = 'home'
  45. timeNum = 0;
  46. timer : any = null
  47. popTitle : any = ''
  48. radio : any = 0
  49. dialogFormVisible : boolean = false
  50. categoryIds : any = '';
  51. toolConfig = {
  52. tools: {
  53. return: true,
  54. save: true,
  55. }
  56. }
  57. treeConfig = {
  58. attr: {
  59. retConfig: {
  60. id: 'id',
  61. },
  62. defaultExpandAll: true,
  63. label: 'name',
  64. resType: 'data'
  65. },
  66. request: {
  67. url: '/maindata/maindataOrganizationCategory/treeUseList',
  68. method: 'GET'
  69. }
  70. }
  71. config : any = {
  72. attr: {
  73. calculateH: true
  74. },
  75. search: {
  76. attr: {
  77. size: 'mini'
  78. },
  79. columns: [
  80. [{
  81. span: 6,
  82. label: '名称',
  83. prop: 'name',
  84. component: 'by-input',
  85. labelWidth: '70px',
  86. compConfig: {
  87. attr: {
  88. placeholder: '请输入名称',
  89. clearable: true
  90. },
  91. },
  92. }, {
  93. span: 6,
  94. label: '负责人',
  95. prop: 'contacts',
  96. component: 'by-input',
  97. labelWidth: '70px',
  98. compConfig: {
  99. attr: {
  100. placeholder: '请输入负责人',
  101. clearable: true
  102. }
  103. }
  104. },
  105. {
  106. span: 6,
  107. label: '状态',
  108. prop: 'status',
  109. labelWidth: '70px',
  110. component: 'by-select',
  111. compConfig: {
  112. attr: {
  113. placeholder: '请选择状态',
  114. clearable: true,
  115. size: 'small',
  116. data: [{
  117. value: 0,
  118. label: '正常'
  119. }, {
  120. value: 1,
  121. label: '禁用'
  122. }]
  123. }
  124. }
  125. },
  126. ]
  127. ]
  128. },
  129. tool: {
  130. tools: {
  131. add: true,
  132. search: true,
  133. refresh: true
  134. }
  135. },
  136. table: {
  137. attr: {
  138. size: 'mini',
  139. align: 'left',
  140. },
  141. columns: [{
  142. title: '名称',
  143. field: 'name',
  144. isDetail: true,
  145. width: 150,
  146. },
  147. {
  148. title: '负责人',
  149. field: 'contacts',
  150. width: 120,
  151. },
  152. {
  153. title: '联系电话',
  154. field: 'phonenum',
  155. width: 150,
  156. },
  157. {
  158. title: '手机号码',
  159. field: 'telephone',
  160. width: 150,
  161. },
  162. {
  163. width: 300,
  164. title: '财务系统类型',
  165. field: 'financeType2',
  166. },
  167. {
  168. width: 80,
  169. title: '状态',
  170. field: 'status',
  171. component: Assembly,
  172. }, {
  173. width: 120,
  174. title: '操作',
  175. action: true,
  176. plugins: [{
  177. icon: 'el-icon-edit',
  178. name: '编辑',
  179. audit: '',
  180. event: {
  181. click: (item : any) => {
  182. (this as any).openEdit(item)
  183. }
  184. }
  185. }, {
  186. name: '删除',
  187. event: {
  188. click: (item : any) => (this as any).doDelete(item)
  189. }
  190. }]
  191. }]
  192. },
  193. }
  194. addConfig = {
  195. attr: {
  196. size: 'medium',
  197. rules: {
  198. // categoryName: [{
  199. // required: true, message: '请输入父级', trigger: 'change'
  200. // }],
  201. name: [{
  202. required: true, message: '请输入名称', trigger: 'blur'
  203. }],
  204. contacts: [{
  205. required: true, message: '请输入负责人', trigger: 'blur'
  206. }],
  207. telephone: [{
  208. required: true, message: '请输入手机号码', trigger: 'blur'
  209. }],
  210. financeType: [{
  211. required: true, message: '请输入财务系统类型', trigger: 'change'
  212. }],
  213. province: [{
  214. required: true, message: '请选择地址', trigger: 'change'
  215. }],
  216. address: [{
  217. required: true, message: '请输入详细地址', trigger: 'blur'
  218. }],
  219. }
  220. },
  221. columns: [
  222. [
  223. {
  224. span: 6,
  225. label: '父级',
  226. prop: 'categoryName',
  227. component: 'select-tree',
  228. compConfig: {
  229. attr: {
  230. label: 'name',
  231. clearable: true,
  232. retConfig: {
  233. categoryId: 'id',
  234. categoryName: 'name',
  235. },
  236. defaultExpandAll: true
  237. },
  238. request: {
  239. url: '/maindata/maindataOrganizationCategory/treeUseList'
  240. }
  241. }
  242. },
  243. {
  244. span: 6,
  245. label: '名称',
  246. prop: 'name',
  247. component: 'by-input',
  248. },
  249. {
  250. span: 6,
  251. label: '负责人',
  252. prop: 'contacts',
  253. component: 'by-input',
  254. },
  255. {
  256. span: 6,
  257. label: '手机号码',
  258. prop: 'telephone',
  259. component: 'by-input',
  260. },
  261. {
  262. span: 6,
  263. label: '联系电话',
  264. prop: 'phonenum',
  265. component: 'by-input',
  266. },
  267. ],
  268. [
  269. {
  270. span: 6,
  271. labelWidth: '110px',
  272. label: '财务系统类型',
  273. prop: 'financeType',
  274. component: 'by-select',
  275. compConfig: {
  276. attr: {
  277. placeholder: '请选择财务系统类型',
  278. clearable: true,
  279. size: 'small',
  280. data: [
  281. {
  282. value: 'kingdee',
  283. label: '金蝶K3'
  284. },
  285. // {
  286. // value: 'yonbip',
  287. // label: '用友U8'
  288. // },
  289. ]
  290. }
  291. }
  292. },
  293. ],
  294. [
  295. {
  296. span: 18,
  297. label: 'URL地址',
  298. slot: true,
  299. prop: 'k3ServerUrl',
  300. },
  301. ],
  302. [
  303. {
  304. span: 6,
  305. label: '登录授权ID',
  306. slot: true,
  307. prop: 'k3AppId',
  308. component: 'by-input',
  309. },
  310. {
  311. span: 6,
  312. label: '用户名称',
  313. slot: true,
  314. prop: 'k3UserName',
  315. component: 'by-input',
  316. },
  317. {
  318. span: 6,
  319. label: '数据中心ID',
  320. slot: true,
  321. prop: 'k3AcctId',
  322. component: 'by-input',
  323. },
  324. {
  325. span: 6,
  326. label: '应用秘钥',
  327. slot: true,
  328. prop: 'k3AppSec',
  329. component: 'by-input',
  330. },
  331. ],
  332. [{
  333. span: 18,
  334. label: '地址',
  335. prop: 'province',
  336. component: 'by-area',
  337. labelWidth: '100px',
  338. compConfig: {
  339. attr: {
  340. province: 'province', //省
  341. provinceCode: 'provinceCode', //省编码
  342. city: 'city', //市
  343. cityCode: 'cityCode', //市编码
  344. county: 'region', //县/区
  345. countyCode: 'regionCode', //县/区编码
  346. town: 'street', //街道
  347. townCode: 'streetCode', //街道编码
  348. }
  349. }
  350. }],
  351. [
  352. {
  353. span: 18,
  354. label: '详细地址',
  355. slot: true,
  356. prop: 'address',
  357. component: 'by-input',
  358. },
  359. ],
  360. [
  361. {
  362. span: 6,
  363. label: '状态',
  364. slot: true,
  365. prop: 'status',
  366. },
  367. ]
  368. ]
  369. }
  370. mounted() {
  371. this.timer = setInterval(() => {
  372. this.getDataList()
  373. }, 300)
  374. }
  375. //点击树获取数据
  376. onChangeTree(e : any) {
  377. this.categoryIds = e.id;
  378. let loading = this.$loading({ target: '.main-container' });
  379. api.byCategoryPage({ categoryId: e.id, type: 2 }, 'maindataOrganizationCategory').then((res : any) => {
  380. if (res.code === 200) {
  381. (this.$refs.moduleView as any).setTableValue(res.data.records);
  382. let page = {
  383. pageNo: res.data.current, //当前页
  384. pageSize: res.data.size, //每页条数
  385. total: res.data.total //总条数
  386. };
  387. (this.$refs.moduleView as any).setPage(page);
  388. loading.close();
  389. } else loading.close();
  390. }).catch(() => loading.close());
  391. }
  392. // 内页工具栏方法
  393. insideTools(e : any) {
  394. console.log(e);
  395. if (e === 'onReturn') this.isShow = 'home';
  396. if (e === 'onSave') this.confirm();
  397. }
  398. // 保存新增/编辑
  399. confirm() {
  400. (this as any).$refs.addFormId.validate().then(() => {
  401. let query = (this as any).$refs.addFormId.getValue();
  402. query.status = this.radio;
  403. // 手机验证
  404. let reg = /^1[3456789]\d{9}$/;
  405. // let reg2 = /^0\d{2,3}-\d{7,8}$/;
  406. if (query.telephone && !reg.test(query.telephone)) return this.$message.warning('请输入正确手机号码');
  407. // if (query.phonenum && !reg2.test(query.phonenum)) return this.$message.warning('请输入正确联系电话');
  408. if(query.phonenum){
  409. if (query.phonenum.length>20 || query.phonenum[0]==' ') {
  410. return this.$message.warning('请输入正确联系电话');
  411. }
  412. }
  413. console.log(1)
  414. if (!query.telephone) query.telephone = null;
  415. if (!query.phonenum) query.phonenum = null;
  416. let loading = this.$loading({ target: '.main-container' });
  417. if (this.popTitle === '新增') {
  418. api.saveList(query, 'maindataMaterialDistributor').then((res : any) => {
  419. loading.close();
  420. if (res.code === 200) {
  421. this.$message.success('保存成功');
  422. (this as any).$refs.sideTree.request();
  423. this.isShow = 'home'; // 展示类型
  424. this.dialogFormVisible = false;
  425. this.getDataList();
  426. } else this.$message.error(res.msg);
  427. }).catch(() => loading.close());
  428. } else if (this.popTitle === '编辑') {
  429. api.updateList(query, 'maindataMaterialDistributor').then((res : any) => {
  430. loading.close();
  431. if (res.code === 200) {
  432. this.$message.success('编辑成功');
  433. (this as any).$refs.sideTree.request();
  434. this.isShow = 'home'; // 展示类型
  435. this.dialogFormVisible = false;
  436. this.getDataList();
  437. } else this.$message.error(res.msg);
  438. }).catch(() => loading.close());
  439. }
  440. }).catch(() => {});
  441. }
  442. // 获取列表数据
  443. getDataList() {
  444. if (!this.$refs.moduleView) {
  445. if (this.timeNum > 5) {
  446. clearInterval(this.timer)
  447. }
  448. this.timeNum++;
  449. return
  450. }
  451. clearInterval(this.timer)
  452. let query = (this.$refs.moduleView as any).getQuery();
  453. if (this.categoryIds) query.categoryIds = this.categoryIds;
  454. console.log('表单字段 ==> ', query);
  455. this.getPageList(query)
  456. }
  457. getPageList(query : any) {
  458. let loading = this.$loading({ target: '.main-container' });
  459. api.pageList(query, 'maindataMaterialDistributor').then((res : any) => {
  460. loading.close();
  461. if (res.code === 200) {
  462. res.data.records.map((v : any) => {
  463. if (v.financeType === 'kingdee') v.financeType2 = '金蝶K3';
  464. if (v.financeType === 'yonbip') v.financeType2 = '用友U8';
  465. });
  466. (this.$refs.moduleView as any).setTableValue(res.data.records);
  467. let page = {
  468. pageNo: res.data.current, //当前页
  469. pageSize: res.data.size, //每页条数
  470. total: res.data.total //总条数
  471. };
  472. (this.$refs.moduleView as any).setPage(page);
  473. } else this.$message.error(res.msg);
  474. }).catch(() => loading.close());
  475. }
  476. // 工具栏方法
  477. clickHandle(e : any) {
  478. if (e === 'onAdd') this.onAdd();
  479. }
  480. // 打开新增
  481. onAdd() {
  482. this.isShow = 'add'; // 展示类型
  483. this.popTitle = '新增'
  484. this.dialogFormVisible = true;
  485. this.radio = 0
  486. this.$nextTick(() => (this as any).$refs.addFormId.setValue());
  487. }
  488. // 打开编辑
  489. openEdit(e : any) {
  490. console.log('打开编辑 ==> ', e);
  491. this.isShow = 'add'; // 展示类型
  492. this.popTitle = '编辑'
  493. let loading = this.$loading({ target: '.main-container' });
  494. api.single({ id: e.id }, 'maindataMaterialDistributor').then((res : any) => {
  495. if (res.code === 200) {
  496. let data = res.data;
  497. this.radio = data.status;
  498. this.dialogFormVisible = true;
  499. this.$nextTick(() => (this as any).$refs.addFormId.setValue(data));
  500. loading.close();
  501. } else loading.close();
  502. }).catch(() => loading.close());
  503. }
  504. // 操作删除
  505. doDelete(item : any) {
  506. this.$confirm('确定删除吗,此操作不能撤销!', '注意', {
  507. confirmButtonText: '确定',
  508. cancelButtonText: '取消',
  509. type: 'warning',
  510. center: true
  511. }).then(() => {
  512. let loading = this.$loading({ target: '.main-container' });
  513. api.deleteList({ ids: item.id }, 'maindataMaterialDistributor').then((res : any) => {
  514. loading.close();
  515. if (res.code === 200) {
  516. (this as any).$refs.sideTree.request();
  517. this.getDataList();
  518. this.$message.success('删除成功');
  519. } else this.$message.error(res.msg);
  520. }).catch(() => loading.close());
  521. }).catch(() => this.$message.info('已取消删除'));
  522. }
  523. // 刷新/重置
  524. onRefresh() {
  525. (this as any).$refs.moduleView.clearSearch();
  526. (this as any).$refs.sideTree.request();
  527. this.categoryIds = '';
  528. this.getDataList();
  529. }
  530. }
  531. </script>
  532. <style lang="scss" scoped>
  533. .my-container {
  534. width: 100%;
  535. box-sizing: border-box;
  536. display: flex;
  537. padding: 16px;
  538. height: 100%;
  539. .bill-left {
  540. position: relative;
  541. border-right: solid #EEE 1px;
  542. padding-right: 16px;
  543. flex-shrink: 0;
  544. .bill-tab {
  545. width: 150px;
  546. height: 100%;
  547. transition: all .5s;
  548. overflow: hidden;
  549. }
  550. .tab-title {
  551. font-size: 16px;
  552. padding-bottom: 16px;
  553. width: 200px;
  554. }
  555. }
  556. .bill-main {
  557. width: calc(100% - 16px);
  558. box-sizing: border-box;
  559. margin-left: 16px;
  560. position: relative;
  561. height: 100%;
  562. overflow-y: hidden;
  563. }
  564. .detil {
  565. width: 100%;
  566. .box-shadow {
  567. box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  568. padding: 20px;
  569. border-radius: 4px;
  570. border: 1px solid #e6ebf5;
  571. background-color: #fff;
  572. overflow: hidden;
  573. color: #303133;
  574. -webkit-transition: .3s;
  575. transition: .3s;
  576. margin-top: 20px;
  577. }
  578. }
  579. }
  580. </style>