logpm_page/src/views/cost/Deliverycostmanagement/Financialreview.vue

<template>
    <basic-container>
      <!-- 首页表格 -->
      <div class="avue-crud">
        <!-- 搜索模块 -->
        <el-row v-if="search">
          <!-- 查询模块 -->
          <el-form :inline="true" :model="query" class="el-fr-d">
            <!-- 查询按钮 -->
            <el-form-item class="el-btn">
              <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
              <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
            </el-form-item>
          </el-form>
        </el-row>
  
        <!-- 控件模块 -->
        <el-row>
          <div class="avue-crud__header">
            <!-- 头部左侧按钮模块 -->
            <div class="avue-crud__left">
              <el-button type="primary" @click="AddInfo"><el-icon><Plus /></el-icon>导出</el-button>
            </div>
            <!-- 头部右侧按钮模块 -->
            <div class="avue-crud__right">
              <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
              <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
              <el-button icon="Search" @click="searchHide" circle></el-button>
            </div>
          </div>
        </el-row>
  
        <!-- 首页表格 -->
        <el-row>
          <!-- 列表模块 -->
          <tablecmt
            class="tableNode"
            :columnList="details.columnList"
            :tableData="data"
            :loading="loadingObj.list"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
            @selectCheck="selectsc"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <template v-if="slotProps.scope.column.label === '操作'">
                <div class="ElBtnClass">
                    <el-button type="primary">编辑</el-button>
                </div>
              </template>
            </template>
          </tablecmt>
        </el-row>
  
        <!-- 分页模块 -->
        <el-row class="el-fy">
          <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
            <div></div>
            <el-pagination
              align="right"
              background
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="page.currentPage"
              :page-sizes="[30, 50, 80, 120]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </el-row>
      </div>
    </basic-container>
    <!-- 列表配置显示 -->
    <edittablehead
      @setcolum="setnewcolum"
      @closce="showdrawer"
      :drawerShow="drawerShow"
      :columnList="details.columnList"
       v-model="details.columnList"
    ></edittablehead>
  </template>
  
  <script setup>
  import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
  import { columnList } from '@/option/storagecost/Financialreview.js';
  import { getDictionaryBiz } from '@/api/system/dict'; //字典
  import { processRowProperty,setNodeHeight } from '@/utils/util';	
  import functions from '@/utils/functions.js';
  import { ElMessageBox,ElMessage } from 'element-plus';
  import { downloadXls } from '@/utils/util'; 
  import { useStore } from 'vuex';
  import dayjs from 'dayjs';
  const $router = useRouter();//跳转
  const $useStore = useStore();//权限
  const $route = useRoute();//获取地址栏参数
  const details = reactive({
    /** 是否开启搜索 */
    search: false,
    /** 表格搜索条件 */
    query: {},
    /** 时间快捷选择设置 */
    shortcuts: [
      {
        text: '最近一周',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: '最近一个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: '最近三个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ],
    /** 时间选择器数据 */
    stockupDate: [],
    /** 列表 */
    columnList,
  
    /** 列表数据 */
    data: [{}],
    /** 页面loading */
    loadingObj: {
      /** 列表加载loading */
      list: false,
      packageListLoading: false,
    },
    /** 列表复选框选中的数据 */
    selectionList: [],
    /** 是否显示设置表格 */
    drawerShow: false,
    /** 分页参数 */
    page: {
      currentPage: 1,
      pageSize: 50,
      total: 0,
    },
  
    /** 弹出层显示 */
    popUpShow: {
      /** 包件明细 */
      packageOrderListlVisited: false,
      /** 二维码 */
      QRCodeVisible: false,
      /** 修改客户信息 */
      editClientInfoVisible: false,
    },
    /** 列表Dom节点 */
    listNode: '',
    form: {},
    /** 全屏 */
    fullscreenObj: {
      /** 包明细 */
      packageOrderListlVisited: false,
    },
  });
  
  const {
    search,
    query,
    shortcuts,
    stockupDate,
    data,
    loadingObj,
    selectionList,
    drawerShow,
    page,
    trickleLoadingPage,
    zeroAdditionalRecordingInfo,
    popUpShow,
    recorddata,
  } = toRefs(details);

  /** 展开列表控件 */
  const showdrawer = _flag => {
    details.drawerShow = _flag;
  };
  /** 表格表头输入框搜索 */
  const inputsc = (index, row) => {
    details.query[row.prop] = index;
    processRowProperty(index, row, details);
    test(details.query); 
      
  };
  // 实例函数
  const test=(val)=>{
  
  }
  /** 表格表头时间选择 */
  const timesc = (index, row) => {
    console.log(index, row);
    if (!!index) {
      index = dayjs(index).format('YYYY-MM-DD');
    }
    details.query[row.prop] = index;
    if (!index) {
      delete details.query[row.prop];
    }
  };
  
  /** 表格表头输入框搜索 */
  const btnsc = val => {
    console.log(val);
  };
  /** 表格表头下拉框选择 */
  const selectsc = (index, row) => {
    processRowProperty(index, row, details);
  };
  /** 表格表头复选框选择 */
  const selectionChange = list => {
    console.log(list);
    details.selectionList = list;
  };
  // 网页顶部搜索按钮
  const searchChange = () => {
    details.search = false; //关闭搜索
  };
  // 每页多少条
  const sizeChange = val => {
    page.value.pageSize = val;
  };
  /** 页码改变执行的回调 */
  const currentChange = val => {
    page.value.currentPage = val;
  };
  // 刷新按钮
  const searchChangeS = () => {
    details.search = false; //关闭搜索
  };
  // 顶部搜索
  const searchHide = () => {
    console.log(details);
    details.search = !details.search;
   const _node = document.querySelector('.tableNode');
    setNodeHeight(_node, '', true);
  };
  // 字典公共函数
  function updateDictionary(targetArray, dictionaryType) {
    getDictionaryBiz(dictionaryType).then(res => {
      console.log(res, '字典');
      res.data.data.forEach(item => {
        targetArray.push({
          value: item.dictKey,
          label: item.dictValue,
        });
      });
    });
  }
// 页面初始化
const onLoad=()=>{

}

  // 页面初始化方法
  </script>
  
  <style scoped lang="scss">
  .ElBtnClass button {
    border: none;
    padding: 0;
    background-color: transparent;
  }
  :deep(.el-card) {
    height: 100%;
  }
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-fy {
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .avue-crud {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  </style>