Newer
Older
KaiFengPC / src / views / project / projectJinDu / monthReport.vue
@鲁yixuan 鲁yixuan on 27 Aug 16 KB updata
  1. <template>
  2. <!-- 项目综合管理 项目进度管理 月度上报-->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true">
  6. <el-form-item label="月份选择:" prop="reportMonth">
  7. <el-date-picker type="month" v-model="queryParams.reportMonth" value-format="YYYY-MM" placeholder="请选择日期"> </el-date-picker>
  8. </el-form-item>
  9. <el-form-item label="项目名称:" prop="projectNo">
  10. <el-select v-model="queryParams.projectNo" filterable clearable placeholder="请选择">
  11. <el-option v-for="dict in projectList" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="建设状态:" prop="buildStatus">
  15. <el-select v-model="queryParams.buildStatus" clearable placeholder="请选择">
  16. <el-option v-for="dict in build_status" :key="dict.value" :label="dict.label" :value="dict.value" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  21. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  22. <el-button type="warning" icon="Upload" @click="importData">导入</el-button>
  23. </el-form-item>
  24. </el-form>
  25.  
  26. <!-- 表格 -->
  27. <el-table v-loading="tableLoading" :data="tableData" max-height="650">
  28. <el-table-column label="月份" prop="reportMonth" />
  29. <el-table-column label="项目名称" prop="projectName" />
  30. <el-table-column label="项目类别" prop="projectTypeCode">
  31. <template #default="scope">
  32. <span>
  33. {{ !!scope.row.projectTypeCode ? projectType.filter(item => item.value == scope.row.projectTypeCode)[0].label : '--' }}
  34. </span>
  35. </template>
  36. </el-table-column>
  37. <el-table-column label="责任单位" prop="chargeDepartment" />
  38. <el-table-column label="建设状态" prop="buildStatusName" />
  39. <el-table-column label="建设进度(%)" prop="projectProgress" />
  40. <el-table-column label="累计完成项目总投资(含主体工程)(万元)" prop="accomplishTotalInvest" />
  41. <el-table-column label="累计完成海绵投资(不含主体工程)(万元)" prop="accomplishSpongeInvest" />
  42. <el-table-column label="本月完成投资(万元)" prop="monthAccomplishTotalInvest" />
  43. <el-table-column label="本月完成海绵投资(万元)" prop="monthAccomplishSpongeInvest" />
  44.  
  45. <el-table-column label="项目级别" prop="projectLevel">
  46. <template #default="scope">
  47. <dict-tag :options="project_manage_level" :value="String(scope.row.projectLevel)" />
  48. </template>
  49. </el-table-column>
  50.  
  51. <el-table-column label="进度状态" prop="projectSchedule">
  52. <template #default="scope">
  53. <span :class="scope.row.projectSchedule == 1 ? 'green' : 'red'">
  54. {{ scope.row.projectSchedule == '1' ? '正常' : scope.row.projectSchedule == '2' ? '滞后' : '' }}
  55. </span>
  56. </template>
  57. </el-table-column>
  58.  
  59. <el-table-column label="项目照片" prop="publishTime">
  60. <template #default="scope">
  61. <div v-if="scope.row.sysFileSaveRequestList && scope.row.sysFileSaveRequestList.length > 0">
  62. <el-image
  63. :src="item.url"
  64. v-for="(item, index) in scope.row.sysFileSaveRequestList"
  65. :key="index"
  66. style="width: 100px; height: 100px"
  67. ></el-image>
  68. </div>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="备注" prop="remark" />
  72. <el-table-column label="操作" width="240" class-name="small-padding fixed-width">
  73. <template #default="scope">
  74. <el-button link type="warning" icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
  75. <el-button v-if="scope.row.projectSchedule == '2'" link type="View" icon="Comment" @click="handleNotice(scope.row)"
  76. >通知提醒</el-button
  77. >
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81.  
  82. <!-- 分页 -->
  83. <pagination
  84. v-show="total > 0"
  85. :total="total"
  86. v-model:page="queryParams.pageNum"
  87. v-model:limit="queryParams.pageSize"
  88. @pagination="getDataList"
  89. />
  90.  
  91. <!-- 文件导入 -->
  92. <el-dialog title="导入月报进度" v-model="dialogShowDR" width="500px" append-to-body>
  93. <el-form ref="formRefDR" :model="formExport" :rules="rulesFormDR" label-width="110px" class="publicForm">
  94. <el-form-item label="月份:" prop="reportMonth">
  95. <el-date-picker type="month" v-model="formExport.reportMonth" value-format="YYYY-MM" placeholder="请选择日期"> </el-date-picker>
  96. </el-form-item>
  97. <el-form-item label="月度报表:" prop="file" style="width: 100%">
  98. <el-upload
  99. ref="uploadRef"
  100. :limit="1"
  101. accept=".xlsx, .xls"
  102. action="/"
  103. :on-change="uploadFile"
  104. :on-progress="handleFileUploadProgress"
  105. :on-success="handleFileSuccess"
  106. :on-remove="handleRemove"
  107. :auto-upload="false"
  108. :file-list="formDataTZ.fileList"
  109. drag
  110. >
  111. <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  112. <div class="el-upload__text"><em>将文件拖到此处,或点击上传</em></div>
  113. </el-upload>
  114. </el-form-item>
  115. </el-form>
  116. <template #footer>
  117. <div class="dialog-footer">
  118. <el-button type="info" @click="dialogShowDR = false">取 消</el-button>
  119. <el-button type="primary" @click="submitFormExport">确 定</el-button>
  120. </div>
  121. </template>
  122. </el-dialog>
  123.  
  124. <!-- 修改弹窗 -->
  125. <el-dialog title="修改进度" v-model="dialogShow" width="900px" append-to-body>
  126. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="170px" class="publicForm flex50">
  127. <el-form-item label="项目名称:" prop="projectName">
  128. <el-input type="text" v-model="formData.projectName" placeholder="请输入" clearable disabled />
  129. </el-form-item>
  130. <el-form-item label="责任单位:" prop="chargeDepartment">
  131. <el-input type="text" v-model="formData.chargeDepartment" placeholder="请输入" clearable disabled />
  132. </el-form-item>
  133. <el-form-item label="累计完成总投资(万元):" prop="accomplishTotalInvest">
  134. <el-input type="number" :min="0" v-model="formData.accomplishTotalInvest" placeholder="请输入" clearable />
  135. </el-form-item>
  136. <el-form-item label="累计完成海绵投资(万元):" prop="accomplishSpongeInvest">
  137. <el-input type="number" :min="0" v-model="formData.accomplishSpongeInvest" placeholder="请输入" clearable />
  138. </el-form-item>
  139. <el-form-item label="本月完成投资(万元):" prop="monthAccomplishTotalInvest">
  140. <el-input type="number" :min="0" v-model="formData.monthAccomplishTotalInvest" placeholder="请输入" clearable />
  141. </el-form-item>
  142. <el-form-item label="本月完成海绵投资(万元):" prop="monthAccomplishSpongeInvest">
  143. <el-input type="number" :min="0" v-model="formData.monthAccomplishSpongeInvest" placeholder="请输入" clearable />
  144. </el-form-item>
  145. <el-form-item label="建设进度(%):" prop="projectProgress">
  146. <el-input type="number" :min="0" v-model="formData.projectProgress" placeholder="请输入" clearable />
  147. </el-form-item>
  148. <el-form-item label="建设状态:" prop="buildStatus">
  149. <el-select v-model="formData.buildStatus" clearable placeholder="请选择">
  150. <el-option v-for="dict in build_status" :key="dict.value" :label="dict.label" :value="dict.value" />
  151. </el-select>
  152. </el-form-item>
  153. <el-form-item label="项目照片:" prop="sysFileSaveRequestList" style="width: 100%">
  154. <ImageFileUpload
  155. :limit="5"
  156. :listType="'picture-card'"
  157. :saveFileArr="formData.sysFileSaveRequestList"
  158. :refField="'pjdPhotos'"
  159. :refType="'projectMonthReportImages'"
  160. ></ImageFileUpload>
  161. </el-form-item>
  162. <el-form-item label="备注:" prop="remark" style="width: 100%">
  163. <el-input type="textarea" v-model="formData.remark" placeholder="请输入" clearable />
  164. </el-form-item>
  165. </el-form>
  166. <template #footer>
  167. <div class="dialog-footer">
  168. <el-button type="info" @click="dialogShow = false">取 消</el-button>
  169. <el-button type="primary" @click="submitForm">确 定</el-button>
  170. </div>
  171. </template>
  172. </el-dialog>
  173.  
  174. <!-- 通知提醒弹窗 -->
  175. <el-dialog title="通知提醒" v-model="dialogShowTZ" width="600px" append-to-body>
  176. <el-form ref="formRefTZ" :model="formDataTZ" :rules="rulesFormTZ" label-width="120px" class="publicForm">
  177. <el-form-item label="被通知人" prop="userIdArray">
  178. <el-select v-model="formDataTZ.userIdArray" multiple clearable placeholder="请选择被通知人">
  179. <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
  180. </el-select>
  181. </el-form-item>
  182.  
  183. <el-form-item label="通知人电话:" prop="phone">
  184. <el-input type="text" v-model="formDataTZ.phone" placeholder="请输入通知人电话" clearable maxlength="11" />
  185. </el-form-item>
  186. <!-- <el-form-item label="通知状态" prop="msgState">
  187. <el-select v-model="formDataTZ.msgState" placeholder="请选择通知状态">
  188. <el-option v-for="item in infoStaticList" :key="item.id" :label="item.staticLabel" :value="item.id" />
  189. </el-select>
  190. </el-form-item> -->
  191. <el-form-item label="通知消息" prop="noticeMsg">
  192. <el-input type="textarea" v-model="formDataTZ.noticeMsg" placeholder="请输入通知消息" />
  193. </el-form-item>
  194. </el-form>
  195. <template #footer>
  196. <div class="dialog-footer">
  197. <el-button type="info" @click="dialogShowTZ = false">取 消</el-button>
  198. <el-button type="primary" @click="submitFormTZ">确 定</el-button>
  199. </div>
  200. </template>
  201. </el-dialog>
  202. </div>
  203. </template>
  204.  
  205. <script setup name="月度上报">
  206. import { getProjectInfoNewList } from '@/api/document/projectTransfer';
  207. import { pageUser } from '@/api/system/user';
  208. import { MonthReportImport, MonthReportPage, MonthReportEdit } from '@/api/project/monthJD.js';
  209. import { useDicts } from '@/hooks';
  210. import { getToken } from '@/utils/auth';
  211. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  212. import { projectTypeList } from '@/api/project/projectInformationNew';
  213. import { projectNoticeAdd } from '@/api/publicService/index';
  214. import bus from '@/utils/mitt';
  215. const { proxy } = getCurrentInstance();
  216. const { build_status } = useDicts(proxy);
  217. const { project_manage_level } = proxy.useDict('project_manage_level');
  218.  
  219. const tableData = ref([]);
  220. const tableLoading = ref(false);
  221. const total = ref(0);
  222. const dialogShow = ref(false);
  223. const dialogShowTZ = ref(false);
  224. const dialogShowDR = ref(false);
  225. const projectList = ref([]);
  226. const userList = ref([]);
  227. const allData = reactive({
  228. queryParams: {
  229. pageNum: 1,
  230. pageSize: 10,
  231. reportMonth: null,
  232. projectNo: '',
  233. buildStatus: '',
  234. },
  235. formData: {},
  236. rulesForm: {
  237. title: [{ required: true, message: '请输入', trigger: 'blur' }],
  238. },
  239. formDataTZ: {
  240. fileList: [],
  241. msgState: '1',
  242. },
  243. rulesFormTZ: {
  244. userIdArray: [{ required: true, message: '请选择被通知人', trigger: 'blur' }],
  245. msgState: [{ required: true, message: '请选择通知状态', trigger: 'blur' }],
  246. noticeMsg: [{ required: true, message: '请输入通知消息', trigger: 'blur' }],
  247. phone: [
  248. {
  249. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  250. message: '请输入正确的手机号码',
  251. trigger: 'blur',
  252. required: true,
  253. },
  254. ],
  255. },
  256. formExport: {
  257. file: '',
  258. reportMonth: '',
  259. },
  260. rulesFormDR: {
  261. reportMonth: [{ required: true, message: '请选择', trigger: 'change' }],
  262. // file: [{ required: true, message: '请选择', trigger: 'change' }],
  263. },
  264. });
  265. const { queryParams, formData, rulesForm, formDataTZ, rulesFormTZ, formExport, rulesFormDR } = toRefs(allData);
  266.  
  267. const infoStaticList = ref([
  268. {
  269. id: 0,
  270. staticLabel: '草稿待发布',
  271. },
  272. {
  273. id: 1,
  274. staticLabel: '发布',
  275. },
  276. ]);
  277. const formExportData = ref({});
  278. const projectType = ref([]);
  279.  
  280. /*** 导入参数 */
  281. const upload = reactive({
  282. // 是否显示弹出层(用户导入)
  283. open: false,
  284. // 弹出层标题(用户导入)
  285. title: '',
  286. // 是否禁用上传
  287. isUploading: false,
  288. // 是否更新已经存在的用户数据
  289. updateSupport: 0,
  290. // 设置上传的请求头部
  291. headers: { Authorization: 'Bearer ' + getToken() },
  292. });
  293.  
  294. /** 获取搜索数据列表 */
  295. function getDataList() {
  296. tableLoading.value = true;
  297. MonthReportPage(queryParams.value).then(response => {
  298. tableData.value = response.data;
  299. total.value = response.total;
  300. tableLoading.value = false;
  301. });
  302. }
  303. /** 搜索用户列表 */
  304. function getList() {
  305. pageUser().then(res => {
  306. userList.value = res.data || [];
  307. userList.value.map(item => {
  308. item.userId = String(item.userId);
  309. });
  310. });
  311. }
  312. /** 搜索按钮操作 */
  313. function handleQuery() {
  314. queryParams.value.pageNum = 1;
  315. getDataList();
  316. }
  317. /** 重置按钮操作 */
  318. function resetQuery() {
  319. proxy.resetForm('queryRef');
  320. handleQuery();
  321. }
  322. // 修改确定
  323. function submitForm() {
  324. proxy.$refs['formRef'].validate(valid => {
  325. if (valid) {
  326. MonthReportEdit(formData.value).then(res => {
  327. if (res.code == 200) {
  328. proxy.$modal.msgSuccess('修改成功');
  329. getDataList();
  330. dialogShow.value = false;
  331. } else {
  332. proxy.$modal.msgError('修改失败请重试');
  333. }
  334. });
  335. }
  336. });
  337. }
  338. /** 上报当月进度操作 */
  339. function handleEdit(row) {
  340. proxy.resetForm('formRefDR'); //清空表单
  341. formData.value = { ...row };
  342. console.log(formData.value, ' formData.value');
  343. dialogShow.value = true;
  344. }
  345. /** 上报当月进度提交 */
  346. function submitFormExport() {
  347. proxy.$refs['formRefDR'].validate(valid => {
  348. if (valid) {
  349. if (typeof formExportData.value.get == 'function') {
  350. if (formExportData.value.get('file') == null) {
  351. proxy.$modal.msgError('请上传导入的文件');
  352. return false;
  353. }
  354. } else {
  355. proxy.$modal.msgError('请上传导入的文件');
  356. return false;
  357. }
  358. MonthReportImport(formExportData.value).then(res => {
  359. if (res.code == 200) {
  360. proxy.$modal.msgSuccess('导入成功');
  361. getDataList();
  362. dialogShowDR.value = false;
  363. } else {
  364. proxy.$modal.msgError('导入失败请重试,请先删除表格中的图片,需单独上传');
  365. }
  366. });
  367. }
  368. });
  369. }
  370. /**文件上传中处理 */
  371. const handleFileUploadProgress = (event, file, fileList) => {
  372. upload.isUploading = true;
  373. };
  374. /** 文件上传成功处理 */
  375. const handleFileSuccess = (response, file, fileList) => {
  376. upload.isUploading = false;
  377. proxy.$refs['uploadRef'].handleRemove(file);
  378. };
  379. function uploadFile(file) {
  380. formExport.value.file = '';
  381. formExportData.value = new FormData();
  382. formExportData.value.append('file', file.raw);
  383. formExportData.value.append('reportMonth', formExport.value.reportMonth);
  384. }
  385. function handleRemove(uploadFile, uploadFiles) {
  386. formDataTZ.value.fileList = [];
  387. // formExport.value.file = '';
  388. }
  389.  
  390. /** 通知提醒操作 */
  391. function handleNotice(row) {
  392. proxy.resetForm('formRefTZ'); //清空表单
  393. dialogShowTZ.value = true;
  394. formDataTZ.value.msgState = infoStaticList.value[1].id;
  395. getList();
  396. }
  397. /** 通知提醒提交 */
  398. function submitFormTZ() {
  399. proxy.$refs['formRefTZ'].validate(valid => {
  400. if (valid) {
  401. projectNoticeAdd(formDataTZ.value).then(response => {
  402. proxy.$modal.msgSuccess('通知成功');
  403. dialogShowTZ.value = false;
  404. bus.emit('Refresh');
  405. });
  406. }
  407. });
  408. }
  409.  
  410. // 导入
  411. function importData() {
  412. dialogShowDR.value = true;
  413. proxy.resetForm('formRefDR'); //清空表单
  414. handleRemove();
  415. }
  416.  
  417. // 获取项目列表
  418. const getProjectList = async () => {
  419. const res = await getProjectInfoNewList();
  420. if (res?.code == 200) {
  421. projectList.value = res.data || [];
  422. }
  423. };
  424. // 获取项目类别
  425. const projectTypeGet = async () => {
  426. let { data } = await projectTypeList();
  427. data.map(item => {
  428. projectType.value.push({
  429. value: item.projectTypeCode,
  430. label: item.projectTypeName,
  431. });
  432. });
  433. };
  434. function changeObj(val) {
  435. console.log(val, '123');
  436. userList.value.forEach(element => {
  437. if (val == element.userId) {
  438. formDataTZ.value.userPhone = element.phonenumber;
  439. }
  440. });
  441. }
  442. onMounted(() => {
  443. projectTypeGet();
  444. getProjectList();
  445. getDataList();
  446. });
  447. </script>