Newer
Older
urbanLifeline_YanAn / src / views / dataBasePlatform / dataAssets / bottledLiquefiedGasProject / liquefiedGasCylinderLedger.vue
@zhangzhihui zhangzhihui on 26 Nov 14 KB 液化气页面
  1. <template>
  2. <div class="liquefiedGasCylinderLedger 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. <el-table-column prop="p2" label="出厂编码">
  34. <!-- <template #default="{ row }">
  35. <div>{{ stationType.find(item => item.value == row.p2)?.label || row.p2 }}</div>
  36. </template> -->
  37. </el-table-column>
  38. <el-table-column prop="p3" label="出厂日期" />
  39. <el-table-column prop="p4" label="制造年月" />
  40. <el-table-column prop="p5" label="报废日期"> </el-table-column>
  41. <el-table-column prop="p6" label="使用状态" />
  42. <el-table-column prop="p7" label="当前持有者名称" />
  43. <el-table-column prop="p8" label="当前持有者详细地址" />
  44.  
  45. <el-table-column label="操作" min-width="100">
  46. <template #default="{ row }">
  47. <div style="display: flex; justify-content: space-evenly">
  48. <el-button link type="primary" icon="Edit" @click="addInfo(row)">编辑</el-button>
  49. <el-button link type="danger" icon="Delete" @click="deleteInfo(row)">删除</el-button>
  50. </div>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54.  
  55. <pagination
  56. class="pagingPosition"
  57. v-show="total > 0"
  58. :total="total"
  59. v-model:page="queryParams.pageNum"
  60. v-model:limit="queryParams.pageSize"
  61. @pagination="getList"
  62. />
  63. </div>
  64.  
  65. <!-- 新增 及 修改 -->
  66. <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
  67. <template #header>
  68. <div class="diaHeader">
  69. {{ dialogConfig.title }}
  70. </div>
  71. </template>
  72. <el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
  73. <el-row>
  74. <el-col :span="24">
  75. <el-form-item label="企业编码" prop="title">
  76. <el-input v-model="addForm.code" placeholder="请输入" clearable />
  77. </el-form-item>
  78. </el-col>
  79. </el-row>
  80. <el-row>
  81. <el-col :span="24">
  82. <el-form-item label="气瓶条码" prop="title">
  83. <el-input v-model="addForm.name" placeholder="请输入" clearable />
  84. </el-form-item>
  85. </el-col>
  86. </el-row>
  87.  
  88. <el-row justify="space-between">
  89. <el-col :span="24">
  90. <el-form-item label="二维码地址" prop="">
  91. <el-input v-model="addForm.p10" placeholder="请输入" clearable />
  92. </el-form-item>
  93. </el-col>
  94. </el-row>
  95.  
  96. <el-row justify="space-between">
  97. <el-col :span="11">
  98. <el-form-item label="自有编码" prop="">
  99. <el-input v-model="addForm.p1" placeholder="请输入" clearable />
  100. <!-- <el-select v-model="addForm.p2" style="width: 100%">
  101. <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
  102. </el-select> -->
  103. </el-form-item>
  104. </el-col>
  105. <el-col :span="11">
  106. <el-form-item label="出厂编码" prop="">
  107. <el-input v-model="addForm.p2" placeholder="请输入" clearable />
  108. </el-form-item>
  109. </el-col>
  110. </el-row>
  111.  
  112. <el-row justify="space-between">
  113. <el-col :span="11">
  114. <el-form-item label="出厂日期" prop="">
  115. <!-- <el-input v-model="addForm.p3" placeholder="请输入" clearable /> -->
  116. <el-date-picker
  117. placeholder="请选择"
  118. v-model="addForm.p3"
  119. type="date"
  120. format="YYYY-MM-DD"
  121. value-format="YYYY-MM-DD"
  122. style="width: 100%"
  123. clearable
  124. />
  125. </el-form-item>
  126. </el-col>
  127. <el-col :span="11">
  128. <el-form-item label="制造单位" prop="">
  129. <el-input v-model="addForm.p7" placeholder="请输入" clearable />
  130. </el-form-item>
  131. </el-col>
  132. </el-row>
  133.  
  134. <el-row justify="space-between">
  135. <el-col :span="11">
  136. <el-form-item label="制造年月" prop="">
  137. <el-date-picker
  138. placeholder="请选择"
  139. v-model="addForm.p4"
  140. type="date"
  141. format="YYYY-MM-DD"
  142. value-format="YYYY-MM-DD"
  143. style="width: 100%"
  144. clearable
  145. />
  146. </el-form-item>
  147. </el-col>
  148. <el-col :span="11">
  149. <el-form-item label="建档日期" prop="">
  150. <el-date-picker
  151. placeholder="请选择"
  152. v-model="addForm.p11"
  153. type="date"
  154. format="YYYY-MM-DD"
  155. value-format="YYYY-MM-DD"
  156. style="width: 100%"
  157. clearable
  158. />
  159. </el-form-item>
  160. </el-col>
  161. </el-row>
  162.  
  163. <el-row justify="space-between">
  164. <el-col :span="11">
  165. <el-form-item label="末检年月" prop="">
  166. <el-date-picker
  167. placeholder="请选择"
  168. v-model="addForm.p12"
  169. type="date"
  170. format="YYYY-MM-DD"
  171. value-format="YYYY-MM-DD"
  172. style="width: 100%"
  173. clearable
  174. />
  175. </el-form-item>
  176. </el-col>
  177. <el-col :span="11">
  178. <el-form-item label="下检年月" prop="">
  179. <el-date-picker
  180. placeholder="请选择"
  181. v-model="addForm.p13"
  182. type="date"
  183. format="YYYY-MM-DD"
  184. value-format="YYYY-MM-DD"
  185. style="width: 100%"
  186. clearable
  187. />
  188. </el-form-item>
  189. </el-col>
  190. </el-row>
  191.  
  192. <el-row justify="space-between">
  193. <el-col :span="11">
  194. <el-form-item label="报废日期" prop="">
  195. <el-date-picker
  196. placeholder="请选择"
  197. v-model="addForm.p14"
  198. type="date"
  199. format="YYYY-MM-DD"
  200. value-format="YYYY-MM-DD"
  201. style="width: 100%"
  202. clearable
  203. />
  204. </el-form-item>
  205. </el-col>
  206. <el-col :span="11">
  207. <el-form-item label="使用状态" prop="">
  208. <el-select v-model="addForm.p6" style="width: 100%">
  209. <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
  210. </el-select>
  211. </el-form-item>
  212. </el-col>
  213. </el-row>
  214.  
  215. <el-row justify="space-between">
  216. <el-col :span="11">
  217. <el-form-item label="是否在用重瓶" prop="">
  218. <!-- <el-input v-model="addForm.p16" placeholder="请输入" clearable /> -->
  219. <el-radio-group v-model="addForm.p15">
  220. <el-radio label="1"></el-radio>
  221. <el-radio label="2"></el-radio>
  222. </el-radio-group>
  223. </el-form-item>
  224. </el-col>
  225. <el-col :span="11">
  226. <el-form-item label="是否流转正常" prop="">
  227. <!-- <el-input v-model="addForm.p17" placeholder="请输入" clearable /> -->
  228. <el-radio-group v-model="addForm.p16">
  229. <el-radio label="1"></el-radio>
  230. <el-radio label="2"></el-radio>
  231. </el-radio-group>
  232. </el-form-item>
  233. </el-col>
  234. </el-row>
  235.  
  236. <el-row justify="space-between">
  237. <el-col :span="11">
  238. <el-form-item label="当前流转环节" prop="">
  239. <!-- stationType -->
  240. <el-select v-model="addForm.p17" style="width: 100%">
  241. <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
  242. </el-select>
  243. </el-form-item>
  244. </el-col>
  245. <el-col :span="11">
  246. <el-form-item label="当前环节启动时间" prop="">
  247. <el-date-picker
  248. placeholder="请选择"
  249. v-model="addForm.p18"
  250. type="date"
  251. format="YYYY-MM-DD"
  252. value-format="YYYY-MM-DD"
  253. style="width: 100%"
  254. clearable
  255. />
  256. </el-form-item>
  257. </el-col>
  258. </el-row>
  259.  
  260. <el-row justify="space-between">
  261. <el-col :span="11">
  262. <el-form-item label="地市编码" prop="">
  263. <el-input v-model="addForm.p19" placeholder="请输入" clearable />
  264. </el-form-item>
  265. </el-col>
  266. <el-col :span="11">
  267. <el-form-item label="当前持有者名称" prop="">
  268. <el-input v-model="addForm.p7" placeholder="请输入" clearable />
  269. </el-form-item>
  270. </el-col>
  271. </el-row>
  272.  
  273. <el-row>
  274. <el-col :span="24">
  275. <el-form-item label="详细地址" prop="">
  276. <el-input v-model="addForm.p8" placeholder="请输入" clearable />
  277. </el-form-item>
  278. </el-col>
  279. </el-row>
  280.  
  281. <el-row>
  282. <el-col :span="24">
  283. <el-form-item label="经纬度" prop="">
  284. <el-input v-model="addForm.p9" placeholder="请输入" clearable />
  285. </el-form-item>
  286. </el-col>
  287. </el-row>
  288.  
  289. <el-row class="diaCheck">
  290. <el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
  291. <el-button class="cancel" @click="close">取 消</el-button>
  292. </el-row>
  293. </el-form>
  294. </el-dialog>
  295. </div>
  296. </template>
  297.  
  298. <script setup name="liquefiedGasCylinderLedger">
  299. import { onMounted, reactive, toRefs } from 'vue';
  300.  
  301. const { proxy } = getCurrentInstance();
  302.  
  303. const stationType = ref([
  304. {
  305. id: 1,
  306. value: 1,
  307. label: '充装',
  308. },
  309. {
  310. id: 2,
  311. value: 2,
  312. label: '运输',
  313. },
  314. {
  315. id: 3,
  316. value: 3,
  317. label: '供应',
  318. },
  319. {
  320. id: 4,
  321. value: 4,
  322. label: '配送',
  323. },
  324. {
  325. id: 5,
  326. value: 5,
  327. label: '使用',
  328. },
  329. {
  330. id: 5,
  331. value: 5,
  332. label: '回收',
  333. },
  334. ]);
  335. const stateType = ref([
  336. {
  337. id: 1,
  338. value: 1,
  339. label: '正常',
  340. },
  341. {
  342. id: 2,
  343. value: 2,
  344. label: '异常',
  345. },
  346. ]);
  347.  
  348. const ruleAddFormRef = ref();
  349. const total = ref(0);
  350. const loading = ref(false);
  351. const queryParams = ref({
  352. pageNum: 1,
  353. pageSize: 10,
  354. });
  355. const qlCode = ref('');
  356. const tableData = ref([]);
  357. const multipleSelection = ref([]); // 多选数据
  358. const dataList = reactive({
  359. dialogConfig: {
  360. title: '',
  361. open: false,
  362. },
  363. addForm: {
  364. id: undefined,
  365. code: '',
  366. name: '',
  367. p1: '',
  368. p2: '',
  369. p3: '',
  370. p4: '',
  371. p5: '',
  372. p6: '',
  373. p7: '',
  374. p8: '',
  375. },
  376. rules: {
  377. title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  378. content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  379. },
  380. });
  381.  
  382. const { dialogConfig, addForm, rules } = toRefs(dataList);
  383.  
  384. // 新增和编辑
  385. const addInfo = row => {
  386. dialogConfig.value.open = true;
  387. if (row.id) {
  388. addForm.value = row;
  389. dialogConfig.value.title = '编辑液化气瓶台账';
  390. } else {
  391. addForm.value = {
  392. id: undefined,
  393. code: '',
  394. name: '',
  395. p1: '',
  396. p2: '',
  397. p3: '',
  398. p4: '',
  399. p5: '',
  400. p6: '',
  401. p7: '',
  402. p8: '',
  403. p9: '',
  404. };
  405. dialogConfig.value.title = '新增液化气瓶台账';
  406. }
  407. };
  408. // 新增和编辑 提交
  409. const submitForm = formRef => {
  410. if (!formRef) return;
  411. formRef.validate(valid => {
  412. if (valid) {
  413. console.log('---------', addForm.value);
  414. // addInfo(addForm.value).then(response => {
  415. // proxy.$modal.msgSuccess('新增成功');
  416. // getInfoList();
  417. // });
  418. dialogConfig.value.open = false;
  419. }
  420. });
  421. };
  422.  
  423. const close = () => {
  424. dialogConfig.value.open = false;
  425. };
  426.  
  427. // table多选
  428. const handleSelectionChange = val => {
  429. console.log('🚀 ~ handleSelectionChange ~ val:', val);
  430. multipleSelection.value = val;
  431. };
  432.  
  433. // 新增和编辑
  434.  
  435. // 删除
  436. const deleteInfo = () => {};
  437.  
  438. // 获取表单数据
  439. const getList = () => {
  440. loading.value = true;
  441. setTimeout(() => {
  442. tableData.value = [
  443. {
  444. id: '001',
  445. code: '123456789',
  446. date: '2022-06-01 12:00:00',
  447. name: '桥梁名称',
  448. p1: '1',
  449. p2: 1,
  450. p3: '100',
  451. p4: '100',
  452. p5: 1,
  453. p6: '1',
  454. p7: '34',
  455. p8: '124',
  456. },
  457. {
  458. id: '002',
  459. code: '123456789',
  460. date: '2022-06-01 12:00:00',
  461. name: '桥梁名称',
  462. p1: '1',
  463. p2: 1,
  464. p3: '100',
  465. p4: '100',
  466. p5: 1,
  467. p6: '1',
  468. p7: '34',
  469. p8: '124',
  470. },
  471. ];
  472. total.value = tableData.value.length;
  473. loading.value = false;
  474. }, 500);
  475. };
  476.  
  477. onMounted(() => {
  478. getList();
  479. });
  480. </script>
  481.  
  482. <style lang="scss" scoped>
  483. .liquefiedGasCylinderLedger {
  484. position: relative;
  485. width: 100%;
  486. height: 100%;
  487. // border: 1px solid red;
  488. // background: #fff;
  489. .dataTitle {
  490. position: relative;
  491. padding-left: 10px;
  492. &::before {
  493. position: absolute;
  494. left: 0;
  495. top: 50%;
  496. transform: translateY(-50%);
  497. content: '';
  498. width: 5px;
  499. height: 14px;
  500. background: #2561ef;
  501. border-radius: 3px;
  502. }
  503. }
  504. .dataContent {
  505. .dataTop {
  506. display: flex;
  507. align-items: center;
  508. justify-content: space-between;
  509. margin-bottom: 10px;
  510. }
  511. }
  512. }
  513. .el-divider {
  514. margin: 10px 0 15px 0;
  515. }
  516. .searchBtn {
  517. cursor: pointer;
  518. &:hover {
  519. color: #2561ef;
  520. }
  521. }
  522. .pagingPosition {
  523. position: absolute !important;
  524. right: 0px;
  525. bottom: 0px;
  526. }
  527. </style>