bonus-ui/src/views/system/project/index.vue

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form
      :inline="true"
      label-width="80px"
      label-position="right"
      size="small"
      ref="searchFormRef"
      :model="searchParams"
    >
      <el-card class="search-box">
        <!-- 关键修改：使用 flex 布局实现自适应换行 -->
        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">
          <el-form-item prop="pro_name" label="工程名称" style="margin-bottom: 0; width: 320px">
            <el-input
              clearable
              placeholder="请输入工程名称"
              v-model="searchParams.pro_name"
              style="width: 100%; min-width: 200px;"
            />
          </el-form-item>

<!--          <el-form-item prop="pro_code" label="工程编号" style="margin-bottom: 0; width: 320px">-->
<!--            <el-input-->
<!--              clearable-->
<!--              placeholder="请输入工程编号"-->
<!--              v-model="searchParams.pro_code"-->
<!--              style="width: 100%; min-width: 200px;"-->
<!--            />-->
<!--          </el-form-item>-->

<!--          <el-form-item prop="org_name" label="建管单位" style="margin-bottom: 0;  width: 320px">-->
<!--            <el-input-->
<!--              clearable-->
<!--              placeholder="请输入单位名称"-->
<!--              v-model="searchParams.org_name"-->
<!--              style="width: 100%; min-width: 200px;"-->
<!--            />-->
<!--          </el-form-item>-->

          <el-form-item prop="project_type" label="工程类型" style="margin-bottom: 0; width: 320px">
            <el-select
              clearable
              placeholder="选择工程类型"
              v-model="searchParams.project_type"
              style="width: 100%; min-width: 200px;"
            >
              <el-option
                v-for="item in projectTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 按钮区域 -->
          <div style="display: flex; gap: 10px; margin-left: auto;">
            <el-button @click="getProjectListData" size="mini" icon="el-icon-search" type="primary" class="primary-lease">
              查询
            </el-button>
            <el-button @click="onReset" icon="el-icon-refresh" size="mini" class="primary-lease">重置</el-button>
          </div>
        </div>


        <el-row>

        </el-row>
      </el-card>
    </el-form>

    <!-- 数据列表 -->
    <el-card class="content-box">
      <el-row style="margin-bottom: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
        <el-button
          size="mini"
          @click="handleAdd"
          type="primary"
          class="primary-lease"
        >
          工程新建
        </el-button>
        <el-button
          size="mini"
          type="danger"
          class="primary-lease"
          @click="handleBatchDelete"
          :disabled="selectedRows.length === 0"
        >
          批量删除
        </el-button>
      </el-row>


      <div class="table-container">
        <el-table
          :data="projectList"
          show-overflow-tooltip
          border stripe height="100%"
          @selection-change="handleSelectionChange"
        >
          <!--复选列-->
          <el-table-column type="selection" width="55" align="center"/>

          <el-table-column align="center" label="序号" type="index" width="80"/>

          <el-table-column align="center" prop="pro_name" label="工程名称"/>

          <el-table-column align="center" label="工程编号">
            <template slot-scope="scope">
              <a
                style="cursor: pointer; color: #00a288; text-decoration: underline"
                @click="handleToDetails(scope.row.id)"
              >
                {{ scope.row.pro_code }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="dict_label" label="工程类型"/>
          <el-table-column align="center" prop="voltage" label="电压等级"/>
          <el-table-column align="center" prop="scale" label="规模"/>
          <el-table-column align="center" prop="province" label="所在省"/>
          <el-table-column align="center" prop="city" label="所在市"/>
          <el-table-column align="center" prop="county" label="所在区/县"/>

          <el-table-column align="center" prop="mechanize_rate" label="机械化率"/>
          <el-table-column align="center" label="操作" :width="220">
            <template slot-scope="scope">



              <!-- 查看详情按钮（复用编辑按钮样式，仅改文字和方法） -->
<!--              <el-button-->
<!--                size="small"-->
<!--                type="info"-->
<!--                class="primary-lease"-->
<!--                @click="handleViewDetails(scope.row)"-->
<!--              >-->
<!--                查看-->
<!--              </el-button>-->



              <!-- 编辑按钮：移除 v-if 条件，直接显示 -->
              <el-button
                size="small"
                type="primary"
                class="primary-lease"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <!-- 删除按钮：移除 v-if 条件，直接显示 -->
              <el-popconfirm
                width="220"
                icon="el-icon-info"
                icon-color="#626AEF"
                title="确定删除该项工程吗？"
                @confirm="handleDelete(scope.row.id)"
              >
                <template slot="reference">
                  <el-button size="small" type="danger" class="primary-lease" style="margin-left: 8px;">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total,sizes,prev, pager, next"
          :total="total"
          :page-size="searchParams.pageSize"
          :current-page="searchParams.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      width="1000px"
      @close="handleDialogClose"
      destroy-on-close
      :title="dialogTitle"
      :visible.sync="addOrEditDialogVisible"
      custom-class="simple-dialog"
    >
      <el-form
        label-width="100px"
        label-position="right"
        ref="addOrEditFormRef"
        :model="addOrEditForm"
        :rules="addOrEditFormRules"
        class="simple-form"
        label-class="el-form-item__label"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="工程名称" prop="pro_name">
                  <el-input
                    v-model="addOrEditForm.pro_name"
                    placeholder="请输入工程名称"
                    style="width: 100%"
                    maxlength="50"
                    show-word-limit
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程编号" prop="pro_code">
                  <el-input
                    v-model="addOrEditForm.pro_code"
                    placeholder="请输入工程编号"
                    style="width: 100%"
                    maxlength="30"
                    show-word-limit
                    :disabled="!isAdd || isView"

                  />
                </el-form-item>
              </el-col>
            </el-row>


            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="电压等级" prop="voltage">
                  <el-input
                    v-model="addOrEditForm.voltage"
                    placeholder="请输入电压等级（如：500）"
                    style="width: 100%"
                    maxlength="10"
                    show-word-limit
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规模" prop="scale">
                  <el-input
                    v-model="addOrEditForm.scale"
                    placeholder="请输入规模"
                    style="width: 100%"
                    maxlength="50"
                    show-word-limit
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="工程类型" prop="project_type"> <!-- 注意prop要与表单字段对齐 -->
                  <el-select
                    clearable
                    style="width: 100%"
                    placeholder="请选择工程类型"
                    v-model="addOrEditForm.project_type"
                    :disabled="isView"
                  >
                    <el-option
                      v-for="item in projectTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="建管单位" prop="org_name">
                  <el-input
                    v-model="addOrEditForm.org_name"
                    placeholder="请输入单位"
                    style="width: 100%"
                    maxlength="50"
                    show-word-limit
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>


            <el-col :span="12">
              <el-form-item label="机械化率" prop="mechanize_rate">
                <el-input
                  v-model="addOrEditForm.mechanize_rate"
                  placeholder="请输入机械化率"
                  style="width: 100%"
                  maxlength="50"
                  show-word-limit
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
        </el-row>



            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="开工时间" prop="start_time">
                  <el-date-picker
                    type="date"
                    placeholder="选择开工时间"
                    v-model="addOrEditForm.start_time"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投产时间" prop="put_time">
                  <el-date-picker
                    type="date"
                    placeholder="选择投产时间"
                    v-model="addOrEditForm.put_time"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="所在省" prop="province">
                  <el-select
                    clearable
                    style="width: 100%"
                    placeholder="请选择所在省"
                    v-model="addOrEditForm.province"
                    @change="loadCities"
                  >
                    <el-option
                      v-for="item in provinceOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在市" prop="city">
                  <el-select
                    clearable
                    style="width: 100%"
                    placeholder="请选择所在市"
                    v-model="addOrEditForm.city"
                    @change="loadDistricts"
                    :disabled="!addOrEditForm.province"
                  >
                  <el-option
                    v-for="item in cityOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在区/县" prop="county">
                  <el-select
                    clearable
                    style="width: 100%"
                    placeholder="请选择所在区/县"
                    v-model="addOrEditForm.county"
                    :disabled="!addOrEditForm.city"
                  >
                  <el-option
                    v-for="item in districtOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    type="textarea"
                    v-model="addOrEditForm.remark"
                    placeholder="请输入备注内容"
                    :rows="3"
                    style="width: 100%"
                    maxlength="100"
                    show-word-limit
                    :disabled="isView"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrEditDialogVisible = false" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading" class="confirm-btn" v-if="!isView">
          <span v-if="!submitLoading">{{ isAdd ? '新增' : '保存' }}</span>
          <span v-else>提交中...</span>
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProject,
  getProject,
  addProject,
  updateProject,
  delProject,
  getProjectTypeList,
  delProjectBatch  // 新增：导入批量删除API
} from '@/api/system/project'
import { Message } from 'element-ui'
import { getProvinces, getCities, getCounties } from '@/api/system/region'

export default {
  name: 'ProjectManagement',
  data() {
    return {
      total: 0,
      projectList: [],
      selectedRows: [],   // 存储选中的表格行
      provinceOptions: [],    // 省份下拉选项
      cityOptions: [],        // 城市下拉选项
      districtOptions: [],    // 区县下拉选项
      dialogTitle: '新增工程',
      addOrEditDialogVisible: false,
      submitLoading: false,
      isAdd: true,
      isView: false,

      // 搜索参数
      searchParams: {
        pro_name: '',
        pro_code: '',
        project_type: '',
        org_name: '',
        dict_value:'',
        pageSize: 10,
        pageNum: 1
      },

      // 表单数据
      addOrEditForm: {
        id: '',
        pro_name: '',
        pro_code: '',
        project_type: '',
        org_name: '',
        contractUnit: '',
        mechanize_rate: '',
        remark: '',
        voltage: '',
        scale: '',
        province: '',
        city: '',
        county: '',
        start_time: '',
        put_time: '',
      },

      projectTypeList: [],

      // 表单验证规则
      addOrEditFormRules: {
        // 以下字段保持必填
        pro_name: [
          { required: true, message: '请输入工程名称', trigger: 'blur' }
        ],
        pro_code: [
          { required: true, message: '请输入工程编号', trigger: 'blur' }
        ],
        voltage: [
          { required: true, message: '请输入电压等级', trigger: 'blur' }
        ],
        scale: [
          { required: true, message: '请输入规模', trigger: 'blur' }
        ],
        project_type: [
          { required: true, message: '请选择工程类型', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择所在省', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择所在市', trigger: 'blur' }
        ],
        county: [
          { required: true, message: '请选择所在区/县', trigger: 'blur' }
        ],

        start_time: [

          { message: '请选择开工时间', trigger: 'change' }
        ],
        put_time: [
          { message: '请选择投产时间', trigger: 'change' },
          { validator: this.validateTimeDifference, trigger: 'change' }
        ],
        mechanize_rate: [

          {
            pattern: /^(100(\.0{1,2})?|0(\.\d{1,2})?|[1-9]\d{0,1}(\.\d{1,2})?)$/,
            message: '请输入 0 ~ 100 之间的有效数字，且不能以 0 开头（如 01、010）',
            trigger: 'blur'
          }
        ],
        org_name: [
          // 非必填，仅保留长度限制（可选）
          { max: 50, message: '单位名称不能超过50个字符', trigger: 'blur' }
        ],
        remark: [
          { max: 100, message: '备注不能超过100个字符', trigger: 'blur' }
        ],
        contractUnit: [] // 完全非必填，留空数组
      }
    }
  },

  mounted() {
    this.loadProvinces() // 页面加载时加载省份
    this.getProjectListData()
    this.loadProjectTypes()
  },

  methods: {

    // 自定义校验：投产时间必须晚于开工时间
    validateTimeDifference(rule, value, callback) {
      const startTime = this.addOrEditForm.start_time; // 开工时间
      const endTime = value; // 投产时间（当前校验字段的值）

      // 若未选择投产时间，直接通过（非必填）
      if (!endTime) return callback();

      // 若已选择开工时间，校验时间差
      if (startTime) {
        const startDate = new Date(startTime);
        const endDate = new Date(endTime);
        // 若投产时间早于或等于开工时间，提示错误
        if (endDate <= startDate) {
          return callback(new Error('投产时间必须晚于开工时间'));
        }
      }

      // 校验通过
      callback();
    },

    async loadProvinces() {
      try {
        const res = await getProvinces()
        if (res.code === 200) {
          // 关键转换：将 areaCode → value，name → label
          this.provinceOptions = res.data.map(item => ({
            value: item.areaCode, // 下拉框的选项值（存储用）
            label: item.short_name       // 下拉框的显示文本（用户看）
          }))
        } else {
          Message.error('加载省份失败：' + (res.message || '未知错误'))
        }
      } catch (error) {
        console.error('省份加载异常：', error)
        Message.error('网络异常，无法加载省份数据')
      }
    },

    // 加载城市
    async loadCities(provinceAreaCode) {
      console.log('loadCities param:', provinceAreaCode)

      // 关键改动：当省份改变时，清空城市和区县的选项及表单值
      // 即使 provinceAreaCode 为空（例如用户清空了省份选择），也执行清空操作
      this.cityOptions = [];
      this.districtOptions = [];
      this.addOrEditForm.city = '';
      this.addOrEditForm.county = '';

      // 如果没有传入有效的省份编码，则直接返回
      if (!provinceAreaCode || !/^\d{6,12}$/.test(provinceAreaCode)) {
        console.error('❌ 传入了无效的 provinceAreaCode：', provinceAreaCode);
        return;
      }

      try {
        const res = await getCities(provinceAreaCode)
        if (res.code === 200) {
          this.cityOptions = res.data.map(item => ({
            value: item.areaCode,
            label: item.short_name
          }))
        } else {
          Message.error('加载城市失败')
        }
      } catch (error) {
        console.error('城市加载异常：', error)
        Message.error('无法加载城市数据')
      }
    },

// 加载区县
    async loadDistricts(cityAreaCode) {
      console.log('loadDistricts param:', cityAreaCode)

      // 关键改动：当城市改变时，清空区县的选项及表单值
      // 即使 cityAreaCode 为空，也执行清空操作
      this.districtOptions = [];
      this.addOrEditForm.county = '';

      // 如果没有传入有效的城市编码，则直接返回
      if (!cityAreaCode || !/^\d{6,12}$/.test(cityAreaCode)) {
        console.error('❌ 传入了无效的 cityAreaCode：', cityAreaCode);
        return;
      }

      try {
        const res = await getCounties(cityAreaCode)
        if (res.code === 200) {
          this.districtOptions = res.data.map(item => ({
            value: item.areaCode,
            label: item.name
          }))
        } else {
          Message.error('加载区县失败')
        }
      } catch (error) {
        console.error('区县加载异常：', error)
        Message.error('无法加载区县数据')
      }
    },



    // 获取工程列表
    async getProjectListData() {
      try {
        const res = await listProject(this.searchParams)
        if (res.code === 200) {
          this.projectList = res.data.rows || []
          this.total = res.data.total || 0
        } else {
          Message.error(res.message || '获取工程列表失败')
        }
      } catch (error) {
        Message.error('网络错误，获取工程列表失败')
      }
    },

    // 加载工程类型
    async loadProjectTypes() {
      try {
        const res = await getProjectTypeList()
        if (res.code === 200) {
          this.projectTypeList = res.data.map(item => ({
            label: item.dict_label,
            value: item.dict_value
          }))
        } else {
          Message.error('获取工程类型失败：' + (res.message || ''))
        }
      } catch (error) {
        Message.error('加载工程类型时发生网络错误')
      }
    },

    // 重置搜索
    onReset() {
      this.searchParams = {
        pro_name: '',
        pro_code: '',
        project_type: '',
        org_name: '',
        pageSize: this.searchParams.pageSize,
        pageNum: 1
      }
      this.$refs.searchFormRef?.clearValidate()
      this.getProjectListData()
    },

    // 表格选择变化
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },

    // 详情页跳转
    handleToDetails(id) {
      this.$router.push({name: 'demand-details', query: {id}})
    },

    // 新增工程
    handleAdd() {
      this.isAdd = true
      this.isView = false
      this.dialogTitle = '新增工程'
      this.addOrEditForm = {
        id: '',
        pro_name: '',
        pro_code: '',
        project_type: '',
        org_name: '',
        contractUnit: '',
        remark: '',
        voltage: '',
        scale: '',
        province: '',
        city: '',
        county: '',
        start_time: '',
        put_time: ''
      }
      this.$refs.addOrEditFormRef?.clearValidate()
      this.addOrEditDialogVisible = true
    },

    // 查看详情
    async handleViewDetails(row) {
      this.isView = true
      this.dialogTitle = '查看工程详情'
      try {
        const res = await getProject(row.id)
        if (res.code === 200) {
          this.addOrEditForm = {...res.data}
          this.addOrEditDialogVisible = true
        } else {
          Message.error(res.message || '获取工程详情失败')
        }
      } catch (error) {
        Message.error('网络错误，获取工程详情失败')
      }
    },

    async handleEdit(row) {
      this.isAdd = false;
      this.isView = false;
      this.dialogTitle = '编辑工程';

      try {
        // 1. 获取工程详情
        const res = await getProject(row.id);
        if (res.code !== 200) return this.$message.error('获取详情失败');

        // 拿到原始数据
        const projectData = res.data;

        // ================== 核心修改开始 ==================
        // 2. 处理机械化率的格式：去除百分号，并转换为数字
        if (projectData.mechanize_rate && typeof projectData.mechanize_rate === 'string') {
          // 使用 replace('%', '') 去掉百分号
          // 使用 parseFloat() 将字符串转换为数字
          projectData.mechanize_rate = parseFloat(projectData.mechanize_rate.replace('%', ''));
        }
        // ================== 核心修改结束 ==================

        // 3. 确保省份列表已加载（含 areaCode 映射）
        await this.loadProvinces();

        // 4. 省份名称 -> 编码
        const targetProvince = this.provinceOptions.find(item => item.label === projectData.province);
        const provinceCode = targetProvince ? targetProvince.value : '';
        if (!provinceCode) {
          Message.warning(`未找到“${projectData.province}”对应的编码，请手动选择`);
          this.addOrEditForm = { ...projectData }; // 这里也会使用处理后的数据
          this.addOrEditDialogVisible = true;
          return;
        }

        // 5. 用编码加载城市列表
        await this.loadCities(provinceCode);
        // 城市名称 -> 编码
        const targetCity = this.cityOptions.find(item => item.label === projectData.city);
        const cityCode = targetCity ? targetCity.value : '';

        // 6. 用编码加载区县列表
        await this.loadDistricts(cityCode);
        // 区县名称 -> 编码
        const targetCounty = this.districtOptions.find(item => item.label === projectData.county);
        const countyCode = targetCounty ? targetCounty.value : '';

        // 7. 表单赋值（此时 projectData.mechanize_rate 已经是数字 80 了）
        this.addOrEditForm = {
          ...projectData,
          province: provinceCode,
          city: cityCode,
          county: countyCode
        };

        this.addOrEditDialogVisible = true;
        this.$nextTick(() => this.$refs.addOrEditFormRef?.clearValidate());
      } catch (error) {
        console.error('编辑失败：', error);
        Message.error('网络错误，编辑失败');
      }
    },


    // 提交表单
    async handleSubmit() {
      const valid = await this.$refs.addOrEditFormRef?.validate()
      if (!valid) return

      // 处理机械化率：添加%符号
      if (this.addOrEditForm.mechanize_rate) {
        this.addOrEditForm.mechanize_rate = `${this.addOrEditForm.mechanize_rate}%`
      }

      this.submitLoading = true
      try {
        let res = this.isAdd ? await addProject(this.addOrEditForm) : await updateProject(this.addOrEditForm)
        if (res.code === 200) {
          Message.success(this.isAdd ? '新增工程成功' : '编辑工程成功')
          this.addOrEditDialogVisible = false
          this.getProjectListData()
        } else {
          Message.error(res.message || (this.isAdd ? '新增工程失败' : '编辑工程失败'))
        }
      } catch (error) {
        Message.error('网络错误，操作失败')
      } finally {
        this.submitLoading = false
      }
    },

    // 删除工程
    async handleDelete(id) {
      try {
        const res = await delProject(id)
        if (res.code === 200) {
          Message.success('删除工程成功')
          this.getProjectListData()
        } else {
          Message.error(res.message || '删除工程失败')
        }
      } catch (error) {
        Message.error('网络错误，删除工程失败')
      }
    },

    // 批量删除 - 修复后的方法
    async handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        Message.warning('请选择要删除的工程')
        return
      }

      try {
        await this.$confirm(
          `确定删除选中的 ${this.selectedRows.length} 个工程吗？`,
          '提示',
          {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }
        )

        const ids = this.selectedRows.map(row => row.id)
        const res = await delProjectBatch(ids)

        if (res.code === 200) {
          Message.success(`成功删除 ${this.selectedRows.length} 个工程`)
          this.getProjectListData()
          this.selectedRows = [] // 清空选中状态
        } else {
          Message.error(res.message || '批量删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          Message.error('网络错误，批量删除失败')
        }
      }
    },

    // 关闭对话框
    handleDialogClose() {
      this.isView = false
      this.$refs.addOrEditFormRef?.clearValidate()
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.getProjectListData()
    },

    // 当前页码改变
    handleCurrentChange(val) {
      this.searchParams.pageNum = val
      this.getProjectListData()
    }
  }
}
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
::v-deep .upload-tip .el-form-item__label {
  color: transparent;
}

.el-pagination {
  justify-content: flex-end;
  padding: 5px 0;
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: #3cb4a6;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 6px;
  width: 95%;
}

.img-list {
  display: flex;
  align-items: center;

  .img-items {
    width: 100px;
    height: 100px;
    margin-right: 8px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .mask-img {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete-icon {
        font-size: 20px;
        cursor: pointer;
        z-index: 9;
        color: #fff;
      }
    }
  }

  .img-items:hover .mask-img {
    visibility: visible;
  }
}

.app-container-content {
  ::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 100vh !important;

    .el-dialog__body {
      flex: 1;
      overflow-y: scroll !important;
      padding: 20px 40px;
    }

    .dialog-content {
      padding: 20px;
    }
  }
}

.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;

  ::v-deep .el-card__body {
    padding: 20px !important;
  }
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.content-box {
  border-radius: 8px;
  height: calc(100vh - 210px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;
    text-align: right;

    ::v-deep .pagination-container {
      padding: 0px 20px !important;
      margin-bottom: 30px;
    }
  }

  ::v-deep .el-table {
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}

.dialog-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  ::v-deep .el-table {
    border-radius: 6px;
    overflow: hidden;

    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 45px;
        font-size: 14px;
        border-bottom: 2px solid #e4e7ed;
      }
    }

    .el-table__body {
      tr {
        transition: all 0.2s ease;

        &:hover {
          background-color: #f8f9fa;
        }

        td {
          padding: 12px 8px;
          font-size: 13px;
          border-bottom: 1px solid #f0f2f5;
        }
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }

    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
}

.simple-dialog {
  .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid #eee;
    text-align: right;
  }
}

.simple-form {
  .el-form-item {
    margin-bottom: 15px;

    .el-form-item__label {
      color: #333;
      padding-right: 10px;

      &::before {
        content: '*';
        color: #ff4d4f;
        margin-right: 4px;
      }

      &.no-required::before {
        content: '';
        margin-right: 0;
      }
    }
  }

  .el-input, .el-select, .el-date-picker {
    width: 100%;
  }

  .el-textarea {
    width: 100%;

    &:focus {
      border-color: #1890ff;
    }
  }
}

.dialog-footer {
  .cancel-btn {
    margin-right: 10px;
  }

  .confirm-btn {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}
</style>