kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/index.vue

<template>
    <div class="ele-body">
      <el-card shadow="never" v-loading="loading">
           <div class="ele-border-lighter form-content" v-loading="loading">
              <search-table @search="reload"> </search-table>
  
              <!-- 数据表格 -->
              <ele-pro-table
                ref="table"
                :columns="columns"
                :datasource="datasource"
                height="calc(100vh - 385px)"
                full-height="calc(100vh - 116px)"
                tool-class="ele-toolbar-form"
                :selection.sync="selection"
                cache-key="eomContactPageTable"
              >
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-plus"
                    class="ele-btn-icon"
                    @click="openEdit('add',{})"
                  >
                    新建
                  </el-button>
                
                  <el-button
                    size="small"
                    type="danger"
                    el-icon-delete
                    class="ele-btn-icon"
                    @click="allDelBtn"
                    :disabled="selection?.length===0"
                  >
                    批量删除
                  </el-button>
                </template>
  
                <!-- 查看详情列 -->
             
                <template v-slot:docNo="{ row }">
                  <el-link type="primary" :underline="false" @click="openorderDetail(row)"> {{ row.docNo }}</el-link>
                </template>
                <!-- 操作列 -->
                <template v-slot:action="{ row }">
                  
                  <el-link
                    type="primary"
                    :underline="false"
                    icon="el-icon-edit"
                    @click="openEdit('edit',row)"
                  >
                    修改
                  </el-link>
                  <el-popconfirm
                    class="ele-action"
                    title="确定要删除此信息吗？"
                    @confirm="remove([row.id])"
                  >
                    <template v-slot:reference>
                      <el-link
                        type="danger"
                        :underline="false"
                        icon="el-icon-delete"
                      >
                        删除
                      </el-link>
                    </template>
                  </el-popconfirm>
                </template>
              </ele-pro-table>
            </div>
      </el-card>
  
  
      <add-invoice-dialog ref="invoiceDialogRef"  @done="reload"></add-invoice-dialog>
      <detail-dialog ref="DetailDialogRef"></detail-dialog>
  <!-- 多选删除弹窗 -->
      <pop-modal :visible.sync="delVisible" content="是否确定删除？" @done="commitBtn"/>
    </div>
  </template>
  
  <script>
  import searchTable from './components/searchTable.vue';
  import addInvoiceDialog from './components/addInvoiceDialog.vue';
  import detailDialog from './components/detailDialog.vue';
  import popModal from '@/components/pop-modal';
  import {reviewStatusEnum} from '@/enum/dict';
  import {contactTypeTree} from '@/api/saleManage/contact';
  import {getTableList, getDetail, UpdateInformation, addInformation,deleteInformation} from '@/api/saleManage/saleorder';
  import {getSendTableList, getSendSaleOrderrecordDetail, UpdateSendInformation, addSendInformation,deleteSendInformation} from '@/api/saleManage/saleordersendrecord';
  import dictMixins from '@/mixins/dictMixins';
  
  
  export default {
      mixins: [dictMixins],
      components: {
        searchTable,
        popModal,
        addInvoiceDialog,
        detailDialog,
      },
      data() {
        return {
          activeComp: 'saleorder',
          tabOptions: [
            { key: 'saleorder', name: '销售订单' },
            { key: 'invoice', name: '发货单' },
            { key: 'returnorder', name: '退货单' }
          ],
          selection:[],   //单选中集合
          delVisible:false,  //批量删除弹框状态
          loading: false,  // 加载状态
          columns: [
            {
               width: 45,
               type: 'selection',
               columnKey: 'selection',
               align: 'center'
            },
            {
              columnKey: 'index',
              label: '序号',
              type: 'index',
              width: 55,
              align: 'center',
              showOverflowTooltip: true,
              fixed: 'left'
            },
            {
              prop: 'docNo',
              label: '发货编码',
              align: 'center',
              slot: 'docNo',
              showOverflowTooltip: true,
              minWidth: 200
            },
            {
              prop: 'orderNo',
              label: '订单编码',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 200
            }, 
            {
              prop: 'contactName',
              label: '客户名称',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 180,
            },
            {
              prop: 'replied',
              label: '是否回执',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 200,
              formatter: (_row, _column, cellValue) => {
              return _row.replied==1?'是':'否';
            }
            },
            {
              prop: 'reviewStatus',
              label: '状态',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 200,
              formatter: (_row, _column, cellValue) => {
              return reviewStatusEnum[_row.reviewStatus].label;
            }
            },
            {
              prop: 'createTime',
              label: '创建时间',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 170
            },
            {
              columnKey: 'action',
              label: '操作',
              width: 230,
              align: 'center',
              resizable: false,
              slot: 'action',
              showOverflowTooltip: true,
              fixed: 'right',
            }
          ]
        };
      },
      computed: {},
   
      methods: {
      
      
        /* 表格数据源 */
        datasource({ page, limit, where, order }) {
          return getSendTableList({
            pageNum: page,
            size: limit,
            ...where
          });
        },
      
    
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ page: 1, where });
        },
        
        //新增编辑
        openEdit(type,row) {
          this.$refs.invoiceDialogRef.open( type,row);
          this.$refs.invoiceDialogRef.$refs.form &&
          this.$refs.invoiceDialogRef.$refs.form.clearValidate();
        },
       
        //批量删除
        allDelBtn(){
          if(this.selection.length===0) return
          this.delVisible=true
        },
        
        //删除接口
        remove(delData) {
            deleteSendInformation(delData).then((res) => {
            this.$message.success('删除成功！');
            this.reload();
          });
        },
  
      //删除弹框确定
        commitBtn(){
          const dataId=this.selection.map(v=>v.id)
          this.remove(dataId)
        },
  
      //查看详情
      openorderDetail(row){
          this.$refs.DetailDialogRef.open(row);
        },
  
      }
    };
  </script>
  
  <style lang="scss" scoped>
  .ele-body{
    padding-top:0;
    padding-bottom: 0;
  }
 :deep .el-card__body{
  padding: 0;
}
  :deep(.el-link--inner){
    margin-left: 0px !important;
  }
  
  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }
  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;
    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
  
  .switch_left ul .active{
    border-top: 4px solid var(--color-primary);
      color: var(--color-primary-5);
  }
  .switch{
    padding-bottom: 20px;
  }
  
  .el-dropdown-link {
      cursor: pointer;
      color: var(--color-primary-5);
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  </style>