index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <div>
  3. <basic-container v-if="show">
  4. <avue-crud
  5. ref="crud"
  6. :option="option"
  7. :data="dataList"
  8. v-model="form"
  9. :page.sync="page"
  10. :search.sync="search"
  11. @search-change="searchChange"
  12. @current-change="currentChange"
  13. @size-change="sizeChange"
  14. @refresh-change="refreshChange"
  15. @on-load="onLoad"
  16. :table-loading="loading"
  17. @saveColumn="saveColumn"
  18. >
  19. <template slot="portOfLoadSearch">
  20. <port-info v-model="search.portOfLoad" />
  21. </template>
  22. <template slot="portOfDestinationSearch">
  23. <port-info v-model="search.portOfDestination" />
  24. </template>
  25. <template slot="businesDateSearch">
  26. <el-date-picker
  27. v-model="search.businesDate"
  28. type="daterange"
  29. start-placeholder="开始日期"
  30. end-placeholder="结束日期"
  31. format="yyyy-MM-dd"
  32. value-format="yyyy-MM-dd HH:mm:ss"
  33. :default-time="['00:00:00', '23:59:59']"
  34. >
  35. </el-date-picker>
  36. </template>
  37. <template slot="menuLeft">
  38. <el-button
  39. type="primary"
  40. icon="el-icon-plus"
  41. size="small"
  42. @click.stop="newAdd()"
  43. >新单</el-button
  44. >
  45. <el-button type="success" size="small" disabled>复制新单</el-button>
  46. <el-button type="info" size="small">报表</el-button>
  47. </template>
  48. <template slot="corpIdSearch">
  49. <select-component
  50. v-model="search.corpId"
  51. :configuration="configuration"
  52. ></select-component>
  53. </template>
  54. <template slot-scope="scope" slot="corpId">
  55. {{ scope.row.corpsName }}
  56. </template>
  57. <template slot-scope="scope" slot="menu">
  58. <el-button
  59. type="text"
  60. icon="el-icon-view"
  61. size="small"
  62. @click.stop="beforeOpenPage(scope.row, 1)"
  63. >查看
  64. </el-button>
  65. <el-button
  66. type="text"
  67. icon="el-icon-edit"
  68. size="small"
  69. @click.stop="editOpen(scope.row, 2)"
  70. >编辑
  71. </el-button>
  72. <el-button
  73. type="text"
  74. icon="el-icon-delete"
  75. size="small"
  76. @click.stop="rowDel(scope.row, scope.index)"
  77. >删除
  78. </el-button>
  79. </template>
  80. </avue-crud>
  81. </basic-container>
  82. <detail-page @goBack="goBack" :detailData="detailData" v-else></detail-page>
  83. </div>
  84. </template>
  85. <script>
  86. import mainOption from "./config/mainList.json";
  87. import { getList, remove } from "@/api/basicData/customerInquiry";
  88. import detailPage from "./detailsPage.vue";
  89. import { saveColumn, getColumn, getJson } from "@/api/saveColumn";
  90. import {columnName} from "@/enums/column-name"
  91. let columnKey=columnName[0].name
  92. console.log(columnKey)
  93. export default {
  94. name: "customerInformation",
  95. data() {
  96. return {
  97. configuration: {
  98. multipleChoices: false,
  99. multiple: false,
  100. collapseTags: false,
  101. placeholder: "请点击右边按钮选择",
  102. dicData: []
  103. },
  104. search: {},
  105. form: {},
  106. option: {},
  107. parentId: 0,
  108. dataList: [],
  109. page: {
  110. pageSize: 10,
  111. currentPage: 1,
  112. total: 0
  113. },
  114. show: true,
  115. detailData: {},
  116. loading: false
  117. };
  118. },
  119. components: { detailPage },
  120. async created() {
  121. const localData = JSON.parse(localStorage.getItem(columnKey) || null);
  122. if (localData != null) {
  123. this.option = localData;
  124. } else {
  125. const res = await getColumn({ fileName: columnKey });
  126. console.log(res.data.data);
  127. this.option =
  128. res.data.data != null
  129. ? JSON.parse(res.data.data.jsonMessage)
  130. : mainOption;
  131. localStorage.setItem(columnKey, JSON.stringify(this.option));
  132. }
  133. let _this = this;
  134. this.option.column.forEach(e => {
  135. if (e.prop == "exchangeRate") {
  136. e.formatter = function(row) {
  137. return _this.textFormat(
  138. Number(row.exchangeRate ? row.exchangeRate : 0) / 100,
  139. "0.00%"
  140. );
  141. };
  142. }
  143. if (e.prop == "creditAmount") {
  144. e.formatter = function(row) {
  145. return _this.textFormat(
  146. Number(row.creditAmount ? row.creditAmount : 0),
  147. "#,##0.00"
  148. );
  149. };
  150. }
  151. });
  152. },
  153. methods: {
  154. //删除列表后面的删除按钮触发触发(row, index, done)
  155. rowDel(row, index, done) {
  156. this.$confirm("确定删除数据?", {
  157. confirmButtonText: "确定",
  158. cancelButtonText: "取消",
  159. type: "warning"
  160. }).then(() => {
  161. remove(row.id);
  162. this.$message({
  163. type: "success",
  164. message: "删除成功!"
  165. });
  166. this.page.currentPage = 1;
  167. this.onLoad(this.page);
  168. });
  169. },
  170. //查看跳转页面
  171. beforeOpenPage(row, status) {
  172. this.detailData = {
  173. id: row.id,
  174. status: status
  175. };
  176. this.show = false;
  177. },
  178. editOpen(row, status) {
  179. this.detailData = {
  180. id: row.id,
  181. status: status
  182. };
  183. this.show = false;
  184. },
  185. //点击搜索按钮触发
  186. searchChange(params, done) {
  187. if (params.businesDate) {
  188. params.orderStartDate = params.businesDate[0];
  189. params.orderEndDate = params.businesDate[1];
  190. }
  191. delete params.businesDate;
  192. this.page.currentPage = 1;
  193. this.onLoad(this.page, params);
  194. done();
  195. },
  196. currentChange(val) {
  197. this.page.currentPage = val;
  198. },
  199. sizeChange(val) {
  200. this.page.currentPage = 1;
  201. this.page.pageSize = val;
  202. },
  203. onLoad(page, params) {
  204. this.loading = true;
  205. getList(page.currentPage, page.pageSize, params)
  206. .then(res => {
  207. this.dataList = res.data.data.records ? res.data.data.records : [];
  208. this.page.total = res.data.data.total;
  209. if (this.page.total) {
  210. this.option.height = window.innerHeight - 380;
  211. } else {
  212. this.option.height = window.innerHeight - 305;
  213. }
  214. })
  215. .finally(() => {
  216. this.loading = false;
  217. });
  218. },
  219. refreshChange() {
  220. this.onLoad(this.page, this.search);
  221. },
  222. newAdd() {
  223. this.show = false;
  224. },
  225. goBack() {
  226. this.detailData = this.$options.data().detailData;
  227. this.show = true;
  228. },
  229. saveColumn(row, column) {
  230. saveColumn({
  231. fileName: columnKey,
  232. jsonMessage: JSON.stringify(this.option)
  233. }).then(res => {
  234. if (res.data.code == 200) {
  235. this.$message.success("保存成功");
  236. localStorage.setItem(columnKey, JSON.stringify(this.option));
  237. this.$refs.crud.$refs.dialogColumn.columnBox = false;
  238. }
  239. });
  240. }
  241. }
  242. };
  243. </script>
  244. <style scoped>
  245. ::v-deep .select-component {
  246. display: flex;
  247. }
  248. </style>