Newer
Older
KaiFengPC / src / views / project / processControl / planPermission / operate.vue
@鲁yixuan 鲁yixuan on 19 Jun 14 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="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. <p class="name ellipsis" :title="img.name">{{ img.name || '--' }}</p>
  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. >
  123. <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" placeholder="请输入资料说明" />
  124. </el-form-item>
  125. </el-col>
  126. <el-col :span="12">
  127. <ImageFileUpload
  128. listType="text"
  129. :limit="10"
  130. :saveFileArr="item.fileList"
  131. :refType="item.dictType"
  132. :refField="item.dictData"
  133. :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
  134. />
  135. </el-col>
  136. </el-row>
  137. </div>
  138. <el-form-item label="补充说明:" prop="permissionDescription" class="formItem140">
  139. <el-input v-model="form.permissionDescription" type="textarea" resize="none" />
  140. </el-form-item>
  141. </div>
  142. </el-form>
  143. </div>
  144. </template>
  145.  
  146. <script setup>
  147. import { reactive, onMounted } from 'vue';
  148. import { required } from '@/utils/validate-helper';
  149. import { getProjectInfoNewList, getDicts } from '@/api/project/projectApproval';
  150. import { projectInfoNewDetail } from '@/api/project/projectInformationNew';
  151. import { projectPlanningPermissionAdd, projectPlanningPermissionEdit, projectPlanningPermissionDetail } from '@/api/project/planPermission';
  152. import { inheritAttr } from '@/utils/v3';
  153. import { useDicts } from '@/hooks';
  154. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  155.  
  156. const { proxy } = getCurrentInstance();
  157. const { sponge_land_type, findText } = useDicts(proxy);
  158. const { pro_project_approval } = proxy.useDict('pro_project_approval');
  159. const { planning_stage } = proxy.useDict('planning_stage');
  160. const emit = defineEmits(['close']);
  161. const props = defineProps({
  162. curRow: {
  163. type: Object,
  164. default: () => ({}),
  165. },
  166. opts: {
  167. type: Object,
  168. default: () => ({}),
  169. },
  170. types: {
  171. type: Array,
  172. default: [],
  173. },
  174. });
  175. const { curRow, opts } = props;
  176. const form = reactive({
  177. isProjectExempt: '0',
  178. projectName: '',
  179. projectNo: '',
  180. projectTypeId: '',
  181. projectTypeIdName: '',
  182. projectArea: '',
  183. spongeLandType: '',
  184. greenRate: '',
  185. chargeDepartment: '',
  186. implementIndicators: '0',
  187. buildStatus: '',
  188. buildStatusName: '',
  189. annualRunoffTotalControlRate: '',
  190. annualRunoffPollutionControlRate: '',
  191. hardGroundRate: '',
  192. projectProcessAttachmentSaveRequestList: [],
  193. permissionDescription: '',
  194. sysFileSaveRequestList: [],
  195. });
  196.  
  197. const rules = reactive({
  198. // projectName: required('项目名称'),
  199. // projectNo: required('项目编码'),
  200. // projectTypeId: required('项目类型'),
  201. // projectArea: required('项目面积'),
  202. // spongeLandType: required('用地类型'),
  203. // greenRate: required('绿地率'),
  204. // chargeDepartment: required('建设单位'),
  205. // buildStatus: required('建设状态'),
  206. // annualRunoffTotalControlRate: required('年径流总量控制率'),
  207. // annualRunoffPollutionControlRate: required('年径流污染去除率'),
  208. // hardGroundRate: required('可研批复'),
  209. // filieDescription: required('内容'),
  210. });
  211.  
  212. const projectList = ref([]);
  213. const projectApprovalFileList = ref([]);
  214. const showDetail = ref(false);
  215. const fileObj = ref({});
  216.  
  217. // 选择附件上传,对应动态参数添加
  218. function uploadGo(item, index) {
  219. fileObj.value.refType = item.dictType;
  220. fileObj.value.refField = item.dictData;
  221. fileObj.value.fileList = item.fileList;
  222. fileObj.value.index = index; //动态的第几个
  223. showDetail.value = true;
  224. }
  225. // 文件列表删除
  226. function deleteGG(list, index) {
  227. list.splice(index, 1);
  228. }
  229. // 确定之后选择的附件
  230. const closeGGDialog = e => {
  231. form.projectProcessAttachmentSaveRequestList[fileObj.value.index].fileList = e;
  232. showDetail.value = false;
  233. };
  234.  
  235. const getProjectList = async () => {
  236. const res = await getProjectInfoNewList();
  237. if (res?.code !== 200) return;
  238. projectList.value = res?.data || [];
  239. if (opts.type === 'add' && projectList.value.length) {
  240. projectChange(projectList.value[0].projectNo);
  241. fileObj.value.refId = projectList.value[0].id; //项目返回的id值
  242. }
  243. form.isProjectExempt = projectList.value[0].isProjectExempt;
  244. };
  245.  
  246. const getProjectApprovalFileList = async projectNo => {
  247. const res = await projectInfoNewDetail(projectNo);
  248. if (res?.code !== 200) return;
  249. const fileGroup = res.data.fileGroup;
  250. projectApprovalFileList.value = [];
  251. for (const key in fileGroup) {
  252. if (key === 'pro_project_approval') {
  253. if (Object.hasOwnProperty.call(fileGroup, key)) {
  254. const element = fileGroup[key];
  255. for (const item of element) {
  256. const info = pro_project_approval.value.find(it => it.value === item.dictData);
  257. if (!info) continue;
  258. projectApprovalFileList.value.push({
  259. fileList: item.fileList,
  260. dictData: item.dictData,
  261. dictType: item.dictType,
  262. filieDescription: item.filieDescription,
  263. projectNo: item.projectNo,
  264. name: info.label,
  265. });
  266. }
  267. }
  268. }
  269. }
  270. };
  271.  
  272. const projectChange = async val => {
  273. let it = projectList.value.find(item => item.projectNo === val);
  274. fileObj.value.refId = it.id; //项目返回的id值
  275. inheritAttr(it, form);
  276. form.isProjectExempt = it.isProjectExempt;
  277. form.projectTypeIdName = props.types.find(it => it.id === form.projectTypeId)?.projectTypeName;
  278. form.buildStatusName = findText('build_status', form.buildStatus);
  279. getProjectApprovalFileList(form.projectNo);
  280. getDictMaps('planning_stage');
  281. };
  282.  
  283. const getDictMaps = async dictType => {
  284. const res = await getDicts(dictType);
  285. if (res?.code !== 200) return;
  286. if (res?.data) {
  287. form.projectProcessAttachmentSaveRequestList = [];
  288. for (const item of res.data) {
  289. form.projectProcessAttachmentSaveRequestList.push({
  290. fileList: [],
  291. dictData: item.dictValue,
  292. dictType: item.dictType,
  293. filieDescription: '',
  294. projectNo: '',
  295. name: item.dictLabel,
  296. });
  297. }
  298. console.log(form.projectProcessAttachmentSaveRequestList);
  299. }
  300.  
  301. setTimeout(() => {
  302. if (proxy.$refs.ruleForm) {
  303. proxy.$refs.ruleForm.clearValidate();
  304. }
  305. });
  306. };
  307.  
  308. const getDetail = async () => {
  309. const res = await projectPlanningPermissionDetail(curRow.id);
  310. if (res?.code !== 200) return;
  311. fileObj.value.refId = res.data.projectId; //项目返回的id值
  312. inheritAttr(res.data, form);
  313. form.isProjectExempt = res.data.isProjectExempt;
  314. form.projectTypeIdName = props.types.find(it => it.id === form.projectTypeId)?.projectTypeName;
  315. form.buildStatusName = findText('build_status', form.buildStatus);
  316. getProjectApprovalFileList(form.projectNo);
  317. const fileGroup = res.data.fileGroup;
  318. form.projectProcessAttachmentSaveRequestList = [];
  319. for (const key in fileGroup) {
  320. if (key === 'planning_stage') {
  321. if (Object.hasOwnProperty.call(fileGroup, key)) {
  322. const element = fileGroup[key];
  323. for (const item of element) {
  324. const info = planning_stage.value.find(it => it.value === item.dictData);
  325. if (!info) continue;
  326. form.projectProcessAttachmentSaveRequestList.push({
  327. fileList: item.fileList,
  328. dictData: item.dictData,
  329. dictType: item.dictType,
  330. filieDescription: item.filieDescription,
  331. projectNo: item.projectNo,
  332. name: info.label,
  333. });
  334. }
  335. }
  336. }
  337. }
  338. };
  339.  
  340. const submit = () => {
  341. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  342. if (valid) {
  343. let params = JSON.parse(JSON.stringify(form));
  344. for (let item of params.projectProcessAttachmentSaveRequestList) {
  345. item.projectNo = params.projectNo;
  346. for (let it of item.fileList) {
  347. params.sysFileSaveRequestList.push(it);
  348. }
  349. }
  350. console.log(params);
  351. // 如果不是豁免项目,建设目标为必填
  352. if (params.isProjectExempt == '0' || params.isProjectExempt == '') {
  353. if (!!!form.annualRunoffPollutionControlRate || !!!form.annualRunoffTotalControlRate || !!!form.hardGroundRate) {
  354. proxy.$modal.msgError('非豁免项目必须填写建设目标,请检查修改!');
  355. return;
  356. }
  357. }
  358. let methed = '';
  359. if (curRow?.id) {
  360. params.id = curRow.id;
  361. methed = projectPlanningPermissionEdit;
  362. } else {
  363. methed = projectPlanningPermissionAdd;
  364. }
  365. const res = await methed(params);
  366. if (res?.code !== 200) return;
  367. proxy.$modal.msgSuccess('操作成功!');
  368. emit('close');
  369. } else {
  370. console.log('error submit!', fields);
  371. }
  372. });
  373. };
  374.  
  375. onMounted(() => {
  376. getProjectList();
  377. if (curRow?.id) {
  378. getDetail();
  379. }
  380. });
  381.  
  382. defineExpose({
  383. submit,
  384. });
  385. </script>
  386.  
  387. <style lang="scss" scoped>
  388. .operate {
  389. .tips {
  390. margin-left: 10px;
  391. line-height: 30px;
  392. }
  393.  
  394. .pl140 {
  395. padding-left: 140px;
  396. }
  397.  
  398. .pl20 {
  399. margin-left: 20px;
  400. }
  401.  
  402. .fileSaveRequestList {
  403. .file-item {
  404. white-space: nowrap;
  405. display: flex;
  406. align-items: center;
  407. .del {
  408. flex-shrink: 0;
  409. color: #f56c6c;
  410. cursor: pointer;
  411. margin-left: 10px;
  412. }
  413. }
  414. }
  415. .box {
  416. margin-bottom: 10px;
  417. }
  418. }
  419. </style>