123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- <template>
- <div>
- <basic-container v-if="show">
- <avue-crud
- ref="crud"
- :option="option"
- :data="dataList"
- v-model="form"
- :page.sync="page"
- :search.sync="search"
- @search-change="searchChange"
- @current-change="currentChange"
- @size-change="sizeChange"
- @refresh-change="refreshChange"
- @on-load="onLoad"
- :table-loading="loading"
- @saveColumn="saveColumn"
- >
- <template slot="portOfLoadSearch">
- <port-info v-model="search.portOfLoad" />
- </template>
- <template slot="portOfDestinationSearch">
- <port-info v-model="search.portOfDestination" />
- </template>
- <template slot="businesDateSearch">
- <el-date-picker
- v-model="search.businesDate"
- type="daterange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- format="yyyy-MM-dd"
- value-format="yyyy-MM-dd HH:mm:ss"
- :default-time="['00:00:00', '23:59:59']"
- >
- </el-date-picker>
- </template>
- <template slot="menuLeft">
- <el-button
- type="primary"
- icon="el-icon-plus"
- size="small"
- @click.stop="newAdd()"
- >新单</el-button
- >
- <el-button type="success" size="small" disabled>复制新单</el-button>
- <el-button type="info" size="small">报表</el-button>
- </template>
- <template slot="corpIdSearch">
- <select-component
- v-model="search.corpId"
- :configuration="configuration"
- ></select-component>
- </template>
- <template slot-scope="scope" slot="corpId">
- {{ scope.row.corpsName }}
- </template>
- <template slot-scope="scope" slot="menu">
- <el-button
- type="text"
- icon="el-icon-view"
- size="small"
- @click.stop="beforeOpenPage(scope.row, 1)"
- >查看
- </el-button>
- <el-button
- type="text"
- icon="el-icon-edit"
- size="small"
- @click.stop="editOpen(scope.row, 2)"
- >编辑
- </el-button>
- <el-button
- type="text"
- icon="el-icon-delete"
- size="small"
- @click.stop="rowDel(scope.row, scope.index)"
- >删除
- </el-button>
- </template>
- </avue-crud>
- </basic-container>
- <detail-page @goBack="goBack" :detailData="detailData" v-else></detail-page>
- </div>
- </template>
- <script>
- import mainOption from "./config/mainList.json";
- import { getList, remove } from "@/api/basicData/customerInquiry";
- import detailPage from "./detailsPage.vue";
- import { saveColumn, getColumn, getJson } from "@/api/saveColumn";
- import {columnName} from "@/enums/column-name"
- let columnKey=columnName[0].name
- console.log(columnKey)
- export default {
- name: "customerInformation",
- data() {
- return {
- configuration: {
- multipleChoices: false,
- multiple: false,
- collapseTags: false,
- placeholder: "请点击右边按钮选择",
- dicData: []
- },
- search: {},
- form: {},
- option: {},
- parentId: 0,
- dataList: [],
- page: {
- pageSize: 10,
- currentPage: 1,
- total: 0
- },
- show: true,
- detailData: {},
- loading: false
- };
- },
- components: { detailPage },
- async created() {
- const localData = JSON.parse(localStorage.getItem(columnKey) || null);
- if (localData != null) {
- this.option = localData;
- } else {
- const res = await getColumn({ fileName: columnKey });
- console.log(res.data.data);
- this.option =
- res.data.data != null
- ? JSON.parse(res.data.data.jsonMessage)
- : mainOption;
- localStorage.setItem(columnKey, JSON.stringify(this.option));
- }
- let _this = this;
- this.option.column.forEach(e => {
- if (e.prop == "exchangeRate") {
- e.formatter = function(row) {
- return _this.textFormat(
- Number(row.exchangeRate ? row.exchangeRate : 0) / 100,
- "0.00%"
- );
- };
- }
- if (e.prop == "creditAmount") {
- e.formatter = function(row) {
- return _this.textFormat(
- Number(row.creditAmount ? row.creditAmount : 0),
- "#,##0.00"
- );
- };
- }
- });
- },
- methods: {
- //删除列表后面的删除按钮触发触发(row, index, done)
- rowDel(row, index, done) {
- this.$confirm("确定删除数据?", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- remove(row.id);
- this.$message({
- type: "success",
- message: "删除成功!"
- });
- this.page.currentPage = 1;
- this.onLoad(this.page);
- });
- },
- //查看跳转页面
- beforeOpenPage(row, status) {
- this.detailData = {
- id: row.id,
- status: status
- };
- this.show = false;
- },
- editOpen(row, status) {
- this.detailData = {
- id: row.id,
- status: status
- };
- this.show = false;
- },
- //点击搜索按钮触发
- searchChange(params, done) {
- if (params.businesDate) {
- params.orderStartDate = params.businesDate[0];
- params.orderEndDate = params.businesDate[1];
- }
- delete params.businesDate;
- this.page.currentPage = 1;
- this.onLoad(this.page, params);
- done();
- },
- currentChange(val) {
- this.page.currentPage = val;
- },
- sizeChange(val) {
- this.page.currentPage = 1;
- this.page.pageSize = val;
- },
- onLoad(page, params) {
- this.loading = true;
- getList(page.currentPage, page.pageSize, params)
- .then(res => {
- this.dataList = res.data.data.records ? res.data.data.records : [];
- this.page.total = res.data.data.total;
- if (this.page.total) {
- this.option.height = window.innerHeight - 380;
- } else {
- this.option.height = window.innerHeight - 305;
- }
- })
- .finally(() => {
- this.loading = false;
- });
- },
- refreshChange() {
- this.onLoad(this.page, this.search);
- },
- newAdd() {
- this.show = false;
- },
- goBack() {
- this.detailData = this.$options.data().detailData;
- this.show = true;
- },
- saveColumn(row, column) {
- saveColumn({
- fileName: columnKey,
- jsonMessage: JSON.stringify(this.option)
- }).then(res => {
- if (res.data.code == 200) {
- this.$message.success("保存成功");
- localStorage.setItem(columnKey, JSON.stringify(this.option));
- this.$refs.crud.$refs.dialogColumn.columnBox = false;
- }
- });
- }
- }
- };
- </script>
- <style scoped>
- ::v-deep .select-component {
- display: flex;
- }
- </style>
|