Newer
Older
KaiFengPC / src / views / longoPeration / Patrolmanagement / Inspectionplan.vue
@zhangdeliang zhangdeliang on 7 Nov 15 KB update
  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="planName">
  6. <el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width: 180px" />
  7. </el-form-item>
  8.  
  9. <el-form-item label="项目名称:" prop="projectCodes">
  10. <el-select clearable v-model="queryParams.projectCodes" style="width: 180px" placeholder="请选择项目名称">
  11. <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
  12. </el-select>
  13. </el-form-item>
  14.  
  15. <el-form-item label="计划状态:" prop="status">
  16. <el-select clearable v-model="queryParams.status" style="width: 180px" placeholder="请选择计划状态">
  17. <el-option v-for="item in WaterDate" :key="item.value" :label="item.label" :value="item.value" />
  18. </el-select>
  19. </el-form-item>
  20.  
  21. <el-form-item label="计划日期" prop="publishTime">
  22. <el-date-picker
  23. style="width: 380px"
  24. format="YYYY-MM-DD"
  25. value-format="YYYY-MM-DD"
  26. v-model="AllData.publishTime"
  27. type="daterange"
  28. range-separator="至"
  29. start-placeholder="开始时间"
  30. end-placeholder="结束时间"
  31. />
  32. </el-form-item>
  33.  
  34. <el-form-item>
  35. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  36. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  37. </el-form-item>
  38. </el-form>
  39.  
  40. <!-- 按钮区域 -->
  41. <el-row :gutter="10" class="mb8">
  42. <el-col :span="1.5">
  43. <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
  44. </el-col>
  45. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  46. </el-row>
  47.  
  48. <!-- 表格 -->
  49. <el-table :data="dataList" v-loading="loading" :max-height="580">
  50. <el-table-column type="index" width="55" label="序号" />
  51. <el-table-column label="巡查计划名称" prop="planName" width="140" />
  52. <el-table-column label="巡查计划状态" prop="status" width="150">
  53. <template #default="scope">
  54. <span>
  55. {{ scope.row.status == '0' ? '未激活' : scope.row.status == '1' ? '已激活' : '' }}
  56. </span>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="项目名称" prop="projectCodes" width="400">
  60. <template #default="scope">
  61. <p v-for="item in scope.row.projectList">{{ item.projectName }}</p>
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="巡查人员" prop="planUserIds">
  65. <template #default="scope">
  66. <p v-for="item in scope.row.taskUserList">{{ item.userName }}</p>
  67. </template>
  68. </el-table-column>
  69. <el-table-column label="巡查类型" prop="patrolType">
  70. <template #default="scope">
  71. <dict-tag :options="patrol_type" :value="String(scope.row.patrolType)" />
  72. </template>
  73. </el-table-column>
  74. <!-- <el-table-column label="巡查公里数(km)" prop="num" /> -->
  75. <el-table-column label="计划开始时间" prop="startDate" width="180" />
  76. <el-table-column label="计划结束时间" prop="endDate" width="180" />
  77. <el-table-column label="任务频率" prop="patrolFrequencyContent" width="200">
  78. <!-- <template #default="scope">
  79. <span>
  80. {{ scope.row.patrolFrequencyType == 'for_week' ? '周' : scope.row.patrolFrequencyType == 'for_day' ? '日' : '' }}
  81. </span>
  82. </template> -->
  83. </el-table-column>
  84. <el-table-column label="创建时间" prop="createTime" width="180" />
  85. <el-table-column label="备注" prop="remark" width="180" />
  86. <el-table-column label="操作" width="280" fixed="right">
  87. <template #default="scope">
  88. <el-button link icon="View" type="success" v-if="scope.row.status == '0'" @click="handleActive(scope.row, 'view')">
  89. 激活
  90. </el-button>
  91. <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">详情</el-button>
  92. <el-button link type="warning" icon="Edit" v-if="scope.row.status == '0'" @click="handleUpdate(scope.row, 'view')">
  93. 修改
  94. </el-button>
  95. <el-button link type="danger" icon="Delete" v-if="scope.row.status == '0'" @click="handleDelete(scope.row, 'view')">
  96. 删除
  97. </el-button>
  98. </template>
  99. </el-table-column>
  100. </el-table>
  101. <!-- 分页 -->
  102. <pagination
  103. v-show="total > 0"
  104. :total="total"
  105. v-model:page="queryParams.pageNum"
  106. v-model:limit="queryParams.pageSize"
  107. @pagination="getList"
  108. />
  109. <!-- 新增弹窗 -->
  110. <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
  111. <el-form ref="roleRef" :model="form" :rules="rules" label-width="130px" :disabled="multiple">
  112. <el-row :gutter="20">
  113. <el-col :span="24">
  114. <el-form-item label="巡查计划名称:" prop="planName">
  115. <el-input v-model="form.planName" placeholder="请输入巡查计划名称" clearable style="width: 100%" />
  116. </el-form-item>
  117. </el-col>
  118. </el-row>
  119.  
  120. <el-row :gutter="20">
  121. <el-col :span="12">
  122. <el-form-item label="项目名称:" prop="projectList">
  123. <el-select clearable v-model="form.projectList" style="width: 100%" placeholder="请选择项目名称" multiple>
  124. <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
  125. </el-select>
  126. </el-form-item>
  127. </el-col>
  128. <el-col :span="12">
  129. <el-form-item label="巡查计划类型:" prop="patrolType">
  130. <el-select clearable v-model="form.patrolType" style="width: 100%" placeholder="请选择巡查计划类型">
  131. <el-option v-for="item in patrol_type" :key="item.value" :label="item.label" :value="item.value" />
  132. </el-select>
  133. </el-form-item>
  134. </el-col>
  135. </el-row>
  136. <el-row :gutter="20">
  137. <el-col :span="12">
  138. <el-form-item label="巡查频率:" prop="patrolFrequencyType">
  139. <el-select v-model="form.patrolFrequencyType" placeholder="请选择巡查频率" clearable style="width: 100%">
  140. <el-option v-for="dict in Xcfrequency" :key="dict.value" :label="dict.label" :value="dict.value" />
  141. </el-select>
  142. </el-form-item>
  143. </el-col>
  144. <el-col :span="12">
  145. <el-form-item label="巡查频率(周):" prop="patrolWeekDay" v-if="form.patrolFrequencyType == 'for_week'">
  146. <el-select v-model="form.patrolWeekDay" placeholder="请选择巡查频率(周)" clearable style="width: 100%" multiple>
  147. <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value" />
  148. </el-select>
  149. </el-form-item>
  150. </el-col>
  151. </el-row>
  152. <el-row :gutter="20">
  153. <el-col :span="12">
  154. <el-form-item label="巡查人员:" prop="patrolUserList">
  155. <el-select v-model="form.patrolUserList" placeholder="请选择巡查人员" clearable style="width: 100%" multiple>
  156. <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
  157. </el-select>
  158. </el-form-item>
  159. </el-col>
  160. <el-col :span="12">
  161. <el-form-item label="计划日期" prop="reportTime1">
  162. <el-date-picker
  163. style="width: 380px"
  164. format="YYYY-MM-DD"
  165. value-format="YYYY-MM-DD"
  166. v-model="form.reportTime1"
  167. type="daterange"
  168. range-separator="至"
  169. start-placeholder="开始时间"
  170. end-placeholder="结束时间"
  171. />
  172. </el-form-item>
  173. </el-col>
  174. </el-row>
  175.  
  176. <el-row :gutter="20">
  177. <el-col :span="24">
  178. <el-form-item label="备注" prop="remark">
  179. <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
  180. </el-form-item>
  181. </el-col>
  182. </el-row>
  183. </el-form>
  184. <template #footer>
  185. <div class="dialog-footer">
  186. <el-button type="primary" @click="submitForm" v-show="!multiple">确 定</el-button>
  187. <el-button @click="cancel">取 消</el-button>
  188. </div>
  189. </template>
  190. </el-dialog>
  191. </div>
  192. </template>
  193. <script setup name="Inspectionplan">
  194. import { patrolPlanpage, activation, patrolPlanedit, patrolPlanadd, patrolPlandelete } from '@/api/longoPeration/Inspectionplana';
  195. import { listUser } from '@/api/system/user';
  196. import { getProjectInfoList } from '@/api/preassess/targetManage';
  197. import axios from 'axios';
  198. const { proxy } = getCurrentInstance();
  199. const { patrol_type } = proxy.useDict('patrol_type'); // 巡查类型的字典
  200. console.log(patrol_type);
  201. const open = ref(false);
  202. const multiple = ref(false);
  203. const showSearch = ref(true);
  204. const projectTList = ref([]);
  205. const Xcfrequency = ref([
  206. { value: 'for_day', label: '天' },
  207. { value: 'for_week', label: '周' },
  208. ]);
  209. const WaterDate = ref([
  210. { value: '1', label: '已激活' },
  211. { value: '0', label: '未激活' },
  212. ]);
  213. const weekList = ref([
  214. { value: '1', label: '周日' },
  215. { value: '2', label: '周一' },
  216. { value: '3', label: '周二' },
  217. { value: '4', label: '周三' },
  218. { value: '5', label: '周四' },
  219. { value: '6', label: '周五' },
  220. { value: '7', label: '周六' },
  221. ]);
  222. const userList = ref([]);
  223. const loading = ref(true);
  224. const total = ref(1);
  225. const title = ref('');
  226. const dataList = ref([]);
  227. const AllData = reactive({
  228. id: '',
  229. caseid: '',
  230. caseidone: '',
  231. publishTime: [],
  232. form: {},
  233. formDate: {},
  234. caseFormDate: { id: '' },
  235. queryParams: {
  236. pageNum: 1,
  237. pageSize: 10,
  238. planName: '',
  239. status: '',
  240. startTime: '',
  241. endTime: '',
  242. },
  243. rules: {
  244. planName: [{ required: true, message: '请输入巡查计划名称', trigger: 'blur' }],
  245. projectList: [{ required: true, message: '请选择项目名称', trigger: 'blur' }],
  246. patrolType: [{ required: true, message: '请选择巡查计划类型', trigger: 'blur' }],
  247. patrolUserList: [{ required: true, message: '请选择巡查人员', trigger: 'blur' }],
  248. reportTime1: [{ required: true, message: '请选择计划日期', trigger: 'blur' }],
  249. eventDescription: [{ required: true, message: '请输入', trigger: 'blur' }],
  250. patrolWeekDay: [{ required: true, message: '请选择巡查频率(周)', trigger: 'blur' }],
  251. },
  252. });
  253. const { queryParams, form, rules } = toRefs(AllData);
  254.  
  255. //搜索
  256. function handleQuery() {
  257. // console.log('123', AllData.publishTime);
  258. if (AllData.publishTime) {
  259. queryParams.value.startTime = AllData.publishTime[0];
  260. queryParams.value.endTime = AllData.publishTime[1];
  261. } else {
  262. queryParams.value.startTime = '';
  263. queryParams.value.endTime = '';
  264. }
  265. getList();
  266. }
  267. //重置
  268. function resetQuery() {
  269. AllData.publishTime = [];
  270. proxy.resetForm('queryRef');
  271. handleQuery();
  272. }
  273. // 新增
  274. function handleAdd() {
  275. title.value = '新增巡查计划';
  276. open.value = true;
  277. form.value = {};
  278. multiple.value = false;
  279. form.value.patrolFrequencyType = Xcfrequency.value[0].value;
  280. }
  281. // 新增中取消事件
  282. function cancel() {
  283. open.value = false;
  284. proxy.resetForm('roleRef');
  285. }
  286. //搜索人员列表
  287. function getUserList() {
  288. listUser().then(res => {
  289. userList.value = res.data || [];
  290. userList.value.map(item => {
  291. item.userId = String(item.userId);
  292. });
  293. });
  294. }
  295. /** 搜索列表 */
  296. const getList = async () => {
  297. loading.value = true;
  298. if (AllData.publishTime) {
  299. queryParams.value.startTime = AllData.publishTime[0];
  300. queryParams.value.endTime = AllData.publishTime[1];
  301. }
  302. let res = await patrolPlanpage(queryParams.value);
  303. dataList.value = res.data;
  304. console.log(dataList.value, 'dataList.value');
  305. total.value = res.total;
  306. loading.value = false;
  307. };
  308.  
  309. //查看详情操作
  310. function handleDetail(row) {
  311. open.value = true;
  312. multiple.value = true;
  313. title.value = '查看巡查计划';
  314. form.value = { ...row };
  315. // 做详情回显判断
  316. form.value.patrolUserList = row.taskUserList.map(item => {
  317. return item.userName;
  318. });
  319. form.value.projectList = row.projectList.map(item => {
  320. return item.projectName;
  321. });
  322. form.value.reportTime1 = [form.value.startDate, form.value.endDate];
  323. form.value.patrolWeekDay = row.patrolFrequencyList ? row.patrolFrequencyList.split(',') : [];
  324. }
  325. // 修改按钮操作
  326. function handleUpdate(row) {
  327. open.value = true;
  328. title.value = '修改巡查计划';
  329. multiple.value = false;
  330. form.value = { ...row };
  331. // console.log(form.value, 'form.value form.value ');
  332. // 做修改回显判断
  333. form.value.patrolUserList = row.planUserIds ? row.planUserIds.split(',') : [];
  334. form.value.patrolUserList.forEach(element => {
  335. element = element.userId;
  336. });
  337. form.value.projectList = row.projectCodes ? row.projectCodes.split(',') : [];
  338. form.value.patrolWeekDay = row.patrolFrequencyList ? row.patrolFrequencyList.split(',') : [];
  339. form.value.reportTime1 = [form.value.startDate, form.value.endDate];
  340. }
  341. // 激活
  342. function handleActive(row) {
  343. // console.log(row.id, '1');
  344. activation(row.id).then(res => {
  345. if (res.code == 200) {
  346. proxy.$modal.msgSuccess('激活成功');
  347. getList();
  348. } else {
  349. proxy.$modal.msgError('激活失败');
  350. getList();
  351. }
  352. });
  353. }
  354. // 项目接口
  355. async function projectTypeListM() {
  356. let { data } = await getProjectInfoList();
  357. projectTList.value = data;
  358. }
  359.  
  360. /** 提交按钮 */
  361. function submitForm() {
  362. proxy.$refs['roleRef'].validate(valid => {
  363. if (valid) {
  364. // 处理时间传参
  365. form.value.startDate = form.value.reportTime1[0];
  366. form.value.endDate = form.value.reportTime1[1];
  367. // 处理项目传参
  368. // form.value.projectList = form.value.projectList.map(obj => {
  369. // // console.log(projectTList.value, 'projectTList.value');
  370. // let nameXm = '';
  371. // projectTList.value.forEach(item => {
  372. // if (item.projectNo == obj) {
  373. // nameXm = item.projectName;
  374. // // console.log(item.projectName, 'item');
  375. // }
  376. // });
  377. // // console.log(obj, 'obj');
  378. // return { projectNo: obj, projectName: nameXm };
  379. // });
  380. // 处理人员传参
  381. // form.value.patrolUserList = form.value.patrolUserList.map(item => {
  382. // // console.log(item, 'item');
  383. // return { userId: item };
  384. // });
  385. form.value.basicInfoId = '1686274734091489284';
  386. // console.log(form.value, 'form.value');
  387. if (title.value == '修改巡查计划') {
  388. patrolPlanedit(form.value).then(response => {
  389. proxy.$modal.msgSuccess('修改成功');
  390. open.value = false;
  391. getList();
  392. });
  393. } else {
  394. if (form.value.id) delete form.value.id;
  395. patrolPlanadd(form.value).then(response => {
  396. proxy.$modal.msgSuccess('新增成功');
  397. open.value = false;
  398. getList();
  399. });
  400. }
  401. }
  402. });
  403. }
  404.  
  405. /** 删除按钮操作 */
  406. function handleDelete(row) {
  407. const postIds = row.id;
  408. proxy.$modal
  409. .confirm('是否确认删除该数据项?')
  410. .then(function () {
  411. return patrolPlandelete(postIds);
  412. })
  413. .then(() => {
  414. getList();
  415. proxy.$modal.msgSuccess('删除成功');
  416. })
  417. .catch(() => {});
  418. }
  419. onMounted(() => {
  420. getList();
  421. projectTypeListM();
  422. getUserList();
  423. });
  424. </script>
  425. <style scoped lang="scss">
  426. .dituclass {
  427. width: 100%;
  428. height: 300px;
  429. // background: red;
  430. margin-bottom: 10px;
  431. border: 1px solid #004565;
  432. }
  433. :deep(.el-range-editor.is-disabled input) {
  434. background-color: #004565 !important;
  435. color: var(--el-disabled-text-color);
  436. cursor: not-allowed;
  437. }
  438. </style>