修改input输入框禁用后文字颜色

guoshilong

2022-10-11 04ed7a0de8c3596f7ea9a2e68a57b0366e6156ba

 src/views/taskinfo/taskinfoDetail.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" @click="handleBack">返 回
    </el-button>
    <el-row>
     <el-col :span="12">
@@ -84,9 +84,10 @@
              </el-row>
            </el-form>
          </el-card>

          <!--巡检人员信息-->
          <div
            style="margin-top: 70px"
            style="margin-top: 15px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
@@ -103,7 +104,6 @@
              </div>
            </div>
          </div>

          <el-card>
            <el-table
              ref="multipleTable"
@@ -112,11 +112,91 @@
              style="width: 100%"
              max-height="240"
            >
              <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
              <el-table-column prop="realName" label="真名" width="150" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" width="170" align="center"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="realName" label="真名" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
            </el-table>
          </el-card>

          <!--事件信息-->
          <div v-if="eventgmList.length>0">
            <div
              style="margin-top: 15px"
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-s-custom avue-group__icon"></i>
                  <h1 class="avue-group__title">相关事件信息</h1>
                </div>
              </div>
            </div>
            <el-card>
              <el-form v-for="eventgm in eventgmList"
                :model="form"
                label-position="right"
                size="mini"
                class="taskinfoForm"
                label-width="70px"
                style="
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
              >
                <el-row>
                  <el-col span="24">
                    <el-form-item label="地点">
                      <el-input disabled="true" v-model="eventgm.address" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col span="24">
                    <el-form-item label="事件类型">
                      <el-input disabled="true" v-model="eventgm.typeName" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col span="12">
                    <el-form-item label="事件状态">
                      <el-input disabled="true" v-model="eventgm.stateName" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="事件来源">
                      <el-input disabled="true" v-model="eventgm.source" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col span="24">
                    <el-form-item label="内容">
                      <el-input disabled="true" v-model="eventgm.remark" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12" v-if="eventgm.no">
                    <el-form-item label="工单编号">
                      <el-input disabled="true" v-model="eventgm.no" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </el-form>
            </el-card>
          </div>

        </el-card>
      </div>
    </el-col>
@@ -131,6 +211,9 @@
<script>
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getUser} from "@/api/system/user"
import {getDetail} from "@/api/taskinfo/taskinfo";
import {getDictionary} from "@/api/system/dictbiz";

export default {
  name: "taskinfoDetail",
  components: {OpenLayersMap},
@@ -139,12 +222,14 @@
    return{
      taskinfo:{},
      form:{},
      accepterInfo:[]
      accepterInfo:[],
      eventgmList:[],
    }
  },
  created() {
    this.form = this.detailInfo;
    this.getUser()
    this.getEventgmList()
  },
  methods:{
    //获取巡检人员信息
@@ -156,6 +241,41 @@
          }
        })
      }
    },
    //获取当前任务绑定的相关事件
    getEventgmList(){
      getDetail(this.form.id).then(res=>{
        if(res.data.code == 200){
          if (res.data.data.eventgmList.length>0){
            this.eventgmList = res.data.data.eventgmList
            getDictionary({code:"EVENT_TYPE"}).then(res=>{
              if(res.data.code == 200){

                this.eventgmList.forEach(e=>{
                  res.data.data.forEach(k=>{
                    if (e.type == k.dictKey){
                      e.typeName = k.dictValue
                    }
                  })
                })

              }
            })

            getDictionary({code:"EVENT_STATE"}).then(res=>{
              if(res.data.code == 200){
                this.eventgmList.forEach(e=>{
                  res.data.data.forEach(k=>{
                    if (e.state == k.dictKey){
                      e.stateName = k.dictValue
                    }
                  })
                })
              }
            })
          }
        }
      })
    },
    handleBack(){
      this.$emit('isDetail');
@@ -194,10 +314,7 @@
  display: block;
}

.backBtn{
  position: fixed;
  top: 20%;
  right: 3%;
  z-index: 99999;
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
}
</style>