index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
  1. <!--港口-->
  2. <template>
  3. <basic-container>
  4. <avue-crud :option="option"
  5. :table-loading="loading"
  6. :data="data"
  7. :page.sync="page"
  8. :permission="permissionList"
  9. id="out-table"
  10. :header-cell-class-name="headerClassName"
  11. :before-open="beforeOpen"
  12. v-model="form"
  13. ref="crud"
  14. @row-update="rowUpdate"
  15. @row-save="rowSave"
  16. @row-del="rowDel"
  17. @search-change="searchChange"
  18. @search-reset="searchReset"
  19. @selection-change="selectionChange"
  20. @current-change="currentChange"
  21. @size-change="sizeChange"
  22. @refresh-change="refreshChange"
  23. @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 298)"
  24. @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 298)"
  25. @on-load="onLoad">
  26. <template slot="menuLeft">
  27. <el-button type="danger"
  28. size="small"
  29. icon="el-icon-delete"
  30. plain
  31. @click="handleDelete">删 除
  32. </el-button>
  33. </template>
  34. <template slot="remarks" slot-scope="scope">
  35. <avue-text-ellipsis :text="scope.row.remarks" :height="30" use-tooltip placement="top">
  36. <small slot="more">...</small>
  37. </avue-text-ellipsis>
  38. </template>
  39. <template slot="extendedDataArr" slot-scope="scope">
  40. <span style="color: #1e9fff" @click="extendedDataview(scope.row)">
  41. {{scope.row.extendedDataArr.length}}
  42. </span>
  43. </template>
  44. <template slot-scope="{type,disabled,row}" slot="extendedDataArrForm">
  45. <el-button type="primary"
  46. size="small"
  47. @click="dialogVisible = true">EDI CODE
  48. </el-button>
  49. </template>
  50. </avue-crud>
  51. <el-dialog
  52. title="EDI CODE"
  53. :visible.sync="dialogVisible"
  54. width="50%"
  55. append-to-body
  56. :destroy-on-close="true"
  57. :modal-append-to-body="false"
  58. :before-close="handleClose">
  59. <div>
  60. <el-button type="primary"
  61. size="small"
  62. :disabled="extendedDisabled"
  63. @click="extendedDataAdd">新增
  64. </el-button>
  65. <el-table
  66. stripe
  67. :data="form.extendedDataArr"
  68. id="out-table"
  69. :header-cell-class-name="headerClassName"
  70. style="width: 100%">
  71. <el-table-column
  72. prop="name"
  73. label="名称">
  74. <template slot-scope="{row}">
  75. <el-input v-if="row.edit" size="mini" v-model="row.name" placeholder="请输入名称"></el-input>
  76. <span v-else>{{row.name}}</span>
  77. </template>
  78. </el-table-column>
  79. <el-table-column
  80. prop="value"
  81. label="键值">
  82. <template slot-scope="{row}">
  83. <el-input v-if="row.edit" size="mini" v-model="row.value" placeholder="请输入键值"></el-input>
  84. <span v-else>{{row.value}}</span>
  85. </template>
  86. </el-table-column>
  87. <el-table-column label="操作">
  88. <template slot-scope="scope">
  89. <el-button
  90. type="text"
  91. size="mini"
  92. :disabled="extendedDisabled"
  93. @click="extendedDataEdit(scope.$index, scope.row)">{{scope.row.edit?'保存':'编辑'}}</el-button>
  94. <el-button
  95. size="mini"
  96. type="text"
  97. :disabled="extendedDisabled"
  98. @click="extendedDataDelete(scope.$index, scope.row)">删除</el-button>
  99. </template>
  100. </el-table-column>
  101. </el-table>
  102. </div>
  103. <span slot="footer" class="dialog-footer">
  104. <el-button @click="dialogVisible = false;extendedDisabled = false">取 消</el-button>
  105. <el-button type="primary" @click="dialogVisible = false;extendedDisabled = false">确 定</el-button>
  106. </span>
  107. </el-dialog>
  108. </basic-container>
  109. </template>
  110. <script>
  111. import {bportsList, bportsDetail, bportsSubmit, bportsRemove} from "@/api/iosBasicData/bports";
  112. import {mapGetters} from "vuex";
  113. export default {
  114. data() {
  115. return {
  116. // 扩展数据弹窗
  117. dialogVisible:false,
  118. extendedDisabled:false,
  119. form: {
  120. extendedDataArr:[]
  121. },
  122. query: {},
  123. loading: true,
  124. page: {
  125. pageSize: 10,
  126. currentPage: 1,
  127. total: 0
  128. },
  129. selectionList: [],
  130. option:{},
  131. optionBack: {
  132. height:'auto',
  133. calcHeight: 30,
  134. tip: false,
  135. searchShow: true,
  136. searchMenuSpan: 24,
  137. border: true,
  138. index: true,
  139. viewBtn: true,
  140. selection: true,
  141. dialogClickModal: false,
  142. column: [
  143. {
  144. label: "港口编码",
  145. prop: "code",
  146. search: true,
  147. rules: [{
  148. required: true,
  149. message: "请输入港口编码",
  150. trigger: "blur"
  151. }]
  152. },
  153. {
  154. label: "国际编码",
  155. prop: "unCode",
  156. search: true,
  157. rules: [{
  158. required: true,
  159. message: "请输入国际编码",
  160. trigger: "blur"
  161. }]
  162. },
  163. {
  164. label: "中文名称",
  165. prop: "cnName",
  166. search: true,
  167. rules: [{
  168. required: true,
  169. message: "请输入中文名称",
  170. trigger: "blur"
  171. }]
  172. },
  173. {
  174. label: "英文名称",
  175. prop: "enName",
  176. search: true,
  177. rules: [{
  178. required: true,
  179. message: "请输入英文名称",
  180. trigger: "blur"
  181. }]
  182. },
  183. {
  184. label: "国家代码",
  185. prop: "cntyCode",
  186. search: true,
  187. rules: [{
  188. required: true,
  189. message: "请输入国家代码",
  190. trigger: "blur"
  191. }]
  192. },
  193. {
  194. label: "国家名称",
  195. prop: "cntyName",
  196. search: true,
  197. rules: [{
  198. required: true,
  199. message: "请输入国家名称",
  200. trigger: "blur"
  201. }]
  202. },
  203. {
  204. label: "是否海港",
  205. prop: "isSeaPort",
  206. type:'select',
  207. dicData:[{
  208. label:'否',
  209. value:0
  210. },{
  211. label:'是',
  212. value:1
  213. }],
  214. rules: [{
  215. required: true,
  216. message: "请输入是否海港",
  217. trigger: "blur"
  218. }]
  219. },
  220. {
  221. label: "是否空港",
  222. prop: "isAirPort",
  223. type:'select',
  224. dicData:[{
  225. label:'否',
  226. value:0
  227. },{
  228. label:'是',
  229. value:1
  230. }],
  231. rules: [{
  232. required: true,
  233. message: "请输入是否空港",
  234. trigger: "blur"
  235. }]
  236. },
  237. {
  238. label: "是否内陆港",
  239. prop: "isInlandPort",
  240. width:100,
  241. type:'select',
  242. dicData:[{
  243. label:'否',
  244. value:0
  245. },{
  246. label:'是',
  247. value:1
  248. }],
  249. rules: [{
  250. required: true,
  251. message: "请输入是否内陆港",
  252. trigger: "blur"
  253. }]
  254. },
  255. {
  256. label: "扩展数据",
  257. prop: "extendedDataArr",
  258. formslot:true,
  259. // rules: [{
  260. // required: true,
  261. // message: "请输入JSON 对象数组,用于不查询的扩展数据, 例如:[{name: key1, value: value1}]",
  262. // trigger: "blur"
  263. // }]
  264. },
  265. {
  266. label: "版本",
  267. prop: "version",
  268. hide:true,
  269. display:false,
  270. },
  271. {
  272. label: "状态",
  273. prop: "status",
  274. type:'select',
  275. dicData:[{
  276. label:'启用',
  277. value:0
  278. },{
  279. label:'停用',
  280. value:1
  281. }],
  282. },
  283. {
  284. label: "是否已删除(0 否 1是)",
  285. prop: "isDeleted",
  286. hide:true,
  287. display:false,
  288. },
  289. {
  290. label: "主键",
  291. prop: "id",
  292. hide:true,
  293. display:false,
  294. },
  295. {
  296. label: "创建人 Id",
  297. prop: "createUser",
  298. hide:true,
  299. display:false,
  300. },
  301. {
  302. label: "创建人",
  303. prop: "createUserName",
  304. display:false,
  305. },
  306. {
  307. label: "创建部门 Id",
  308. prop: "createDept",
  309. hide:true,
  310. display:false,
  311. },
  312. {
  313. label: "创建部门",
  314. prop: "createDeptName",
  315. display:false,
  316. },
  317. {
  318. label: "创建时间",
  319. prop: "createTime",
  320. width:160,
  321. display:false,
  322. },
  323. {
  324. label: "修改人 Id",
  325. prop: "updateUser",
  326. hide:true,
  327. display:false,
  328. },
  329. {
  330. label: "修改人",
  331. prop: "updateUserName",
  332. display:false,
  333. },
  334. {
  335. label: "修改时间",
  336. prop: "updateTime",
  337. width:160,
  338. display:false,
  339. },
  340. {
  341. label: "备注",
  342. prop: "remarks",
  343. span:24,
  344. type: 'textarea',
  345. width: "180",
  346. slot: true,
  347. minRows: 3,
  348. },
  349. ]
  350. },
  351. data: []
  352. };
  353. },
  354. computed: {
  355. ...mapGetters(["permission"]),
  356. permissionList() {
  357. return {
  358. // addBtn: this.vaildData(this.permission.bports_add, false),
  359. // viewBtn: this.vaildData(this.permission.bports_view, false),
  360. // delBtn: this.vaildData(this.permission.bports_delete, false),
  361. // editBtn: this.vaildData(this.permission.bports_edit, false)
  362. };
  363. },
  364. ids() {
  365. let ids = [];
  366. this.selectionList.forEach(ele => {
  367. ids.push(ele.id);
  368. });
  369. return ids.join(",");
  370. }
  371. },
  372. async created() {
  373. this.option = await this.getColumnData(this.getColumnName(298), this.optionBack);
  374. },
  375. methods: {
  376. // 扩展数据表格点击查询详情
  377. extendedDataview(row){
  378. this.form = row
  379. this.extendedDisabled = true
  380. this.dialogVisible = true
  381. },
  382. // 扩展数据弹窗关闭
  383. handleClose(done){
  384. this.$confirm('确认关闭?')
  385. .then(_ => {
  386. done();
  387. })
  388. .catch(_ => {});
  389. },
  390. // 扩展数据添加
  391. extendedDataAdd(){
  392. this.form.extendedDataArr.map(item=>{
  393. item.edit = false
  394. })
  395. this.form.extendedDataArr.push({
  396. edit:true
  397. })
  398. },
  399. // 扩展数据编辑
  400. extendedDataEdit(index,row) {
  401. row.edit = !row.edit
  402. },
  403. // 扩展数据删除
  404. extendedDataDelete(index,row) {
  405. this.form.extendedDataArr.splice(index,1)
  406. },
  407. rowSave(row, done, loading) {
  408. row.extendedDataArr.map(item=>{
  409. delete item.edit
  410. })
  411. row.extendedData = JSON.stringify(row.extendedDataArr)
  412. delete row.extendedDataArr
  413. bportsSubmit(row).then(() => {
  414. this.onLoad(this.page);
  415. this.$message({
  416. type: "success",
  417. message: "操作成功!"
  418. });
  419. done();
  420. }, error => {
  421. loading();
  422. window.console.log(error);
  423. });
  424. },
  425. rowUpdate(row, index, done, loading) {
  426. row.extendedDataArr.map(item=>{
  427. delete item.edit
  428. })
  429. row.extendedData = JSON.stringify(row.extendedDataArr)
  430. delete row.extendedDataArr
  431. bportsSubmit(row).then(() => {
  432. this.onLoad(this.page);
  433. this.$message({
  434. type: "success",
  435. message: "操作成功!"
  436. });
  437. done();
  438. }, error => {
  439. loading();
  440. console.log(error);
  441. });
  442. },
  443. rowDel(row) {
  444. this.$confirm("确定将选择数据删除?", {
  445. confirmButtonText: "确定",
  446. cancelButtonText: "取消",
  447. type: "warning"
  448. })
  449. .then(() => {
  450. return bportsRemove(row.id);
  451. })
  452. .then(() => {
  453. this.onLoad(this.page);
  454. this.$message({
  455. type: "success",
  456. message: "操作成功!"
  457. });
  458. });
  459. },
  460. handleDelete() {
  461. if (this.selectionList.length === 0) {
  462. this.$message.warning("请选择至少一条数据");
  463. return;
  464. }
  465. this.$confirm("确定将选择数据删除?", {
  466. confirmButtonText: "确定",
  467. cancelButtonText: "取消",
  468. type: "warning"
  469. })
  470. .then(() => {
  471. return bportsRemove(this.ids);
  472. })
  473. .then(() => {
  474. this.onLoad(this.page);
  475. this.$message({
  476. type: "success",
  477. message: "操作成功!"
  478. });
  479. this.$refs.crud.toggleSelection();
  480. });
  481. },
  482. beforeOpen(done, type) {
  483. if (["edit", "view"].includes(type)) {
  484. bportsDetail(this.form.id).then(res => {
  485. this.form = res.data.data;
  486. });
  487. }
  488. done();
  489. },
  490. searchReset() {
  491. this.query = {};
  492. this.onLoad(this.page);
  493. },
  494. searchChange(params, done) {
  495. this.query = params;
  496. this.page.currentPage = 1;
  497. this.onLoad(this.page, params);
  498. done();
  499. },
  500. selectionChange(list) {
  501. this.selectionList = list;
  502. },
  503. selectionClear() {
  504. this.selectionList = [];
  505. this.$refs.crud.toggleSelection();
  506. },
  507. currentChange(currentPage){
  508. this.page.currentPage = currentPage;
  509. },
  510. sizeChange(pageSize){
  511. this.page.pageSize = pageSize;
  512. },
  513. refreshChange() {
  514. this.onLoad(this.page, this.query);
  515. },
  516. onLoad(page, params = {}) {
  517. this.loading = true;
  518. bportsList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
  519. const data = res.data.data;
  520. this.page.total = data.total;
  521. this.data = data.records;
  522. this.loading = false;
  523. this.selectionClear();
  524. });
  525. },
  526. //自定义列保存
  527. async saveColumnTwo(ref, option, optionBack, code) {
  528. /**
  529. * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
  530. * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
  531. * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
  532. */
  533. const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
  534. if (inSave) {
  535. this.$message.success("保存成功");
  536. //关闭窗口
  537. this.$refs[ref].$refs.dialogColumn.columnBox = false;
  538. }
  539. },
  540. //自定义列重置
  541. async resetColumnTwo(ref, option, optionBack, code) {
  542. this[option] = this[optionBack];
  543. const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
  544. if (inSave) {
  545. this.$message.success("重置成功");
  546. this.$refs[ref].$refs.dialogColumn.columnBox = false;
  547. }
  548. },
  549. // 更改表格颜色
  550. headerClassName(tab){
  551. //颜色间隔
  552. let back = ""
  553. if (tab.columnIndex >= 0 && tab.column.level === 1) {
  554. if (tab.columnIndex % 2 === 0) {
  555. back = "back-one"
  556. } else if (tab.columnIndex % 2 === 1) {
  557. back = "back-two"
  558. }
  559. }
  560. return back;
  561. },
  562. }
  563. };
  564. </script>
  565. <style scoped>
  566. ::v-deep#out-table .back-one {
  567. background: #ecf5ff !important;
  568. }
  569. ::v-deep#out-table .back-two {
  570. background: #ecf5ff !important;
  571. }
  572. </style>