缴费

src/api/payment/chargeStandardBind/index.js

@@ -1,10 +1,24 @@
 import httpService from "@/request"
 
-// 活动列表
-export function activityList(params) {
+// 收费标准列表
+export function bindList(params) {
 	return httpService({
-		url: `/user/activity/list`,
-		method: 'get',
-		params: params,
+		url: `/user/chargesBind/list`,
+		method: 'post',
+		data: params,
+	})
+}
+export function bind(params) {
+	return httpService({
+		url: `/user/chargesBind/bind`,
+		method: 'post',
+		data: params,
+	})
+}
+export function unbind(params) {
+	return httpService({
+		url: `/user/chargesBind/unbind`,
+		method: 'post',
+		data: params,
 	})
 }

src/api/payment/chargeStandardManage/index.js

@@ -7,4 +7,32 @@ export function chargesList(params) {
 		method: 'get',
 		params: params,
 	})
+}
+export function chargesInfo(params) {
+	return httpService({
+		url: `/user/charges/findById`,
+		method: 'get',
+		params: params,
+	})
+}
+export function chargesInsert(params) {
+	return httpService({
+		url: `/user/charges/insert`,
+		method: 'post',
+		data: params,
+	})
+}
+export function chargesUpdate(params) {
+	return httpService({
+		url: `/user/charges/update`,
+		method: 'post',
+		data: params,
+	})
+}
+export function chargesDel(params) {
+	return httpService({
+		url: `/user/charges/delete`,
+		method: 'post',
+		data: params,
+	})
 }

src/api/payment/prepayManage/index.js

@@ -0,0 +1,24 @@
+import httpService from "@/request"
+
+// 预缴列表
+export function prepaymentList(params) {
+	return httpService({
+		url: `/user/prepayment/list`,
+		method: 'get',
+		params: params,
+	})
+}
+export function rechargeList(params) {
+	return httpService({
+		url: `/user/prepayment/rechargeList`,
+		method: 'get',
+		params: params,
+	})
+}
+export function recharge(params) {
+	return httpService({
+		url: `/user/prepayment/recharge`,
+		method: 'post',
+		data: params,
+	})
+}

src/views/Payment/ChargeStandardBind/depend/config.js

@@ -1,19 +1,19 @@
 export const columns = [
-	{
-		title: "收费标准名称",
-		dataIndex: "name",
-	},
 	{
 		title: "计费方式",
-		dataIndex: "feeType",
+		dataIndex: "billingType",
 	},
 	{
 		title: "计量方式",
-		dataIndex: "Type",
+		dataIndex: "calculateType",
 	},
 	{
 		title: "单价",
-		dataIndex: "price",
+		dataIndex: "calculateUnit",
+	},
+	{
+		title: "备注",
+		dataIndex: "remarks",
 	},
 	{
 		title: "操作",
@@ -23,12 +23,4 @@ export const columns = [
 		fixed: "right",
 		scopedSlots: { customRender: "action" },
 	},
-]
-export const pagination = {
-	current: 1,
-	total: 0,
-	pageSize: 10,
-	showTotal: (total) => `共 ${total} 条`,
-	showSizeChanger: true,
-	showQuickJumper: true,
-}
+]

src/views/Payment/ChargeStandardBind/depend/table.js

@@ -0,0 +1,38 @@
+export const formItem = [
+	{
+		type: 'input',
+		label:'费用名称',
+		prop:'name',
+		placeholder:'请输入'
+	},
+]
+export const tableColumns = [
+	{
+		title: "费用名称",
+		dataIndex: "name",
+	},
+	{
+		title: "计费方式",
+		dataIndex: "billingType",
+	},
+	{
+		title: "计量方式",
+		dataIndex: "calculateType",
+	},
+	{
+		title: "单价",
+		dataIndex: "calculateUnit",
+	},
+	{
+		title: "备注",
+		dataIndex: "remarks",
+	},
+]
+export const pagination = {
+	current: 1,
+	total: 0,
+	pageSize: 10,
+	showTotal: (total) => `共 ${total} 条`,
+	showSizeChanger: true,
+	showQuickJumper: true,
+}

src/views/Payment/ChargeStandardBind/index.vue

@@ -11,6 +11,7 @@
           :selected-keys="selectedKeys"
           :tree-data="treeData"
           @expand="onExpand"
+          @check="onCheck"
           @select="onSelect"
           :replaceFields="{
             children: 'childList',
@@ -23,14 +24,12 @@
       <a-divider type="vertical" style="height: 100vh"></a-divider>
       <div class="table">
         <div class="cardTitle">已绑定收费标准</div>
-        <a-button class="add-btn" style="margin: 10px" 
+        <a-button class="add-btn" style="margin: 10px" @click="addBind"
           >新增绑定</a-button
         >
         <a-table
           :columns="columns"
           :data-source="tableData"
-          :pagination="pagination"
-          @change="handleTableChange"
           :row-selection="{
             selectedRowKeys: selectedRowKeys,
             onChange: selectionChoosed,
@@ -41,26 +40,16 @@
             }
           "
         >
-          <span slot="action" slot-scope="">
+          <span slot="action" slot-scope="scope,row">
             <a-space>
-              <a>详情</a>
-              <a>解绑</a>
+              <a @click="batchUnBind([row.id])">解绑</a>
             </a-space>
           </span>
-          <span slot="imgpic" slot-scope="text, row">
-            <img
-              v-if="row.imgUrls.length > 0"
-              :src="$ImgUrl(row.imgUrls[0].url)"
-              class="table-img"
-              alt=""
-            />
-            <span v-else>无图片</span>
-          </span>
         </a-table>
         <div class="action">
           <a-dropdown :disabled="!hasSelected">
             <a-menu slot="overlay" @click="handleMenuClick">
-              <a-menu-item key="del"> 批量删除 </a-menu-item>
+              <a-menu-item key="batchUnBind"> 批量解绑 </a-menu-item>
             </a-menu>
             <a-button> 批量操作 <a-icon type="down" /> </a-button>
           </a-dropdown>
@@ -72,43 +61,159 @@
         </div>
       </div>
     </div>
+    <a-drawer
+      title="绑定房屋收费标准"
+      :width="720"
+      :visible="drawer.show"
+      :body-style="{ paddingBottom: '80px' }"
+      @close="onClose"
+    >
+      <div class="drawer-content">
+        <searchForm
+          :formItem="formItem"
+          @getSearch="getData($event)"
+        ></searchForm>
+        <a-table
+          :columns="tableColumns"
+          :data-source="chargeData"
+          :pagination="pagination"
+          @change="handleTableChange"
+          :row-selection="{
+            selectedRowKeys: chargesIds,
+            onChange: chargeChoosed,
+          }"
+          :row-key="
+            (record, index) => {
+              return record.id;
+            }
+          "
+        >
+        </a-table>
+      </div>
+      <div class="drawer-footer">
+        <a-button :style="{ marginRight: '8px' }" @click="onClose">
+          关闭
+        </a-button>
+        <a-button type="primary" @click="submit"> 提交 </a-button>
+      </div>
+    </a-drawer>
   </div>
 </template>
 
 <script>
 import { estate } from "@/api/basic/estate";
-import { columns, pagination } from "./depend/config";
+import { bindList, bind, unbind } from "@/api/payment/chargeStandardBind";
+import { columns } from "./depend/config";
+import { formItem, tableColumns, pagination } from "./depend/table";
+import { chargesList } from "@/api/payment/chargeStandardManage";
+function deleteIds(lists) {
+	// 楼栋id和房屋id有重复，导致数形控件选择不可用，把除房屋id外的全改为undefined
+	lists.forEach((list) => {
+		if (list.childList) {
+			list.id = undefined;
+			deleteIds(list.childList);
+		} else {
+			return;
+		}
+	});
+}
 export default {
 	data() {
 		return {
 			columns,
+			formItem,
+			tableColumns,
 			pagination,
+			drawer: {
+				show: false,
+			},
+			estateIds: [],
 			selectedRowKeys: [],
 			tableData: [],
+			chargeData: [],
+			searchForm: {
+				name: undefined,
+			},
 			expandedKeys: [],
 			autoExpandParent: true,
 			checkedKeys: [],
 			selectedKeys: [],
+			chargesIds: [],
 			treeData: [],
 		};
 	},
 	mounted() {
 		this.getEstate();
+		this.getData();
 	},
 	methods: {
 		async getEstate() {
 			let res = await estate();
 			this.treeData = res.data;
+			deleteIds(this.treeData);
 		},
-		del(ids) {
+		async getData(data) {
+			if (data !== undefined) {
+				console.log(data);
+				this.searchForm = data;
+				console.log(this.searchForm);
+			}
+			let res = await chargesList({
+				pageNum: this.pagination.current,
+				size: this.pagination.pageSize,
+				...this.searchForm,
+			});
+			this.chargeData = res.data.rows;
+			this.pagination.total = res.data.total;
+			this.selectedRowKeys = [];
+		},
+		addBind() {
+			if (this.estateIds.length === 0) {
+				this.$message.error("请选择房屋");
+			} else {
+				this.drawer.show = true;
+			}
+		},
+		handleTableChange(pagination) {
+			const pager = { ...this.pagination };
+			pager.current = pagination.current;
+			pager.pageSize = pagination.pageSize;
+			this.pagination = pager;
+			this.getData();
+		},
+		onClose() {
+			this.drawer.show = false;
+			this.selectedRowKeys = []
+		},
+		async submit() {
+			if (this.chargesIds.length === 0) {
+				this.$message.error("请选择收费标准");
+			} else {
+				let res = await bind({
+					estateIds: this.estateIds,
+					chargesIds: this.chargesIds,
+				});
+				if (res.code === 200) {
+					this.$message.success(res.msg);
+					this.onClose();
+					this.onCheck(this.estateIds);
+				} else {
+					this.$message.error(res.msg);
+				}
+			}
+		},
+		batchUnBind(ids) {
 			this.$confirm({
 				title: "是否解绑",
-				icon: "delete",
+				icon: "rollback",
 				onOk: async () => {
-					let res = await cateDel({ ids: ids });
+					let res = await unbind({
+						chargesIds: ids,
+						estateIds: this.estateIds,
+					});
 					if (res.code === 200) {
 						this.$message.success(res.msg);
-						this.getData();
+						this.onCheck(this.estateIds);
 					} else {
 						this.$message.error(res.msg);
 					}
@@ -118,13 +223,8 @@ export default {
 		selectionChoosed(data) {
 			this.selectedRowKeys = data;
 		},
-		handleTableChange(pagination) {
-			console.log(pagination);
-			const pager = { ...this.pagination };
-			pager.current = pagination.current;
-			pager.pageSize = pagination.pageSize;
-			this.pagination = pager;
-			this.getData();
+		chargeChoosed(data) {
+			this.chargesIds = data;
 		},
 		// 树操作
 		onExpand(expandedKeys) {
@@ -133,33 +233,38 @@ export default {
 		},
 		handleMenuClick(data) {
 			console.log(data);
-			if (data.key === "del") {
-				this.del(this.selectedRowKeys);
+			if (data.key === "batchUnBind") {
+				this.batchUnBind(this.selectedRowKeys);
 			}
 		},
-		async onSelect(selectedKeys) {
+		onSelect(selectedKeys) {
 			this.selectedKeys = selectedKeys;
 			console.log(selectedKeys);
 		},
+		onCheck(data) {
+			let ids = [];
+			for (let id of data) {
+				if (typeof id == "number") {
+					ids.push(id);
+				}
+			}
+			this.estateIds = ids;
+			if (ids.length > 0) {
+				bindList({ estateIds: ids }).then((res) => {
+					this.tableData = res.data;
+				});
+			}
+		},
 	},
 	computed: {
 		hasSelected() {
 			return this.selectedRowKeys.length > 0;
 		},
 	},
-	watch: {
-		checkedKeys(val){
-			console.log(val);
-		}
-	}
 };
 </script>
 
 <style lang="less" scoped>
-.table-img {
-  width: 40px;
-  height: 40px;
-}
 .flexbox {
   display: flex;
   justify-content: space-around;

src/views/Payment/ChargeStandardManage/depend/config.js

@@ -13,19 +13,19 @@ export const columns = [
 	},
 	{
 		title: "计费方式",
-		dataIndex: "feetype",
+		dataIndex: "billingType",
 	},
 	{
 		title: "计量方式",
-		dataIndex: "type",
+		dataIndex: "calculateType",
 	},
 	{
 		title: "单价",
-		dataIndex: "price",
+		dataIndex: "calculateUnit",
 	},
 	{
-		title: "单位",
-		dataIndex: "unit",
+		title: "备注",
+		dataIndex: "remarks",
 	},
 	{
 		title: "操作",

src/views/Payment/ChargeStandardManage/depend/form.js

@@ -1,7 +1,231 @@
 export const form = {
-	id:null,
-	brandName: undefined,
-}
+	id: null,
+	modelType: undefined,
+	name: undefined,
+	meterChargesType: undefined,
+	billingType: undefined,
+	calculateType: undefined,
+	isTieredBilling: undefined,
+	fileStandard: undefined,
+	tieredBillingDTOList: [],
+	calculateUnit: undefined,
+	billingAccuracy: undefined,
+	choiceType: undefined,
+	isCollectLiquidatedDamages: undefined,
+	paymentTerm: undefined,
+	chargeRate: undefined,
+	chargeMax: undefined,
+	remarks: undefined,
+};
 export const rules = {
-	brandName:[{required:true,message:'请输入品牌名',trigger:'blur'}],
-}
+	modelType: [
+		{
+			required: true,
+			message: "请选择类型",
+			trigger: "change",
+		},
+	],
+	name: [
+		{
+			required: true,
+			message: "请输入费用名",
+			trigger: "blur",
+		},
+	],
+	meterChargesType: [
+		{
+			required: true,
+			message: "请选择类型",
+			trigger: "change",
+		},
+	],
+	billingType: [
+		{
+			required: true,
+			message: "请选择类型",
+			trigger: "change",
+		},
+	],
+	isTieredBilling: [
+		{
+			required: true,
+			message: "请选择",
+			trigger: "change",
+		},
+	],
+	calculateUnit: [
+		{
+			required: true,
+			message: "请输入单价",
+			trigger: "blur",
+		},
+	],
+	billingAccuracy: [
+		{
+			required: true,
+			message: "请选择计费精度",
+			trigger: "change",
+		},
+	],
+	choiceType: [
+		{
+			required: true,
+			message: "请选择",
+			trigger: "change",
+		},
+	],
+	isCollectLiquidatedDamages: [
+		{
+			required: true,
+			message: "请选择",
+			trigger: "change",
+		},
+	],
+	paymentTerm: [
+		{
+			required: true,
+			message: "请输入",
+			trigger: "blur",
+		},
+	],
+	chargeRate: [
+		{
+			required: true,
+			message: "请输入",
+			trigger: "blur",
+		},
+	],
+	chargeMax: [
+		{
+			required: true,
+			message: "请输入",
+			trigger: "blur",
+		},
+	],
+};
+export const options = {
+	modelType: [
+		{
+			id: 1,
+			name: "房屋收费标准",
+		},
+		{
+			id: 2,
+			name: "仪表收费标准",
+		},
+		{
+			id: 3,
+			name: "车位收费标准",
+		},
+		{
+			id: 4,
+			name: "临时收费标准",
+		},
+	],
+	meterChargesType: [
+		{
+			id: 1,
+			name: "房间表收费标准",
+		},
+		{
+			id: 2,
+			name: "公摊表收费标准",
+		},
+	],
+	billingType: [
+		{
+			id: 1,
+			name: "单价x计量方式",
+		},
+		{
+			id: 2,
+			name: "固定金额",
+		},
+	],
+	calculateType: [
+		// 计量方式（1.建筑面积【房屋收费标准】，2.使用面积【房屋收费标准】，3.公摊面积【房屋收费标准】，
+		// 5.仪表用量【仪表收费标准】，6.房屋数分摊（仪表用量 / 绑定房屋数）【仪表收费标准】，7.
+		// 房屋建筑面积分摊（仪表用量 * 建筑面积占比）【仪表收费标准】，8.房屋在住人口分摊（
+		// 仪表用量 * 在住人口占比））【仪表收费标准】
+		{
+			id: 1,
+			name: "建筑面积",
+		},
+		{
+			id: 2,
+			name: "使用面积",
+		},
+		{
+			id: 3,
+			name: "公摊面积",
+		},
+		{
+			id: 5,
+			name: "仪表用量",
+		},
+		{
+			id: 6,
+			name: "房屋数分摊",
+		},
+		{
+			id: 7,
+			name: "房屋建筑面积分摊",
+		},
+		{
+			id: 8,
+			name: "房屋在住人口分摊",
+		},
+	],
+	isTrue: [
+		{
+			id: 1,
+			name: "是",
+		},
+		{
+			id: 2,
+			name: "否",
+		},
+	],
+	fileStandard: [
+		{
+			id: 1,
+			name: "房屋楼层数",
+		},
+		{
+			id: 2,
+			name: "房屋合同时长",
+		},
+		{
+			id: 3,
+			name: "仪表用量",
+		},
+	],
+	billingAccuracy: [
+		{
+			id: 1,
+			name: "元",
+		},
+		{
+			id: 2,
+			name: "角",
+		},
+		{
+			id: 3,
+			name: "分",
+		},
+	],
+	choiceType: [
+		{
+			id: 1,
+			name: "四舍五入",
+		},
+		{
+			id: 2,
+			name: "向上取整",
+		},
+		{
+			id: 3,
+			name: "向下取整",
+		},
+	],
+};

src/views/Payment/ChargeStandardManage/depend/form.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <a-drawer
-      :title="drawer.title"
+      :title="title"
       :width="720"
-      :visible="drawer.show"
+      :visible="show"
       :body-style="{ paddingBottom: '80px' }"
-      @close="addClose"
+      @close="close"
     >
       <div class="drawer-content">
         基本信息
@@ -16,17 +16,277 @@
           :rules="rules"
           layout="vertical"
         >
-          <a-form-model-item prop="brandName" label="品牌名称">
-            <a-input
-              v-model="form.brandName"
-              placeholder="请输入品牌名称"
-              style="width: 50%"
-            ></a-input>
-          </a-form-model-item>
+          <a-row>
+            <a-col :span="12">
+              <a-form-model-item prop="modelType" label="模块类型">
+                <a-select
+                  v-model="form.modelType"
+                  placeholder="请输入模块类型"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.modelType"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="name" label="费用名称">
+                <a-input
+                  v-model="form.name"
+                  placeholder="请输入费用名称"
+                  style="width: 80%"
+                >
+                </a-input>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12" v-if="form.modelType === 2">
+              <a-form-model-item
+                prop="meterChargesType"
+                label="仪表收费标准类型"
+              >
+                <a-select
+                  v-model="form.meterChargesType"
+                  placeholder="请输入仪表收费标准类型"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.meterChargesType"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="billingType" label="计费方式">
+                <a-select
+                  v-model="form.billingType"
+                  placeholder="请输入计费方式"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.billingType"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12" v-if="form.billingType === 1">
+              <a-form-model-item prop="calculateType" label="计量方式">
+                <a-select
+                  v-model="form.calculateType"
+                  placeholder="请输入计量方式"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.calculateType"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="fileStandard" label="定档标准">
+                <a-select
+                  v-model="form.fileStandard"
+                  placeholder="请选择定档标准"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.fileStandard"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="isTieredBilling" label="是否阶梯计费">
+                <a-select
+                  v-model="form.isTieredBilling"
+                  placeholder="请选择是否阶梯计费"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.isTrue"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24" v-if="form.isTieredBilling === 1">
+              <div>
+                <a-form-model ref="tieredform" :model="tieredform">
+                  <a-form-model-item
+                    v-for="(input, index) in tieredform.inputs"
+                    :key="index"
+                    :label="index === 0 ? '阶梯计费设置' : ''"
+                  >
+                    <span style="margin-right: 8px">{{ index + 1 }}档</span>
+                    <a-input
+                      v-model.number="input.chargesStall"
+                      placeholder="请输入收费档位"
+                      style="width: 40%; margin-right: 8px"
+                    />
+                    <a-input
+                      v-model.number="input.chargesStallAmount"
+                      placeholder="请输入档位费用"
+                      style="width: 40%; margin-right: 8px"
+                    />
+                    <a-icon
+                      v-if="tieredform.inputs.length > 1"
+                      class="dynamic-delete-button"
+                      type="minus-circle-o"
+                      :disabled="tieredform.inputs.length === 1"
+                      @click="removeInput(input)"
+                    />
+                  </a-form-model-item>
+                  <a-form-model-item>
+                    <span style="margin-right: 8px">末档</span>
+                    <a-input
+                      placeholder="+∞"
+                      disabled
+                      style="width: 40%; margin-right: 8px"
+                    />
+                    <a-input
+                      v-model.number="tieredform.lastInput.chargesStallAmount"
+                      placeholder="请输入末档费用"
+                      style="width: 40%; margin-right: 8px"
+                    />
+                  </a-form-model-item>
+                  <a-form-model-item>
+                    <a-button
+                      type="dashed"
+                      style="width: 60%"
+                      @click="addInput"
+                    >
+                      <a-icon type="plus" /> 新增阶梯价格
+                    </a-button>
+                  </a-form-model-item>
+                </a-form-model>
+              </div>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="calculateUnit" label="计量单价">
+                <a-input
+                  v-model="form.calculateUnit"
+                  placeholder="请输入计量单价"
+                  style="width: 80%"
+                >
+                </a-input>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="billingAccuracy" label="计费经度">
+                <a-select
+                  v-model="form.billingAccuracy"
+                  placeholder="请选择计费经度"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.billingAccuracy"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item prop="choiceType" label="取舍方式">
+                <a-select
+                  v-model="form.choiceType"
+                  placeholder="请选择取舍方式"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.choiceType"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                prop="isCollectLiquidatedDamages"
+                label="是否收取违约金"
+              >
+                <a-select
+                  v-model="form.isCollectLiquidatedDamages"
+                  placeholder="请选择"
+                  style="width: 60%"
+                >
+                  <a-select-option
+                    v-for="item in options.isTrue"
+                    :key="item.id"
+                    :value="item.id"
+                    >{{ item.name }}</a-select-option
+                  >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12" v-if="form.isCollectLiquidatedDamages === 1">
+              <a-form-model-item prop="paymentTerm" label="支付期限">
+                <a-input
+                  v-model="form.paymentTerm"
+                  placeholder="请输入支付期限"
+                  style="width: 80%"
+                  suffix="天"
+                >
+                </a-input>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12" v-if="form.isCollectLiquidatedDamages === 1">
+              <a-form-model-item prop="chargeRate" label="收取比率">
+                <a-input
+                  v-model="form.chargeRate"
+                  placeholder="请输入收取比率"
+                  style="width: 80%"
+                  suffix="%"
+                >
+                </a-input>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12" v-if="form.isCollectLiquidatedDamages === 1">
+              <a-form-model-item prop="chargeMax" label="收取上限">
+                <a-input
+                  v-model="form.chargeMax"
+                  placeholder="请输入收取上限"
+                  style="width: 80%"
+                  suffix="%"
+                >
+                </a-input>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-model-item prop="remarks" label="备注">
+                <a-textarea
+                  v-model="form.remarks"
+                  placeholder="请输入备注"
+                  style="width: 80%"
+                >
+                </a-textarea>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
         </a-form-model>
       </div>
       <div class="drawer-footer">
-        <a-button :style="{ marginRight: '8px' }" @click="addClose">
+        <a-button :style="{ marginRight: '8px' }" @click="close">
           关闭
         </a-button>
         <a-button type="primary" @click="submit"> 提交 </a-button>
@@ -36,28 +296,85 @@
 </template>
 
 <script>
+import { form, rules, options } from "./form";
+import {
+	chargesInsert,
+	chargesUpdate,
+	chargesInfo,
+} from "@/api/payment/chargeStandardManage";
 export default {
+	props: {
+		show: Boolean,
+		id: Number,
+	},
+	data() {
+		return {
+			title: "新增费用",
+			form,
+			rules,
+			options,
+			tieredform: {
+				inputs: [
+					{ 
+						chargesStall: undefined, 
+						chargesStallAmount: undefined
+					}
+				],
+				lastInput: { //末档
+					chargesStall: -1,
+					chargesStallAmount:undefined
+				}
+			},
+		};
+	},
 	methods: {
+		removeInput(item) {
+			let index = this.tieredform.inputs.indexOf(item);
+			if (index !== -1) {
+				this.tieredform.inputs.splice(index, 1);
+			}
+		},
+		addInput() {
+			let index = this.tieredform.inputs.length;
+			this.tieredform.inputs.push({
+				chargesStall: undefined,
+				chargesStallAmount: undefined
+			});
+		},
 		submit() {
-			console.log(this.form);
+			// 阶梯价格拼接末档
+			let tieredBillingDTOList = []
+			this.tieredform.inputs.forEach((input,index) =>{
+				let tieredBill = {
+					chargesStall:input.chargesStall,
+					chargesStallAmount:input.chargesStallAmount,
+					sort:index + 1
+				}
+				tieredBillingDTOList.push(tieredBill)
+			})
+			let last = {
+				chargesStall: -1,
+				chargesStallAmount:this.tieredform.lastInput.chargesStallAmount,
+				sort:this.tieredform.inputs.length + 1
+			}
+			tieredBillingDTOList.push(last)
+			this.form.tieredBillingDTOList = tieredBillingDTOList
 			this.$refs.ruleForm.validate(async (valid) => {
 				if (valid) {
 					if (this.form.id === null) {
-						let res = await Insert(this.form);
+						let res = await chargesInsert(this.form);
 						if (res.code === 200) {
 							this.$message.success(res.msg);
-							this.addClose();
-							this.getData();
+							this.success();
 						} else {
 							this.$message.error(res.msg);
 						}
 					} else {
 						console.log(this.form);
-						let res = await Update(this.form);
+						let res = await chargesUpdate(this.form);
 						if (res.code === 200) {
 							this.$message.success(res.msg);
-							this.addClose();
-							this.getData();
+							this.success();
 						} else {
 							this.$message.error(res.msg);
 						}
@@ -65,8 +382,58 @@ export default {
 				}
 			});
 		},
+		success() {
+			this.$emit("success");
+			this.close();
+		},
+		close() {
+			this.$refs.ruleForm.resetFields();
+			this.form.id = null;
+			this.tieredform = {
+				inputs: [
+					{ 
+						chargesStall: undefined, 
+						chargesStallAmount: undefined
+					}
+				],
+				lastInput: { //末档
+					chargesStall: -1,
+					chargesStallAmount:undefined
+				}
+			};
+			this.$emit("close");
+		},
+	},
+	watch: {
+		id: {
+			handler(val) {
+				console.log(val);
+				if (val !== null) {
+					chargesInfo({ chargesId: val }).then((res) => {
+						this.form = res.data;
+						if(res.data.isTieredBilling===1) {
+							let tieredBill = res.data.tieredBillingVoList;
+							// 末档
+							this.tieredform.lastInput.chargesStallAmount = tieredBill[tieredBill.length-1].chargesStallAmount;
+							tieredBill.pop();
+							for(let key in tieredBill){
+								this.tieredform.inputs[key] = tieredBill[key]
+							}
+						}
+						// 阶梯价格反显
+						this.title = "修改费用";
+					});
+				} else {
+					this.title = "新增费用";
+					this.form.id = null;
+				}
+			},
+			immediate: true,
+		},
 	},
 };
 </script>
 
-<style></style>
+<style lang="less" scoped>
+
+</style>

src/views/Payment/ChargeStandardManage/index.vue

@@ -8,7 +8,7 @@
       <a-tab-pane :key="4" tab="临时收费标准"> </a-tab-pane>
     </a-tabs>
     <searchForm :formItem="formItem" @getSearch="getData($event)"></searchForm>
-    <a-button style="margin: 10px" class="add-btn">添加费用</a-button>
+    <a-button style="margin: 10px" class="add-btn" @click="drawer.show = true">添加费用</a-button>
     <a-table
       :columns="columns"
       :data-source="tableData"
@@ -26,7 +26,7 @@
     >
       <span slot="action" slot-scope="text, row">
         <a-space>
-          <a class="ant-dropdown-link" @click="edit(row)">修改</a>
+          <a class="ant-dropdown-link" @click="edit(row.id)">修改</a>
           <a class="ant-dropdown-link" @click="del([row.id])">删除</a>
         </a-space>
       </span>
@@ -44,13 +44,18 @@
         </template>
       </span>
     </div>
+	<charge-form :show='drawer.show' :id='drawer.editId' @success='formSuccess' @close='formClose'></charge-form>
   </div>
 </template>
 
 <script>
+import chargeForm from './depend/form.vue'
 import { formItem, columns, pagination } from "./depend/config";
-import { chargesList } from "@/api/payment/chargeStandardManage";
+import { chargesList, chargesDel } from "@/api/payment/chargeStandardManage";
 export default {
+	components:{
+		chargeForm
+	},
 	data() {
 		return {
 			tableData: [],
@@ -58,6 +63,10 @@ export default {
 				name: undefined,
 				modelType: 1,
 			},
+			drawer: {
+				show: false,
+				editId: null,
+			},
 			formItem,
 			columns,
 			pagination,
@@ -66,7 +75,7 @@ export default {
 		};
 	},
 	mounted() {
-		this.getData
+		this.getData()
 	},
 	methods: {
 		changeType(data){
@@ -87,15 +96,18 @@ export default {
 			this.pagination.total = res.data.total;
 			this.selectedRowKeys = [];
 		},
-		edit(data) {},
+		edit(id) {
+			this.drawer = {
+				editId:id,
+				show: true
+			}
+		},
 		del(ids) {
 			this.$confirm({
 				title: "是否删除",
-				// okText:'删除',
-				// cancelText:'取消',
 				icon: "delete",
 				onOk: async () => {
-					let res = await Del({ ids: ids });
+					let res = await chargesDel({ chargesIds: ids });
 					if (res.code === 200) {
 						this.$message.success(res.msg);
 						this.getData();
@@ -125,7 +137,15 @@ export default {
 			this.pagination = pager;
 			this.getData();
 		},
-		addClose() {},
+		formSuccess(){
+			this.getData();
+		},
+		formClose() {
+			this.drawer = {
+				show:false,
+				editId:null,
+			}
+		},
 	},
 	computed: {
 		hasSelected() {

src/views/Payment/PrepayManage/depend/config.js

@@ -1,39 +1,58 @@
 export const formItem = [
 	{
 		type: 'input',
-		label:'房间',
-		prop:'name',
+		label:'关键字',
+		prop:'keyword',
 		placeholder:'请输入'
 	},
 	{
-		type: 'input',
-		label:'费用名称',
-		prop:'name',
-		placeholder:'请输入'
+		type: 'select',
+		label:'余量告警',
+		prop:'status',
+		placeholder: '请选择',
+		option:[{ id:1,name:'充足'},{ id:2,name:'不足'}]
 	},
+	{
+		type: 'select',
+		label:'楼栋',
+		prop:'buildingId',
+		placeholder: '请选择楼栋',
+		option:[]
+	},
+	// {
+	// 	type: 'select',
+	// 	label:'单元',
+	// 	prop:'unitId',
+	// 	placeholder: '请选择单元',
+	// 	option:[]
+	// },
+	// {
+	// 	type: 'select',
+	// 	label:'房屋',
+	// 	prop:'estateId',
+	// 	placeholder: '请选择房屋',
+	// 	option:[]
+	// },
 ]
 export const columns = [
 	{
-		title: "房屋信息",
-		dataIndex: "",
+		title: "房屋名称",
+		dataIndex: "manageBuildingName",
+		scopedSlots: { customRender: "name" },
 	},
 	{
 		title: "户主",
-		dataIndex: "",
+		dataIndex: "owner",
 	},
 	{
 		title: "余额",
-		dataIndex: "",
+		dataIndex: "balance",
 	},
 	{
 		title: "余额状态",
 		dataIndex: "",
 		scopedSlots:{ customRender: "tags"}
 	},
-	{
-		title: "单位",
-		dataIndex: "unit",
-	},
 	{
 		title: "操作",
 		dataIndex: "action",

src/views/Payment/PrepayManage/depend/form.js

@@ -1,7 +0,0 @@
-export const form = {
-	id:null,
-	brandName: undefined,
-}
-export const rules = {
-	brandName:[{required:true,message:'请输入品牌名',trigger:'blur'}],
-}

src/views/Payment/PrepayManage/depend/form.vue

@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <a-drawer
-      :title="drawer.title"
-      :width="720"
-      :visible="drawer.show"
-      :body-style="{ paddingBottom: '80px' }"
-      @close="addClose"
-    >
-      <div class="drawer-content">
-        基本信息
-        <a-divider></a-divider>
-        <a-form-model
-          ref="ruleForm"
-          :model="form"
-          :rules="rules"
-          layout="vertical"
-        >
-       
-          <a-form-model-item prop="brandName" label="品牌名称">
-            <a-input
-              v-model="form.brandName"
-              placeholder="请输入品牌名称"
-              style="width: 50%"
-            ></a-input>
-          </a-form-model-item>
-        </a-form-model>
-      </div>
-      <div class="drawer-footer">
-        <a-button :style="{ marginRight: '8px' }" @click="addClose">
-          关闭
-        </a-button>
-        <a-button type="primary" @click="submit"> 提交 </a-button>
-      </div>
-    </a-drawer>
-  </div>
-</template>
-
-<script>
-export default {
-	methods: {
-		submit() {
-			console.log(this.form);
-			this.$refs.ruleForm.validate(async (valid) => {
-				if (valid) {
-					if (this.form.id === null) {
-						let res = await Insert(this.form);
-						if (res.code === 200) {
-							this.$message.success(res.msg);
-							this.addClose();
-							this.getData();
-						} else {
-							this.$message.error(res.msg);
-						}
-					} else {
-						console.log(this.form);
-						let res = await Update(this.form);
-						if (res.code === 200) {
-							this.$message.success(res.msg);
-							this.addClose();
-							this.getData();
-						} else {
-							this.$message.error(res.msg);
-						}
-					}
-				}
-			});
-		},
-	},
-};
-</script>
-
-<style></style>

src/views/Payment/PrepayManage/depend/list.js

@@ -0,0 +1,51 @@
+export const formItem = [
+	{
+		type: 'input',
+		label:'关键字',
+		prop:'keyword',
+		placeholder:'请输入'
+	},
+	{
+		type: 'select',
+		label:'余量告警',
+		prop:'status',
+		placeholder: '请选择',
+		option:[{ id:1,name:'充足'},{ id:2,name:'不足'}]
+	},
+]
+export const columns = [
+	{
+		title: "房屋名称",
+		dataIndex: "manageBuildingName",
+		scopedSlots: { customRender: "name" },
+	},
+	{
+		title: "户主",
+		dataIndex: "owner",
+	},
+	{
+		title: "余额",
+		dataIndex: "balance",
+	},
+	{
+		title: "余额状态",
+		dataIndex: "",
+		scopedSlots:{ customRender: "tags"}
+	},
+	{
+		title: "操作",
+		dataIndex: "action",
+		key: "action",
+		width: "180",
+		fixed: "right",
+		scopedSlots: { customRender: "action" },
+	},
+]
+export const pagination = {
+	current: 1,
+	total: 0,
+	pageSize: 10,
+	showTotal: (total) => `共 ${total} 条`,
+	showSizeChanger: true,
+	showQuickJumper: true,
+}

src/views/Payment/PrepayManage/depend/preList.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <a-drawer
+      title="预缴-明细"
+      :width="720"
+      :visible="show"
+      :body-style="{ paddingBottom: '80px' }"
+      @close="close"
+    >
+      <div class="drawer-content">
+        基本信息
+        <a-divider></a-divider>
+        
+      </div>
+      <div class="drawer-footer">
+        <a-button :style="{ marginRight: '8px' }" @click="close">
+          关闭
+        </a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { formItem, columns, pagination } from "./list";
+export default {
+	methods: {
+	
+	},
+};
+</script>
+
+<style></style>

src/views/Payment/PrepayManage/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <div class="cardTitle">
-        预缴管理
-    </div>
+    <div class="cardTitle">预缴管理</div>
     <searchForm :formItem="formItem" @getSearch="getData($event)"></searchForm>
-    <a-button style="margin: 10px" class="add-btn" @click="drawer.show = true"
-      >充值</a-button
-    >
     <a-table
       :columns="columns"
       :data-source="tableData"
@@ -22,20 +17,30 @@
         }
       "
     >
+      <span slot="name" slot-scope="text, row">
+        {{
+          row.buildingName +
+          "栋/" +
+          row.unitName +
+          "单元/" +
+          row.name +
+          "室"
+        }}
+      </span>
       <span slot="action" slot-scope="text, row">
         <a-space>
-          <a class="ant-dropdown-link" @click="detail(row.id)">明细</a>
-          <a class="ant-dropdown-link" @click="save(row.id)">充值</a>
+          <a class="ant-dropdown-link" @click="list(row.id)">明细</a>
+          <a class="ant-dropdown-link" @click="recharge(row.id)">充值</a>
         </a-space>
       </span>
-	  <span slot="tags" slot-scope="text, row">
-        <a-tag>{{row.type}}</a-tag>
+      <span slot="tags" slot-scope="text, row">
+        <a-tag>{{ row.status===1?'充足':row.status===2?'不足':'-' }}</a-tag>
       </span>
     </a-table>
     <div class="action">
       <a-dropdown :disabled="!hasSelected">
         <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="del"> 批量删除 </a-menu-item>
+          <!-- <a-menu-item key=""> 批量 </a-menu-item> -->
         </a-menu>
         <a-button> 批量操作 <a-icon type="down" /> </a-button>
       </a-dropdown>
@@ -45,41 +50,52 @@
         </template>
       </span>
     </div>
-    
   </div>
 </template>
 
 <script>
 import { formItem, columns, pagination } from "./depend/config";
+import {
+	prepaymentList,
+	rechargeList,
+	recharge,
+} from "@/api/payment/prepayManage";
+import { allBuilding } from "@/api/basic/estate"
 export default {
 	data() {
 		return {
-			chargeType:'1',
 			drawer: {
 				show: false,
 			},
-			tableData: [{type:1}],
+			tableData: [],
 			searchForm: {
-				name: undefined,
+				keyword: undefined,
+				status: undefined,
+				buildingId: undefined,
+				// unitId: undefined,
+				// estateId: undefined,
 			},
 			formItem,
 			columns,
 			pagination,
-			// 选择的index
 			selectedRowKeys: [],
 		};
 	},
 	mounted() {
-		// this.getData();
+		this.getData();
+		this.getSelect()
 	},
 	methods: {
+		async getSelect(){
+			// 获取楼栋 后续可加单元、房间筛选
+			let res = await allBuilding()
+			this.formItem[2].option = res.data
+		},
 		async getData(data) {
 			if (data !== undefined) {
-				console.log(data);
 				this.searchForm = data;
-				console.log(this.searchForm);
 			}
-			let res = await List({
+			let res = await prepaymentList({
 				pageNum: this.pagination.current,
 				size: this.pagination.pageSize,
 				...this.searchForm,
@@ -88,40 +104,14 @@ export default {
 			this.pagination.total = res.data.total;
 			this.selectedRowKeys = [];
 		},
-		changeType(data){
-			console.log(data.target.value);
-		},
-		edit(data) {
-		},
-		del(ids) {
-			this.$confirm({
-				title: "是否删除",
-				// okText:'删除',
-				// cancelText:'取消',
-				icon: "delete",
-				onOk: async () => {
-					let res = await Del({ ids: ids });
-					if (res.code === 200) {
-						this.$message.success(res.msg);
-						this.getData();
-					} else {
-						this.$message.error(res.msg);
-					}
-				},
-			});
-		},
-		// 选择，获取id
 		selectionChoosed(data) {
 			this.selectedRowKeys = data;
 		},
-		// 批量操作
+		recharge(id){},
+		list(id){},
 		handleMenuClick(data) {
 			console.log(data);
-			if (data.key === "del") {
-				this.del(this.selectedRowKeys);
-			}
 		},
-		// 跳转
 		handleTableChange(pagination) {
 			console.log(pagination);
 			const pager = { ...this.pagination };
@@ -130,8 +120,6 @@ export default {
 			this.pagination = pager;
 			this.getData();
 		},
-		addClose() {
-		},
 	},
 	computed: {
 		hasSelected() {