v3-lab-web/src/views/hierarchicalControl/workExecute/infoPage.vue

<template>
  <div class="page-container workExecute-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">工作执行</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" v-if="!newData.status" @click="openDialog">完成</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box">
        <div class="text-max-box">
          <p>管控名称：</p>
          <p>{{newData.name}}</p>
        </div>
        <div class="text-max-box">
          <p>管控描述：</p>
          <p>{{newData.manageDes}}</p>
        </div>
        <div class="text-max-box">
          <p>二级单位：</p>
          <p>{{newData.deptName}}</p>
        </div>
        <div class="text-max-box">
          <p>安全分类：</p>
          <p>{{newData.typeName}}</p>
        </div>
        <div class="text-max-box">
          <p>安全分级：</p>
          <p>{{newData.levelName}}</p>
        </div>
        <div class="text-max-box">
          <p>状态：</p>
          <p :class="newData.status == 1?'colorA':'colorB'">{{newData.status == 1?'已执行':'未执行'}}</p>
        </div>
        <div class="text-max-box" v-if="newData.status == 1">
          <p>执行人：</p>
          <p>{{newData.executionUser}}</p>
        </div>
        <div class="text-max-box" v-if="newData.status == 1">
          <p>执行时间：</p>
          <p>{{parseTime(newData.executionTime,"{y}-{m}-{d} {h}:{i}")}}</p>
        </div>
        <div class="text-max-box" v-if="newData.status == 1">
          <p>执行备注：</p>
          <p>{{newData.remark}}</p>
        </div>
      </el-form>
    </div>
    <el-dialog class="conditionsSettings-dialog" title='执行完成' width="760px" append-to-body
               :visible.sync="shadeType" v-if="shadeType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <el-form :model="addForm" ref="addForm" :inline="true" :rules="rules">
          <el-form-item label="执行描述" prop="remark">
            <el-input type="textarea" resize="none" style="width:630px;" show-word-limit
                      :rows="4"
                      v-model="addForm.remark" placeholder="请输入执行描述" maxlength="100"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { laboratoryGradeManageExecute } from "@/api/hierarchicalControl/index";
  export default {
    name: 'infoPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{},
        addForm:{
          remark:'',
        },
        rules: {
          remark: [
            { required: true, message: "请输入执行描述", trigger: "blur" },
            { required: true, message: "请输入执行描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        shadeType:false,
      }
    },
    created(){

    },
    mounted(){
      if(this.propsData.id){
        this.$set(this,'newData',this.propsData);
      }
    },
    methods:{
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            let obj = {
              id:this.newData.id,
              remark:this.addForm.remark,
              status:1,
            }
            laboratoryGradeManageExecute(obj).then(response => {
              this.msgSuccess(response.message)
              this.backPage();
            })
          }
        })
      },
      openDialog(){
        this.$set(this,'shadeType',true);
      },
      dialogOff(){
        this.$set(this,'shadeType',false);
        this.$set(this.addForm,'executeDescribe','');
      },
    },
  }
</script>

<style scoped lang="scss">
  .workExecute-infoPage{
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
      .text-max-box{
        display: flex;
        p{
          font-size: 16px;
          line-height:40px;
        }
        p:nth-child(1){
          width:120px;
          text-align: right;
        }
        p:nth-child(2){
          width:1200px;
          line-height:20px;
          padding:10px 0;
        }
        .colorA{
          color:#0183FA;
        }
        .colorB{
          color: #c88400;
        }
      }
      .add-execute-describe-box{
        margin-top:10px;
        padding-top:20px;
        border-top:1px solid #dedede;
      }
    }
  }
</style>