物业主开发

src/views/system/Sdb/SdbCashier/cashier.vue

@@ -2,85 +2,220 @@
   <el-card style="margin-top: 20px; height: 100%">
     <div class="p-2 flex flex-col cashierbox h-full">
       <div class="flex">
-        <div>小区： 北境碧桂园小区</div>
-        <div style="margin: 0 80px">小区： 北境碧桂园小区</div>
-        <div>小区： 北境碧桂园小区</div>
+        <div>小区：{{ villageinfo.villageName ?? '---' }}</div>
+        <div style="margin: 0 80px">住户姓名： {{ props.query.residentName }}</div>
+        <div>手机号： {{ props.query.phone }}</div>
       </div>
       <div class="actionsbox">
-        <el-button type="primary">收款</el-button>
-        <el-button>添加临时收费</el-button>
-        <el-button>预存</el-button>
-        <el-button>打印</el-button>
+        <el-button type="primary" @click="openDiage">收款</el-button>
+        <!-- <el-button>添加临时收费</el-button> -->
+        <!-- <el-button>预存</el-button> -->
+        <!-- <el-button>打印</el-button> -->
         <el-button @click="emit('Back')">返回</el-button>
       </div>
       <div class="tablebox">
-        <el-table>
-          <el-table-column align="center" label="序号" width="80">
+        <el-table :data="tabledata" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column align="center" label="房屋/车位">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="房屋/车位/车辆">
-            <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <div v-if="scope.row.chargeTypeName === '停车费'">{{ scope.row.parkingName }}</div>
+              <div v-else-if="scope.row.chargeTypeName === '电费' || scope.row.chargeTypeName === '水费'">{{ scope.row.houseName }}</div>
             </template>
           </el-table-column>
           <el-table-column align="center" label="收费项目">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <div>{{ scope.row.chargeItemName }}</div>
             </template>
           </el-table-column>
           <el-table-column align="center" label="收费周期">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <div>{{ scope.row.startDate }} -- {{ scope.row.endDate }}</div>
             </template>
           </el-table-column>
           <el-table-column align="center" label="单价">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <div>{{ scope.row.fixedPrice }}</div>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="数量">
+          <!-- <el-table-column align="center" label="数量">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <div>{{ scope.row.formula }}</div>
             </template>
-          </el-table-column>
-          <el-table-column align="center" label="应收金额">
-            <template #default="scope">
-              <div>{{ scope.$index }}</div>
-            </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column align="center" label="缴费状态">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <dict-tag v-if="!inglelist.includes(scope.row.chargeItemName)" :options="com_pay_status" :value="scope.row.payStatus"></dict-tag>
+              <div v-else>--</div>
             </template>
           </el-table-column>
-
           <el-table-column align="center" label="应缴金额">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
+              <div v-if="!inglelist.includes(scope.row.chargeItemName)">{{ scope.row.money ?? '--' }}</div>
+              <div v-else>--</div>
             </template>
           </el-table-column>
         </el-table>
         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
       </div>
     </div>
+
+    <!-- 添加或修改电 设备对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <div class="payinfo">
+        <div>
+          <span>缴费人：{{ villageinfo.villageName ?? '---' }}-{{ props.query.houseName }}</span>
+        </div>
+        <div>
+          <span>账单名称： </span>
+          <span style="text-wrap: wrap; text-indent: 2rem">{{ from.billResidentId.join('、 ') }}</span>
+        </div>
+        <div>
+          <span>应收合计：￥{{ from.allCost }}</span>
+        </div>
+        <div>
+          <span>应缴合计：￥{{ from.allCost }}</span>
+        </div>
+      </div>
+      <el-form ref="formRef" :model="from" label-width="100px">
+        <el-form-item label="费用合计" prop="allCost">
+          <el-input v-model="from.allCost">
+            <template #suffix>
+              <span>元</span>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="缴纳状态" prop="payStatus">
+          <el-radio-group v-model="from.payStatus">
+            <el-radio v-for="dict in com_pay_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="支付方式" prop="payType">
+          <el-select v-model="from.payType" placeholder="请选择">
+            <el-option v-for="dict in com_pay_method" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="5" v-model="from.remark"></el-input>
+        </el-form-item>
+        <div class="flex justify-end">
+          <el-button @click="closepay">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
+        </div>
+      </el-form>
+    </el-dialog>
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { billlistType, billQuery } from '@/api/system/SdbCashier';
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_pay_method, com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_method', 'com_pay_status'));
+
+const villageinfo = JSON.parse(localStorage.getItem('villageInfo') || '{}');
+
+// 隐藏收费金额的 类型列表
+const inglelist = ['电费', '水费'];
+
+type querytype = {
+  residentId: string;
+  residentName: string;
+  houseName: string;
+  phone: string;
+};
+const props = defineProps({
+  query: {
+    type: Object as PropType<querytype>,
+    default: () => {
+      return {
+        'residentId': '',
+        'residentName': '',
+        'houseName': '',
+        'phone': ''
+      };
+    }
+  }
+});
+const ids = ref<Array<billlistType>>([]);
+const single = ref(true);
+const multiple = ref(true);
 const total = ref(100);
 const queryParams = ref({
   pageNum: 1,
   pageSize: 10
 });
+const tabledata = ref([]);
 const getList = () => {
-  console.log('getList');
+  billQuery({
+    residentId: props.query.residentId,
+    payStatus: '0'
+  }).then((res) => {
+    tabledata.value = res.rows;
+    total.value = res.total;
+  });
+};
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: billlistType[]) => {
+  // TODO: 获取选中的id
+  ids.value = [];
+  ids.value = selection;
+  console.log(ids.value);
+  console.log(selection);
+
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
 };
 
+onMounted(() => {
+  getList();
+});
+
 const emit = defineEmits(['Back']);
+
+const formRef = ref();
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: '收款'
+});
+const buttonLoading = ref(false);
+
+const from = ref({
+  allCost: null, // 金额
+  billResidentId: [], // 账单id
+  payStatus: '0', // 0:未缴 1:已缴
+  payType: '0', // 0:微信 1:支付宝 2 线下
+  remark: ''
+});
+
+const openDiage = () => {
+  from.value = {
+    allCost: 0,
+    payStatus: '0',
+    billResidentId: ['202505电费', '202505水费'],
+    payType: '0',
+    remark: ''
+  };
+  // 计算金额
+  ids.value.forEach((item) => {
+    from.value.allCost += Number(item.money);
+  });
+  dialog.visible = true;
+};
+const closepay = () => {
+  dialog.visible = false;
+  dialog.title = '';
+};
+const submitForm = () => {
+  buttonLoading.value = true;
+  if (from.value.payStatus === '0') {
+    setTimeout(() => {
+      buttonLoading.value = false;
+      closepay();
+    }, 1000);
+  } else {
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -103,4 +238,14 @@ const emit = defineEmits(['Back']);
     }
   }
 }
+.payinfo {
+  color: rgba(0, 0, 0, 1);
+  margin-top: 20px;
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #d2d2d2;
+  & > div {
+    margin-bottom: 10px;
+  }
+}
 </style>