Web/admin.ui.plus-master/baoliubaoliu.html

<template>
    <div class="layout-pd">
      <el-row>
  <!--操作-->
        <el-col :xs="24" >
          <el-card class="mt8"  shadow="hover" >
  <el-form :model="state.filter" :inline="true" @submit.stop.prevent style="margin-bottom: -3vh;">
              <el-form-item prop="name" style="width: 100%">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="项目名称">
                    <el-input v-model="state.filter.projectName" placeholder="单行输入" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="项目编码">
                    <el-input v-model="state.filter.projectCode" placeholder="单行输入" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="选择时间">
                    <el-date-picker
                      v-model="state.filter.projectLaunchDate"
                      type="datetimerange"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      range-separator="To"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </el-col>
  </el-form-item>
            </el-form>
  
            <hr>
  
            <el-row justify="space-between" class="submit-button" style="margin-bottom: -1vh;">
              <el-row>
                <el-button  type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                <el-button  type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
              </el-row>
              <el-row>
                <el-button  type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
              </el-row>
            </el-row>
  </el-card>
        </el-col>
  <!--表格-->
        <el-col  :xs="24" >
          <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
  <el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
          <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  >
          </el-table-column> 
  <el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="150">
          <template #default="{ row }" >
                    <el-link
                    class="my-el-link mr12 ml12"
                    type="primary"
                    icon="ele-Upload"
                    @click="onDateUpdate(row)"
                    :underline="false"
                    target="_blank"
                  >编辑</el-link>
                  <el-link
                    class="my-el-link mr12 ml12"
                    type="primary"
                    icon="ele-Upload"
                    @click="gotoSoftwarePackage"
                    :underline="false"
                  >跳转到软件包</el-link>
  </template>
              </el-table-column>
  </el-table>
  <!-- <div class="my-flex my-flex-end" style="margin-top: 20px">
              <el-pagination
                v-model:currentPage="state.pageInput.CurrentPage"
                v-model:page-size="state.pageInput.PageSize"
                :total="state.total"
                :page-sizes="[10, 15, 20, 50, 100]"
                small
                background
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div> -->
            <div class="my-flex my-flex-end" style="margin-top: 20px">
              <el-pagination 
              v-model:currentPage="pageState.pageInput.currentPage"
              v-model:page-size="pageState.pageInput.pageSize" 
              :total="state.total" 
              :page-sizes="[10, 15, 20, 50, 100]"
              small 
              background 
              @size-change="onSizeChange" 
              @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper" />
            </div>
  </el-card>
        </el-col>
  </el-row>
      </div>
  
      <el-dialog v-model="state.dialogVisible" :title="state.dialogTitle" width="50%"> 
         <el-form :model="state.formData" label-width="120px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="state.formData.projectName" placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item label="项目编码" prop="projectCode">
        <el-input v-model="state.formData.projectCode" placeholder="请输入项目编码" />
      </el-form-item>
      <el-form-item label="项目介绍" prop="projectDescription">
        <el-input 
          v-model="state.formData.projectDescription" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入项目介绍" 
        />
      </el-form-item>
      <el-form-item label="项目上线时间" prop="projectLaunchDate">
        <el-date-picker
          v-model="state.formData.projectLaunchDate"
          type="datetime"
          placeholder="选择上线时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="state.dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
  
  
    </template>
    <script setup lang="ts">
    import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
    import eventBus from "/@/utils/mitt";
    import {Api} from "/@/api/admin/productionManagement/slelist";
  import { ProjectGetPageDto } from "/@/api/admin/productionManagement/slelistDto";
  import type { pageInput } from "/@/api/admin/productionManagement/slelistDto";
  import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
  import { ElMessage } from "element-plus";
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  // 使用组合式函数获取分页状态
  const pageState = useDynamicPageSize(10, 15);
  
  /**数据对象*/
    const state = reactive({
      /**加载显示 */
      loading: false,
      /**条件查询模块 */
        filter: {
  /**项目名称 */
          projectName: "",
  /**项目编码 */
          projectCode: "",
  /**项目上线时间 */
          projectLaunchDate:[] as string[],
          beginTime:"",
          endTime:""
        },
    /**表格信息 */
  tableModel: [] as ProjectGetPageDto,
      /**动态表头 */
      dynamicColumns: [
  { prop: 'projectName', label: '项目名称' },
  { prop: 'projectCode', label: '项目编码' },
  { prop: 'projectDescription', label: '项目介绍' },
  { prop: 'projectLaunchDate', label: '项目上线时间' },],
  /**分页标识 */
      pageInput:{
        CurrentPage: 1,
        PageSize: 10,
      } as pageInput,
      /**分页总数 */
      total: 0,
    dialogVisible: false,
    dialogTitle: "添加项目",
    formData: {
      projectName: "",
      projectCode: "",
      projectDescription: "",
      projectLaunchDate: ""
    } as ProjectGetPageDto
  })
  onMounted(() => {
    state.pageInput.PageSize = pageState.pageInput.pageSize
    init()
  })
  
    onBeforeMount(() => {
      eventBus.off('refreshView')
    })
  
  /**
   * 页条变化
   * @param val
   */
   const onSizeChange = (val: number) => {
    state.pageInput.PageSize = val
    onQuery()
  }
  
  /**
   * 页数变化
   * @param val
   */
  const onCurrentChange = (val: number) => {
    state.pageInput.CurrentPage = val
    onQuery()
  }
  
    /**
    * 监听变换
    */
    watch(
    () => state.filter.projectLaunchDate,
    (newVal) => {
      if (newVal && newVal.length === 2) {
        state.filter.beginTime = newVal[0]
        state.filter.endTime = newVal[1]
      } else {
        state.filter.beginTime = ""
        state.filter.endTime = ""
      }
    },
    { deep: true }
  )
  /**条件查询 */
  const onQuery = () => {
    const { projectLaunchDate, ...filterParams } = state.filter
    init({
      ...state.pageInput,
      Filter: filterParams
    })
  }
  
  // 初始化数据
  const init = async (params?: any) => {
    state.loading = true
    try {
      const res = await new Api().getList(params || {
        ...state.pageInput,
        Filter: {
          projectName: state.filter.projectName,
          projectCode: state.filter.projectCode,
          beginTime: state.filter.beginTime,
          endTime: state.filter.endTime
        }
      })
      state.tableModel = res?.data?.list ?? []
      state.total = res?.data?.total ?? 0
    } catch (error) {
      ElMessage.error("查询失败")
    } finally {
      state.loading = false
    }
  }
  /**重置 */
  const onReset = () => {
    state.filter = {
      projectName: "",
      projectCode: "",
      projectLaunchDate: [],
      beginTime: "",
      endTime: ""
    }
    onQuery()
  }
  /**编辑 */
  const onDateUpdate = (row) => {
    state.dialogTitle = "编辑项目"
    state.formData = { ...row } // 深拷贝当前行数据到表单
    state.dialogVisible = true
  }
  
  const onAdd = () => {
    state.dialogTitle = "添加项目"
    state.dialogVisible = true
    state.formData = {
      projectName: "",
      projectCode: "",
      projectDescription: "",
      projectLaunchDate: ""
    }
  }
  
  // 表单提交（新增或编辑）
  const onSubmit = async () => {
    try {
      state.loading = true
      let res
      if (state.formData.id) {
        // 编辑：调用更新接口
        res = await new Api().updateProject(state.formData)
        ElMessage.success("更新成功")
      } else {
        // 新增：调用添加接口
        res = await new Api().uploadProject(state.formData)
        ElMessage.success("添加成功")
      }
      state.dialogVisible = false
      await init() // 刷新列表
    } catch (error) {
      ElMessage.error(state.formData.id ? "更新失败" : "添加失败")
    } finally {
      state.loading = false
    }
  }
  
  // 跳转到软件包页面
  const gotoSoftwarePackage = () => {
    router.push('/product/softwarePackageManagement')
  }
  </script>
  <style scoped lang="scss">
  .el-input,
  .el-select {
    width: 240px;
  }
  
  /* 输入框标签固定四个字符宽度 */
  ::v-deep .el-form-item__label {
    // 字体大小14，4个字符，12px右间距
    width: 14*4px+12px;
    justify-content: start;
  }
  
  /* 数据表头 设置灰色样式 */
  ::v-deep .el-table th.el-table__cell {
    background-color: #F6F6F6;
  }
    </style>