|
|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div @click="portinfoVisible = true&&!disabled">
|
|
|
+ <el-input
|
|
|
+ v-model="value"
|
|
|
+ @input="$emit('balabala', value)"
|
|
|
+ placeholder="请选择"
|
|
|
+ :disabled="disabled"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="港口信息"
|
|
|
+ :visible.sync="portinfoVisible"
|
|
|
+ width="60%"
|
|
|
+ append-to-body
|
|
|
+ @closed="closed"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container>
|
|
|
+ <avue-tree
|
|
|
+ :option="treeOption"
|
|
|
+ :data="treeData"
|
|
|
+ @node-click="nodeClick"
|
|
|
+ />
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <avue-crud
|
|
|
+ ref="crud"
|
|
|
+ :data="data"
|
|
|
+ :option="tableOption"
|
|
|
+ :page.sync="page"
|
|
|
+ :table-loading="loading"
|
|
|
+ v-model="form"
|
|
|
+ :search.sync="search"
|
|
|
+ :before-open="beforeOpen"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @row-del="rowDel"
|
|
|
+ @row-update="rowUpdate"
|
|
|
+ @on-load="getList"
|
|
|
+ @saveColumn="saveColumn"
|
|
|
+ @tree-load="treeLoad"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ >
|
|
|
+ </avue-crud>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="portinfoVisible = false">取 消</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="importPort"
|
|
|
+ :disabled="selectionList.length != 1"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import option from "./configuration/mainList.json";
|
|
|
+import reportDialog from "@/components/report-dialog/main";
|
|
|
+import {
|
|
|
+ getList,
|
|
|
+ add,
|
|
|
+ update,
|
|
|
+ remove,
|
|
|
+ getPortTypeTree,
|
|
|
+ getTypeTree
|
|
|
+} from "@/api/basicData/portinformation";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ switchDialog: false, //报表
|
|
|
+ loading: true,
|
|
|
+ data: [],
|
|
|
+ tableOption: option,
|
|
|
+ form: {},
|
|
|
+ search: {},
|
|
|
+ treeDeptId: "",
|
|
|
+ treeDeptName: "",
|
|
|
+ height: window.innerHeight - 500,
|
|
|
+ page: {
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ treeOption: {
|
|
|
+ nodeKey: "id",
|
|
|
+ lazy: true,
|
|
|
+ treeLoad: function(node, resolve) {
|
|
|
+ const parentId = node.level === 0 ? 0 : node.data.id;
|
|
|
+ getPortTypeTree(parentId).then(res => {
|
|
|
+ resolve(
|
|
|
+ res.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ leaf: !item.hasChildren
|
|
|
+ };
|
|
|
+ })
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addBtn: false,
|
|
|
+ menu: false,
|
|
|
+ size: "small",
|
|
|
+ props: {
|
|
|
+ labelText: "标题",
|
|
|
+ label: "name",
|
|
|
+ value: "id",
|
|
|
+ children: "children"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ portinfoVisible: false,
|
|
|
+ selectionList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: String,
|
|
|
+ disabled: Boolean
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: "value",
|
|
|
+ event: "balabala"
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ components: {
|
|
|
+ reportDialog
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ option.height = window.innerHeight - 500;
|
|
|
+ //查询服务类别字典项
|
|
|
+ getTypeTree().then(res => {
|
|
|
+ this.findObject(this.tableOption.column, "typeId").dicData =
|
|
|
+ res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closed() {
|
|
|
+ this.selectionList = [];
|
|
|
+ },
|
|
|
+ importPort() {
|
|
|
+ this.$emit("balabala", this.selectionList[0].name);
|
|
|
+ this.portinfoVisible = false;
|
|
|
+ },
|
|
|
+ //打印
|
|
|
+ openReport() {
|
|
|
+ this.switchDialog = !this.switchDialog;
|
|
|
+ },
|
|
|
+ //关闭打印
|
|
|
+ onClose(val) {
|
|
|
+ this.switchDialog = val;
|
|
|
+ },
|
|
|
+ getList(page, params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ getList(page.currentPage, page.pageSize, params, this.treeDeptId).then(
|
|
|
+ res => {
|
|
|
+ this.data = res.data.data.records;
|
|
|
+ this.page.total = res.data.data.total;
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //点击新增打开的窗口 取消时触发
|
|
|
+ // beforeClose(){
|
|
|
+
|
|
|
+ // },
|
|
|
+ selectionChange(list) {
|
|
|
+ this.selectionList = list;
|
|
|
+ },
|
|
|
+ //点击新增或修改时
|
|
|
+ beforeOpen(done, type) {
|
|
|
+ if (["add"].includes(type)) {
|
|
|
+ this.tableOption.column.forEach(e => {
|
|
|
+ if (e.prop == "typeId") {
|
|
|
+ this.$set(this.tableOption.column, 3, {
|
|
|
+ ...e,
|
|
|
+ value: this.treeDeptId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.getList(this.page, params);
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ sizeChange(val) {
|
|
|
+ this.page.pageSize = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ currentChange(val) {
|
|
|
+ this.page.currentPage = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ refreshChange() {
|
|
|
+ this.getList(this.page, this.search);
|
|
|
+ },
|
|
|
+ rowSave(row, done, loading) {
|
|
|
+ add(row).then(
|
|
|
+ () => {
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.getList(this.page);
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ window.console.log(error);
|
|
|
+ loading();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ rowUpdate(row, index, done, loading) {
|
|
|
+ row.createTime = "";
|
|
|
+ update(row).then(
|
|
|
+ () => {
|
|
|
+ this.getList(this.page);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ // 数据回调进行刷新
|
|
|
+ done(row);
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ window.console.log(error);
|
|
|
+ loading();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ rowDel(row, index, done) {
|
|
|
+ this.$confirm("确定将选择数据删除?", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ return remove(row.id);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.getList(this.page);
|
|
|
+ done(row);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cellDblclick(row, column, cell, event) {
|
|
|
+ this.$refs.crud.rowEdit(row);
|
|
|
+ },
|
|
|
+ saveColumn(row, column) {
|
|
|
+ console.log(row, column);
|
|
|
+ },
|
|
|
+ //展开主页左边类型
|
|
|
+ nodeClick(data) {
|
|
|
+ this.treeDeptName = data.cname;
|
|
|
+ this.treeDeptId = data.id;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.getList(this.page);
|
|
|
+ },
|
|
|
+ //列表内展开树节点
|
|
|
+ treeLoad(tree, treeNode, resolve) {
|
|
|
+ const parentId = tree.id;
|
|
|
+ getList({ parentId: parentId }).then(res => {
|
|
|
+ resolve(res.data.data.records);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|
QuKatie