vue-insagent-pc/src/views/FinancialManagement/ExpenseManagement/PaymentManagement.vue

<template>
  <!--布局容器-->
  <div class="container" style="width: 99%; margin-top: 0px">
    <!-- 顶部查询 -->
    <el-row class="top">
      <el-form
        v-model="pageRequest"
        size="small"
        label-width="95px"
        class="form"
      >
        <el-form-item label="开票类型" label-width="95px" prop="">
          <el-select
            v-model="pageRequest.teamOrUserFlag"
            placeholder="请选择开票类型"
          >
            <el-option label="纸质" value="1"></el-option>
            <el-option label="电子" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开票员" label-width="95px" prop="revenueOutlay">
          <el-input
            v-model="pageRequest.deptName"
            placeholder="请输入开票方"
            class=""
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="开票方" label-width="95px" prop="deptName">
          <el-input
            v-model="pageRequest.deptName"
            placeholder="请输入开票方"
            class=""
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="开票日期" label-width="95px" prop="applyTime">
          <el-date-picker
            v-model="pageRequest.date"
            type="date"
            placeholder="选择开票日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          ><el-button type="primary" size="small" @click="queryStaffInfo"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <el-button
      class="operation"
      type="primary"
      plain
      size="medium"
      @click="addPayment"
      >开票新增</el-button
    >
    <!-- 表格 -->
    <kt-common-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      :operationWidth="operationWidth"
      class="ktTable"
      permsEdit="sys:agent:view"
      ref="dataTable"
      :data="pageResult"
      :columns="columns"
      :showBatchDelete="false"
      :showOperation="true"
      editButtonName="编辑"
      @findPage="findPage"
      :isshowpagination="true"
      @handleEdit="handleDetail"
    ></kt-common-table>
    <!-- 新增编辑弹框 -->
    <el-dialog
      class="dialog detailtTable"
      :title="title"
      :close-on-click-modal="false"
      :before-close="resetForm"
      :visible.sync="detailDialog"
      width="60%"
    >
      <div class="dialog-body">
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="130px"
          size="small"
          class="frame"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="账户类别" prop="outerFlag">
                <el-select
                  v-model="formData.outerFlag"
                  placeholder="请选择账户类别"
                >
                  <el-option label="内部账户" value="0"></el-option>
                  <el-option label="外部账户" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户名" prop="accountName">
                <el-input
                  v-model="formData.accountName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="账户性质" prop="accountQuality">
                <el-select
                  v-model="formData.accountQuality"
                  placeholder="请选择账户性质"
                >
                  <!-- <el-option
                    v-for="item in dictionariesData"
                    :key="item.value + 'bb'"
                    :label="item.label"
                    :value="item.value"
                  ></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡号" prop="bankCardNum">
                <el-input
                  v-model="formData.bankCardNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="营业性质" prop="yyxz">
                <el-select v-model="formData.yyxz" placeholder="请选择营业性质">
                  <el-option label="一般纳税" value="0"></el-option>
                  <el-option label="小规模" value="1"></el-option>
                  <el-option label="个体户" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属地" prop="ssd">
                <el-input v-model="formData.ssd" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="法人" prop="fr">
                <el-input v-model="formData.fr" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成立日期" prop="clrq">
                <el-date-picker
                  v-model="formData.clrq"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开户行" prop="bank">
                <el-input v-model="formData.bank" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="formData.outerFlag == 0" :span="12">
              <el-form-item label="开户行名称" prop="bankName">
                <el-input
                  v-model="formData.bankName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="开户行号" prop="bankNum">
                <el-input
                  v-model="formData.bankNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书有效期" prop="certExpirationDate">
                <el-date-picker
                  v-model="formData.certExpirationDate"
                  size="small"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="setDateInterval($event)"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="结算卡" prop="clearingProfit">
                <el-input-number
                  v-model="formData.clearingProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单日转账笔数限制" prop="dayStrokeNum">
                <el-input-number
                  v-model="formData.dayStrokeNum"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="外部过账金额" prop="exteriorProfit">
                <el-input-number
                  v-model="formData.exteriorProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="财税公司利润" prop="fiscalProfit">
                <el-input-number
                  v-model="formData.fiscalProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="保险公司回款" prop="insuranceProfit">
                <el-input-number
                  v-model="formData.insuranceProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他利润" prop="otherProfit">
                <el-input-number
                  v-model="formData.otherProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="园区利润" prop="parkProfit">
                <el-input-number
                  v-model="formData.parkProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对私单日限额" prop="priDayLines">
                <el-input-number
                  v-model="formData.priDayLines"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="对私单笔限额" prop="priSingleLines">
                <el-input-number
                  v-model="formData.priSingleLines"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对私年额度" prop="priYearLines">
                <el-input-number
                  v-model="formData.priYearLines"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="对公单日限额" prop="pubDayLines">
                <el-input-number
                  v-model="formData.pubDayLines"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对公单笔限额" prop="pubSingleLines">
                <el-input-number
                  v-model="formData.pubSingleLines"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="formData.outerFlag == 0">
            <el-col :span="12">
              <el-form-item label="对公年额度" prop="pubYearLines">
                <el-input-number
                  v-model="formData.pubYearLines"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="天勤利润" prop="tianqinProfit">
                <el-input-number
                  v-model="formData.tianqinProfit"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单日转账笔数剩余" prop="dayStrokeNumExcess">
                <el-input-number
                  v-model="formData.dayStrokeNumExcess"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对私单日限额剩余" prop="priDayLinesExcess">
                <el-input-number
                  v-model="formData.priDayLinesExcess"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对私年剩余额度" prop="priYearExcess">
                <el-input-number
                  v-model="formData.priYearExcess"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对公单日限额剩余" prop="pubDayLinesExcess">
                <el-input-number
                  v-model="formData.pubDayLinesExcess"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对公年剩余额度" prop="pubYearExcess">
                <el-input-number
                  v-model="formData.pubYearExcess"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支出金额" prop="spend">
                <el-input-number
                  v-model="formData.spend"
                  :min="0"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small">取 消</el-button>
        <el-button @click="submitInfo" type="primary" size="small">{{
          modelText
        }}</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog
      class="dialog detailtTable"
      :title="title"
      :close-on-click-modal="false"
      :before-close="resetForm"
      :visible.sync="detailDialog"
      width="60%"
    >
      <div class="dialog-body">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
          :data="detailData"
          :stripe="true"
          style="width: 100%"
          row-key=""
          border
          default-expand-all
          :header-cell-style="{
            background: '#F2F7FC',
            fontWeight: '900',
            color: '#606266',
          }"
        >
          <el-table-column type="index" label="序号" align="center" width="50">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in detailColumns"
            :key="index"
            :min-width="item.minWidth"
            :prop="item.prop"
            align="center"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="bottomFixed" style="padding-bottom: 50px" ref="bottomFixed">
          <el-pagination
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest"
            :current-page="detailParams.pageNo"
            :page-size="detailParams.pageSize"
            :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
            :total="detailParams.totalSize"
            style="float: left; margin-left: 20px"
          >
          </el-pagination>
        </div>
        <el-button @click="resetForm" size="small">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
        <script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
import CommonUtil from "@/utils/comutil.js";

export default {
  name: "InvoiceInformation",
  components: { KtCommonTable, KtButton },
  created() {},
  mounted() {},
  data() {
    return {
      title: "开票新增",
      loading: true,
      detailDialog: false,
      operationWidth: 100, //操作列宽度
      queryFrom: {
        //查询条件
      },
      pageResult: {}, //表格参数
      pageRequest: {
        // 列表查询条件
        pageNo: 1,
        pageSize: 10,
        teamOrUserFlag: "1", //团队还是人员 1是团队 2是人员
        deptName: "", //部门名称
        userName: "", //人员名称
        date: [], //日期区间数组
        createTimeStart: "", //日期开始时间
        createTimeEnd: "", //日期结束时间
      },
      columns: [
        { prop: "deptName", label: "开票员", type: "text" },
        { prop: "quoteNum", label: "开票科目", type: "text" },
        { prop: "submitNum", label: "开票方", type: "text" },
        { prop: "hasInsuredNum", label: "对方单位名称", type: "text" },
        { prop: "syPremiumSum", label: "发票号码", type: "text" },
        { prop: "taxaMountSum", label: "发票数", type: "text" },
        { prop: "jqPremiumSum", label: "开票日期", type: "text" },
        {
          prop: "totalSumpremium",
          label: "不含税金额",
          type: "text",
        },
        {
          prop: "sl",
          label: "税率",
          type: "text",
        },
        {
          prop: "se",
          label: "税额",
          type: "text",
        },
        {
          prop: "kpje",
          label: "开票金额",
          type: "text",
        },
        {
          prop: "fplx",
          label: "发票类型",
          type: "text",
        },
        {
          prop: "jzrq",
          label: "进账日期",
          type: "text",
        },
        {
          prop: "jzje",
          label: "进账金额",
          type: "text",
        },
        {
          prop: "wjzje",
          label: "未进账金额",
          type: "text",
        },
      ],
      detailData: [],
      detailParams: {
        pageNo: 1,
        pageSize: 10,
        teamOrUserFlag: "2",
      },
      detailColumns: [
        {
          prop: "userName",
          label: "成员名称",
          type: "text",
          minWidth: "100",
        },
        {
          prop: "quoteNum",
          label: "报价次数",
          type: "text",
          minWidth: "100",
          minWidth: "100",
        },
        {
          prop: "submitNum",
          label: "提交核保次数",
          type: "text",
          minWidth: "100",
        },
        {
          prop: "hasInsuredNum",
          label: "已承保数量",
          type: "text",
          minWidth: "100",
        },
        {
          prop: "syPremiumSum",
          label: "商业保费",
          type: "text",
          minWidth: "100",
        },
        { prop: "taxaMountSum", label: "车船税", type: "text" },
        {
          prop: "jqPremiumSum",
          label: "交强险费用",
          type: "text",
          minWidth: "100",
        },
        {
          prop: "totalSumpremium",
          label: "总承保保费总数",
          type: "text",
          minWidth: "120",
        },
      ],
      modelText: "提 交",
      formData: {
        outerFlag: "0", //账户类别
        accountName: "", //户名
        accountQuality: "", //账户性质
        bankCardNum: "", //银行卡号
        bank: "", //开户行
        bankName: "", //开户行名称
        bankNum: "", //开户行号
        certExpirationDate: "", //证书有效期
        clearingProfit: "", //结算卡
        dayStrokeNum: "", //单日转账笔数限制
        exteriorProfit: "", //外部过账金额
        fiscalProfit: "", //财税公司利润
        insuranceProfit: "", //保险公司回款
        otherProfit: "", //其他利润
        parkProfit: "", //园区利润
        priDayLines: "", //对私单日限额
        priSingleLines: "", //对私单笔限额
        priYearExcess: "", //对私年剩余额度
        priYearLines: "", //对私年额度
        pubDayLines: "", //对公单日限额
        pubSingleLines: "", //对公单笔限额
        pubYearExcess: "", //对公年剩余额度
        pubYearLines: "", //对公年额度
        tianqinProfit: "", //天勤利润
        dayStrokeNumExcess: "", //单日转账笔数剩余
        priDayLinesExcess: "", //对私单日限额剩余
        pubDayLinesExcess: "", //对公单日限额剩余
        spend: "", //	支出金额
        yyxz: "", //营业性质
        ssd: "", //所属地
        fr: "", //法人
        clrq: "", //成立日期
      },
      rules:{
        //内部表单规则
        outerFlag: [
          { required: true, message: "请选择账户类别", trigger: "change" },
        ],
        accountName: [
          { required: true, message: "户名不能为空", trigger: "blur" },
        ],
        accountQuality: [
          { required: true, message: "请选择账户性质", trigger: "change" },
        ],
        bankCardNum: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" },
        ],
        bank: [{ required: true, message: "开户行不能为空", trigger: "blur" }],
        bankName: [
          { required: true, message: "开户行名称不能为空", trigger: "blur" },
        ],
        bankNum: [
          { required: true, message: "开户行号不能为空", trigger: "blur" },
        ],
        // clearingProfit: [
        //   { required: true, message: "结算卡不能为空", trigger: "blur" },
        // ],
        certExpirationDate: [
          {
            required: true,
            message: "请选择证书有效期",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //新增开票
    addPayment() {
      this.detailDialog = true;
    },
    //新增编辑开票信息
    submitInfo() {
      console.log(123);
    },
    //选择时间区间
    dateChange(e) {
      if (e == null) {
        this.pageRequest.createTimeStart = "";
        this.pageRequest.createTimeEnd = "";
      } else {
        this.pageRequest.createTimeStart = e[0];
        this.pageRequest.createTimeEnd = e[1];
      }
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.detailParams.pageNo = pageNum;
      this.getDetailData();
    },
    // 每页条数发生改变
    handleSizeChange(pageSize) {
      this.detailParams.pageSize = pageSize;
      this.getDetailData();
    },
    //取消隐藏弹框
    resetForm() {
      this.detailDialog = false;
      this.detailParams.pageNo = 1;
      this.detailParams.pageSize = 10;
    },
    //编辑按钮
    handleDetail(index) {
      let row = index.row;
      this.detailParams.deptId = row.deptId;
      this.detailParams.deptName = row.deptName;
      this.getDetailData();
      this.detailDialog = true;
    },
    // 详情接口
    getDetailData() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.detailParams));
      this.$api.user.quTeamNum(obj).then((res) => {
        if (res.code == 200) {
          this.detailData = res.data.records;
          this.detailParams.pageNo = res.data.current;
          this.detailParams.pageSize = res.data.size;
          this.detailParams.totalPages = res.data.pages;
          this.detailParams.totalSize = res.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获取页面数据
    findPage(data) {
      this.loading = true;
      if (data && data.pageRequest) {
        this.pageRequest.pageNo = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.$api.user
        .quTeamNum(this.pageRequest)
        .then((res) => {
          if (res.code == 200) {
            this.pageResult = {
              content: res.data.records,
              pageNum: res.data.current,
              pageSize: res.data.size,
              totalPages: res.data.pages,
              totalSize: res.data.total,
            };
            this.loading = false;
          } else {
            this.$message.error(res.msg);
          }
        })
        .then(data != null ? data.callback : "");
    },
    // 查询
    queryStaffInfo() {
      this.pageRequest.pageNo = 1;
      this.pageRequest.pageSize = 10;
      this.findPage();
    },
  },
};
</script>
        
  <style scoped>
.operation {
  margin-left: 14px !important;
  margin-top: 15px !important ;
}
.form {
  display: flex;
  margin-top: 14px;
  align-items: center;
  margin-left: -12px;
  margin-bottom: 20px;
}
.el-pagination {
  font-weight: normal;
}
.el-card__body {
  padding: 12px !important;
}
.footer .footerdiv {
  display: flex;
  align-items: center;
}
.container .el-form-item {
  margin-bottom: -14px !important;
}
.form .el-form-item__label {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.ktTable {
  margin-top: 20px;
}
.el-row {
  margin-top: 18px;
}
.top {
  margin-top: 0px;
}

.el-date-editor--daterange.el-input__inner {
  width: 300px;
}
/deep/ .el-select--small {
  width: 100%;
}
.frame {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/deep/ .el-dialog__body {
  height: 550px;
  overflow-y: auto;
}
.addremove-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  margin-top: 10px;
}
.addremove-box > i {
  cursor: pointer;
}
.frame >>> .el-date-editor {
  width: 100%;
}
.detailtTable >>> .bottomFixed {
  position: relative !important;
}
.detailtTable >>> .el-table__body-wrapper {
  overflow-y: auto;
  height: 500px;
}
.detailtTable >>> .el-dialog {
  margin-top: 10vh !important;
}
</style>