场景报告-码头搅拌站场景基本信息

hcong

2024-11-12 8f3255956f85af1df98170fb05e6551cea12e9b0

 src/views/fysp/scene/CompSceneConstructionInfo.vue

@@ -1,125 +1,341 @@
<!-- 工地专属信息编辑 -->
<template>
  <el-form
    :inline="false"
    :model="formObj"
    ref="formRef"
    :rules="rules"
    label-position="right"
    label-width="150px"
  <BaseSceneInfo
    ref="baseSceneInfo"
    :scene="scene"
    :formInfo="formInfo"
    :scene-type="sceneType"
  >
    <el-form-item label="工程类型" prop="csProjectType">
      <el-input
        clearable
        v-model="formObj.csProjectType"
        placeholder="工程类型"
      />
    </el-form-item>
    <el-form-item label="建设状态" prop="csStatus">
      <el-select v-model="formObj.csStatus" placeholder="建设状态">
        <el-option
          v-for="s in status"
          :key="s.value"
          :label="s.label"
          :value="s.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="施工阶段" prop="siExtension1">
      <el-select v-model="formObj.siExtension1" placeholder="施工阶段">
        <el-option
          v-for="s in stage"
          :key="s.value"
          :label="s.label"
          :value="s.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="施工时间" prop="_timeRange">
      <el-date-picker
        v-model="formObj._timeRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开工时间"
        end-placeholder="完工时间"
      />
    </el-form-item>
    <el-form-item label="剩余工期" prop="csLeftTime">
      <el-input
        clearable
        v-model="formObj.csLeftTime"
        placeholder="剩余工期，例如几年、几月、几周、几天等"
      />
    </el-form-item>
    <el-form-item label="占地面积" prop="csFloorSpace">
      <el-input clearable v-model="formObj.csFloorSpace" placeholder="占地面积">
        <template #append>㎡</template>
      </el-input>
    </el-form-item>
    <el-form-item label="施工面积" prop="csConstructionArea">
      <el-input
        clearable
        v-model="formObj.csConstructionArea"
        placeholder="施工面积"
    <template #form-items>
      <el-form
        v-show="showStyle == 'form'"
        :inline="false"
        :model="formObj"
        ref="formRef"
        :rules="rules"
        label-position="right"
        label-width="150px"
      >
        <template #append>㎡</template>
      </el-input>
    </el-form-item>
    <el-form-item label="每月施工面积" prop="csConstructionAreaPerMonth">
      <el-input
        clearable
        v-model="formObj.csConstructionAreaPerMonth"
        placeholder="每月施工面积"
        <el-form-item label="工程类型" prop="csProjectType">
          <el-input
            clearable
            v-model="formObj.csProjectType"
            placeholder="工程类型"
          />
        </el-form-item>
        <el-form-item label="建设状态" prop="csStatus">
          <el-select v-model="formObj.csStatus" placeholder="建设状态">
            <el-option
              v-for="s in status"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="施工阶段" prop="siExtension1">
          <el-select v-model="formObj.siExtension1" placeholder="施工阶段">
            <el-option
              v-for="s in stage"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="施工时间" prop="_timeRange">
          <el-date-picker
            v-model="formObj._timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开工时间"
            end-placeholder="完工时间"
          />
        </el-form-item>
        <el-form-item label="剩余工期" prop="csLeftTime">
          <el-input
            clearable
            v-model="formObj.csLeftTime"
            placeholder="剩余工期，例如几年、几月、几周、几天等"
          />
        </el-form-item>
        <el-form-item label="占地面积" prop="csFloorSpace">
          <el-input
            clearable
            v-model="formObj.csFloorSpace"
            placeholder="占地面积"
          >
            <template #append>㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="施工面积" prop="csConstructionArea">
          <el-input
            clearable
            v-model="formObj.csConstructionArea"
            placeholder="施工面积"
          >
            <template #append>㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每月施工面积" prop="csConstructionAreaPerMonth">
          <el-input
            clearable
            v-model="formObj.csConstructionAreaPerMonth"
            placeholder="每月施工面积"
          >
            <template #append>㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="业主单位" prop="csEmployerUnit">
          <el-input
            clearable
            v-model="formObj.csEmployerUnit"
            placeholder="业主单位"
          />
        </el-form-item>
        <el-form-item label="业主单位联系人" prop="csEmployerContacts">
          <el-input
            clearable
            v-model="formObj.csEmployerContacts"
            placeholder="业主单位联系人"
          />
        </el-form-item>
        <el-form-item
          label="业主单位联系电话"
          prop="csEmployerContactsTel"
          class="input-with-select"
        >
          <el-input
            clearable
            type="tel"
            v-model="formObj.csEmployerContactsTel"
            placeholder="业主单位联系电话"
          >
            <template #prepend>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="施工单位" prop="csConstructionUnit">
          <el-input
            clearable
            v-model="formObj.csConstructionUnit"
            placeholder="施工单位"
          />
        </el-form-item>
        <el-form-item label="施工单位联系人" prop="csConstructionContacts">
          <el-input
            clearable
            v-model="formObj.csConstructionContacts"
            placeholder="施工单位联系人"
          />
        </el-form-item>
        <el-form-item label="施工单位联系电话" prop="csConstructionContactsTel">
          <el-input
            clearable
            type="tel"
            v-model="formObj.csConstructionContactsTel"
            placeholder="施工单位联系电话"
          >
            <template #prepend>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="安全员" prop="csSecurityOfficer">
          <el-input
            clearable
            v-model="formObj.csSecurityOfficer"
            placeholder="安全员"
          />
        </el-form-item>
        <el-form-item label="安全员电话" prop="csSecurityOfficerTel">
          <el-input
            clearable
            type="tel"
            v-model="formObj.csSecurityOfficerTel"
            placeholder="安全员电话"
          >
            <template #prepend>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            :disabled="!edit"
            type="primary"
            @click="onSubmit"
            :loading="loading"
            >提交</el-button
          >
          <el-button :disabled="!edit" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #description-items>
      <el-descriptions
        v-show="showStyle == 'descriptions'"
        :column="2"
        :size="fontSize"
        direction="horizontal"
        border
      >
        <template #append>㎡</template>
      </el-input>
    </el-form-item>
    <el-form-item label="业主单位" prop="csEmployerUnit">
      <el-input
        clearable
        v-model="formObj.csEmployerUnit"
        placeholder="业主单位"
      />
    </el-form-item>
    <el-form-item label="业主单位联系人" prop="csEmployerContacts">
      <el-input
        clearable
        v-model="formObj.csEmployerContacts"
        placeholder="业主单位联系人"
      />
    </el-form-item>
    <el-form-item
      label="业主单位联系电话"
      prop="csEmployerContactsTel"
      class="input-with-select"
    >
      <el-input
        clearable
        type="tel"
        v-model="formObj.csEmployerContactsTel"
        placeholder="业主单位联系电话"
      >
        <template #prepend>
          <el-icon><Iphone /></el-icon>
        <template #title>
          <el-text tag="h1">{{ title }}</el-text>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="施工单位" prop="csConstructionUnit">
      <el-input
        clearable
        v-model="formObj.csConstructionUnit"
        placeholder="施工单位"
      />
    </el-form-item>
    <el-form-item label="施工单位联系人" prop="csConstructionContacts">
      <el-input
        <template #extra>
          <el-button
            :disabled="!edit && !ignoreEdit"
            :size="fontSize"
            type="primary"
            @click="onSubmit"
            :loading="loading"
            >提交</el-button
          >
          <el-button
            :size="fontSize"
            :disabled="!edit && !ignoreEdit"
            @click="onReset"
            >重置</el-button
          >
        </template>
        <el-descriptions-item label="工程类型"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csProjectType"
            placeholder="工程类型"
        /></el-descriptions-item>
        <el-descriptions-item label="建设状态"
          ><el-select v-model="formObj.csStatus" placeholder="建设状态">
            <el-option
              v-for="s in status"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item label="施工阶段"
          ><el-select
            v-model="formObj.siExtension1"
            placeholder="施工阶段"
            :size="fontSize"
          >
            <el-option
              v-for="s in stage"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item label="施工时间"
          ><el-date-picker
            :size="fontSize"
            v-model="formObj._timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开工时间"
            end-placeholder="完工时间"
        /></el-descriptions-item>
        <el-descriptions-item label="剩余工期"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csLeftTime"
            placeholder="剩余工期，例如几年、几月、几周、几天等"
        /></el-descriptions-item>
        <el-descriptions-item label="施工地址" span="2"
          ><el-input
            clearable
            v-model="sceneObj.location"
            placeholder="施工地址"
            :size="fontSize"
        /></el-descriptions-item>
        <el-descriptions-item label="占地面积" rowspan="2"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csFloorSpace"
            placeholder="占地面积"
          >
            <template #append>㎡</template>
          </el-input></el-descriptions-item
        >
        <el-descriptions-item label="施工面积"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csConstructionArea"
            placeholder="施工面积"
          >
            <template #append>㎡</template>
          </el-input></el-descriptions-item
        >
        <el-descriptions-item label="每月施工面积"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csConstructionAreaPerMonth"
            placeholder="每月施工面积"
          >
            <template #append>㎡</template>
          </el-input></el-descriptions-item
        >
        <el-descriptions-item label="项目负责人"
          ><el-input
            :size="fontSize"
            clearable
            v-model="sceneObj.contacts"
            placeholder="项目负责人"
        /></el-descriptions-item>
        <el-descriptions-item label="项目负责人电话"
          ><el-input
            :size="fontSize"
            clearable
            type="tel"
            v-model="sceneObj.contactst"
            placeholder="项目负责人电话"
          >
            <template #prepend>
              <el-icon><Iphone /></el-icon>
            </template> </el-input
        ></el-descriptions-item>
        <el-descriptions-item label="安全员"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csSecurityOfficer"
            placeholder="安全员"
        /></el-descriptions-item>
        <el-descriptions-item label="安全员电话"
          ><el-input
            :size="fontSize"
            clearable
            type="tel"
            v-model="formObj.csSecurityOfficerTel"
            placeholder="安全员电话"
          >
            <template #prepend>
              <el-icon><Iphone /></el-icon>
            </template> </el-input
        ></el-descriptions-item>
        <el-descriptions-item label="总包单位"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csConstructionUnit"
            placeholder="总包单位"
        /></el-descriptions-item>
        <!-- <el-descriptions-item label="施工单位联系人"
      ><el-input
        clearable
        v-model="formObj.csConstructionContacts"
        placeholder="施工单位联系人"
      />
    </el-form-item>
    <el-form-item label="施工单位联系电话" prop="csConstructionContactsTel">
      <el-input
    /></el-descriptions-item>
    <el-descriptions-item label="施工单位联系电话"
      ><el-input
        clearable
        type="tel"
        v-model="formObj.csConstructionContactsTel"
@@ -127,68 +343,79 @@
      >
        <template #prepend>
          <el-icon><Iphone /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="安全员" prop="csSecurityOfficer">
      <el-input
        </template> </el-input
    ></el-descriptions-item> -->
        <el-descriptions-item label="建设单位"
          ><el-input
            :size="fontSize"
            clearable
            v-model="formObj.csEmployerUnit"
            placeholder="建设单位"
        /></el-descriptions-item>
        <!-- <el-descriptions-item label="业主单位联系人"
      ><el-input
        clearable
        v-model="formObj.csSecurityOfficer"
        placeholder="安全员"
      />
    </el-form-item>
    <el-form-item label="安全员电话" prop="csSecurityOfficerTel">
      <el-input
        v-model="formObj.csEmployerContacts"
        placeholder="业主单位联系人"
    /></el-descriptions-item>
    <el-descriptions-item label="业主单位联系电话"
      ><el-input
        clearable
        type="tel"
        v-model="formObj.csSecurityOfficerTel"
        placeholder="安全员电话"
        v-model="formObj.csEmployerContactsTel"
        placeholder="业主单位联系电话"
      >
        <template #prepend>
          <el-icon><Iphone /></el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button
        :disabled="!edit"
        type="primary"
        @click="onSubmit"
        :loading="loading"
        >提交</el-button
      >
      <el-button :disabled="!edit" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
        </template> </el-input
    ></el-descriptions-item> -->
      </el-descriptions>
    </template>
  </BaseSceneInfo>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { useDateFormat } from '@vueuse/core';
import { reactive, ref, watch, computed } from 'vue';
import { enumStatusNA, enumStageNA } from '@/enum/construction';
import sceneApi from '@/api/fysp/sceneApi';
import { useFormConfirm } from '@/composables/formConfirm';
import BaseSceneInfo from './BaseSceneInfo.vue';

const props = defineProps({
  scene: Object,
  //工地额外信息
  formInfo: Object,
  //场景类型：工地
  sceneType: {
    type: Number,
    default: 1,
    default: 1
  },
  // 展示样式 form：表单；descriptions：描述列表
  showStyle: {
    type: String,
    default: 'descriptions'
    // default:'form'
  },
  title: String
});
const emit = defineEmits(['onSubmit', 'onCancel']);
const fontSize = ref('small');
const emit = defineEmits([
  'onSubmit',
  'onCancel',
  'update:scene',
  'update:formInfo'
]);

const sceneObj = ref({});
const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({
  submit: {
    do: submit,
    do: submit
  },
  cancel: {
    do: cancel,
  },
    do: cancel
  }
});
const ignoreEdit = computed(() => props.showStyle == 'descriptions');

const loading = ref(false);
const status = reactive(enumStatusNA());
const stage = reactive(enumStageNA());
@@ -197,48 +424,28 @@
    {
      required: true,
      message: '工程类型不能为空',
      trigger: 'blur',
    },
      trigger: 'blur'
    }
  ],
  csStatus: [
    {
      required: true,
      message: '建设状态不能为空',
      trigger: 'change',
    },
      trigger: 'change'
    }
  ],
  siExtension1: [
    {
      required: true,
      message: '施工阶段不能为空',
      trigger: 'change',
    },
  ],
      trigger: 'change'
    }
  ]
});

// 创建或更新场景详情
function createOrupdateScene() {
  loading.value = true;

  if (formObj.value._timeRange && formObj.value._timeRange.length == 2) {
    const t = formObj.value._timeRange;
    formObj.value.csStartTime = useDateFormat(t[0], 'YYYY-MM-DD');
    formObj.value.csEndTime = useDateFormat(t[1], 'YYYY-MM-DD');
  }
  return sceneApi
    .updateSubScene(props.sceneType, formObj.value)
    .then((res) => {
      return res.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

const baseSceneInfo = ref(null);
function submit() {
  emit('onSubmit', formObj);

  return createOrupdateScene();
  return baseSceneInfo.value.submit();
}

function cancel() {
@@ -252,12 +459,22 @@
      formObj.value = nValue;
      formObj.value._timeRange = [
        new Date(formObj.value.csStartTime),
        new Date(formObj.value.csEndTime),
        new Date(formObj.value.csEndTime)
      ];
    }
  },
  { deep: false, immediate: true }
);

watch(
  () => props.scene,
  (nValue) => {
    if (nValue) {
      sceneObj.value = nValue;
    }
  },
  { deep: false, immediate: true }
);
</script>

<style>