Newer
Older
KaiFengPC / src / views / project / processControl / approval / operate.vue
@zhangdeliang zhangdeliang on 25 Jun 11 KB update
  1. <template>
  2. <div class="operate">
  3. <el-form ref="ruleForm" :model="form" :rules="rules" :disabled="opts.type == 'view'">
  4. <el-row :gutter="20">
  5. <el-col :span="12">
  6. <el-form-item label="项目名称:" prop="projectNo" class="formItem140">
  7. <el-select
  8. v-model="form.projectNo"
  9. placeholder="请选择项目名称"
  10. style="width: 100%"
  11. filterable
  12. @change="projectChange"
  13. :disabled="opts.type == 'view' || opts.type == 'edit'"
  14. >
  15. <el-option v-for="dict in projectList" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" />
  16. </el-select>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :span="12">
  20. <el-form-item label="项目编码:" prop="projectNo" class="formItem140">
  21. <el-input v-model="form.projectNo" :disabled="true" />
  22. </el-form-item>
  23. </el-col>
  24. </el-row>
  25. <el-row :gutter="20">
  26. <el-col :span="12">
  27. <el-form-item label="建设状态:" prop="buildStatus" class="formItem140">
  28. <el-input v-model="form.buildStatusName" :disabled="true" />
  29. </el-form-item>
  30. </el-col>
  31. <el-col :span="12">
  32. <el-form-item label="项目估算(万元):" prop="valuation" class="formItem140">
  33. <el-input v-model="form.valuation" placeholder="请输入项目估算" />
  34. </el-form-item>
  35. </el-col>
  36. </el-row>
  37. <el-row :gutter="20">
  38. <el-col :span="12">
  39. <el-form-item label="项目运作模式:" prop="projectOperationPattern" class="formItem140">
  40. <el-input v-model="form.projectOperationPattern" :disabled="true" />
  41. </el-form-item>
  42. </el-col>
  43. <el-col :span="12">
  44. <el-form-item label="建设单位:" prop="chargeDepartment" class="formItem140">
  45. <el-input v-model="form.chargeDepartment" :disabled="true" />
  46. </el-form-item>
  47. </el-col>
  48. </el-row>
  49. <el-row :gutter="20">
  50. <el-col :span="12">
  51. <el-form-item label="责任人:" prop="chargeUser" class="formItem140">
  52. <el-input v-model="form.chargeUser" :disabled="true" />
  53. </el-form-item>
  54. </el-col>
  55. <el-col :span="12">
  56. <el-form-item label="联系方式:" prop="phone" class="formItem140">
  57. <el-input v-model="form.phone" :disabled="true" />
  58. </el-form-item>
  59. </el-col>
  60. </el-row>
  61. <div class="box" v-for="(item, i) in form.projectProcessAttachmentSaveRequestList">
  62. <el-row :gutter="20">
  63. <el-col :span="8">
  64. <!-- 必填 :rules="rules['filieDescription']"-->
  65. <el-form-item
  66. :label="`${item.name}:`"
  67. :prop="'projectProcessAttachmentSaveRequestList.' + i + '.' + 'filieDescription'"
  68. class="formItem140"
  69. >
  70. <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" placeholder="请输入资料说明" />
  71. </el-form-item>
  72. </el-col>
  73. <el-col :span="12">
  74. <ImageFileUpload
  75. listType="text"
  76. :limit="10"
  77. :saveFileArr="item.fileList"
  78. :refType="item.dictType"
  79. :refField="item.dictData"
  80. :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
  81. />
  82. </el-col>
  83. </el-row>
  84. </div>
  85. <el-form-item label="项目位置:" prop="projectLocation" class="formItem140">
  86. <div class="mapBox">
  87. <MapBox
  88. ref="mapBoxRef"
  89. :isShowSearch="false"
  90. :isShowTool="false"
  91. :isSelectAddress="true"
  92. @getPlace="getAddress"
  93. :previousPoint="previousPoint"
  94. :previousPointName="previousPointName"
  95. :isOpenDeaw="false"
  96. ></MapBox>
  97. </div>
  98. </el-form-item>
  99. </el-form>
  100. </div>
  101. </template>
  102.  
  103. <script setup>
  104. import { required } from '@/utils/validate-helper';
  105. import {
  106. getProjectInfoNewList,
  107. getDicts,
  108. projectApprovalAdd,
  109. projectApprovalEdit,
  110. projectApprovalDetail,
  111. } from '@/api/project/projectApproval';
  112. import { useDicts } from '@/hooks';
  113. import MapBox from '@/components/Map';
  114. import { inheritAttr } from '@/utils/v3';
  115. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  116.  
  117. const { proxy } = getCurrentInstance();
  118. const showDetail = ref(false);
  119. const fileObj = ref({});
  120. const { findText } = useDicts(proxy);
  121. const previousPoint = ref('');
  122. const previousPointName = ref('');
  123. const props = defineProps({
  124. curRow: {
  125. type: Object,
  126. default: () => ({}),
  127. },
  128. opts: {
  129. type: Object,
  130. default: () => ({}),
  131. },
  132. });
  133. const { curRow, opts } = props;
  134. const emit = defineEmits(['close']);
  135. const form = reactive({
  136. projectName: '',
  137. projectNo: '',
  138. projectNo: '',
  139. buildStatus: '',
  140. buildStatusName: '',
  141. valuation: '',
  142. projectOperationPattern: '',
  143. chargeDepartment: '',
  144. chargeUser: '',
  145. phone: '',
  146. sysFileSaveRequestList: [],
  147. projectLocation: '',
  148. projectProcessAttachmentSaveRequestList: [],
  149. });
  150.  
  151. watch(
  152. () => form.projectLocation,
  153. () => {
  154. nextTick(() => {
  155. proxy.$refs.ruleForm.validateField('projectLocation');
  156. });
  157. }
  158. );
  159.  
  160. const rules = reactive({
  161. projectNo: required('项目名称'),
  162. projectNo: required('项目编码'),
  163. buildStatus: required('建设状态'),
  164. valuation: required('项目估算'),
  165. projectOperationPattern: required('项目运作模式'),
  166. chargeDepartment: required('建设单位'),
  167. chargeUser: required('责任人'),
  168. phone: required('联系方式'),
  169. filieDescription: required('内容'),
  170. projectLocation: required('项目位置'),
  171. });
  172.  
  173. const projectList = ref([]);
  174.  
  175. const mapForm = reactive({
  176. geometry: '',
  177. });
  178.  
  179. // 地图点击获取经纬度
  180. function getAddress(val) {
  181. form.projectLocation = val.lonLat[0] + ',' + val.lonLat[1];
  182. }
  183.  
  184. const getProjectList = async () => {
  185. const res = await getProjectInfoNewList();
  186. if (res?.code !== 200) return;
  187. projectList.value = res?.data || [];
  188. if (opts.type === 'add' && projectList.value.length) {
  189. projectChange(projectList.value[0].projectNo);
  190. fileObj.value.refId = projectList.value[0].id; //项目返回的id值
  191. }
  192. };
  193.  
  194. const projectChange = val => {
  195. mapForm.geometry = '';
  196. form.projectLocation = '';
  197. const obj = projectList.value.find(item => item.projectNo === val);
  198. console.log('projectChange---', obj);
  199. previousPoint.value = obj.projectLocation;
  200. previousPointName.value = obj.projectName;
  201. fileObj.value.refId = obj.id; //项目返回的id值
  202. inheritAttr(obj, form);
  203. form.buildStatusName = findText('build_status', form.buildStatus);
  204. form.projectOperationPattern = findText('project_operation_pattern', form.projectOperationPattern);
  205.  
  206. getDictMaps('pro_project_approval');
  207.  
  208. nextTick(() => {
  209. viewPosition(form.projectLocation);
  210. });
  211. };
  212.  
  213. const viewPosition = projectLocation => {
  214. if (!projectLocation) return;
  215. let data = [];
  216. if (projectLocation.includes('POINT')) {
  217. data = [
  218. {
  219. type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
  220. id: 'point',
  221. style: {
  222. radius: 10,
  223. clampToGround: false,
  224. material: 'rgba(255, 0, 0, 1)',
  225. },
  226. geometrys: projectLocation,
  227. },
  228. ];
  229. } else if (projectLocation.includes('LINE')) {
  230. data = [
  231. {
  232. type: NewFiberMap.Enum.VectorType.POLYLINE,
  233. id: 'line',
  234. geometrys: projectLocation,
  235. style: {
  236. width: 5,
  237. material: 'rgba(255,0,0,1)',
  238. clampToGround: true,
  239. },
  240. },
  241. ];
  242. } else if (projectLocation.includes('POLYGON')) {
  243. data = [
  244. {
  245. type: NewFiberMap.Enum.VectorType.POLYGON,
  246. style: { material: 'rgba(255,0,0,1)', color: 'rgba(255,0,0,1)' },
  247. geometrys: projectLocation,
  248. id: 'area',
  249. },
  250. ];
  251. }
  252. if (data.length) {
  253. setTimeout(() => {
  254. let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
  255. toCenterByGeoJson(geojson);
  256. newfiberMap.geojsonToMap(geojson);
  257. }, 500);
  258. }
  259. };
  260.  
  261. const toCenterByGeoJson = geojson => {
  262. let coords = turf.getCoords(geojson.features[0].geometry).flat();
  263. let flag = geojson.features.length == 1 && coords.length == 2;
  264. if (!!geojson.features.length && !flag) {
  265. newfiberMap.getMap().camera.flyTo({
  266. destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
  267. });
  268. } else {
  269. newfiberMap.setCenter({
  270. roll: 0.01658908985506884,
  271. pitch: -87.24924906709752,
  272. heading: 5.026928271138224,
  273. lng: coords[0],
  274. lat: coords[1],
  275. height: 943.5996932813425,
  276. });
  277. }
  278. };
  279.  
  280. const getDictMaps = async dictType => {
  281. const res = await getDicts(dictType);
  282. if (res?.code !== 200) return;
  283. if (res?.data) {
  284. form.projectProcessAttachmentSaveRequestList = [];
  285. for (const item of res.data) {
  286. form.projectProcessAttachmentSaveRequestList.push({
  287. fileList: [],
  288. dictData: item.dictValue,
  289. dictType: item.dictType,
  290. filieDescription: '',
  291. projectNo: '',
  292. name: item.dictLabel,
  293. });
  294. }
  295. }
  296. setTimeout(() => {
  297. if (proxy.$refs.ruleForm) {
  298. proxy.$refs.ruleForm.clearValidate();
  299. }
  300. });
  301. };
  302.  
  303. const submit = () => {
  304. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  305. if (valid) {
  306. const params = JSON.parse(JSON.stringify(form));
  307. for (const item of params.projectProcessAttachmentSaveRequestList) {
  308. item.projectNo = params.projectNo;
  309. for (const it of item.fileList) {
  310. params.sysFileSaveRequestList.push(it);
  311. }
  312. }
  313. console.log(params);
  314. let methed = '';
  315. if (curRow?.id) {
  316. params.id = curRow.id;
  317. methed = projectApprovalEdit;
  318. } else {
  319. methed = projectApprovalAdd;
  320. }
  321. const res = await methed(params);
  322. if (res?.code !== 200) return;
  323. proxy.$modal.msgSuccess('操作成功!');
  324. emit('close');
  325. } else {
  326. console.log('error submit!', fields);
  327. }
  328. });
  329. };
  330. // 获取详情数据
  331. const getDetail = async () => {
  332. const res = await projectApprovalDetail(curRow.id);
  333. if (res?.code !== 200) return;
  334. fileObj.value.refId = res.data.projectId; //项目返回的id值
  335. previousPoint.value = res.data.projectLocation;
  336. previousPointName.value = res.data.projectName;
  337. inheritAttr(res.data, form);
  338. const fileGroup = res.data.fileGroup;
  339. const res1 = await getDicts('pro_project_approval');
  340. form.buildStatusName = findText('build_status', form.buildStatus);
  341. const dicts = res1.data;
  342. for (const key in fileGroup) {
  343. if (Object.hasOwnProperty.call(fileGroup, key)) {
  344. const element = fileGroup[key];
  345. for (const item of element) {
  346. const info = dicts.find(it => it.dictValue === item.dictData);
  347. form.projectProcessAttachmentSaveRequestList.push({
  348. fileList: item.fileList,
  349. dictData: item.dictData,
  350. dictType: item.dictType,
  351. filieDescription: item.filieDescription,
  352. projectNo: item.projectNo,
  353. name: info.dictLabel,
  354. });
  355. }
  356. }
  357. }
  358. nextTick(() => {
  359. viewPosition(form.projectLocation);
  360. });
  361. };
  362.  
  363. onMounted(() => {
  364. getProjectList(); //获取项目列表
  365. if (curRow?.id) {
  366. getDetail();
  367. }
  368. });
  369.  
  370. defineExpose({
  371. submit,
  372. });
  373. </script>
  374.  
  375. <style lang="scss" scoped>
  376. .operate {
  377. .mapBox {
  378. width: 100%;
  379. height: 500px;
  380. }
  381. .box {
  382. margin-bottom: 10px;
  383. }
  384. }
  385. </style>