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

<template>
  <basic-container>
    <avue-tabs :option="option"
               @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='information'">
        <avue-form :option="information_option"
                   v-model="information_form"
                   ref="information_crud"
                   :class="information_class">
        </avue-form>
      </span>
    <span v-else-if="type.prop==='results'">
        <div>
          <avue-crud :data="results_data"
                     :table-loading="loading"
                     :option="optionResults"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     header-cell-class-name="header-class"
                     v-model="results_form"
                     ref="crud"
                     @row-del="results_rowDel"
                     @row-update="results_rowUpdate">
          </avue-crud>
        </div>
      </span>
    <div class="container">
       <span >
          <el-button type="primary"
                     size="large"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton && permission.inspectiontasks_add">
                     确定</el-button>
          <el-button type="primary"
                     size="small"
                     @click="seachToUpdate"
                     v-if="shouldShowButton && permission.inspectiontasks_edit">
                      修改</el-button>
       </span>
    </div>
  </basic-container>
  <!--   https://avuejs.com/form/form-rules.html#%E5%A4%96%E7%BD%AE%E9%AA%8C%E8%AF%81-->
</template>
<script>
import {getList, getDetail, add, update, remove} from "@/api/inspection/inspectiontasks";
import {getListByTaskNo, result_update, result_remove} from "@/api/inspection/inspectionresult";
import {mapGetters} from "vuex";
import website from "@/config/website";
import {readonly} from "vue";
import {getToken} from "@/util/auth";
import request from "@/router/axios";
export default {
  name: "inspectiontasksDetail",
  data () {
    var validateStartTime = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入任务开始日期'));
      } else if(this.information_form.taskEndDate !== '' && this.information_form.taskEndDate !== null) {
        if(this.information_form.taskEndDate < value) {
          callback(new Error('输入的任务开始日期大于任务完成日期'));
        }
      }
        callback();
    };
    var validateEndTime = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入任务完成日期'));
      } else if(this.information_form.taskStartDate > value) {
        callback(new Error('输入的任务开始日期大于任务完成日期'));
      }
        callback();
    };
    return {
      information_class: '',
      type: {},
      shouldShowButton:{},
      addUpdateShowButton:{},
      readonlyForm:{},
      document_form:{},
      option: {
        column: [{
          label: '基本信息',
          prop: 'information',
        }
        ]
      },
      information_form: {
      },
      information_option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "任务编号",
            prop: "taskNo",
            span: 7,
            disabled: true,
          },
          {
            label: "任务名称",
            prop: "taskName",
            span: 7,
            rules: [{
              required: true,
              message: "请输入任务名称",
              trigger: "blur"
            }]
          },
          {
            label: "场站",
            prop: "station",
            type: "select",
            span: 7,
            disabled: true,
            dicUrl: "/api/daf-system/dict/dictionary?code=station",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请输入场站",
              trigger: "blur"
            }]
          },
          {
            label: "责任人",
            prop: "responsiblePerson",
            span: 7,
            rules: [{
              required: true,
              message: "请输入责任人",
              trigger: "blur"
            }]
          },
          {
            label: "任务开始日期",
            prop: "taskStartDate",
            type: "date",
            span: 7,
            labelWidth: 120,
            format: 'yyyy年MM月dd日',
            valueFormat: "yyyyMMdd",
            rules: [{required: true, validator: validateStartTime, trigger: 'change' }]
          },
          {
            label: "任务完成日期",
            prop: "taskEndDate",
            type: "date",
            span: 7,
            labelWidth: 120,
            format: 'yyyy年MM月dd日',
            valueFormat: "yyyyMMdd",
            rules: [{required: true, validator: validateEndTime, trigger: 'blur' }]
          },
          {
            label: "对象编号",
            prop: "objectNo",
            span: 7,
            type: "select",
            dicUrl: "/api/inspection/inspectionobject/getObjectList",
            props: {
              label: "objectNo",
              value: "objectNo",
            },
            event: {
              change: (val) => {
                if (!val) return
                if (val) {
                  request({
                    url: '/api/inspection/inspectionobject/getDetailList',
                    method: 'get',
                    params: {
                      objectNo: val
                    }
                  }).then((res) => {
                    this.information_form.objectName = res.data.data.objectName;
                    this.information_form.objectType = res.data.data.objectType;
                    this.information_form.station = res.data.data.station;
                  })
                }
              },
            },
            rules: [{
              required: true,
              message: "请输入对象编号",
              trigger: "blur"
            }]
          },
          {
            label: "对象名称",
            prop: "objectName",
            span: 7,
            disabled: true,
          },
          {
            label: "对象类型",
            prop: "objectType",
            span: 7,
            disabled: true,
          },
          {
            label: "路线编号",
            prop: "routeNo",
            span: 7,
            type: "select",
            dicUrl: "/api/inspection/inspectionRoute/getRouteList",
            props: {
              label: "routeNo",
              value: "routeNo",
            },
            event: {
              change: (val) => {
                if (!val) return
                if (val) {
                  request({
                    url: '/api/inspection/inspectionRoute/getDetailList',
                    method: 'get',
                    params: {
                      routeNo: val
                    }
                  }).then((res) => {
                    this.information_form.routeName = res.data.data.routeName;
                    this.information_form.routeType = res.data.data.type;
                  })
                }
              },
            },
            rules: [{
              required: true,
              message: "请输入路线编号",
              trigger: "blur"
            }]
          },
          {
            label: "路线名称",
            prop: "routeName",
            span: 7,
            disabled: true,

          },
          {
            label: "路线类型",
            prop: "routeType",
            span: 7,
            disabled: true,
          },
          {
            label: "计划编号",
            prop: "planNo",
            span: 7,
            type: "select",
            dicUrl: "/api/inspection/inspectionplan/getPlanList",
            props: {
              label: "planNo",
              value: "planNo",
            },
            event: {
              change: (val) => {
                if (!val) return
                if (val) {
                  request({
                    url: '/api/inspection/inspectionplan/getDetail',
                    method: 'get',
                    params: {
                      planNo: val
                    }
                  }).then((res) => {
                    this.information_form.planName = res.data.data.planName;
                    this.information_form.planType = res.data.data.planType;
                  })
                }
              },
            },
            rules: [{
              required: true,
              message: "请输入路线编号",
              trigger: "blur"
            }]
          },
          {
            label: "计划名称",
            prop: "planName",
            span: 7,
            disabled: true,
          },
          {
            label: "计划类型",
            prop: "planType",
            span: 7,
            disabled: true,
          },
          {
            label: "取消原因",
            prop: "cancelReason",
            span: 7,
          },
          {
            label: "状态",
            prop: "taskStatus",
            type: "select",
            span: 7,
            dicUrl: "/api/daf-system/dict/dictionary?code=task_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
        ]
      },
      results_data: [],
      optionResults: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        column: [
          {
            label: "结果编码",
            prop: "resultNo",
            disabled:true,
          },

          {
            label: "任务执行开始时间",
            prop: "executeStartDate",
            type: "datetime",
            format: 'yyyy年MM月dd日 HH时mm分',
            valueFormat: "yyyy年MM月dd日 HH时mm分",
          },
          {
            label: "任务执行结束时间",
            prop: "executeEndDate",
            type: "datetime",
            format: 'yyyy年MM月dd日 HH时mm分',
            valueFormat: "yyyy年MM月dd日 HH时mm分",
          },
          {
            label: "巡检结果",
            prop: "inspectiontResult",
          },
          {
            label: "巡检报告",
            prop: "inspectionReport",
          },
        ]
      },
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn:  false,
        viewBtn: false,
        delBtn: true,
        editBtn: true
      };
    },
  },
  created () {
    this.type = this.option.column[0];
    if(this.$route.query.frameMode == "search"){
      this.option.column.push({ label: '巡检结果', prop: 'results' });
      this.readonlyForm=true;
      this.shouldShowButton=true;
      this.addUpdateShowButton=false;
      this.information_class = 'information_class';
      this.SearchDetail();
    }else{
      const cancelReason = this.findObject(this.information_option.column, "cancelReason");
      const taskStatus = this.findObject(this.information_option.column, "taskStatus");
      const taskNo = this.findObject(this.information_option.column, "taskNo");
      taskNo.value = ' ';
      cancelReason.display = false;
      taskStatus.display = false;
      this.readonlyForm=false;
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.information_class = null;
    }

  },
  methods: {
    handleFormSubmit() {
      this.$refs.information_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.information_form).then(()=>{
            this.$router.push({
              path: "/inspection/inspectiontasks",
              query: {
              },
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }else {
        this.$confirm("是否修改所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          update(this.information_form).then(() => {
            this.$router.push({
              path: "/inspection/inspectiontasks",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }
    },
    seachToUpdate () {
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.readonlyForm=false;
      this.information_class = null;
    },
    handleChange (column) {
      this.type = column
      this.onLoad();

    },
    // 巡检结果 编辑按钮处理
    results_rowUpdate (form, index, done, loading) {
      result_update(form).then(() => {
        done(form);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });

    },
    // 巡检结果 删除按钮处理
    results_rowDel (form, index,done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return result_remove(form.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },

    SearchDetail() {
      getDetail(this.$route.query.id).then(res => {
        this.information_form = res.data.data;
      });
    },

    headerClass(){
      return 'header-class'
    },
    onLoad(row, params = {}) {
      this.loading = true;
      getListByTaskNo(this.$route.query.taskNo).then(res => {
        this.results_data = res.data.data;
        this.loading = false;
      });
    },
  }
}
</script>
<style>

.information_class .el-input__inner,
.information_class .el-textarea__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}
.information_class .el-input__icon {
  display: none;
}
.information_class .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
.information_class input::placeholder {
  color: transparent;
  display: none; /* 默认隐藏 */
}

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

.check_status_class {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}

.check_status_class input.el-input__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}
</style>