|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container>
|
|
|
+ <avue-tree :option="treeOption" :data="feesTypeData" @node-click="nodeClick">
|
|
|
+ <template slot="addBtn">
|
|
|
+ <el-tooltip class="item" effect="dark" content="新建分类" placement="top">
|
|
|
+ <i class="el-icon-setting" style="font-size:18px;line-height: 30px;width: 20px;padding: 0 10px;"
|
|
|
+ @click="corpTypeVisible = true"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </avue-tree>
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud :option="documentOption" :table-loading="loading" :data="documentData" :page.sync="documentPage" :search.sync="documentSearch"
|
|
|
+ id="out-table" :header-cell-class-name="headerClassName"
|
|
|
+ :before-open="beforeOpen" v-model="form" ref="documentCrud" @search-change="searchChange"
|
|
|
+ @search-reset="searchReset" @refresh-change="refreshChange" @on-load="reportslogListfun"
|
|
|
+ @resetColumn="resetColumnTwo('documentCrud', 'documentOption', 'documentOptionBack', 312.1)"
|
|
|
+ @saveColumn="saveColumnTwo('documentCrud', 'documentOption', 'documentOptionBack', 312.1)" >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button type="primary" size="small" icon="el-icon-plus" @click="addbtnfun()">新增单证
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!--类别弹窗-->
|
|
|
+ <el-dialog title="类别" :visible.sync="corpTypeVisible" append-to-body width="60%" :before-close="corpTypeClose">
|
|
|
+ <div>
|
|
|
+ <bbusinesstype></bbusinesstype>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="corpTypeVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="corpTypeVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!--报表列表弹窗-->
|
|
|
+ <el-dialog title="单证" :visible.sync="reportVisible" append-to-body width="70%" :before-close="corpTypeClose">
|
|
|
+ <div>
|
|
|
+ <reportforms-list ref="reportformsList" @reportRadio="reportRadio"></reportforms-list>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="reportVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="reportConfirm" >确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!--添加编辑弹窗-->
|
|
|
+ <el-dialog title="单证" :visible.sync="documentVisible" append-to-body width="60%" :before-close="corpTypeClose">
|
|
|
+ <Dispatch-Notice :documentForm="documentForm"></Dispatch-Notice>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="documentVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="documentSubmit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {reportslogList, reportslogSubmit} from "@/api/iosBasicData/bills";
|
|
|
+ import {bbusinesstypeList} from "@/api/iosBasicData/bbusinesstype";
|
|
|
+ import bbusinesstype from "@/views/iosBasicData/bbusinesstype/index.vue";
|
|
|
+import reportformsList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsList.vue";
|
|
|
+import DispatchNotice from '@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/DispatchNotice.vue'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {reportformsList, bbusinesstype,DispatchNotice},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ reportVisible:false, // 报表列表数据
|
|
|
+ documentVisible:false, // 单证添加编辑弹窗
|
|
|
+ documentForm:{}, // 添加编辑弹窗的数据
|
|
|
+ corpTypeVisible:false,
|
|
|
+ // 左侧配置项
|
|
|
+ treeOption: {
|
|
|
+ nodeKey: "id",
|
|
|
+ // lazy: true,
|
|
|
+ addBtn: false,
|
|
|
+ menu: false,
|
|
|
+ size: "small",
|
|
|
+ props: {
|
|
|
+ labelText: "标题",
|
|
|
+ label: "cnName",
|
|
|
+ value: "value",
|
|
|
+ children: "children"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ feesTypeData:[], // 左侧获取的数据
|
|
|
+ documentOption:{},
|
|
|
+ documentOptionBack: {
|
|
|
+ dialogDrag: true,
|
|
|
+ height: 'auto',
|
|
|
+ calcHeight: 30,
|
|
|
+ tip: false,
|
|
|
+ searchShow: true,
|
|
|
+ searchMenuSpan: 6,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ selection: true,
|
|
|
+ dialogClickModal: false,
|
|
|
+ menuWidth:260,
|
|
|
+ addBtn:false,
|
|
|
+ viewBtn: true,
|
|
|
+ delBtn:false,
|
|
|
+ editBtn:false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "报表编码",
|
|
|
+ prop: "reportsCode",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "备注",
|
|
|
+ prop: "remarks",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ documentSearch:{},
|
|
|
+ documentPage:{
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
|
|
|
+ },
|
|
|
+ query: {},
|
|
|
+ documentData:[],
|
|
|
+ loading:false,
|
|
|
+ businesstypeData:{}, // 左侧选择的数据
|
|
|
+ reportForms:{}, // 报表列表选择的数据
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ assemblyForm:{
|
|
|
+ type:Object,
|
|
|
+ default:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.documentOption = await this.getColumnData(this.getColumnName(312.1), this.documentOptionBack);
|
|
|
+ this.bbusinesstypeListfun()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 新建单证按钮
|
|
|
+ addbtnfun(){
|
|
|
+ if(!this.businesstypeData.id){
|
|
|
+ this.$message.warning("请先选择报表类型");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 打开报表选择框
|
|
|
+ this.reportVisible = true
|
|
|
+ let page = {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.$refs.reportformsList.onLoad(page,{businessType:this.businesstypeData.code})
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 报表弹窗的单选
|
|
|
+ reportRadio(val){
|
|
|
+ this.reportForms = val
|
|
|
+ },
|
|
|
+ // 报表弹窗的确认
|
|
|
+ reportConfirm(){
|
|
|
+ if (!this.reportForms.id){
|
|
|
+ this.$message.warning("请选择一条报表");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.documentVisible = true
|
|
|
+ },
|
|
|
+ // 单证弹窗的确认按钮
|
|
|
+ documentSubmit(){
|
|
|
+ // 打印时间
|
|
|
+ // printTime
|
|
|
+ let obj = {
|
|
|
+ remarks:this.assemblyForm.remarks,
|
|
|
+ businessType:this.assemblyForm.businessType,
|
|
|
+ billId:this.assemblyForm.billId,
|
|
|
+ billNo:this.assemblyForm.billNo,
|
|
|
+ mblno:this.assemblyForm.mblno,
|
|
|
+ hblno:this.assemblyForm.hblno,
|
|
|
+ reportsCode:this.reportForms.code,
|
|
|
+ groupCode:this.reportForms.groupCode,
|
|
|
+ printContent:JSON.stringify(this.documentForm),
|
|
|
+ }
|
|
|
+ console.log(obj,204)
|
|
|
+ return
|
|
|
+ reportslogSubmit().then(res=>{
|
|
|
+ console.log(res,151)
|
|
|
+ })
|
|
|
+ this.documentVisible = false
|
|
|
+ },
|
|
|
+ // 左侧筛选
|
|
|
+ nodeClick(data) {
|
|
|
+ this.businesstypeData = data
|
|
|
+ },
|
|
|
+ // 左侧数据获取
|
|
|
+ bbusinesstypeListfun(){
|
|
|
+ bbusinesstypeList(1,20).then(res=>{
|
|
|
+ this.feesTypeData = res.data.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 类别弹窗关闭
|
|
|
+ corpTypeClose(done) {
|
|
|
+ this.$confirm('确认关闭?')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => { });
|
|
|
+ },
|
|
|
+ // 点击搜索触发
|
|
|
+ searchChange(params, done){
|
|
|
+ this.query = params;
|
|
|
+ this.documentPage.currentPage = 1;
|
|
|
+ this.reportslogListfun(this.documentPage, params);
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ // 清空搜索回调方法
|
|
|
+ searchReset(){
|
|
|
+ this.query = {};
|
|
|
+ this.reportslogListfun(this.documentPage);
|
|
|
+ },
|
|
|
+ // 点击刷新按钮
|
|
|
+ refreshChange(){
|
|
|
+ this.reportslogListfun(this.documentPage, this.query);
|
|
|
+ },
|
|
|
+ // 打开前的回调
|
|
|
+ beforeOpen(done, type) {
|
|
|
+ // 编辑和查看
|
|
|
+ if (["edit", "view"].includes(type)) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 单证中心数据获取
|
|
|
+ reportslogListfun(documentPage, params = {}){
|
|
|
+ this.loading = true;
|
|
|
+ reportslogList(documentPage.currentPage, documentPage.pageSize, Object.assign(params, this.query)).then(res=>{
|
|
|
+ const data = res.data.data;
|
|
|
+ this.documentPage.total = data.total;
|
|
|
+ this.documentData = data.records;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //自定义列保存
|
|
|
+ async saveColumnTwo(ref, option, optionBack, code) {
|
|
|
+ /**
|
|
|
+ * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
|
|
|
+ * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
|
|
|
+ * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
|
|
|
+ */
|
|
|
+ const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ //关闭窗口
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //自定义列重置
|
|
|
+ async resetColumnTwo(ref, option, optionBack, code) {
|
|
|
+ this[option] = this[optionBack];
|
|
|
+ const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 更改表格颜色
|
|
|
+ headerClassName(tab) {
|
|
|
+ //颜色间隔
|
|
|
+ let back = ""
|
|
|
+ if (tab.columnIndex >= 0 && tab.column.level === 1) {
|
|
|
+ if (tab.columnIndex % 2 === 0) {
|
|
|
+ back = "back-one"
|
|
|
+ } else if (tab.columnIndex % 2 === 1) {
|
|
|
+ back = "back-two"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return back;
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+::v-deep#out-table .back-one {
|
|
|
+ background: #ecf5ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep#out-table .back-two {
|
|
|
+ background: #ecf5ff !important;
|
|
|
+}
|
|
|
+</style>
|