Newer
Older
urbanLifeline_YanAn / src / views / dataBasePlatform / dataAssets / drainageProject / floodProneDrainagePointsInfo.vue
@zhangzhihui zhangzhihui on 28 Nov 12 KB 排水1-3
  1. <template>
  2. <div class="floodProneDrainagePointsInfo publicContainer">
  3. <div class="dataTitle">排水易涝点信息</div>
  4. <el-divider />
  5. <div class="dataContent">
  6. <el-row class="dataTop">
  7. <el-col :span="10">
  8. <el-input v-model="qlCode" style="width: 320px" placeholder="请输入易涝点编号">
  9. <template #suffix>
  10. <el-icon class="el-input__icon searchBtn"><search /></el-icon>
  11. </template>
  12. </el-input>
  13. </el-col>
  14. <el-col :span="3">
  15. <el-button type="primary" icon="Plus" @click="addInfo">新增</el-button>
  16. <el-button type="primary" plain>批量删除</el-button>
  17. </el-col>
  18. </el-row>
  19.  
  20. <!-- 表单 -->
  21. <el-table
  22. :data="tableData"
  23. style="width: 100%"
  24. v-setHeight="{ bottom: 60 }"
  25. v-loading="loading"
  26. @selection-change="handleSelectionChange"
  27. >
  28. <!-- <el-table-column type="index" label="序号" width="50" /> -->
  29. <el-table-column fixed type="selection" width="30" />
  30. <el-table-column prop="code" label="易涝点编号" />
  31. <el-table-column prop="name" label="易涝点名称" />
  32. <el-table-column prop="p1" label="所在道路">
  33. <!-- <template #default="{ row }">
  34. <div>{{ stationType.find(item => item.value == row.p1)?.label || row.p1 }}</div>
  35. </template> -->
  36. </el-table-column>
  37. <el-table-column prop="p2" label="积水原因"> </el-table-column>
  38. <el-table-column prop="p3" label="负责人"> </el-table-column>
  39. <el-table-column prop="p4" label="联系方式"> </el-table-column>
  40. <el-table-column prop="p5" label="整改状态">
  41. <template #default="{ row }">
  42. <div>{{ stateType.find(item => item.value == row.p5)?.label || row.p5 }}</div>
  43. </template>
  44. </el-table-column>
  45. <el-table-column prop="p6" label="整改时间"> </el-table-column>
  46.  
  47. <el-table-column prop="p7" label="地址" />
  48.  
  49. <el-table-column label="操作" min-width="100">
  50. <template #default="{ row }">
  51. <div style="display: flex; justify-content: space-evenly">
  52. <el-button link type="primary" icon="Edit" @click="addInfo(row)">编辑</el-button>
  53. <el-button link type="danger" icon="Delete" @click="deleteInfo(row)">删除</el-button>
  54. </div>
  55. </template>
  56. </el-table-column>
  57. </el-table>
  58.  
  59. <pagination
  60. class="pagingPosition"
  61. v-show="total > 0"
  62. :total="total"
  63. v-model:page="queryParams.pageNum"
  64. v-model:limit="queryParams.pageSize"
  65. @pagination="getList"
  66. />
  67. </div>
  68.  
  69. <!-- 新增 及 修改 -->
  70. <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
  71. <template #header>
  72. <div class="diaHeader">
  73. {{ dialogConfig.title }}
  74. </div>
  75. </template>
  76. <el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
  77. <el-row>
  78. <el-col :span="24">
  79. <el-form-item label="易涝点编号" prop="title">
  80. <el-input v-model="addForm.code" placeholder="请输入" clearable />
  81. </el-form-item>
  82. </el-col>
  83. </el-row>
  84.  
  85. <el-row>
  86. <el-col :span="24">
  87. <el-form-item label="易涝点名称" prop="title">
  88. <el-input v-model="addForm.name" placeholder="请输入" clearable />
  89. </el-form-item>
  90. </el-col>
  91. </el-row>
  92.  
  93. <el-row>
  94. <el-col :span="24">
  95. <el-form-item label="所在街道" prop="title">
  96. <el-input v-model="addForm.p1" placeholder="请输入" clearable />
  97. </el-form-item>
  98. </el-col>
  99. </el-row>
  100.  
  101. <el-row justify="space-between">
  102. <el-col :span="11">
  103. <el-form-item label="最长积水时间" prop="">
  104. <el-input v-model="addForm.p20" placeholder="请输入" clearable />
  105. <!-- <el-select v-model="addForm.p1" style="width: 100%">
  106. <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
  107. </el-select> -->
  108. </el-form-item>
  109. </el-col>
  110. <el-col :span="11">
  111. <el-form-item label="最大积水面积" prop="">
  112. <el-input v-model="addForm.p21" placeholder="请输入" clearable />
  113. </el-form-item>
  114. </el-col>
  115. </el-row>
  116.  
  117. <el-row justify="space-between">
  118. <el-col :span="11">
  119. <el-form-item label="负责人" prop="">
  120. <el-input v-model="addForm.p3" placeholder="请输入" clearable />
  121. </el-form-item>
  122. </el-col>
  123. <el-col :span="11">
  124. <el-form-item label="联系方式" prop="">
  125. <el-input v-model="addForm.p4" placeholder="请输入" clearable />
  126. </el-form-item>
  127. </el-col>
  128. </el-row>
  129.  
  130. <el-row>
  131. <el-col :span="24">
  132. <el-form-item label="积水原因" prop="title">
  133. <el-input v-model="addForm.p2" placeholder="请输入" clearable />
  134. </el-form-item>
  135. </el-col>
  136. </el-row>
  137.  
  138. <el-row justify="space-between">
  139. <el-col :span="11">
  140. <el-form-item label="积水深度" prop="">
  141. <el-input v-model="addForm.p22" placeholder="请输入" clearable />
  142. </el-form-item>
  143. </el-col>
  144. <el-col :span="11">
  145. <el-form-item label="积水点产生时间" prop="">
  146. <!-- <el-input v-model="addForm.p6" placeholder="请输入" clearable /> -->
  147. <el-date-picker
  148. placeholder="请选择"
  149. v-model="addForm.p23"
  150. type="date"
  151. format="YYYY-MM-DD"
  152. value-format="YYYY-MM-DD"
  153. style="width: 100%"
  154. clearable
  155. />
  156. </el-form-item>
  157. </el-col>
  158. </el-row>
  159.  
  160. <el-row justify="space-between">
  161. <el-col :span="11">
  162. <el-form-item label="地市编码" prop="">
  163. <el-input v-model="addForm.p24" placeholder="请输入" clearable />
  164. </el-form-item>
  165. </el-col>
  166. <el-col :span="11">
  167. <el-form-item label="区划编码" prop="">
  168. <el-input v-model="addForm.p25" placeholder="请输入" clearable />
  169. </el-form-item>
  170. </el-col>
  171. </el-row>
  172.  
  173. <el-row>
  174. <el-col :span="24">
  175. <el-form-item label="地址" prop="">
  176. <el-input v-model="addForm.p9" placeholder="请输入" clearable />
  177. </el-form-item>
  178. </el-col>
  179. </el-row>
  180.  
  181. <el-row>
  182. <el-col :span="24">
  183. <el-form-item label="经纬度" prop="">
  184. <el-input v-model="addForm.p10" placeholder="请输入" clearable />
  185. </el-form-item>
  186. </el-col>
  187. </el-row>
  188.  
  189. <el-row justify="space-between">
  190. <el-col :span="11">
  191. <el-form-item label="整改状态" prop="">
  192. <el-select v-model="addForm.p5" style="width: 100%">
  193. <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
  194. </el-select>
  195. </el-form-item>
  196. </el-col>
  197. <el-col :span="11">
  198. <el-form-item label="整改时间" prop="">
  199. <el-date-picker
  200. placeholder="请选择"
  201. v-model="addForm.p26"
  202. type="date"
  203. format="YYYY-MM-DD"
  204. value-format="YYYY-MM-DD"
  205. style="width: 100%"
  206. clearable
  207. />
  208. </el-form-item>
  209. </el-col>
  210. </el-row>
  211.  
  212. <el-row>
  213. <el-col :span="24">
  214. <el-form-item label="整改措施" prop="">
  215. <el-input
  216. v-model="addForm.info"
  217. :autosize="{ minRows: 2, maxRows: 4 }"
  218. type="textarea"
  219. placeholder="请输入"
  220. maxlength="300"
  221. show-word-limit
  222. />
  223. </el-form-item>
  224. </el-col>
  225. </el-row>
  226.  
  227. <el-row class="diaCheck">
  228. <el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
  229. <el-button class="cancel" @click="close">取 消</el-button>
  230. </el-row>
  231. </el-form>
  232. </el-dialog>
  233. </div>
  234. </template>
  235.  
  236. <script setup name="floodProneDrainagePointsInfo">
  237. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  238. import { onMounted, reactive, toRefs } from 'vue';
  239.  
  240. const { proxy } = getCurrentInstance();
  241.  
  242. const stationType = ref([
  243. {
  244. id: 1,
  245. value: 1,
  246. label: '污水泵站',
  247. },
  248. {
  249. id: 2,
  250. value: 2,
  251. label: '雨污水泵站',
  252. },
  253. {
  254. id: 3,
  255. value: 3,
  256. label: '立交泵站',
  257. },
  258. {
  259. id: 4,
  260. value: 4,
  261. label: '雨水泵站',
  262. },
  263. {
  264. id: 5,
  265. value: 5,
  266. label: '其他泵站',
  267. },
  268. ]);
  269. const stateType = ref([
  270. {
  271. id: 1,
  272. value: 1,
  273. label: '已整改',
  274. },
  275. {
  276. id: 2,
  277. value: 2,
  278. label: '未整改',
  279. },
  280. ]);
  281.  
  282. const ruleAddFormRef = ref();
  283. const total = ref(0);
  284. const loading = ref(false);
  285. const queryParams = ref({
  286. pageNum: 1,
  287. pageSize: 10,
  288. });
  289. const qlCode = ref('');
  290. const tableData = ref([]);
  291. const multipleSelection = ref([]); // 多选数据
  292. const dataList = reactive({
  293. dialogConfig: {
  294. title: '',
  295. open: false,
  296. },
  297. addForm: {
  298. id: undefined,
  299. code: '',
  300. name: '',
  301. p1: '',
  302. p2: '',
  303. p3: '',
  304. p4: '',
  305. p5: '',
  306. p6: '',
  307. p7: '',
  308. p8: '',
  309. p9: '',
  310. info: '',
  311. handlePicList: [],
  312. },
  313. rules: {
  314. title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  315. content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  316. },
  317. });
  318.  
  319. const { dialogConfig, addForm, rules } = toRefs(dataList);
  320.  
  321. // 新增和编辑
  322. const addInfo = row => {
  323. dialogConfig.value.open = true;
  324. if (row.id) {
  325. addForm.value = row;
  326. dialogConfig.value.title = '编辑排水易涝点信息';
  327. } else {
  328. addForm.value = {
  329. id: undefined,
  330. code: '',
  331. name: '',
  332. p1: '',
  333. p2: '',
  334. p3: '',
  335. p4: '',
  336. p5: '',
  337. p6: '',
  338. p7: '',
  339. p8: '',
  340. p9: '',
  341. info: '',
  342. handlePicList: [],
  343. };
  344. dialogConfig.value.title = '新增排水易涝点信息';
  345. }
  346. };
  347. // 新增和编辑 提交
  348. const submitForm = formRef => {
  349. if (!formRef) return;
  350. formRef.validate(valid => {
  351. if (valid) {
  352. console.log('---------', addForm.value);
  353. // addInfo(addForm.value).then(response => {
  354. // proxy.$modal.msgSuccess('新增成功');
  355. // getInfoList();
  356. // });
  357. dialogConfig.value.open = false;
  358. }
  359. });
  360. };
  361.  
  362. const close = () => {
  363. dialogConfig.value.open = false;
  364. };
  365.  
  366. // table多选
  367. const handleSelectionChange = val => {
  368. console.log('🚀 ~ handleSelectionChange ~ val:', val);
  369. multipleSelection.value = val;
  370. };
  371.  
  372. // 新增和编辑
  373.  
  374. // 删除
  375. const deleteInfo = () => {};
  376.  
  377. // 获取表单数据
  378. const getList = () => {
  379. loading.value = true;
  380. setTimeout(() => {
  381. tableData.value = [
  382. {
  383. id: '001',
  384. code: '123456789',
  385. date: '2022-06-01 12:00:00',
  386. name: '桥梁名称',
  387. p1: '1',
  388. p2: 1,
  389. p3: 1,
  390. p4: 1,
  391. p5: 1,
  392. p6: '20',
  393. p7: '34',
  394. p8: '124',
  395. p9: '',
  396. info: '',
  397. handlePicList: [],
  398. },
  399. {
  400. id: '002',
  401. code: '123456789',
  402. date: '2022-06-01 12:00:00',
  403. name: '桥梁名称',
  404. p1: '1',
  405. p2: 1,
  406. p3: 1,
  407. p4: 1,
  408. p5: 1,
  409. p6: '20',
  410. p7: '34',
  411. p8: '124',
  412. p9: '',
  413. info: '',
  414. handlePicList: [],
  415. },
  416. ];
  417. total.value = tableData.value.length;
  418. loading.value = false;
  419. }, 500);
  420. };
  421.  
  422. onMounted(() => {
  423. getList();
  424. });
  425. </script>
  426.  
  427. <style lang="scss" scoped>
  428. .floodProneDrainagePointsInfo {
  429. position: relative;
  430. width: 100%;
  431. height: 100%;
  432. // border: 1px solid red;
  433. // background: #fff;
  434. .dataTitle {
  435. position: relative;
  436. padding-left: 10px;
  437. &::before {
  438. position: absolute;
  439. left: 0;
  440. top: 50%;
  441. transform: translateY(-50%);
  442. content: '';
  443. width: 5px;
  444. height: 14px;
  445. background: #2561ef;
  446. border-radius: 3px;
  447. }
  448. }
  449. .dataContent {
  450. .dataTop {
  451. display: flex;
  452. align-items: center;
  453. justify-content: space-between;
  454. margin-bottom: 10px;
  455. }
  456. }
  457. }
  458. .el-divider {
  459. margin: 10px 0 15px 0;
  460. }
  461. .searchBtn {
  462. cursor: pointer;
  463. &:hover {
  464. color: #2561ef;
  465. }
  466. }
  467. .pagingPosition {
  468. position: absolute !important;
  469. right: 0px;
  470. bottom: 0px;
  471. }
  472. </style>