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