|
|
@@ -34,14 +34,12 @@
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
- <el-row justify="space-between" class="submit-button" style="margin-bottom: -1vh;">
|
|
|
+ <el-row justify="space-between" class="submit-button" style="margin-bottom:-6px">
|
|
|
<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-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
+ <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-button type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
@@ -67,14 +65,15 @@
|
|
|
icon="ele-Upload"
|
|
|
@click="gotoSoftwarePackage"
|
|
|
:underline="false"
|
|
|
+ target="_blank"
|
|
|
>跳转到软件包</el-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
-<!-- <div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
+<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"
|
|
|
+ v-model:currentPage="pageState.pageInput.currentPage"
|
|
|
+ v-model:page-size="pageState.pageInput.pageSize"
|
|
|
:total="state.total"
|
|
|
:page-sizes="[10, 15, 20, 50, 100]"
|
|
|
small
|
|
|
@@ -83,56 +82,39 @@
|
|
|
@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>
|
|
|
+<el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" center>
|
|
|
+ <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules" label-position="right">
|
|
|
+ <el-form-item label="项目名称" prop="projectName">
|
|
|
+ <el-input v-model="formData.projectName" placeholder="请输入项目名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目编码" prop="projectCode">
|
|
|
+ <el-input v-model="formData.projectCode" placeholder="请输入项目编码" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目介绍" prop="projectDescription">
|
|
|
+ <el-input v-model="formData.projectDescription" type="textarea" :rows="3" placeholder="请输入项目介绍" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上线时间" prop="projectLaunchDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.projectLaunchDate"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择上线时间"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
|
|
|
@@ -141,10 +123,9 @@
|
|
|
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'
|
|
|
+import router from "/@/router";
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
|
|
|
-const router = useRouter()
|
|
|
|
|
|
// 使用组合式函数获取分页状态
|
|
|
const pageState = useDynamicPageSize(10, 15);
|
|
|
@@ -160,10 +141,7 @@ const pageState = useDynamicPageSize(10, 15);
|
|
|
/**项目编码 */
|
|
|
projectCode: "",
|
|
|
/**项目上线时间 */
|
|
|
- projectLaunchDate:[] as string[],
|
|
|
- beginTime:"",
|
|
|
- endTime:""
|
|
|
- },
|
|
|
+ projectLaunchDate: "",},
|
|
|
/**表格信息 */
|
|
|
tableModel: [] as ProjectGetPageDto,
|
|
|
/**动态表头 */
|
|
|
@@ -179,154 +157,141 @@ tableModel: [] as ProjectGetPageDto,
|
|
|
} as pageInput,
|
|
|
/**分页总数 */
|
|
|
total: 0,
|
|
|
- dialogVisible: false,
|
|
|
- dialogTitle: "添加项目",
|
|
|
- formData: {
|
|
|
- projectName: "",
|
|
|
- projectCode: "",
|
|
|
- projectDescription: "",
|
|
|
- projectLaunchDate: ""
|
|
|
- } as ProjectGetPageDto
|
|
|
})
|
|
|
-onMounted(() => {
|
|
|
- state.pageInput.PageSize = pageState.pageInput.pageSize
|
|
|
- init()
|
|
|
+
|
|
|
+// 弹窗状态
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogTitle = ref('添加项目')
|
|
|
+const formData = ref({
|
|
|
+ projectName: '',
|
|
|
+ projectCode: '',
|
|
|
+ projectDescription: '',
|
|
|
+ projectLaunchDate: ''
|
|
|
})
|
|
|
+const currentId = ref<string | null>(null)
|
|
|
|
|
|
+// 表单验证规则
|
|
|
+const rules = reactive({
|
|
|
+ projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
|
|
+ projectCode: [{ required: true, message: '请输入项目编码', trigger: 'blur' }]
|
|
|
+})
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ init()
|
|
|
+ eventBus.off('refreshView')
|
|
|
+ eventBus.on('refreshView', async () => {
|
|
|
+ await init()
|
|
|
+ })
|
|
|
+ console.log()
|
|
|
+ })
|
|
|
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 }
|
|
|
-)
|
|
|
+ watch(() => {})
|
|
|
/**条件查询 */
|
|
|
-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 onQuery = () => {
|
|
|
+ init()
|
|
|
+ }
|
|
|
+ /**初始化 */
|
|
|
+ const init = async () => {
|
|
|
+ state.loading = true
|
|
|
+ const res: any = await new Api().getList({ ...state.pageInput, Filter: state.filter })
|
|
|
+ state.tableModel = res?.data?.list ?? []
|
|
|
+ state.total = res?.data?.total ?? 0
|
|
|
+ state.loading = false
|
|
|
+ }
|
|
|
+/**添加 */
|
|
|
+const onAdd = () => {
|
|
|
+ dialogTitle.value = '添加项目'
|
|
|
+ formData.value = {
|
|
|
+ projectName: '',
|
|
|
+ projectCode: '',
|
|
|
+ projectDescription: '',
|
|
|
+ projectLaunchDate: ''
|
|
|
}
|
|
|
+ currentId.value = null
|
|
|
+ dialogVisible.value = true
|
|
|
}
|
|
|
/**重置 */
|
|
|
const onReset = () => {
|
|
|
state.filter = {
|
|
|
- projectName: "",
|
|
|
- projectCode: "",
|
|
|
- projectLaunchDate: [],
|
|
|
- beginTime: "",
|
|
|
- endTime: ""
|
|
|
+ projectName: '',
|
|
|
+ projectCode: '',
|
|
|
+ projectLaunchDate: ''
|
|
|
}
|
|
|
- onQuery()
|
|
|
+ init()
|
|
|
}
|
|
|
/**编辑 */
|
|
|
-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 onDateUpdate = (row: any) => {
|
|
|
+ dialogTitle.value = '编辑项目'
|
|
|
+ formData.value = { ...row }
|
|
|
+ currentId.value = row.id
|
|
|
+ dialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
-// 表单提交(新增或编辑)
|
|
|
-const onSubmit = async () => {
|
|
|
+// 提交表单
|
|
|
+const handleSubmit = async () => {
|
|
|
try {
|
|
|
- state.loading = true
|
|
|
- let res
|
|
|
- if (state.formData.id) {
|
|
|
- // 编辑:调用更新接口
|
|
|
- res = await new Api().updateProject(state.formData)
|
|
|
- ElMessage.success("更新成功")
|
|
|
+ const api = new Api()
|
|
|
+ if (currentId.value) {
|
|
|
+ // 更新项目
|
|
|
+ await api.updateProject({ ...formData.value, id: currentId.value })
|
|
|
+ ElMessage.success('更新成功')
|
|
|
} else {
|
|
|
- // 新增:调用添加接口
|
|
|
- res = await new Api().uploadProject(state.formData)
|
|
|
- ElMessage.success("添加成功")
|
|
|
+ // 添加项目
|
|
|
+ await api.uploadProject(formData.value)
|
|
|
+ ElMessage.success('添加成功')
|
|
|
}
|
|
|
- state.dialogVisible = false
|
|
|
+
|
|
|
+ dialogVisible.value = false
|
|
|
await init() // 刷新列表
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error(state.formData.id ? "更新失败" : "添加失败")
|
|
|
- } finally {
|
|
|
- state.loading = false
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('保存失败')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 跳转到软件包页面
|
|
|
-const gotoSoftwarePackage = () => {
|
|
|
- router.push('/product/softwarePackageManagement')
|
|
|
+ /**
|
|
|
+ * 页条变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onSizeChange = (val: number) => {
|
|
|
+ state.pageInput.PageSize = val
|
|
|
+ onQuery()
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 页数变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onCurrentChange = (val: number) => {
|
|
|
+ state.pageInput.CurrentPage = val
|
|
|
+ onQuery()
|
|
|
+}
|
|
|
+
|
|
|
+ // 跳转到软件包页面
|
|
|
+ const gotoSoftwarePackage = () => {
|
|
|
+ router.push('/product/softwarePackageManagement')
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.el-input,
|
|
|
-.el-select {
|
|
|
+.el-select
|
|
|
+ {
|
|
|
width: 240px;
|
|
|
}
|
|
|
|
|
|
+.el-date-picker {
|
|
|
+ width: 240px !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
/* 输入框标签固定四个字符宽度 */
|
|
|
::v-deep .el-form-item__label {
|
|
|
- // 字体大小14,4个字符,12px右间距
|
|
|
- width: 14*4px+12px;
|
|
|
+ // 字体大小14,5个字符,12px右间距
|
|
|
+ width: 14*5px+12px;
|
|
|
justify-content: start;
|
|
|
}
|
|
|
|