smart-om-web/src/views/inspection/inspectionPlanDetail.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="small"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton && permission.inspectionroute_add">
                     确定</el-button>
         <el-button type="primary"
                    size="small"
                    @click="seachToUpdate"
                    v-if="shouldShowButton && permission.inspectionroute_edit">
                      修改</el-button>
       </span>
    </div>
  </basic-container>
</template>

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

  export default {
    name: "inspectionPlanDetail",
    data() {
      var validateTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入计划终了时间'));
        } else if(this.form.startTime > value) {
          callback(new Error('输入的计划起始时间大于计划终了时间'));
        } else {
          callback();
        }
      };
      return {
        addUpdateShowButton:{},
        shouldShowButton:{},
        readonlyForm:{},
        frame_class: '',
        form: {},
        query: {},
        option: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "计划编号",
              prop: "planNo",
              disabled: true,
              span: 8,
            },
            {
              label: "计划名称",
              prop: "planName",
              span: 8,
              rules: [{
                required: true,
                message: "请输入计划名称",
                trigger: "blur"
              }]
            },
            {
              label: "计划类型",
              prop: "planType",
              span: 8,
              rules: [{
                required: true,
                message: "请输入计划类型",
                trigger: "blur"
              }]
            },
            {
              label: "周期类型",
              prop: "periodType",
              span: 8,
              rules: [{
                required: true,
                message: "请输入周期类型",
                trigger: "blur"
              }]
            },
            {
              label: "周期值",
              prop: "periodValue",
              span: 8,
              rules: [{
                required: true,
                message: "请输入周期值",
                trigger: "blur"
              }]
            },
            {
              label: "计划起始时间",
              prop: "startTime",
              span: 8,
              type: "date",
              labelWidth: 120,
              format: 'yyyy年MM月dd日',
              valueFormat: "yyyyMMdd",
              rules: [{
                required: true,
                message: "请输入计划起始时间",
                trigger: "blur"
              }]
            },
            {
              label: "计划终了时间",
              prop: "endTime",
              span: 8,
              type: "date",
              labelWidth: 120,
              format: 'yyyy年MM月dd日',
              valueFormat: "yyyyMMdd",
              rules: [{required: true, validator: validateTime, trigger: 'blur' }]
            },
            {
              label: "状态",
              prop: "planStatus",
              span: 8,
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=istatus",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入状态",
                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 planNo = this.findObject(this.option.column, "planNo");
        planNo.value = ' ';
        planNo.disabled = true;
        const planStatus = this.findObject(this.option.column, "planStatus");
        planStatus.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() {
        this.$refs.form.validate((valid, done, msg) => {
          if (valid) {
            done()
            this.Submit();
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      // 处理表单提交
      Submit() {
        if(this.$route.query.frameMode=="add"){
          this.$confirm("是否新增所填数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            add(this.form).then(()=>{
              this.$router.push({
                path: "/inspection/inspectionplan",
                query: {
                },
              });
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            }).catch((error) => {
              this.$message({
                type: "error",
                message: "操作失败!"
              });
            });
          });
        }else {
          this.$confirm("是否修改所填数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            update(this.form).then(() => {
              this.$router.push({
                path: "/inspection/inspectionplan",
                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;
          });
        }
      },
    }
  };
</script>

<style>

.frame_class .el-input__inner,
.frame_class .el-textarea__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; /* 默认隐藏 */
}

.frame_class div.el-select--small {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}
.container {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}
</style>