dm-manage-web/src/views/finance/expense/components/OfficeExpense/index.vue

<template>
  <div>
    <SearchForm v-show="showSearch" :value.sync="searchForm" ref="SearchForm" @search="_getTableList" :userOptions="userOptions" />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" v-hasPermi="['finance:expense:meituan:add']" @click="handleDialog(null)">新增</el-button>
        <el-button type="warning" icon="el-icon-download" v-hasPermi="['finance:expense:meituan:export']" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="_getTableList" />
    </el-row>
    <el-table :data="tableList">
      <el-table-column type="selection" width="50" align="center" />
      <template v-for="item in columns">
        <el-table-column v-if="item.visible && item.prop != 'state'" :key="item.prop" :label="item.label" align="center" min-width="100" :prop="item.prop" />
        <el-table-column v-if="item.visible && item.prop == 'state'" :key="item.prop" :label="item.label" align="center" min-width="100" :prop="item.prop">
          <template scope="scope">
            <el-tag v-if="scope.row.state == 0">保存中</el-tag>
            <el-tag type="warning" v-if="scope.row.state == 1">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.state == 2">已审核</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 3">驳回</el-tag>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" fixed="right" align="center" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDialog(scope.row)">详情</el-button>
          <el-button type="text" v-if="scope.row.state == 1" v-hasPermi="['finance:expense:meituan:check']" @click="handleDialog(scope.row)">审核</el-button>
          <el-button type="text" v-if="scope.row.state == 0" v-hasPermi="['finance:expense:meituan:remove']" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="_getTableList" />

    <OfficeDialog ref="OfficeDialog" @refreshDataList="_getTableList" :userOptions="userOptions" />
  </div>
</template>
  
  <script>
import SearchForm from './SearchForm.vue';
import OfficeDialog from './OfficeDialog.vue';
import { defaultColumns } from './columns.js';
import empApi from '@/api/system/employee';


import { listExpense, removeExpense, exportExpense } from '@/api/finance/expense/officeExpense'

export default {
  //   name: "AccountExpense",
  components: {
    SearchForm, OfficeDialog
  },
  props: {
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      searchForm: {
        createUser: undefined,
        createTimeRange: [],
        pageNum: 1,
        pageSize: 20
      },
      showSearch: true,
      tableList: [],
      total: 0,
      columns: [],
      userOptions: []
    };
  },
  watch: {
    type: {
      handler() {
        this.columns = defaultColumns
        this._getTableList();
        this.getEmployee()
      },
      immediate: true
    }
  },
  methods: {
    async _getTableList() {
      const tempForm = this.$refs.SearchForm?.searchForm || {};
      const params = { ...this.searchForm, ...tempForm };
      // api.list(params)
      listExpense(params).then(resp => {
        if (resp.code == 200) {
          this.tableList = resp.rows
          this.total = resp.total
        }
      })
      //   this.tableList = [];
      //   for (let i = 0; i < 20; i++) {
      //     this.tableList.push({ applyUser: `数据${i + 1}` });
      //   }
    },
    handleDialog(row) {
      this.$refs.OfficeDialog && this.$refs.OfficeDialog.init(row);
    },
    //删除
    handleDelete(item) {
      this.$confirm('是否确认删除该条报销（“' + item.expenseType + '/' + item.expenseDate + '”）?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((res) => {
          removeExpense(item.expenseId).then((resp) => {
            if (resp.code === 200) {
              this.$message.success('删除成功');
              this._getTableList();
            }
          });
        })
        .catch(function () { });
    },
    handleExport() {
      this.$confirm('是否确认导出所查询报销信息项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const tempForm = this.$refs.SearchForm?.searchForm || {};
        this.download('finance/expense/office/export', tempForm, `办公费用报销信息_${new Date().getTime()}.xlsx`);
      });
    },
    getEmployee() {
      empApi.getEmployee().then((resp) => {
        if (resp.code === 200) {
          this.userOptions = resp.data;
        }
      });
    },
  }
};
  </script>
  
  <style lang="scss" scoped></style>