1、实现数据加工程序确认表以及刀具清单打印功能（未联调后端数据） 2、终端故障报修页面开发完成并联调 3、调整终端首页样式 4、增加系统页面访问终端页...

zhaowei

2025-06-06 bd08b30389140909ae7c27223dc1a33bad04da83

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentFault.vue

@@ -3,22 +3,70 @@
    <slot name="function"/>

    <div class="content-container">
      <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="{span:10}" :wrapperCol="{span:6}">
        <a-form-model-item label="设备名称" prop="equipmentId">
          <a-select placeholder="请选择设备" v-model="model.equipmentId"></a-select>
        </a-form-model-item>
        <a-form-model-item label="故障原因" prop="faultReasonId">
          <a-select placeholder="请选择故障原因" v-model="model.faultReasonId"></a-select>
        </a-form-model-item>
        <a-form-model-item label="故障描述" prop="faultDescription">
          <a-textarea placeholder="请输入故障描述" v-model="model.faultDescription"/>
        </a-form-model-item>
      <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="equipmentId" label="设备编号">
              <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="model.equipmentId"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item prop="faultName" label="故障简称">
              <a-select placeholder="请选择故障简称" v-model="model.faultName" @change="handleFaultNameChange">
                <a-select-option v-for="item in faultReasonList" :key="item.faultName">
                  {{ item.faultName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="故障分类">
              <a-input placeholder="请输入故障分类" v-model="model.faultType_dictText" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="故障描述" prop="faultDescription">
              <a-textarea placeholder="请输入故障描述" v-model="model.faultDescription"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="faultStartTime" label="故障开始时间">
              <a-date-picker showTime placeholder="请选择故障开始时间" v-model="model.faultStartTime"
                             :allow-clear="false" value-format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDate"
                             :disabledTime="disabledTime"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item prop="breakdownFlag" label="是否停机">
              <j-dict-select-tag v-model="model.breakdownFlag" dictCode="breakdown_flag" type="radio"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="imageFiles" label="报修图片">
              <lx-upload :returnUrl="false" :isMultiple="true" file-type="image" :number="3"
                         v-model="model.imageFilesResult"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="remark" label="备注">
              <a-textarea placeholder="请输入备注" v-model="model.remark"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <div style="text-align: center">
          <a-space>
            <a-button @click="handleReportFault">故障上报</a-button>
            <a-button>故障解除</a-button>
          </a-space>
          <a-button type="primary" @click="handleReportFault" icon="alert" :loading="loading">故障上报</a-button>
        </div>
      </a-form-model>
    </div>
@@ -26,23 +74,113 @@
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect.vue'
  import moment from 'moment'

  export default {
    name: 'ReportEquipmentFault',
    components: { LxSearchEquipmentSelect },
    data() {
      return {
        model: {},
        model: {
          breakdownFlag: '1'
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
        validateRules: {
          equipmentId: [{ required: true, message: '请选择设备！' }],
          faultReasonId: [{ required: true, message: '请选择故障原因！' }],
          faultDescription: [{ required: true, message: '请输入故障描述！' }]
          equipmentId: [{ required: true, message: '请选择设备！', trigger: 'change' }],
          faultReasonId: [{ required: true, message: '请选择故障原因！', trigger: 'change' }],
          faultDescription: [{ required: true, message: '请输入故障描述！', trigger: 'change' }]
        },
        faultReasonList: [],
        loading: false,
        url: {
          confirm: '/eam/eamReportRepair/add',
          faultReasonList: '/eam/equipmentFaultReason/list'
        }
      }
    },
    created() {
      this.getFaultReasonListByApi()
    },
    methods: {
      // 调用接口获取故障原因列表
      getFaultReasonListByApi() {
        const that = this
        getAction(this.url.faultReasonList)
          .then(res => {
            that.faultReasonList = res.result.records
          })
      },

      /**
       * 故障简称改变时触发
       * @params value 改变后的值
       */
      handleFaultNameChange(value) {
        const faultReasonItem = this.faultReasonList.find(item => item.faultName === value)
        this.model.faultType = faultReasonItem.faultCategory
        this.model.faultType_dictText = faultReasonItem.faultCategory_dictText
        this.model.faultDescription = faultReasonItem.faultDescription
      },

      /**
       * 禁用日期
       * @params current 被禁用的时间
       */
      disabledDate(current) {
        // Can not select days after today
        return current > moment().endOf('day')
      },

      /**
       * 禁用日期中的时间
       * @returns {{disabledHours: (function(): Array), disabledMinutes: (function(): Array)}}
       */
      disabledTime() {
        function range(start, end) {
          const result = []
          for (let i = start; i < end; i++) {
            result.push(i)
          }
          return result
        }

        return {
          disabledHours: () => range(moment().hour() + 1, 24),
          disabledMinutes: () => range(moment().minute() + 1, 60),
          disabledSeconds: () => range(moment().second() + 1, 60)
        }
      },

      handleReportFault() {
        const that = this
        this.$refs.form.validate(valid => {
          if (valid) {

            that.loading = true
            postAction(that.url.confirm, this.model).then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
              }
              else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.loading = false
            })
          } else {
            return false
          }
@@ -60,7 +198,11 @@
    align-items: center;

    /deep/ .ant-form {
      width: 100%;
      width: 75%;

      .ant-form-item {
        margin-bottom: 12px;
      }
    }
  }
</style>