cmc-oa/oa-ui/src/views/flowable/form/budget/adjust/adjustIndex.vue

<!--
 * @Author: ysh
 * @Date: 2025-05-14 16:09:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-19 10:47:29
-->
<template>
  <div class="app-container">
    <transition name="fade-transform" mode="out-in">
      <div v-if="!projectId" key="selection">
        <div class="selection-header">
          <h3 style="font-weight: bold; color: #FF5733;">选择核算项目</h3>
        </div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
          <el-form-item prop="projectId">
            <el-select v-model="queryType" style="width: 120px;">
              <el-option label="项目编号" value="1"></el-option>
              <el-option label="项目名称" value="2"></el-option>
            </el-select>
            <el-select v-model="queryParams.projectId" clearable filterable remote reserve-keyword placeholder="请输入关键字"
              :remote-method="remoteMethod" :loading="loading" style="width: 300px;">
              <el-option v-for="project in projectList" :key="project.projectId"
                :label="project.projectNumber + '-' + project.projectName" :value="project.projectId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="budgetList">
          <el-table-column label="序号" align="center" type="index" width="60" />
          <el-table-column label="项目编号" align="center" prop="project.projectNumber" />
          <el-table-column label="项目名称" align="center" prop="project.projectName" />
          <el-table-column label="预算总额" align="center" prop="totalBudget" />
          <el-table-column label="编制人" align="center" prop="compiler">
            <template slot-scope="scope">
              {{ getUserName(scope.row.compiler) }}
            </template>
          </el-table-column>
          <el-table-column label="审核人" align="center" prop="auditor">
            <template slot-scope="scope">
              {{ getUserName(scope.row.auditor) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
      <div v-else key="adjust">
        <div class="adjust-header" v-if="hideReturn">
          <el-button icon="el-icon-back" type="text" @click="handleBack">返回选择</el-button>
          <h3>预算调整</h3>
        </div>
        <budget-adjust :taskForm="taskForm" :taskName="taskName" :row="selectedRows" @preserve="preserve"
          @goBack="$emit('goBack')"></budget-adjust>
      </div>
    </transition>
  </div>
</template>

<script>
import { listBudget, getBudget } from '@/api/oa/budget/budget';
import { listCheck, getCheck, delCheck, addCheck, updateCheck } from "@/api/oa/budget/check";
import { listProject } from '@/api/oa/project/project';
import BudgetAdjust from './budgetAdjust.vue';
export default {
  props: {
    taskForm: {
      type: Object,
      require: true
    },
    taskName: {
      type: String,
    }
  },
  components: {
    BudgetAdjust
  },
  data() {
    return {
      loading: true,
      projectId: '',
      budgetList: [],
      total: 0,
      selectedRows: {},
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectNumber: undefined,
        projectName: undefined
      },
      queryType: '1',
      projectList: [],
      hideReturn: true
    }
  },
  created() {
    this.initForm();
    this.getBudgetList();
  },
  methods: {
    initForm() {
      getCheck(this.taskForm.formId).then(res => {
        if (res.data) {
          this.hideReturn = false;
          this.projectId = res.data.projectId;
          getBudget(res.data.budgetId).then(response => {
            this.selectedRows = response.data;
          })
        }
      })
    },
    getBudgetList() {
      listBudget(this.queryParams).then(res => {
        this.budgetList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    handleSelect(row) {
      this.projectId = row.projectId;
      this.selectedRows = row;
      console.log(row);
    },
    handleBack() {
      this.projectId = '';
    },
    getList() {
      this.loading = true;
      this.getBudgetList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 重置表单 */
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
    remoteMethod(val) {
      let params1 = {
        pageNum: 1,
        pageSize: 20,
        projectNumber: val
      }
      let params2 = {
        pageNum: 1,
        pageSize: 20,
        projectName: val
      }
      let params = {};
      if (this.queryType == '1') {
        params = params1
      } else {
        params = params2
      }
      listProject(params).then(res => {
        this.projectList = res.rows;
      })
    },
    preserve() {
      this.hideReturn = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.selection-header,
.adjust-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  h3 {
    margin: 0;
    margin-left: 10px;
  }
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>