|
|
@@ -1,188 +1,210 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-dialog title="提取运价" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
|
|
|
- <avue-crud v-if="dialogVisible" :option="option" :table-loading="loading" :data="data" ref="crud"
|
|
|
- @current-row-change="handleCurrentRowChange" id="out-table" :header-cell-class-name="headerClassName"
|
|
|
- @on-load="onLoad">
|
|
|
- </avue-crud>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
|
|
- <el-button type="primary" @click="submit" size="mini">导 入</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <el-dialog title="合并客户" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
|
|
|
+ <avue-crud
|
|
|
+ v-if="dialogVisible"
|
|
|
+ :option="option"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ :page.sync="page"
|
|
|
+ :search.sync="query"
|
|
|
+ ref="crud"
|
|
|
+ @current-row-change="handleCurrentRowChange"
|
|
|
+ id="out-table"
|
|
|
+ :header-cell-class-name="headerClassName"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @on-load="onLoad"
|
|
|
+ >
|
|
|
+ </avue-crud>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit" size="mini">合 并</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { MktSlotQuotation } from "@/api/iosBasicData/bills";
|
|
|
+import { BcorpsList } from "@/api/iosBasicData/bcorps";
|
|
|
+import { status } from "nprogress";
|
|
|
export default {
|
|
|
- props: {
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ quotationObj: null,
|
|
|
+ ids: null,
|
|
|
+ data: [],
|
|
|
+ query: {},
|
|
|
+ dialogVisible: false,
|
|
|
+ loading: false,
|
|
|
+ page: {
|
|
|
+ pageSize: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
|
|
|
+ },
|
|
|
+ option: {
|
|
|
+ height: 500,
|
|
|
+ calcHeight: 30,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ addBtn: false,
|
|
|
+ viewBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ editBtn: false,
|
|
|
+ menu: false,
|
|
|
+ header: false,
|
|
|
+ searchSpan: 8,
|
|
|
+ searchIndex: 2,
|
|
|
+ searchMenuSpan: 16,
|
|
|
+ highlightCurrentRow: true,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "客户编号",
|
|
|
+ prop: "code",
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "客户简称",
|
|
|
+ prop: "shortName",
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "客户名称",
|
|
|
+ prop: "cnName",
|
|
|
+ search: true,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "英文名称",
|
|
|
+ prop: "enName",
|
|
|
+ overHidden: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ // this.option = await this.getColumnData(this.getColumnName(309.6), this.optionBack);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openDialog(val) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.quotationObj = null;
|
|
|
+ this.page.pageSize = 1;
|
|
|
+ this.page.currentPage = 20;
|
|
|
+ this.page.total = 0;
|
|
|
+ this.query = {};
|
|
|
+ // this.ids = ids
|
|
|
+ // let obj = {
|
|
|
+ // ...val
|
|
|
+ // }
|
|
|
+ // this.loading = true
|
|
|
+ // MktSlotQuotation(obj).then(res => {
|
|
|
+ // this.data = res.data.data
|
|
|
+ // }).finally(() => {
|
|
|
+ // this.loading = false
|
|
|
+ // })
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- quotationObj: null,
|
|
|
- ids: null,
|
|
|
- data: [],
|
|
|
- dialogVisible: false,
|
|
|
- loading: false,
|
|
|
- option: {
|
|
|
- height: 500,
|
|
|
- calcHeight: 30,
|
|
|
- border: true,
|
|
|
- index: true,
|
|
|
- addBtn: false,
|
|
|
- viewBtn: false,
|
|
|
- delBtn: false,
|
|
|
- editBtn: false,
|
|
|
- menu: false,
|
|
|
- header: false,
|
|
|
- highlightCurrentRow: true,
|
|
|
- column: [
|
|
|
- {
|
|
|
- label: "船公司",
|
|
|
- prop: "actualShippingCompanyCname",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "开船日期",
|
|
|
- prop: "etd",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "起运港",
|
|
|
- prop: "polEnName",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "目的港",
|
|
|
- prop: "podEnName",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "20GP",
|
|
|
- prop: "gp20",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "40GP",
|
|
|
- prop: "gp40",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "40HC",
|
|
|
- prop: "hc40",
|
|
|
- width: "160",
|
|
|
- overHidden: true,
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
+ handleCurrentRowChange(val) {
|
|
|
+ this.quotationObj = val;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.quotationObj) {
|
|
|
+ return this.$message.error("请选择数据");
|
|
|
+ }
|
|
|
+ this.$emit("importData", this.quotationObj);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ searchReset() {
|
|
|
+ this.query = {};
|
|
|
+ this.onLoad(this.page);
|
|
|
+ },
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.query = params;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.onLoad(this.page, this.query);
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.page.currentPage = currentPage;
|
|
|
+ },
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.page.pageSize = pageSize;
|
|
|
+ },
|
|
|
+ onLoad(page, params = {}) {
|
|
|
+ let obj={
|
|
|
+ ...Object.assign(params, this.query),
|
|
|
+ status:0
|
|
|
}
|
|
|
+ this.loading = true;
|
|
|
+ BcorpsList(page.currentPage, page.pageSize,obj)
|
|
|
+ .then(res => {
|
|
|
+ this.page.total = res.data.data.total;
|
|
|
+ this.data = res.data.data.records;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
},
|
|
|
- async created() {
|
|
|
- // this.option = await this.getColumnData(this.getColumnName(309.6), this.optionBack);
|
|
|
+ //自定义列保存
|
|
|
+ async saveColumn(ref, option, optionBack, code) {
|
|
|
+ /**
|
|
|
+ * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
|
|
|
+ * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
|
|
|
+ * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
|
|
|
+ */
|
|
|
+ const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ //关闭窗口
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ this.searchReset();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //自定义列重置
|
|
|
+ async resetColumn(ref, option, optionBack, code) {
|
|
|
+ this[option] = this[optionBack];
|
|
|
+ const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- openDialog(val, ids) {
|
|
|
- this.dialogVisible = true
|
|
|
- this.quotationObj = null
|
|
|
- this.ids = ids
|
|
|
- let obj = {
|
|
|
- ...val
|
|
|
- }
|
|
|
- this.loading = true
|
|
|
- MktSlotQuotation(obj).then(res => {
|
|
|
- this.data = res.data.data
|
|
|
- }).finally(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- },
|
|
|
- handleCurrentRowChange(val) {
|
|
|
- this.quotationObj = val
|
|
|
- },
|
|
|
- submit() {
|
|
|
- if (!this.quotationObj) {
|
|
|
- return this.$message.error("请选择数据");
|
|
|
- }
|
|
|
- this.$emit('importData', this.quotationObj)
|
|
|
- // this.$message.success("操作成功");
|
|
|
- this.dialogVisible = false;
|
|
|
- // const obj = {
|
|
|
- // billsIds: this.ids,
|
|
|
- // quotationObj: this.quotationObj
|
|
|
- // }
|
|
|
- // const loading = this.$loading({
|
|
|
- // lock: true,
|
|
|
- // text: '加载中',
|
|
|
- // spinner: 'el-icon-loading',
|
|
|
- // background: 'rgba(255,255,255,0.7)'
|
|
|
- // });
|
|
|
- // quotationImportBatch(obj).then(res => {
|
|
|
- // this.$message.success("操作成功");
|
|
|
- // this.dialogVisible = false;
|
|
|
- // this.$emit('refreshPage')
|
|
|
- // }).finally(() => {
|
|
|
- // loading.close();
|
|
|
- // })
|
|
|
- },
|
|
|
- //自定义列保存
|
|
|
- async saveColumn(ref, option, optionBack, code) {
|
|
|
- /**
|
|
|
- * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
|
|
|
- * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
|
|
|
- * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
|
|
|
- */
|
|
|
- const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
|
|
|
- if (inSave) {
|
|
|
- this.$message.success("保存成功");
|
|
|
- //关闭窗口
|
|
|
- this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
- this.searchReset()
|
|
|
- }
|
|
|
- },
|
|
|
- //自定义列重置
|
|
|
- async resetColumn(ref, option, optionBack, code) {
|
|
|
- this[option] = this[optionBack];
|
|
|
- const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
|
|
|
- if (inSave) {
|
|
|
- this.$message.success("重置成功");
|
|
|
- this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 更改表格颜色
|
|
|
- headerClassName(tab) {
|
|
|
- //颜色间隔
|
|
|
- let back = ""
|
|
|
- if (tab.columnIndex >= 0 && tab.column.level === 1) {
|
|
|
- if (tab.columnIndex % 2 === 0) {
|
|
|
- back = "back-one"
|
|
|
- } else if (tab.columnIndex % 2 === 1) {
|
|
|
- back = "back-two"
|
|
|
- }
|
|
|
- }
|
|
|
- return back;
|
|
|
- },
|
|
|
|
|
|
+ // 更改表格颜色
|
|
|
+ headerClassName(tab) {
|
|
|
+ //颜色间隔
|
|
|
+ let back = "";
|
|
|
+ if (tab.columnIndex >= 0 && tab.column.level === 1) {
|
|
|
+ if (tab.columnIndex % 2 === 0) {
|
|
|
+ back = "back-one";
|
|
|
+ } else if (tab.columnIndex % 2 === 1) {
|
|
|
+ back = "back-two";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return back;
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-::v-deep#out-table .back-one {
|
|
|
- background: #ecf5ff !important;
|
|
|
- text-align: center;
|
|
|
- padding: 4px 0;
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep #out-table .back-one {
|
|
|
+ background: #ecf5ff !important;
|
|
|
+ text-align: center;
|
|
|
+ padding: 4px 0;
|
|
|
}
|
|
|
|
|
|
-::v-deep#out-table .back-two {
|
|
|
- background: #ecf5ff !important;
|
|
|
- text-align: center;
|
|
|
- padding: 4px 0;
|
|
|
+::v-deep #out-table .back-two {
|
|
|
+ background: #ecf5ff !important;
|
|
|
+ text-align: center;
|
|
|
+ padding: 4px 0;
|
|
|
+}
|
|
|
+::v-deep .el-dialog .el-dialog__body {
|
|
|
+ padding: 0px 10px !important;
|
|
|
}
|
|
|
</style>
|