货代amends 2023-12-14

src/api/iosBasicData/amends.js

@@ -0,0 +1,42 @@
+import request from '@/router/axios';
+// 列表
+export const amendsList = (current, size, params) => {
+  return request({
+    url: '/api/blade-los/amends/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+// 详情
+export const amendsDetail = (id) => {
+  return request({
+    url: '/api/blade-los/amends/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+// 删除
+export const amendsRemove = (ids) => {
+  return request({
+    url: '/api/blade-los/amends/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+// 保存
+export const amendsSubmit = (row) => {
+  return request({
+    url: '/api/blade-los/amends/submit',
+    method: 'post',
+    data: row
+  })
+}
+

src/enums/column-name.js

@@ -1456,6 +1456,10 @@ const columnName = [{
     code: 321.1,
     name: '货运代理-账单管理-财务凭证明细'
   },
+  {
+    code: 322,
+    name: '货运代理-amends'
+  },
 ]
 export const getColumnName = (key) => {
   for (let index = 0; index < columnName.length; index++) {

src/views/iosBasicData/amends/amendsDetails.vue

@@ -0,0 +1,293 @@
+<template>
+    <div class="borderless" v-loading="pageLoading">
+        <div class="customer-head">
+            <div class="customer-back">
+                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+                           @click="backToList">返回列表
+                </el-button>
+            </div>
+            <div class="add-customer-btn">
+                <el-button  size="small" type="primary" style="margin-right: 8px"
+                            :loading="saveLoading" >保 存
+                </el-button>
+            </div>
+        </div>
+        <div style="margin: 55px 5px 0px 5px;'">
+            <el-card class="box-card">
+                <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm">
+                    <el-row>
+                        <el-col :span="6">
+                            <el-form-item label="业务编号:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          :disabled="true"
+                                          clearable placeholder="请输入业务编号" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="制单日期:" prop="voucherDate">
+                                <el-date-picker v-model="form.voucherDate" clearable
+                                                style="width: 100%;"
+                                                type="date" size="small"
+                                                value-format="yyyy-MM-dd HH:mm"
+                                                placeholder="选择制单日期">
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="操作:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入操作" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="业务类型:" prop="businessType">
+                                <search-query :datalist="businessTypeData"
+                                              :selectValue="form.businessType"
+                                              :filterable="true"
+                                              :clearable="true"
+                                              :remote="true"
+                                              :buttonIf="false"
+                                              placeholder="请选择业务类型">
+                                </search-query>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="原业务编号:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入原业务编号" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-col :span="16">
+                                <el-form-item label="委托人:" prop="billNo">
+                                    <el-input style="width: 100%;" v-model="form.billNo"
+                                              size="small" autocomplete="off"
+                                              clearable placeholder="请输入委托人" >
+                                    </el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="" prop="billNo" label-width="5px">
+                                    <el-input style="width: 100%;" v-model="form.billNo"
+                                              size="small" autocomplete="off"
+                                              clearable placeholder="请输入委托人" >
+                                    </el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="发货人:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入发货人" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="原H B/L NO:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入原H B/L NO" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="原M B/L NO:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入原M B/L NO" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="原外提单号:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入原外提单号" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="BOOKINGNO:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入BOOKINGNO" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="船名:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入船名" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="航次:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入航次" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="ETD:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入ETD" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="箱量:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入箱量" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-form-item label="ETA:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入ETA" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="件数:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入件数" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="毛重:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入毛重" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="尺码:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入尺码" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="更改前内容:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入更改前内容" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-form-item label="" prop="billNo" label-width="50px">
+                                <el-button  size="small" type="primary" style="margin-right: 8px"
+                                            :loading="saveLoading" >提取原业务信息
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="AMEND:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入AMEND" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="19">
+                            <el-form-item label="备注:" prop="billNo">
+                                <el-input style="width: 100%;" v-model="form.billNo"
+                                          size="small" autocomplete="off"
+                                          clearable placeholder="请输入备注" >
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-card>
+
+            <el-card style="margin-top: 10px">
+                <div style="margin-bottom: 10px">
+                    <el-button  size="small" type="success" style="margin-right: 8px"
+                                :loading="saveLoading" @click="addTablefun" >新增费用
+                    </el-button>
+                    <el-button type="danger" plain size="small">批量删除</el-button>
+                    <el-button type="success" plain size="small">应收账单
+                    </el-button>
+                    <el-button type="danger" plain size="small">撤销账单
+                    </el-button>
+                    <el-button type="primary" plain size="small">打印账单</el-button>
+                    <el-button type="success" plain size="small">应收模板</el-button>
+                    <el-button type="info" plain size="small">保存账单</el-button>
+                </div>
+                <amends-costdetails :tableData="tableData"></amends-costdetails>
+            </el-card>
+
+            <el-card style="margin-top: 10px">
+                <div style="font-size: 12px;margin-bottom: 5px">已生成账单费用：</div>
+                <billgenerated></billgenerated>
+                <billgenerated></billgenerated>
+            </el-card>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
+    import amendsCostdetails from "@/views/iosBasicData/amends/assembly/amendsCostdetails.vue";
+    import billgenerated from "@/views/iosBasicData/amends/assembly/billgenerated.vue";
+
+    export default {
+        components: {SearchQuery,amendsCostdetails,billgenerated},
+        data(){
+            return {
+                tableData:[],
+                pageLoading:false,
+                saveLoading:false,
+                form:{},
+                businessTypeData:[
+                    {
+                        label:'海运出口AMEND',
+                        value:'SEA'
+                    },
+                    {
+                        label:'海运进口AMEND',
+                        value:'SIA'
+                    }
+                ],
+            }
+        },
+        methods:{
+            addTablefun(){
+                this.tableData.push({
+                    edit:true
+                })
+            },
+            //返回列表
+            backToList() {
+                this.$emit('goBack')
+            },
+        }
+    }
+</script>
+
+<style scoped>
+::v-deep.el-form-item {
+    margin-bottom: 0;
+}
+</style>

src/views/iosBasicData/amends/assembly/amendsCostdetails.vue

@@ -0,0 +1,285 @@
+<template>
+    <div>
+        <el-table
+            ref="tableRef"
+            :cell-style="{padding:'0px',fontSize:'12px'}"
+            :header-cell-style="tableHeaderCellStyle"
+            :data="tableData"
+            border
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+            @row-click="rowClick"
+            :row-style="rowStyle"
+            :row-class-name="rowClassName" >
+            <el-table-column label="结算单位">
+                <el-table-column
+                    prop="corpCode"
+                    label="编号">
+                </el-table-column>
+                <el-table-column
+                    prop="corpCnName"
+                    label="简称" width="150px">
+                    <template slot-scope="{ row }">
+                        <search-query v-if="row.edit"
+                                      :datalist="corpData"
+                                      :selectValue="row.corpId"
+                                      :filterable="true"
+                                      :clearable="true"
+                                      :remote="true"
+                                      :buttonIf="false"
+                                      :forParameter="{key:'id',label:'shortName',value:'id'}"
+                                      @remoteMethod="getBcorpsListfun($event,'corpCnName')"
+                                      @corpChange="corpChange($event,'corpCnName',row)"
+                                      @corpFocus="getBcorpsListfun($event,'corpCnName')" >
+                        </search-query>
+                        <span v-else >{{row.corpCnName}}</span>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column
+                prop="dc"
+                label="收/付">
+            </el-table-column>
+            <el-table-column label="费用">
+                <el-table-column
+                    prop="accountCode"
+                    label="编号">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="简称">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="预/到付">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="计价单位">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="单价">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="数量">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="币种">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="增值税率">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="附加费率">
+            </el-table-column>
+            <el-table-column label="价税合计金额">
+                <el-table-column
+                    prop="accountCode"
+                    label="本币">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="外币">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="净价金额合计">
+                <el-table-column
+                    prop="accountCode"
+                    label="RMB">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="外币">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="汇率">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="预付地点">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="应结算日期">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="备注">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+    import {getBcorpsList} from "@/api/iosBasicData/bcorps";
+    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
+
+    export default {
+        components: {SearchQuery},
+        props:{
+            tableData:{
+                type:Array,
+                default:[]
+            },
+            handleSelectionData:{
+                type:Array,
+                default:[]
+            }
+        },
+        data(){
+            return {
+                corpData:[], // 结算单位数据
+            }
+        },
+        methods:{
+            // 下拉的回调
+            corpChange(value,name,row){
+                if (name == 'corpCnName') {
+                    for (let item of this.corpData) {
+                        if (item.shortName == value){
+                            // corpCode
+                            // corpEnName
+                            this.$set(row,'corpCnName',item.shortName)
+                        }
+                    }
+                }else {
+
+                }
+            },
+            // 获取客户数据
+            getBcorpsListfun(cnName){
+                getBcorpsList(1,10,{cnName}).then(res=>{
+                    this.corpData = res.data.data.records
+                })
+            },
+
+            // 表头样式
+            tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
+                return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
+            },
+            // 列表多选
+            // 多选选择的数据
+            handleSelectionChange(arr){
+                this.$emit('handleSelectionChange',arr)
+            },
+            // 监听点击表格事件
+            rowClick(row, column, event) {
+                let refsElTable = this.$refs.tableRef; // 获取表格对象
+                if (this.CtrlDown) {
+                    refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
+                    return;
+                }
+                if ( this.shiftOrAltDown && this.handleSelectionData.length > 0) {
+                    // 通过rowIndex判断已选择的行中最上面和最下面的是哪行，再对比按住shift/alt点击的当前行得到新的最上面和最下面的行，把这两行中间的行进行循环选中。
+                    let topAndBottom = this.getTopAndBottom(  row, this.bottomSelectionRow, this.topSelectionRow );
+                    refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
+                    for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) { //选中两行之间的所有行
+                        refsElTable.toggleRowSelection(this.tableData[index], true);
+                    }
+                } else {
+                    let findRow = this.handleSelectionData.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
+                    //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
+                    if (findRow&& this.handleSelectionData.length === 1 ) {
+                        refsElTable.toggleRowSelection(row, false);
+                        return;
+                    }
+                    // refsElTable.clearSelection(); // 清空之前选择的数据(如果放开，选择之前会变成单选)
+                    refsElTable.toggleRowSelection(row); // 调用选中行方法
+                }
+            },
+            // 行的 style 的回调方法
+            rowStyle({row,rowIndex}) {
+                // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
+                // object: 要添加或者修改属性的目标对象；prop: 要定义或修改属性的名称；descript: 是一个对象，里面是我们上述的对象属性的特性；
+                Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
+                    value: rowIndex, // 设置age的值，不设置的话默认为undefined
+                    writable: true, // 表示属性的值true可以修改,false不可以被修改
+                    enumerable: false, // 设置为false表示不能通过 for-in 循环返回
+                    // configurable: false, // configurable 设置为 false，意味着这个属性不能从对象上删除
+                })
+            },
+            keyDown(event) {
+                let key = event.keyCode;
+                if (key == 17) this.CtrlDown = true;
+                if (key == 16 || key == 18) this.shiftOrAltDown = true;
+            },
+            keyUp(event) {
+                let key = event.keyCode;
+                if (key == 17) this.CtrlDown = false;
+                if (key == 16 || key == 18) this.shiftOrAltDown = false;
+            },
+            // 文章说明 https://www.jianshu.com/p/48f2c522d2a2
+            getTopAndBottom(row, bottom, top){
+                let n = row.rowIndex,
+                    mx = bottom.rowIndex,
+                    mi = top.rowIndex;
+                if (n > mx) {
+                    return {
+                        top: mi,
+                        bottom: n
+                    };
+                } else if (n < mx && n > mi) {
+                    return {
+                        top: mi,
+                        bottom: n
+                    };
+                } else if (n < mi) {
+                    return {
+                        top: n,
+                        bottom: mx
+                    };
+                } else if (n == mi || n == mx) {
+                    return {
+                        top: mi,
+                        bottom: mx
+                    };
+                }
+            },
+            // 给选中行加上current-row这个class类，所以要使用row-class-name这个属性（其实给每一行添加rowIndex也可以用这个属性），
+            // 判断方式也是通过判断rowIndex对比
+            rowClassName({ row,  rowIndex }) {
+                let rowName = "",
+                    findRow = this.handleSelectionData.find(c => c.rowIndex === row.rowIndex);
+                if (findRow) {
+                    rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
+                }
+                return rowName; //也可以再加上其他类名 如果有需求的话
+            },
+        },
+        mounted() {
+            // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
+            addEventListener("keydown", this.keyDown, false);
+            addEventListener("keyup", this.keyUp, false);
+        },
+        beforeDestroy() { //解绑
+            removeEventListener("keydown", this.keyDown);
+            removeEventListener("keyup", this.keyUp);
+        },
+        computed: { //实时得到最上行和最下行
+            bottomSelectionRow() {
+                if (this.handleSelectionData.length == 0) return null;
+                return this.handleSelectionData.reduce((start, end) => {
+                    return start.rowIndex > end.rowIndex ? start : end;
+                });
+            },
+            topSelectionRow() {
+                if (this.handleSelectionData.length == 0) return null;
+                return this.handleSelectionData.reduce((start, end) => {
+                    return start.rowIndex < end.rowIndex ? start : end;
+                });
+            }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/iosBasicData/amends/assembly/billgenerated.vue

@@ -0,0 +1,231 @@
+<template>
+    <div>
+        <el-table
+            ref="tableRef"
+            :cell-style="{padding:'0px',fontSize:'12px'}"
+            :header-cell-style="tableHeaderCellStyle"
+            :data="tableData"
+            border
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+            @row-click="rowClick"
+            :row-style="rowStyle"
+            :row-class-name="rowClassName" >
+            <el-table-column label="结算单位">
+                <el-table-column
+                    prop="accountCode"
+                    label="编号">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="简称">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column
+                prop="dc"
+                label="收/付">
+            </el-table-column>
+            <el-table-column label="费用">
+                <el-table-column
+                    prop="accountCode"
+                    label="编号">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="简称">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="预/到付">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="计价单位">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="单价">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="数量">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="币种">
+            </el-table-column>
+            <el-table-column label="价税合计金额">
+                <el-table-column
+                    prop="accountCode"
+                    label="本币">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="外币">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="净价金额合计">
+                <el-table-column
+                    prop="accountCode"
+                    label="RMB">
+                </el-table-column>
+                <el-table-column
+                    prop="accountCode"
+                    label="外币">
+                </el-table-column>
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="汇率">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="备注">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="MBLNO">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="业务类型">
+            </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="BILLNO">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        data(){
+            return {
+                tableData:[]
+            }
+        },
+        methods:{
+            // 表头样式
+            tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
+                return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
+            },
+            // 列表多选
+            // 多选选择的数据
+            handleSelectionChange(arr){
+                this.$emit('handleSelectionChange',arr)
+            },
+            // 监听点击表格事件
+            rowClick(row, column, event) {
+                let refsElTable = this.$refs.tableRef; // 获取表格对象
+                if (this.CtrlDown) {
+                    refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
+                    return;
+                }
+                if ( this.shiftOrAltDown && this.handleSelectionData.length > 0) {
+                    // 通过rowIndex判断已选择的行中最上面和最下面的是哪行，再对比按住shift/alt点击的当前行得到新的最上面和最下面的行，把这两行中间的行进行循环选中。
+                    let topAndBottom = this.getTopAndBottom(  row, this.bottomSelectionRow, this.topSelectionRow );
+                    refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
+                    for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) { //选中两行之间的所有行
+                        refsElTable.toggleRowSelection(this.tableData[index], true);
+                    }
+                } else {
+                    let findRow = this.handleSelectionData.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
+                    //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
+                    if (findRow&& this.handleSelectionData.length === 1 ) {
+                        refsElTable.toggleRowSelection(row, false);
+                        return;
+                    }
+                    // refsElTable.clearSelection(); // 清空之前选择的数据(如果放开，选择之前会变成单选)
+                    refsElTable.toggleRowSelection(row); // 调用选中行方法
+                }
+            },
+            // 行的 style 的回调方法
+            rowStyle({row,rowIndex}) {
+                // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
+                // object: 要添加或者修改属性的目标对象；prop: 要定义或修改属性的名称；descript: 是一个对象，里面是我们上述的对象属性的特性；
+                Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
+                    value: rowIndex, // 设置age的值，不设置的话默认为undefined
+                    writable: true, // 表示属性的值true可以修改,false不可以被修改
+                    enumerable: false, // 设置为false表示不能通过 for-in 循环返回
+                    // configurable: false, // configurable 设置为 false，意味着这个属性不能从对象上删除
+                })
+            },
+            keyDown(event) {
+                let key = event.keyCode;
+                if (key == 17) this.CtrlDown = true;
+                if (key == 16 || key == 18) this.shiftOrAltDown = true;
+            },
+            keyUp(event) {
+                let key = event.keyCode;
+                if (key == 17) this.CtrlDown = false;
+                if (key == 16 || key == 18) this.shiftOrAltDown = false;
+            },
+            // 文章说明 https://www.jianshu.com/p/48f2c522d2a2
+            getTopAndBottom(row, bottom, top){
+                let n = row.rowIndex,
+                    mx = bottom.rowIndex,
+                    mi = top.rowIndex;
+                if (n > mx) {
+                    return {
+                        top: mi,
+                        bottom: n
+                    };
+                } else if (n < mx && n > mi) {
+                    return {
+                        top: mi,
+                        bottom: n
+                    };
+                } else if (n < mi) {
+                    return {
+                        top: n,
+                        bottom: mx
+                    };
+                } else if (n == mi || n == mx) {
+                    return {
+                        top: mi,
+                        bottom: mx
+                    };
+                }
+            },
+            // 给选中行加上current-row这个class类，所以要使用row-class-name这个属性（其实给每一行添加rowIndex也可以用这个属性），
+            // 判断方式也是通过判断rowIndex对比
+            rowClassName({ row,  rowIndex }) {
+                let rowName = "",
+                    findRow = this.handleSelectionData.find(c => c.rowIndex === row.rowIndex);
+                if (findRow) {
+                    rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
+                }
+                return rowName; //也可以再加上其他类名 如果有需求的话
+            },
+        },
+        mounted() {
+            // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
+            addEventListener("keydown", this.keyDown, false);
+            addEventListener("keyup", this.keyUp, false);
+        },
+        beforeDestroy() { //解绑
+            removeEventListener("keydown", this.keyDown);
+            removeEventListener("keyup", this.keyUp);
+        },
+        computed: { //实时得到最上行和最下行
+            bottomSelectionRow() {
+                if (this.handleSelectionData.length == 0) return null;
+                return this.handleSelectionData.reduce((start, end) => {
+                    return start.rowIndex > end.rowIndex ? start : end;
+                });
+            },
+            topSelectionRow() {
+                if (this.handleSelectionData.length == 0) return null;
+                return this.handleSelectionData.reduce((start, end) => {
+                    return start.rowIndex < end.rowIndex ? start : end;
+                });
+            }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/iosBasicData/amends/index.vue

@@ -0,0 +1,810 @@
+<template>
+  <div>
+      <basic-container v-if="isShow">
+          <avue-crud :option="option"
+                     :table-loading="loading"
+                     :data="data"
+                     :page.sync="page"
+                     :permission="permissionList"
+                     :before-open="beforeOpen"
+                     v-model="form"
+                     id="out-table"
+                     :header-cell-class-name="headerClassName"
+                     ref="crud"
+                     @row-update="rowUpdate"
+                     @row-save="rowSave"
+                     @row-del="rowDel"
+                     @search-change="searchChange"
+                     @search-reset="searchReset"
+                     @selection-change="selectionChange"
+                     @current-change="currentChange"
+                     @size-change="sizeChange"
+                     @refresh-change="refreshChange"
+                     @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 322)"
+                     @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 322)"
+                     @on-load="onLoad">
+              <template slot="menuLeft">
+                  <el-button type="primary"
+                             size="small"
+                             icon="el-icon-plus"
+                             @click="addbtnfun()">新建
+                  </el-button>
+                  <el-button type="danger"
+                             size="small"
+                             icon="el-icon-delete"
+                             plain
+                             @click="handleDelete">删 除
+                  </el-button>
+              </template>
+          </avue-crud>
+      </basic-container>
+      <amends-details v-if="!isShow" @goBack="goBack"></amends-details>
+  </div>
+</template>
+
+<script>
+  import {amendsList, amendsDetail, amendsSubmit, amendsRemove} from "@/api/iosBasicData/amends";
+  import amendsDetails from "@/views/iosBasicData/amends/amendsDetails.vue";
+  import {mapGetters} from "vuex";
+
+  export default {
+    components:{amendsDetails},
+    data() {
+      return {
+        isShow:true,
+        form: {},
+        query: {},
+        loading: true,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        selectionList: [],
+        option:{},
+        optionBack: {
+          height:'auto',
+          calcHeight: 30,
+          tip: false,
+          searchShow: true,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          viewBtn: true,
+          selection: true,
+          dialogClickModal: false,
+          column: [
+            {
+              label: "业务类型, SEA=海运出口AMEND SIA=海运进口AMEND",
+              prop: "businessType",
+              rules: [{
+                required: true,
+                message: "请输入业务类型, SEA=海运出口AMEND SIA=海运进口AMEND",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "单据编号",
+              prop: "billNo",
+              rules: [{
+                required: true,
+                message: "请输入单据编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "单据日期",
+              prop: "billDate",
+              rules: [{
+                required: true,
+                message: "请输入单据日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "财务日期",
+              prop: "accountDate",
+              rules: [{
+                required: true,
+                message: "请输入财务日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "操作 Id",
+              prop: "operatorId",
+              rules: [{
+                required: true,
+                message: "请输入操作 Id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "操作",
+              prop: "operatorName",
+              rules: [{
+                required: true,
+                message: "请输入操作",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "责任方",
+              prop: "responsibleParty",
+              rules: [{
+                required: true,
+                message: "请输入责任方",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "原业务 id",
+              prop: "origId",
+              rules: [{
+                required: true,
+                message: "请输入原业务 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "单据编号",
+              prop: "origBillNo",
+              rules: [{
+                required: true,
+                message: "请输入单据编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "单据日期",
+              prop: "origBillDate",
+              rules: [{
+                required: true,
+                message: "请输入单据日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "财务日期",
+              prop: "origAccountDate",
+              rules: [{
+                required: true,
+                message: "请输入财务日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "进出口, E=出口 I=进口",
+              prop: "origSeaType",
+              rules: [{
+                required: true,
+                message: "请输入进出口, E=出口 I=进口",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "单据类型, DD=直单(默认) MM=主单 MH=主分单 HH=从分单",
+              prop: "origBillType",
+              rules: [{
+                required: true,
+                message: "请输入单据类型, DD=直单(默认) MM=主单 MH=主分单 HH=从分单",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "原业务备注",
+              prop: "origRemarks",
+              rules: [{
+                required: true,
+                message: "请输入原业务备注",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "客户 id",
+              prop: "corpId",
+              rules: [{
+                required: true,
+                message: "请输入客户 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "客户中文名称",
+              prop: "corpCnName",
+              rules: [{
+                required: true,
+                message: "请输入客户中文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "客户英文名称",
+              prop: "corpEnName",
+              rules: [{
+                required: true,
+                message: "请输入客户英文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "客户约号",
+              prop: "corpArgreementNo",
+              rules: [{
+                required: true,
+                message: "请输入客户约号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "航线 id",
+              prop: "lineId",
+              rules: [{
+                required: true,
+                message: "请输入航线 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "航线中文名称",
+              prop: "lineCnName",
+              rules: [{
+                required: true,
+                message: "请输入航线中文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "航线英文名称",
+              prop: "lineEnName",
+              rules: [{
+                required: true,
+                message: "请输入航线英文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "船公司 id",
+              prop: "carrierId",
+              rules: [{
+                required: true,
+                message: "请输入船公司 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "船公司中文名称",
+              prop: "carrierCnName",
+              rules: [{
+                required: true,
+                message: "请输入船公司中文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "船公司英文名称",
+              prop: "carrierEnName",
+              rules: [{
+                required: true,
+                message: "请输入船公司英文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "船公司约号",
+              prop: "carrierArgreementNo",
+              rules: [{
+                required: true,
+                message: "请输入船公司约号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "订舱号",
+              prop: "bookingNo",
+              rules: [{
+                required: true,
+                message: "请输入订舱号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "订舱日期",
+              prop: "bookingDate",
+              rules: [{
+                required: true,
+                message: "请输入订舱日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "船名 id",
+              prop: "vesselId",
+              rules: [{
+                required: true,
+                message: "请输入船名 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "中文船名",
+              prop: "vesselCnName",
+              rules: [{
+                required: true,
+                message: "请输入中文船名",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "英文船名",
+              prop: "vesselEnName",
+              rules: [{
+                required: true,
+                message: "请输入英文船名",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "航次",
+              prop: "voyageNo",
+              rules: [{
+                required: true,
+                message: "请输入航次",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "MB/L NO",
+              prop: "mblno",
+              rules: [{
+                required: true,
+                message: "请输入MB/L NO",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "HB/L NO",
+              prop: "hblno",
+              rules: [{
+                required: true,
+                message: "请输入HB/L NO",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "Reference NO",
+              prop: "refno",
+              rules: [{
+                required: true,
+                message: "请输入Reference NO",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "开船日期",
+              prop: "etd",
+              rules: [{
+                required: true,
+                message: "请输入开船日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "到港日期",
+              prop: "eta",
+              rules: [{
+                required: true,
+                message: "请输入到港日期",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "装货港 id",
+              prop: "polId",
+              rules: [{
+                required: true,
+                message: "请输入装货港 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "装货港代码",
+              prop: "polCode",
+              rules: [{
+                required: true,
+                message: "请输入装货港代码",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "装货港英文名称",
+              prop: "polCnName",
+              rules: [{
+                required: true,
+                message: "请输入装货港英文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "装货港英文名称",
+              prop: "polEnName",
+              rules: [{
+                required: true,
+                message: "请输入装货港英文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "装货港英文名称打印 默认等于pol_en_name 可以编辑",
+              prop: "polNamePrint",
+              rules: [{
+                required: true,
+                message: "请输入装货港英文名称打印 默认等于pol_en_name 可以编辑",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "卸货港 id",
+              prop: "podId",
+              rules: [{
+                required: true,
+                message: "请输入卸货港 id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "卸货港代码",
+              prop: "podCode",
+              rules: [{
+                required: true,
+                message: "请输入卸货港代码",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "卸货港中文名称",
+              prop: "podCnName",
+              rules: [{
+                required: true,
+                message: "请输入卸货港中文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "卸货港英文名称",
+              prop: "podEnName",
+              rules: [{
+                required: true,
+                message: "请输入卸货港英文名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "卸货港英文名称打印 默认等于pol_en_name 可以编辑",
+              prop: "podNamePrint",
+              rules: [{
+                required: true,
+                message: "请输入卸货港英文名称打印 默认等于pol_en_name 可以编辑",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "货物类别 dry=普货 danger=危险品 reefer=冻柜",
+              prop: "cargoType",
+              rules: [{
+                required: true,
+                message: "请输入货物类别 dry=普货 danger=危险品 reefer=冻柜",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "包装单位 Id",
+              prop: "packingUnitId",
+              rules: [{
+                required: true,
+                message: "请输入包装单位 Id",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "包装单位",
+              prop: "packingUnit",
+              rules: [{
+                required: true,
+                message: "请输入包装单位",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "件数",
+              prop: "quantity",
+              rules: [{
+                required: true,
+                message: "请输入件数",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "毛重 (KGM)",
+              prop: "grossWeight",
+              rules: [{
+                required: true,
+                message: "请输入毛重 (KGM)",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "净重 (KGM)",
+              prop: "netWeight",
+              rules: [{
+                required: true,
+                message: "请输入净重 (KGM)",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "体积 (CBM)",
+              prop: "measurement",
+              rules: [{
+                required: true,
+                message: "请输入体积 (CBM)",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "集装箱箱数英文, ",
+              prop: "quantityCntrDescr",
+              rules: [{
+                required: true,
+                message: "请输入集装箱箱数英文, ",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "商品包装件数英文, ",
+              prop: "quantityPackingDescr",
+              rules: [{
+                required: true,
+                message: "请输入商品包装件数英文, ",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "集装箱箱型箱数英文, 1*20GP,2*40HC",
+              prop: "quantityCntrTypesDescr",
+              rules: [{
+                required: true,
+                message: "请输入集装箱箱型箱数英文, 1*20GP,2*40HC",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "状态（业务参数配置）",
+              prop: "billStatus",
+              rules: [{
+                required: true,
+                message: "请输入状态（业务参数配置）",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "财务状态（业务参数配置）",
+              prop: "accountStatus",
+              rules: [{
+                required: true,
+                message: "请输入财务状态（业务参数配置）",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "备注",
+              prop: "remarks",
+              rules: [{
+                required: true,
+                message: "请输入备注",
+                trigger: "blur"
+              }]
+            },
+          ]
+        },
+        data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.amends_add, false),
+          viewBtn: this.vaildData(this.permission.amends_view, false),
+          delBtn: this.vaildData(this.permission.amends_delete, false),
+          editBtn: this.vaildData(this.permission.amends_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    async created() {
+      this.option = await this.getColumnData(this.getColumnName(322), this.optionBack);
+    },
+    methods: {
+      // 新建amend
+      addbtnfun(){
+          this.isShow = false
+      },
+      // 详情的返回列表
+      goBack() {
+          // 初始化数据
+          if (JSON.stringify(this.$route.query) != "{}") {
+              this.$router.$avueRouter.closeTag();
+              this.$router.push({
+                  path: "/iosBasicData/amends/index"
+              });
+          }
+          this.isShow = true;
+          this.onLoad(this.page, this.search);
+      },
+      rowSave(row, done, loading) {
+        amendsSubmit(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        amendsSubmit(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          console.log(error);
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return amendsRemove(row.id);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return amendsRemove(this.ids);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          amendsDetail(this.form.id).then(res => {
+            this.form = res.data.data;
+          });
+        }
+        done();
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoad(this.page);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.page.currentPage = 1;
+        this.onLoad(this.page, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      currentChange(currentPage){
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize){
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      onLoad(page, params = {}) {
+        this.loading = true;
+        amendsList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+          const data = res.data.data;
+          this.page.total = data.total;
+          this.data = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      },
+        //自定义列保存
+      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;
+    text-align: center;
+}
+::v-deep#out-table .back-two {
+    background: #ecf5ff !important;
+    text-align: center;
+}
+</style>

src/views/iosBasicData/finvouchers/assembly/fromtableDetails.vue

@@ -21,42 +21,118 @@
                 width="55">
             </el-table-column>
             <el-table-column
-                prop="businessType"
+                prop="descr"
                 label="摘要">
+                <template slot-scope="{ row }">
+                    <el-input style="width: 100%;" type="textarea" v-model="row.descr"
+                              size="small" autocomplete="off"
+                              clearable placeholder="请输入摘要" >
+                    </el-input>
+                </template>
             </el-table-column>
-            <el-table-column label="科目属性">
-                <el-table-column
-                    prop="accountCode"
-                    label="代码">
-                </el-table-column>
+            <el-table-column
+                prop="accountCode"
+                label="科目代码" width="200px">
+                <template slot-scope="{ row }">
+                    <search-query :datalist="accountData"
+                                  :selectValue="row.accountCode"
+                                  :filterable="true"
+                                  :clearable="true"
+                                  :remote="true"
+                                  :buttonIf="false"
+                                  :forParameter="{key:'id',label:'shortName',value:'id'}"
+                                  @corpChange="corpChange($event,'shortName',row)">
+                    </search-query>
+                    <span>{{row.accountCnName}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="金额">
                 <el-table-column
-                    prop="accountFullName"
-                    label="名称">
+                    prop="amountDr"
+                    label="借方" width="120px">
+                    <template slot-scope="{ row }">
+                        <el-input style="width: 100%;" type="number" v-model="row.amountDr"
+                                  size="small" autocomplete="off"
+                                   placeholder="请输入借方" >
+                        </el-input>
+                    </template>
                 </el-table-column>
                 <el-table-column
-                    prop="dc"
-                    label="方向">
+                    prop="amountCr"
+                    label="货方" width="120px">
+                    <template slot-scope="{ row }">
+                        <el-input style="width: 100%;" type="number" v-model="row.amountCr"
+                                  size="small" autocomplete="off"
+                                   placeholder="请输入货方" >
+                        </el-input>
+                    </template>
                 </el-table-column>
             </el-table-column>
-            <el-table-column label="金额">
+            <el-table-column
+                prop="curCode"
+                label="币种" width="100px">
+            </el-table-column>
+            <el-table-column
+                prop="exrate"
+                label="汇率" width="120px">
+                <template slot-scope="{ row }">
+                    <el-input style="width: 100%;" type="number" v-model="row.exrate"
+                              size="small" autocomplete="off"
+                              clearable placeholder="请输入汇率" >
+                    </el-input>
+                </template>
+            </el-table-column>
+            <el-table-column label="外币金额">
                 <el-table-column
-                    prop="amountDr"
-                    label="借方">
+                    prop="amountDrUsd"
+                    label="借方" width="120px">
+                    <template slot-scope="{ row }">
+                        <el-input style="width: 100%;" type="number" v-model="row.amountDrUsd"
+                                  size="small" autocomplete="off"
+                                  clearable placeholder="请输入借方" >
+                        </el-input>
+                    </template>
                 </el-table-column>
                 <el-table-column
-                    prop="amountCr"
-                    label="货方">
+                    prop="amountCrUsd"
+                    label="货方" width="120px">
+                    <template slot-scope="{ row }">
+                        <el-input style="width: 100%;" type="number" v-model="row.amountCrUsd"
+                                  size="small" autocomplete="off"
+                                  clearable placeholder="请输入货方" >
+                        </el-input>
+                    </template>
                 </el-table-column>
             </el-table-column>
+            <el-table-column
+                prop="remarks"
+                label="备注">
+                <template slot-scope="{ row }">
+                    <el-input style="width: 100%;" type="textarea" v-model="row.amountCrUsd"
+                              size="small" autocomplete="off"
+                              clearable placeholder="请输入备注" >
+                    </el-input>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="100px">
+                <template slot-scope="{ row }">
+                    <el-button size="mini" type="primary" icon="el-icon-plus" circle></el-button>
+                    <el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
+                </template>
+            </el-table-column>
         </el-table>
     </div>
 </template>
 
 <script>
+    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
+
     export default {
+        components: {SearchQuery},
         data(){
             return {
-                selectionList:[], // 多选的数据
+                accountData:[], // 科目数据
+                handleSelectionData:[],
             }
         },
         props:{
@@ -68,6 +144,10 @@
             this.option = await this.getColumnData(this.getColumnName(321.1), this.optionBack);
         },
         methods:{
+            // 下拉回调
+            corpChange(value){
+
+            },
             // 表头样式
             tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
                 return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"

src/views/iosBasicData/finvouchers/finvouchersitems.vue

@@ -25,7 +25,7 @@
                                               :selectValue="form.voucherType"
                                               :clearable="true"
                                               :buttonIf="false"
-                                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictValue',}"
+                                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
                                               placeholder="请输入凭证类型"
                                               @corpChange="corpChange($event,'voucherType')">
                                 </search-query>
@@ -83,6 +83,9 @@
             <el-card style="margin-top: 10px">
                 <div style="margin-bottom: 10px">
                     <el-button  size="small" type="success" style="margin-right: 8px"
+                                :loading="saveLoading" @click="addEntryfun" >添加分录
+                    </el-button>
+                    <el-button  size="small" type="success" style="margin-right: 8px"
                                 :loading="saveLoading" >项目属性
                     </el-button>
                     <el-button  size="small" type="success" style="margin-right: 8px"
@@ -95,7 +98,7 @@
                                 :loading="saveLoading" >科目余额查询
                     </el-button>
                 </div>
-                <fromtable-details ></fromtable-details>
+                <fromtable-details :tableData="form.finVouchersItemsList"></fromtable-details>
             </el-card>
 
             <el-row style="margin-top: 10px">
@@ -284,6 +287,7 @@
                 // 获取的数据
                 form:{
                     voucherDate:getCurrentDate(),
+                    finVouchersItemsList:[],
                 },
                 voucherTypeData:[], // 凭证字数据
             }
@@ -292,9 +296,14 @@
             this.getWorkDictsfun()
         },
         methods:{
+            // 添加分录
+            addEntryfun(){
+                this.form.finVouchersItemsList.push({
+
+                })
+            },
             // 保存
             finvouchersSubmitfun(){
-                this.form.billNoFormat = 'PZDH'
                 this.form.businessTypeCode = 'PZDH'
                 finvouchersSubmit().then(res=>{
 
@@ -302,9 +311,8 @@
             },
             // 下拉回调
             corpChange(value,name){
-                if (name == 'voucherType') {
-
-                }
+                this.$set(this.form,'voucherType',value)
+                this.$set(this.form,'billNoFormat',value)
             },
             // 获取字典数据
             getWorkDictsfun(){

src/views/iosBasicData/finvouchers/index.vue

@@ -80,12 +80,12 @@
               overHidden:true,
             },
             {
-              label: "凭证来源, SYSTEM = 自动凭证",
+              label: "凭证来源",
               prop: "voucherSource",
               overHidden:true,
             },
             {
-              label: "凭证类型，记 转",
+              label: "凭证类型",
               prop: "voucherType",
               overHidden:true,
             },
@@ -130,12 +130,12 @@
               overHidden:true,
             },
             {
-              label: "综合 USD 借方金额(USD) - 非 USD 外币转换为 USD",
+              label: "借方金额(USD)",
               prop: "amountDrUsd",
               overHidden:true,
             },
             {
-              label: "综合 USD 贷方金额(USD) - 非 USD 外币转换为 USD",
+              label: "贷方金额(USD）",
               prop: "amountCrUsd",
               overHidden:true,
             },