新加批量删除功能

src/views/iosBasicData/costcenter/soc/detailsPage.vue

@@ -137,14 +137,17 @@
             <trade-card title="基础明细">
                 <avue-crud :option="option" :data="form.costItemList" id="out-table" ref="crud"
                     :header-cell-class-name="headerClassName" :row-style="{ height: '20px', padding: '0px' }"
-                    :cell-style="{ height: '20px',padding: '0px' }" @selection-change="selectionChange" @select="selectHandle"
-                    @row-update="rowUpdate" @resetColumn="resetColumn('crud', 'option', 'optionBack', 447)"
+                    :cell-style="{ height: '20px', padding: '0px' }" @selection-change="selectionChange"
+                    @select="selectHandle" @row-update="rowUpdate"
+                    @resetColumn="resetColumn('crud', 'option', 'optionBack', 447)"
                     @saveColumn="saveColumn('crud', 'option', 'optionBack', 447)">
                     <template slot="menuLeft">
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('一键保存')">一键保存</el-button>
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('一键编辑')">一键编辑</el-button>
+                        <el-button type="danger" plain size="small" :disabled="editDisabled || selectionList.length == 0"
+                            @click="allClick('批量删除')">批量删除</el-button>
                     </template>
                     <template slot="indexHeader" slot-scope="{row,index}">
                         <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="editDisabled" circle
@@ -189,23 +192,25 @@
                             :controls="false" placeholder="请输入 海运费" size="small" style="width: 100%;"></el-input-number>
                         <span v-else>{{ row.oceanFreight }}</span>
                     </template>
-                    <template slot="menu" slot-scope="{ row, index }">
+                    <!-- <template slot="menu" slot-scope="{ row, index }">
                         <el-button size="small" icon="el-icon-delete" type="text" :disabled="editDisabled"
                             @click="rowDel(row, index)">删 除</el-button>
-                    </template>
+                    </template> -->
                 </avue-crud>
             </trade-card>
             <trade-card title="POL杂费">
                 <avue-crud :option="polOption" :data="polFeeList" id="out-table" ref="crud2"
-                :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }" @selection-change="selectionChange"
-                    @select="selectHandle" @row-update="rowUpdate"
-                    @resetColumn="resetColumn('crud2', 'polOption', 'polOptionBack', 448)"
+                    :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }"
+                    :cell-style="{ padding: '0px' }" @selection-change="polChange" @select="selectHandle"
+                    @row-update="rowUpdate" @resetColumn="resetColumn('crud2', 'polOption', 'polOptionBack', 448)"
                     @saveColumn="saveColumn('crud2', 'polOption', 'polOptionBack', 448)">
                     <template slot="menuLeft">
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('一键保存')">一键保存</el-button>
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('POL一键编辑')">一键编辑</el-button>
+                        <el-button type="danger" plain size="small" :disabled="editDisabled || selectionPolList.length == 0"
+                            @click="allClick('POL批量删除')">批量删除</el-button>
                     </template>
                     <template slot="indexHeader" slot-scope="{row,index}">
                         <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="editDisabled" circle
@@ -276,15 +281,17 @@
             </trade-card>
             <trade-card title="POD杂费">
                 <avue-crud :option="podOption" :data="podFeeList" id="out-table" ref="crud3"
-                :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }" @selection-change="selectionChange"
-                    @select="selectHandle" @row-update="rowUpdate"
-                    @resetColumn="resetColumn('crud3', 'podOption', 'podOptionBack', 449)"
+                    :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }"
+                    :cell-style="{ padding: '0px' }" @selection-change="podChange" @select="selectHandle"
+                    @row-update="rowUpdate" @resetColumn="resetColumn('crud3', 'podOption', 'podOptionBack', 449)"
                     @saveColumn="saveColumn('crud3', 'podOption', 'podOptionBack', 449)">
                     <template slot="menuLeft">
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('一键保存')">一键保存</el-button>
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('POD一键编辑')">一键编辑</el-button>
+                        <el-button type="danger" plain size="small" :disabled="editDisabled || selectionPodList.length == 0"
+                            @click="allClick('POD批量删除')">批量删除</el-button>
                     </template>
                     <template slot="indexHeader" slot-scope="{row,index}">
                         <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="editDisabled" circle
@@ -355,15 +362,17 @@
             </trade-card>
             <trade-card title="POT杂费">
                 <avue-crud :option="potOption" :data="potFeeList" id="out-table" ref="crud4"
-                :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }" @selection-change="selectionChange"
-                    @select="selectHandle" @row-update="rowUpdate"
-                    @resetColumn="resetColumn('crud4', 'potOption', 'potOptionBack', 450)"
+                    :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }"
+                    :cell-style="{ padding: '0px' }" @selection-change="potChange" @select="selectHandle"
+                    @row-update="rowUpdate" @resetColumn="resetColumn('crud4', 'potOption', 'potOptionBack', 450)"
                     @saveColumn="saveColumn('crud4', 'potOption', 'potOptionBack', 450)">
                     <template slot="menuLeft">
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('一键保存')">一键保存</el-button>
                         <el-button type="info" plain size="small" :disabled="editDisabled"
                             @click="allClick('POT一键编辑')">一键编辑</el-button>
+                        <el-button type="danger" plain size="small" :disabled="editDisabled || selectionPotList.length == 0"
+                            @click="allClick('POT批量删除')">批量删除</el-button>
                     </template>
                     <template slot="indexHeader" slot-scope="{row,index}">
                         <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="editDisabled" circle
@@ -432,6 +441,10 @@
                     </template>
                 </avue-crud>
             </trade-card>
+            <trade-card title="操作记录">
+                <avue-form :option="optionForm2" v-model="form" ref="form">
+                </avue-form>
+            </trade-card>
         </div>
         <reports :id="form.id" :assemblyForm="form" businessValue="MYDL" ref="report"></reports>
         <!--审核弹窗-->
@@ -457,6 +470,9 @@ export default {
     data() {
         return {
             selectionList: [],
+            selectionPolList: [],
+            selectionPodList: [],
+            selectionPotList: [],
             checkId: '', // 审核需要的id
             batchNo: '',
             checkScheduleDialog: false, // 审核弹窗
@@ -483,6 +499,11 @@ export default {
                         disabled: false,
                     },
                     {
+                        label: '系统号',
+                        prop: "businessNo",
+                        disabled: true,
+                    },
+                    {
                         label: '起运港',
                         prop: "podCname",
                         disabled: false,
@@ -693,6 +714,34 @@ export default {
                     },
                 ]
             },
+            optionForm2: {
+                menuBtn: false,
+                span: 6,
+                disabled: false,
+                labelWidth: 100,
+                column: [
+                    {
+                        label: '制单人',
+                        prop: "createUserName",
+                        disabled: true,
+                    },
+                    {
+                        label: '制单日期',
+                        prop: "createTime",
+                        disabled: true,
+                    },
+                    {
+                        label: '修改人',
+                        prop: "updateUserName",
+                        disabled: true,
+                    },
+                    {
+                        label: '修改日期',
+                        prop: "updateTime",
+                        disabled: true,
+                    }
+                ]
+            },
             option: {},
             optionBack: {
                 // height: 'auto',
@@ -707,7 +756,7 @@ export default {
                 refreshBtn: false,
                 selection: true,
                 align: 'center',
-                menu:false,
+                menu: false,
                 column: [
                     {
                         label: "index",
@@ -872,7 +921,7 @@ export default {
                 refreshBtn: false,
                 selection: true,
                 align: 'center',
-                menu:false,
+                menu: false,
                 column: [
                     {
                         label: "index",
@@ -1060,7 +1109,7 @@ export default {
                 refreshBtn: false,
                 selection: true,
                 align: 'center',
-                menu:false,
+                menu: false,
                 column: [
                     {
                         label: "index",
@@ -1248,7 +1297,7 @@ export default {
                 refreshBtn: false,
                 selection: true,
                 align: 'center',
-                menu:false,
+                menu: false,
                 column: [
                     {
                         label: "index",
@@ -1782,6 +1831,15 @@ export default {
         selectionChange(list) {
             this.selectionList = list;
         },
+        polChange(list) {
+            this.selectionPolList = list;
+        },
+        podChange(list) {
+            this.selectionPodList = list;
+        },
+        potChange(list) {
+            this.selectionPotList = list;
+        },
         getDetails(id) {
             const loading = this.$loading({
                 lock: true,
@@ -1909,21 +1967,165 @@ export default {
                     this.$set(row, "$cellEdit", true);
                 }
             }
+            if (name == '批量删除') {
+                let multiList = []
+                let arr = []
+                this.$confirm("确定将选择数据删除?", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(() => {
+                    multiList = this.selectionList
+                    arr = this.form.costItemList
+                    // 获取有id 的数据
+                    const itemsWithId = multiList.filter(item => item.hasOwnProperty('id'));
+                    let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
+                    // 把选中的删除掉
+                    multiList.forEach((item) => {
+                        for (let index in arr) {
+                            if (JSON.stringify(item) == JSON.stringify(arr[index])) {
+                                arr.splice(Number(index), 1)
+                            }
+                        }
+                    })
+                    if (itemsWithId.length != 0) {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: '加载中',
+                            spinner: 'el-icon-loading',
+                            background: 'rgba(255,255,255,0.7)'
+                        });
+                        removeItem({ ids: arrIds.join(',') }).then(res => {
+                            this.$message.success("删除成功");
+                        }).finally(() => {
+                            loading.close();
+                        })
+                    }
+                })
+            }
             if (name == 'POL一键编辑') {
                 for (let row of this.polFeeList) {
                     this.$set(row, "$cellEdit", true);
                 }
             }
+            if (name == 'POL批量删除') {
+                let multiList = []
+                let arr = []
+                this.$confirm("确定将选择数据删除?", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(() => {
+                    multiList = this.selectionPolList
+                    arr = this.polFeeList
+                    // 获取有id 的数据
+                    const itemsWithId = multiList.filter(item => item.hasOwnProperty('id'));
+                    let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
+                    // 把选中的删除掉
+                    multiList.forEach((item) => {
+                        for (let index in arr) {
+                            if (JSON.stringify(item) == JSON.stringify(arr[index])) {
+                                arr.splice(Number(index), 1)
+                            }
+                        }
+                    })
+                    if (itemsWithId.length != 0) {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: '加载中',
+                            spinner: 'el-icon-loading',
+                            background: 'rgba(255,255,255,0.7)'
+                        });
+                        feeRemove({ ids: arrIds.join(',') }).then(res => {
+                            this.$message.success("删除成功");
+                        }).finally(() => {
+                            loading.close();
+                        })
+                    }
+                })
+            }
             if (name == 'POD一键编辑') {
                 for (let row of this.podFeeList) {
                     this.$set(row, "$cellEdit", true);
                 }
             }
+            if (name == 'POD批量删除') {
+                let multiList = []
+                let arr = []
+                this.$confirm("确定将选择数据删除?", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(() => {
+                    multiList = this.selectionPodList
+                    arr = this.podFeeList
+                    // 获取有id 的数据
+                    const itemsWithId = multiList.filter(item => item.hasOwnProperty('id'));
+                    let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
+                    // 把选中的删除掉
+                    multiList.forEach((item) => {
+                        for (let index in arr) {
+                            if (JSON.stringify(item) == JSON.stringify(arr[index])) {
+                                arr.splice(Number(index), 1)
+                            }
+                        }
+                    })
+                    if (itemsWithId.length != 0) {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: '加载中',
+                            spinner: 'el-icon-loading',
+                            background: 'rgba(255,255,255,0.7)'
+                        });
+                        feeRemove({ ids: arrIds.join(',') }).then(res => {
+                            this.$message.success("删除成功");
+                        }).finally(() => {
+                            loading.close();
+                        })
+                    }
+                })
+            }
             if (name == 'POT一键编辑') {
                 for (let row of this.potFeeList) {
                     this.$set(row, "$cellEdit", true);
                 }
             }
+            if (name == 'POT批量删除') {
+                let multiList = []
+                let arr = []
+                this.$confirm("确定将选择数据删除?", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(() => {
+                    multiList = this.selectionPotList
+                    arr = this.potFeeList
+                    // 获取有id 的数据
+                    const itemsWithId = multiList.filter(item => item.hasOwnProperty('id'));
+                    let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
+                    // 把选中的删除掉
+                    multiList.forEach((item) => {
+                        for (let index in arr) {
+                            if (JSON.stringify(item) == JSON.stringify(arr[index])) {
+                                arr.splice(Number(index), 1)
+                            }
+                        }
+                    })
+                    if (itemsWithId.length != 0) {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: '加载中',
+                            spinner: 'el-icon-loading',
+                            background: 'rgba(255,255,255,0.7)'
+                        });
+                        feeRemove({ ids: arrIds.join(',') }).then(res => {
+                            this.$message.success("删除成功");
+                        }).finally(() => {
+                            loading.close();
+                        })
+                    }
+                })
+            }
         },
         submit(type) {
             this.$refs["form"].validate((valid, done) => {
@@ -2077,6 +2279,7 @@ export default {
 
 ::v-deep .el-table .cell {
     padding: 0 2px !important;
+
     .el-form-item {
         margin-bottom: 0px !important;
     }

src/views/iosBasicData/costcenter/soc/index.vue

@@ -236,6 +236,12 @@ export default {
                         overHidden: true,
                     },
                     {
+                        label: "状态",
+                        prop: "status",
+                        width: "100",
+                        overHidden: true
+                    },
+                    {
                         label: "制单人",
                         prop: "createUserName",
                         width: "100",