Newer
Older
urbanLifeline_YanAn / src / views / dataBasePlatform / dataAssets / drainageProject / channelInfo.vue
@zhangzhihui zhangzhihui on 28 Nov 10 KB 排水1-3
  1. <template>
  2. <div class="channelInfo 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="起点详细地址"> </el-table-column>
  41. <el-table-column prop="p6" label="结束点详细地址" />
  42.  
  43. <el-table-column label="操作" min-width="100">
  44. <template #default="{ row }">
  45. <div style="display: flex; justify-content: space-evenly">
  46. <el-button link type="primary" icon="Edit" @click="addInfo(row)">编辑</el-button>
  47. <el-button link type="danger" icon="Delete" @click="deleteInfo(row)">删除</el-button>
  48. </div>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52.  
  53. <pagination
  54. class="pagingPosition"
  55. v-show="total > 0"
  56. :total="total"
  57. v-model:page="queryParams.pageNum"
  58. v-model:limit="queryParams.pageSize"
  59. @pagination="getList"
  60. />
  61. </div>
  62.  
  63. <!-- 新增 及 修改 -->
  64. <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
  65. <template #header>
  66. <div class="diaHeader">
  67. {{ dialogConfig.title }}
  68. </div>
  69. </template>
  70. <el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
  71. <el-row>
  72. <el-col :span="24">
  73. <el-form-item label="河道编号" prop="title">
  74. <el-input v-model="addForm.code" placeholder="请输入" clearable />
  75. </el-form-item>
  76. </el-col>
  77. </el-row>
  78.  
  79. <el-row>
  80. <el-col :span="24">
  81. <el-form-item label="河道名称" prop="title">
  82. <el-input v-model="addForm.name" placeholder="请输入" clearable />
  83. </el-form-item>
  84. </el-col>
  85. </el-row>
  86.  
  87. <el-row justify="space-between">
  88. <el-col :span="11">
  89. <el-form-item label="所属水系" prop="">
  90. <!-- <el-input v-model="addForm.p1" placeholder="请输入" clearable /> -->
  91. <el-select v-model="addForm.p1" style="width: 100%">
  92. <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
  93. </el-select>
  94. </el-form-item>
  95. </el-col>
  96. <el-col :span="11">
  97. <el-form-item label="河流长度" prop="">
  98. <el-input v-model="addForm.p2" placeholder="请输入" clearable />
  99. </el-form-item>
  100. </el-col>
  101. </el-row>
  102.  
  103. <el-row justify="space-between">
  104. <el-col :span="11">
  105. <el-form-item label="测站数量" prop="">
  106. <el-input v-model="addForm.p3" placeholder="请输入" clearable />
  107. </el-form-item>
  108. </el-col>
  109. <el-col :span="11">
  110. <el-form-item label="河道流向" prop="">
  111. <el-input v-model="addForm.p4" placeholder="请输入" clearable />
  112. </el-form-item>
  113. </el-col>
  114. </el-row>
  115.  
  116. <el-row justify="space-between">
  117. <el-col :span="11">
  118. <el-form-item label="地市编码" prop="">
  119. <el-input v-model="addForm.p17" placeholder="请输入" clearable />
  120. </el-form-item>
  121. </el-col>
  122. <el-col :span="11">
  123. <el-form-item label="区划编码" prop="">
  124. <el-input v-model="addForm.p18" placeholder="请输入" clearable />
  125. </el-form-item>
  126. </el-col>
  127. </el-row>
  128.  
  129. <el-row>
  130. <el-col :span="24">
  131. <el-form-item label="起点详细地址" prop="">
  132. <el-input v-model="addForm.p5" placeholder="请输入" clearable />
  133. </el-form-item>
  134. </el-col>
  135. </el-row>
  136.  
  137. <el-row>
  138. <el-col :span="24">
  139. <el-form-item label="起点经纬度" prop="">
  140. <el-input v-model="addForm.p11" placeholder="请输入" clearable />
  141. </el-form-item>
  142. </el-col>
  143. </el-row>
  144.  
  145. <el-row>
  146. <el-col :span="24">
  147. <el-form-item label="结束点详细地址" prop="">
  148. <el-input v-model="addForm.p6" placeholder="请输入" clearable />
  149. </el-form-item>
  150. </el-col>
  151. </el-row>
  152.  
  153. <el-row>
  154. <el-col :span="24">
  155. <el-form-item label="结束点经纬度" prop="">
  156. <el-input v-model="addForm.p12" placeholder="请输入" clearable />
  157. </el-form-item>
  158. </el-col>
  159. </el-row>
  160.  
  161. <el-row class="diaCheck">
  162. <el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
  163. <el-button class="cancel" @click="close">取 消</el-button>
  164. </el-row>
  165. </el-form>
  166. </el-dialog>
  167. </div>
  168. </template>
  169.  
  170. <script setup name="channelInfo">
  171. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  172. import { onMounted, reactive, toRefs } from 'vue';
  173.  
  174. const { proxy } = getCurrentInstance();
  175.  
  176. const stationType = ref([
  177. {
  178. id: 1,
  179. value: 1,
  180. label: '南湖水系',
  181. },
  182. {
  183. id: 2,
  184. value: 2,
  185. label: '汤逊湖水系',
  186. },
  187. ]);
  188. const stateType = ref([
  189. {
  190. id: 1,
  191. value: 1,
  192. label: '一级保护区',
  193. },
  194. {
  195. id: 2,
  196. value: 2,
  197. label: '二级保护区',
  198. },
  199. {
  200. id: 3,
  201. value: 3,
  202. label: '准保护区',
  203. },
  204. ]);
  205.  
  206. const ruleAddFormRef = ref();
  207. const total = ref(0);
  208. const loading = ref(false);
  209. const queryParams = ref({
  210. pageNum: 1,
  211. pageSize: 10,
  212. });
  213. const qlCode = ref('');
  214. const tableData = ref([]);
  215. const multipleSelection = ref([]); // 多选数据
  216. const dataList = reactive({
  217. dialogConfig: {
  218. title: '',
  219. open: false,
  220. },
  221. addForm: {
  222. id: undefined,
  223. code: '',
  224. name: '',
  225. p1: '',
  226. p2: '',
  227. p3: '',
  228. p4: '',
  229. p5: '',
  230. p6: '',
  231. p7: '',
  232. p8: '',
  233. p9: '',
  234. info: '',
  235. handlePicList: [],
  236. },
  237. rules: {
  238. title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  239. content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  240. },
  241. });
  242.  
  243. const { dialogConfig, addForm, rules } = toRefs(dataList);
  244.  
  245. // 新增和编辑
  246. const addInfo = row => {
  247. dialogConfig.value.open = true;
  248. if (row.id) {
  249. addForm.value = row;
  250. dialogConfig.value.title = '编辑排水河道信息';
  251. } else {
  252. addForm.value = {
  253. id: undefined,
  254. code: '',
  255. name: '',
  256. p1: '',
  257. p2: '',
  258. p3: '',
  259. p4: '',
  260. p5: '',
  261. p6: '',
  262. p7: '',
  263. p8: '',
  264. p9: '',
  265. info: '',
  266. handlePicList: [],
  267. };
  268. dialogConfig.value.title = '新增排水河道信息';
  269. }
  270. };
  271. // 新增和编辑 提交
  272. const submitForm = formRef => {
  273. if (!formRef) return;
  274. formRef.validate(valid => {
  275. if (valid) {
  276. console.log('---------', addForm.value);
  277. // addInfo(addForm.value).then(response => {
  278. // proxy.$modal.msgSuccess('新增成功');
  279. // getInfoList();
  280. // });
  281. dialogConfig.value.open = false;
  282. }
  283. });
  284. };
  285.  
  286. const close = () => {
  287. dialogConfig.value.open = false;
  288. };
  289.  
  290. // table多选
  291. const handleSelectionChange = val => {
  292. console.log('🚀 ~ handleSelectionChange ~ val:', val);
  293. multipleSelection.value = val;
  294. };
  295.  
  296. // 新增和编辑
  297.  
  298. // 删除
  299. const deleteInfo = () => {};
  300.  
  301. // 获取表单数据
  302. const getList = () => {
  303. loading.value = true;
  304. setTimeout(() => {
  305. tableData.value = [
  306. {
  307. id: '001',
  308. code: '123456789',
  309. date: '2022-06-01 12:00:00',
  310. name: '桥梁名称',
  311. p1: '1',
  312. p2: 1,
  313. p3: 1,
  314. p4: 1,
  315. p5: 1,
  316. p6: '20',
  317. p7: '34',
  318. p8: '124',
  319. p9: '',
  320. info: '',
  321. handlePicList: [],
  322. },
  323. {
  324. id: '002',
  325. code: '123456789',
  326. date: '2022-06-01 12:00:00',
  327. name: '桥梁名称',
  328. p1: '1',
  329. p2: 1,
  330. p3: 1,
  331. p4: 1,
  332. p5: 1,
  333. p6: '20',
  334. p7: '34',
  335. p8: '124',
  336. p9: '',
  337. info: '',
  338. handlePicList: [],
  339. },
  340. ];
  341. total.value = tableData.value.length;
  342. loading.value = false;
  343. }, 500);
  344. };
  345.  
  346. onMounted(() => {
  347. getList();
  348. });
  349. </script>
  350.  
  351. <style lang="scss" scoped>
  352. .channelInfo {
  353. position: relative;
  354. width: 100%;
  355. height: 100%;
  356. // border: 1px solid red;
  357. // background: #fff;
  358. .dataTitle {
  359. position: relative;
  360. padding-left: 10px;
  361. &::before {
  362. position: absolute;
  363. left: 0;
  364. top: 50%;
  365. transform: translateY(-50%);
  366. content: '';
  367. width: 5px;
  368. height: 14px;
  369. background: #2561ef;
  370. border-radius: 3px;
  371. }
  372. }
  373. .dataContent {
  374. .dataTop {
  375. display: flex;
  376. align-items: center;
  377. justify-content: space-between;
  378. margin-bottom: 10px;
  379. }
  380. }
  381. }
  382. .el-divider {
  383. margin: 10px 0 15px 0;
  384. }
  385. .searchBtn {
  386. cursor: pointer;
  387. &:hover {
  388. color: #2561ef;
  389. }
  390. }
  391. .pagingPosition {
  392. position: absolute !important;
  393. right: 0px;
  394. bottom: 0px;
  395. }
  396. </style>