hjjc-workbench-web/src/views/inOut/expenseAccount.vue

<!--我的报销-->
<template>
  <div style="padding: 0 20px">
    <lx-header
      icon="md-apps"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="我的报销"
    >
      <div slot="content"></div>
      <slot>
        <div>
          <span style="padding: 0 6px">年份</span>
          <span>
            <DatePicker
              :value="select.year"
              placeholder="选择所属年份"
              placement="bottom"
              style="width: 130px"
              type="year"
              @on-change="(e) => (select.year = e)"
            ></DatePicker>
          </span>

          <span style="padding: 0 6px"> 预算类型 </span>
          <span>
            <Select
              v-model="select.type"
              clearable
              placeholder="选择预算类型"
              style="width: 130px"
            >
              <Option v-for="item in types" :key="item.id" :value="item.id">{{
                  item.value
                }}</Option>
            </Select>
          </span>

          <span style="padding: 0 6px"> 科室 </span>
          <span>
            <el-select
              placeholder="科室选择"
              clearable
              size="small"
              v-model="select.department"
              style="width: 160px"
            >
              <el-option
                v-for="item in departments"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </span>

          <Button style="margin-left: 10px" type="primary" @click=""
          >新增</Button
          >
          <Button style="margin-left: 10px" type="primary" @click=""
          >查询</Button
          >
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="
              () => (select = { page: 1, year: '', type: '', department: '' })
            "
          >重置
          </Button>
        </div>
      </slot>
    </lx-header>

    <xy-table></xy-table>

    <div style="display: flex;justify-content: flex-end;padding: 10px 0;">
      <Page :total="total" @on-change="" show-elevator show-sizer @on-page-size-change="" />
    </div>
  </div>
</template>

<script>
import { listdeptNoAuth } from '@/api/system/department'

export default {
  data() {
    return {
      total: 0,
      select: {

      },
      types: [],
      departments: [],

      table: [
        {
          prop: '',
          label: '项目名称',
          width: 180,
          fixed: 'left'
        },
        {
          prop: '',
          label: '报销类型',
          width: 160,
        },
        {
          prop: '',
          label: '资金来源',
          width: 160,
        },
        {
          prop: '',
          label: '报销金额（元）',
          width: 140,
          align: 'right'
        },
        {
          prop: '',
          label: '实际报销金额（元）',
          width: 140,
          align: 'right'
        },
        {
          prop: '',
          label: '已付金额',
          width: 140,
          align: 'right'
        },
        {
          prop: 'department.name',
          label: '业务科室',
          width: 140
        },
        {
          prop: '',
          label: '状态',
          width: 140
        },
        {
          prop: 'admin.name',
          label: '经办人',
          width: 140
        },
        {
          prop: 'created_at',
          label: '创建日期',
          width: 180
        }
      ]
    }
  },
  methods: {
    async getDepartment() {
      this.departments = await listdeptNoAuth()
    },
  },
  computed: {},
  created() {
    this.getDepartment()
  },
  beforeRouteEnter (to, from , next) {
    console.log(to.path.split('_')[1])
    next()
  }
}
</script>

<style scoped lang="scss">
</style>