Warehouse_management_ui/src/views/kaihe/protocol/detail.vue

<template>
  <div v-if="showDetail">
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="font-weight: 700">凯和协议</span></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><span style="font-weight: 700"
              >凯和协议详情页</span
            ></el-breadcrumb-item
          >
        </el-breadcrumb>
        <el-button
          style="margin-left: 10px"
          size="mini"
          icon="el-icon-arrow-left"
          @click="cancel"
          >返回列表
        </el-button>
      </div>
    </div>
    <br />
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      :disabled="readOnly"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="协议名称" prop="fName">
            <el-input v-model="form.fName" placeholder="请输入" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="协议类型" prop="fTypes">
            <el-select
              style="width: 100%"
              v-model="form.fTypes"
              placeholder="请选择"
              size="small"
              filterable
              clearable
            >
              <el-option
                v-for="item in protocolTypes"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制单人" prop="createBy">
            <el-input
              v-model="form.createBy"
              size="small"
              placeholder="请输入"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <el-input
              v-model="form.status"
              size="small"
              placeholder="请输入"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="起运港" prop="fLoadportId">
            <el-select
              style="width: 100%"
              v-model="form.fLoadportId"
              placeholder="请选择"
              size="small"
              @change="loadportChange"
              filterable
              clearable
            >
              <el-option
                v-for="item in fMblnoOptions"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输条款" prop="fLoadportMode">
            <el-select
              style="width: 100%"
              v-model="form.fLoadportMode"
              placeholder="请选择起运港运输条款"
              size="small"
              filterable
              clearable
            >
              <el-option
                v-for="item in fServiceitems"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目的港" prop="fDestportId">
            <el-select
              style="width: 100%"
              v-model="form.fDestportId"
              placeholder="请选择"
              size="small"
              @change="destportChange"
              filterable
              clearable
            >
              <el-option
                v-for="item in fMblnoOptions"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输条款" prop="fDestportMode">
            <el-select
              style="width: 100%"
              v-model="form.fDestportMode"
              placeholder="请选择目的港运输条款"
              size="small"
              filterable
              clearable
            >
              <el-option
                v-for="item in fServiceitemsNews"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="有效期开始" prop="fPeriodStart">
            <el-date-picker
              style="width: 100%"
              v-model="form.fPeriodStart"
              placeholder="请选择"
              type="date"
              size="small"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="有效期结束" prop="fPeriodEnd">
            <el-date-picker
              style="width: 100%"
              v-model="form.fPeriodEnd"
              placeholder="请选择"
              type="date"
              size="small"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制单时间" prop="createTime">
            <el-date-picker
              style="width: 100%"
              v-model="form.createTime"
              placeholder="请选择"
              type="date"
              size="small"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              size="small"
              placeholder="请输入"
              type="textarea"
              :rows="2"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="head-but">
      <div>
        <el-button type="primary" size="mini" @click="add" :disabled="readOnly">
          新 增
        </el-button>
        <el-button
          type="success"
          size="mini"
          @click="save"
          :disabled="readOnly"
        >
          保 存
        </el-button>
        <el-button type="info" size="mini" :disabled="readOnly">
          生效申请
        </el-button>
        <el-button type="danger" size="mini" :disabled="readOnly">
          作废申请
        </el-button>
      </div>
      <div class="tabSetting">
        <div style="margin: 0 12px">
          <el-button
            icon="el-icon-setting"
            size="mini"
            circle
            @click="colSetting"
          ></el-button>
        </div>
      </div>
    </div>
    <el-table :data="data" style="width: 100%">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column
        v-for="(item, index) in tableOption"
        :key="index"
        :label="item.name"
        :width="item.width"
        :prop="item.label"
        align="center"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{ row }">
          <span v-if="item.label == 'fFeeId'">
            <el-select
              style="width: 100%"
              v-model="row.fFeeId"
              placeholder="请选择"
              size="small"
              filterable
              clearable
              @change="feeChange(row)"
              :disabled="readOnly"
            >
              <el-option
                v-for="item in listFees"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
              >
              </el-option>
            </el-select>
          </span>
          <span v-if="item.label == 'fFeeunitId'">
            <el-select
              style="width: 100%"
              v-model="row.fFeeunitId"
              placeholder="请选择"
              size="small"
              filterable
              clearable
              @change="feeunitChange(row)"
              :disabled="readOnly"
            >
              <el-option
                v-for="item in unitfees"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </span>
          <span v-if="item.label == 'fPrice'">
            <el-input
              v-model="row.fPrice"
              placeholder="请输入"
              size="small"
              oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
              :disabled="readOnly"
            >
            </el-input>
          </span>
          <span v-if="item.label == 'remark'">
            <el-input
              v-model="row.remark"
              placeholder="请输入"
              size="small"
              :disabled="readOnly"
            >
            </el-input>
          </span>
          <span v-if="item.label == 'createBy'">
            {{ row.createBy }}
          </span>
          <span v-if="item.label == 'createTime'">
            {{ row.createTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80" align="center">
        <template slot-scope="{ row, $index }">
          <el-button
            type="text"
            size="small"
            @click="rowDel(row, $index)"
            :disabled="readOnly"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <column-setting
      ref="columnSetting"
      @reset="reset"
      @getRowdata="getRowdata"
      tableName="凯和协议明细"
    />
  </div>
</template>

<script>
import { tableOption2 } from "./js/index";
import columnSetting from "@/components/ColumnSetting/index";
import { portInquiry } from "@/api/kaihe/domesticTrade/orderInformation";
import { listFees } from "@/api/basicdata/fees";
import { getdetail, save, itemRemove } from "@/api/kaihe/protocol/index";
export default {
  data() {
    return {
      form: {},
      tableOption: tableOption2,
      readOnly: null,
      data: [],
      protocolTypes: [],
      fServiceitems: [],
      fServiceitemsNews: [],
      fMblnoOptions: [],
      listFees: [],
      unitfees: [],
      rules: {
        fName: [
          { required: true, message: "请选择协议名称", trigger: "change" },
        ],
        fTypes: [
          { required: true, message: "请选择协议类型", trigger: "change" },
        ],
        fPeriodStart: [
          { required: true, message: "请选择协议类型", trigger: "change" },
        ],
        fPeriodEnd: [
          { required: true, message: "请选择协议类型", trigger: "change" },
        ],
      },
    };
  },
  props: {
    showDetail: {
      type: Boolean,
    },
  },
  components: {
    columnSetting,
  },
  created() {},
  methods: {
    init(row, status) {
      this.readOnly = status;
      if (row) {
        console.log(row);
        getdetail(row.fId).then((res) => {
          this.form = res.data;
          this.data = res.data.tShipDealItemList;
        });
      }
      this.getDicts("protocol_type").then((response) => {
        this.protocolTypes = response.data;
      });
      this.getDicts("f_serviceitems").then((response) => {
        this.fServiceitems = response.data;
      });
      this.getDicts("f_serviceitemsNew").then((response) => {
        this.fServiceitemsNews = response.data;
      });
      this.getDicts("data_unitfees").then((response) => {
        this.unitfees = response.data;
      });
      portInquiry().then((res) => {
        this.fMblnoOptions = res.rows;
      });
      listFees().then((res) => {
        this.listFees = res.rows;
      });
      setTimeout((e) => {
        this.$refs.columnSetting.getRow(this.tableOption);
      }, 100);
    },
    feeChange(row) {
      this.listFees.forEach((e) => {
        if (e.fId == row.fFeeId) {
          row.fFeeName = e.fName;
        }
      });
    },
    feeunitChange(row) {
      this.unitfees.forEach((e) => {
        if (e.dictValue == row.fFeeunitId) {
          row.fFeeunitName = e.dictLabel;
        }
      });
    },
    loadportChange(row) {
      this.fMblnoOptions.forEach((e) => {
        if (row == e.fId) {
          this.form.fLoadportName = e.fName;
        }
      });
    },
    destportChange(row) {
      this.fMblnoOptions.forEach((e) => {
        if (row == e.fId) {
          this.form.fDestportName = e.fName;
        }
      });
    },
    returnData() {
      this.$emit("goBack", false);
    },
    resetQuery() {
      this.form = this.$options.data().form;
    },
    getList() {},
    add() {
      this.data.push({});
    },
    save() {
      if (this.data.length > 0) {
        for (let i = 0; i < this.data.length; i++) {
          if (!this.data[i].fFeeId) {
            return this.$message.error(
              "请选择第" + Number(i + 1) + "行费用名称"
            );
          }
          if (!this.data[i].fFeeunitId) {
            return this.$message.error(
              "请选择第" + Number(i + 1) + "行价格单位"
            );
          }
          console.log(this.data[i].fPrice)
          if (this.data[i].fPrice == undefined || this.data[i].fPrice === "") {
            return this.$message.error("请输入第" + Number(i + 1) + "行单价");
          }
        }
      }
      save({ ...this.form, tShipDealItemList: this.data }).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.data = res.data.tShipDealItemList;
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        }
      });
    },
    rowDel(row, index) {
      console.log(row, index);
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (row.fId) {
          itemRemove(row.fId).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.data.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.data.splice(index, 1);
        }
      });
    },
    colSetting() {
      this.$refs.columnSetting.init(this.tableOption);
    },
    getRowdata(list) {
      this.tableOption = list;
    },
    reset() {
      this.tableOption = this.$options.data().tableOption;
    },
    cancel() {
      if (!this.readOnly) {
        this.$confirm("返回列表，是否保存?", "提示", {
          confirmButtonText: "保存",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.save("back");
            Object.assign(this.$data, this.$options.data());
            this.$emit("goBack", false);
          })
          .catch(() => {
            Object.assign(this.$data, this.$options.data());
            this.$emit("goDetail", false);
          });
      } else {
        Object.assign(this.$data, this.$options.data());
        this.$emit("goBack", false);
      }
    },
  },
  watch: {
    info: function (obj) {
      console.log(obj);
    },
  },
};
</script>
<style lang="scss" scoped>
.head-but {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
</style>