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 v-if="this.$route.path.split('_')[1] == 2">
            <span style="padding: 0 6px"> 报销类型 </span>
            <span>
              <Select
                v-model="select.type"
                clearable
                placeholder="选择报销类型"
                style="width: 130px"
              >
                <Option
                  v-for="item in [
                    {
                      value: '医药报销支出',
                      id: 1,
                    },
                    {
                      value: '出差报销支出',
                      id: 2,
                    },
                  ]"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.value }}</Option
                >
              </Select>
            </span>
          </div>

          <div v-if="$route.path.split('_')[1] == 3">
            <span style="padding: 0 6px"> 其他支出类型 </span>
            <span>
              <Select
                v-model="select.type"
                clearable
                placeholder="选择其他支出类型"
                style="width: 130px"
              >
                <Option
                  v-for="item in otherType"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.value }}</Option
                >
              </Select>
            </span>
          </div>

          <div>
            <span style="padding: 0 6px">
              {{ $route.path.split("_")[1] == 2 ? "报销金额" : "其他支出金额" }}
            </span>
            <span>
              <InputNumber
                style="width: 110px"
                placeholder="最低价"
                v-model="select.start_plan_price"
                :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_plan_price"
                :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();
        }
      "
    >
      <template #btns>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <Button
              class="slot-btns-item"
              size="small"
              type="primary"
              @click="
                $refs['paymentRegistration'].getContract(scope.row),
                  ($refs[
                    'paymentRegistration'
                  ].isShowPaymentRegistration = true)
              "
            >
              付款登记
            </Button>
            <template v-if="!scope.row.status === 2">
              <Poptip
                :transfer="true"
                confirm
                placement="bottom"
                title="确认要删除吗"
                @on-ok="() => destroy(scope.row.id)"
              >
                <i-button style="margin-left: 4px" ghost size="small" type="error"
                  >删除
                </i-button>
              </Poptip>
            </template>
            <Button
              style="margin-left: 4px"
              size="small"
              type="primary"
              @click="
                $refs['detailContract'].getDetail(scope.row.id),
                  ($refs['detailContract'].isShowDetail = true)
              "
            >
              查看
            </Button>
            <template v-if="scope.row.status != 2">
              <Button
                style="margin-left: 4px"
                size="small"
                type="primary"
                @click="
                  () => {
                    $refs['addExpenseAccount'].setType('editor');
                    $refs['addExpenseAccount'].setId(scope.row.id);
                    $refs['addExpenseAccount'].show();
                  }
                "
                >编辑
              </Button>
            </template>
          </template>
        </el-table-column>
      </template>
    </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>

    <detailContract ref="detailContract"></detailContract>
    <paymentRegistration ref="paymentRegistration" @refresh="getList"></paymentRegistration>
  </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";
import detailContract from '@/views/contract/components/detailContract.vue';
import paymentRegistration from '@/views/contract/components/paymentRegistration.vue'
export default {
  components: {
    addExpenseAccount,detailContract,paymentRegistration
  },
  data() {
    return {
      otherType: [],
      total: 0,
      select: {
        page: 1,
        page_size: 10,
        start_created_at: "",
        end_created_at: undefined,
        start_plan_price: "",
        end_plan_price: "",
        department_id: "",
        report_type: "",
        other_type: "",
        is_myself: "",
        outcome_type: "",
      },
      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: "from",
          label: "资金来源",
          width: 160,
        },
        {
          prop: "money",
          label:
            this.$route.path.split("_")[1] == 2
              ? "报销金额（元）"
              : "支出金额（元）",
          width: 140,
          align: "right",
          formatter: (cell, data, value) => {
            return Number(value)
              .toFixed(2)
              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
          }
        },
        {
          prop: "apply_money_total",
          label:
            this.$route.path.split("_")[1] == 2
              ? "实际报销金额（元）"
              : "实际支出金额（元）",
          width: 140,
          align: "right",
          formatter: (cell, data, value) => {
            return Number(value)
              .toFixed(2)
              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
          }
        },
        {
          prop: "fund_log_total",
          label: "已付金额",
          width: 140,
          align: "right",
          formatter: (cell, data, value) => {
            return Number(value)
              .toFixed(2)
              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
          },
        },
        {
          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.select.outcome_type = this.$route.path.split("_")[1];
    this.select.is_myself = this.$route.path.split("_")[2];
    this.getDepartment();
    this.getOtherType();
    this.getList();
  },
};
</script>

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

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