Newer
Older
KaiFengPC / src / views / longoPeration / duChaLedger.vue
@zhangdeliang zhangdeliang on 2 Sep 10 KB update
  1. <template>
  2. <!-- 长效运维子系统 验收台账 -->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  6. <el-form-item label="项目名称:" prop="projectCodes">
  7. <el-select clearable v-model="queryParams.projectCodes" style="width: 180px" placeholder="请选择项目名称">
  8. <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
  9. </el-select>
  10. </el-form-item>
  11. <el-form-item label="年份" prop="checkDate">
  12. <el-date-picker type="year" v-model="queryParams.checkDate" value-format="YYYY" placeholder="请选择日期"></el-date-picker>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  16. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  17. </el-form-item>
  18. </el-form>
  19. <!-- 按钮区域 -->
  20. <el-row :gutter="10" class="mb8">
  21. <el-col :span="1.5">
  22. <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
  23. <el-button icon="Download" type="warning" plain @click="Download">导出</el-button>
  24. </el-col>
  25. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  26. </el-row>
  27. <!-- 表格 -->
  28. <el-table v-loading="tableLoading" :data="tableData" max-height="580">
  29. <el-table-column label="巡查日期" prop="checkDate" width="155" />
  30. <el-table-column label="督察巡查类型" prop="patrolTypes">
  31. <template #default="scope">
  32. <dict-tag :options="patrol_type" :value="String(scope.row.patrolTypes)" />
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="项目名称" prop="projectCodes" width="400">
  36. <template #default="scope">
  37. <p v-for="item in scope.row.projectList">{{ item.projectName }}</p>
  38. </template>
  39. </el-table-column>
  40. <el-table-column label="巡查人员" prop="planUserIds">
  41. <template #default="scope">
  42. <p v-for="item in scope.row.taskUserList">{{ item.userName }}</p>
  43. </template>
  44. </el-table-column>
  45. <el-table-column label="巡查人数" prop="patUserNumber"> </el-table-column>
  46. <el-table-column label="项目数量" prop="projectNumber" />
  47. <el-table-column label="参加单位" prop="intoUnit" />
  48. <el-table-column label="创建时间" prop="createTime" width="155" />
  49. <el-table-column label="备注" prop="remark" />
  50. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  51. <template #default="scope">
  52. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
  53. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
  54. </template>
  55. </el-table-column>
  56. </el-table>
  57. <!-- 分页 -->
  58. <pagination
  59. v-show="total > 0"
  60. :total="total"
  61. v-model:page="queryParams.pageNum"
  62. v-model:limit="queryParams.pageSize"
  63. @pagination="getDataList"
  64. />
  65.  
  66. <!-- 添加或修改弹窗 -->
  67. <el-dialog :title="dialogTitle" v-model="dialogShow" width="600px" append-to-body>
  68. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="90px" class="publicForm">
  69. <el-form-item label="巡查日期" prop="checkDate">
  70. <el-date-picker type="date" v-model="formData.checkDate" value-format="YYYY-MM-DD" placeholder="请选择日期"></el-date-picker>
  71. </el-form-item>
  72. <el-form-item label="巡查类型:" prop="patrolTypes">
  73. <el-select v-model="formData.patrolTypes" placeholder="请选择巡查类型" clearable style="width: 100%">
  74. <el-option v-for="item in patrol_type" :key="item.value" :label="item.label" :value="item.value" />
  75. </el-select>
  76. </el-form-item>
  77. <el-form-item label="项目名称" prop="projectList">
  78. <el-select
  79. clearable
  80. filterable
  81. v-model="formData.projectList"
  82. style="width: 100%"
  83. placeholder="请选择项目名称"
  84. value-key="projectNo"
  85. multiple
  86. label="projectName"
  87. >
  88. <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
  89. </el-select>
  90. </el-form-item>
  91.  
  92. <el-form-item label="巡查人员:" prop="patrolUserList">
  93. <el-select
  94. v-model="formData.patrolUserList"
  95. placeholder="请选择巡查人员"
  96. clearable
  97. style="width: 100%"
  98. value-key="userId"
  99. label="nickName"
  100. multiple
  101. >
  102. <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
  103. </el-select>
  104. </el-form-item>
  105.  
  106. <el-form-item label="巡查人数" prop="patUserNumber">
  107. <el-input type="number" v-model="formData.patUserNumber" controls-position="right" placeholder="请输入巡查人数" />
  108. </el-form-item>
  109. <el-form-item label="参加单位" prop="intoUnit">
  110. <el-input type="textarea" v-model="formData.intoUnit" controls-position="right" placeholder="请输入参加单位" />
  111. </el-form-item>
  112. <el-form-item label="备注" prop="remark">
  113. <el-input type="textarea" v-model="formData.remark" controls-position="right" placeholder="请输入备注" />
  114. </el-form-item>
  115. </el-form>
  116. <template #footer>
  117. <div class="dialog-footer">
  118. <el-button type="info" @click="cancelForm">取 消</el-button>
  119. <el-button type="primary" @click="submitForm">确 定</el-button>
  120. </div>
  121. </template>
  122. </el-dialog>
  123. </div>
  124. </template>
  125.  
  126. <script setup>
  127. import { overSeePage, overSeeAdd, overSeeDel, overSeeEdit } from '@/api/publicService/index';
  128. import { listUser } from '@/api/system/user';
  129. import { getProjectInfoList } from '@/api/preassess/targetManage';
  130. const { proxy } = getCurrentInstance();
  131. const { patrol_type } = proxy.useDict('patrol_type'); // 巡查类型的字典
  132. const tableData = ref([]);
  133. const userList = ref([]);
  134. const tableLoading = ref(true);
  135. const total = ref(0);
  136. const dialogShow = ref(false);
  137. const dialogTitle = ref('');
  138. const showSearch = ref(true);
  139. const projectTList = ref([]);
  140. const allData = reactive({
  141. formData: {},
  142. queryParams: {
  143. pageNum: 1,
  144. pageSize: 10,
  145. checkDate: '',
  146. },
  147. rulesForm: {
  148. intoUnit: [{ required: true, message: '请输入参加单位', trigger: 'blur' }],
  149. patUserNumber: [{ required: true, message: '请输入巡检人数', trigger: 'blur' }],
  150. checkDate: [{ required: true, message: '请选择巡查日期', trigger: 'change' }],
  151. projectList: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
  152. patrolUserList: [{ required: true, message: '请选择巡查人员', trigger: 'change' }],
  153. patrolTypes: [{ required: true, message: '请选择巡查类型', trigger: 'change' }],
  154. },
  155. });
  156. const { queryParams, formData, rulesForm } = toRefs(allData);
  157.  
  158. /** 获取搜索数据列表 */
  159. function getDataList() {
  160. tableLoading.value = true;
  161. overSeePage(queryParams.value).then(response => {
  162. tableData.value = response.data;
  163. total.value = response.total;
  164. tableLoading.value = false;
  165. });
  166. }
  167. /** 取消按钮 */
  168. function cancelForm() {
  169. dialogShow.value = false;
  170. proxy.resetForm('formRef'); //清空表单
  171. }
  172. /** 搜索按钮操作 */
  173. function handleQuery() {
  174. queryParams.value.pageNum = 1;
  175. getDataList();
  176. }
  177. /** 重置按钮操作 */
  178. function resetQuery() {
  179. proxy.resetForm('queryRef');
  180. handleQuery();
  181. }
  182. // 项目接口
  183. async function projectTypeListM() {
  184. let { data } = await getProjectInfoList();
  185. projectTList.value = data;
  186. }
  187. //搜索人员列表
  188. function getUserList() {
  189. listUser().then(res => {
  190. userList.value = res.data || [];
  191. userList.value.map(item => {
  192. item.userId = String(item.userId);
  193. });
  194. });
  195. }
  196.  
  197. /** 新增按钮操作 */
  198. function handleAdd() {
  199. proxy.resetForm('formRef'); //清空表单
  200. formData.value = {};
  201. dialogShow.value = true;
  202. dialogTitle.value = '新增督察巡查台账';
  203. }
  204. /** 修改按钮操作 */
  205. function handleUpdate(row) {
  206. dialogShow.value = true;
  207. dialogTitle.value = '修改督察巡查台账';
  208. formData.value = { ...row };
  209. // 做修改回显判断
  210. formData.value.patrolUserList = row.planUserIds ? row.planUserIds.split(',') : [];
  211. formData.value.patrolUserList.forEach(element => {
  212. element = element.userId;
  213. });
  214. formData.value.projectList = row.projectCodes ? row.projectCodes.split(',') : [];
  215. }
  216. /** 提交按钮 */
  217. function submitForm() {
  218. proxy.$refs['formRef'].validate(valid => {
  219. if (valid) {
  220. // 处理项目传参
  221. formData.value.projectList = formData.value.projectList.map(obj => {
  222. // console.log(projectTList.value, 'projectTList.value');
  223. let nameXm = '';
  224. projectTList.value.forEach(item => {
  225. if (item.projectNo == obj) {
  226. nameXm = item.projectName;
  227. }
  228. });
  229. return { projectNo: obj, projectName: nameXm };
  230. });
  231. // 处理人员传参
  232. formData.value.patrolUserList = formData.value.patrolUserList.map(item => {
  233. return { userId: item };
  234. });
  235.  
  236. // console.log(formData.value, 'formData.value');
  237. if (dialogTitle.value == '修改督察巡查台账') {
  238. overSeeEdit(formData.value).then(response => {
  239. proxy.$modal.msgSuccess('修改成功');
  240. dialogShow.value = false;
  241. getDataList();
  242. });
  243. } else {
  244. if (formData.value.id) delete formData.value.id;
  245. overSeeAdd(formData.value).then(response => {
  246. proxy.$modal.msgSuccess('新增成功');
  247. dialogShow.value = false;
  248. getDataList();
  249. });
  250. }
  251. }
  252. });
  253. }
  254. /** 删除按钮操作 */
  255. function handleDelete(row) {
  256. const postIds = row.id;
  257. proxy.$modal
  258. .confirm('是否确认删除该数据项?')
  259. .then(function () {
  260. return overSeeDel(postIds);
  261. })
  262. .then(() => {
  263. getDataList();
  264. proxy.$modal.msgSuccess('删除成功');
  265. })
  266. .catch(() => {});
  267. }
  268. //导出
  269. function Download() {
  270. proxy.$modal
  271. .confirm('是否确认导出?')
  272. .then(async () => {
  273. proxy.download('/business/overSee/export', {}, `督察巡查台账${new Date().getTime()}.xlsx`);
  274. })
  275. .catch(() => {});
  276. }
  277. onMounted(() => {
  278. getDataList();
  279. projectTypeListM();
  280. getUserList();
  281. });
  282. </script>