|
@@ -1,118 +1,235 @@
|
|
|
<template>
|
|
|
- <basic-container>
|
|
|
- <avue-crud :option="option"
|
|
|
- :data="dataList"
|
|
|
- ref="crud"
|
|
|
- v-model="form"
|
|
|
- :page.sync="page"
|
|
|
- @row-del="rowDel"
|
|
|
- @search-change="searchChange"
|
|
|
- @search-reset="searchReset"
|
|
|
- @selection-change="selectionChange"
|
|
|
- @current-change="currentChange"
|
|
|
- @size-change="sizeChange"
|
|
|
- @refresh-change="refreshChange"
|
|
|
- @on-load="onLoad">
|
|
|
- <template slot="menuLeft">
|
|
|
- <el-button
|
|
|
- icon="el-icon-printer"
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- @click.stop=""
|
|
|
- >报 表
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </avue-crud>
|
|
|
- </basic-container>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="box">
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container>
|
|
|
+ <avue-tree
|
|
|
+ :option="treeOption"
|
|
|
+ :data="treeData"
|
|
|
+ @node-click="nodeClick"
|
|
|
+ />
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <basic-container>
|
|
|
+ <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"
|
|
|
+ @cell-dblclick="cellDblclick"
|
|
|
+ @on-load="getList"
|
|
|
+ @saveColumn="saveColumn"
|
|
|
+ @tree-load="treeLoad"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-printer"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click.stop="openReport()"
|
|
|
+ >报 表
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <report-dialog
|
|
|
+ :switchDialog="switchDialog"
|
|
|
+ @onClose="onClose()"
|
|
|
+ ></report-dialog>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import option from "./configuration/mainList.json";
|
|
|
+ import reportDialog from "@/components/report-dialog/main";
|
|
|
+ import {getList , add ,update ,remove ,getPortTypeTree} from "@/api/basicData/portinformation"
|
|
|
|
|
|
export default {
|
|
|
- name: "customerInformation",
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {},
|
|
|
- option: option,
|
|
|
- parentId:0,
|
|
|
- dataList: [],
|
|
|
+ switchDialog:false,//报表
|
|
|
+ loading: true,
|
|
|
+ data: [],
|
|
|
+ tableOption: option,
|
|
|
+ form:{},
|
|
|
+ search:{},
|
|
|
+ treeDeptId:"",
|
|
|
+ treeDeptName:'',
|
|
|
+ height: window.innerHeight - 350,
|
|
|
page: {
|
|
|
- pageSize: 10,
|
|
|
- pagerCount: 5,
|
|
|
+ currentPage: 1,
|
|
|
total: 0,
|
|
|
+ pageSize: 10
|
|
|
},
|
|
|
- query:{}
|
|
|
- }
|
|
|
+ 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"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
+ components: {
|
|
|
+ reportDialog
|
|
|
+ },
|
|
|
mounted() {
|
|
|
option.height = window.innerHeight - 350 ;
|
|
|
+ //查询服务类别字典项
|
|
|
+ // getDeptTree().then(res => {
|
|
|
+ // this.findObject(this.tableOption.column, "goodsTypeId").dicData = res.data.data;
|
|
|
+ // });
|
|
|
},
|
|
|
methods: {
|
|
|
- //删除列表后面的删除按钮触发触发(row, index, done)
|
|
|
- rowDel(row, index, done) {
|
|
|
+ //打印
|
|
|
+ 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(){
|
|
|
+
|
|
|
+ // },
|
|
|
+ //点击新增或修改时
|
|
|
+ beforeOpen(done, type){
|
|
|
+ if (["add"].includes(type)) {
|
|
|
+ this.tableOption.column.forEach(e=>{
|
|
|
+ if(e.prop=='typeName'){
|
|
|
+ this.$set(this.tableOption.column,4,{...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);
|
|
|
});
|
|
|
},
|
|
|
- //点击搜索按钮触发
|
|
|
- searchChange(params, done) {
|
|
|
- this.query = params;
|
|
|
- this.page.currentPage = 1;
|
|
|
- params.parentId = 0
|
|
|
- this.onLoad(this.page, params);
|
|
|
- done()
|
|
|
- },
|
|
|
- searchReset() {
|
|
|
- console.log('1')
|
|
|
- },
|
|
|
- selectionChange() {
|
|
|
- console.log('1')
|
|
|
- },
|
|
|
- currentChange() {
|
|
|
- console.log('1')
|
|
|
+ cellDblclick(row, column, cell, event) {
|
|
|
+ this.$refs.crud.rowEdit(row);
|
|
|
},
|
|
|
- sizeChange() {
|
|
|
- console.log('1')
|
|
|
+ saveColumn(row, column) {
|
|
|
+ console.log(row, column);
|
|
|
},
|
|
|
- refreshChange() {
|
|
|
- console.log('1')
|
|
|
+ //展开主页左边类型
|
|
|
+ nodeClick(data) {
|
|
|
+ this.treeDeptName = data.cname;
|
|
|
+ this.treeDeptId = data.id;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.getList(this.page);
|
|
|
},
|
|
|
- onLoad(page, params = {}) {
|
|
|
- this.dataList = [{
|
|
|
- havenName:"海港",
|
|
|
- fNo:"DD",
|
|
|
- fName:"丹东",
|
|
|
- fEname:"dandong",
|
|
|
- portName:"威海-丹东",
|
|
|
- fUncode:"CEWEI",
|
|
|
- fCountry:"中国",
|
|
|
- fProvince:"山东",
|
|
|
- fCity:"威海",
|
|
|
- fStatus:"正常使用",
|
|
|
- remark:"123",
|
|
|
- createBy:"admin",
|
|
|
- createTime:"2021-04-16",
|
|
|
- updateBy:"admin",
|
|
|
- updateTime:"2021-04-16",
|
|
|
- }];
|
|
|
+ //列表内展开树节点
|
|
|
+ treeLoad(tree, treeNode, resolve) {
|
|
|
+ const parentId = tree.id;
|
|
|
+ getList({parentId:parentId}).then(res => {
|
|
|
+ resolve(res.data.data.records);
|
|
|
+ });
|
|
|
},
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
+<style scoped lang="scss">
|
|
|
</style>
|