index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <template>
  2. <div>
  3. <basic-container v-if="isShow">
  4. <avue-crud :option="option"
  5. :data="dataList"
  6. ref="crud"
  7. v-model="form"
  8. :page.sync="page"
  9. :search.sync="search"
  10. @row-del="rowDel"
  11. @row-update="rowUpdate"
  12. :before-open="beforeOpen"
  13. :before-close="beforeClose"
  14. @row-save="rowSave"
  15. @search-change="searchChange"
  16. @search-reset="searchReset"
  17. @selection-change="selectionChange"
  18. @current-change="currentChange"
  19. @size-change="sizeChange"
  20. @refresh-change="refreshChange"
  21. @on-load="onLoad"
  22. @tree-load="treeLoad"
  23. @saveColumn="saveColumn">
  24. <template slot="menuLeft" slot-scope="{size}">
  25. <el-button type="success" :size="size" @click="copyOrder" :disabled="single">复制新单</el-button>
  26. <el-button type="info" :size="size" icon="el-icon-printer">报 表</el-button>
  27. </template>
  28. <template slot="corpIdSearch">
  29. <select-component
  30. v-model="search.corpId"
  31. :configuration="configuration"
  32. ></select-component>
  33. </template>
  34. <template slot="salesCompanySearch">
  35. <select-component
  36. v-model="search.salesCompany"
  37. :configuration="configuration"
  38. ></select-component>
  39. </template>
  40. <template slot-scope="scope" slot="corpId">
  41. {{ scope.row.corpsName }}
  42. </template>
  43. <template slot-scope="scope" slot="salesCompany">
  44. {{ scope.row.salesCompanyName }}
  45. </template>
  46. <template slot-scope="scope" slot="menu">
  47. <el-button
  48. type="text"
  49. icon="el-icon-view"
  50. size="small"
  51. @click.stop="beforeOpenPage(scope.row,scope.index)"
  52. >查看
  53. </el-button>
  54. <el-button
  55. type="text"
  56. icon="el-icon-edit"
  57. size="small"
  58. @click.stop="editOpen(scope.row,scope.index)"
  59. >编辑
  60. </el-button>
  61. <el-button
  62. type="text"
  63. icon="el-icon-delete"
  64. size="small"
  65. @click.stop="rowDel(scope.row,scope.index)"
  66. >删除
  67. </el-button>
  68. </template>
  69. </avue-crud>
  70. </basic-container>
  71. <detail-page
  72. ref="detail"
  73. @goBack="goBack"
  74. :detailData="detailData"
  75. v-else
  76. ></detail-page>
  77. </div>
  78. </template>
  79. <script>
  80. import option from "./configuration/mainList.json";
  81. import {customerList, typeSave, deleteDetails} from "@/api/basicData/deliveryNotice"
  82. import detailPage from "./detailsPageEdit";
  83. export default {
  84. name: "customerInformation",
  85. components: {
  86. detailPage
  87. },
  88. data() {
  89. return {
  90. configuration: {
  91. multipleChoices: false,
  92. multiple: false,
  93. collapseTags: false,
  94. placeholder: "请点击右边按钮选择",
  95. dicData: [],
  96. },
  97. form: {},
  98. search: {},
  99. option: {},
  100. parentId: 0,
  101. dataList: [],
  102. page: {
  103. pageSize: 10,
  104. pagerCount: 5,
  105. total: 0,
  106. },
  107. // 非单个禁用
  108. single: true,
  109. // 非多个禁用
  110. multiple: true,
  111. selection: [],
  112. isShow: true,
  113. detailData: {},
  114. }
  115. },
  116. async created() {
  117. this.option = await this.getColumnData(this.getColumnName(20), option);
  118. if (this.$route.query.form) {
  119. this.detailData = {
  120. form: this.$route.query.form,
  121. };
  122. this.isShow = false;
  123. }
  124. },
  125. methods: {
  126. //删除列表后面的删除按钮触发触发(row, index, done)
  127. rowDel(row, index, done) {
  128. this.$confirm("确定将选择数据删除?", {
  129. confirmButtonText: "确定",
  130. cancelButtonText: "取消",
  131. type: "warning"
  132. }).then(() => {
  133. return deleteDetails(row.id);
  134. }).then(() => {
  135. this.$message({
  136. type: "success",
  137. message: "操作成功!"
  138. });
  139. this.page.currentPage = 1;
  140. this.onLoad(this.page, {parentId: 0});
  141. });
  142. },
  143. //修改时的修改按钮点击触发
  144. rowUpdate(row, index, done, loading) {
  145. typeSave(row).then(() => {
  146. this.$message({
  147. type: "success",
  148. message: "操作成功!"
  149. });
  150. // 数据回调进行刷新
  151. done(row);
  152. }, error => {
  153. window.console.log(error);
  154. loading();
  155. });
  156. },
  157. //新增修改时保存触发
  158. rowSave(row, done, loading) {
  159. typeSave(row).then(res => {
  160. console.log(res)
  161. done()
  162. })
  163. },
  164. //查询全部
  165. initData() {
  166. customerList().then(res => {
  167. console.log(this.form);
  168. const column = this.findObject(this.option.column, "parentId");
  169. column.dicData = res.data.data.records;
  170. });
  171. },
  172. //新增子项触发
  173. handleAdd(row) {
  174. this.parentId = row.id;
  175. const column = this.findObject(this.option.column, "parentId");
  176. column.value = row.id;
  177. column.addDisabled = true;
  178. this.$refs.crud.rowAdd();
  179. },
  180. //查看跳转页面
  181. beforeOpenPage(row, index) {
  182. // /deliveryNotice_detailsPageEdit
  183. this.detailData = {
  184. id: row.id,
  185. };
  186. this.isShow = false;
  187. },
  188. //新增跳转页面
  189. beforeOpen(row, index) {
  190. this.detailData = {
  191. id: row.id,
  192. };
  193. this.isShow = false;
  194. },
  195. editOpen(row, index) {
  196. this.detailData = {
  197. id: row.id,
  198. };
  199. this.isShow = false;
  200. },
  201. // 复制新单
  202. copyOrder() {
  203. const id = this.selection[0].id;
  204. this.detailData = {
  205. copyId: id,
  206. };
  207. this.isShow = false;
  208. },
  209. //点击新增时触发
  210. beforeClose(done) {
  211. this.parentId = "";
  212. const column = this.findObject(this.option.column, "parentId");
  213. column.value = "";
  214. column.addDisabled = false;
  215. done();
  216. },
  217. //点击搜索按钮触发
  218. searchChange(params, done) {
  219. console.log(params)
  220. this.page.currentPage = 1;
  221. this.onLoad(this.page, params);
  222. done()
  223. },
  224. searchReset() {
  225. // this.configuration.dicData = []
  226. },
  227. selectionChange(list) {
  228. this.selection = list;
  229. this.single = list.length !== 1;
  230. },
  231. currentChange() {
  232. console.log('1')
  233. },
  234. sizeChange() {
  235. console.log('1')
  236. },
  237. refreshChange() {
  238. console.log('1')
  239. },
  240. onLoad(page, params) {
  241. if (params) {
  242. if (params.businessDate) {
  243. params.businessStartDate = params.businessDate[0]+ " " + "00:00:00"
  244. params.businessEndDate = params.businessDate[1]+ " " + "23:59:59"
  245. this.$delete(params,'businessDate')
  246. }
  247. if (params.createTime) {
  248. params.createStartTime = params.createTime[0]+ " " + "00:00:00"
  249. params.createEndTime = params.createTime[1]+ " " + "23:59:59"
  250. this.$delete(params,'createTime')
  251. }
  252. }
  253. let queryParams = Object.assign({}, params, {
  254. size: page.pageSize,
  255. current: page.currentPage,
  256. billType:"FH"
  257. })
  258. customerList(queryParams).then(res => {
  259. this.dataList = res.data.data.records
  260. this.page.total = res.data.data.total
  261. })
  262. },
  263. //树桩列点击展开触发
  264. treeLoad(tree, treeNode, resolve) {
  265. const parentId = tree.id;
  266. customerList({parentId: parentId}).then(res => {
  267. resolve(res.data.data.records);
  268. });
  269. },
  270. goBack() {
  271. this.detailData=this.$options.data().detailData
  272. this.isShow = true;
  273. },
  274. //列保存触发
  275. async saveColumn() {
  276. /**
  277. * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
  278. * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
  279. * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
  280. */
  281. const inSave = await this.saveColumnData(
  282. this.getColumnName(20),
  283. this.option
  284. );
  285. if (inSave) {
  286. this.$message.success("保存成功");
  287. //关闭窗口
  288. this.$refs.crud.$refs.dialogColumn.columnBox = false;
  289. }
  290. },
  291. }
  292. }
  293. </script>
  294. <style scoped>
  295. </style>