|
@@ -1,257 +1,261 @@
|
|
<template>
|
|
<template>
|
|
- <div class="system-category-container">
|
|
|
|
- <!-- 顶部操作区 -->
|
|
|
|
- <div class="operation-area">
|
|
|
|
- <el-button type="primary" @click="handleAdd">新建系统类别</el-button>
|
|
|
|
- <el-input
|
|
|
|
- v-model="searchQuery"
|
|
|
|
- placeholder="请输入系统类别编号或名称"
|
|
|
|
- style="width: 200px; margin-left: 16px"
|
|
|
|
- @keyup.enter.native="handleSearch"
|
|
|
|
- >
|
|
|
|
- <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
|
|
|
- </el-input>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="system-category-container">
|
|
|
|
+ <!-- 顶部操作区 -->
|
|
|
|
+ <div class="operation-area">
|
|
|
|
+ <el-button type="primary" @click="handleAdd">新建系统类别</el-button>
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="formQuery.sysNo"
|
|
|
|
+ placeholder="请输入系统类别编号或名称"
|
|
|
|
+ style="width: 200px; margin-left: 16px"
|
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
|
+ >
|
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
|
|
|
+ </el-input>
|
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 表格区域 -->
|
|
|
|
- <el-table
|
|
|
|
- :data="tableData"
|
|
|
|
|
|
+ <!-- 表格区域 -->
|
|
|
|
+ <el-table
|
|
|
|
+ :data="tableData"
|
|
|
|
|
|
- style="width: 100%; margin-top: 20px"
|
|
|
|
- v-loading="loading"
|
|
|
|
- >
|
|
|
|
- <el-table-column prop="sysCode" label="系统类别编号" width="180"></el-table-column>
|
|
|
|
- <el-table-column prop="sysName" label="系统类别名称" width="180"></el-table-column>
|
|
|
|
- <el-table-column prop="remark" label="备注"></el-table-column>
|
|
|
|
- <el-table-column prop="sysProducts" label="产品数" width="120"></el-table-column>
|
|
|
|
- <el-table-column label="操作" width="250" fixed="right">
|
|
|
|
- <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>
|
|
|
|
|
|
+ style="width: 100%; margin-top: 20px"
|
|
|
|
+ v-loading="loading"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column prop="sysNo" label="系统类别编号" width="180"></el-table-column>
|
|
|
|
+ <el-table-column prop="sysName" label="系统类别名称" width="180"></el-table-column>
|
|
|
|
+ <el-table-column prop="sysRemark" label="备注"></el-table-column>
|
|
|
|
+ <el-table-column prop="sysProducts" label="产品数" width="120"></el-table-column>
|
|
|
|
+ <el-table-column label="操作" width="250" fixed="right">
|
|
|
|
+ <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>
|
|
|
|
|
|
- <!-- 分页 -->
|
|
|
|
- <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-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"
|
|
|
|
- :close-on-click-modal="false"
|
|
|
|
|
|
+ <!-- 新增/编辑对话框 -->
|
|
|
|
+ <el-dialog
|
|
|
|
+ :title="dialogTitle"
|
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
|
+ width="500px"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ >
|
|
|
|
+ <el-form
|
|
|
|
+ :model="form"
|
|
|
|
+ :rules="rules"
|
|
|
|
+ ref="form"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ :validate-on-rule-change="false"
|
|
>
|
|
>
|
|
- <el-form
|
|
|
|
- :model="form"
|
|
|
|
- :rules="rules"
|
|
|
|
- ref="form"
|
|
|
|
- label-width="120px"
|
|
|
|
- :validate-on-rule-change="false"
|
|
|
|
- >
|
|
|
|
- <el-form-item label="系统类别编号" prop="sysCode">
|
|
|
|
- <el-input v-model="form.sysCode" :disabled="dialogTitle === '编辑系统类别'"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="系统类别名称" prop="sysName">
|
|
|
|
- <el-input v-model="form.sysName"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
|
- <el-input type="textarea" v-model="form.remark" rows="3"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- <div slot="footer">
|
|
|
|
- <el-button @click="cancelForm">取 消</el-button>
|
|
|
|
- <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
|
|
|
|
- </div>
|
|
|
|
- </el-dialog>
|
|
|
|
|
|
+ <el-form-item label="系统类别编号" prop="sysNo">
|
|
|
|
+ <el-input v-model="form.sysNo" :disabled="dialogTitle === '编辑系统类别'"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="系统类别名称" prop="sysName">
|
|
|
|
+ <el-input v-model="form.sysName"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="备注" prop="sysRemark">
|
|
|
|
+ <el-input type="textarea" v-model="form.sysRemark" rows="3"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ <div slot="footer">
|
|
|
|
+ <el-button @click="cancelForm">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
|
|
- <!-- 查看详情对话框 -->
|
|
|
|
- <el-dialog title="查看系统类别" :visible.sync="viewDialogVisible" width="500px">
|
|
|
|
- <el-descriptions :column="1" border>
|
|
|
|
- <el-descriptions-item label="系统类别编号">{{ viewForm.systemCode }}</el-descriptions-item>
|
|
|
|
- <el-descriptions-item label="系统类别名称">{{ viewForm.systemName }}</el-descriptions-item>
|
|
|
|
- <el-descriptions-item label="备注">{{ viewForm.remark || '-' }}</el-descriptions-item>
|
|
|
|
- <el-descriptions-item label="产品数">{{ viewForm.productCount }}</el-descriptions-item>
|
|
|
|
- </el-descriptions>
|
|
|
|
- </el-dialog>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
|
|
+ <!-- 查看详情对话框 -->
|
|
|
|
+ <el-dialog title="查看系统类别" :visible.sync="viewDialogVisible" width="500px">
|
|
|
|
+ <el-descriptions :column="1" border>
|
|
|
|
+ <el-descriptions-item label="系统类别编号">{{ viewForm.systemCode }}</el-descriptions-item>
|
|
|
|
+ <el-descriptions-item label="系统类别名称">{{ viewForm.systemName }}</el-descriptions-item>
|
|
|
|
+ <el-descriptions-item label="备注">{{ viewForm.sysRemark || '-' }}</el-descriptions-item>
|
|
|
|
+ <el-descriptions-item label="产品数">{{ viewForm.productCount }}</el-descriptions-item>
|
|
|
|
+ </el-descriptions>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
|
|
- <script>
|
|
|
|
|
|
+<script>
|
|
|
|
|
|
- import { add, list } from '@/api/sysCategory/sysCategory'
|
|
|
|
- import { listWork } from '@/api/worksCategory/worksCategory'
|
|
|
|
|
|
+import { add, list } from '@/api/sysCategory/sysCategory'
|
|
|
|
+import { listWork } from '@/api/worksCategory/worksCategory'
|
|
|
|
|
|
|
|
|
|
- export default {
|
|
|
|
- name: 'SystemCategoryManagement',
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- searchQuery: '',
|
|
|
|
- loading: false,
|
|
|
|
- submitLoading: false,
|
|
|
|
- tableData: [
|
|
|
|
- {
|
|
|
|
- systemCode: 'pjxs',
|
|
|
|
- systemName: '拼接显示',
|
|
|
|
- remark: '',
|
|
|
|
- productCount: 500
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- pagination: {
|
|
|
|
- currentPage: 1,
|
|
|
|
- pageSize: 10,
|
|
|
|
- total: 1
|
|
|
|
- },
|
|
|
|
- dialogVisible: false,
|
|
|
|
- viewDialogVisible: false,
|
|
|
|
- dialogTitle: '',
|
|
|
|
- form: {
|
|
|
|
- sysCode: '',
|
|
|
|
- sysName: '',
|
|
|
|
- remark: ''
|
|
|
|
- },
|
|
|
|
- viewForm: {
|
|
|
|
- sysCode: '',
|
|
|
|
- sysName: '',
|
|
|
|
- remark: '',
|
|
|
|
- productCount: 0
|
|
|
|
- },
|
|
|
|
- rules: {
|
|
|
|
- sysCode: [
|
|
|
|
- { required: true, message: '请输入系统类别编号', trigger: 'blur' },
|
|
|
|
- { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
|
|
|
- ],
|
|
|
|
- sysName: [
|
|
|
|
- { required: true, message: '请输入系统类别名称', trigger: 'blur' },
|
|
|
|
- { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
|
|
|
- ]
|
|
|
|
|
|
+export default {
|
|
|
|
+ name: 'SystemCategoryManagement',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ searchQuery: '',
|
|
|
|
+ loading: false,
|
|
|
|
+ submitLoading: false,
|
|
|
|
+ tableData: [
|
|
|
|
+ {
|
|
|
|
+ systemCode: 'pjxs',
|
|
|
|
+ systemName: '拼接显示',
|
|
|
|
+ sysRemark: '',
|
|
|
|
+ productCount: 500
|
|
}
|
|
}
|
|
|
|
+ ],
|
|
|
|
+ pagination: {
|
|
|
|
+ currentPage: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ total: 1
|
|
|
|
+ },
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ viewDialogVisible: false,
|
|
|
|
+ dialogTitle: '',
|
|
|
|
+ form: {
|
|
|
|
+ sysNo: '',
|
|
|
|
+ sysName: '',
|
|
|
|
+ sysRemark: ''
|
|
|
|
+ },
|
|
|
|
+ formQuery: {
|
|
|
|
+ sysNo: ''
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ viewForm: {
|
|
|
|
+ sysNo: '',
|
|
|
|
+ sysName: '',
|
|
|
|
+ sysRemark: '',
|
|
|
|
+ productCount: 0
|
|
|
|
+ },
|
|
|
|
+ rules: {
|
|
|
|
+ sysNo: [
|
|
|
|
+ { required: true, message: '请输入系统类别编号', trigger: 'blur' },
|
|
|
|
+ { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ sysName: [
|
|
|
|
+ { required: true, message: '请输入系统类别名称', trigger: 'blur' },
|
|
|
|
+ { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ async loadData() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ try {
|
|
|
|
+ list(this.formQuery).then(response => {
|
|
|
|
+ this.tableData = response.rows;
|
|
|
|
+ this.total = response.total;
|
|
|
|
+ this.loading = false;
|
|
|
|
+ });
|
|
|
|
+ } catch (error) {
|
|
|
|
+ this.$message.error('加载数据失败')
|
|
|
|
+ } finally {
|
|
|
|
+ this.loading = false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- async loadData() {
|
|
|
|
- this.loading = true
|
|
|
|
|
|
+ handleSearch() {
|
|
|
|
+ this.pagination.currentPage = 1
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
|
|
+ handleAdd() {
|
|
|
|
+ this.dialogTitle = '新建系统类别'
|
|
|
|
+ this.form = {
|
|
|
|
+ systemCode: '',
|
|
|
|
+ systemName: '',
|
|
|
|
+ sysRemark: ''
|
|
|
|
+ }
|
|
|
|
+ this.dialogVisible = true
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.form.clearValidate()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleEdit(row) {
|
|
|
|
+ this.dialogTitle = '编辑系统类别'
|
|
|
|
+ this.form = { ...row }
|
|
|
|
+ this.dialogVisible = true
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.form.clearValidate()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleView(row) {
|
|
|
|
+ this.viewForm = { ...row }
|
|
|
|
+ this.viewDialogVisible = true
|
|
|
|
+ },
|
|
|
|
+ handleDelete(row) {
|
|
|
|
+ this.$confirm('确认删除该系统类别?删除后不可恢复', '提示', {
|
|
|
|
+ type: 'warning',
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消'
|
|
|
|
+ }).then(async () => {
|
|
try {
|
|
try {
|
|
- list(this.searchQuery).then(response => {
|
|
|
|
- this.tableData = response.rows;
|
|
|
|
- this.total = response.total;
|
|
|
|
- this.loading = false;
|
|
|
|
- });
|
|
|
|
|
|
+ // await deleteSystemCategory(row.systemCode)
|
|
|
|
+ this.$message.success('删除成功')
|
|
|
|
+ this.loadData()
|
|
} catch (error) {
|
|
} catch (error) {
|
|
- this.$message.error('加载数据失败')
|
|
|
|
- } finally {
|
|
|
|
- this.loading = false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- handleSearch() {
|
|
|
|
- this.pagination.currentPage = 1
|
|
|
|
- this.loadData()
|
|
|
|
- },
|
|
|
|
- handleAdd() {
|
|
|
|
- this.dialogTitle = '新建系统类别'
|
|
|
|
- this.form = {
|
|
|
|
- systemCode: '',
|
|
|
|
- systemName: '',
|
|
|
|
- remark: ''
|
|
|
|
|
|
+ this.$message.error('删除失败')
|
|
}
|
|
}
|
|
- this.dialogVisible = true
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.$refs.form.clearValidate()
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- handleEdit(row) {
|
|
|
|
- this.dialogTitle = '编辑系统类别'
|
|
|
|
- this.form = { ...row }
|
|
|
|
- this.dialogVisible = true
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.$refs.form.clearValidate()
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- handleView(row) {
|
|
|
|
- this.viewForm = { ...row }
|
|
|
|
- this.viewDialogVisible = true
|
|
|
|
- },
|
|
|
|
- handleDelete(row) {
|
|
|
|
- this.$confirm('确认删除该系统类别?删除后不可恢复', '提示', {
|
|
|
|
- type: 'warning',
|
|
|
|
- confirmButtonText: '确定',
|
|
|
|
- cancelButtonText: '取消'
|
|
|
|
- }).then(async () => {
|
|
|
|
|
|
+ }).catch(() => {})
|
|
|
|
+ },
|
|
|
|
+ handleSizeChange(val) {
|
|
|
|
+ this.pagination.pageSize = val
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
|
|
+ handleCurrentChange(val) {
|
|
|
|
+ this.pagination.currentPage = val
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
|
|
+ cancelForm() {
|
|
|
|
+ this.dialogVisible = false
|
|
|
|
+ this.$refs.form.clearValidate()
|
|
|
|
+ },
|
|
|
|
+ async submitForm() {
|
|
|
|
+ this.$refs.form.validate(async (valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ this.submitLoading = true
|
|
try {
|
|
try {
|
|
- // await deleteSystemCategory(row.systemCode)
|
|
|
|
- this.$message.success('删除成功')
|
|
|
|
- this.loadData()
|
|
|
|
- } catch (error) {
|
|
|
|
- this.$message.error('删除失败')
|
|
|
|
- }
|
|
|
|
- }).catch(() => {})
|
|
|
|
- },
|
|
|
|
- handleSizeChange(val) {
|
|
|
|
- this.pagination.pageSize = val
|
|
|
|
- this.loadData()
|
|
|
|
- },
|
|
|
|
- handleCurrentChange(val) {
|
|
|
|
- this.pagination.currentPage = val
|
|
|
|
- this.loadData()
|
|
|
|
- },
|
|
|
|
- cancelForm() {
|
|
|
|
- this.dialogVisible = false
|
|
|
|
- this.$refs.form.clearValidate()
|
|
|
|
- },
|
|
|
|
- async submitForm() {
|
|
|
|
- this.$refs.form.validate(async (valid) => {
|
|
|
|
- if (valid) {
|
|
|
|
- this.submitLoading = true
|
|
|
|
- try {
|
|
|
|
- // if (this.dialogTitle === '新建系统类别') {
|
|
|
|
- // await createSystemCategory(this.form)
|
|
|
|
- // } else {
|
|
|
|
- // await updateSystemCategory(this.form)
|
|
|
|
- // }
|
|
|
|
|
|
+ // if (this.dialogTitle === '新建系统类别') {
|
|
|
|
+ // await createSystemCategory(this.form)
|
|
|
|
+ // } else {
|
|
|
|
+ // await updateSystemCategory(this.form)
|
|
|
|
+ // }
|
|
|
|
|
|
- add(this.form).then(response => {
|
|
|
|
- debugger;
|
|
|
|
- this.$modal.msgSuccess("新增成功");
|
|
|
|
- this.open = false;
|
|
|
|
- this.getList();
|
|
|
|
- });
|
|
|
|
|
|
+ add(this.form).then(response => {
|
|
|
|
+ this.open = false;
|
|
|
|
+ this.getList();
|
|
|
|
+ this.$modal.msgSuccess("新增成功");
|
|
|
|
|
|
- this.$message.success('保存成功')
|
|
|
|
- this.dialogVisible = false
|
|
|
|
- this.loadData()
|
|
|
|
- } catch (error) {
|
|
|
|
- this.$message.error('保存失败')
|
|
|
|
- } finally {
|
|
|
|
- this.submitLoading = false
|
|
|
|
- }
|
|
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ this.$message.success('保存成功')
|
|
|
|
+ this.dialogVisible = false
|
|
|
|
+ this.loadData()
|
|
|
|
+ } catch (error) {
|
|
|
|
+ this.$message.error('保存失败')
|
|
|
|
+ } finally {
|
|
|
|
+ this.submitLoading = false
|
|
}
|
|
}
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.loadData()
|
|
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.loadData()
|
|
}
|
|
}
|
|
- </script>
|
|
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
|
|
- <style scoped>
|
|
|
|
- .system-category-container {
|
|
|
|
- padding: 20px;
|
|
|
|
- }
|
|
|
|
- .operation-area {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- }
|
|
|
|
- </style>
|
|
|
|
|
|
+<style scoped>
|
|
|
|
+.system-category-container {
|
|
|
|
+ padding: 20px;
|
|
|
|
+}
|
|
|
|
+.operation-area {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+</style>
|