index.vue

<template>
  <div class="eContainer">
    <c-page :title="title">
      <el-form
        ref="modelForm"
        label-width="180px"
        size="small"
        label-position="right"
        :model="model"
        :rules="rules"
        :validate-on-rule-change="false"
        :disabled="isDisabled"
      >
        <c-tabs v-model="tabVal" ref="elment" type="card" @tab-click="changePosition">
          <el-tab-pane label="费用代码" name="fec">
            <c-content>
              <m-fec-info :model="model" />
            </c-content>
          </el-tab-pane>
          <el-tab-pane label="费率信息" name="fee">
            <c-content>
              <m-fee-info :model="model" />
            </c-content>
          </el-tab-pane>
        </c-tabs>
      </el-form>
      <div style="text-align: center">
        <c-button
          type="primary"
          style="margin-right: 10px"
          @click="commitAdd"
          v-if="type === 'add'"
          >提 交</c-button
        >
        <c-button
          type="primary"
          style="margin-right: 10px"
          @click="commitEdit"
          v-if="type === 'edit'"
          >提 交</c-button
        >
        <c-button
          type="primary"
          style="margin-right: 10px"
          @click="commitDelete"
          v-if="type === 'delete'"
          >提 交</c-button
        >
        <c-button type="primary" @click="goBack">返 回</c-button>
      </div>
    </c-page>
  </div>
</template>

<script>
import Utils from "~/utils";
import Fec, { Pattern } from "./Fec.js";

import FecInfo from "./FecInfo.vue";
import FeeInfo from "./FeeInfo.vue";

import { queryDetailById, add, edit, deleteById,editFeeData,deleteFeeData } from "~/service/test/fec.js";

export default {
  name: "StaticsDbifec",
  components: {
    "m-fec-info": FecInfo,
    "m-fee-info": FeeInfo,
  },
  provide() {
    return {
      root: this,
    };
  },
  props: {
		type: {
			type: String,
			default: "info"
		},
		title: {
			type: String,
			default: "dbifec"
		}
	},
  data() {
    return {
      model: new Fec().data,
      tabVal: "fec",
      rules: Pattern,
      tabPosition:"tab-fec",
    };
  },
  computed: {
    isDisabled() {
      return this.type === "info" || this.type === "delete";
    },
  },
  created() {
    if (this.type !== "add") {
      const inr = this.$route.params.inr;
      queryDetailById(inr).then((res) => {
        if (res.inr) {
          this.model = res;
        } else {
          this.$message.error("费用代码不存在")
        }
      });
    }
  },
  methods: {
    commitAdd() {
      this.$refs.modelForm.validate((validated) => {
        if (validated) {
          add(this.model)
            .then((res) => {
              this.$message.success("保存成功！");
              this.goBack(true)
            })
            .catch((err) => {
              this.$message.error("保存失败！");
            });
        } else {
          Utils.formValidateTips(this.$refs.modelForm.fields)
        }
      });
    },
    commitEdit() {
      this.$refs.modelForm.validate((validated) => {
        if (validated) {
          if(this.tabPosition===`tab-fec`){
          edit(this.model)
            .then((res) => {
              this.$message.success("费用代码修改保存成功！");
              this.goBack()
            })
            .catch((err) => {
              this.$message.error("费用代码修改保存失败！");
            });}else{
              editFeeData(this.model.inr,this.model)
            .then((res) => {
              this.$message.success("费率修改保存成功！");
              this.goBack()
            })
            .catch((err) => {
              this.$message.error("费率修改保存失败！");
            });
            }
        } else {
          Utils.formValidateTips(this.$refs.modelForm.fields)
        }
      });
    },
    commitDelete() {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if(this.tabPosition===`tab-fec`){
          deleteById(this.model.inr)
            .then((res) => {
              this.$message.success("费用代码信息删除成功！");
              this.goBack(true)
            })
            .catch((err) => {
              this.$message.error("费用代码信息删除失败！");
            })}else{
              deleteFeeData(this.model)
            .then((res) => {
              this.$message.success("费率信息删除成功！");
              this.goBack(true)
            })
            .catch((err) => {
              this.$message.error("费率信息删除失败！");
            })
            };
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * update 是否更新inffec的查询列表
     */
    goBack(update) {
      this.$store.dispatch("TagsView/delView", this.$route);
      this.$router.push({ name: "StaticsInffec", params: { update } });
    },
    changePosition(tab,event){
      this.tabPosition=event.target.getAttribute('id');
      console.log(this.tabPosition)
    },
  },
};
</script>

<style>
</style>