|
@@ -0,0 +1,337 @@
|
|
|
+
|
|
|
+<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>
|