cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import {
  propertyFeeList,
  propertyFeeDelete,
  propertyFeeSave,
  propertyFeeShift,
  propertyFeeSure,
} from "@/api/fee";
import { parseTime } from "@/utils/tool";
import Pagination from "@/components/Pagination/index.vue";
import { statusData, payData, payStatus } from "./config";
import { ElMessageBox, ElMessage } from "element-plus";
import type { ElTable } from "element-plus";
interface Form {
  page: number;
  pageSize: number;
  communityId: number;
  building: number;
  unit: number;
  payStatus: number;
  payment: number;
  sureStatus: number;
  beginTime: string;
  endTime: string;
  endMonth: string;
}
interface Params {
  total: number;
  query: Form;
}
interface Data {
  loading: boolean;
  list: any[] | null;
  params: Params;
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
let instance: ComponentInternalInstance | null = getCurrentInstance();
let multipleSelection = ref<any[]>([]);
const value1 = ref([]);
const value2 = ref([]);
let form = reactive({
  data: {},
  loading: false,
  visible: false,
});
let data = reactive({
  list: [],
  loading: false,
  params: {
    total: 0,
    query: {
      page: 1,
      pageSize: 10,
      communityId: null,
      building: null,
      unit: null,
      payStatus: null,
      payment: null,
      sureStatus: null,
      beginTime: null,
      endTime: null,
      endMonth: null,
    },
  },
});
/**
 * 表单验证规则
 */
const rules = reactive({});
/**
 * 表格选中响应
 * @param {array} data 选中的一条数据
 */
const handleSelectionChange = (data: array) => {
  multipleSelection.value = data;
};
/**
 * 时间组件回调
 * @param {array} value [开始时间, 结束时间]
 */
const handleTimeChange = (value: array) => {
  data.params.query.beginTime = value ? value[0] : "";
  data.params.query.endTime = value ? value[1] : "";
  getList();
};
/**
 * 删除
 * @param {object} obj 要删除的数据对象
 */
const handleDelete = (obj: any) => {
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log("post delete");
      // try {
      //   let res = await propertyFeeDelete({
      //     ids: obj.id,
      //   });
      //   if (res?.data) {
      //     ElMessage({
      //       type: "success",
      //       message: "操作成功",
      //     });
      //     getList();
      //   } else {
      //     ElMessage({
      //       type: "error",
      //       message: "操作失败",
      //     });
      //   }
      // } catch (e) {
      //   console.log(e);
      // }
    })
    .catch(() => {
      console.log("取消");
    });
};
/**
 * 列表
 */
const getList = async () => {
  data.loading = true;
  try {
    const res = await propertyFeeList(data.params.query);
    data.list = res?.data?.data?.list;
    data.params.total = res?.data?.data?.total;
  } catch (e) {
    console.log(e);
  } finally {
    data.loading = false;
  }
};
/**
 * 查询条件重置
 */
const reset = () => {
  data.params.query = {};
  data.params.query.page = 1;
  data.params.query.pageSize = 10;
};
/**
 * 下载模板
 */
const download = () => {
  console.log("download");
};
/**
 * 导出文件
 */
const exportFile = () => {
  console.log("export");
};
/**
 * 导入文件
 */
const importFile = () => {
  console.log("import");
};
/**
 * 确认
 */
const sure = () => {
  console.log("sure");
  ElMessageBox.confirm(
    "是否确认将已选账单同步至用户端(确认后将无法修改)?",
    "确认，请仔细核对账单！ ",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then((res) => {
      console.log("goes api");
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 一键确认
 */
const sureAll = () => {
  console.log("sureall");
  ElMessageBox.confirm(
    "是否确认将银地家园1号楼2单元所有账单同步至用户端(确认后将无法修改)?",
    "一键确认，请仔细核对账单！ ",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then((res) => {
      console.log("goes api");
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 变更付费状态
 */
const shiftPayment = (obj: any) => {
  console.log("变更付费状态");
  ElMessageBox.confirm(
    "是否将银地家园1号楼2单元1-101账单撤回现金缴费?",
    "撤回现金缴费，请谨慎操作！ ",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then((res) => {
      console.log("goes api");
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 关闭表单蒙版
 */
const handleClose = () => {
  form.data = {};
};
/**
 * 编辑
 */
const edit = (obj: any) => {
  console.log("编辑");
  form.data = obj;
  form.visible = true;
};
/**
 * 表单取消
 */
const handleCancel = () => {
  form.visible = false;
};
/**
 * 表单提交
 */
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  form.loading = true;
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      console.log("ok post");
    } else {
      instance?.proxy?.$message.error("请检查表单格式");
      form.loading = false;
      return false;
    }
  });
};
onMounted(() => {
  getList();
});
</script>
<template>
  <div class="page-container">
    <h1>物业费管理</h1>
    <el-row style="padding-bottom: 20px">
      <el-form :inline="true" label-width="70px">
        <el-form-item label="小区">
          <el-select
            v-model="data.params.query.communityId"
            placeholder="请选择小区"
            @change="getList"
            clearable
          >
            <el-option label="测试小区" value="5290"></el-option>
            <!-- <el-option
              v-for="(item, index) in statusData"
              :label="item.label"
              :value="item.value"
            ></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="楼宇">
          <el-select
            v-model="data.params.query.building"
            placeholder="请选择楼宇"
            @change="getList"
            clearable
          >
            <el-option label="测试楼宇" value="5290"></el-option>
            <!-- <el-option
              v-for="(item, index) in statusData"
              :label="item.label"
              :value="item.value"
            ></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="单元">
          <el-select
            v-model="data.params.query.unit"
            placeholder="请选择单元"
            @change="getList"
            clearable
          >
            <el-option label="测试单元" value="5290"></el-option>
            <!-- <el-option
              v-for="(item, index) in statusData"
              :label="item.label"
              :value="item.value"
            ></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="缴费状态">
          <el-select
            v-model="data.params.query.payStatus"
            placeholder="请选择缴费状态"
            @change="getList"
            clearable
          >
            <el-option
              v-for="(item, index) in statusData"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费方式">
          <el-select
            v-model="data.params.query.payment"
            placeholder="请选择缴费方式"
            @change="getList"
            clearable
          >
            <el-option
              v-for="(item, index) in payData"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="确认状态">
          <el-select
            v-model="data.params.query.sureStatus"
            placeholder="请选择确认状态"
            @change="getList"
            clearable
          >
            <el-option
              v-for="(item, index) in payStatus"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间">
          <el-date-picker
            v-model="value2"
            type="month"
            placeholder="到期月份"
          />
        </el-form-item>
        <el-form-item label="缴费日期">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleTimeChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
          <el-button type="info" @click="reset">重置</el-button>
          <el-button type="primary" @click="download">下载模板</el-button>
          <el-button type="primary" @click="exportFile">导出</el-button>
          <el-button type="primary" @click="importFile">导入</el-button>
          <el-button type="success" @click="sure">确认</el-button>
          <el-button type="success" @click="sureAll"
            >一键确认(总计：327864￥)</el-button
          >
          <el-button
            type="danger"
            @click="
              handleDelete({ id: multipleSelection.map((i) => i.id).join(',') })
            "
            :disabled="!multipleSelection.length"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      :data="data.list"
      style="width: 100%"
      border
      v-loading="data.loading"
      align="center"
      element-loading-text="拼命加载中"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column
        prop="id"
        label="所属小区"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="楼宇名称"
        align="center"
      ></el-table-column>
      <el-table-column prop="id" label="单元" align="center"></el-table-column>
      <el-table-column
        prop="id"
        label="房间号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="房屋面积(㎡)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="费用周期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="待缴金额(￥)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="缴费状态"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="缴费日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="缴费方式"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="确认状态"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="缴费人"
        align="center"
      ></el-table-column>
      <el-table-column prop="id" label="操作" align="center">
        <template #default="scope">
          <el-button type="text" @click="shiftPayment(scope.row)"
            >撤回现金缴费</el-button
          >
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="data.params.total"
      v-model:currentPage="data.params.query.page"
      v-model:pageSize="data.params.query.pageSize"
      @pageChange="getList"
    ></Pagination>
    <el-dialog v-model="form.visible" title="编辑" @close="handleClose">
      <el-form
        :model="form.data"
        :inline="true"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
        class="card-form"
      >
        <el-form-item label="所属小区">
          <el-input v-model="form.data.neighborHoodName" disabled />
        </el-form-item>
        <el-form-item label="楼宇名称">
          <el-input v-model="form.data.buildingName" disabled />
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="form.data.roomName" disabled />
        </el-form-item>
        <el-form-item label="单元">
          <el-input v-model="form.data.unit" disabled />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="form.data.area" disabled>
            <template #append>㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="缴费状态">
          <el-select
            v-model="form.data.payStatus"
            placeholder="缴费状态"
            clearable
          >
            <el-option
              v-for="(item, index) in statusData"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用周期">
          <el-date-picker
            v-model="form.data.period"
            type="datetimerange"
            range-separator="至"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="待缴金额">
          <el-input v-model="form.data.price" placeholder="待缴金额">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="缴费日期">
          <el-input
            v-model="form.data.date"
            placeholder="缴费日期"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >保存</el-button
          >
          <el-button type="info" @click="handleCancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>