smart-om-web/src/views/inspection/inspectionobjectDetail.vue

<template>
  <basic-container>
    <avue-form :option="option"
               v-model="form"
               ref="form"
               :before-open="beforeOpen"
               :class="frame_class">
    </avue-form>
    <div class="container">
       <span >
          <el-button type="primary"
                     size="large"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton">
                     确定</el-button>
         <el-button type="primary"
                    size="small"
                    @click="seachToUpdate"
                    v-if="shouldShowButton">
                      修改</el-button>
       </span>
    </div>
  </basic-container>
</template>

<script>
import {getList, getDetail, add, update, remove, takeEffect, lapse} from "@/api/inspection/inspectionobject";
import {mapGetters} from "vuex";
import {getToken} from "@/util/auth";

export default {
  name: "inspectionrouteDetail",
  data() {
    return {
      addUpdateShowButton:{},
      shouldShowButton:{},
      readonlyForm:{},
      frame_class: '',
      form: {},
      query: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "对象编号",
            prop: "objectNo",
            span:8,
            disabled: true,
            rules: [{
              required: true,
              message: "请输入对象编号",
              trigger: "blur"
            }]
          },
          {
            label: "对象名称",
            prop: "objectName",
            search:true,
            type: "select",
            span:8,
            dicUrl: "/api/daf-system/dict/dictionary?code=obj_name",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请输入对象名称",
              trigger: "blur"
            }]
          },
          {
            label: "场站",
            prop: "station",
            search:true,
            type: "select",
            span:8,
            dicUrl: "/api/daf-system/dict/dictionary?code=station",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请输入场站",
              trigger: "blur"
            }]
          },
          {
            label: "对象类型",
            prop: "objectType",
            span:8,
            rules: [{
              required: true,
              message: "请输入对象类型",
              trigger: "blur"
            }]
          },
          {
            label: "对象区域",
            prop: "objectArea",
            search:true,
            span:8,
            rules: [{
              required: true,
              message: "请输入对象区域",
              trigger: "blur"
            }]
          },
          {
            label: "对象状态",
            prop: "istatus",
            search:true,
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=istatus",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span:8,
            rules: [{
              required: true,
              message: "请输入对象状态",
              trigger: "blur"
            }]
          },
          {
            label: "KKS编号",
            prop: "kksNo",
            search:true,
            span:8,
            rules: [{
              required: true,
              message: "请输入KKS编号",
              trigger: "blur"
            }]
          },
          {
            label: "取消原因",
            prop: "cancelReason",
            span: 8,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      // this.option.column = this.option.column.filter(v => {
      //     return this.permission['inspectionroute_col_' + v.prop]
      // })
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    },
  },
  created () {
    if(["view"].includes(this.$route.query.frameMode)){
      this.readonlyForm = true;
      this.addUpdateShowButton = false;
      this.shouldShowButton=true;
      this.frame_class = 'frame_class';
    }else{
      const objectNo = this.findObject(this.option.column, "objectNo");
      objectNo.value = ' ';
      objectNo.disabled = true;
      const iStatus = this.findObject(this.option.column, "istatus");
      iStatus.display = false;
      const cancelReason = this.findObject(this.option.column, "cancelReason");
      cancelReason.display = false;
      this.readonlyForm = false;
      this.addUpdateShowButton = true;
      this.shouldShowButton=false;
      this.frame_class = null;
    }
    this.SearchDetail();
  },
  methods: {
    handleFormSubmit() {
      const form = this.$refs.form;
      form.validate((valid) => {
        if (valid) {
          this.Submit();
        } else {
          this.$message({
            type: "warning",
            message: "请输入必要信息!"
          });
        }
      });
    },
    // 处理表单提交
    Submit() {
      if(this.$route.query.frameMode=="add"){
        this.$confirm("是否新增所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          add(this.form).then(()=>{
            this.$router.push({
              path: "/inspection/inspectionobject",
              query: {
              },
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }else {
        this.$confirm("是否修改所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          alert(this.form.istatus)
          if (this.form.istatus==1){
            this.form.cancelReason="";
          }
          alert(this.form.cancelReason)
          update(this.form).then(() => {
            this.$router.push({
              path: "/inspection/inspectionobject",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }
    },
    seachToUpdate () {
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.readonlyForm=false;
      this.frame_class = null;
    },
    SearchDetail() {
      if (["view"].includes(this.$route.query.frameMode)) {
        getDetail(this.$route.query.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
  }
};
</script>

<style>
.frame_class input.el-input__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}
.frame_class .el-input__icon {
  display: none;
}
.frame_class .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
.frame_class input::placeholder {
  color: transparent;
  display: none; /* 默认隐藏 */
}
.container {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}
</style>