|
|
@@ -0,0 +1,463 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <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="goBack()">返回列表 </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="add-customer-btn">
|
|
|
+ <el-button class="el-button--small-yh" style="margin-left: 6px;" type="primary" size="small" v-if="editButton" @click="inEdit"
|
|
|
+ >编 辑
|
|
|
+ </el-button>
|
|
|
+ <el-button class="el-button--small-yh" v-else style="margin-left: 6px;" type="primary" size="small" :disabled="editDisabled" @click="submit"
|
|
|
+ >保 存
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 50px">
|
|
|
+ <trade-card title="基本信息">
|
|
|
+ <avue-form :option="optionForm" v-model="form" ref="form">
|
|
|
+ <tempalte slot="polCnName">
|
|
|
+ <dic-select
|
|
|
+ v-model="form.polCnName"
|
|
|
+ placeholder="港口"
|
|
|
+ label="cnName"
|
|
|
+ res="records"
|
|
|
+ :disabled="editDisabled"
|
|
|
+ url="/blade-los/bports/list?status=0¤t=1&size=5"
|
|
|
+ :filterable="true"
|
|
|
+ :remote="true"
|
|
|
+ dataName="cnName"
|
|
|
+ @selectChange="dicChange('polCnName', $event)"
|
|
|
+ :slotRight="true"
|
|
|
+ rightLabel="code"
|
|
|
+ ></dic-select>
|
|
|
+ </tempalte>
|
|
|
+ <tempalte slot="podCnName">
|
|
|
+ <dic-select
|
|
|
+ v-model="form.podCnName"
|
|
|
+ placeholder="港口"
|
|
|
+ label="cnName"
|
|
|
+ res="records"
|
|
|
+ :disabled="editDisabled"
|
|
|
+ url="/blade-los/bports/list?status=0¤t=1&size=5"
|
|
|
+ :filterable="true"
|
|
|
+ :remote="true"
|
|
|
+ dataName="cnName"
|
|
|
+ @selectChange="dicChange('podCnName', $event)"
|
|
|
+ :slotRight="true"
|
|
|
+ rightLabel="code"
|
|
|
+ ></dic-select>
|
|
|
+ </tempalte>
|
|
|
+ </avue-form>
|
|
|
+ </trade-card>
|
|
|
+ <trade-card title="基本港">
|
|
|
+ <avue-form :option="optionForm2" v-model="form" ref="form2"> </avue-form>
|
|
|
+ </trade-card>
|
|
|
+ <trade-card title="非基本港">
|
|
|
+ <avue-form :option="optionForm3" v-model="form" ref="form3"> </avue-form>
|
|
|
+ </trade-card>
|
|
|
+ <trade-card title="操作记录">
|
|
|
+ <avue-form :option="optionForm4" v-model="form" ref="form4"> </avue-form>
|
|
|
+ </trade-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { detail, submit } from "@/api/iosBasicData/agencyFeeSetting.js";
|
|
|
+import dicSelect from "@/components/dicSelect/main";
|
|
|
+import { getToken } from "@/util/auth";
|
|
|
+import _ from "lodash";
|
|
|
+import { Header } from "element-ui";
|
|
|
+export default {
|
|
|
+ name: "detailsPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ editButton: false,
|
|
|
+ editDisabled: false,
|
|
|
+ form: {
|
|
|
+ billNoFormat: "DLF",
|
|
|
+ businessTypeCode: "DLF",
|
|
|
+ validityPeriodDate: []
|
|
|
+ },
|
|
|
+ optionForm: {
|
|
|
+ menuBtn: false,
|
|
|
+ span: 6,
|
|
|
+ disabled: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "装货港",
|
|
|
+ prop: "polCnName",
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: " ",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "卸货港",
|
|
|
+ prop: "podCnName",
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: " ",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "有效日期",
|
|
|
+ prop: "validityPeriodDate",
|
|
|
+ type: "daterange",
|
|
|
+ defaultTime: ["00:00:00", "00:00:00"],
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd HH:mm:ss",
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: " ",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ disabled: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ optionForm2: {
|
|
|
+ menuBtn: false,
|
|
|
+ span: 6,
|
|
|
+ disabled: false,
|
|
|
+ group: [
|
|
|
+ {
|
|
|
+ label: "DF自营",
|
|
|
+ prop: "group1",
|
|
|
+ arrow: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "自有箱费率",
|
|
|
+ prop: "basicDfSelfOperatedOwn",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代理箱费率",
|
|
|
+ prop: "basicDfSelfOperatedAgent",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "空箱调用费率",
|
|
|
+ prop: "basicDfSelfOperatedInvoke",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "DF合营",
|
|
|
+ prop: "group2",
|
|
|
+ arrow: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "自有箱费率",
|
|
|
+ prop: "basicDfJointVentureOwn",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代理箱费率",
|
|
|
+ prop: "basicDfJointVentureAgent",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "空箱调用费率",
|
|
|
+ prop: "basicDfJointVentureInvoke",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "OPEN/CSA",
|
|
|
+ prop: "group3",
|
|
|
+ arrow: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "自有箱费率",
|
|
|
+ prop: "basicOpenCsaOwn",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代理箱费率",
|
|
|
+ prop: "basicOpenCsaAgent",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "空箱调用费率",
|
|
|
+ prop: "basicOpenCsaInvoke",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ optionForm3: {
|
|
|
+ menuBtn: false,
|
|
|
+ span: 6,
|
|
|
+ disabled: false,
|
|
|
+ group: [
|
|
|
+ {
|
|
|
+ label: "DF自营",
|
|
|
+ prop: "group1",
|
|
|
+ arrow: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "自有箱费率",
|
|
|
+ prop: "notBasicDfSelfOperatedOwn",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代理箱费率",
|
|
|
+ prop: "notBasicDfSelfOperatedAgent",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "空箱调用费率",
|
|
|
+ prop: "notBasicDfSelfOperatedInvoke",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "DF合营",
|
|
|
+ prop: "group2",
|
|
|
+ arrow: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "自有箱费率",
|
|
|
+ prop: "notBasicDfJointVentureOwn",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代理箱费率",
|
|
|
+ prop: "notBasicDfJointVentureAgent",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "空箱调用费率",
|
|
|
+ prop: "notBasicDfJointVentureInvoke",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "OPEN/CSA",
|
|
|
+ prop: "group3",
|
|
|
+ arrow: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "自有箱费率",
|
|
|
+ prop: "notBasicOpenCsaOwn",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代理箱费率",
|
|
|
+ prop: "notBasicOpenCsaAgent",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "空箱调用费率",
|
|
|
+ prop: "notBasicOpenCsaInvoke",
|
|
|
+ type: "number",
|
|
|
+ controls: false,
|
|
|
+ precision: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ optionForm4: {
|
|
|
+ menuBtn: false,
|
|
|
+ span: 6,
|
|
|
+ disabled: true,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "系统号",
|
|
|
+ prop: "sysNo",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "制单人",
|
|
|
+ prop: "createUserName",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "制单日期",
|
|
|
+ prop: "createTime",
|
|
|
+ disabled: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ dicSelect
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ detailData: Object
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ if (this.detailData.id) {
|
|
|
+ this.editButton = true;
|
|
|
+ this.editDisabled = true;
|
|
|
+ this.optionForm.disabled = true;
|
|
|
+ this.optionForm2.disabled = true;
|
|
|
+ this.optionForm3.disabled = true;
|
|
|
+ this.getDetail(this.detailData.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async dicChange(name, row) {
|
|
|
+ if (name == "polCnName") {
|
|
|
+ if (row) {
|
|
|
+ this.form.polId = row.id;
|
|
|
+ this.form.polCode = row.code;
|
|
|
+ this.form.polEnName = row.enName;
|
|
|
+ } else {
|
|
|
+ this.form.polId = null;
|
|
|
+ this.form.polCode = null;
|
|
|
+ this.form.polEnName = null;
|
|
|
+ this.form.polCnName = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (name == "podCnName") {
|
|
|
+ if (row) {
|
|
|
+ this.form.podId = row.id;
|
|
|
+ this.form.podCode = row.code;
|
|
|
+ this.form.podEnName = row.enName;
|
|
|
+ } else {
|
|
|
+ this.form.podId = null;
|
|
|
+ this.form.podCode = null;
|
|
|
+ this.form.podEnName = null;
|
|
|
+ this.form.podCnName = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDetail(id) {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "加载中",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(255,255,255,0.7)"
|
|
|
+ });
|
|
|
+ detail({ id: id })
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.data.validityPeriodStart || res.data.data.validityPeriodEnd)
|
|
|
+ res.data.data.validityPeriodDate = [res.data.data.validityPeriodStart, res.data.data.validityPeriodEnd];
|
|
|
+ this.form = res.data.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ inEdit() {
|
|
|
+ this.editButton = false;
|
|
|
+ this.editDisabled = false;
|
|
|
+ this.optionForm.disabled = false;
|
|
|
+ this.optionForm2.disabled = false;
|
|
|
+ this.optionForm3.disabled = false;
|
|
|
+ },
|
|
|
+ allClick(name, row) {},
|
|
|
+ submit(type) {
|
|
|
+ this.$refs["form"].validate((valid, done) => {
|
|
|
+ done();
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.validityPeriodDate.length) {
|
|
|
+ this.form.validityPeriodStart = this.form.validityPeriodDate[0];
|
|
|
+ this.form.validityPeriodEnd = this.form.validityPeriodDate[1];
|
|
|
+ }
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "加载中",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(255,255,255,0.7)"
|
|
|
+ });
|
|
|
+ submit(this.form)
|
|
|
+ .then(res => {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ this.getDetail(res.data.data.id);
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goBack(type) {
|
|
|
+ this.$emit("goBack");
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .el-form-item__error {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-form-item {
|
|
|
+ margin-bottom: 8px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .avue-group__header {
|
|
|
+ height: 30px !important;
|
|
|
+ line-height: 30px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .avue-crud .el-table .el-form-item__label {
|
|
|
+ left: -1px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-card__body {
|
|
|
+ padding: 3px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .box-card .el-card__body {
|
|
|
+ padding: 4px !important;
|
|
|
+}
|
|
|
+</style>
|
Qukatie