hjjc-workbench-web/src/views/finance/paymentRegistrationList.vue

<template>
  <div style="padding: 0 20px">
    <lx-header
      icon="md-apps"
      text="付款登记"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
    >
      <div slot="content"></div>
      <slot>
        <span style="padding: 0 6px; word-break: keep-all"> 业务科室 </span>
        <span>
          <el-select
            v-model="select.department_id"
            clearable
            placeholder="业务科室选择"
            size="small"
            style="width: 120px"
          >
          <el-option
            v-for="item in departments"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        </span>

        <span style="padding: 0 6px; word-break: keep-all">确认日期</span>
        <span>
          <DatePicker
            :value="[select.start_audit_date, select.end_audit_date]"
            placeholder="请选择日期"
            type="daterange"
            placement="bottom-start"
            style="width: 180px"
            @on-change="(e) => {
              if (e[0] && e[1]) {
                select.start_audit_date = $moment(e[0]).format('YYYY-MM-DD');
                select.end_audit_date = $moment(e[1]).format('YYYY-MM-DD');
              } else {
                select.start_audit_date = '';
                select.end_audit_date = '';
              }
            }"
          ></DatePicker>
        </span>

        <span style="padding: 0 6px; word-break: keep-all">创建日期</span>
        <span>
          <DatePicker
            :value="selectDate"
            placeholder="请选择日期"
            type="daterange"
            placement="bottom-start"
            style="width: 180px"
            @on-change="(e) => {
              if (e[0] && e[1]) {
                selectDate[0] = $moment(e[0]).format('YYYY-MM-DD');
                selectDate[1] = $moment(e[1]).format('YYYY-MM-DD');
              } else {
                selectDate[0] = '';
                selectDate[1] = '';
              }
            }"
          ></DatePicker>
        </span>

        <span style="padding: 0 6px; word-break: keep-all">关键字</span>
        <span>
          <Input
            v-model="keyword"
            placeholder="请输入关键字"
            style="width: 180px"
          ></Input>
        </span>

        <span style="padding: 0 6px; word-break: keep-all">预算计划</span>

        <span>
          <Input
            v-model="select.plan_name"
            clearable
            placeholder="请选择预算计划"
            @on-focus="showPlanForSearch"
            style="width: 200px"
            @on-clear="clearSelectForSearch"
          />
        </span>
        <span style="padding: 0 6px; word-break: keep-all"> 状态 </span>
        <Select
          v-model="status"
          clearable
          placeholder="请选择"
          style="width: 100px"
        >
          <Option
            v-for="item in [
              { label: '待审核', value: 0 },
              { label: '已审核', value: 1 },
            ]"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </Option>
        </Select>
        <Button type="primary" style="margin-left: 10px" ghost>重置</Button>
        <Button type="primary" style="margin-left: 10px" @click="doSearch()"
          >查询</Button
        >
        <Button type="primary" @click="toExport()" style="margin-left: 10px"
          >导出</Button
        >
      </slot>
    </lx-header>

    <!--  搜索使用 预算计划  -->
    <xy-dialog
      :is-show.sync="isShowPlanForSearch"
      title="预算计划"
      :width="720"
      @on-ok="planSelectForSearch"
    >
      <template>
        <div style="display: flex;align-items: center;">
          <DatePicker type="year" v-model="planSearch.year" style="margin-right: 6px;"></DatePicker>
          <Input
            v-model="planSearch.name"
            search
            enter-button="搜 索"
            placeholder="搜索预算计划.."
            @on-search="searchBudgets"
          />
        </div>
        <div
          style="
            margin: 10px 0;
            display: flex;
            align-items: center;
          "
        >
          <span>是否选择为父级</span>
          <el-switch v-model="isPlanSearchPid" style="padding: 0 4px;" active-text="是" inactive-text="否"></el-switch>
          <div>
            已选择：<span style="margin-right: 10px">{{
              select.plan_name
            }}</span>
          </div>
          <el-link style="margin-left: auto;" type="success" @click="clearSelectForSearch"
            >清空选择</el-link
          >
        </div>
        <xy-table
          highlight-current-row
          :list="plans"
          @rowClick="selectPlanForSearch"
          :show-index="false"
          :table-item="planTableSearch"
          :height="310"
          style="margin-top: 10px"
          ref="singlePlanTable"
        >
          <template v-slot:btns> </template>
        </xy-table>

        <div style="display: flex; justify-content: flex-end">
          <Page :total="planTotal" show-elevator @on-change="planPageChange" />
        </div>
        <el-tag type="warning">点击行进行选择</el-tag>
      </template>

      <template v-slot:footerContent>
        <Button type="primary" @click="confirmPlanForSearch">确定</Button>
      </template>
    </xy-dialog>

    <xy-table :list="list" :table-item="table">
      <template v-slot:btns>
        <el-table-column
          label="操作"
          fixed="right"
          width="160"
          header-align="center"
        >
          <template slot-scope="scope" v-if="scope.row.flow_status === 3">
            <template v-if="scope.row.status === 0">
              <Button
                size="small"
                type="primary"
                style="margin-left: 10px; margin-bottom: 4px"
                @click="
                  ($refs['examineRegistration'].isShow = true),
                    $refs['examineRegistration'].getRegistration(scope.row.id)
                "
                >审核确认</Button
              >
            </template>
            <template v-else>
              <Button
                size="small"
                type="error"
                ghost
                style="margin-left: 10px; margin-bottom: 4px"
                @click="cancelExamine(scope.row)"
                >审核撤销</Button
              >
            </template>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex; justify-content: flex-end">
      <Page
        :total="total"
        show-elevator
        @on-change="pageChange"
        show-sizer
        @on-page-size-change="pageSizeChange"
      />
    </div>

    <examineRegistration
      ref="examineRegistration"
      @refresh="getFundLogs"
    ></examineRegistration>
  </div>
</template>

<script>
import {
  getFundLog,
  delFundLog,
  editorFundLog,
} from "@/api/paymentRegistration/fundLog";
import { getToken } from "@/utils/auth";
import { parseTime } from "@/utils";
import { Message } from "element-ui";
import { getBudget } from "@/api/budget/budget";
import { getparameter } from "@/api/system/dictionary";
import examineRegistration from "./components/examineRegistration";
import { listdeptNoAuth } from '@/api/system/department'
export default {
  components: {
    examineRegistration,
  },
  data() {
    return {
      planSearchPid: "",
      isPlanSearchPid: false,
      departments: [],
      moneyWay: [],
      plan: [],
      planTableSearch: [
        {
          label: "父级",
          prop: "pid_info.name",
          width: 160
        },
        {
          label: "分类",
          prop: "type_detail.value",
          width: 120,
        },
        {
          label: "年份",
          prop: "year",
          align: "center",
          width: 90,
        },

        {
          label: "名称",
          prop: "name",
          width: 200,
          align: "left",
        },
        {
          label: "计划金额",
          prop: "money",
          align: "right",
          width: 160,
          formatter: (v1, v2, value) => {
            return `${(value && parseFloat(value) !== 0) ? value : v1.update_money }`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
          }
        },
      ],
      plans: [], //预算数据
      planSearch: {
        year: "",
        name: "",
        plan_department_id: "",
      },
      planTotal: 0,
      plansPageIndex: 1,
      isShowPlanForSearch: false,
      status: 0,
      keyword: "",
      select: {
        year: "",
        plan_id: "",
        plan_name: "",
        department_id: "",
        start_audit_date: "",
        end_audit_date: "",
      },
      selectDate: [],
      list: [],
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      table: [
        {
          label: "项目名称",
          minWidth: 300,
          prop: "contract.name",
          fixed: "left",
          align: "left",
        },
        {
          label: "付款申请金额(元)",
          prop: "apply_money",
          align: "right",
          width: 170,
          formatter: (v1, v2, value) => {
            return Number(value)
              .toFixed(2)
              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
          },
        },
        {
          label: "实际付款金额(元)",
          prop: "act_money",
          align: "right",
          width: 170,
          formatter: (v1, v2, value) => {
            return Number(value)
              .toFixed(2)
              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
          },
        },
        {
          label: "预算计划",
          width: 320,
          align: "left",
          customFn: (row) => {
            {
              if (row.act_plan_link.length > 0) {
                return row.act_plan_link.map((item) => {
                  return (
                    <div>
                      {" "}
                      [{item.plan.year}] {(item.plan && item.plan.pid_info) ? item.plan.pid_info.name: ''} - {item.plan.name} <br /> [使用金额]{" "}
                      {item.use_money}元{" "}
                    </div>
                  );
                });
              }
            }
          },
        },
        {
          label: "款项类型",
          prop: "type",
          width: 120,
        },
        {
          prop: "status",
          label: "状态",
          width: 100,
          formatter: (cell, data, value) => {
            if (value === 0) return "待审核";
            else return "已审核";
          },
        },
        {
          prop: 'flow_status',
          label: '流程状态',
          formatter: (cell, data, value) => {
            let map = new Map([
              [1,'待申请'],
              [2,'流转中'],
              [3,'已完成']
            ])
            return map.get(value)
          }
        },
        {
          label: "次数",
          prop: "pay_count",
          width: 95,
          formatter: (cell, data, value) => {
            return value + 1;
          },
        },
        {
          label: "最后一笔",
          prop: "is_end",
          width: 125,
          formatter: (cell, data, value) => {
            return value == 1 ? "是" : "否";
          },
        },
        {
          label: "经办人",
          minWidth: 120,
          prop: "admin.name",
          align: "center",
        },
        {
          label: "业务科室",
          minWidth: 140,
          prop: "department.name",
          align: "center",
        },
        {
          label: "备注",
          minWidth: 360,
          prop: "remark",
          align: "left",
        },
        {
          label: "创建信息",
          prop: "created_at",
          width: 160,
          formatter: (cell, data, value) => {
            return parseTime(new Date(value), "{y}-{m}-{d}");
          },
        },
      ],
    };
  },
  methods: {
    //获取科室
    async getDepartment() {
      this.departments = await listdeptNoAuth();
    },

    planPageChange(e) {
      this.plansPageIndex = e;
      this.getBudgets();
    },
    //获取资金渠道
    async getMoneyWay() {
      this.moneyWay = (
        await getparameter({
          number: "money_way",
        })
      ).detail;
    },
    clearSelectForSearch() {
      this.isPlanSearchPid = false;
      this.planSearchPid = "";
      this.select.plan_id = "";
      this.select.plan_name = "请选择预算计划";
    },
    //计划搜索
    searchBudgets() {
      this.plansPageIndex = 1;
      this.getBudgets();
    },
    doSearch() {
      this.pageIndex = 0;
      this.getFundLogs();
    },
    confirmPlanForSearch() {
      this.isShowPlanForSearch = false;
      this.getFundLogs();
    },

    //默认选择计划
    toggleSelection(plans, type) {
      if (plans) {
        this.plans
          .filter((plan) => {
            if (plans.includes(plan.id)) {
              plan.useMoney = this.plan[plans.indexOf(plan.id)].value.use_money;
              return true;
            }
          })
          .map((row) => {
            this.$refs.planTable.toggleRowSelection(row);
          });
      } else {
        this.$refs.planTable.clearSelection();
      }
    },
    //获取预算计划
    async getBudgets() {
      await getBudget({
        name: this.planSearch.name,
        page_size: 10,
        page: this.plansPageIndex,
        plan_department_id: this.planSearch.plan_department_id,
        top_pid: 1,
        year: this.planSearch.year ? this.$moment(this.planSearch.year).format("YYYY") : "",
      }).then((res) => {
        this.plans = res.list.data;

        this.planTotal = res.list.total;

        this.toggleSelection(
          this.plan.map((item) => {
            return item.value.plan_id;
          }),
          1
        );
      });
    },
    async showPlanForSearch() {
      this.isShowPlanForSearch = true;
      await this.getBudgets();
    },
    //选择计划 搜索
    selectPlanForSearch(sel) {
      console.log(sel);
      if (sel) {
        this.planSearchPid = sel.pid;
        this.select.plan_id = sel.id;
        this.select.plan_name = this.isPlanSearchPid ? "[" + sel.pid_info?.year + "]-" + sel.pid_info?.name :  "[" + sel.year + "]-" + sel.name;
      } else {
        this.planSearchPid = "";
        this.select.plan_id = "";
        this.select.plan_name = "";
      }
    },
    //确认计划选择搜索
    planSelectForSearch() {
      if (this.select.plan_id == "") {
        Message({
          type: "warning",
          message: "选择计划不能为空",
        });
        return;
      }
      this.isShowPlanForSearch = false;
    },
    pageSizeChange(e) {
      this.pageSize = e;
      this.pageIndex = 1;
      this.getFundLogs();
    },
    pageChange(e) {
      this.pageIndex = e;
      this.getFundLogs();
    },
    toExport() {
      this.is_export = 1;
      this.getFundLogs(true);
    },
    async getFundLogs(is_export) {
      let pidPlans = []
      if (this.isPlanSearchPid) {
        pidPlans = (await getBudget({
          pid: this.planSearchPid,
          page: 1,
          page_size: 999,
        })).list.data
      }
      await getFundLog({
        page_size: this.pageSize,
        page: this.pageIndex,
        keyword: this.keyword,
        start_date: this.selectDate[0],
        end_date: this.selectDate[1],
        status: this.status,
        act_plan_link_id: this.isPlanSearchPid ? pidPlans.map(i => i.id).toString() : this.select.plan_id,
        department_id: this.select.department_id,
        start_audit_date: this.select.start_audit_date,
        end_audit_date: this.select.end_audit_date,
        sort_name: "updated_at",
        sort_type: "desc",
      }).then((res) => {
        let tokens = getToken();
        if (is_export) {
          var url = "/api/admin/fund_log/index?token=" + tokens;
          if (this.selectDate) url += "&date=" + this.selectDate;
          if (this.keyword) url += "&keyword=" + this.keyword;
          if (typeof this.status != "undefined")
            url += "&status=" + this.status;
          if (this.select.plan_id)
            url += "&act_plan_link_id=" + this.select.plan_id;
          url += "&is_export=" + this.is_export;
          url = location.host + url;
          console.log(url);
          window.open("http://" + url, "_blank");
          this.select.is_export = 0;
          return;
        }
        this.list = res.data;
        this.total = res.total;
      });
    },

    deleteFundLog(row) {
      delFundLog({
        id: row.id,
      }).then((res) => {
        Message({
          type: "success",
          message: "操作成功",
        });
        this.getFundLogs();
      });
    },

    cancelExamine(row) {
      editorFundLog({
        id: row.id,
        contract_id: row.contract_id,
        status: 0,
      }).then((res) => {
        this.getFundLogs();
        Message({
          type: "success",
          message: "操作成功",
        });
      });
    },
  },
  mounted() {
    this.getMoneyWay();
    this.getFundLogs();
  },
  created() {
    this.getDepartment()
  }
};
</script>

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