|
@@ -1,224 +1,224 @@
|
|
|
<template>
|
|
|
- <div class="spec-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>
|
|
|
-
|
|
|
- <!-- 表格区域 -->
|
|
|
- <el-table :data="tableData" style="width: 100%; margin-top: 20px">
|
|
|
- <el-table-column prop="specCode" label="规格编号" width="120"></el-table-column>
|
|
|
- <el-table-column prop="specName" label="规格名称" width="120"></el-table-column>
|
|
|
- <el-table-column prop="specType" label="规格值类型" width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag :type="scope.row.specType === '输入' ? 'primary' : scope.row.specType === '单选' ? 'success' : 'warning'">
|
|
|
- {{ scope.row.specType }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="specValue" label="规格值" width="180"></el-table-column>
|
|
|
- <el-table-column prop="category" label="所属分类"></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>
|
|
|
-
|
|
|
- <!-- 分页 -->
|
|
|
- <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"
|
|
|
+ <div class="spec-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-pagination>
|
|
|
-
|
|
|
- <!-- 新增/编辑对话框 -->
|
|
|
- <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
|
|
- <el-form :model="form" :rules="rules" ref="form" label-width="100px">
|
|
|
- <el-form-item label="规格编号" prop="specCode">
|
|
|
- <el-input v-model="form.specCode"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="规格名称" prop="specName">
|
|
|
- <el-input v-model="form.specName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="规格值类型" prop="specType">
|
|
|
- <el-select v-model="form.specType" style="width: 100%">
|
|
|
- <el-option label="输入" value="输入"></el-option>
|
|
|
- <el-option label="单选" value="单选"></el-option>
|
|
|
- <el-option label="复选" value="复选"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="规格值" prop="specValue">
|
|
|
- <el-input v-model="form.specValue" type="textarea"
|
|
|
- placeholder="多个值请用逗号分隔"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属分类" prop="category">
|
|
|
- <el-select v-model="form.category" style="width: 100%">
|
|
|
- <el-option label="全部" value="全部"></el-option>
|
|
|
- <el-option label="LCD,LED" value="LCD,LED"></el-option>
|
|
|
- <el-option label="DLP" value="DLP"></el-option>
|
|
|
- </el-select>
|
|
|
- </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>
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- export default {
|
|
|
- name: 'SpecManagement',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- searchQuery: '',
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- specCode: 'ckb',
|
|
|
- specName: '长宽比',
|
|
|
- specType: '输入',
|
|
|
- specValue: '',
|
|
|
- category: '全部'
|
|
|
- },
|
|
|
- {
|
|
|
- specCode: 'sxl',
|
|
|
- specName: '刷新率',
|
|
|
- specType: '单选',
|
|
|
- specValue: '75, 100, 120',
|
|
|
- category: 'LCD,LED'
|
|
|
- },
|
|
|
- {
|
|
|
- specCode: 'pmcz',
|
|
|
- specName: '屏幕材质',
|
|
|
- specType: '复选',
|
|
|
- specValue: '有机玻璃, 树脂',
|
|
|
- category: 'DLP'
|
|
|
- },
|
|
|
- {
|
|
|
- specCode: 'whfs',
|
|
|
- specName: '维护方式',
|
|
|
- specType: '单选',
|
|
|
- specValue: '前维护, 后维护',
|
|
|
- category: ''
|
|
|
- }
|
|
|
- ],
|
|
|
- pagination: {
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 10,
|
|
|
- total: 4
|
|
|
- },
|
|
|
- dialogVisible: false,
|
|
|
- dialogTitle: '',
|
|
|
- form: {
|
|
|
- specCode: '',
|
|
|
- specName: '',
|
|
|
- specType: '',
|
|
|
+
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <el-table :data="tableData" style="width: 100%; margin-top: 20px">
|
|
|
+ <el-table-column prop="pa_no" label="规格编号" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="ps_name" label="规格名称" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="specType" label="规格值类型" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.specType === '输入' ? 'primary' : scope.row.specType === '单选' ? 'success' : 'warning'">
|
|
|
+ {{ scope.row.specType }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="specValue" label="规格值" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="category" label="所属分类"></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>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <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="100px">
|
|
|
+ <el-form-item label="规格编号" prop="pa_no">
|
|
|
+ <el-input v-model="form.pa_no"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规格名称" prop="ps_name">
|
|
|
+ <el-input v-model="form.ps_name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规格值类型" prop="specType">
|
|
|
+ <el-select v-model="form.specType" style="width: 100%">
|
|
|
+ <el-option label="输入" value="输入"></el-option>
|
|
|
+ <el-option label="单选" value="单选"></el-option>
|
|
|
+ <el-option label="复选" value="复选"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规格值" prop="specValue">
|
|
|
+ <el-input v-model="form.specValue" type="textarea"
|
|
|
+ placeholder="多个值请用逗号分隔"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属分类" prop="category">
|
|
|
+ <el-select v-model="form.category" style="width: 100%">
|
|
|
+ <el-option label="全部" value="全部"></el-option>
|
|
|
+ <el-option label="LCD,LED" value="LCD,LED"></el-option>
|
|
|
+ <el-option label="DLP" value="DLP"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </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>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'SpecManagement',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchQuery: '',
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ pa_no: 'ckb',
|
|
|
+ ps_name: '长宽比',
|
|
|
+ specType: '输入',
|
|
|
specValue: '',
|
|
|
- category: ''
|
|
|
+ category: '全部'
|
|
|
},
|
|
|
- rules: {
|
|
|
- specCode: [
|
|
|
- { required: true, message: '请输入规格编号', trigger: 'blur' }
|
|
|
- ],
|
|
|
- specName: [
|
|
|
- { required: true, message: '请输入规格名称', trigger: 'blur' }
|
|
|
- ],
|
|
|
- specType: [
|
|
|
- { required: true, message: '请选择规格值类型', trigger: 'change' }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleSearch() {
|
|
|
- // 实现搜索逻辑
|
|
|
- console.log('搜索关键词:', this.searchQuery)
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- handleAdd() {
|
|
|
- this.dialogTitle = '新增规格'
|
|
|
- this.form = {
|
|
|
- specCode: '',
|
|
|
- specName: '',
|
|
|
- specType: '',
|
|
|
- specValue: '',
|
|
|
+ {
|
|
|
+ pa_no: 'sxl',
|
|
|
+ ps_name: '刷新率',
|
|
|
+ specType: '单选',
|
|
|
+ specValue: '75, 100, 120',
|
|
|
+ category: 'LCD,LED'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pa_no: 'pmcz',
|
|
|
+ ps_name: '屏幕材质',
|
|
|
+ specType: '复选',
|
|
|
+ specValue: '有机玻璃, 树脂',
|
|
|
+ category: 'DLP'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pa_no: 'whfs',
|
|
|
+ ps_name: '维护方式',
|
|
|
+ specType: '单选',
|
|
|
+ specValue: '前维护, 后维护',
|
|
|
category: ''
|
|
|
}
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- handleEdit(row) {
|
|
|
- this.dialogTitle = '编辑规格'
|
|
|
- this.form = { ...row }
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- handleDelete(row) {
|
|
|
- this.$confirm('确认删除该规格?', '提示', {
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- // 实现删除逻辑
|
|
|
- console.log('删除:', row)
|
|
|
- this.$message.success('删除成功')
|
|
|
- this.loadData()
|
|
|
- }).catch(() => {})
|
|
|
- },
|
|
|
- handleView(row) {
|
|
|
- // 实现查看逻辑
|
|
|
- console.log('查看:', row)
|
|
|
+ ],
|
|
|
+ pagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 4
|
|
|
},
|
|
|
- handleSizeChange(val) {
|
|
|
- this.pagination.pageSize = val
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.pagination.currentPage = val
|
|
|
- this.loadData()
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogTitle: '',
|
|
|
+ form: {
|
|
|
+ pa_no: '',
|
|
|
+ ps_name: '',
|
|
|
+ specType: '',
|
|
|
+ specValue: '',
|
|
|
+ category: ''
|
|
|
},
|
|
|
- submitForm() {
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- // 实现表单提交逻辑
|
|
|
- console.log('表单数据:', this.form)
|
|
|
- this.dialogVisible = false
|
|
|
- this.$message.success('保存成功')
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- loadData() {
|
|
|
- // 实现数据加载逻辑
|
|
|
- console.log('加载数据,当前页:', this.pagination.currentPage, '每页数量:', this.pagination.pageSize)
|
|
|
+ rules: {
|
|
|
+ pa_no: [
|
|
|
+ { required: true, message: '请输入规格编号', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ ps_name: [
|
|
|
+ { required: true, message: '请输入规格名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ specType: [
|
|
|
+ { required: true, message: '请选择规格值类型', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSearch() {
|
|
|
+ // 实现搜索逻辑
|
|
|
+ console.log('搜索关键词:', this.searchQuery)
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.dialogTitle = '新增规格'
|
|
|
+ this.form = {
|
|
|
+ pa_no: '',
|
|
|
+ ps_name: '',
|
|
|
+ specType: '',
|
|
|
+ specValue: '',
|
|
|
+ category: ''
|
|
|
}
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ this.dialogTitle = '编辑规格'
|
|
|
+ this.form = { ...row }
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确认删除该规格?', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // 实现删除逻辑
|
|
|
+ console.log('删除:', row)
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.loadData()
|
|
|
+ }).catch(() => {})
|
|
|
},
|
|
|
- created() {
|
|
|
+ handleView(row) {
|
|
|
+ // 实现查看逻辑
|
|
|
+ console.log('查看:', row)
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pagination.pageSize = val
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pagination.currentPage = val
|
|
|
this.loadData()
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // 实现表单提交逻辑
|
|
|
+ console.log('表单数据:', this.form)
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ this.loadData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+ // 实现数据加载逻辑
|
|
|
+ console.log('加载数据,当前页:', this.pagination.currentPage, '每页数量:', this.pagination.pageSize)
|
|
|
}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.loadData()
|
|
|
}
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped>
|
|
|
- .spec-container {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .operation-area {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- </style>
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.spec-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.operation-area {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|