crmeb/admin/src/views/pm/daily/menu/suggestion/pmcomplaintsuggestion-add-and-update.vue

<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <el-dialog
      :title="!dataForm.id ? '新增祈愿' : '修改祈愿'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="80%">
    <!-- 新增和修改表单 -->
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="100px">
      <!-- 第一行：业主类型、祈愿人、房屋名称 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="业主类型" prop="ownerType">
            <el-select v-model="dataForm.ownerType" placeholder="请选择业主类型" clearable style="width: 100%"
                       @change="handleOwnerTypeChange" filterable>
              <el-option
                v-for="dict in dict.type.owner_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="dataForm.ownerType === '1' ? '祈愿人' : '祈愿人'" prop="ownerId">
            <el-select v-if="dataForm.ownerType === '1'" v-model="dataForm.ownerId" placeholder="请选择业主" clearable
                       style="width: 100%" @change="handleOwnerChange" filterable>
              <el-option
                v-for="item in ownerList"
                :key="item.id"
                :label="item.ownerName"
                :value="item.id"
              />
            </el-select>
            <el-select v-else-if="dataForm.ownerType === '2'" v-model="dataForm.ownerId" placeholder="请选择租户" clearable
                       style="width: 100%" @change="handleOwnerChange" filterable>
              <el-option
                v-for="item in tenantList"
                :key="item.id"
                :label="item.tenantName"
                :value="item.id"
              />
            </el-select>
            <el-select v-else v-model="dataForm.ownerId" placeholder="请先选择业主类型" clearable disabled style="width: 100%"></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房屋名称" prop="houseId">
            <el-select v-model="dataForm.houseId" placeholder="选择房屋" clearable style="width: 100%"
                       @change="handleHouseChange" filterable>
              <el-option
                v-for="item in ownerHouseList"
                :key="item.id"
                :label="`${item.unitNo}单元 ${item.floorNo}层 ${item.houseNo}室`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：提交渠道、联系方式 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="提交渠道" prop="submitChannel">
            <el-select v-model="dataForm.submitChannel" placeholder="请选择提交渠道" clearable style="width: 100%" filterable>
              <el-option
                v-for="dict in dict.type.submit_channel"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="联系方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="csType" style="display: none;">
            <el-input v-model="dataForm.csType" placeholder="类型" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行：提交时间 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="提交时间" prop="submitTime">
            <el-date-picker v-model="dataForm.submitTime" type="datetime" placeholder="选择提交时间" style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 内容 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="祈愿内容" prop="csContent">
            <el-input v-model="dataForm.csContent" placeholder="请输入祈愿内容" type="textarea" :rows="4"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 隐藏的字段 -->
      <el-form-item label="房屋业主id" prop="houseOwnerId" v-show="false">
        <el-input v-model="dataForm.houseOwnerId" placeholder="房屋业主id" readonly></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import * as api from '@/api/pmcomplaintsuggestion.js'
  import * as ownerApi from '@/api/pmowner.js'
  import * as tenantApi from '@/api/pmtenant.js'
  import * as tenantHouseApi from '@/api/pmtenanthouse.js'
  import * as houseApi from '@/api/pmhouse.js'
  import * as ownerHouseRelApi from '@/api/pmownerhouserel.js'
  import * as tenantHouseRelApi from '@/api/pmtenanthouserel.js'
  export default {
    dicts: ['owner_type', 'submit_channel', 'suggestion_status'],
    data () {
      return {
        visible: false,
        ownerList: [],
        tenantList: [],
        ownerHouseList: [], // 所选祈愿人的房屋列表
        dataForm: {
          id: 0,
          csType: '' ,
          status: '1' ,
          csContent: '' ,
          submitChannel: '' ,
          submitTime: '' ,
          phone: '' ,
          ownerType: '' ,
          ownerId: '' ,
          houseId: '' ,
          houseOwnerId: ''
        },
        dataRule: {
          ownerType: [
            { required: true, message: '业主类型为必填项', trigger: 'blur' }
          ],
          ownerId: [
            { required: true, message: '祈愿人为必填项', trigger: 'blur' }
          ],
          houseId: [
            { required: true, message: '房屋为必填项', trigger: 'blur' }
          ],
          csContent: [
            { required: true, message: '祈愿内容为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
      this.handleGetOwnerList()
      this.handleGetTenantList()
    },
    methods: {
      // 获取业主列表
      handleGetOwnerList() {
        ownerApi.pmownerListApi({page: 1, limit: 9999}).then(res => {
          this.ownerList = res.list || []
        })
      },
      // 获取租户列表
      handleGetTenantList() {
        tenantApi.pmtenantListApi({page: 1, limit: 9999}).then(res => {
          this.tenantList = res.list || []
        })
      },

      // 处理业主类型变化
      handleOwnerTypeChange(ownerType) {
        // 清空名称ID和房屋ID
        this.dataForm.ownerId = ''
        this.dataForm.houseId = ''
        this.dataForm.houseOwnerId = ''
        this.ownerHouseList = []
      },

      // 处理业主选择变化
        handleOwnerChange(ownerId, callback) {
          // 获取关联房屋
          if (ownerId) {
            if (this.dataForm.ownerType === '1') {
              // 业主类型，查询业主的房屋
              ownerHouseRelApi.pmownerhouserelListApi({ ownerId: ownerId, page: 1, limit: 9999 }).then(res => {
                const relList = res.list || []
                // 获取房屋ID列表
                const houseIds = relList.map(item => item.houseId)
                // 从房屋列表中筛选出关联的房屋
                this.ownerHouseList = this.houseList.filter(house => houseIds.includes(house.id))
                // 清空房屋选择，让用户手动选择
                this.dataForm.houseId = ''
                this.dataForm.houseOwnerId = ''
                // 设置所属部门
                const owner = this.ownerList.find(item => item.id === ownerId)
                if (owner && owner.deptId) {
                  this.dataForm.ownerCompany = owner.deptId
                  this.dataForm.ownerCompanyName = owner.deptName || ''
                }
                // 调用回调
                if (callback) {
                  callback()
                }
              })
            } else if (this.dataForm.ownerType === '2') {
              // 租户类型，先查询PmTenantHouse，tenantId对应的是Long rentId，可能对应多个记录
              tenantHouseApi.pmtenanthouseListApi({ rentId: ownerId, page: 1, limit: 9999 }).then(res => {
                const tenantHouses = res.list || []
                if (tenantHouses.length > 0) {
                  // 收集所有房屋ID
                  const allHouseIds = []
                  // 遍历所有的PmTenantHouse记录，收集所有房屋ID
                  const promises = tenantHouses.map(tenantHouse => {
                    // 用pm_tenant_house中的id查询PmTenantHouseRel
                    return tenantHouseRelApi.pmtenanthouserelListApi({ tenantHouseId: tenantHouse.id, page: 1, limit: 9999 }).then(relRes => {
                      const relList = relRes.list || []
                      if (relList.length > 0) {
                        const houseIds = relList.map(item => item.houseId)
                        return houseIds
                      }
                      return []
                    })
                  })

                  Promise.all(promises).then(results => {
                    // 合并所有房屋ID
                    results.forEach(houseIds => {
                      allHouseIds.push(...houseIds)
                    })

                    // 从房屋列表中筛选出关联的房屋
                    this.ownerHouseList = this.houseList.filter(house => allHouseIds.includes(house.id))
                    // 清空房屋选择，让用户手动选择
                    this.dataForm.houseId = ''
                    this.dataForm.houseOwnerId = ''
                    // 设置租户所属部门
                    const tenant = this.tenantList.find(item => item.id === ownerId)
                    if (tenant && tenant.deptId) {
                      this.dataForm.ownerCompany = tenant.deptId
                      this.dataForm.ownerCompanyName = tenant.deptName || ''
                    }
                    // 调用回调
                    if (callback) {
                      callback()
                    }
                  })
                } else {
                  // 没有找到租户房屋记录
                  this.ownerHouseList = []
                  this.dataForm.houseId = ''
                  this.dataForm.houseOwnerId = ''
                  // 设置租户所属部门
                  const tenant = this.tenantList.find(item => item.id === ownerId)
                  if (tenant && tenant.deptId) {
                    this.dataForm.ownerCompany = tenant.deptId
                    this.dataForm.ownerCompanyName = tenant.deptName || ''
                  }
                  // 调用回调
                  if (callback) {
                    callback()
                  }
                }
              })
            }
          } else {
            this.ownerHouseList = []
            this.dataForm.houseId = ''
            this.dataForm.houseOwnerId = ''
            // 清空部门信息
            this.dataForm.ownerCompany = ''
            this.dataForm.ownerCompanyName = ''
            // 调用回调
            if (callback) {
              callback()
            }
          }
        },
      // 处理房屋选择变化
      handleHouseChange(houseId) {
        if (houseId) {
          // 设置房屋业主ID为当前选择的业主ID
          this.dataForm.houseOwnerId = this.dataForm.ownerId
        } else {
          // 清空房屋业主ID
          this.dataForm.houseOwnerId = ''
        }
      },
      // 更新问题凭证文件列表
      updateBeforeProcessFiles(files) {
        this.beforeProcessFiles = files
        // 将文件保存到dataForm.beforeProcessFiles中
        if (files && files.length > 0) {
          // 将FileUploadVO返回的文件格式转换为后端SystemAttachment需要的格式
          this.dataForm.beforeProcessFiles = files.map(file => {
            // 处理文件路径，确保符合后端要求的格式
            let attDir = file.attDir || file.attachFileUrl || ''
            // 如果路径以/file/public/开头，去掉这个前缀，因为后端存储格式不需要
            if (attDir.startsWith('/file/public/')) {
              attDir = attDir.replace('/file/public/', '')
            } else if (attDir.startsWith('/file/')) {
              attDir = attDir.replace('/file/', '')
            }

            return {
              // 严格按照SystemAttachment的字段要求设置
              attId: file.id || file.attId || '', // 确保转换为字符串
              name: file.name || file.oldName || '', // 附件名称
              attDir: attDir, // 附件路径
              attSize: file.attSize || '', // 附件大小
              attType: 'before_process', // 问题凭证类型
              // 保留原有字段以保持兼容性
              fileName: file.name || file.oldName || '',
              filePath: attDir,
              url: attDir,
              createTime: null,
              createdBy: null,
              createTimeStr: null,
              delFlag: '0',
              updateBy: null,
              updateTime: null,
              i18nCode: '',
              i18nLanguage: '',
              originalFileName: file.name || file.oldName || '',
              position: 0,
              remark: file.remark || '',
              sort: 0,
              status: ''
            }
          })
        } else {
          this.dataForm.beforeProcessFiles = []
        }
      },
      // 更新处理凭证文件列表
      updateAfterProcessFiles(files) {
        this.afterProcessFiles = files
        // 将文件保存到dataForm.afterProcessFiles中
        if (files && files.length > 0) {
          // 将FileUploadVO返回的文件格式转换为后端SystemAttachment需要的格式
          this.dataForm.afterProcessFiles = files.map(file => {
            // 处理文件路径，确保符合后端要求的格式
            let attDir = file.attDir || file.attachFileUrl || ''
            // 如果路径以/file/public/开头，去掉这个前缀，因为后端存储格式不需要
            if (attDir.startsWith('/file/public/')) {
              attDir = attDir.replace('/file/public/', '')
            } else if (attDir.startsWith('/file/')) {
              attDir = attDir.replace('/file/', '')
            }

            return {
              // 严格按照SystemAttachment的字段要求设置
              attId: file.id || file.attId || '', // 确保转换为字符串
              name: file.name || file.oldName || '', // 附件名称
              attDir: attDir, // 附件路径
              attSize: file.attSize || '', // 附件大小
              attType: 'after_process', // 处理凭证类型
              // 保留原有字段以保持兼容性
              fileName: file.name || file.oldName || '',
              filePath: attDir,
              url: attDir,
              createTime: null,
              createdBy: null,
              createTimeStr: null,
              delFlag: '0',
              updateBy: null,
              updateTime: null,
              i18nCode: '',
              i18nLanguage: '',
              originalFileName: file.name || file.oldName || '',
              position: 0,
              remark: file.remark || '',
              sort: 0,
              status: ''
            }
          })
        } else {
          this.dataForm.afterProcessFiles = []
        }
      },
      init (id) { // 初始化表单验证规则
        this.dataForm.id = id || 0
        this.visible = true
        this.beforeProcessFiles = [] // 清空问题凭证文件列表
        this.afterProcessFiles = [] // 清空处理凭证文件列表
        this.$nextTick(function() {
          this.$refs['dataForm'].resetFields()
          // 新增祈愿时，默认设置csType为99
          if (!this.dataForm.id) {
            this.dataForm.csType = '99'
          }
          if (this.dataForm.id) {
            api.pmcomplaintsuggestionDetailApi(id).then(function(res) {
              // 处理日期字段，转换为 Date 对象
              const data = res;
              if (data.submitTime) {
                data.submitTime = new Date(data.submitTime)
              }
              this.dataForm = data;
              // 保存房屋ID
              const houseId = data.houseId;
              // 触发业主选择变化，加载房屋列表
              this.handleOwnerChange(data.ownerId, () => {
                // 重新设置房屋ID
                this.$nextTick(() => {
                  this.dataForm.houseId = houseId;
                  // 触发房屋选择变化，设置房屋业主ID
                  this.handleHouseChange(houseId);
                });
              });
            }.bind(this))
          }
        }.bind(this))
      },
      // 表单数据提交
      dataSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 格式化日期时间
            const submitData = { ...this.dataForm }
            if (submitData.submitTime) {
              submitData.submitTime = this.formatDate(submitData.submitTime)
            }
            if (submitData.handlerDate) {
              submitData.handlerDate = this.formatDate(submitData.handlerDate)
            }

            if (this.dataForm.id) {
              api.pmcomplaintsuggestionUpdateApi(submitData).then(function(res) {
                this.$message.success('保存成功')
                this.visible = false
                this.$emit('refreshDataList')
              }.bind(this));
            } else {
              api.pmcomplaintsuggestionCreateApi(submitData).then(function(res) {
                this.$message.success('新增成功')
                this.visible = false
                this.$emit('refreshDataList')
              }.bind(this));
            }
          }
        })
      },

      // 格式化日期时间为 YYYY-MM-DD HH:mm:ss
      formatDate(date) {
        if (!date) return ''
        const d = new Date(date)
        const year = d.getFullYear()
        const month = String(d.getMonth() + 1).padStart(2, '0')
        const day = String(d.getDate()).padStart(2, '0')
        const hours = String(d.getHours()).padStart(2, '0')
        const minutes = String(d.getMinutes()).padStart(2, '0')
        const seconds = String(d.getSeconds()).padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      }
    }
  }
</script>