cbjsxt-front-master/src/views/costAudit/auditInfo/auditManage/collectiveMain.vue

<template>
  <div class="collective">
    <div class="collective-header">
      <div class="collective-header-left">
        <span>集体审议</span>
      </div>
      <div class="collective-header-right">
        <el-button type="primary" @click="handlePrint">补充资料</el-button>
        <el-button type="primary" @click="handleAddRecord">新增记录</el-button>
      </div>
    </div>

    <!-- 集体审议记录列表 -->
    <div class="collective-list">
      <el-table :data="recordList" style="width: 100%" border>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="deliberationForm"
          label="审议形式"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="location"
          label="地点"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="hostPerson"
          label="主持人"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="reviewTime"
          label="审议时间"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="attachments"
          label="附件"
          width="80"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              v-if="scope.row.attachments && scope.row.attachments.length > 0"
              content="查看附件"
              placement="top"
            >
              <el-button type="text" @click="handleViewAttachment(scope.row)">
                <i class="el-icon-document"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleEditRecord(scope.row)">
              修改
            </el-button>
            <el-button
              type="text"
              style="color: #f56c6c"
              @click="handleDeleteRecord(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/修改集体审议记录弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showRecordDialog"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal="false"
      append-to-body
    >
      <div class="record-form">
        <!-- 表单行：审议形式 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">审议形式</label>
            <el-input
              v-model="formData.deliberationForm"
              placeholder="请输入审议形式"
              class="form-input"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：时间 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">时间</label>
            <div class="time-picker">
              <el-date-picker
                v-model="formData.startDate"
                type="datetime"
                placeholder="开始时间"
                value-format="yyyy-MM-dd HH:mm"
                :picker-options="startDateOptions"
                class="date-picker"
              ></el-date-picker>
              <span class="date-range-separator">至</span>
              <el-date-picker
                v-model="formData.endDate"
                type="datetime"
                placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm"
                :picker-options="endDateOptions"
                class="date-picker"
              ></el-date-picker>
            </div>
          </div>
        </div>

        <!-- 表单行：地点 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">地点</label>
            <el-input
              v-model="formData.location"
              placeholder="请输入地点"
              class="form-input"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：主持人和记录人 -->
        <div class="form-row">
          <div class="form-item form-item-compact">
            <label class="form-label required">主持人</label>
            <el-input
              v-model="formData.hostPerson"
              placeholder="请输入参加人员"
              class="form-input"
            ></el-input>
            <label class="required">记录人</label>
            <el-input
              v-model="formData.recordPerson"
              placeholder="请输入记录人"
              class="form-input"
            ></el-input>
          </div>
        </div>
        <!-- 表单行：参加人员 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">参加人员</label>
            <el-input
              v-model="formData.participants"
              placeholder="请输入参加人员"
              class="form-input"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：审议项目 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label">审议项目</label>
            <el-input
              v-model="formData.reviewProject"
              placeholder="自动获取项目名称"
              readonly
              class="form-input readonly-input"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：被审单位 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label">被审单位</label>
            <el-input
              v-model="formData.auditedUnit"
              placeholder="自动获取被审单位名称"
              readonly
              class="form-input readonly-input"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：审议情况 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">审议情况</label>
            <el-input
              v-model="formData.reviewSituation"
              type="textarea"
              :rows="5"
              placeholder="填写"
              class="form-textarea"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：审议结论意见 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">审议结论意见</label>
            <el-input
              v-model="formData.reviewConclusion"
              type="textarea"
              :rows="5"
              placeholder="填写"
              class="form-textarea"
            ></el-input>
          </div>
        </div>

        <!-- 表单行：审议记录扫描件 -->
        <div class="form-row">
          <div class="form-item">
            <label class="form-label required">审议记录扫描件</label>
            <div class="upload-file">
              <el-upload
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleFileChange"
                :file-list="fileList"
                accept=".doc,.docx,.pdf"
              >
                <el-button size="small" type="primary">选择文件</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传doc、docx、pdf格式文件
                </div>
              </el-upload>
              <div v-if="fileList.length > 0" class="file-name">
                <a
                  :href="fileList[0].url || '#'"
                  target="_blank"
                  class="file-link"
                >
                  {{ fileList[0].name }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 弹窗底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="handleCancel">取消</el-button>
        <el-button type="primary" class="save-btn" @click="handleSave">
          保存
        </el-button>
      </div>
    </el-dialog>

    <!-- 补充资料弹窗 -->
    <el-dialog
      :visible.sync="showSupplementDialog"
      title="补充资料"
      width="600px"
      :modal="false"
      custom-class="supplement-dialog"
    >
      <div class="supplement-dialog-content">
        <div class="supplement-form-item">
          <label class="supplement-form-label required">补充意见:</label>
          <el-input
            v-model="additionalParams.content"
            type="textarea"
            :rows="6"
            placeholder="请输入补充意见"
            maxlength="500"
            show-word-limit
            class="supplement-textarea"
          />
        </div>
        <div class="supplement-form-item">
          <label class="supplement-form-label required">选择子单位:</label>
          <el-select
            v-model="additionalParams.selectedSubUnits"
            multiple
            collapse-tags
            placeholder="请选择子单位"
            class="supplement-select"
            filterable
          >
            <el-option
              v-for="unit in subUnitList"
              :key="unit.id"
              :label="unit.name"
              :value="unit.id"
            />
          </el-select>
        </div>
        <div class="supplement-form-item">
          <label class="supplement-form-label required">发送方式:</label>
          <el-checkbox-group v-model="additionalParams.sendType">
            <el-checkbox label="site">站内消息</el-checkbox>
            <el-checkbox label="sms">短信通知</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="supplement-dialog-footer">
        <el-button @click="showSupplementDialog = false">取消</el-button>
        <el-button type="primary" @click="submitSupplement">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    addCollectiveDeliberate,
    updateCollectiveDeliberate,
    deleteCollectiveDeliberate,
    getCollectiveDeliberateList,
    getSubUnitList,
  } from '@/api/audit/collective'
  import { getReviewTask } from '@/api/audit/reviewTask'
  export default {
    name: 'CollectiveMain',
    components: {},
    props: {
      visible: {
        type: Boolean,
        default: true,
      },
      id: {
        type: [String, Number],
        default: null,
      },
      currentNode: {
        type: String,
        default: '',
      },
      currentStatus: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        // 记录列表数据
        recordList: [],
        // 弹窗显示状态
        showRecordDialog: false,
        showSupplementDialog: false,
        // 表单数据
        formData: {
          id: '',
          deliberationForm: '',
          startDate: '',
          endDate: '',
          location: '',
          hostPerson: '',
          recordPerson: '',
          participants: '',
          reviewProject: '',
          auditedUnit: '',
          reviewSituation: '',
          reviewConclusion: '',
          attachments: [],
        },
        // 文件列表
        fileList: [],
        // 当前操作类型：add/edit
        operationType: 'add',
        // 补充资料弹窗数据
        additionalParams: {
          content: '',
          sendType: [],
          selectedSubUnits: [],
        },
        // 子单位列表
        subUnitList: [],
        // 模拟用户列表数据
        userList: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
        ],
        // 开始时间选择器选项
        startDateOptions: {
          disabledDate: (time) => {
            if (this.formData.endDate) {
              return time.getTime() > new Date(this.formData.endDate).getTime()
            }
            return false
          },
          disabledTime: (date) => {
            if (this.formData.endDate) {
              const endDate = new Date(this.formData.endDate)
              if (
                date.getFullYear() === endDate.getFullYear() &&
                date.getMonth() === endDate.getMonth() &&
                date.getDate() === endDate.getDate()
              ) {
                return {
                  disabledHours: () => {
                    const hours = []
                    const endHour = endDate.getHours()
                    for (let i = endHour + 1; i < 24; i++) {
                      hours.push(i)
                    }
                    return hours
                  },
                  disabledMinutes: (selectedHour) => {
                    if (selectedHour === endHour) {
                      const minutes = []
                      const endMinute = endDate.getMinutes()
                      for (let i = endMinute + 1; i < 60; i++) {
                        minutes.push(i)
                      }
                      return minutes
                    }
                    return []
                  },
                }
              }
            }
            return {}
          },
        },
        // 结束时间选择器选项
        endDateOptions: {
          disabledDate: (time) => {
            if (this.formData.startDate) {
              return (
                time.getTime() < new Date(this.formData.startDate).getTime()
              )
            }
            return time.getTime() < Date.now() - 8.64e7 // 禁止选择过去的日期
          },
          disabledTime: (date) => {
            if (this.formData.startDate) {
              const startDate = new Date(this.formData.startDate)
              if (
                date.getFullYear() === startDate.getFullYear() &&
                date.getMonth() === startDate.getMonth() &&
                date.getDate() === startDate.getDate()
              ) {
                return {
                  disabledHours: () => {
                    const hours = []
                    const startHour = startDate.getHours()
                    for (let i = 0; i < startHour; i++) {
                      hours.push(i)
                    }
                    return hours
                  },
                  disabledMinutes: (selectedHour) => {
                    if (selectedHour === startHour) {
                      const minutes = []
                      const startMinute = startDate.getMinutes()
                      for (let i = 0; i < startMinute; i++) {
                        minutes.push(i)
                      }
                      return minutes
                    }
                    return []
                  },
                }
              }
            }
            return {}
          },
        },
      }
    },
    computed: {
      dialogTitle() {
        return this.operationType === 'add'
          ? '新增集体审议记录'
          : '修改集体审议记录'
      },
    },
    mounted() {
      this.loadRecordList()
      this.getProjectInfo()
    },
    methods: {
      // 加载记录列表
      loadRecordList() {
        // 调用API获取集体审议记录列表
        const queryParams = {
          taskId: this.id, // 使用props传入的id作为项目ID
        }

        getCollectiveDeliberateList(queryParams)
          .then((res) => {
            if (res && res.state && res.code === 200) {
              // 根据新的接口返回格式，从res.value中获取数据
              const data = res.value.records || []
              // 处理返回的数据，转换为前端表格需要的格式
              this.recordList = Array.isArray(data)
                ? data.map((item) => ({
                    id: item.id,
                    deliberationForm: item.deliberationForm,
                    location: item.location,
                    hostPerson: item.hostPerson,
                    recordPerson: item.recordPerson,
                    reviewTime: item.beginTime,
                    attachments: item.attachmentIds
                      ? item.attachmentIds.split(',').map((attachmentId) => ({
                          name: `附件_${attachmentId}`,
                          url: '#', // 实际应该根据附件ID获取完整URL
                        }))
                      : [],
                  }))
                : []
            } else {
              this.$message.error(res.message || '获取记录列表失败')
              // 如果API调用失败，使用模拟数据
              this.recordList = []
            }
          })
          .catch((error) => {
            this.$message.error('获取记录列表失败：' + error.message)
            // 错误时使用模拟数据
          })
      },

      // 获取项目信息
      getProjectInfo() {
        // 模拟获取项目信息，实际应该调用API
        this.formData.reviewProject = 'XX项目成本监审'
        this.formData.auditedUnit = 'XX有限公司'
      },

      // 补充资料
      handlePrint() {
        this.additionalParams = {
          content: '',
          sendType: [],
          selectedSubUnits: [],
        }
        this.loadSubUnitList()
        this.showSupplementDialog = true
      },

      // 加载子单位列表
      async loadSubUnitList() {
        if (!this.id) {
          return
        }
        try {
          const res = await getSubUnitList({ taskId: this.id })
          if (res && res.code === 200 && res.value) {
            this.subUnitList = Array.isArray(res.value)
              ? res.value.map((item) => ({
                  id: item.id || item.unitId,
                  name: item.name || item.unitName,
                  taskId: item.taskId || item.childTaskId, // 保存子任务ID
                }))
              : []
          } else {
            this.subUnitList = []
          }
        } catch (error) {
          console.error('获取子单位列表失败:', error)
          this.subUnitList = []
        }
      },

      // 提交补充资料
      async submitSupplement() {
        // 验证补充意见
        if (
          !this.additionalParams.content ||
          !this.additionalParams.content.trim()
        ) {
          this.$message.error('请输入补充意见')
          return
        }

        // 验证任务ID
        if (!this.id) {
          this.$message.error('缺少任务ID')
          return
        }

        // 验证选择子单位
        if (
          !this.additionalParams.selectedSubUnits ||
          this.additionalParams.selectedSubUnits.length === 0
        ) {
          this.$message.error('请选择子单位')
          return
        }

        // 验证发送方式
        if (
          !this.additionalParams.sendType ||
          this.additionalParams.sendType.length === 0
        ) {
          this.$message.error('请选择发送方式')
          return
        }

        try {
          // 转换发送方式：site -> 1, sms -> 2
          const sendTypeMap = {
            site: '1',
            sms: '2',
          }
          const sendTypeStr = this.additionalParams.sendType
            .map((type) => sendTypeMap[type])
            .filter(Boolean)
            .join(',')

          // 获取子任务ID（选中的子单位ID）
          const childTaskId = this.additionalParams.selectedSubUnits.join(',')

          const params = {
            taskId: this.id,
            processNodeKey: this.currentNode || '',
            key: 1,
            sendType: sendTypeStr,
            content: this.additionalParams.content,
            childTaskId: childTaskId,
          }

          const response = await getReviewTask(params)

          if (response && response.code === 200) {
            this.$message.success(response.message || '补充资料发送成功')
            // 关闭弹窗
            this.showSupplementDialog = false
            // 重置表单数据
            this.additionalParams = {
              content: '',
              sendType: [],
              selectedSubUnits: [],
            }
          } else {
            this.$message.error(response?.message || '补充资料发送失败')
          }
        } catch (error) {
          console.error('补充资料发送失败:', error)
          this.$message.error('补充资料发送失败')
        }
      },

      // 新增记录
      handleAddRecord() {
        this.operationType = 'add'
        this.resetForm()
        this.showRecordDialog = true
      },

      // 编辑记录
      handleEditRecord(row) {
        this.operationType = 'edit'
        // 复制数据到表单
        this.formData = {
          id: row.id,
          deliberationForm: row.deliberationForm,
          location: row.location,
          // 解析时间，实际应该根据API返回格式处理
          startDate: row.reviewTime,
          endDate: row.reviewTime,
          hostPerson: row.hostPerson,
          recordPerson: row.recordPerson,
          participants: '',
          reviewProject: this.formData.reviewProject,
          auditedUnit: this.formData.auditedUnit,
          reviewSituation: '',
          reviewConclusion: '',
          attachments: row.attachments || [],
        }
        // 设置文件列表
        this.fileList = row.attachments
          ? row.attachments.map((file) => ({
              name: file.name,
              url: file.url,
              uid: file.name,
            }))
          : []
        this.showRecordDialog = true
      },

      // 删除记录
      handleDeleteRecord(row) {
        this.$confirm('确定要删除这条记录吗？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            // 调用API进行删除操作
            deleteCollectiveDeliberate(row.id)
              .then((res) => {
                if (res && res.state && res.code === 200) {
                  this.$message.success('删除成功')
                  this.loadRecordList() // 重新加载记录列表
                } else {
                  this.$message.error(res.message || '删除失败')
                }
              })
              .catch((error) => {
                this.$message.error('删除失败：' + error.message)
              })
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
      },

      // 查看附件
      handleViewAttachment(row) {
        if (row.attachments && row.attachments.length > 0) {
          // 打开附件链接
          window.open(row.attachments[0].url, '_blank')
        }
      },

      // 文件改变处理
      handleFileChange(file, fileList) {
        this.fileList = fileList.slice(-1) // 只保留最新选择的文件
      },

      // 保存记录
      handleSave() {
        // 表单验证
        if (!this.formData.deliberationForm) {
          this.$message.error('请输入审议形式')
          return
        }
        if (!this.formData.location) {
          this.$message.error('请输入地点')
          return
        }
        if (!this.formData.startDate || !this.formData.endDate) {
          this.$message.error('请选择时间')
          return
        }
        if (!this.formData.hostPerson) {
          this.$message.error('请选择主持人')
          return
        }
        if (!this.formData.recordPerson) {
          this.$message.error('请选择记录人')
          return
        }

        // 构建保存数据，按照接口要求的参数格式
        const saveData = {
          id: this.formData.id,
          taskId: this.id, // 使用props传入的id作为项目ID
          deliberationForm: this.formData.deliberationForm,
          beginTime: this.formData.startDate,
          endTime: this.formData.endDate,
          location: this.formData.location,
          hostPerson: this.formData.hostPerson,
          recordPerson: this.formData.recordPerson,
          participants: this.formData.participants,
          enterpriseId: '', // 需要从项目信息中获取监审单位id
          deliberationContent: this.formData.reviewSituation,
          conclusionOpinion: this.formData.reviewConclusion,
          attachmentIds: this.fileList
            .map((file) => file.uid || file.name)
            .join(','), // 附件ID集合，多个用逗号分隔
          remark: '', // 备注
        }

        // 调用API进行保存操作
        if (this.operationType === 'add') {
          // 添加新记录
          addCollectiveDeliberate(saveData)
            .then((res) => {
              if (res && res.state && res.code === 200) {
                this.$message.success('新增成功')
                this.loadRecordList() // 重新加载记录列表
                this.showRecordDialog = false
                this.resetForm()
              } else {
                this.$message.error(res.message || '新增失败')
              }
            })
            .catch((error) => {
              this.$message.error('新增失败：' + error.message)
            })
        } else {
          // 更新现有记录
          updateCollectiveDeliberate(saveData)
            .then((res) => {
              if (res && res.state && res.code === 200) {
                this.$message.success('修改成功')
                this.loadRecordList() // 重新加载记录列表
                this.showRecordDialog = false
                this.resetForm()
              } else {
                this.$message.error(res.message || '修改失败')
              }
            })
            .catch((error) => {
              this.$message.error('修改失败：' + error.message)
            })
        }
      },

      // 取消操作
      handleCancel() {
        this.showRecordDialog = false
        this.resetForm()
      },

      // 重置表单
      resetForm() {
        this.formData = {
          id: '',
          deliberationForm: '',
          startDate: '',
          endDate: '',
          location: '',
          hostPerson: '',
          recordPerson: '',
          participants: '',
          reviewProject: this.formData.reviewProject, // 保持项目信息不变
          auditedUnit: this.formData.auditedUnit, // 保持单位信息不变
          reviewSituation: '',
          reviewConclusion: '',
          attachments: [],
        }
        this.fileList = []
      },
    },
  }
</script>

<style scoped>
  /* 主容器样式 */
  .collective {
    padding: 10px;
    font-family: 'Microsoft YaHei', sans-serif;
  }

  /* 页面头部样式 */
  .collective-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 5px 0;
  }

  .collective-header-left span {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  /* 列表容器样式 */
  .collective-list {
    margin-top: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
  }

  /* 表单容器样式 */
  .record-form {
    padding: 20px 0 0;
    background: #fff;
  }

  /* 表单行样式 */
  .form-row {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
    min-height: 40px;
  }

  /* 表单项样式 */
  .form-item {
    flex: 1;
    margin-right: 20px;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* 紧凑表单项目，减小间距 */
  .form-item-compact {
    margin-right: 20px; /* 减小右侧间距 */
    width: calc(50% - 10px); /* 调整宽度以适应紧凑布局 */
  }

  .form-item:last-child {
    margin-right: 0;
  }

  /* 表单标签样式 */
  .form-label {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin-right: 10px;
    font-weight: 500;
    color: #303133;
    font-size: 14px;
    line-height: 32px;
    vertical-align: middle;
    flex-shrink: 0;
  }

  /* 必填项标记 */
  .form-label.required::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }

  /* 表单输入框样式 */
  .form-input {
    flex: 1;
    max-width: 600px;
  }

  /* 只读输入框样式 */
  .readonly-input {
    background-color: #f5f7fa;
    color: #909399;
    cursor: not-allowed;
  }

  /* 表单选择器样式 */
  .form-select {
    width: 200px;
  }

  /* 表单文本域样式 */
  .form-textarea {
    flex: 1;
    max-width: 600px;
  }

  /* 时间选择器容器样式 */
  .time-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    max-width: 400px;
  }

  /* 日期选择器样式 */
  .date-picker {
    width: 180px;
  }

  /* 日期范围分隔符 */
  .date-range-separator {
    margin: 0 10px;
    color: #606266;
    font-size: 14px;
  }

  /* 文件上传样式 */
  .upload-file {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 400px;
  }

  /* 文件名称样式 */
  .file-name {
    margin-top: 10px;
    padding: 5px 0;
    word-break: break-all;
  }

  /* 文件链接样式 */
  .file-link {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;
  }

  .file-link:hover {
    text-decoration: underline;
    color: #66b1ff;
  }

  /* 对话框样式优化 */
  ::v-deep .el-dialog__header {
    padding: 20px 25px 15px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fafafa;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }

  ::v-deep .el-dialog__body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
  }

  ::v-deep .el-dialog__footer {
    padding: 15px 25px 20px;
    border-top: 1px solid #ebeef5;
    margin-top: 10px;
    background-color: #fafafa;
  }

  /* 按钮样式优化 */
  .cancel-btn {
    margin-right: 15px;
  }

  .save-btn {
    min-width: 80px;
  }

  /* 表格样式优化 */
  ::v-deep .el-table th {
    background-color: #f5f7fa;
    font-weight: 500;
    color: #606266;
    border-right: 1px solid #ebeef5;
  }

  ::v-deep .el-table td {
    color: #606266;
    border-right: 1px solid #ebeef5;
  }

  /* 输入框样式优化 */
  ::v-deep .el-input__inner,
  ::v-deep .el-select .el-input__inner,
  ::v-deep .el-date-editor .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    height: 32px;
    line-height: 32px;
  }

  ::v-deep .el-input__inner:hover,
  ::v-deep .el-select .el-input__inner:hover,
  ::v-deep .el-date-editor .el-input__inner:hover {
    border-color: #c0c4cc;
  }

  ::v-deep .el-input__inner:focus,
  ::v-deep .el-select .el-input__inner:focus,
  ::v-deep .el-date-editor .el-input__inner:focus {
    border-color: #409eff;
    outline: none;
  }

  /* 多行文本域样式 */
  ::v-deep .el-textarea__inner {
    resize: vertical;
    border-radius: 4px;
    min-height: 100px;
    padding: 8px 12px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .collective {
      padding: 5px;
    }

    .collective-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .form-row {
      flex-direction: column;
      margin-bottom: 15px;
    }

    .form-item {
      margin-right: 0;
      margin-bottom: 15px;
      flex-direction: column;
      align-items: flex-start;
    }

    .form-item:last-child {
      margin-bottom: 0;
    }

    .form-label {
      width: 100%;
      text-align: left;
      margin-bottom: 5px;
      line-height: 1.5;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .time-picker,
    .upload-file {
      width: 100%;
      max-width: none;
    }

    .date-picker {
      width: 100%;
    }

    ::v-deep .el-dialog {
      width: 95% !important;
      margin: 5% auto;
      max-width: 600px;
    }

    ::v-deep .el-dialog__header,
    ::v-deep .el-dialog__body,
    ::v-deep .el-dialog__footer {
      padding: 15px;
    }

    ::v-deep .el-dialog__body {
      max-height: 70vh;
    }

    .time-picker {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    .date-range-separator {
      display: none;
    }

    .dialog-footer {
      text-align: center;
    }

    .cancel-btn,
    .save-btn {
      margin: 0 5px;
    }
  }

  /* 补充资料弹窗样式优化 */
  ::v-deep .supplement-dialog {
    .el-dialog__header {
      padding: 20px 25px 15px;
      border-bottom: 1px solid #ebeef5;
      background-color: #fafafa;
    }

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }

    .el-dialog__body {
      padding: 25px;
    }

    .el-dialog__footer {
      padding: 15px 25px 20px;
      border-top: 1px solid #ebeef5;
      background-color: #fafafa;
      text-align: right;
    }
  }

  .supplement-dialog-content {
    padding: 0;
  }

  .supplement-form-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .supplement-form-item:last-child {
    margin-bottom: 0;
  }

  .supplement-form-label {
    display: inline-block;
    width: 100px;
    text-align: left;
    color: #606266;
    font-size: 14px;
    line-height: 32px;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .supplement-form-label.required::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }

  .supplement-textarea {
    flex: 1;
  }

  .supplement-select {
    flex: 1;
    min-width: 300px;
  }

  .supplement-checkbox-group {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .supplement-checkbox-group .el-checkbox {
    margin-bottom: 8px;
  }

  .supplement-checkbox-group .el-checkbox:last-child {
    margin-bottom: 0;
  }

  .supplement-dialog-footer {
    text-align: right;
  }

  .supplement-dialog-footer .el-button {
    margin-left: 10px;
  }

  /* 打印样式 */
  @media print {
    .collective {
      padding: 0;
    }

    .collective-header-right {
      display: none;
    }

    ::v-deep .el-button {
      display: none;
    }

    ::v-deep .el-dialog {
      box-shadow: none !important;
      margin: 0 !important;
      width: 100% !important;
    }

    ::v-deep .el-dialog__header,
    ::v-deep .el-dialog__footer {
      display: none;
    }

    ::v-deep .el-dialog__body {
      padding: 0;
      overflow: visible;
    }
  }
</style>