hjjc-workbench-web/src/views/inOut/incomeRegistration.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['addIncomeRegistration'].setType('add'),
                $refs['addIncomeRegistration'].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
      :list="list"
      :table-item="table"
      @delete="(row) => destroy(row.id)"
      @editor="
        (row) => {
          $refs['addIncomeRegistration'].setId(row.id);
          $refs['addIncomeRegistration'].setType('editor');
          $refs['addIncomeRegistration'].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>

    <addIncomeRegistration
      :type_ids="incomeType"
      :way_ids="way"
      ref="addIncomeRegistration"
      @refresh="getList"
    ></addIncomeRegistration>
  </div>
</template>

<script>
import { getparameter } from "@/api/system/dictionary";
import { index, destroy } from "@/api/income";
import { listdeptNoAuth } from "@/api/system/department";

import addIncomeRegistration from "@/views/inOut/component/addIncomeRegistration.vue";
export default {
  components: {
    addIncomeRegistration,
  },
  data() {
    return {
      way: [],
      incomeType: [],
      total: 0,
      select: {
        page: 1,
        page_size: 10,
      },
      types: [],
      departments: [],

      list: [],
      table: [
        {
          prop: "name",
          label: "收入项目",
          width: 180,
          fixed: "left",
        },
        {
          prop: "type.value",
          label: "收入类型",
          width: 160,
        },
        {
          prop: "from",
          label: "收入来源",
          width: 160,
        },
        {
          prop: "way.value",
          label: "收入方式",
          width: 160,
        },
        {
          prop: "money",
          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 getWay() {
      const res = await getparameter({
        number: "income_way",
      });
      this.way = res.detail;
    },

    async getIncomeType() {
      const res = await getparameter({
        number: "income_type",
      });
      this.incomeType = res.detail;
    },

    async getDepartment() {
      this.departments = await listdeptNoAuth();
    },
    async getList() {
      const res = await index(this.select);
      this.list = res.list.data;
      this.total = res.list.total;
    },
    destroy(id) {
      destroy({
        id,
      }).then((_) => {
        this.getList();
      });
    },
  },
  computed: {},
  created() {
    this.getWay();
    this.getIncomeType();
    this.getDepartment();
    this.getList();
  },
  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>