8/4 更新输入限制，修复收银台

2026-08-04 16:07:22 +08:00
parent ca5f214bac
commit 494b7869ea
26 changed files with 668 additions and 412 deletions
--- a/src/views/system/houseRental/addhouseResident.vue
+++ b/src/views/system/houseRental/addhouseResident.vue
@@ -229,7 +229,17 @@ const form = ref({
 const userHousePath = ref<CascaderValue>([]);
 const rules = ref({
  houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
-  rentalName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  rentalName: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+    {
+      validator: (_: any, val: string | number, callback: (arg0?: Error) => void) => {
+        if (val === '' || val === null || val === undefined) {
+          return callback(new Error('请输入名称'));
+        }
+        return validator(val, 'ChineseName') ? callback() : callback(new Error('请输入中文字符'));
+      }
+    }
+  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
@@ -316,7 +326,7 @@ async function getTreeData() {
      };
      if (form.value.facilities) houseDevicesList.value = form.value.facilities.split(',').filter((item) => item);
      if (form.value.houseImageUrl) fileList.value = splitStringUrl(form.value.houseImageUrl);
-      handleChange([form.value.buildingId, form.value.unitNoId, form.value.houseId]);
+      userHousePath.value = [form.value.buildingId, form.value.unitNoId, form.value.houseId];
    });
  }
 }
--- a/src/views/system/houseRental/index.vue
+++ b/src/views/system/houseRental/index.vue
@@ -5,7 +5,7 @@
      <div v-show="showSearch" class="mb-[10px]">
        <el-card>
          <div class="h-full flex flex-align-center">
-            <el-form label-width="120px" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form label-width="80px" ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="房屋类型" prop="houseUse">
                <el-select v-model="queryParams.houseUse" placeholder="选择房屋类型" style="width: 240px">
                  <el-option v-for="item in houseUseTypeList" :key="item.id" :label="item.name" :value="item.id" />
@@ -53,7 +53,6 @@
        <el-table-column label="发布时间" align="center" prop="pubTime" />
        <el-table-column label="房屋类型" align="center" prop="houseUse">
          <template #default="{ row }">
-            <!--            <DictTag :options="com_house_use" :value="row.houseUse"></DictTag>-->
            <span>{{ handleHouseUse(row.houseUse) }}</span>
          </template>
        </el-table-column>
@@ -62,8 +61,25 @@
            <DictTag :options="com_rental_method" :value="row.rentalType"></DictTag>
          </template>
        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status">
+          <template #default="{ row }">
+            <span>{{ row.status === '0' ? '下架' : '上架' }}</span>
+          </template>
+        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template #default="scope">
+            <el-button link type="primary" v-if="scope.row.status === '0'" @click="sign(scope.row)" v-has-permi="['houseRental:houseRental:edit']"
+              >签约</el-button
+            >
+            <el-button
+              link
+              type="primary"
+              v-if="scope.row.status === '0'"
+              @click="putOnSale(scope.row)"
+              v-has-permi="['houseRental:houseRental:edit']"
+              >上架</el-button
+            >
+            <el-button link type="primary" v-else @click="putOnSale(scope.row)" v-has-permi="['houseRental:houseRental:edit']">下架</el-button>
            <el-button link type="primary" @click="handleMain(scope.row)" v-has-permi="['houseRental:houseRental:edit']">详情</el-button>
            <el-button link type="primary" @click="handleUpdate(scope.row)" v-has-permi="['houseRental:houseRental:query']">编辑</el-button>
            <el-button link type="primary" @click="handleDelete(scope.row)" v-has-permi="['houseRental:houseRental:remove']">删除</el-button>
@@ -73,18 +89,76 @@

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
+
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="houseRentalFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="合同编号" prop="contractNo">
+          <el-input maxlength="20" show-word-limit v-model.trim="form.contractNo" placeholder="请输入合同编号" />
+        </el-form-item>
+        <el-form-item label="区域" prop="villageId">
+          <el-input disabled maxlength="20" v-model.trim="form.villageName" placeholder="请输入区域" />
+        </el-form-item>
+        <el-form-item label="承租方" prop="tenantName">
+          <el-input maxlength="20" show-word-limit v-model.trim="form.tenantName" placeholder="请输入承租方" />
+        </el-form-item>
+        <el-form-item label="电话" prop="tenantPhone">
+          <el-input maxlength="11" v-model.trim="form.tenantPhone" placeholder="请输入电话" />
+        </el-form-item>
+        <el-form-item label="房号" prop="houseId">
+          <el-input disabled maxlength="20" show-word-limit v-model.trim="form.houseName" placeholder="请输入房号" />
+        </el-form-item>
+        <el-form-item label="面积" prop="houseArea">
+          <el-input disabled maxlength="20" show-word-limit v-model.trim="form.houseArea" placeholder="请输入面积" />
+        </el-form-item>
+        <el-form-item label="收费模式" prop="chargeMode">
+          <el-input v-model.trim="form.chargeMode" placeholder="请输入收费模式" />
+        </el-form-item>
+        <el-form-item label="收费标准" prop="chargeStandard">
+          <el-input v-model.trim="form.chargeStandard" placeholder="请输入收费标准" />
+        </el-form-item>
+        <el-form-item label="合同状态" prop="contractStatus">
+          <el-input v-model.trim="form.contractStatus" placeholder="请输入合同状态" />
+        </el-form-item>
+        <el-form-item label="租赁起始日" prop="leaseStartDate">
+          <el-date-picker
+            style="width: 100%"
+            v-model.trim="form.leaseStartDate"
+            value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD"
+            type="date"
+            placeholder="请选择租赁起始日"
+          />
+        </el-form-item>
+        <el-form-item label="租赁终止日" prop="leaseEndDate">
+          <el-date-picker
+            style="width: 100%"
+            v-model.trim="form.leaseEndDate"
+            value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD"
+            type="date"
+            placeholder="请选择租赁终止日"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

 <script setup name="HouseRental" lang="ts">
 import Pageheader from '@/components/Pageheader/index.vue';
-import { listHouseRental, delHouseRental } from '@/api/system/houseRental/index';
+import { listHouseRental, delHouseRental, changeHouseRedientStatus, HouseRedientSign } from '@/api/system/houseRental/index';
 import { HouseRentalVO, HouseRentalQuery, HouseRentalForm } from '@/api/system/houseRental/type';
 import { checkPermi } from '@/utils/permission';
 import { listHouseUseType_add_house } from '@/api/system/houseUse';
+import { validator } from '@/utils/Reg';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { com_house_use } = toRefs<any>(proxy?.useDict('com_house_use'));
 const { com_rental_status } = toRefs<any>(proxy?.useDict('com_rental_status'));
 const { com_rental_method } = toRefs<any>(proxy?.useDict('com_rental_method'));

@@ -101,29 +175,34 @@ const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const houseRentalFormRef = ref<ElFormInstance>();

+const villageInfo = localStorage.getItem('villageInfo');
 const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
 });

-const initFormData: HouseRentalForm = {
-  id: undefined,
-  rentalName: undefined,
-  rent: undefined,
-  rentalType: undefined,
-  houseFace: undefined,
-  houseArea: undefined,
-  floorNo: undefined,
-  inTime: undefined,
-  facilities: undefined,
-  houseImageUrl: undefined,
-  supInfo: undefined,
-  phone: undefined,
-  vx: undefined,
-  email: undefined,
-  houseId: undefined
+type HouseRentalFormType = HouseRentalForm & {
+  villageName?: string;
+  houseName?: string;
+  houseArea?: number;
 };
-const data = reactive<PageData<HouseRentalForm, HouseRentalQuery>>({
+
+const initFormData: HouseRentalFormType = {
+  'rentalId': undefined,
+  'contractNo': undefined,
+  'tenantName': undefined,
+  'tenantPhone': undefined,
+  'chargeMode': undefined,
+  'chargeStandard': undefined,
+  'contractStatus': undefined,
+  'leaseStartDate': undefined,
+  'leaseEndDate': undefined,
+  'houseId': undefined,
+  'villageId': undefined,
+  'remark': undefined
+};
+
+const data = reactive<PageData<HouseRentalFormType, HouseRentalQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
@@ -142,12 +221,44 @@ const data = reactive<PageData<HouseRentalForm, HouseRentalQuery>>({
    phone: undefined,
    vx: undefined,
    email: undefined,
-    houseId: undefined,
-    params: {}
+    houseId: undefined
+  },
+  rules: {
+    contractNo: [
+      { required: true, message: '请输入合同编号', trigger: 'blur' },
+      { min: 1, max: 20, message: '合同编号长度必须在 1 到 20 个字符之间', trigger: 'blur' },
+      { pattern: /^[a-zA-Z0-9_\-]+$/, message: '合同编号只能包含字母、数字,下划线和短横线', trigger: 'blur' }
+    ],
+    tenantName: [
+      { required: true, message: '请输入承租方姓名', trigger: 'blur' },
+      { min: 1, max: 20, message: '承租方姓名长度必须在 1 到 20 个字符之间', trigger: 'blur' }
+    ],
+    tenantPhone: [
+      { required: true, message: '请输入承租方联系电话', trigger: 'blur' },
+      { min: 11, max: 11, message: '承租方联系电话长度必须为 11 个字符', trigger: 'blur' },
+      {
+        validator: (rule: any, value: string, callback: any) => {
+          if (!validator(value, 'phone')) {
+            callback(new Error('承租方联系电话格式错误'));
+          } else {
+            callback();
+          }
+        },
+        trigger: ['blur', 'change']
+      }
+    ],
+    chargeMode: [{ required: true, message: '请选择收费模式', trigger: 'change' }],
+    chargeStandard: [{ required: true, message: '请输入收费标准', trigger: 'blur' }],
+    contractStatus: [{ required: true, message: '请选择合同状态', trigger: 'change' }],
+    leaseStartDate: [{ required: true, message: '请选择租赁起始日', trigger: 'change' }],
+    leaseEndDate: [{ required: true, message: '请选择租赁终止日', trigger: 'change' }],
+    houseId: [{ required: true, message: '请选择房屋', trigger: 'change' }],
+    villageId: [{ required: true, message: '请选择小区', trigger: 'change' }],
+    houseArea: [{ required: true, message: '请输入房屋面积', trigger: 'blur' }]
  }
 });

-const { queryParams, form } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data);

 /** 查询房屋租赁管理列表 */
 const getList = async () => {
@@ -203,7 +314,7 @@ const handleAdd = () => {
 };

 /** 修改按钮操作 */
-const handleUpdate = async (row?: HouseRentalVO) => {
+const handleUpdate = (row?: HouseRentalVO) => {
  const id = row?.id || ids.value[0];
  router.push({
    path: '/house/edithouseRental',
@@ -213,7 +324,7 @@ const handleUpdate = async (row?: HouseRentalVO) => {
  });
 };
 /** 详情按钮操作 */
-const handleMain = async (row?: HouseRentalVO) => {
+const handleMain = (row?: HouseRentalVO) => {
  router.push({
    path: '/house/houseMain',
    query: {
@@ -241,6 +352,40 @@ function handleHouseUse(houseUser: string) {
  const item = houseUseTypeList.value.find((item) => item.id === houseUser);
  return item?.name || '';
 }
+
+// 签约
+function sign(row: HouseRentalVO) {
+  form.value = {
+    ...row.signingList?.[0]
+  };
+  const info = JSON.parse(villageInfo || '{}');
+  form.value.villageName = info.villageName;
+  form.value.houseName = row.name;
+  form.value.houseArea = row.houseArea;
+  form.value.houseId = row.houseId;
+  form.value.villageId = info.villageId;
+  form.value.rentalId = row.id;
+  dialog.visible = true;
+  dialog.title = '签约';
+}
+// 上架
+function putOnSale(row: HouseRentalVO) {
+  changeHouseRedientStatus(row.id).then(() => {
+    proxy?.$modal.msgSuccess('操作成功');
+    getList();
+  });
+}
+function submitForm() {
+  houseRentalFormRef.value.validate((valid: boolean) => {
+    if (valid) {
+      HouseRedientSign(form.value).then(() => {
+        proxy?.$modal.msgSuccess('操作成功');
+        getList();
+      });
+    }
+  });
+}
+
 onMounted(() => {
  getList();
  getHouseUseType();