Newer
Older
KaiFengPC / src / views / longoPeration / LSCaseIssues.vue
@鲁yixuan 鲁yixuan on 6 Sep 14 KB updata
  1. <template>
  2. <!-- 日常巡查任务管理 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="项目名称:" prop="projectNo">
  6. <el-select clearable v-model="queryParams.projectNo" style="width: 180px" placeholder="请选择项目名称">
  7. <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
  8. </el-select>
  9. </el-form-item>
  10. <el-form-item label="整改状态:" prop="status">
  11. <el-select clearable v-model="queryParams.status" style="width: 180px" placeholder="请选择整改状态">
  12. <el-option v-for="item in case_level" :key="item.value" :label="item.label" :value="item.value" />
  13. </el-select>
  14. </el-form-item>
  15.  
  16. <el-form-item>
  17. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  18. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  19. </el-form-item>
  20. </el-form>
  21.  
  22. <!-- 按钮区域 -->
  23. <el-row :gutter="10" class="mb8">
  24. <el-col :span="1.5"> </el-col>
  25. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  26. </el-row>
  27. <!-- 表格 -->
  28. <el-table :data="dataList" v-loading="loading" :max-height="580">
  29. <el-table-column type="index" width="55" label="序号" />
  30. <el-table-column label="项目名称" prop="projectName" />
  31. <el-table-column label="项目开始时间" prop="projectStartTime" />
  32. <el-table-column label="项目结束时间" prop="projectEndTime" />
  33. <el-table-column label="建设进度(%)" prop="projectProgress" />
  34. <el-table-column label="巡查人员" prop="userName"> </el-table-column>
  35. <el-table-column label="问题类型" prop="problemTypeName"> </el-table-column>
  36. <el-table-column label="检查项" prop="checkItemName">
  37. <!-- <template #default="scope">
  38. <dict-tag :options="inspection_items" :value="String(scope.row.checkItem)" />
  39. </template> -->
  40. </el-table-column>
  41. <el-table-column label="问题描述" prop="problemContent"> </el-table-column>
  42. <el-table-column label="项目整改状态" prop="status">
  43. <template #default="scope">
  44. <span :class="scope.row.status == '3' ? 'green' : 'red'">
  45. {{
  46. scope.row.status == '0'
  47. ? '待整改'
  48. : scope.row.status == '1'
  49. ? '整改中'
  50. : scope.row.status == '2'
  51. ? '超期未整改'
  52. : scope.row.status == '3'
  53. ? '整改完成'
  54. : ''
  55. }}
  56. </span>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="创建时间" prop="createTime" width="160" />
  60. <el-table-column label="操作" width="350">
  61. <template #default="scope">
  62. <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">详情</el-button>
  63. <el-button v-if="scope.row.ishaveNotice == 1" link type="warning" icon="Edit" @click="handlenotice(scope.row)">
  64. 发布整改通知
  65. </el-button>
  66. <el-button link type="warning" icon="Edit" v-if="scope.row.ishaveNotice == 2" @click="handleUpdate(scope.row)">
  67. 提交整改回复单
  68. </el-button>
  69. </template>
  70. </el-table-column>
  71. </el-table>
  72. <!-- 分页 -->
  73. <pagination
  74. v-show="total > 0"
  75. :total="total"
  76. v-model:page="queryParams.pageNum"
  77. v-model:limit="queryParams.pageSize"
  78. @pagination="getList"
  79. />
  80.  
  81. <!-- 发布整改通知弹窗 -->
  82. <el-dialog :title="title" v-model="open" width="1000px" append-to-body :close-on-click-modal="false">
  83. <el-form ref="roleRef" :model="form" :rules="rules" label-width="120px" :disabled="multiple">
  84. <el-row :gutter="20">
  85. <el-col :span="12">
  86. <el-form-item label="项目名称:" prop="projectName">
  87. <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="true" />
  88. </el-form-item>
  89. </el-col>
  90. <el-col :span="12">
  91. <el-form-item label="整改方式:" prop="rectifyType">
  92. <el-input v-model="form.rectifyType" placeholder="请输入整改方式" />
  93. </el-form-item>
  94. </el-col>
  95. </el-row>
  96. <el-row :gutter="20">
  97. <el-col :span="12">
  98. <el-form-item label="督办事项:" prop="supervisionWork">
  99. <el-input v-model="form.supervisionWork" type="textarea" placeholder="请输入督办事项" />
  100. </el-form-item>
  101. </el-col>
  102. <el-col :span="12">
  103. <el-form-item label="存在问题:" prop="haveProblem">
  104. <el-input v-model="form.haveProblem" type="textarea" placeholder="请输入存在问题" />
  105. </el-form-item>
  106. </el-col>
  107. </el-row>
  108. <el-row :gutter="20">
  109. <el-col :span="12">
  110. <el-form-item label="建设单位:" prop="projectCompanyId">
  111. <el-select v-model="form.projectCompanyId" placeholder="请选择建设单位" clearable style="width: 100%">
  112. <el-option v-for="proj in ConstructionUnit" :key="proj.id" :label="proj.unitName" :value="proj.id" />
  113. </el-select>
  114. </el-form-item>
  115. </el-col>
  116. <el-col :span="12">
  117. <el-form-item label="整改时限:" prop="rectifyTime">
  118. <el-date-picker
  119. type="date"
  120. value-format="YYYY-MM-DD"
  121. v-model="form.rectifyTime"
  122. multiple
  123. placeholder="请选择整改时限"
  124. clearable
  125. style="width: 100%"
  126. >
  127. </el-date-picker>
  128. </el-form-item>
  129. </el-col>
  130. </el-row>
  131. <el-row :gutter="20">
  132. <el-col :span="12">
  133. <el-form-item label="责任领导:" prop="leaderName">
  134. <el-input v-model="form.leaderName" placeholder="请输入责任领导" clearable style="width: 100%" />
  135. </el-form-item>
  136. </el-col>
  137. <el-col :span="12">
  138. <el-form-item label="电话:" prop="leaderPhone">
  139. <el-input v-model="form.leaderPhone" placeholder="请输入责任领导电话" clearable style="width: 100%" />
  140. </el-form-item>
  141. </el-col>
  142. </el-row>
  143. <el-row :gutter="20">
  144. <el-col :span="12">
  145. <el-form-item label="责任人:" prop="peopleName">
  146. <el-input v-model="form.peopleName" placeholder="请输入责任人" clearable style="width: 100%" />
  147. </el-form-item>
  148. </el-col>
  149. <el-col :span="12">
  150. <el-form-item label="电话:" prop="peoplePhone">
  151. <el-input v-model="form.peoplePhone" placeholder="请输入责任人电话" clearable style="width: 100%" />
  152. </el-form-item>
  153. </el-col>
  154. </el-row>
  155. <el-row :gutter="20">
  156. <el-col :span="12">
  157. <el-form-item label="整改书:" prop="fileListToNotice">
  158. <ImageFileUpload
  159. :limit="1"
  160. v-model:saveFileArr="form.fileListToNotice"
  161. :listType="'text'"
  162. :refField="'trfield'"
  163. :refType="'problem_notice'"
  164. :fileType="['jpg', 'png', 'jpeg', 'pdf']"
  165. ></ImageFileUpload>
  166. </el-form-item>
  167. </el-col>
  168. <el-col :span="12">
  169. <el-form-item label="备注:" prop="remark">
  170. <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
  171. </el-form-item>
  172. </el-col>
  173. </el-row>
  174. </el-form>
  175. <template #footer>
  176. <div class="dialog-footer">
  177. <el-button type="primary" @click="submitForm">确 定</el-button>
  178. <el-button @click="cancel">取 消</el-button>
  179. </div>
  180. </template>
  181. </el-dialog>
  182.  
  183. <!--提交整改回复单 -->
  184. <el-dialog title="提交整改回复单" v-model="openOne" width="500px" append-to-body :close-on-click-modal="false">
  185. <el-form ref="roleRefOne" :model="formOne" :rules="rulesOne" label-width="120px">
  186. <el-form-item label="整改回复单:" prop="fileListToReply">
  187. <ImageFileUpload
  188. :limit="1"
  189. v-model:saveFileArr="formOne.fileListToReply"
  190. :listType="'text'"
  191. :refField="'trfield'"
  192. :refType="'problem_reply'"
  193. :fileType="['jpg', 'png', 'jpeg', 'pdf']"
  194. ></ImageFileUpload>
  195. </el-form-item>
  196. </el-form>
  197. <template #footer>
  198. <div class="dialog-footer">
  199. <el-button type="primary" @click="submitFormOne">确 定</el-button>
  200. <el-button @click="cancelOne">取 消</el-button>
  201. </div>
  202. </template>
  203. </el-dialog>
  204.  
  205. <!--详情弹框 -->
  206. <el-dialog
  207. title="查看案件巡查问题详情"
  208. v-model="opendetails"
  209. width="1200px"
  210. append-to-body
  211. class="dialog-detail-box"
  212. :close-on-click-modal="false"
  213. >
  214. <anjianPopup :DataList="DataList" />
  215. </el-dialog>
  216. </div>
  217. </template>
  218. <script setup name="CaseIssues">
  219. import { patrolProblemRectifypage, patrolProblemRectifyedit, projectCompanyList, upreplyfile } from '@/api/longoPeration/CaseIssues';
  220. import { getProjectInfoList } from '@/api/preassess/targetManage';
  221.  
  222. import anjianPopup from '../longoPeration/Patrolmanagement/LsanjianPopup.vue'; //详情弹框
  223. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  224. import { validPhone } from '@/utils/validate';
  225. const { proxy } = getCurrentInstance();
  226. const { problem_type, inspection_items } = proxy.useDict('problem_type', 'inspection_items'); // 巡查类型的字典
  227. const open = ref(false);
  228. const openOne = ref(false);
  229. const opendetails = ref(false);
  230. const showSearch = ref(true);
  231. const multipleA = ref(true);
  232. const case_level = ref([
  233. {
  234. value: '0',
  235. label: '待整改',
  236. },
  237. {
  238. value: '1',
  239. label: '整改中',
  240. },
  241.  
  242. {
  243. value: '2',
  244. label: '超期未整改',
  245. },
  246. {
  247. value: '3',
  248. label: '整改完成',
  249. },
  250. ]);
  251. const projectTList = ref([]);
  252. const ConstructionUnit = ref([]);
  253. const loading = ref(true);
  254. const total = ref(0);
  255. const title = ref('');
  256. const dataList = ref([]);
  257. const DataList = ref([]);
  258. const AllData = reactive({
  259. publishTime: [],
  260. publishTime1: [],
  261. form: { fileListToNotice: [] },
  262. formOne: { fileListToReply: [] },
  263. NumId: '',
  264. NumIdOne: '',
  265. queryParams: { pageNum: 1, pageSize: 10, uploadType: '2' },
  266. queryParamstwo: {
  267. pageNum: 1,
  268. pageSize: 10,
  269. },
  270. rules: {
  271. projectName: [{ required: true, message: '请输入巡查任务名称', trigger: 'blur' }],
  272. rectifyType: [{ required: true, message: '请输入整改方式', trigger: 'blur' }],
  273. supervisionWork: [{ required: true, message: '请输入督办事项', trigger: 'blur' }],
  274. haveProblem: [{ required: true, message: '请输入存在问题', trigger: 'blur' }],
  275. fileListToNotice: [{ required: true, message: '请上传整改书', trigger: 'blur' }],
  276. rectifyTime: [{ required: true, message: '请选择整改时限', trigger: 'blur' }],
  277. projectCompanyId: [{ required: true, message: '请选择建设单位', trigger: 'blur' }],
  278. leaderName: [{ required: true, message: '请输入责任领导', trigger: 'blur' }],
  279. leaderPhone: [
  280. { required: true, message: '请输入责任领导电话', trigger: 'blur' },
  281. {
  282. validator: (rule, value) => {
  283. return new Promise((resolve, reject) => {
  284. if (!validPhone(value)) {
  285. reject(Error('手机号格式错误'));
  286. } else {
  287. resolve();
  288. }
  289. });
  290. },
  291. trigger: 'blur',
  292. },
  293. ],
  294. peopleName: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
  295. peoplePhone: [
  296. { required: true, message: '请输入责任人电话', trigger: 'blur' },
  297. {
  298. validator: (rule, value) => {
  299. return new Promise((resolve, reject) => {
  300. if (!validPhone(value)) {
  301. reject(Error('手机号格式错误'));
  302. } else {
  303. resolve();
  304. }
  305. });
  306. },
  307. trigger: 'blur',
  308. },
  309. ],
  310. },
  311. rulesOne: {
  312. fileListToReply: [{ required: true, message: '请上传整改回复单', trigger: 'blur' }],
  313. },
  314. });
  315. const { queryParams, form, rules, formOne, rulesOne } = toRefs(AllData);
  316.  
  317. //搜索
  318. function handleQuery() {
  319. getList();
  320. }
  321. //重置
  322. function resetQuery() {
  323. AllData.publishTime = [];
  324. proxy.resetForm('queryRef');
  325. handleQuery();
  326. }
  327.  
  328. // 发布整改通知
  329. function handlenotice(Val) {
  330. title.value = '发布整改通知';
  331. open.value = true;
  332. AllData.NumId = Val.id;
  333. form.value.projectName = Val.projectName;
  334. }
  335. // 发布整改取消事件
  336. function cancel() {
  337. open.value = false;
  338. proxy.resetForm('roleRef');
  339. }
  340. function cancelOne() {
  341. openOne.value = false;
  342. proxy.resetForm('roleRefOne');
  343. }
  344.  
  345. //
  346. function handleUpdate(Val) {
  347. openOne.value = true;
  348. console.log(Val, 'Val');
  349. // console.log('multipleA.value', multipleA.value);
  350.  
  351. proxy.resetForm('roleRefOne');
  352. AllData.NumIdOne = Val.id;
  353. }
  354.  
  355. /** 搜索列表 */
  356. const getList = async () => {
  357. loading.value = true;
  358. let res = await patrolProblemRectifypage(queryParams.value);
  359. dataList.value = res.data;
  360. // res.data.forEach(item => {
  361. // if (item.fileListToNotice.length != 0) {
  362. // multipleA.value = false;
  363. // console.log(multipleA.value, 'multipleA.value');
  364. // }
  365. // });
  366.  
  367. total.value = res.total;
  368. loading.value = false;
  369. };
  370. //查看详情操作
  371. function handleDetail(row) {
  372. opendetails.value = true;
  373. DataList.value = { ...row };
  374. }
  375. /** 提交按钮 */
  376. function submitForm() {
  377. proxy.$refs['roleRef'].validate(valid => {
  378. if (valid) {
  379. form.value.id = AllData.NumId;
  380. console.log(form.value, 'form.value');
  381. patrolProblemRectifyedit(form.value).then(response => {
  382. proxy.$modal.msgSuccess('发布整改通知单成功');
  383. open.value = false;
  384. getList();
  385. });
  386. }
  387. });
  388. }
  389.  
  390. function submitFormOne() {
  391. proxy.$refs['roleRefOne'].validate(valid => {
  392. if (valid) {
  393. formOne.value.id = AllData.NumIdOne;
  394. upreplyfile(formOne.value).then(response => {
  395. proxy.$modal.msgSuccess('提交整改回复单成功');
  396. openOne.value = false;
  397. getList();
  398. });
  399. }
  400. });
  401. } // 下拉框
  402. async function DropDown() {
  403. let { data } = await projectCompanyList();
  404. ConstructionUnit.value = data;
  405. }
  406. // 项目接口
  407. async function projectTypeListM() {
  408. let { data } = await getProjectInfoList();
  409. projectTList.value = data;
  410. }
  411. onMounted(() => {
  412. getList();
  413. DropDown();
  414. projectTypeListM();
  415. });
  416. </script>
  417.  
  418. <style scoped lang="scss"></style>