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 class="select-bar">
          <div>
            <span style="padding: 0 6px">创建日期</span>
            <span>
            <DatePicker
              :value="select.year"
              placeholder="选择开始日期"
              placement="bottom"
              style="width: 114px"
              type="date"
              @on-change="(e) => (select.year = e)"
            ></DatePicker>
            <DatePicker
              :value="select.year"
              placeholder="选择结束日期"
              placement="bottom"
              style="width: 114px;margin-left: 6px;"
              type="date"
              @on-change="(e) => (select.year = e)"
            ></DatePicker>
          </span>
          </div>

          <div>
            <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>
          </div>

          <div>
            <span style="padding: 0 6px"> 科室 </span>
            <span>
            <Select
              placeholder="科室选择"
              clearable
              v-model="select.department"
              style="width: 130px"
            >
              <Option v-for="item in departments" :key="item.id"  :value="item.id">{{ item.name }}</Option>
            </Select>
          </span>
          </div>

          <div>
            <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>
          </div>

          <div>
            <span style="padding: 0 6px"> 报销金额 </span>
            <span>
            <InputNumber
              style="width: 110px;"
              placeholder="最低价"
              v-model="select.end_money"
              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\s?|(,*)/g, '')"></InputNumber>
             <InputNumber
               style="width: 110px;margin-left: 6px;"
               placeholder="最高价"
               v-model="select.end_money"
               :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
               :parser="value => value.replace(/\s?|(,*)/g, '')"></InputNumber>
          </span>
          </div>

          <div>
            <span style="padding: 0 6px"> 状态 </span>
            <span>
            <Select
              v-model="select.type"
              clearable
              placeholder="选择状态"
              style="width: 110px"
            >
              <Option v-for="item in types" :key="item.id" :value="item.id">{{
                  item.value
                }}</Option>
            </Select>
          </span>
          </div>

          <Button style="margin-left: 10px" type="primary" @click="$refs['addExpenseAccount'].type= 'add',$refs['addExpenseAccount'].show()"
          >新增</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>

    <addExpenseAccount :other_types="otherType" :departments="departments" ref="addExpenseAccount"></addExpenseAccount>
  </div>
</template>

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

import addExpenseAccount from '@/views/inOut/component/addExpenseAccount.vue'
export default {
  components: {
    addExpenseAccount
  },
  data() {
    return {
      otherType: [],
      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()
    },

    async getOtherType () {
      const res = await getparameter({
        number: 'other_type'
      })
      this.otherType = res.detail
    }
  },
  computed: {},
  created() {
    this.getDepartment()
    this.getOtherType()
  },
  beforeRouteEnter (to, from , next) {
    console.log(to.path.split('_')[1])
    next()
  }
}
</script>

<style scoped lang="scss">
.select-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  & > div {
    margin: 4px;
  }
}
</style>