Newer
Older
KaiFengPC / src / views / project / processControl / planPermission / operate.vue
@鲁yixuan 鲁yixuan on 19 Aug 15 KB updata
  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="8">
  6. <el-form-item label="项目名称:" prop="projectNo" class="formItem140">
  7. <el-select v-model="form.projectNo" placeholder="请选择项目名称" style="width: 100%" @change="projectChange">
  8. <el-option v-for="dict in projectList" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" />
  9. </el-select>
  10. </el-form-item>
  11. </el-col>
  12. <el-col :span="8">
  13. <el-form-item label="项目编码:" prop="projectNo" class="formItem140">
  14. <el-input v-model="form.projectNo" :disabled="true" />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="8">
  18. <el-form-item label="项目类型:" prop="projectTypeId" class="formItem140">
  19. <el-input v-model="form.projectTypeIdName" :disabled="true" />
  20. </el-form-item>
  21. </el-col>
  22. </el-row>
  23. <el-row :gutter="20">
  24. <el-col :span="8">
  25. <el-form-item label="项目面积m²:" prop="projectArea" class="formItem140">
  26. <el-input v-model="form.projectArea" placeholder="请输入项目面积" />
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="8">
  30. <el-form-item label="用地类型:" prop="spongeLandType" class="formItem140">
  31. <el-select v-model="form.spongeLandType" placeholder="请选择用地类型" style="width: 100%">
  32. <el-option v-for="dict in sponge_land_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  33. </el-select>
  34. </el-form-item>
  35. </el-col>
  36. <el-col :span="8">
  37. <el-form-item label="绿地率%:" prop="greenRate" class="formItem140">
  38. <el-input v-model="form.greenRate" placeholder="请输入绿地率%" />
  39. </el-form-item>
  40. </el-col>
  41. </el-row>
  42. <el-row :gutter="20">
  43. <el-col :span="8">
  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-col :span="8">
  49. <el-form-item label="建设状态:" prop="buildStatus" class="formItem140">
  50. <el-input v-model="form.buildStatusName" :disabled="true" />
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="8">
  54. <el-form-item label="是否落实规划管控指标:" prop="implementIndicators" class="formItem140">
  55. <el-select v-model="form.implementIndicators" placeholder="请选择" style="width: 100%">
  56. <el-option label="是" value="1" />
  57. <el-option label="否" value="0" />
  58. </el-select>
  59. </el-form-item>
  60. </el-col>
  61. </el-row>
  62. <!-- 是否豁免项目 isProjectExempt 1:是,0:否 -->
  63. <el-divider content-position="left" v-if="form.isProjectExempt == '0' || form.isProjectExempt == ''">建设目标</el-divider>
  64. <div class="pl20" v-if="form.isProjectExempt == '0' || form.isProjectExempt == ''">
  65. <el-row :gutter="20">
  66. <el-col :span="8">
  67. <el-form-item label="年径流总量控制率%:" prop="annualRunoffTotalControlRate" class="formItem140">
  68. <el-input v-model="form.annualRunoffTotalControlRate" placeholder="请输入年径流总量控制率" />
  69. </el-form-item>
  70. </el-col>
  71. <el-col :span="8">
  72. <el-form-item label="年径流污染去除率%:" prop="annualRunoffPollutionControlRate" class="formItem140">
  73. <el-input v-model="form.annualRunoffPollutionControlRate" placeholder="请输入年径流污染去除率" />
  74. </el-form-item>
  75. </el-col>
  76. <el-col :span="8">
  77. <el-form-item label="硬化地面率%:" prop="hardGroundRate" class="formItem140">
  78. <el-input v-model="form.hardGroundRate" placeholder="请输入硬化地面率" />
  79. </el-form-item>
  80. </el-col>
  81. </el-row>
  82. </div>
  83. <el-divider content-position="left">立项阶段资料</el-divider>
  84. <div class="pl20">
  85. <div class="box" v-for="item in projectApprovalFileList">
  86. <el-row :gutter="24">
  87. <el-col :span="24">
  88. <el-form-item :label="`${item.name}:`">
  89. <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" />
  90. <!-- 文件列表展示 -->
  91. <div class="ggFileListShow">
  92. <div class="part flex" v-for="(img, index) in item.fileList" :key="index">
  93. <div class="name ellipsis" :title="img.name">{{ img.name || '--' }}</div>
  94. </div>
  95. </div>
  96. </el-form-item>
  97. </el-col>
  98. <!-- <el-col :span="12">
  99. <ImageFileUpload
  100. listType="text"
  101. :limit="10"
  102. :saveFileArr="item.fileList"
  103. :refType="item.dictType"
  104. :refField="item.dictData"
  105. :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls']"
  106. :disabled="true"
  107. />
  108. </el-col> -->
  109. </el-row>
  110. </div>
  111. </div>
  112. <el-divider content-position="left">规划阶段资料</el-divider>
  113. <div class="pl20">
  114. <div class="box" v-for="(item, i) in form.projectProcessAttachmentSaveRequestList">
  115. <el-row :gutter="24">
  116. <el-col :span="8">
  117. <!--必填 :rules="rules['filieDescription']" -->
  118. <el-form-item
  119. :label="`${item.name}:`"
  120. :prop="'projectProcessAttachmentSaveRequestList.' + i + '.' + 'filieDescription'"
  121. class="formItem140"
  122. :rules="rules['filieDescription']"
  123. >
  124. <el-input
  125. v-model="item.filieDescription"
  126. :disabled="opts.type === 'view' || curRow.flowState > 1"
  127. style="width: 200px"
  128. placeholder="请输入资料说明"
  129. />
  130. </el-form-item>
  131. </el-col>
  132. <el-col :span="12">
  133. <ImageFileUpload
  134. listType="text"
  135. :limit="10"
  136. :saveFileArr="item.fileList"
  137. :refType="item.dictType"
  138. :refField="item.dictData"
  139. :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
  140. />
  141. </el-col>
  142. </el-row>
  143. </div>
  144. <el-form-item label="补充说明:" prop="permissionDescription" class="formItem140">
  145. <el-input v-model="form.permissionDescription" type="textarea" resize="none" />
  146. </el-form-item>
  147. </div>
  148. </el-form>
  149. </div>
  150. </template>
  151.  
  152. <script setup>
  153. import { reactive, onMounted } from 'vue';
  154. import { required, isNumber } from '@/utils/validate-helper';
  155. import { getProjectInfoNewList, getDicts } from '@/api/project/projectApproval';
  156. import { projectInfoNewDetail } from '@/api/project/projectInformationNew';
  157. import { projectPlanningPermissionAdd, projectPlanningPermissionEdit, projectPlanningPermissionDetail } from '@/api/project/planPermission';
  158. import { inheritAttr } from '@/utils/v3';
  159. import { useDicts } from '@/hooks';
  160. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  161.  
  162. const { proxy } = getCurrentInstance();
  163. const { sponge_land_type, findText } = useDicts(proxy);
  164. const { pro_project_approval } = proxy.useDict('pro_project_approval');
  165. const { planning_stage } = proxy.useDict('planning_stage');
  166. const emit = defineEmits(['close']);
  167. const props = defineProps({
  168. curRow: {
  169. type: Object,
  170. default: () => ({}),
  171. },
  172. opts: {
  173. type: Object,
  174. default: () => ({}),
  175. },
  176. types: {
  177. type: Array,
  178. default: [],
  179. },
  180. });
  181. const { curRow, opts } = props;
  182. const form = reactive({
  183. isProjectExempt: '0',
  184. projectName: '',
  185. projectNo: '',
  186. projectTypeId: '',
  187. projectTypeIdName: '',
  188. projectArea: '',
  189. spongeLandType: '',
  190. greenRate: '',
  191. chargeDepartment: '',
  192. implementIndicators: '0',
  193. buildStatus: '',
  194. buildStatusName: '',
  195. annualRunoffTotalControlRate: '',
  196. annualRunoffPollutionControlRate: '',
  197. hardGroundRate: '',
  198. projectProcessAttachmentSaveRequestList: [],
  199. permissionDescription: '',
  200. sysFileSaveRequestList: [],
  201. });
  202.  
  203. const rules = reactive({
  204. projectName: required('项目名称'),
  205. projectNo: required('项目编码'),
  206. projectTypeId: required('项目类型'),
  207. projectArea: isNumber('项目面积', {
  208. required: true,
  209. }),
  210. spongeLandType: required('用地类型'),
  211. greenRate: isNumber('绿地率%', {
  212. required: true,
  213. }),
  214. chargeDepartment: required('建设单位'),
  215. buildStatus: required('建设状态'),
  216. annualRunoffTotalControlRate: isNumber('年径流总量控制率', {
  217. required: true,
  218. }),
  219. annualRunoffPollutionControlRate: isNumber('年径流污染去除率', {
  220. required: true,
  221. }),
  222. hardGroundRate: isNumber('硬化地面率', {
  223. required: true,
  224. }),
  225. filieDescription: required('内容'),
  226. });
  227.  
  228. const projectList = ref([]);
  229. const projectApprovalFileList = ref([]);
  230. const showDetail = ref(false);
  231. const fileObj = ref({});
  232.  
  233. // 选择附件上传,对应动态参数添加
  234. function uploadGo(item, index) {
  235. fileObj.value.refType = item.dictType;
  236. fileObj.value.refField = item.dictData;
  237. fileObj.value.fileList = item.fileList;
  238. fileObj.value.index = index; //动态的第几个
  239. showDetail.value = true;
  240. }
  241. // 文件列表删除
  242. function deleteGG(list, index) {
  243. list.splice(index, 1);
  244. }
  245. // 确定之后选择的附件
  246. const closeGGDialog = e => {
  247. form.projectProcessAttachmentSaveRequestList[fileObj.value.index].fileList = e;
  248. showDetail.value = false;
  249. };
  250.  
  251. const getProjectList = async () => {
  252. const res = await getProjectInfoNewList();
  253. if (res?.code !== 200) return;
  254. projectList.value = res?.data || [];
  255. if (opts.type === 'add' && projectList.value.length) {
  256. projectChange(projectList.value[0].projectNo);
  257. fileObj.value.refId = projectList.value[0].id; //项目返回的id值
  258. }
  259. form.isProjectExempt = projectList.value[0].isProjectExempt;
  260. };
  261.  
  262. const getProjectApprovalFileList = async projectNo => {
  263. const res = await projectInfoNewDetail(projectNo);
  264. if (res?.code !== 200) return;
  265. const fileGroup = res.data.fileGroup;
  266. projectApprovalFileList.value = [];
  267. for (const key in fileGroup) {
  268. if (key === 'pro_project_approval') {
  269. if (Object.hasOwnProperty.call(fileGroup, key)) {
  270. const element = fileGroup[key];
  271. for (const item of element) {
  272. const info = pro_project_approval.value.find(it => it.value === item.dictData);
  273. if (!info) continue;
  274. projectApprovalFileList.value.push({
  275. fileList: item.fileList,
  276. dictData: item.dictData,
  277. dictType: item.dictType,
  278. filieDescription: item.filieDescription,
  279. projectNo: item.projectNo,
  280. name: info.label,
  281. });
  282. }
  283. }
  284. }
  285. }
  286. };
  287.  
  288. const projectChange = async val => {
  289. let it = projectList.value.find(item => item.projectNo === val);
  290. fileObj.value.refId = it.id; //项目返回的id值
  291. inheritAttr(it, form);
  292. form.isProjectExempt = it.isProjectExempt;
  293. form.projectTypeIdName = props.types.find(it => it.id === form.projectTypeId)?.projectTypeName;
  294. form.buildStatusName = findText('build_status', form.buildStatus);
  295. getProjectApprovalFileList(form.projectNo);
  296. getDictMaps('planning_stage');
  297. };
  298.  
  299. const getDictMaps = async dictType => {
  300. const res = await getDicts(dictType);
  301. if (res?.code !== 200) return;
  302. if (res?.data) {
  303. form.projectProcessAttachmentSaveRequestList = [];
  304. for (const item of res.data) {
  305. form.projectProcessAttachmentSaveRequestList.push({
  306. fileList: [],
  307. dictData: item.dictValue,
  308. dictType: item.dictType,
  309. filieDescription: '',
  310. projectNo: '',
  311. name: item.dictLabel,
  312. });
  313. }
  314. console.log(form.projectProcessAttachmentSaveRequestList);
  315. }
  316.  
  317. setTimeout(() => {
  318. if (proxy.$refs.ruleForm) {
  319. proxy.$refs.ruleForm.clearValidate();
  320. }
  321. });
  322. };
  323.  
  324. const getDetail = async () => {
  325. const res = await projectPlanningPermissionDetail(curRow.id);
  326. if (res?.code !== 200) return;
  327. fileObj.value.refId = res.data.projectId; //项目返回的id值
  328. inheritAttr(res.data, form);
  329. form.isProjectExempt = res.data.isProjectExempt;
  330. form.projectTypeIdName = props.types.find(it => it.id === form.projectTypeId)?.projectTypeName;
  331. form.buildStatusName = findText('build_status', form.buildStatus);
  332. getProjectApprovalFileList(form.projectNo);
  333. const fileGroup = res.data.fileGroup;
  334. form.projectProcessAttachmentSaveRequestList = [];
  335. for (const key in fileGroup) {
  336. if (key === 'planning_stage') {
  337. if (Object.hasOwnProperty.call(fileGroup, key)) {
  338. const element = fileGroup[key];
  339. for (const item of element) {
  340. const info = planning_stage.value.find(it => it.value === item.dictData);
  341. if (!info) continue;
  342. form.projectProcessAttachmentSaveRequestList.push({
  343. fileList: item.fileList,
  344. dictData: item.dictData,
  345. dictType: item.dictType,
  346. filieDescription: item.filieDescription,
  347. projectNo: item.projectNo,
  348. name: info.label,
  349. });
  350. }
  351. }
  352. }
  353. }
  354. };
  355.  
  356. const submit = () => {
  357. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  358. if (valid) {
  359. let params = JSON.parse(JSON.stringify(form));
  360. for (let item of params.projectProcessAttachmentSaveRequestList) {
  361. item.projectNo = params.projectNo;
  362. for (let it of item.fileList) {
  363. params.sysFileSaveRequestList.push(it);
  364. }
  365. }
  366. console.log(params);
  367. // 如果不是豁免项目,建设目标为必填
  368. if (params.isProjectExempt == '0' || params.isProjectExempt == '') {
  369. if (!!!form.annualRunoffPollutionControlRate || !!!form.annualRunoffTotalControlRate || !!!form.hardGroundRate) {
  370. proxy.$modal.msgError('非豁免项目必须填写建设目标,请检查修改!');
  371. return;
  372. }
  373. }
  374. let methed = '';
  375. if (curRow?.id) {
  376. params.id = curRow.id;
  377. methed = projectPlanningPermissionEdit;
  378. } else {
  379. methed = projectPlanningPermissionAdd;
  380. }
  381. const res = await methed(params);
  382. if (res?.code !== 200) return;
  383. proxy.$modal.msgSuccess('操作成功!');
  384. emit('close');
  385. } else {
  386. console.log('error submit!', fields);
  387. }
  388. });
  389. };
  390.  
  391. onMounted(() => {
  392. getProjectList();
  393. if (curRow?.id) {
  394. getDetail();
  395. }
  396. });
  397.  
  398. defineExpose({
  399. submit,
  400. });
  401. </script>
  402.  
  403. <style lang="scss" scoped>
  404. .operate {
  405. .tips {
  406. margin-left: 10px;
  407. line-height: 30px;
  408. }
  409.  
  410. .pl140 {
  411. padding-left: 140px;
  412. }
  413.  
  414. .pl20 {
  415. margin-left: 20px;
  416. }
  417.  
  418. .fileSaveRequestList {
  419. .file-item {
  420. white-space: nowrap;
  421. display: flex;
  422. align-items: center;
  423. .del {
  424. flex-shrink: 0;
  425. color: #f56c6c;
  426. cursor: pointer;
  427. margin-left: 10px;
  428. }
  429. }
  430. }
  431. .box {
  432. margin-bottom: 10px;
  433. }
  434. }
  435. </style>