bxztApp/packages/screen/src/views/ProjectManagement_Rebuild/addDialog.vue

<template>
  <div class="detail-container">
    <el-form ref="formRef" :model="form" label-position="right" label-width="150px"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules" :disabled="disabled">
      <el-row style="margin: 20px 20px;">
        <h4>基本信息</h4>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="区县名称" prop="区县名称">
            <el-input v-model="form.project.districtName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路线编码" prop="路线编码">
            <el-input v-model="form.project.routeNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实施里程（公里）" prop="实施里程">
            <el-input-number v-model="form.project.implementMileage" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路线名称" prop="路线名称">
            <el-input v-model="form.project.routeName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="起点桩号" prop="起点桩号">
            <el-input v-model="form.project.startStakeNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="止点桩号" prop="止点桩号">
            <el-input v-model="form.project.endStakeNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="总投资（万元）" prop="总投资">
            <el-input-number v-model="form.project.totalInvestment" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预估费用（万元）" prop="预估费用">
            <el-input-number v-model="form.project.estimatedCost" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="技术等级" prop="技术等级">
            <el-select v-model="form.project.technicalGrade">
              <el-option
                v-for="item in [{ value: '三级', label: '三级' }, { value: '二级', label: '二级' }, { value: '一级', label: '一级' }]"
                :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资金来源" prop="资金来源">
            <el-input v-model="form.project.fundingSource"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="处置灾毁处数" prop="处置灾毁处数">
            <el-input-number v-model="form.project.disposalCount" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="已完工处数" prop="已完工处数">
            <el-input-number v-model="form.project.completedCount" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目费用类型" prop="项目费用类型">
            <el-radio-group v-model="form.project.projectExpenseType">
              <el-radio value="自费重修">自费重修</el-radio>
              <el-radio value="申报重修">申报重修</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin: 20px 20px;">
        <h4>实施情况</h4>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主要建设内容" prop="主要建设内容">
            <el-input v-model="form.project.mainConstructionContent" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开工或预计开工时间" prop="开工或预计开工时间">
            <el-date-picker type="date" v-model="form.project.startTime" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完工或预计完工时间" prop="完工或预计完工时间">
            <el-date-picker type="date" v-model="form.project.endTime" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="是否在部交通统计报表管理系统报送投资" prop="是否在部交通统计报表管理系统报送投资" label-width="300px">
            <el-radio-group v-model="form.project.isReportedToMinistry">
              <el-radio value="1">是</el-radio>
              <el-radio value="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="已报送投资额" prop="已报送投资额" label-width="160px">
            <el-input-number v-model="form.project.reportedInvestment" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="建设单位名称" prop="建设单位名称">
            <el-input v-model="form.project.constructionUnit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设单位联系人" prop="建设单位联系人">
            <el-input v-model="form.project.constructionUnitContact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="建设单位联系电话" prop="建设单位联系电话">
            <el-input v-model="form.project.constructionUnitPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工单位名称" prop="施工单位名称">
            <el-input v-model="form.project.executionUnit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="施工单位联系人" prop="施工单位联系人">
            <el-input v-model="form.project.executionUnitContact"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工单位联系电话" prop="施工单位联系电话">
            <el-input v-model="form.project.executionUnitPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="设计单位名称" prop="设计单位名称">
            <el-input v-model="form.project.designUnit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设计单位联系人" prop="设计单位联系人">
            <el-input v-model="form.project.designUnitContact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="设计单位联系电话" prop="设计单位联系电话">
            <el-input v-model="form.project.designUnitPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监理单位名称" prop="监理单位名称">
            <el-input v-model="form.project.supervisionUnit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="监理单位联系人" prop="监理单位联系人">
            <el-input v-model="form.project.supervisionUnitContact"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监理单位联系电话" prop="监理单位联系电话">
            <el-input v-model="form.project.supervisionUnitPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="施工图批复时间" prop="施工图批复时间">
            <el-date-picker type="date" v-model="form.project.designApprovalTime" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工图批复文件" prop="施工图批复文件">
            <el-input v-model="form.project.xxx"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="施工合同时间" prop="施工合同时间">
            <el-date-picker type="date" v-model="form.project.contractTime" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工合同金额" prop="施工合同金额">
            <el-input-number v-model="form.project.contractAmount" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="施工合同" prop="施工合同">
            <el-input v-model="form.project.xxxx"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设完成投资" prop="建设完成投资">
            <el-input-number v-model="form.project.completedInvestment" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="交竣工验收时间" prop="交竣工验收时间">
            <el-date-picker type="date" v-model="form.project.acceptanceTime" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交竣工证书" prop="交竣工证书">
            <el-input v-model="form.project.xxxx"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="其他佐证文件" prop="其他佐证文件">
            <el-input v-model="form.project.xxxx"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完工项目上传" prop="完工项目上传">
            <el-input v-model="form.project.xxxx"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { request } from "@/utils/request";
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  }
});
const sfjwd = ref("是");
const qx = ref("");
const loading = ref(false);
const selectOptions = ref([]);
const qxList = ref([]);

// 根据用户信息 查询角色列表
const getUserList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
    } else {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log(error);
  }
};

// 选择人员筛选
const remoteMethod = async (query) => {
  if (query === "") {
    selectOptions.value = [];
    return [];
  }
  loading.value = true;
  const res = await getUserList(query);
  if (res) {
    selectOptions.value = res;
  }
  loading.value = false;
};

// 根据区县名称 查询区县列表
const getQxList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/district/listDistricts?qxmc=${keyword}`;
    } else {
      url = `/snow-ops-platform/district/listDistricts?qxmc=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) { }
};

// 选择区县筛选
const remoteMethod_qx = async (query) => {
  loading.value = true;
  const res = await getQxList(query);
  if (res) {
    qxList.value = res;
  }
  loading.value = false;
};

// 选择区县
const handleSelect_qx = (value) => {
  props.form.qxmc = value;
};

// 选择人员
const handleSelect = (value) => {
  console.log("value", value);
  props.form.fzrXm = value.realName;
  props.form.fzrSjhm = value.phone;
  props.form.fzrUserId = value.userId;
};

const rules = computed(() => {
  return {
    mc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.mc) {
            callback();
          } else {
            callback(new Error("请输入服务站名称"));
          }
        },
        trigger: "blur",
      },
    ],
    qxmc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.qxmc) {
            callback();
          } else {
            callback(new Error("请选择所属区县"));
          }
        },
        trigger: "blur",
      },
    ],
    fzr: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.fzrUserId && props.form.fzrXm && props.form.fzrSjhm) {
            callback();
          } else {
            callback(new Error("请选择负责人"));
          }
        },
        trigger: "blur",
      },
    ],
    jd: [
      {
        required: sfjwd.value === "否",
        validator: (rule, value, callback) => {
          if (props.form.jd) {
            callback();
          } else {
            callback(new Error("请输入站点经度"));
          }
        },
        trigger: "blur",
      },
    ],
    wd: [
      {
        required: sfjwd.value === "否",
        validator: (rule, value, callback) => {
          if (props.form.wd) {
            callback();
          } else {
            callback(new Error("请输入站点纬度"));
          }
        },
        trigger: "blur",
      },
    ],
  };
});
</script>

<style></style>