|
@@ -1,216 +1,343 @@
|
|
|
<template>
|
|
|
- <div class="project-category-container">
|
|
|
- <!-- 顶部操作区 -->
|
|
|
- <div class="operation-area">
|
|
|
- <el-button type="primary" @click="handleAdd">新建工程类别</el-button>
|
|
|
+ <div class="project-category-container">
|
|
|
+ <!-- 顶部操作区 -->
|
|
|
+ <div class="operation-area">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="类别编号" prop="wkNo">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.wkNo"
|
|
|
+ placeholder="请输入工程类别编号"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类别名称" prop="wkName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.wkName"
|
|
|
+ placeholder="请输入工程类别名称"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="right-button">
|
|
|
+ <el-button type="primary" @click="handleAdd">新建工程类别</el-button>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
- <el-form-item label="用户名称" prop="userName">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.wkNo"
|
|
|
- placeholder="请输入工程类别编号或名称"
|
|
|
- style="width: 200px; margin-left: 16px"
|
|
|
- @keyup.enter.native="handleSearch"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%; margin-top: 20px"
|
|
|
+ id="worksCategoryList"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="wkNo"
|
|
|
+ label="工程类别编号"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="wkName"
|
|
|
+ label="工程类别名称"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column prop="wkRemark" label="备注"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="productCount"
|
|
|
+ label="产品数"
|
|
|
+ width="120"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="操作" width="250">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" type="danger" @click="handleDelete(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="loadData"
|
|
|
+ />
|
|
|
|
|
|
+ <!-- <!– 分页 –>-->
|
|
|
+ <!-- <el-pagination-->
|
|
|
+ <!-- @size-change="handleSizeChange"-->
|
|
|
+ <!-- @current-change="handleCurrentChange"-->
|
|
|
+ <!-- :current-page="pagination.currentPage"-->
|
|
|
+ <!-- :page-sizes="[10, 20, 50, 100]"-->
|
|
|
+ <!-- :page-size="pagination.pageSize"-->
|
|
|
+ <!-- layout="total, sizes, prev, pager, next, jumper"-->
|
|
|
+ <!-- :total="pagination.total"-->
|
|
|
+ <!-- style="margin-top: 20px; text-align: right"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- </el-pagination>-->
|
|
|
|
|
|
+ <!-- 新增/编辑对话框 -->
|
|
|
+ <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
|
|
+ <el-form :model="form" :rules="rules" ref="form" label-width="120px">
|
|
|
+ <el-form-item label="工程类别编号" prop="wkNo">
|
|
|
+ <el-input v-model="form.wkNo"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工程类别名称" prop="wkName">
|
|
|
+ <el-input v-model="form.wkName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="wkRemark">
|
|
|
+ <el-input type="textarea" v-model="form.wkRemark"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 表格区域 -->
|
|
|
- <el-table :data="tableData" style="width: 100%; margin-top: 20px" id="worksCategoryList">
|
|
|
- <el-table-column prop="wkNo" label="工程类别编号" width="180"></el-table-column>
|
|
|
- <el-table-column prop="wkName" label="工程类别名称" width="180"></el-table-column>
|
|
|
- <el-table-column prop="wkRemark" label="备注"></el-table-column>
|
|
|
- <el-table-column prop="productCount" label="产品数" width="120"></el-table-column>
|
|
|
- <el-table-column label="操作" width="250">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
|
|
|
- <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="handleDelete(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="loadData"
|
|
|
- />
|
|
|
-
|
|
|
-
|
|
|
-<!-- <!– 分页 –>-->
|
|
|
-<!-- <el-pagination-->
|
|
|
-<!-- @size-change="handleSizeChange"-->
|
|
|
-<!-- @current-change="handleCurrentChange"-->
|
|
|
-<!-- :current-page="pagination.currentPage"-->
|
|
|
-<!-- :page-sizes="[10, 20, 50, 100]"-->
|
|
|
-<!-- :page-size="pagination.pageSize"-->
|
|
|
-<!-- layout="total, sizes, prev, pager, next, jumper"-->
|
|
|
-<!-- :total="pagination.total"-->
|
|
|
-<!-- style="margin-top: 20px; text-align: right"-->
|
|
|
-<!-- >-->
|
|
|
-<!-- </el-pagination>-->
|
|
|
-
|
|
|
- <!-- 新增/编辑对话框 -->
|
|
|
- <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
|
|
- <el-form :model="form" :rules="rules" ref="form" label-width="120px">
|
|
|
- <el-form-item label="工程类别编号" prop="wkNo">
|
|
|
- <el-input v-model="form.wkNo"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="工程类别名称" prop="wkName">
|
|
|
- <el-input v-model="form.wkName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注" prop="wkRemark">
|
|
|
- <el-input type="textarea" v-model="form.wkRemark"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer">
|
|
|
- <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 查看详情对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="查看工程类别详情"
|
|
|
+ :visible.sync="viewDialogVisible"
|
|
|
+ width="500px"
|
|
|
+ >
|
|
|
+ <el-descriptions :column="1" border>
|
|
|
+ <el-descriptions-item label="工程类别编号">{{
|
|
|
+ viewForm.wkNo
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="工程类别名称">{{
|
|
|
+ viewForm.wkName
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注">{{
|
|
|
+ viewForm.wkRemark
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="产品数">{{
|
|
|
+ viewForm.productCount
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="viewDialogVisible = false">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ addWork,
|
|
|
+ addWorkCategory,
|
|
|
+ listWork,
|
|
|
+ updateWork,
|
|
|
+ deleteWork,
|
|
|
+} from "@/api/worksCategory/worksCategory";
|
|
|
+import { listNotice } from "@/api/system/notice";
|
|
|
|
|
|
- import { addWork, addWorkCategory, listWork } from '@/api/worksCategory/worksCategory'
|
|
|
- import { listNotice } from '@/api/system/notice'
|
|
|
-
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'ProjectCategoryManagement',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- searchQuery: '',
|
|
|
- userList: null,
|
|
|
- tableData: [], // 表格数据
|
|
|
- pagination: {
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 10,
|
|
|
- total: 1
|
|
|
- },
|
|
|
- // 查询参数
|
|
|
- queryParams: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- userName: undefined,
|
|
|
- phonenumber: undefined,
|
|
|
- status: undefined,
|
|
|
- deptId: undefined
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- dialogVisible: false,
|
|
|
- dialogTitle: '',
|
|
|
- form: {
|
|
|
- wkNo: '',
|
|
|
- wkName: '',
|
|
|
- wkRemark: ''
|
|
|
- },
|
|
|
- rules: {
|
|
|
- wkNo: [
|
|
|
- { required: true, message: '请输入工程类别编号', trigger: 'blur' }
|
|
|
- ],
|
|
|
- wkName: [
|
|
|
- { required: true, message: '请输入工程类别名称', trigger: 'blur' }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleSearch() {
|
|
|
- // 实现搜索逻辑
|
|
|
- console.log('搜索关键词:', this.searchQuery)
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- handleAdd() {
|
|
|
- this.dialogTitle = '新增工程类别'
|
|
|
- this.form = {
|
|
|
- wkNo: '',
|
|
|
- wkName: '',
|
|
|
- wkRemark: ''
|
|
|
- }
|
|
|
- this.dialogVisible = true
|
|
|
+export default {
|
|
|
+ name: "ProjectCategoryManagement",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchQuery: "",
|
|
|
+ userList: null,
|
|
|
+ tableData: [], // 表格数据
|
|
|
+ pagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
},
|
|
|
- handleEdit(row) {
|
|
|
- this.dialogTitle = '编辑工程类别'
|
|
|
- this.form = { ...row }
|
|
|
- this.dialogVisible = true
|
|
|
+ total: 1,
|
|
|
+ showSearch: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ wkNo: undefined,
|
|
|
+ wkName: undefined,
|
|
|
},
|
|
|
- handleDelete(row) {
|
|
|
- this.$confirm('确认删除该工程类别?', '提示', {
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- // 实现删除逻辑
|
|
|
- console.log('删除:', row)
|
|
|
- this.$message.success('删除成功')
|
|
|
- this.loadData()
|
|
|
- }).catch(() => {})
|
|
|
- },
|
|
|
- handleView(row) {
|
|
|
- // 实现查看逻辑
|
|
|
- console.log('查看:', row)
|
|
|
+
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogTitle: "",
|
|
|
+ form: {
|
|
|
+ wkNo: "",
|
|
|
+ wkName: "",
|
|
|
+ wkRemark: "",
|
|
|
},
|
|
|
- handleSizeChange(val) {
|
|
|
- this.pagination.pageSize = val
|
|
|
- this.loadData()
|
|
|
+ rules: {
|
|
|
+ wkNo: [
|
|
|
+ { required: true, message: "请输入工程类别编号", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ wkName: [
|
|
|
+ { required: true, message: "请输入工程类别名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
},
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.pagination.currentPage = val
|
|
|
- this.loadData()
|
|
|
+ viewDialogVisible: false, // 查看详情对话框显示状态
|
|
|
+ viewForm: {
|
|
|
+ // 查看详情的数据对象
|
|
|
+ wkNo: "",
|
|
|
+ wkName: "",
|
|
|
+ wkRemark: "",
|
|
|
+ productCount: 0,
|
|
|
},
|
|
|
- submitForm() {
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- debugger;
|
|
|
- if (valid) {
|
|
|
- // 实现表单提交逻辑
|
|
|
- console.log('表单数据:', this.form)
|
|
|
- if (this.form.userId != undefined) {
|
|
|
- }else{
|
|
|
- addWork(this.form).then(response => {
|
|
|
- this.dialogVisible = false
|
|
|
- this.$message.success('保存成功')
|
|
|
- this.loadData()
|
|
|
- });
|
|
|
- }
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.queryParams.wkNo = undefined;
|
|
|
+ this.queryParams.wkName = undefined;
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ resetForm(refName) {
|
|
|
+ if (this.$refs[refName]) {
|
|
|
+ this.$refs[refName].resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 新建 */
|
|
|
+ handleAdd() {
|
|
|
+ this.dialogTitle = "新增工程类别";
|
|
|
+ this.form = {
|
|
|
+ wkNo: "",
|
|
|
+ wkName: "",
|
|
|
+ wkRemark: "",
|
|
|
+ };
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ /* 修改 */
|
|
|
+ handleEdit(row) {
|
|
|
+ this.dialogTitle = "编辑工程类别";
|
|
|
+ this.form = JSON.parse(JSON.stringify(row)); // 深拷贝防止直接修改原数据
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ /* 删除 */
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm("确认删除该工程类别?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ deleteWork(row.wkId)
|
|
|
+ .then((response) => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ // 假设 200 是成功状态码
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功!",
|
|
|
+ });
|
|
|
+ this.loadData(); // 重新加载数据
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || "删除失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.$message.error("删除失败:" + error);
|
|
|
+ });
|
|
|
})
|
|
|
- },
|
|
|
- loadData() {
|
|
|
- // 实现数据加载逻辑
|
|
|
- this.loading = true;
|
|
|
- listWork(this.queryParams).then(response => {
|
|
|
- debugger;
|
|
|
- this.tableData = response.rows;
|
|
|
- this.total = response.total;
|
|
|
- this.loading = false;
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
});
|
|
|
-
|
|
|
- }
|
|
|
},
|
|
|
- created() {
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
- }
|
|
|
- </script>
|
|
|
+ /* 查看 */
|
|
|
+ handleView(row) {
|
|
|
+ this.viewForm = JSON.parse(JSON.stringify(row)); // 深拷贝防止修改原数据
|
|
|
+ this.viewDialogVisible = true;
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pagination.pageSize = val;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pagination.currentPage = val;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ /* 修改/新增提交 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.dialogTitle === "编辑工程类别") {
|
|
|
+ // 编辑操作
|
|
|
+ updateWork(this.form)
|
|
|
+ .then((response) => {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$message.success("修改成功");
|
|
|
+ this.loadData();
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.$message.error("修改失败:" + error);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 新增操作
|
|
|
+ addWork(this.form)
|
|
|
+ .then((response) => {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$message.success("新增成功");
|
|
|
+ this.loadData();
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.$message.error("新增失败:" + error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+ // 实现数据加载逻辑
|
|
|
+ this.loading = true;
|
|
|
+ listWork(this.queryParams).then((response) => {
|
|
|
+ debugger;
|
|
|
+ this.tableData = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .project-category-container {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .operation-area {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- </style>
|
|
|
+.project-category-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.operation-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.right-button {
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+/* 搜索表单项间距 */
|
|
|
+.el-form-item {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+</style>
|