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"
    >
      <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="getList"
          >查询</Button
          >
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="
              init
            "
          >重置
          </Button>
        </div>
      </slot>
    </lx-header>

    <xy-table row-key="id"
              :list="list"
              :table-item="table"
              @delete="row => destroy(row.id)"
              @editor="row => {
                $refs['addExpenseAccount'].setType('editor');
                $refs['addExpenseAccount'].setId(row.id);
                $refs['addExpenseAccount'].show();
              }"></xy-table>

    <div style="display: flex;justify-content: flex-end;padding: 10px 0;">
      <Page :total="total"
            @on-change="e => {
              select.page = e;
              getList()
            }"
            show-elevator
            show-sizer
            @on-page-size-change="e => {
              select.page_size = e;
              select.page = 1;
              getList();
            }" />
    </div>

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

<script>
import { getContract ,delContract } from '@/api/contract/contract'
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: {
        page: 1,
        page_size: 10
      },
      types: [],
      departments: [],

      list: [],
      table: [
        {
          prop: 'name',
          label: '项目名称',
          width: 190,
          fixed: 'left'
        },
        {
          label: this.$route.path.split('_')[1] == 2 ? '报销类型' : '支出类型',
          width: 160,
          customFn:row => {
            let map = new Map([
              [1,'医药报销支出'],
              [2,'出差报销支出']
            ])
            return this.$route.path.split('_')[1] == 2 ? (
              <span>{ map.get(row.report_type) }</span>
            ) : (
              <span>{ row.other_type?.value }</span>
            )
          }
        },
        {
          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: {
    init() {
      for (let key in this.select) {
        if (this.select[key] instanceof Array) {
          this.select[key] = [];
        } else {
          this.select[key] = "";
        }
      }

      this.select.page = 1
      this.select.page_size = 10
    },

    async getList () {
      const res = await getContract(this.select)
      this.list = res.list.data
      this.total = res.list.total
    },

    async getDepartment() {
      this.departments = await listdeptNoAuth()
    },

    async getOtherType () {
      const res = await getparameter({
        number: 'other_type'
      })
      this.otherType = res.detail
    },

    destroy (id) {
      delContract({
        id
      }).then(res => {
        this.getList()
      })
    }
  },
  computed: {
    typeText () {
      return function (type) {
        if (type == 2) {
          return '报销'
        }
        if (type == 3) {
          return '其他支出'
        }
      }
    }
  },
  created() {
    this.getDepartment()
    this.getOtherType()
    this.getList()
  },
  beforeRouteEnter (to, from , next) {
    next()
  }
}
</script>

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

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