index.vue

<template>
  <div class="eContainer">
    <c-page :title="title">
      <el-form
        ref="modelForm"
        label-width="140px"
        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">
          <el-tab-pane label="消息信息" name="oit">
            <c-content>
              <m-oitp0 :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 Oit, { Pattern } from './Oit.js'

// import Bchp0 from "./Bchp0.vue";
import OitInfo from './OitInfo.vue'
import Oitp1 from './Oitp1.vue'
import Oitp2 from './Oitp2.vue'

import { queryById, add, edit, deleteById } from '~/service/test/oit.js'
export default {
  name: 'StaticsDbioit',
  components: {
    'm-oitp0': OitInfo,
    'm-oitp1': Oitp1,
    'm-oitp2': Oitp2,
  },
  provide() {
    return {
      root: this,
    }
  },
  props: {
    type: {
      type: String,
      default: 'info',
    },
    title: {
      type: String,
      default: 'dbioit',
    },
  },
  data() {
    return {
      model: new Oit().data,
      tabVal: 'oit',
      rules: Pattern,
    }
  },
  computed: {
    isDisabled() {
      return this.type === 'info' || this.type === 'delete'
    },
  },
  created() {
    if (this.type !== 'add') {
      //const inr = this.$route.params.inr
      const params = this.$route.params
      queryById(params).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) {
          edit(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(() => {
          const params = this.$route.params
          deleteById(params)
            .then((res) => {
              this.$message.success('删除成功！')
              this.goBack(true)
            })
            .catch((err) => {
              this.$message.error('删除失败！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    /**
     * update 是否更新infbch的查询列表
     */
    goBack(update) {
      this.$store.dispatch('TagsView/delView', this.$route)
      this.$router.push({ name: 'StaticsInfoit', params: { update } })
    },
  },
}
</script>
<style></style>