tire-platform-ui/src/components/port-info/index.vue

<template>
  <div>
    <div style="display:flex">
      <el-select
        v-model="value"
        placeholder="请选择"
        :disabled="disabled"
        @input="$emit('balabala', value)"
        filterable
        clearable
      >
        <el-option
          v-for="item in portList"
          :key="item.id"
          :label="item.name"
          :value="type=='id'?item.id:item.name"
        >
        </el-option>
      </el-select>
      <el-button
        icon="el-icon-search"
        @click="portinfoVisible = true"
        :disabled="disabled"
        size="mini"
      ></el-button>
    </div>
    <el-dialog
      title="港口信息"
      top="5vh"
      :visible.sync="portinfoVisible"
      width="80%"
      append-to-body
      @closed="closed"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <span>
        <el-row>
          <el-col :span="4">
            <el-scrollbar>
              <basic-container>
                <avue-tree
                  :option="treeOption"
                  :data="treeData"
                  @node-click="nodeClick"
                />
              </basic-container>
            </el-scrollbar>
          </el-col>
          <el-col :span="20">
            <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,
  getAllList
} from "@/api/basicData/portinformation";

export default {
  data() {
    return {
      switchDialog: false, //报表
      loading: true,
      data: [],
      tableOption: option,
      form: {},
      search: {},
      treeDeptId: "",
      treeDeptName: "",
      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: [],
      portList: []
    };
  },
  props: {
    value: String,
    type: String,
    disabled: Boolean
  },
  model: {
    prop: "value",
    event: "balabala"
  },
  created() {
    getAllList().then(res => {
      this.portList = res.data.data;
    });
  },
  components: {
    reportDialog
  },
  mounted() {
    //查询服务类别字典项
    getTypeTree().then(res => {
      this.findObject(this.tableOption.column, "typeId").dicData =
        res.data.data;
    });
  },
  methods: {
    closed() {
      this.$refs.crud.toggleSelection();
    },
    importPort() {
      if(this.type == 'id'){
        this.$emit("balabala", this.selectionList[0].id);
      }else {
        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;
          if (this.page.total) {
            this.tableOption.height = window.innerHeight - 350;
          }
        }
      );
    },
    //点击新增打开的窗口 取消时触发
    // 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(this.page);
    },
    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>