- <template>
- <div class="operate">
- <el-form ref="ruleForm" :model="form" :rules="rules" :disabled="opts.type == 'view'">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="项目名称:" prop="projectNo" class="formItem140">
- <el-select
- v-model="form.projectNo"
- placeholder="请选择项目名称"
- style="width: 100%"
- filterable
- @change="projectChange"
- :disabled="opts.type == 'view' || opts.type == 'edit'"
- >
- <el-option v-for="dict in projectList" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="项目编码:" prop="projectNo" class="formItem140">
- <el-input v-model="form.projectNo" :disabled="true" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="建设状态:" prop="buildStatus" class="formItem140">
- <el-input v-model="form.buildStatusName" :disabled="true" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="项目估算(万元):" prop="valuation" class="formItem140">
- <el-input v-model="form.valuation" placeholder="请输入项目估算" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="项目运作模式:" prop="projectOperationPattern" class="formItem140">
- <el-input v-model="form.projectOperationPattern" :disabled="true" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="建设单位:" prop="chargeDepartment" class="formItem140">
- <el-input v-model="form.chargeDepartment" :disabled="true" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="责任人:" prop="chargeUser" class="formItem140">
- <el-input v-model="form.chargeUser" :disabled="true" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="联系方式:" prop="phone" class="formItem140">
- <el-input v-model="form.phone" :disabled="true" />
- </el-form-item>
- </el-col>
- </el-row>
- <div class="box" v-for="(item, i) in form.projectProcessAttachmentSaveRequestList">
- <el-row :gutter="20">
- <el-col :span="8">
- <!-- 必填 :rules="rules['filieDescription']"-->
- <el-form-item
- :label="`${item.name}:`"
- :prop="'projectProcessAttachmentSaveRequestList.' + i + '.' + 'filieDescription'"
- class="formItem140"
- >
- <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" placeholder="请输入资料说明" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <ImageFileUpload
- listType="text"
- :limit="10"
- :saveFileArr="item.fileList"
- :refType="item.dictType"
- :refField="item.dictData"
- :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
- />
- </el-col>
- </el-row>
- </div>
- <el-form-item label="项目位置:" prop="projectLocation" class="formItem140">
- <div class="mapBox">
- <MapBox
- ref="mapBoxRef"
- :isShowSearch="false"
- :isShowTool="false"
- :isSelectAddress="true"
- @getPlace="getAddress"
- :previousPoint="previousPoint"
- :previousPointName="previousPointName"
- :isOpenDeaw="false"
- ></MapBox>
- </div>
- </el-form-item>
- </el-form>
- </div>
- </template>
-
- <script setup>
- import { required } from '@/utils/validate-helper';
- import {
- getProjectInfoNewList,
- getDicts,
- projectApprovalAdd,
- projectApprovalEdit,
- projectApprovalDetail,
- } from '@/api/project/projectApproval';
- import { useDicts } from '@/hooks';
- import MapBox from '@/components/Map';
- import { inheritAttr } from '@/utils/v3';
- import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
-
- const { proxy } = getCurrentInstance();
- const showDetail = ref(false);
- const fileObj = ref({});
- const { findText } = useDicts(proxy);
- const previousPoint = ref('');
- const previousPointName = ref('');
- const props = defineProps({
- curRow: {
- type: Object,
- default: () => ({}),
- },
- opts: {
- type: Object,
- default: () => ({}),
- },
- });
- const { curRow, opts } = props;
- const emit = defineEmits(['close']);
- const form = reactive({
- projectName: '',
- projectNo: '',
- projectNo: '',
- buildStatus: '',
- buildStatusName: '',
- valuation: '',
- projectOperationPattern: '',
- chargeDepartment: '',
- chargeUser: '',
- phone: '',
- sysFileSaveRequestList: [],
- projectLocation: '',
- projectProcessAttachmentSaveRequestList: [],
- });
-
- watch(
- () => form.projectLocation,
- () => {
- nextTick(() => {
- proxy.$refs.ruleForm.validateField('projectLocation');
- });
- }
- );
-
- const rules = reactive({
- projectNo: required('项目名称'),
- projectNo: required('项目编码'),
- buildStatus: required('建设状态'),
- valuation: required('项目估算'),
- projectOperationPattern: required('项目运作模式'),
- chargeDepartment: required('建设单位'),
- chargeUser: required('责任人'),
- phone: required('联系方式'),
- filieDescription: required('内容'),
- projectLocation: required('项目位置'),
- });
-
- const projectList = ref([]);
-
- const mapForm = reactive({
- geometry: '',
- });
-
- // 地图点击获取经纬度
- function getAddress(val) {
- form.projectLocation = val.lonLat[0] + ',' + val.lonLat[1];
- }
-
- const getProjectList = async () => {
- const res = await getProjectInfoNewList();
- if (res?.code !== 200) return;
- projectList.value = res?.data || [];
- if (opts.type === 'add' && projectList.value.length) {
- projectChange(projectList.value[0].projectNo);
- fileObj.value.refId = projectList.value[0].id; //项目返回的id值
- }
- };
-
- const projectChange = val => {
- mapForm.geometry = '';
- form.projectLocation = '';
- const obj = projectList.value.find(item => item.projectNo === val);
- console.log('projectChange---', obj);
- previousPoint.value = obj.projectLocation;
- previousPointName.value = obj.projectName;
- fileObj.value.refId = obj.id; //项目返回的id值
- inheritAttr(obj, form);
- form.buildStatusName = findText('build_status', form.buildStatus);
- form.projectOperationPattern = findText('project_operation_pattern', form.projectOperationPattern);
-
- getDictMaps('pro_project_approval');
-
- nextTick(() => {
- viewPosition(form.projectLocation);
- });
- };
-
- const viewPosition = projectLocation => {
- if (!projectLocation) return;
- let data = [];
- if (projectLocation.includes('POINT')) {
- data = [
- {
- type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
- id: 'point',
- style: {
- radius: 10,
- clampToGround: false,
- material: 'rgba(255, 0, 0, 1)',
- },
- geometrys: projectLocation,
- },
- ];
- } else if (projectLocation.includes('LINE')) {
- data = [
- {
- type: NewFiberMap.Enum.VectorType.POLYLINE,
- id: 'line',
- geometrys: projectLocation,
- style: {
- width: 5,
- material: 'rgba(255,0,0,1)',
- clampToGround: true,
- },
- },
- ];
- } else if (projectLocation.includes('POLYGON')) {
- data = [
- {
- type: NewFiberMap.Enum.VectorType.POLYGON,
- style: { material: 'rgba(255,0,0,1)', color: 'rgba(255,0,0,1)' },
- geometrys: projectLocation,
- id: 'area',
- },
- ];
- }
- if (data.length) {
- setTimeout(() => {
- let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
- toCenterByGeoJson(geojson);
- newfiberMap.geojsonToMap(geojson);
- }, 500);
- }
- };
-
- const toCenterByGeoJson = geojson => {
- let coords = turf.getCoords(geojson.features[0].geometry).flat();
- let flag = geojson.features.length == 1 && coords.length == 2;
- if (!!geojson.features.length && !flag) {
- newfiberMap.getMap().camera.flyTo({
- destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
- });
- } else {
- newfiberMap.setCenter({
- roll: 0.01658908985506884,
- pitch: -87.24924906709752,
- heading: 5.026928271138224,
- lng: coords[0],
- lat: coords[1],
- height: 943.5996932813425,
- });
- }
- };
-
- const getDictMaps = async dictType => {
- const res = await getDicts(dictType);
- if (res?.code !== 200) return;
- if (res?.data) {
- form.projectProcessAttachmentSaveRequestList = [];
- for (const item of res.data) {
- form.projectProcessAttachmentSaveRequestList.push({
- fileList: [],
- dictData: item.dictValue,
- dictType: item.dictType,
- filieDescription: '',
- projectNo: '',
- name: item.dictLabel,
- });
- }
- }
- setTimeout(() => {
- if (proxy.$refs.ruleForm) {
- proxy.$refs.ruleForm.clearValidate();
- }
- });
- };
-
- const submit = () => {
- proxy.$refs.ruleForm.validate(async (valid, fields) => {
- if (valid) {
- const params = JSON.parse(JSON.stringify(form));
- for (const item of params.projectProcessAttachmentSaveRequestList) {
- item.projectNo = params.projectNo;
- for (const it of item.fileList) {
- params.sysFileSaveRequestList.push(it);
- }
- }
- console.log(params);
- let methed = '';
- if (curRow?.id) {
- params.id = curRow.id;
- methed = projectApprovalEdit;
- } else {
- methed = projectApprovalAdd;
- }
- const res = await methed(params);
- if (res?.code !== 200) return;
- proxy.$modal.msgSuccess('操作成功!');
- emit('close');
- } else {
- console.log('error submit!', fields);
- }
- });
- };
- // 获取详情数据
- const getDetail = async () => {
- const res = await projectApprovalDetail(curRow.id);
- if (res?.code !== 200) return;
- fileObj.value.refId = res.data.projectId; //项目返回的id值
- previousPoint.value = res.data.projectLocation;
- previousPointName.value = res.data.projectName;
- inheritAttr(res.data, form);
- const fileGroup = res.data.fileGroup;
- const res1 = await getDicts('pro_project_approval');
- form.buildStatusName = findText('build_status', form.buildStatus);
- const dicts = res1.data;
- for (const key in fileGroup) {
- if (Object.hasOwnProperty.call(fileGroup, key)) {
- const element = fileGroup[key];
- for (const item of element) {
- const info = dicts.find(it => it.dictValue === item.dictData);
- form.projectProcessAttachmentSaveRequestList.push({
- fileList: item.fileList,
- dictData: item.dictData,
- dictType: item.dictType,
- filieDescription: item.filieDescription,
- projectNo: item.projectNo,
- name: info.dictLabel,
- });
- }
- }
- }
- nextTick(() => {
- viewPosition(form.projectLocation);
- });
- };
-
- onMounted(() => {
- getProjectList(); //获取项目列表
- if (curRow?.id) {
- getDetail();
- }
- });
-
- defineExpose({
- submit,
- });
- </script>
-
- <style lang="scss" scoped>
- .operate {
- .mapBox {
- width: 100%;
- height: 500px;
- }
- .box {
- margin-bottom: 10px;
- }
- }
- </style>