pms-app/pages/ruiDu/compontents/report-info.vue

<template>
  <scroll-view scroll-y="true" class="report-info">
    <!-- 日报详情 - 任务信息 -->
    <view class="report-info-content form-content">
      <uni-forms ref="reportInfoRef" labelWidth="140px" :modelValue="reportData">
        <!-- 甲方 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.firstParty')}:`" name="manufactureName">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.manufactureName" />
        </uni-forms-item>
        <!-- 合同号 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.contractNo')}:`" name="contractName">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.contractName" />
        </uni-forms-item>
        <!-- 井号 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.wellNo')}:`" name="wellName">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.wellName" />
        </uni-forms-item>
        <!-- 施工队伍 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.constructionTeam')}:`" name="constructionTeam">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.deptName" />
        </uni-forms-item>
        <!-- 施工地点 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.constructionLocation')}:`" name="location">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.location" />
        </uni-forms-item>
        <!-- 工艺 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.process')}:`" name="techniqueNames">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.techniqueNames" />
        </uni-forms-item>
        <!-- 带班干部 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.shiftLeader')}:`" name="responsiblePersonNames">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.responsiblePersonNames" />
        </uni-forms-item>
        <!-- 搬迁日期 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.relocationDate')}:`" name="relocationDate">
          <uni-datetime-picker
            type="datetime"
            returnType="timestamp"
            :border="false"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            v-model="reportData.relocationDate">
          </uni-datetime-picker>
        </uni-forms-item>
        <!-- 开工日期 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.commencementDate')}:`" name="commencementDate">
          <uni-datetime-picker
            type="datetime"
            returnType="timestamp"
            :border="false"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            v-model="reportData.commencementDate">
          </uni-datetime-picker>
        </uni-forms-item>
        <!-- 完工日期 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.completionDate')}:`" name="completionDate">
          <uni-datetime-picker
            type="datetime"
            returnType="timestamp"
            :border="false"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            v-model="reportData.completionDate">
          </uni-datetime-picker>
        </uni-forms-item>
        <!-- 施工周期 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.constructionCycle')}:`" name="constructionPeriod">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.constructionPeriod" />
        </uni-forms-item>
        <!-- 设备配置 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.equipmentConfig')}:`" name="deviceNames">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="selectPlaceholder"
            :disabled="props.formDisable"
            :value="reportData.deviceNames" />
        </uni-forms-item>
        <uni-forms-item class="form-item" :label="`审批意见:`" v-if="approval">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :disabled="formDisable"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            v-model="approvalOpinion"
            :maxlength="1000" />
        </uni-forms-item>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed, getCurrentInstance, onMounted, watch } from 'vue';

  // -------------------------- 引入api接口 start--------------------------

  // -------------------------- 引入api接口 end  --------------------------
  // --------------------------引用组件-----start---------------------------
  // --------------------------引用组件-----end-----------------------------
  // --------------------------引用全局变量$t-------------------------------
  const { appContext } = getCurrentInstance();
  const t = appContext.config.globalProperties.$t;
  // --------------------------引用字典项-----------------------------------
  import { useDataDictStore } from '@/store/modules/dataDict';
  const { getIntDictOptions, getStrDictOptions } = useDataDictStore();

  // -------------------------接收父组件传递的参数--------------------------
  const props = defineProps({
    reportId: {
      type: String,
      default: '',
    },
    reportData: {
      type: Object,
      default: () => {},
    },
    formDisable: {
      type: Boolean,
      default: true, // 是否禁用表单
    },
    approval: {
      type: Boolean,
      default: false,
    },
  });
  // -------------------------- 生命周期函数 --------------------------
  onMounted(() => {
    console.log('report-info mounted');
  });
  // -------------------------- 页面变量 --------------------------
  // 表单ref
  const formRef = ref(null);
  // 选择占位符
  const selectPlaceholder = computed(() => {
    return props.formDisable ? ' ' : t('operation.PleaseSelect');
  });

  const inputPlaceholder = computed(() => {
    return props.formDisable ? ' ' : t('operation.PleaseInput');
  });

  // -------------------------- 页面方法 --------------------------

  const approvalOpinion = ref('');

  watch(
    () => props.reportData.opinion,
    newVal => {
      approvalOpinion.value = newVal || '';
    }
  );

  // -------------------------- 暴露给父组件的外部方法 --------------------------
  defineExpose({ approvalOpinion });

  // -------------------------- 事件派发 --------------------------
  const emit = defineEmits([]);
</script>

<style lang="scss" scoped>
  @import '@/style/work-order-detail.scss';
  .report-info {
    height: 100%;
    color: #333;
  }
  :deep(.uni-textarea-textarea:disabled),
  :deep(.uni-input-input:disabled) {
    color: #333;
  }
  :deep(.uni-date-x) {
    color: #333;
  }
</style>