2025.9.18 数据产品（待完成）

riku

2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33

 src/views/fysp/scene/CompSceneConstructionInfo.vue

@@ -1,6 +1,7 @@
<!-- 工地专属信息编辑 -->
<template>
  <el-form
    v-show="showStyle == 'form'"
    :inline="false"
    :model="formObj"
    ref="formRef"
@@ -161,34 +162,250 @@
      <el-button :disabled="!edit" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>

  <el-descriptions
    v-show="showStyle == 'descriptions'"
    :column="2"
    :size="fontSize"
    direction="horizontal"
    border
  >
    <template #title>
      <el-text tag="h1">{{ title }}</el-text>
    </template>
    <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-descriptions-item>
    <el-descriptions-item label="施工单位联系电话"
      ><el-input
        clearable
        type="tel"
        v-model="formObj.csConstructionContactsTel"
        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.csEmployerUnit"
        placeholder="建设单位"
    /></el-descriptions-item>
    <!-- <el-descriptions-item label="业主单位联系人"
      ><el-input
        clearable
        v-model="formObj.csEmployerContacts"
        placeholder="业主单位联系人"
    /></el-descriptions-item>
    <el-descriptions-item label="业主单位联系电话"
      ><el-input
        clearable
        type="tel"
        v-model="formObj.csEmployerContactsTel"
        placeholder="业主单位联系电话"
      >
        <template #prepend>
          <el-icon><Iphone /></el-icon>
        </template> </el-input
    ></el-descriptions-item> -->
  </el-descriptions>
</template>

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

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,27 +414,27 @@
    {
      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() {
function createOrupdateSubScene() {
  loading.value = true;

  if (formObj.value._timeRange && formObj.value._timeRange.length == 2) {
@@ -228,6 +445,8 @@
  return sceneApi
    .updateSubScene(props.sceneType, formObj.value)
    .then((res) => {
      emit('onSubmit', formObj);
      emit('update:formInfo', formObj);
      return res.data;
    })
    .finally(() => {
@@ -235,10 +454,16 @@
    });
}

function submit() {
  emit('onSubmit', formObj);
// 更新场景
function updateScene() {
  return sceneApi.updateScene(sceneObj.value).then(() => {
    emit('update:scene', sceneObj);
  });
}

  return createOrupdateScene();
function submit() {
  updateScene();
  return createOrupdateSubScene();
}

function cancel() {
@@ -252,12 +477,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>