修改bug

src/views/maintenance/landFreight/detailsPage.vue

@@ -0,0 +1,298 @@
+<template>
+  <div>
+    <div class="borderless">
+      <div class="customer-head">
+        <div class="customer-back">
+          <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+            @click="backToList">返回列表
+          </el-button>
+        </div>
+        <div class="add-customer-btn">
+          <el-button type="primary" size="small" @click="editCustomer" :disabled="form.status==0">
+            保存数据
+          </el-button>
+        </div>
+      </div>
+      <containerTitle title="基础资料" style="margin-top: 60px"></containerTitle>
+      <basic-container v-loading="loadingBtn">
+        <avue-form ref="form" class="trading-form" v-model="form" :option="option">
+        </avue-form>
+      </basic-container>
+      <containerTitle title="基础明细"></containerTitle>
+      <basic-container v-loading="loadingBtn">
+        <avue-crud ref="crud" :option="optionList" :data="dataList" :table-loading="loading" @saveColumn="saveColumn"
+          @resetColumn="resetColumn" :cell-style="cellStyle" @row-save="rowSave" @row-update="addUpdate">
+          <template slot="menuLeft">
+            <el-button type="primary" @click="addRow" size="small" :disabled="detailData.status == 1">新增
+            </el-button>
+          </template>
+          <template slot="feeId" slot-scope="{ row,index }">
+            <breakdown-select v-if="row.$cellEdit" v-model="row.feeId" @selectValue="value => selectValue(value,row)"
+              :configuration="breakConfiguration">
+            </breakdown-select>
+            <span v-else>{{ row.feeName }}</span>
+          </template>
+          <template slot="currency" slot-scope="{ row,index }">
+            <el-select size="small" v-if="row.$cellEdit" v-model="row.currency" placeholder="请选择" clearable>
+              <el-option v-for="item in currencyList" :key="item.id" :label="item" :value="item">
+              </el-option>
+            </el-select>
+            <span v-else>{{ row.currency}}</span>
+          </template>
+          <template slot="menu" slot-scope="{ row, index }">
+            <el-button size="small" type="text" @click="rowCell(row, index)" :disabled="form.status==0">{{
+            row.$cellEdit ? "保存" : "修改" }}</el-button>
+            <el-button size="small" type="text" @click="rowDel(row, index)" :disabled="form.status==0">删除
+            </el-button>
+          </template>
+        </avue-crud>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import { optionList } from "./js/optionList";
+import { getDetail, submit, getStoragetree, getAllgoodstype, getLazylist, itemDel } from "@/api/basicData/agreement";
+import { areaTypeTree } from "@/api/basicData/customerInformation";
+import { getCode } from "@/api/basicData/customerInquiry";
+export default {
+  name: "index",
+  data() {
+    return {
+      loadingBtn: false,
+      form: {},
+      dataList: [],
+      option: {
+        menuBtn: false,
+        labelWidth: 130,
+        column: [
+          {
+            label: "货物属性",
+            prop: "goodsProps",
+            type: "select",
+            dicUrl: "/api/blade-system/dict-biz/dictionary?code=cargo_type",
+            props: {
+              label: "dictValue",
+              value: "dictValue"
+            },
+            rules: [
+              {
+                required: true,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 12,
+          },
+          {
+            label: "出运港",
+            prop: "portOfDestination",
+            dicUrl: "/api/blade-system/region/lazy-list",
+            type: "cascader",
+            props: {
+              label: 'name',
+              value: 'code'
+            },
+            span: 12,
+          },
+          {
+            label: "备注",
+            prop: "remark",
+            type: "textarea",
+            minRows: 2,
+            span: 24,
+          }
+        ]
+      },
+      optionList: {},
+      breakConfiguration: {
+        multipleChoices: false,
+        multiple: false,
+        disabled: false,
+        searchShow: true,
+        collapseTags: false,
+        clearable: true,
+        placeholder: "请点击右边按钮选择",
+        dicData: [],
+        currencyList: []
+      },
+    };
+  },
+  props: {
+    detailData: {
+      type: Object
+    }
+  },
+  async created() {
+    this.optionList = await this.getColumnData(
+      this.getColumnName(204),
+      optionList
+    );
+    if (this.detailData.id) {
+      this.getDetail(this.detailData.id);
+    }
+    if (this.detailData.status == 1) {
+      this.option.disabled = true;
+    }
+    getCode().then(res => {
+      this.currencyList = res.data.data;
+    });
+    this.getAllWorkDicts()
+  },
+  methods: {
+    getAllWorkDicts() {
+      areaTypeTree().then(res => {
+        this.findObject(this.optionList.column, "POD").dicData = res.data.data;
+      });
+    },
+    cellStyle() {
+      return "padding:0;height:40px;";
+    },
+    selectValue(value, row) {
+      console.log(value, row)
+      if (row.feeId) {
+        row.feeName = value.cname
+      } else {
+        row.feeName = ""
+      }
+    },
+    getDetail(id) {
+      this.loadingBtn = true
+      getDetail(id)
+        .then(res => {
+          this.form = res.data.data;
+          if (res.data.data.status == 0) {
+            this.option.disabled = true
+          }
+          this.dataList = res.data.data.agreementitemsList;
+        })
+        .finally(() => {
+          this.loadingBtn = false;
+        });
+    },
+    getCorpData(row) {
+      this.form.corpName = row.cname
+    },
+    addRow() {
+      this.dataList.push({currency:'CYN',$cellEdit: true });
+    },
+    rowCell(row, index) {
+      this.$refs.crud.rowCell(row, index)
+    },
+    rowSave(form, done) {
+      done()
+    },
+    addUpdate(form, index, done, loading) {
+      done()
+    },
+    rowDel(row, index) {
+      this.$confirm("确定删除数据?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        if (row.id) {
+          itemDel({ ids: row.id }).then(res => {
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+            this.dataList.splice(index, 1);
+          });
+        } else {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          this.dataList.splice(index, 1);
+        }
+      });
+    },
+    //修改提交触发
+    editCustomer() {
+      this.$refs["form"].validate((valid, done) => {
+        done();
+        if (valid) {
+          this.loadingBtn = true;
+          submit({ ...this.form, agreementitemsList: this.dataList })
+            .then(res => {
+              this.$message.success("保存成功");
+              this.form = res.data.data.data;
+              this.dataList = res.data.data.data.agreementitemsList;
+            })
+            .finally(() => {
+              this.loadingBtn = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    async saveColumn() {
+      const inSave = await this.saveColumnData(
+        this.getColumnName(204),
+        this.optionList
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    async resetColumn() {
+      this.optionList = optionList;
+      const inSave = await this.delColumnData(
+        this.getColumnName(204),
+        optionList
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.getAllWorkDicts()
+        this.$message.success("重置成功");
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //返回列表
+    backToList() {
+      this.$emit("goBack");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.trading-form ::v-deep .el-form-item {
+  margin-bottom: 8px !important;
+}
+
+::v-deep .el-form-item__error {
+  display: none !important;
+}
+
+.img-form ::v-deep .el-form-item {
+  height: 150px;
+  line-height: 150px;
+  margin-bottom: 8px !important;
+}
+
+.img-form ::v-deep .avue-upload__icon {
+  font-size: 20px;
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+}
+
+::v-deep .el-table .cell {
+  padding: 0 2px !important;
+}
+
+::v-deep .avue-crud .el-table .el-form-item__label {
+  left: -1px;
+}
+</style>

src/views/maintenance/landFreight/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <basic-container v-show="show" class="page-crad">
+      <avue-crud ref="crud" :option="option" :data="dataList" :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"
+        @resetColumn="resetColumn" :cell-style="cellStyle" @search-criteria-switch="searchCriteriaSwitch">
+        <template slot="menuLeft">
+          <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="newAdd()">新增
+          </el-button>
+        </template>
+        <template slot-scope="{ row,index}" slot="contractNo">
+          <span style="color: #409EFF;cursor: pointer" @click.stop="editOpen(row, 2)">{{ row.contractNo }}</span>
+        </template>
+        <template slot-scope="{ row,index}" slot="corpId">
+          <span>{{ row.corpName }}</span>
+        </template>
+        <template slot-scope="{ row,index}" slot="status">
+          <el-switch v-model="row.status" active-value="0" inactive-value="1" @change="switchChange(row)">
+          </el-switch>
+        </template>
+        <template slot="corpIdSearch">
+          <crop-select v-model="search.corpId" corpType="KH" :refresh="false"></crop-select>
+        </template>
+        <template slot-scope="{ row, index }" slot="menu">
+          <el-button type="text" size="small" :disabled="row.status==0" @click.stop="rowDel(row, index)">
+            删除
+          </el-button>
+        </template>
+      </avue-crud>
+    </basic-container>
+    <details-page v-if="!show" @goBack="backToList" :detailData="detailData" />
+  </div>
+</template>
+
+<script>
+import detailsPage from "./detailsPage";
+import { option } from "./js/optionList";
+import { getList, remove, submit } from "@/api/basicData/agreement";
+import { areaTypeTree } from "@/api/basicData/customerInformation";
+export default {
+  name: "index",
+  data() {
+    return {
+      show: true,
+      loading: false,
+      form: {},
+      search: {},
+      detailData: {},
+      dataList: [],
+      selectionList: [],
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0,
+        pageSizes: [10, 50, 100, 200, 300, 400, 500]
+      },
+      option: {},
+    };
+  },
+  components: {
+    detailsPage
+  },
+  async created() {
+    this.option = await this.getColumnData(this.getColumnName(203), option);
+    this.option.height = window.innerHeight - 210;
+    this.getAllWorkDicts()
+  },
+  methods: {
+    getAllWorkDicts() {
+      areaTypeTree().then(res => {
+        this.findObject(this.option.column, "portOfDestination").dicData = res.data.data;
+        this.$refs.crud.init();
+      });
+      this.getWorkDicts("cargo_type").then(res => {
+        this.findObject(this.option.column, "goodsProps").dicData =
+          res.data.data;
+      });
+    },
+    searchCriteriaSwitch(type) {
+      if (type) {
+        this.option.height = this.option.height - 46;
+      } else {
+        this.option.height = this.option.height + 46;
+      }
+      this.$refs.crud.getTableHeight();
+    },
+    cellStyle() {
+      return "padding:0;height:40px;";
+    },
+    //点击搜索按钮触发
+    searchChange(params, done) {
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.search);
+    },
+    newAdd() {
+      this.show = false;
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      this.dataList.forEach(item => {
+        this.$refs.crud.toggleRowExpansion(item, false);
+      });
+      getList(
+        page.currentPage,
+        page.pageSize,
+        Object.assign(params, this.search)
+      )
+        .then(res => {
+          if (res.data.data.records) {
+            res.data.data.records.forEach(e => {
+              e.itemLoading = true;
+            });
+          }
+          this.dataList = res.data.data.records ? res.data.data.records : [];
+          this.page.total = res.data.data.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    editOpen(row, status) {
+      this.detailData = {
+        id: row.id,
+        status: status
+      };
+      this.show = false;
+    },
+    currentChange(val) {
+      this.page.currentPage = val;
+    },
+    sizeChange(val) {
+      this.page.currentPage = 1;
+      this.page.pageSize = val;
+    },
+    rowDel(row, index, done) {
+      this.$confirm("确定删除数据?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        remove(row.id).then(res => {
+          if (res.data.code == 200) {
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+            this.onLoad(this.page, this.search);
+          }
+        });
+      });
+    },
+    switchChange(row) {
+      this.$confirm("确定要" + row.stauts == 0 ? "开启" : "停用" + row.corpName + "吗?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        submit({ ...row })
+          .then(res => {
+            this.$message.success("修改成功");
+          })
+          .finally(() => {
+            this.onLoad(this.page, this.search);
+          });
+      });
+
+    },
+    async saveColumn() {
+      const inSave = await this.saveColumnData(
+        this.getColumnName(203),
+        this.option
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    async resetColumn() {
+      this.option = option;
+      const inSave = await this.delColumnData(this.getColumnName(203), option);
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.getAllWorkDicts()
+        this.$message.success("重置成功");
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //返回列表
+    backToList() {
+      this.detailData = this.$options.data().detailData;
+      this.show = true;
+      this.onLoad(this.page, this.search);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-crad ::v-deep .basic-container__card {
+  height: 94.2vh;
+}
+</style>

src/views/maintenance/landFreight/js/optionList.js

@@ -0,0 +1,121 @@
+import { number } from "echarts"
+
+export const option = {
+  searchShow: true,
+  searchMenuSpan: 8,
+  align: "center",
+  searchSpan: 8,
+  tip: false,
+  border: true,
+  index: true,
+  addBtn: false,
+  viewBtn: false,
+  editBtn: false,
+  delBtn: false,
+  menuWidth: 70,
+  searchIcon: true,
+  searchIndex: 2,
+  column: [
+    {
+      label: "货物属性",
+      prop: "goodsProps",
+      type: "select",
+      props: {
+        label: "dictValue",
+        value: "dictKey"
+      },
+      dicdata:[],
+      overHidden: true,
+      search: true
+    },
+    {
+      label: "出运港",
+      prop: "portOfDestination",
+      dicdata:[],
+      type: "cascader",
+      props: {
+        label: 'name',
+        value: 'code'
+      },
+      overHidden: true,
+      search: true
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      overHidden: true,
+    }
+  ]
+}
+export const optionList = {
+  align: "center",
+  addBtn: false,
+  refreshBtn: false,
+  editBtn: false,
+  delBtn: false,
+  border: true,
+  menuWidth: 120,
+  stripe: true,
+  column: [
+    {
+      label: "起运地",
+      prop: "POD",
+      overHidden: true,
+      dicData:[],
+      type: "cascader",
+      props: {
+        label: 'name',
+        value: 'code'
+      },
+      cell: true,
+      width: 350,
+    },
+    {
+      label: "费用名称",
+      prop: "feeId",
+      overHidden: true,
+      width: 250,
+    },
+    {
+      label: "币别",
+      prop: "currency",
+      overHidden: true,
+      width: 120,
+    },
+    {
+      label: "20GP",
+      prop: "20GP",
+      overHidden: true,
+      cell: true,
+      width: 120,
+    },
+    {
+      label: "40GP",
+      prop: "40GP",
+      overHidden: true,
+      cell: true,
+      width: 120,
+    },
+    {
+      label: "40HC",
+      prop: "40HC",
+      overHidden: true,
+      cell: true,
+      width: 120,
+    },
+    {
+      label: "45GP",
+      prop: "45GP",
+      overHidden: true,
+      cell: true,
+      width: 120,
+    },
+    {
+      label: "PALLET",
+      prop: "pallet",
+      overHidden: true,
+      cell: true,
+      width: 120,
+    }
+  ]
+}

src/views/maintenance/portSurcharge/detailsPage.vue

@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <div class="borderless">
+      <div class="customer-head">
+        <div class="customer-back">
+          <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+            @click="backToList">返回列表
+          </el-button>
+        </div>
+        <div class="add-customer-btn">
+          <el-button type="primary" size="small" @click="editCustomer" :disabled="form.status==0">
+            保存数据
+          </el-button>
+        </div>
+      </div>
+      <containerTitle title="基础资料" style="margin-top: 60px"></containerTitle>
+      <basic-container v-loading="loadingBtn">
+        <avue-form ref="form" class="trading-form" v-model="form" :option="option">
+        </avue-form>
+      </basic-container>
+      <containerTitle title="基础明细"></containerTitle>
+      <basic-container v-loading="loadingBtn">
+        <el-tabs>
+          <el-tab-pane label="运费">
+            <avue-crud ref="crud" :option="optionList" :data="dataList" :table-loading="loading"
+              @saveColumn="saveColumn" @resetColumn="resetColumn" :cell-style="cellStyle" @row-save="rowSave"
+              @row-update="addUpdate">
+              <template slot="menuLeft">
+                <el-button type="primary" @click="addRow" size="small" :disabled="detailData.status == 1">新增
+                </el-button>
+              </template>
+              <template slot="feeId" slot-scope="{ row,index }">
+                <breakdown-select v-if="row.$cellEdit" v-model="row.feeId"
+                  @selectValue="value => selectValue(value,row)" :configuration="breakConfiguration">
+                </breakdown-select>
+                <span v-else>{{ row.feeName }}</span>
+              </template>
+              <template slot="currency" slot-scope="{ row,index }">
+                <el-select size="small" v-if="row.$cellEdit" v-model="row.currency" placeholder="请选择" clearable>
+                  <el-option v-for="item in currencyList" :key="item.id" :label="item" :value="item">
+                  </el-option>
+                </el-select>
+                <span v-else>{{ row.currency}}</span>
+              </template>
+              <template slot="menu" slot-scope="{ row, index }">
+                <el-button size="small" type="text" @click="rowCell(row, index)" :disabled="form.status==0">{{
+                row.$cellEdit ? "保存" : "修改" }}</el-button>
+                <el-button size="small" type="text" @click="rowDel(row, index)" :disabled="form.status==0">删除
+                </el-button>
+              </template>
+            </avue-crud>
+          </el-tab-pane>
+          <el-tab-pane label="杂费">
+            <avue-crud ref="crud2" :option="optionList2" :data="dataList2" :table-loading="loading"
+              @saveColumn="saveColumn2" @resetColumn="resetColumn2" :cell-style="cellStyle" @row-save="rowSave2"
+              @row-update="addUpdate2">
+              <template slot="menuLeft">
+                <el-button type="primary" @click="addRow2" size="small" :disabled="detailData.status == 1">新增
+                </el-button>
+              </template>
+              <template slot="feeId" slot-scope="{ row,index }">
+                <breakdown-select v-if="row.$cellEdit" v-model="row.feeId"
+                  @selectValue="value => selectValue(value,row)" :configuration="breakConfiguration">
+                </breakdown-select>
+                <span v-else>{{ row.feeName }}</span>
+              </template>
+              <template slot="currency" slot-scope="{ row,index }">
+                <el-select size="small" v-if="row.$cellEdit" v-model="row.currency" placeholder="请选择" clearable>
+                  <el-option v-for="item in currencyList" :key="item.id" :label="item" :value="item">
+                  </el-option>
+                </el-select>
+                <span v-else>{{ row.currency}}</span>
+              </template>
+              <template slot="menu" slot-scope="{ row, index }">
+                <el-button size="small" type="text" @click="rowCell2(row, index)" :disabled="form.status==0">{{
+                row.$cellEdit ? "保存" : "修改" }}</el-button>
+                <el-button size="small" type="text" @click="rowDel2(row, index)" :disabled="form.status==0">删除
+                </el-button>
+              </template>
+            </avue-crud>
+          </el-tab-pane>
+        </el-tabs>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import { optionList, optionList2 } from "./js/optionList";
+import { getDetail, submit, getStoragetree, getAllgoodstype, getLazylist, itemDel } from "@/api/basicData/agreement";
+import { areaTypeTree } from "@/api/basicData/customerInformation";
+import { getCode } from "@/api/basicData/customerInquiry";
+export default {
+  name: "index",
+  data() {
+    return {
+      loadingBtn: false,
+      form: {},
+      dataList: [],
+      dataList2: [],
+      option: {
+        menuBtn: false,
+        labelWidth: 130,
+        column: [
+          {
+            label: "货物属性",
+            prop: "goodsProps",
+            type: "select",
+            dicUrl: "/api/blade-system/dict-biz/dictionary?code=cargo_type",
+            props: {
+              label: "dictValue",
+              value: "dictValue"
+            },
+            rules: [
+              {
+                required: true,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 12,
+          },
+          {
+            label: "起运港",
+            prop: "portOfDestination",
+            dicUrl: "/api/blade-system/region/lazy-list",
+            type: "cascader",
+            props: {
+              label: 'name',
+              value: 'code'
+            },
+            span: 12,
+          },
+          {
+            label: "备注",
+            prop: "remark",
+            type: "textarea",
+            minRows: 2,
+            span: 24,
+          }
+        ]
+      },
+      optionList: {},
+      optionList2: {},
+      breakConfiguration: {
+        multipleChoices: false,
+        multiple: false,
+        disabled: false,
+        searchShow: true,
+        collapseTags: false,
+        clearable: true,
+        placeholder: "请点击右边按钮选择",
+        dicData: []
+      },
+      currencyList: []
+    };
+  },
+  props: {
+    detailData: {
+      type: Object
+    }
+  },
+  async created() {
+    this.optionList = await this.getColumnData(
+      this.getColumnName(206),
+      optionList
+    );
+    this.optionList2 = await this.getColumnData(
+      this.getColumnName(207),
+      optionList2
+    );
+    if (this.detailData.id) {
+      this.getDetail(this.detailData.id);
+    }
+    if (this.detailData.status == 1) {
+      this.option.disabled = true;
+    }
+    getCode().then(res => {
+      this.currencyList = res.data.data;
+    });
+  },
+  methods: {
+    cellStyle() {
+      return "padding:0;height:40px;";
+    },
+    selectValue(value, row) {
+      console.log(value, row)
+      if (row.feeId) {
+        row.feeName = value.cname
+      } else {
+        row.feeName = ""
+      }
+    },
+    getDetail(id) {
+      this.loadingBtn = true
+      getDetail(id)
+        .then(res => {
+          this.form = res.data.data;
+          if (res.data.data.status == 0) {
+            this.option.disabled = true
+          }
+          this.dataList = res.data.data.agreementitemsList;
+        })
+        .finally(() => {
+          this.loadingBtn = false;
+        });
+    },
+    getCorpData(row) {
+      this.form.corpName = row.cname
+    },
+    addRow() {
+      this.dataList.push({ currency: 'CYN', $cellEdit: true });
+    },
+    rowCell(row, index) {
+      this.$refs.crud.rowCell(row, index)
+    },
+    rowSave(form, done) {
+      done()
+    },
+    addUpdate(form, index, done, loading) {
+      done()
+    },
+    rowDel(row, index) {
+      this.$confirm("确定删除数据?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        if (row.id) {
+          itemDel({ ids: row.id }).then(res => {
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+            this.dataList.splice(index, 1);
+          });
+        } else {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          this.dataList.splice(index, 1);
+        }
+      });
+    },
+    addRow2() {
+      this.dataList2.push({ currency: 'CYN', $cellEdit: true });
+    },
+    rowCell2(row, index) {
+      this.$refs.crud2.rowCell(row, index)
+    },
+    rowSave2(form, done) {
+      done()
+    },
+    addUpdate2(form, index, done, loading) {
+      done()
+    },
+    rowDel2(row, index) {
+      this.$confirm("确定删除数据?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        if (row.id) {
+          itemDel({ ids: row.id }).then(res => {
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+            this.dataList2.splice(index, 1);
+          });
+        } else {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          this.dataList2.splice(index, 1);
+        }
+      });
+    },
+    //修改提交触发
+    editCustomer() {
+      this.$refs["form"].validate((valid, done) => {
+        done();
+        if (valid) {
+          this.loadingBtn = true;
+          submit({ ...this.form, agreementitemsList: this.dataList })
+            .then(res => {
+              this.$message.success("保存成功");
+              this.form = res.data.data.data;
+              this.dataList = res.data.data.data.agreementitemsList;
+            })
+            .finally(() => {
+              this.loadingBtn = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    async saveColumn() {
+      const inSave = await this.saveColumnData(
+        this.getColumnName(206),
+        this.optionList
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    async resetColumn() {
+      this.optionList = optionList;
+      const inSave = await this.delColumnData(
+        this.getColumnName(206),
+        optionList
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("重置成功");
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    async saveColumn2() {
+      const inSave = await this.saveColumnData(
+        this.getColumnName(207),
+        this.optionList2
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs.crud2.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    async resetColumn2() {
+      this.optionList2 = optionList2;
+      const inSave = await this.delColumnData(
+        this.getColumnName(207),
+        optionList2
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("重置成功");
+        this.$refs.crud2.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //返回列表
+    backToList() {
+      this.$emit("goBack");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.trading-form ::v-deep .el-form-item {
+  margin-bottom: 8px !important;
+}
+
+::v-deep .el-form-item__error {
+  display: none !important;
+}
+
+.img-form ::v-deep .el-form-item {
+  height: 150px;
+  line-height: 150px;
+  margin-bottom: 8px !important;
+}
+
+.img-form ::v-deep .avue-upload__icon {
+  font-size: 20px;
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+}
+
+::v-deep .el-table .cell {
+  padding: 0 2px !important;
+}
+
+::v-deep .avue-crud .el-table .el-form-item__label {
+  left: -1px;
+}
+</style>

src/views/maintenance/portSurcharge/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <basic-container v-show="show" class="page-crad">
+      <avue-crud ref="crud" :option="option" :data="dataList" :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"
+        @resetColumn="resetColumn" :cell-style="cellStyle" @search-criteria-switch="searchCriteriaSwitch">
+        <template slot="menuLeft">
+          <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="newAdd()">新增
+          </el-button>
+        </template>
+        <template slot-scope="{ row,index}" slot="contractNo">
+          <span style="color: #409EFF;cursor: pointer" @click.stop="editOpen(row, 2)">{{ row.contractNo }}</span>
+        </template>
+        <template slot-scope="{ row,index}" slot="corpId">
+          <span>{{ row.corpName }}</span>
+        </template>
+        <template slot-scope="{ row,index}" slot="status">
+          <el-switch v-model="row.status" active-value="0" inactive-value="1" @change="switchChange(row)">
+          </el-switch>
+        </template>
+        <template slot="corpIdSearch">
+          <crop-select v-model="search.corpId" corpType="KH" :refresh="false"></crop-select>
+        </template>
+        <template slot-scope="{ row, index }" slot="menu">
+          <el-button type="text" size="small" :disabled="row.status==0" @click.stop="rowDel(row, index)">
+            删除
+          </el-button>
+        </template>
+      </avue-crud>
+    </basic-container>
+    <details-page v-if="!show" @goBack="backToList" :detailData="detailData" />
+  </div>
+</template>
+
+<script>
+import detailsPage from "./detailsPage";
+import { option } from "./js/optionList";
+import { getList, remove, submit } from "@/api/basicData/agreement";
+import {areaTypeTree} from "@/api/basicData/customerInformation";
+export default {
+  name: "index",
+  data() {
+    return {
+      show: true,
+      loading: false,
+      form: {},
+      search: {},
+      detailData: {},
+      dataList: [],
+      selectionList: [],
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0,
+        pageSizes: [10, 50, 100, 200, 300, 400, 500]
+      },
+      option: {},
+    };
+  },
+  components: {
+    detailsPage
+  },
+  async created() {
+    this.option = await this.getColumnData(this.getColumnName(205), option);
+    this.getAllWorkDicts()
+    this.option.height = window.innerHeight - 210;
+  },
+  methods: {
+    getAllWorkDicts() {
+      areaTypeTree().then(res => {
+        this.findObject(this.option.column, "portOfDestination").dicData = res.data.data;
+        this.$refs.crud.init();
+      });
+      this.getWorkDicts("cargo_type").then(res => {
+        this.findObject(this.option.column, "goodsProps").dicData =
+          res.data.data;
+      });
+    },
+    searchCriteriaSwitch(type) {
+      if (type) {
+        this.option.height = this.option.height - 46;
+      } else {
+        this.option.height = this.option.height + 46;
+      }
+      this.$refs.crud.getTableHeight();
+    },
+    cellStyle() {
+      return "padding:0;height:40px;";
+    },
+    //点击搜索按钮触发
+    searchChange(params, done) {
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.search);
+    },
+    newAdd() {
+      this.show = false;
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      this.dataList.forEach(item => {
+        this.$refs.crud.toggleRowExpansion(item, false);
+      });
+      getList(
+        page.currentPage,
+        page.pageSize,
+        Object.assign(params, this.search)
+      )
+        .then(res => {
+          if (res.data.data.records) {
+            res.data.data.records.forEach(e => {
+              e.itemLoading = true;
+            });
+          }
+          this.dataList = res.data.data.records ? res.data.data.records : [];
+          this.page.total = res.data.data.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    editOpen(row, status) {
+      this.detailData = {
+        id: row.id,
+        status: status
+      };
+      this.show = false;
+    },
+    currentChange(val) {
+      this.page.currentPage = val;
+    },
+    sizeChange(val) {
+      this.page.currentPage = 1;
+      this.page.pageSize = val;
+    },
+    rowDel(row, index, done) {
+      this.$confirm("确定删除数据?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        remove(row.id).then(res => {
+          if (res.data.code == 200) {
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+            this.onLoad(this.page, this.search);
+          }
+        });
+      });
+    },
+    switchChange(row) {
+      this.$confirm("确定要"+row.stauts==0?"开启":"停用"+row.corpName+"吗?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        submit({ ...row })
+          .then(res => {
+            this.$message.success("修改成功");
+          })
+          .finally(() => {
+            this.onLoad(this.page, this.search);
+          });
+      });
+
+    },
+    async saveColumn() {
+      const inSave = await this.saveColumnData(
+        this.getColumnName(205),
+        this.option
+      );
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    async resetColumn() {
+      this.option = option;
+      const inSave = await this.delColumnData(this.getColumnName(205), option);
+      if (inSave) {
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
+        this.$message.success("重置成功");
+        this.$refs.crud.$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //返回列表
+    backToList() {
+      this.detailData = this.$options.data().detailData;
+      this.show = true;
+      this.onLoad(this.page, this.search);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-crad ::v-deep .basic-container__card {
+  height: 94.2vh;
+}
+</style>

src/views/maintenance/portSurcharge/js/optionList.js

@@ -0,0 +1,118 @@
+import { number } from "echarts"
+
+export const option = {
+  searchShow: true,
+  searchMenuSpan: 8,
+  align: "center",
+  searchSpan: 8,
+  tip: false,
+  border: true,
+  index: true,
+  addBtn: false,
+  viewBtn: false,
+  editBtn: false,
+  delBtn: false,
+  menuWidth: 70,
+  searchIcon: true,
+  searchIndex: 2,
+  column: [
+    {
+      label: "货物属性",
+      prop: "goodsProps",
+      type: "select",
+      props: {
+        label: "dictValue",
+        value: "dictKey"
+      },
+      dicdata:[],
+      overHidden: true,
+      search: true
+    },
+    {
+      label: "起运港",
+      prop: "portOfDestination",
+      dicdata:[],
+      type: "cascader",
+      props: {
+        label: 'name',
+        value: 'code'
+      },
+      overHidden: true,
+      search: true
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      overHidden: true,
+    }
+  ]
+}
+export const optionList = {
+  align: "center",
+  addBtn: false,
+  refreshBtn: false,
+  editBtn: false,
+  delBtn: false,
+  border: true,
+  menuWidth: 120,
+  stripe: true,
+  column: [
+    {
+      label: "费用名称",
+      prop: "feeId",
+      overHidden: true
+    },
+    {
+      label: "币别",
+      prop: "currency",
+      overHidden: true,
+    },
+    {
+      label: "20GP",
+      prop: "20GP",
+      overHidden: true,
+      cell: true
+    },
+    {
+      label: "40GP",
+      prop: "40GP",
+      overHidden: true,
+      cell: true
+    },
+    {
+      label: "40HC",
+      prop: "40HC",
+      overHidden: true,
+      cell: true
+    }
+  ]
+}
+export const optionList2 = {
+  align: "center",
+  addBtn: false,
+  refreshBtn: false,
+  editBtn: false,
+  delBtn: false,
+  border: true,
+  menuWidth: 120,
+  stripe: true,
+  column: [
+    {
+      label: "费用名称",
+      prop: "feeId",
+      overHidden: true
+    },
+    {
+      label: "币别",
+      prop: "currency",
+      overHidden: true,
+      width: 120,
+    },
+    {
+      label: "票",
+      prop: "ticket",
+      overHidden: true,
+      cell: true
+    },
+  ]
+}